Feat/kapi

.devcontainer/post-create.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 
-npm i
-npm run electron
+pnpm install
+pnpm run electron

.github/workflows/claude-code-review.yml

@@ -0,0 +1,57 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Optional: Filter by PR author
+    # if: |
+    #   github.event.pull_request.user.login == 'external-contributor' ||
+    #   github.event.pull_request.user.login == 'new-developer' ||
+    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            Please review this pull request and provide feedback on:
+            - Code quality and best practices
+            - Potential bugs or issues
+            - Performance considerations
+            - Security concerns
+            - Test coverage
+
+            Use the repository's CLAUDE.md for guidance on style and conventions. Be constructive and helpful in your feedback.
+
+            Use `gh pr comment` with your Bash tool to leave your review as a comment on the PR.
+
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
+          claude_args: '--allowed-tools "Bash(gh issue view:*),Bash(gh search:*),Bash(gh issue list:*),Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh pr list:*)"'
+

.github/workflows/claude.yml

@@ -0,0 +1,50 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'
+

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .cache
+.tmp
 npm-debug.log
 Thumbs.db
 node_modules/
@@ -23,3 +24,7 @@ product.overrides.json
 *.tsbuildinfo
 .vscode-test
 vscode-telemetry-docs/
+
+.kiro
+CLAUDE.md
+AGENTS.md

.kapi/EMPTY_SCREEN_ISSUE.md

@@ -0,0 +1,77 @@
+# Empty Screen Issue - Diagnosis and Solution
+
+## Problem
+The KAPI AI Agents (VSCode fork) shows an empty screen when running `make dev` with console errors like:
+```
+Failed to load module script: Expected a JavaScript-or-Wasm module script
+but the server responded with a MIME type of "text/css"
+```
+
+## Root Cause
+The TypeScript source files contain CSS imports like:
+```typescript
+import './hover.css';
+```
+
+These CSS imports were being compiled as regular ES module imports in the JavaScript output, causing the browser to try loading CSS files as JavaScript modules. The build system's TypeScript and ESBuild transpilers were not filtering out these CSS import statements.
+
+## Solution (FIXED ✅)
+The issue was fixed by modifying the build system to filter out CSS imports during transpilation:
+
+### Files Modified:
+1. **`build/lib/tsb/builder.ts`** (lines 155-159)
+   - Added CSS import filtering in the full TypeScript compiler output
+   - Removes CSS imports from JavaScript files before creating Vinyl output
+
+2. **`build/lib/tsb/transpiler.ts`**
+   - **Line 26**: Added CSS filtering to the `transpile()` function (TscTranspiler)
+   - **Line 366**: Added CSS filtering to the `ESBuildTranspiler.transpile()` method
+
+### The Fix:
+All transpilers now use this regex to remove CSS imports:
+```typescript
+contents = contents.replace(/^import\s+['"][^'"]*\.css['"];?\s*$/gm, '');
+```
+
+This regex:
+- Matches import statements that reference .css files
+- Only matches at the beginning of lines (^)
+- Handles both single and double quotes
+- Optionally matches trailing semicolons
+- Uses multiline mode (gm) to match across the entire file
+
+## Technical Details
+
+### How CSS is Actually Loaded
+VS Code doesn't use ES module imports for CSS. Instead, CSS files are:
+1. Bundled separately during the build process
+2. Injected into the application via the workbench loader
+3. The TypeScript import statements are just for development-time awareness
+
+The import statements in TypeScript like `import './hover.css'` serve as markers for the build system to know which CSS files need to be included, but they should never appear in the final JavaScript output.
+
+### Why This Wasn't Caught Upstream
+This issue is specific to the build configuration in the KAPI fork. The upstream VS Code repository has the same CSS import patterns, but their build system properly handles them. The difference likely stems from:
+- Different build tool versions
+- Different esbuild/TypeScript configurations
+- Missing build pipeline steps during the fork
+
+## Testing
+After applying the fix:
+```bash
+rm -rf out
+make watch-client
+# Compilation finishes with 0 errors
+# CSS imports successfully removed from JavaScript output
+grep -r "import.*\.css" out/vs  # No CSS imports found in JS files
+```
+
+## Status
+- ✅ Empty screen issue FIXED - CSS imports properly filtered during compilation
+- ✅ Build system now correctly handles CSS imports in all transpilation paths
+- ✅ Watch mode works correctly without MIME type errors
+- ✅ Development workflow restored
+
+## References
+- [esbuild Content Types](https://esbuild.github.io/content-types/)
+- [VS Code vscode-loader](https://github.com/microsoft/vscode-loader)