VS Code extension with support for Visual Studio Code web (github.dev, vscode.dev)

[konard]

Summary

This PR implements a complete VS Code extension that brings Deep Assistant AI capabilities directly into Visual Studio Code, with full support for web-based editors like github.dev and vscode.dev.

Key Features

✅ Web Extension Support - Works seamlessly on github.dev and vscode.dev in the browser
✅ Integrated Chat Interface - Beautiful chat panel in VS Code sidebar with VS Code theming
✅ Multiple AI Models - Support for GPT-4o, Claude, DeepSeek, o1-preview, and more
✅ API Integration - Connects to Deep Assistant API Gateway with token-based auth
✅ Energy Tracking - Shows token usage and energy consumption
✅ Dual Build - Separate bundles for desktop (Node.js) and web (WebWorker)

Implementation Details

Architecture

The extension follows VS Code's web extension guidelines:

• Desktop Entry: src/extension.ts → dist/extension.js (Node.js target)
• Web Entry: src/web/extension.ts → dist/web/extension.js (WebWorker target)
• Shared Code: apiClient.ts and chatViewProvider.ts work in both environments

API Integration

Integrates with the api-gateway:

• Uses /v1/chat/completions endpoint (OpenAI-compatible)
• Bearer token authentication
• Support for streaming and non-streaming responses
• Error handling for 401 (invalid token) and 429 (insufficient balance)

File Structure

├── src/
│   ├── extension.ts           # Desktop extension entry
│   ├── web/
│   │   └── extension.ts       # Web extension entry
│   ├── apiClient.ts           # API integration layer
│   └── chatViewProvider.ts    # Chat UI with webview
├── dist/                      # Webpack output (gitignored for dev, needed for packaging)
│   ├── extension.js           # Desktop bundle
│   └── web/
│       └── extension.js       # Web bundle
├── resources/
│   └── icon.svg               # Extension icon
├── package.json               # Extension manifest
├── webpack.config.js          # Dual build config
├── tsconfig.json              # TypeScript config
├── .vscodeignore              # Extension packaging rules
└── EXTENSION_README.md        # User documentation

Commands

• deepAssistant.chat - Open chat panel
• deepAssistant.clearChat - Clear conversation history
• deepAssistant.selectModel - Choose AI model
• deepAssistant.showSettings - Open extension settings

Configuration

Users can configure:

• deepAssistant.apiBaseUrl - API Gateway URL
• deepAssistant.apiToken - Authentication token
• deepAssistant.defaultModel - Preferred AI model
• deepAssistant.systemMessage - Custom system prompt
• deepAssistant.showTokenUsage - Display energy usage

Technical Highlights

1. Web-Compatible HTTP - Uses Fetch API instead of Node.js http/https
2. Webpack Bundling - Single-file bundles required for web extensions
3. TypeScript Strict Mode - Type-safe code with full IDE support
4. VS Code Theming - Webview uses CSS variables for consistent styling
5. Responsive UI - Chat interface adapts to VS Code theme changes

Testing Instructions

Local Testing (Desktop)

# Install dependencies
npm install

# Compile extension
npm run compile

# Press F5 in VS Code to launch Extension Development Host

Web Testing (github.dev simulation)

# Compile web extension
npm run compile-web

# Test in browser
npx @vscode/test-web --browserType=chromium --extensionDevelopmentPath=.

Real github.dev Testing

1. Build the extension: npm run package-web
2. Serve over HTTPS: npx serve --cors -l 5000 --ssl-cert cert.pem --ssl-key key.pem
3. Open any repo on github.dev
4. Run: "Developer: Install Extension From Location..."
5. Enter: https://localhost:5000

Future Enhancements

• Streaming response support
• Code snippet insertion from chat
• File context sharing with AI
• Conversation history persistence
• Voice input/output integration
• Image generation commands

Documentation

• User Guide: EXTENSION_README.md
• API Docs: api-gateway ARCHITECTURE.md

Fixes

Closes #26

---

🤖 This PR was created with Claude Code

[konard]

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

📎 Log file uploaded as GitHub Gist (327KB)
🔗 View complete solution draft log

---

Now working session is ended, feel free to review and add any feedback on the solution draft.