Add architecture for browser-based VS Code with AI assistant (Developer Mode)

[konard]

🎯 Solution Overview

This pull request provides a comprehensive architecture design for integrating open-source VS Code and AI coding assistant (GitHub Copilot alternative) in the browser as a developer mode feature for the web application.

📋 Issue Reference

Fixes #9 - Integrate open-source VS Code and open-source GitHub Copilot in browser as developer mode in web app.

---

🏗️ Architecture Design

A complete architecture document has been created: DEVELOPER_MODE_ARCHITECTURE.md

Technology Stack

1. Browser-Based VS Code: OpenVSCode Server

• Direct fork of VS Code with minimal modifications
• Production-tested at scale (Gitpod, GitHub Codespaces)
• Full IDE features: terminal, extensions, file system, debugging
• Extension support via Open-VSX registry
• Docker deployment with per-user isolated containers

2. AI Coding Assistant: Tabby

• Self-hosted, privacy-focused alternative to GitHub Copilot
• OpenAPI interface for seamless integration
• Features:
  • Context-aware code completion
  • Chat interface for coding assistance
  • Repository context and embeddings
  • Support for multiple AI models (StarCoder, Qwen2, etc.)
  • VS Code extension for native integration
• Active development (v0.29 released May 2025)

3. Backend Infrastructure

• Web Framework: Node.js/Next.js
• API Gateway: Existing deep-assistant api-gateway
• Database: PostgreSQL for metadata
• Storage: S3-compatible (MinIO/AWS S3) for user files
• Session Management: Redis for caching
• Orchestration: Docker + Kubernetes

---

📐 High-Level Architecture

User Browser
    ├── Web Application Frontend (React/Next.js)
    │   └── Developer Mode Toggle → OpenVSCode Server (iframe)
    │       ├── Code Editor
    │       ├── Terminal
    │       ├── File Manager
    │       ├── Git Panel
    │       └── Tabby Extension (AI Assistant)
    │
Backend Infrastructure
    ├── API Gateway (authentication, routing, rate limiting)
    ├── OpenVSCode Server (per-user pods)
    │   └── User Workspace (ephemeral/persistent volume)
    ├── Tabby AI Service (shared/multi-tenant)
    │   ├── Code Completion Models
    │   ├── Chat Service
    │   └── Repository Context
    └── Persistent Storage
        ├── PostgreSQL (user/workspace metadata)
        ├── Redis (session cache)
        └── S3/MinIO (user files)

---

🗺️ Implementation Roadmap

Phase 1: MVP (Months 1-2)

• ✅ Architecture design completed
• 🔲 Docker setup for OpenVSCode Server
• 🔲 API Gateway integration
• 🔲 Basic authentication
• 🔲 Frontend iframe integration
• 🔲 Internal alpha testing

Deliverable: Working OpenVSCode Server accessible via web app with temporary workspace

Phase 2: AI Integration (Month 3)

• 🔲 Deploy Tabby service
• 🔲 Pre-install Tabby extension
• 🔲 Configure AI models
• 🔲 Test code completion
• 🔲 Implement chat interface

Deliverable: Functional AI code completion and chat assistant

Phase 3: Persistence & Scalability (Months 4-5)

• 🔲 S3/MinIO storage implementation
• 🔲 Workspace manager service
• 🔲 Save/restore functionality
• 🔲 Kubernetes deployment
• 🔲 Resource management and quotas

Deliverable: Production-ready scalable infrastructure with persistent workspaces

Phase 4: Advanced Features (Months 6-8)

• 🔲 Git integration (GitHub/GitLab OAuth)
• 🔲 Repository context for AI
• 🔲 Advanced AI features (code review, documentation)
• 🔲 Mobile-responsive UI
• 🔲 Beta testing and public launch

Deliverable: Full-featured developer mode with Git and advanced AI capabilities

---

🔒 Security Highlights

