feat: vscode extension (#59)
* feat: add initial VS Code extension plan and implementation tasks * feat(vscode): added initial version of an Openchamber VSCode extension * feat(vscode): enhance VS Code extension with theme integration and session management * feat(vscode): implement connection status handling and overlay in VSCode layout * feat: move extension to secondary sidebar * chore: upgrade @opencode-ai/sdk to 1.0.150 * vscode: editor bridge, file picker, click-to-open in tool parts * vscode: layout session lifecycle, theme sync, typography overrides * ui: compact mode for vscode, model search, autocomplete width fixes * perf: scroll force flag, raf placeholder, git polling backoff * ui: tool output styling, markdown code block fix, gitignore * refactor: update typography handling for VSCode runtime, remove unused styles * docs: update README with VS Code extension details and add extension image * docs: update changelog with new features and performance improvements
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
610ccf4c62
commit
bb72c0fb0c
Binary file not shown.
|
After Width: | Height: | Size: 976 KiB |
@@ -0,0 +1,165 @@
|
||||
# VS Code Extension Plan
|
||||
|
||||
Chat UI sidebar panel for VS Code that connects to OpenCode backend.
|
||||
|
||||
## Goals
|
||||
|
||||
- Sidebar webview panel with OpenChamber chat UI
|
||||
- Reuse `@openchamber/ui` components (ChatView, stores, hooks)
|
||||
- Auto-detect VS Code theme (light/dark) and adapt
|
||||
- Use workspace folder as OpenCode directory
|
||||
- Support `@file` mentions via VS Code workspace API
|
||||
|
||||
## Package Structure
|
||||
|
||||
```
|
||||
packages/vscode/
|
||||
├── src/
|
||||
│ ├── extension.ts # Extension entry, registers webview
|
||||
│ ├── ChatViewProvider.ts # WebviewViewProvider for sidebar
|
||||
│ ├── bridge.ts # Webview <-> Extension host messaging
|
||||
│ └── theme.ts # VS Code theme detection
|
||||
├── webview/
|
||||
│ ├── main.tsx # Webview React entry
|
||||
│ ├── App.tsx # Minimal App (chat-only, no layout)
|
||||
│ └── api/
|
||||
│ ├── index.ts # createVSCodeAPIs()
|
||||
│ ├── files.ts # File listing via extension host
|
||||
│ └── settings.ts # Theme/config from VS Code
|
||||
├── package.json # Extension manifest
|
||||
├── tsconfig.json
|
||||
├── tsconfig.webview.json
|
||||
└── vite.config.ts # Webview bundler
|
||||
```
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
### Phase 1: Extension Scaffold
|
||||
|
||||
1. Create `packages/vscode/` directory structure
|
||||
2. Create `package.json` with extension manifest
|
||||
- Sidebar view contribution
|
||||
- Commands (new session)
|
||||
- Configuration (API URL)
|
||||
3. Create `tsconfig.json` for extension host (Node.js)
|
||||
4. Create `tsconfig.webview.json` for webview (browser)
|
||||
5. Create `vite.config.ts` for webview bundling
|
||||
6. Add workspace reference in root `pnpm-workspace.yaml`
|
||||
|
||||
### Phase 2: Extension Host
|
||||
|
||||
1. `src/extension.ts` - activate/deactivate, register provider
|
||||
2. `src/ChatViewProvider.ts` - WebviewViewProvider implementation
|
||||
- Generate HTML with CSP
|
||||
- Handle webview lifecycle
|
||||
- Pass workspace folder to webview
|
||||
3. `src/bridge.ts` - Message handler for webview requests
|
||||
- `files:list` - list directory contents
|
||||
- `files:search` - fuzzy file search
|
||||
- `workspace:folder` - get workspace root
|
||||
4. `src/theme.ts` - Detect VS Code color theme kind
|
||||
|
||||
### Phase 3: Webview Runtime
|
||||
|
||||
1. `webview/main.tsx` - React entry point
|
||||
2. `webview/App.tsx` - Simplified app shell
|
||||
- No MainLayout/Header/Sidebar
|
||||
- Just ChatView + essential providers
|
||||
- Theme sync with VS Code
|
||||
3. `webview/api/index.ts` - createVSCodeAPIs()
|
||||
- RuntimeAPIs implementation
|
||||
- IPC bridge to extension host
|
||||
4. `webview/api/files.ts` - FilesAPI via postMessage
|
||||
5. `webview/api/settings.ts` - SettingsAPI (theme from VS Code)
|
||||
|
||||
### Phase 4: Theme Integration
|
||||
|
||||
1. Listen to `vscode.window.onDidChangeActiveColorTheme`
|
||||
2. Map VS Code theme kind to OpenChamber light/dark
|
||||
3. Post theme changes to webview
|
||||
4. Apply theme CSS variables dynamically
|
||||
|
||||
### Phase 5: File Context Support
|
||||
|
||||
1. Implement `files:list` in extension host using `vscode.workspace.fs`
|
||||
2. Implement `files:search` using `vscode.workspace.findFiles`
|
||||
3. Wire up to ChatInput `@file` autocomplete
|
||||
|
||||
### Phase 6: Build & Package
|
||||
|
||||
1. Add build scripts to `packages/vscode/package.json`
|
||||
2. Add root-level scripts (`vscode:dev`, `vscode:build`, `vscode:package`)
|
||||
3. Configure `.vscodeignore` for clean packaging
|
||||
4. Test extension in VS Code Extension Host
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Extension Host (Node.js)
|
||||
- `@types/vscode` - VS Code API types
|
||||
- `esbuild` - Bundle extension.ts
|
||||
|
||||
### Webview (Browser)
|
||||
- `@openchamber/ui` (workspace) - Shared UI components
|
||||
- `vite` + `@vitejs/plugin-react` - Bundle React app
|
||||
- `@opencode-ai/sdk` - OpenCode API client
|
||||
|
||||
## Extension Manifest Highlights
|
||||
|
||||
```json
|
||||
{
|
||||
"contributes": {
|
||||
"views": {
|
||||
"explorer": [{
|
||||
"type": "webview",
|
||||
"id": "openchamber.chatView",
|
||||
"name": "OpenChamber"
|
||||
}]
|
||||
},
|
||||
"commands": [{
|
||||
"command": "openchamber.newSession",
|
||||
"title": "OpenChamber: New Chat Session"
|
||||
}],
|
||||
"configuration": {
|
||||
"properties": {
|
||||
"openchamber.apiUrl": {
|
||||
"type": "string",
|
||||
"default": "http://localhost:47339"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Reused from @openchamber/ui
|
||||
|
||||
| Module | Status |
|
||||
|--------|--------|
|
||||
| `components/chat/*` | Reuse all |
|
||||
| `components/views/ChatView` | Reuse |
|
||||
| `stores/useSessionStore` | Reuse |
|
||||
| `stores/useConfigStore` | Reuse |
|
||||
| `stores/useUIStore` | Partial (no sidebar state) |
|
||||
| `hooks/useEventStream` | Reuse |
|
||||
| `hooks/useMessageSync` | Reuse |
|
||||
| `lib/opencode/client` | Reuse |
|
||||
| `lib/theme/*` | Reuse (CSS generation) |
|
||||
| `components/layout/*` | Skip |
|
||||
| `components/views/GitView` | Skip |
|
||||
| `components/views/DiffView` | Skip |
|
||||
| `components/views/TerminalView` | Skip |
|
||||
|
||||
## Not Needed (handled by VS Code)
|
||||
|
||||
- Terminal API (VS Code integrated terminal)
|
||||
- Git API (VS Code SCM)
|
||||
- Notifications API (VS Code notifications)
|
||||
- Permissions API (VS Code handles sandbox)
|
||||
- Directory picker (workspace folder used)
|
||||
|
||||
## Decisions
|
||||
|
||||
- **View location**: Explorer sidebar
|
||||
- **Sidebar icon**: Reuse from `packages/web/public/` (tab icon)
|
||||
- **Marketplace icon**: Reuse from `packages/desktop/src-tauri/icons/app-icon-checkpoint.svg`
|
||||
- **Publisher**: `fedaykindev` (dev.azure.com/fedaykindev, artmore@protonmail.com)
|
||||
Reference in New Issue
Block a user