# Demure Workspace – Production Architecture & Development Specification ## IMPORTANT: PRESERVE THE EXISTING APPLICATION **This project is NOT a redesign or rewrite of the Demure Workspace user interface.** The current design, layout, styling, branding, navigation, panels, animations, colors, spacing, responsiveness, and user experience have already been designed and approved. **Do NOT replace, redesign, reorganize, or simplify the existing interface.** This includes, but is not limited to: * Do NOT change the overall layout. * Do NOT move panels to different locations. * Do NOT redesign the sidebar. * Do NOT redesign the AI chat. * Do NOT redesign the editor. * Do NOT redesign the preview panel. * Do NOT redesign the navigation. * Do NOT change the color palette. * Do NOT replace components unless necessary to support the new backend functionality. * Do NOT remove existing animations. * Do NOT remove existing features. * Do NOT replace the design with something that looks like Replit, Bolt, Cursor, or Lovable. **The visual appearance of Demure Workspace should remain the same.** The objective is to upgrade **how the application works internally**, not how it looks. Think of this project as replacing the engine inside a car while keeping the same exterior, interior, dashboard, controls, and driving experience. --- # Goal Build Demure Workspace as a cloud-based Application Development Environment (ADE) similar in functionality to Replit, Bolt.new, Lovable, and Cursor while **preserving the existing Demure Workspace interface**. This is not a chatbot with a code editor. It is a complete browser-based development environment with: * Real-time AI coding * Live preview * Real project files * Isolated workspaces * Automatic builds * Live terminal * Real-time synchronization The goal is to make the existing interface behave like a professional cloud IDE without changing its design. --- # Existing Frontend The current React frontend should remain intact. Keep the existing: * Layout * Components * Panels * Navigation * Workspace arrangement * Styling * Branding * Icons * Animations * Responsive behavior * User experience Only replace or extend the underlying implementation where necessary to support the new architecture. If a component already exists, improve its functionality instead of replacing it. --- # Core Architecture The platform should consist of the following backend services while keeping the current frontend. Frontend (Existing React + TypeScript) * File Explorer * Monaco Code Editor * AI Chat * Terminal * Console * Git Panel * Database Panel * Preview Panel * Project Settings These should continue using the current UI. Backend API * Authentication * Workspace Manager * File Manager * Build Manager * AI Orchestrator * Deployment Service * Git Service * Database Service * WebSocket Gateway --- # Workspace Runtime Each project must run inside its own isolated Docker container. Each workspace should contain a complete project: /workspace/{project-id} Example: package.json vite.config.ts src/ public/ node_modules/ .env README.md Project files should exist on the backend filesystem. The React frontend should display and edit those files instead of storing them as temporary frontend state. --- # Live Preview Keep the existing Preview panel exactly where it is. Do not redesign it. Replace only the implementation behind it. Instead of rendering mock components, the Preview panel should display the running application from the workspace. Workflow: AI edits project files ↓ Backend writes files ↓ Filesystem updates ↓ Vite detects changes ↓ Hot Module Replacement (HMR) ↓ Development server rebuilds ↓ Existing Preview iframe updates automatically The user should never have to refresh the page manually. --- # File Editing Keep the existing editor interface. The editor should now edit real project files stored inside the workspace. Workflow: Read project tree ↓ Read file ↓ AI modifies file ↓ Write file ↓ Save ↓ Notify frontend ↓ Preview updates The backend should become the single source of truth. --- # WebSockets Use WebSockets for: * AI streaming * Build progress * File changes * Terminal output * Console logs * Preview status * Deployment progress * Git status The existing interface should simply receive these updates in real time. --- # File Watching Each workspace should monitor project files. Whenever a file changes: * Detect change * Trigger Vite HMR * Notify frontend * Update existing Preview panel automatically No page refreshes. --- # Preview Pipeline User Prompt ↓ AI ↓ Generate code ↓ Write project file ↓ Vite rebuild ↓ Hot Module Replacement ↓ Existing Preview iframe updates automatically Target latency: 150–500 ms. --- # Folder Structure Maintain the current frontend project organization wherever practical. If additional folders are required, add them without reorganizing existing code unnecessarily. Recommended additions: Frontend src/ app/ components/ features/ editor/ preview/ terminal/ files/ chat/ database/ deploy/ hooks/ services/ store/ utils/ styles/ types/ pages/ Backend server/ routes/ controllers/ services/ workspace/ docker/ websocket/ filesystem/ build/ deployment/ git/ database/ auth/ ai/ models/ jobs/ shared/ Workspace /workspace/{project} --- # Preview Environment Each workspace should automatically: * Install dependencies * Start the development server * Serve the application * Connect to the existing Preview iframe The Preview panel should continue looking exactly the same. Only its data source changes. --- # AI Responsibilities The AI should: * Read project files * Understand project structure * Modify existing code * Create files * Delete files * Rename files * Run builds * Run tests * Stream progress * Explain changes The AI should modify existing files whenever possible rather than replacing entire projects. --- # Frontend Features Retain the existing workspace layout. Existing panels should continue functioning: * Explorer * Search * AI Chat * Monaco Editor * Terminal * Console * Live Preview * Database Explorer * Deploy Panel * Git Panel * Environment Variables * Settings No visual redesign is required. Only improve functionality behind these panels. --- # Build Pipeline When the AI modifies code: 1. Save file 2. Trigger Vite 3. Compile changed modules 4. Send HMR update 5. Refresh existing Preview automatically 6. Stream build status to the UI Example: Reading project... Updating components... Installing dependencies... Running Vite... Compiling... Refreshing preview... Done. --- # Performance Goals Workspace startup: Under 5 seconds Preview updates: 150–500 milliseconds AI streaming: Immediate Terminal: Real-time WebSockets: Automatic reconnect --- # Scalability Use: * Docker * Redis * PostgreSQL * Object Storage * Nginx Reverse Proxy * Queue Workers * WebSockets The platform should support thousands of simultaneous workspaces. --- # Acceptance Criteria The completed application should **look the same** as the current Demure Workspace while behaving like a professional cloud IDE. Users should be able to: * Create projects * Edit files * Chat with AI * Watch code stream live * See the Preview panel update automatically * Run terminal commands * Install packages * Connect databases * Deploy applications * Manage Git repositories **The UI should remain visually consistent with the existing Demure Workspace.** The primary objective is to replace and improve the underlying architecture without redesigning or replacing the current interface.