Unified Studio Architecture
CODITECT Unified Development Studio
Architecture Blueprint v1.0
Date: 2026-01-30
Status: Architecture Design
Based on:
- Production coditect-cloud-ide (https://coditect.ai)
- coditect-dev-ui (Next.js 14 development)
Executive Summary
Unify the existing production CODITECT Cloud IDE with the new Development Studio into a single, modular, multi-tenant platform. The unified studio will support:
- Theia IDE - Full professional cloud IDE (iframe embed)
- AI Studio - Lovable-style chat-to-code interface
- Dev Studio - Split-view chat + visualization (current coditect-dev-ui)
- Pitch Deck Studio - ADR-141 presentation generation
- LIMS Module - GxP compliance and data management
- Terminal - Embedded xterm.js terminal for CODITECT commands
Current State Analysis
Production: coditect-cloud-ide (https://coditect.ai)
Tech Stack:
- React 18 + TypeScript 5.3
- Chakra UI 2.8
- Vite 5.4
- Eclipse Theia 1.65 (iframe embed)
- Rust/Actix-web backend
- FoundationDB for sessions
- GCP GKE deployment
Routes:
- /ide → Theia IDE (full)
- /ai-studio → Lovable-style split (chat + preview)
- /workspace → VS Code-like (file explorer + Monaco + terminal)
- /docs, /support, /profile, etc.
Layout:
┌─────────────────────────────────────────────┐
│ Header (40px) │
├──────────┬──────────────────────────────────┤
│ │ Tab Content │
│ SidePanel│ ┌────────────────────────────┐ │
│ (300px) │ │ Theia / AI Studio / Workspace│ │
│ │ │ Session Tab Manager │ │
│ │ └────────────────────────────┘ │
├──────────┴──────────────────────────────────┤
│ Footer │
└─────────────────────────────────────────────┘
Development: coditect-dev-ui
Tech Stack:
- Next.js 14 + TypeScript
- Tailwind CSS
- Zustand state management
- Radix UI components
Current Layout:
┌─────────────────────────────────────────────┐
│ Header │
├───────┬─────────────────────────────────────┤
│Sidebar│ Chat Panel │ Viz Panel │
│ │ (resizable) │ (fullscreenable) │
│ │ │ │
├───────┴─────────────────────────────────────┤
│ Footer │
└─────────────────────────────────────────────┘
Unified Architecture
Module System
CODITECT Development Studio
│
├── Core Shell (Next.js 14 + Tailwind)
│ ├── Unified Header (branded CODITECT)
│ ├── Module Tabs (Theia | AI Studio | Dev Studio | Pitch Deck | LIMS)
│ ├── Collapsible Sidebar
│ ├── Terminal Drawer (slide-up)
│ └── Status Bar
│
├── Module: Theia IDE
│ └── iframe embed → /theia (existing)
│
├── Module: AI Studio
│ ├── TheiaChatWidget (existing)
│ └── PreviewPanel (existing)
│
├── Module: Dev Studio (coditect-dev-ui)
│ ├── ChatPanel
│ ├── VizPanel
│ └── ADR-141 Integration
│
├── Module: Pitch Deck Studio
│ ├── 11-step wizard
│ ├── Slide preview
│ └── PPTX export (PptxGenJS)
│
├── Module: LIMS
│ ├── Compliance dashboard
│ ├── Document management
│ └── Audit trails
│
└── Shared Services
├── Terminal (xterm.js)
├── Session management
├── Authentication
└── State (Zustand)
Terminal Integration Strategy
Option A: Theia Terminal (Recommended for production)
- Use Theia's built-in xterm.js terminal
- Embed via widget in slide-up drawer
- Runs CODITECT commands via WebSocket
- Already production-tested
// Terminal drawer component
<TerminalDrawer
isOpen={terminalOpen}
onClose={() => setTerminalOpen(false)}
sessionId={currentSessionId}
/>
Option B: Standalone xterm.js
- Direct xterm.js integration
- Custom WebSocket to backend
- More control, more work
Theia IDE Tab Integration
The Theia IDE will be one of the main tabs in the unified studio:
// Module registry
const modules: ModuleConfig[] = [
{
id: 'theia',
name: 'IDE',
icon: 'Code',
component: TheiaIDE,
requiresAuth: true,
},
{
id: 'ai-studio',
name: 'AI Studio',
icon: 'Sparkles',
component: AIStudio,
requiresAuth: true,
},
{
id: 'dev-studio',
name: 'Dev Studio',
icon: 'Terminal',
component: DevStudio,
requiresAuth: true,
},
{
id: 'pitch-deck',
name: 'Pitch Deck',
icon: 'Presentation',
component: PitchDeckStudio,
requiresAuth: true,
},
{
id: 'lims',
name: 'LIMS',
icon: 'Flask',
component: LIMSModule,
requiresAuth: true,
},
];
Technical Implementation Plan
Phase 1: Core Shell (Week 1)
-
Create unified project structure
submodules/products/coditect-development-studio/
├── apps/
│ └── web/ # Next.js 14 app
├── packages/
│ ├── ui/ # Shared UI components
│ ├── theia-integration/ # Theia iframe wrapper
│ ├── terminal/ # xterm.js terminal
│ └── state/ # Zustand stores
└── modules/
├── dev-studio/ # coditect-dev-ui
├── ai-studio/ # Lovable-style
├── pitch-deck/ # ADR-141
└── lims/ # GxP module -
Unified header with module tabs
- CODITECT branding
- Module selector (tabs or dropdown)
- User menu, theme toggle
- Terminal toggle button
-
Slide-up terminal drawer
- Fixed position bottom
- Resizable height
- CODITECT command support
Phase 2: Module Integration (Week 2-3)
-
Theia Module
- Copy TheiaEmbed component
- Integrate with module system
- Theme synchronization
-
Dev Studio Module
- Migrate coditect-dev-ui
- Adapt to module container
- Connect to terminal
-
AI Studio Module
- Copy from coditect-cloud-ide
- Adapt ChatPanel
- Theia integration
Phase 3: Pitch Deck & LIMS (Week 4)
-
Pitch Deck Studio
- Migrate from .claude/skills/pitch-deck-mastery/
- 11-step wizard
- API routes for PPTX generation
- Slide preview
-
LIMS Module
- GxP-themed interface
- Compliance workflows
- Document management
CODITECT Branding Guide
Based on production coditect-cloud-ide:
Colors
/* Primary */
--coditect-navy: #0a1628; /* Background */
--coditect-green: #00d084; /* Accents, success */
--coditect-blue: #3b82f6; /* Links, primary actions */
/* Secondary */
--coditect-slate: #1e293b; /* Cards, panels */
--coditect-gray: #64748b; /* Secondary text */
--coditect-light: #f1f5f9; /* Light mode background */
/* Status */
--status-success: #22c55e;
--status-warning: #f59e0b;
--status-error: #ef4444;
--status-info: #3b82f6;
Typography
- Primary: Inter, system-ui
- Monospace: JetBrains Mono, Fira Code
- Headers: 40px height (production standard)
Logo & Identity
- CODITECT wordmark
- "Built with Excellence by AZ1.AI CODITECT"
- Tagline: "Systematic Development. Continuous Context. Exceptional Results."
Terminal Commands to Support
/session-log [filter] - Show session history
/agent <name> - Switch active agent
/skill <name> - Load skill
/terminal - Toggle terminal
/ide - Switch to IDE module
/ai-studio - Switch to AI Studio
/dev-studio - Switch to Dev Studio
/pitch-deck - Switch to Pitch Deck
/lims - Switch to LIMS
/clear - Clear terminal
/help - Show commands
Deployment Strategy
Development
# Local development
npm run dev # Next.js dev server
cd theia-app && npm start # Theia IDE (port 3000)
Production (GKE)
# Build
npm run build
# Deploy
gcloud builds submit --config cloudbuild.yaml .
# Current prod: https://coditect.ai
# Deployed on: GCP GKE
# Ingress IP: 34.8.51.57
Migration Path
- Keep coditect-cloud-ide running at https://coditect.ai
- Develop unified studio in parallel
- Feature flag new modules
- Gradual rollout (canary deployment)
- Full cutover when stable
Open Questions
- Should we migrate from Chakra UI to Tailwind entirely?
- How to handle session sharing between modules?
- Should terminal be global or per-module?
- What's the priority order for module development?
Next Steps:
- Review architecture with team
- Set up unified project structure
- Begin Phase 1 implementation
- Integrate terminal component
- Port Theia module