• Authentication: JWT-based for API Gateway, token-based for VS Code sessions
• Isolation: Per-user containerized workspaces with resource limits
• Encryption: TLS 1.3 in transit, KMS encryption at rest
• Network Security: Kubernetes network policies, CORS/CSP compliance
• Sandbox: Restricted system calls, limited network access, resource quotas

---

📊 Key Features

For Users

• Full VS Code experience in browser (no installation required)
• AI-powered code completion and assistance
• Support for all major programming languages
• Terminal access for running commands
• Git integration for version control
• Workspace persistence across devices
• Extension support from Open-VSX

For System

• Horizontal scalability (Kubernetes)
• Resource quotas per user
• Monitoring and alerting (Prometheus/Grafana)
• Automated backups
• 99.9% uptime SLA target

---

📝 Changes in This PR

New Files

• ✅ DEVELOPER_MODE_ARCHITECTURE.md - Comprehensive architecture documentation including:
  • Requirements (functional and non-functional)
  • Technology stack analysis and rationale
  • Architecture diagrams and data flows
  • Component breakdown with code examples
  • Integration strategy (4-phase roadmap)
  • Security considerations
  • Deployment strategy (dev/staging/production)
  • Monitoring and maintenance plans
  • Complete API specifications
  • Resource estimates and FAQ

Modified Files

• ✅ README.md - Added reference to Developer Mode architecture document

---

🎯 Rationale for Technology Choices

Why OpenVSCode Server?

• ✅ Direct VS Code fork (minimal divergence from upstream)
• ✅ Production-proven (Gitpod, GitHub Codespaces)
• ✅ Active maintenance and community
• ✅ Clean web deployment architecture
• ✅ MIT license
• ❌ Alternatives considered but rejected:
  • code-server: More opinionated, heavier modifications
  • Monaco Editor: Lacks full IDE features
  • VS Code for Web: Microsoft marketplace restrictions

Why Tabby?

• ✅ Self-hosted and privacy-focused
• ✅ OpenAPI interface for easy integration
• ✅ Active development (regular updates in 2025)
• ✅ Multiple AI model support (cloud + local)
• ✅ Built-in VS Code extension
• ✅ Repository context awareness
• ✅ Docker deployment ready
• ❌ Alternatives considered but rejected:
  • Continue.dev: More custom configuration needed
  • Cody: Requires Sourcegraph infrastructure
  • FauxPilot: Less actively maintained

---

🚀 Next Steps

1. Review & Approval: Team review of architecture document
2. Resource Allocation: Assign development team (5 engineers recommended)
3. Infrastructure Setup: Provision development/staging Kubernetes clusters
4. Phase 1 Implementation: Begin MVP development (Docker setup, basic integration)
5. Iterative Development: Follow 4-phase roadmap over 8 months

---

📚 Documentation

All technical details, diagrams, code examples, API specifications, and implementation guidance are available in:

📖 DEVELOPER_MODE_ARCHITECTURE.md

The architecture document includes:

• Complete component breakdown
• Sample code and configurations
• Database schemas
• Kubernetes manifests
• Docker compose files
• Security implementations
• Monitoring setup
• Disaster recovery procedures
• FAQ and troubleshooting

---

💡 Alignment with Mission

This feature directly supports the deep-assistant mission:

"Personal AI assistant that is available at any your device and can be hosted on your hardware or on in the cloud with easy migrations and synchronization between them."

Developer Mode enables:

• Access from any device (browser-based)
• Self-hosted or cloud deployment options
• Workspace synchronization across devices
• Professional development capabilities
• Privacy and data ownership

---

📈 Estimated Timeline & Resources

Timeline: 8 months for full implementation

• Phase 1 (MVP): 2 months
• Phase 2 (AI): 1 month
• Phase 3 (Production): 2 months
• Phase 4 (Advanced): 3 months

Team: 5 engineers (Backend, Frontend, DevOps, AI/ML, QA)

Budget: $100,000-200,000 (depending on scale and location)

---

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

[konard]

🤖 Solution Draft Log

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

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

---

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