diff --git a/DEVELOPER_MODE_ARCHITECTURE.md b/DEVELOPER_MODE_ARCHITECTURE.md new file mode 100644 index 0000000..aa5ae75 --- /dev/null +++ b/DEVELOPER_MODE_ARCHITECTURE.md @@ -0,0 +1,1282 @@ +# Developer Mode Architecture + +> Integration of open-source VS Code and AI coding assistant (Copilot alternative) in browser for web application + +**Status:** 🚧 Architecture Design / Planning Phase +**Related Issue:** [#9](https://github.com/deep-assistant/master-plan/issues/9) +**Priority:** Medium | **Complexity:** Very High + +--- + +## Table of Contents + +1. [Overview](#overview) +2. [Requirements](#requirements) +3. [Technology Stack](#technology-stack) +4. [Architecture Design](#architecture-design) +5. [Component Breakdown](#component-breakdown) +6. [Integration Strategy](#integration-strategy) +7. [Security Considerations](#security-considerations) +8. [Implementation Roadmap](#implementation-roadmap) +9. [Deployment Strategy](#deployment-strategy) +10. [Monitoring and Maintenance](#monitoring-and-maintenance) +11. [References](#references) + +--- + +## Overview + +The Developer Mode feature enables users to access a fully-featured, browser-based VS Code environment with AI-powered coding assistance, providing a seamless development experience directly within the web application. This feature aims to create a personal AI assistant that includes professional development tools accessible from any device. + +### Goals + +- Provide a browser-based VS Code experience with no local installation required +- Integrate AI-powered code completion and assistance (open-source Copilot alternative) +- Enable users to code, debug, and manage projects entirely in the browser +- Support multiple programming languages and frameworks +- Maintain data privacy and security for user code +- Allow easy migration between devices while maintaining workspace state + +### Non-Goals (Out of Scope) + +- Local desktop VS Code installation management +- Direct GitHub Copilot integration (proprietary) +- Full local development environment emulation +- Real-time collaborative editing (may be added later) + +--- + +## Requirements + +### Functional Requirements + +1. **Code Editor** + - Full-featured code editor with syntax highlighting + - IntelliSense and auto-completion + - Code formatting and linting + - File and folder management + - Multi-file editing with tabs + - Terminal access within the browser + +2. **AI Coding Assistant** + - Context-aware code completion + - Code generation from natural language descriptions + - Code explanation and documentation generation + - Bug detection and fix suggestions + - Refactoring suggestions + - Chat interface for coding questions + +3. **Extension Support** + - Support for VS Code extensions from Open-VSX registry + - Pre-installed essential extensions (language support, themes, etc.) + - User ability to install additional extensions + +4. **Workspace Management** + - Save and restore workspace state + - Project file synchronization + - Support for Git operations + - Import/export projects + +### Non-Functional Requirements + +1. **Performance** + - Fast initial load time (< 5 seconds) + - Responsive editor interactions (< 100ms latency) + - AI suggestions within 1-2 seconds + - Efficient resource usage (memory and CPU) + +2. **Security** + - Secure authentication and authorization + - Code encryption at rest and in transit + - Sandboxed execution environment + - API key management for AI services + - CORS and CSP compliance + +3. **Scalability** + - Support for multiple concurrent users + - Horizontal scaling capability + - Efficient resource allocation per user session + +4. **Availability** + - 99.9% uptime SLA + - Graceful degradation when AI service is unavailable + - Session persistence and recovery + +5. **Usability** + - Intuitive user interface + - Consistent with VS Code experience + - Mobile-responsive design (basic support) + - Accessible (WCAG 2.1 AA compliance) + +--- + +## Technology Stack + +### Core Components + +#### 1. Browser-Based VS Code + +**Selected Solution: OpenVSCode Server** + +**Rationale:** +- Direct fork of VS Code with minimal modifications +- Production-tested at scale (Gitpod, GitHub Codespaces) +- Active maintenance and community support +- Clean architecture for web deployment +- Open-source (MIT license) + +**Alternatives Considered:** +- **code-server (Coder):** More opinionated with additional features, but heavier and includes modifications that may diverge from upstream VS Code +- **Monaco Editor:** Lightweight but lacks full IDE features (terminal, extensions, file system) +- **Microsoft VS Code for Web:** Requires Microsoft marketplace access (not available for third-party use) + +**Key Features:** +- Full VS Code experience in browser +- Terminal support +- Extension marketplace via Open-VSX +- Git integration +- File system access +- Debugging support + +#### 2. AI Coding Assistant + +**Selected Solution: Tabby** + +**Rationale:** +- Self-hosted and privacy-focused +- OpenAPI interface for easy integration +- Active development with regular updates (v0.29 in May 2025) +- Support for multiple AI models (local and cloud-based) +- Built-in VS Code extension available +- Knowledge management with repository context +- Docker deployment support +- GPU support for performance + +**Alternatives Considered:** +- **Continue.dev:** Excellent flexibility, but requires more custom configuration and integration work +- **Cody (Sourcegraph):** Strong for enterprise, but requires Sourcegraph infrastructure +- **FauxPilot:** Less actively maintained, limited feature set + +**Key Features:** +- Code completion with repository context +- Chat interface for coding assistance +- OpenAI-compatible API +- VS Code extension for seamless integration +- Support for custom AI models +- GitLab/GitHub integration for context +- Document ingestion API +- LDAP/JWT authentication support + +#### 3. Backend Infrastructure + +**Proposed Stack:** +- **Web Framework:** Node.js with Express or Next.js +- **API Gateway:** Existing api-gateway from deep-assistant ecosystem +- **Database:** PostgreSQL for user data, workspace metadata +- **File Storage:** S3-compatible storage (MinIO, AWS S3, or similar) for user files +- **Session Management:** Redis for session state and caching +- **Container Orchestration:** Docker + Kubernetes for scalability + +#### 4. Frontend Integration + +**Proposed Stack:** +- **Web Framework:** React or Next.js (consistent with existing stack) +- **State Management:** Redux or Zustand +- **UI Components:** Tailwind CSS or Material-UI +- **Authentication:** JWT tokens, OAuth2 integration + +--- + +## Architecture Design + +### High-Level Architecture + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ User Browser │ +│ ┌──────────────────────────────────────────────────────────┐ │ +│ │ Web Application Frontend │ │ +│ │ ┌────────────┐ ┌────────────┐ ┌──────────────────┐ │ │ +│ │ │ Chat UI │ │ Dashboard │ │ Developer Mode │ │ │ +│ │ │ │ │ │ │ Toggle │ │ │ +│ │ └────────────┘ └────────────┘ └──────────────────┘ │ │ +│ └──────────────────────────────────────────────────────────┘ │ +│ │ │ +│ ┌───────────────────────────▼──────────────────────────────┐ │ +│ │ OpenVSCode Server (Embedded in iframe) │ │ +│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ +│ │ │ Editor │ │ Terminal │ │ File Manager │ │ │ +│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ +│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ +│ │ │ Extensions │ │ Tabby Plugin │ │ Git Panel │ │ │ +│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ +│ └──────────────────────────────────────────────────────────┘ │ +└───────────────────────────┬─────────────────────────────────────┘ + │ HTTPS + │ +┌───────────────────────────▼─────────────────────────────────────┐ +│ Backend Infrastructure │ +│ ┌────────────────────────────────────────────────────────────┐ │ +│ │ API Gateway │ │ +│ │ (Existing deep-assistant gateway) │ │ +│ └────────────────┬───────────────────────┬───────────────────┘ │ +│ │ │ │ +│ ┌────────────────▼────────┐ ┌──────────▼──────────────────┐ │ +│ │ OpenVSCode Server │ │ Tabby AI Service │ │ +│ │ (per-user pod) │ │ (shared/multi-tenant) │ │ +│ │ ┌──────────────────┐ │ │ ┌──────────────────────┐ │ │ +│ │ │ File System │ │ │ │ Code Completion │ │ │ +│ │ │ (ephemeral/pvc) │ │ │ │ Models │ │ │ +│ │ └──────────────────┘ │ │ └──────────────────────┘ │ │ +│ │ ┌──────────────────┐ │ │ ┌──────────────────────┐ │ │ +│ │ │ Extensions │ │ │ │ Chat Service │ │ │ +│ │ └──────────────────┘ │ │ └──────────────────────┘ │ │ +│ └─────────────┬───────────┘ │ ┌──────────────────────┐ │ │ +│ │ │ │ Repository Context │ │ │ +│ │ │ └──────────────────────┘ │ │ +│ │ └─────────────┬───────────────┘ │ +│ │ │ │ +│ ┌─────────────▼─────────────────────────────▼───────────────┐ │ +│ │ Persistent Storage Layer │ │ +│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ +│ │ │ PostgreSQL │ │ Redis │ │ S3/MinIO │ │ │ +│ │ │ (metadata) │ │ (cache) │ │ (user files) │ │ │ +│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ +│ └──────────────────────────────────────────────────────────┘ │ +└─────────────────────────────────────────────────────────────────┘ +``` + +### Data Flow Diagrams + +#### 1. User Initiates Developer Mode + +``` +User → Web App → API Gateway → Session Manager → OpenVSCode Server Pod + ↓ + Load workspace from S3 + ↓ + Initialize extensions (inc. Tabby) + ↓ + Return iframe URL with auth token + ↓ +Web App ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ + ↓ +Render OpenVSCode Server in iframe +``` + +#### 2. AI Code Completion Request + +``` +User types code → OpenVSCode Server → Tabby Extension → Tabby Service + ↓ + Load repo context + ↓ + Generate completion + ↓ +OpenVSCode Server ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ + ↓ +Display inline suggestion +``` + +#### 3. Save Workspace + +``` +User saves file → OpenVSCode Server → API Gateway → File Storage Service + ↓ + Save to S3/MinIO + ↓ + Update metadata in PostgreSQL + ↓ +OpenVSCode Server ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ + ↓ +Confirm save success +``` + +--- + +## Component Breakdown + +### 1. OpenVSCode Server Service + +**Responsibilities:** +- Serve VS Code interface in browser +- Manage user workspace and file system +- Provide terminal access +- Handle extension loading and management +- Execute code and run development servers + +**Configuration:** +```yaml +# docker-compose.yml example +openvscode-server: + image: gitpod/openvscode-server:latest + environment: + - OPENVSCODE_SERVER_ROOT=/workspace + - CONNECTION_TOKEN=${USER_TOKEN} + volumes: + - user-workspace:/workspace + - extensions:/root/.openvscode-server/extensions + ports: + - "3000:3000" + resources: + limits: + memory: 2Gi + cpu: 1000m + requests: + memory: 512Mi + cpu: 250m +``` + +**API Endpoints:** +- `GET /healthz` - Health check +- `GET /` - Main VS Code interface +- `WebSocket /` - Terminal and file system operations + +**Key Features:** +- Per-user isolated containers +- Automatic workspace persistence +- Pre-installed extensions +- Custom configuration injection + +### 2. Tabby AI Service + +**Responsibilities:** +- Provide code completion suggestions +- Handle chat-based coding assistance +- Maintain repository context and embeddings +- Manage AI model lifecycle + +**Configuration:** +```yaml +# docker-compose.yml example +tabby: + image: tabbyml/tabby:latest + command: serve --model StarCoder-1B --chat-model Qwen2 --device cuda + environment: + - TABBY_API_KEY=${TABBY_API_KEY} + - TABBY_MODEL_CACHE=/data/models + volumes: + - tabby-data:/data + ports: + - "8080:8080" + resources: + limits: + memory: 8Gi + cpu: 4000m + nvidia.com/gpu: 1 +``` + +**API Endpoints:** +- `GET /v1/health` - Health check +- `POST /v1/completions` - Code completion +- `POST /v1/chat/completions` - Chat interface +- `POST /v1beta/ingestion` - Document ingestion +- `GET /swagger-ui` - API documentation + +**Authentication:** +```http +Authorization: Bearer +``` + +**Sample Request (Code Completion):** +```json +POST /v1/completions +{ + "language": "python", + "segments": { + "prefix": "def fibonacci(n):\n ", + "suffix": "\n return result" + } +} +``` + +**Sample Response:** +```json +{ + "id": "cmpl-xxxxx", + "choices": [ + { + "text": "if n <= 1:\n return n\n result = fibonacci(n-1) + fibonacci(n-2)", + "index": 0 + } + ] +} +``` + +### 3. API Gateway Service + +**Responsibilities:** +- Route requests to appropriate services +- Implement authentication and authorization +- Rate limiting and quota management +- Request logging and monitoring +- SSL/TLS termination + +**Endpoints:** +- `POST /api/developer-mode/start` - Initialize developer session +- `POST /api/developer-mode/stop` - Terminate developer session +- `GET /api/developer-mode/status` - Get session status +- `GET /api/developer-mode/workspaces` - List user workspaces +- `POST /api/developer-mode/workspace/save` - Save workspace state +- `POST /api/developer-mode/workspace/restore` - Restore workspace + +### 4. Frontend Integration Component + +**Responsibilities:** +- Embed OpenVSCode Server in iframe +- Handle authentication token passing +- Manage session lifecycle +- Provide UI for mode switching +- Handle error states and fallbacks + +**Sample React Component:** +```typescript +import React, { useEffect, useState } from 'react'; + +interface DeveloperModeProps { + user: User; + workspaceId?: string; +} + +const DeveloperMode: React.FC = ({ user, workspaceId }) => { + const [sessionUrl, setSessionUrl] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const initializeSession = async () => { + try { + setLoading(true); + const response = await fetch('/api/developer-mode/start', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${user.token}` + }, + body: JSON.stringify({ workspaceId }) + }); + + if (!response.ok) { + throw new Error('Failed to start developer session'); + } + + const data = await response.json(); + setSessionUrl(data.url); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + initializeSession(); + + // Cleanup on unmount + return () => { + fetch('/api/developer-mode/stop', { + method: 'POST', + headers: { + 'Authorization': `Bearer ${user.token}` + } + }); + }; + }, [user.token, workspaceId]); + + if (loading) { + return
Initializing Developer Mode...
; + } + + if (error) { + return
Error: {error}
; + } + + return ( +