# 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.
