Upload 38 files

Dockerfile

@@ -0,0 +1,41 @@
+FROM python:3.11-slim
+
+# System dependencies
+RUN apt-get update && apt-get install -y \
+    curl \
+    gnupg \
+    build-essential \
+    zip \
+    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Frontend build
+COPY frontend/ /app/frontend/
+WORKDIR /app/frontend
+RUN npm ci && npm run build
+RUN mkdir -p /app/static && cp -r dist/* /app/static/
+
+# Backend
+WORKDIR /app
+COPY app/ /app/app/
+COPY start.sh /app/start.sh
+RUN chmod +x /app/start.sh
+
+# Create temp directories
+RUN mkdir -p /tmp/nexus_projects /tmp/nexus_previews
+
+EXPOSE 7860
+
+ENV PYTHONUNBUFFERED=1
+ENV HOST=0.0.0.0
+ENV PORT=7860
+
+CMD ["./start.sh"]

app/agents/__init__.py

@@ -0,0 +1,6 @@
+from app.agents.research import ResearchAgent
+from app.agents.orchestrator import OrchestratorAgent
+from app.agents.frontend_gen import FrontendAgent
+from app.agents.backend_gen import BackendAgent
+
+__all__ = ["ResearchAgent", "OrchestratorAgent", "FrontendAgent", "BackendAgent"]

app/agents/backend_gen.py

@@ -0,0 +1,67 @@
+from app.agents.base import BaseAgent
+
+
+class BackendAgent(BaseAgent):
+    role = "backend"
+    model_key = "backend"
+    temperature = 0.4
+    max_tokens = 24000
+    system_prompt = """You are the BACKEND, SECURITY, DATABASE & DEVOPS AGENT for Nexus Builder.
+
+YOUR ROLE: Generate complete backend code, database schemas, security configurations, and deployment files.
+
+TECH STACK:
+- Python FastAPI for backend API
+- Supabase for database (PostgreSQL) + Auth + Realtime + Edge Functions
+- PayPal REST API v2 for payments
+- Docker for containerization
+- Firebase Hosting for frontend deployment (config only)
+
+YOUR OUTPUTS INCLUDE:
+
+1. **Supabase SQL Schema** — Complete CREATE TABLE statements with:
+   - All columns, types, defaults, constraints
+   - Foreign key relationships
+   - Indexes for performance
+   - Row Level Security (RLS) policies
+   - Triggers (e.g., auto-create profile on signup)
+   - Realtime publication setup
+
+2. **FastAPI Backend** — Complete Python files:
+   - main.py with all routes
+   - Auth middleware (JWT verification via Supabase)
+   - PayPal integration (create order, capture, webhooks)
+   - Rate limiting middleware
+   - CORS configuration
+   - Input validation with Pydantic
+   - Error handling
+
+3. **Supabase Edge Functions** — TypeScript/Deno functions for:
+   - PayPal webhook verification
+   - Welcome email on signup
+   - Scheduled cleanup tasks
+
+4. **Security Layer**:
+   - SQL injection prevention (parameterized queries)
+   - XSS prevention headers
+   - CORS whitelist configuration
+   - Rate limiting per endpoint
+   - Input sanitization
+   - JWT token refresh logic
+
+5. **DevOps Files**:
+   - Dockerfile for backend
+   - docker-compose.yml for local development
+   - .env.example with all required variables documented
+   - firebase.json for hosting config
+   - .firebaserc for project linking
+   - Step-by-step deployment guide as DEPLOY.md
+
+RULES:
+1. Generate COMPLETE files — no placeholders or truncation
+2. All SQL must be valid PostgreSQL
+3. All Python must be valid, typed, and async where appropriate
+4. Security is paramount — never expose secrets, always validate input
+5. Each file must be marked with: # FILE: path/to/file.py or -- FILE: schema.sql
+
+OUTPUT FORMAT:

app/agents/base.py

@@ -0,0 +1,91 @@
+import json
+import httpx
+from typing import AsyncGenerator
+from app.config import settings
+
+
+class BaseAgent:
+    """Base class for all AI agents using OpenRouter API."""
+
+    role: str = ""
+    model_key: str = ""
+    system_prompt: str = ""
+    temperature: float = 0.7
+    max_tokens: int = 16000
+
+    @property
+    def model_id(self) -> str:
+        return settings.model_ids[self.model_key]
+
+    @property
+    def model_name(self) -> str:
+        return settings.model_names[self.model_key]
+
+    async def call(self, messages: list[dict], stream: bool = True) -> AsyncGenerator[str, None]:
+        """Call the model via OpenRouter, yielding streamed tokens."""
+        full_messages = [
+            {"role": "system", "content": self.system_prompt},
+            *messages,
+        ]
+        payload = {
+            "model": self.model_id,
+            "messages": full_messages,
+            "temperature": self.temperature,
+            "max_tokens": self.max_tokens,
+            "stream": stream,
+        }
+        headers = {
+            "Authorization": f"Bearer {settings.OPENROUTER_API_KEY}",
+            "Content-Type": "application/json",
+            "HTTP-Referer": "https://huggingface.co/spaces/nexus-builder",
+            "X-Title": "Nexus Builder",
+        }
+
+        if stream:
+            async with httpx.AsyncClient(timeout=settings.STREAM_TIMEOUT) as client:
+                async with client.stream(
+                    "POST",
+                    settings.OPENROUTER_BASE_URL,
+                    json=payload,
+                    headers=headers,
+                ) as response:
+                    if response.status_code != 200:
+                        body = await response.aread()
+                        raise Exception(
+                            f"OpenRouter error {response.status_code}: {body.decode()}"
+                        )
+                    async for line in response.aiter_lines():
+                        if not line.startswith("data: "):
+                            continue
+                        data_str = line[6:]
+                        if data_str.strip() == "[DONE]":
+                            break
+                        try:
+                            chunk = json.loads(data_str)
+                            delta = chunk["choices"][0].get("delta", {})
+                            content = delta.get("content", "")
+                            if content:
+                                yield content
+                        except (json.JSONDecodeError, KeyError, IndexError):
+                            continue
+        else:
+            async with httpx.AsyncClient(timeout=settings.STREAM_TIMEOUT) as client:
+                response = await client.post(
+                    settings.OPENROUTER_BASE_URL,
+                    json=payload,
+                    headers=headers,
+                )
+                if response.status_code != 200:
+                    raise Exception(
+                        f"OpenRouter error {response.status_code}: {response.text}"
+                    )
+                data = response.json()
+                content = data["choices"][0]["message"]["content"]
+                yield content
+
+    async def call_full(self, messages: list[dict]) -> str:
+        """Non-streaming call that returns the full response."""
+        result = []
+        async for token in self.call(messages, stream=False):
+            result.append(token)
+        return "".join(result)

app/agents/frontend_gen.py

@@ -0,0 +1,60 @@
+
+---
+
+## FILE: `app/agents/frontend_gen.py`
+
+```python
+from app.agents.base import BaseAgent
+
+
+class FrontendAgent(BaseAgent):
+    role = "frontend"
+    model_key = "frontend"
+    temperature = 0.6
+    max_tokens = 32000
+    system_prompt = """You are the FRONTEND CODE GENERATION AGENT for Nexus Builder.
+
+YOUR ROLE: Generate complete, production-ready frontend code for web applications based on a blueprint.
+
+TECH STACK (always use):
+- React 18+ with functional components and hooks
+- Tailwind CSS for styling
+- React Router v6 for routing
+- Supabase JS client (@supabase/supabase-js) for auth & database
+- @paypal/react-paypal-js for payment integration
+- Recharts for analytics charts
+- Lucide React for icons
+
+DESIGN SYSTEM (always follow):
+Dark Mode Colors:
+- Background: #0A0A0F
+- Surface/Cards: #111118
+- Borders: #1E1E2E
+- Primary accent: #6C63FF (electric purple)
+- Secondary accent: #00D9FF (cyan)
+- Text primary: #F0F0FF
+- Text secondary: #8888AA
+- Success: #22D3A8
+- Error: #FF4D6D
+- Warning: #FFB547
+
+Light Mode Colors:
+- Background: #F8F8FC
+- Surface: #FFFFFF
+- Borders: #E0E0EF
+- Primary accent: #5B53E8
+- Text primary: #0A0A1A
+- Text secondary: #666688
+
+RULES:
+1. Generate COMPLETE files — no placeholders, no "// ... rest of code", no truncation
+2. Every component must be fully functional with proper state management
+3. Use CSS variables for theming (dark/light mode toggle)
+4. Mobile-first responsive design
+5. Smooth animations and transitions (CSS transitions, not heavy libraries)
+6. Accessible markup (semantic HTML, ARIA labels, keyboard navigation)
+7. Error boundaries and loading states for all async operations
+8. Each file must be clearly marked with its path using: // FILE: path/to/file.jsx
+
+OUTPUT FORMAT:
+For each file, output:

app/agents/orchestrator.py

@@ -0,0 +1,100 @@
+from app.agents.base import BaseAgent
+
+
+class OrchestratorAgent(BaseAgent):
+    role = "orchestrator"
+    model_key = "orchestrator"
+    temperature = 0.5
+    max_tokens = 24000
+    system_prompt = """You are the MASTER ORCHESTRATOR for Nexus Builder. You are the brain of the system.
+
+YOUR ROLE: Take the user's app description + research data and produce a comprehensive app blueprint that frontend and backend agents will use to generate code.
+
+You must produce a MASTER BLUEPRINT in JSON format containing:
+
+## Blueprint Structure:
+
+```json
+{
+  "project_name": "string",
+  "description": "string",
+  "systems": {
+    "client_portal": {
+      "pages": [
+        {
+          "path": "/dashboard",
+          "title": "Dashboard",
+          "components": ["Sidebar", "StatsCards", "RecentActivity", "QuickActions"],
+          "description": "Main user dashboard showing project overview",
+          "auth_required": true,
+          "role_required": "user"
+        }
+      ],
+      "features": ["auth", "project_management", "billing", "settings"]
+    },
+    "public_landing": {
+      "pages": [...],
+      "features": ["hero", "pricing", "features", "signup", "seo"]
+    },
+    "marketing_cms": {
+      "pages": [...],
+      "features": ["blog_editor", "email_capture", "campaigns"]
+    },
+    "analytics_dashboard": {
+      "pages": [...],
+      "features": ["realtime_metrics", "charts", "user_tracking", "revenue"]
+    },
+    "admin_panel": {
+      "pages": [...],
+      "features": ["user_management", "moderation", "system_health", "logs"]
+    }
+  },
+  "database_schema": {
+    "tables": [
+      {
+        "name": "profiles",
+        "columns": [
+          {"name": "id", "type": "uuid", "primary": true, "references": "auth.users.id"},
+          {"name": "full_name", "type": "text"},
+          {"name": "role", "type": "text", "default": "user"},
+          {"name": "created_at", "type": "timestamptz", "default": "now()"}
+        ],
+        "rls_policies": [
+          {"name": "Users read own profile", "operation": "SELECT", "check": "auth.uid() = id"}
+        ]
+      }
+    ]
+  },
+  "api_endpoints": [
+    {"method": "POST", "path": "/api/auth/signup", "description": "Register new user"},
+    {"method": "POST", "path": "/api/payments/create-order", "description": "Create PayPal order"}
+  ],
+  "auth_config": {
+    "providers": ["email", "google", "github"],
+    "jwt_expiry": 3600,
+    "refresh_enabled": true
+  },
+  "payment_config": {
+    "provider": "paypal",
+    "plans": [
+      {"name": "Free", "price": 0, "features": ["1 project", "Basic analytics"]},
+      {"name": "Pro", "price": 29, "features": ["Unlimited projects", "Advanced analytics", "Priority support"]},
+      {"name": "Enterprise", "price": 99, "features": ["Everything in Pro", "Custom integrations", "SLA"]}
+    ]
+  },
+  "design_tokens": {
+    "colors": {
+      "primary": "#6C63FF",
+      "secondary": "#00D9FF",
+      "background": "#0A0A0F",
+      "surface": "#111118",
+      "text": "#F0F0FF"
+    },
+    "fonts": {
+      "heading": "Inter",
+      "body": "Inter",
+      "mono": "JetBrains Mono"
+    },
+    "border_radius": "12px"
+  }
+}

app/agents/research.py

@@ -0,0 +1,31 @@
+from app.agents.base import BaseAgent
+
+
+class ResearchAgent(BaseAgent):
+    role = "research"
+    model_key = "research"
+    temperature = 0.4
+    max_tokens = 8000
+    system_prompt = """You are the RESEARCH AGENT for Nexus Builder, an AI-powered web application generator.
+
+YOUR ROLE: Gather and synthesize technical knowledge to inform the app-building pipeline.
+
+When given a user's app idea, you must produce a structured JSON research report covering:
+
+1. **stack_recommendation**: Recommend the optimal frontend framework (React/Next.js), CSS approach (Tailwind), backend (FastAPI/Express), database (Supabase), and deployment target (Firebase Hosting).
+
+2. **schema_hints**: Suggest database tables, columns, and relationships relevant to this app type. Include Supabase-specific features like RLS policies, realtime subscriptions, and Edge Functions.
+
+3. **api_docs_summary**: Summarize the key API endpoints needed. Include PayPal integration endpoints (Orders API v2, Subscriptions API), Supabase Auth endpoints, and any domain-specific APIs.
+
+4. **security_notes**: List security best practices for this app type — authentication flows, input validation, CORS configuration, rate limiting, SQL injection prevention, XSS prevention.
+
+5. **hosting_notes**: Firebase Hosting configuration tips, environment variable management, Docker deployment considerations.
+
+6. **ui_patterns**: Recommend UI patterns, component structures, and UX flows that work well for this type of application.
+
+7. **competitor_analysis**: Brief analysis of similar apps and what features users expect.
+
+ALWAYS respond with valid JSON wrapped in ```json code blocks. Be thorough but concise.
+Keep recommendations modern (2024-2025 best practices).
+Prioritize: Supabase for DB/Auth, PayPal for payments, React+Tailwind for frontend, FastAPI for backend."""

app/config.py

@@ -0,0 +1,29 @@
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+
+class Settings:
+    OPENROUTER_API_KEY: str = os.getenv("OPENROUTER_API_KEY", "")
+    OPENROUTER_BASE_URL: str = "https://openrouter.ai/api/v1/chat/completions"
+
+    model_ids = {
+        "research": "z-ai/glm-4.5-air:free",
+        "orchestrator": "arcee-ai/trinity-large-preview:free",
+        "frontend": "qwen/qwen3-coder:free",
+        "backend": "minimax/minimax-m2.5:free",
+    }
+
+    model_names = {
+        "research": "GLM 4.5 Air",
+        "orchestrator": "Trinity Large Preview",
+        "frontend": "Qwen3 Coder 480B",
+        "backend": "MiniMax M2.5",
+    }
+
+    MAX_RETRIES: int = 3
+    STREAM_TIMEOUT: int = 120
+
+
+settings = Settings()

app/main.py

@@ -0,0 +1,249 @@
+import os
+import json
+import uuid
+import asyncio
+import shutil
+import zipfile
+from pathlib import Path
+from contextlib import asynccontextmanager
+
+from fastapi import FastAPI, Request, HTTPException, BackgroundTasks
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import (
+    FileResponse, JSONResponse, StreamingResponse, HTMLResponse
+)
+from fastapi.middleware.cors import CORSMiddleware
+from sse_starlette.sse import EventSourceResponse
+
+from app.config import settings
+from app.models.schemas import (
+    GenerateRequest, FixRequest, ProjectState, AgentMessage
+)
+from app.pipeline.engine import PipelineEngine
+
+# ── Global State ──────────────────────────────────────────────
+sessions: dict[str, ProjectState] = {}
+pipeline_engine = PipelineEngine()
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    Path("/tmp/nexus_projects").mkdir(parents=True, exist_ok=True)
+    Path("/tmp/nexus_previews").mkdir(parents=True, exist_ok=True)
+    yield
+    # cleanup on shutdown if desired
+
+
+app = FastAPI(
+    title="Nexus Builder API",
+    version="1.0.0",
+    lifespan=lifespan,
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# ── API Routes ────────────────────────────────────────────────
+
+@app.post("/api/generate")
+async def generate_project(req: GenerateRequest):
+    """Start a new project generation pipeline."""
+    session_id = str(uuid.uuid4())[:12]
+    project_dir = Path(f"/tmp/nexus_projects/{session_id}")
+    project_dir.mkdir(parents=True, exist_ok=True)
+    (project_dir / "frontend").mkdir(exist_ok=True)
+    (project_dir / "backend").mkdir(exist_ok=True)
+
+    state = ProjectState(
+        session_id=session_id,
+        user_prompt=req.prompt,
+        app_type=req.app_type or "saas",
+        status="queued",
+        project_dir=str(project_dir),
+        systems=req.systems or [
+            "client_portal", "public_landing",
+            "marketing_cms", "analytics_dashboard", "admin_panel"
+        ],
+    )
+    sessions[session_id] = state
+    # Pipeline runs in background; client listens via SSE
+    asyncio.create_task(pipeline_engine.run(state, sessions))
+    return {"session_id": session_id, "status": "started"}
+
+
+@app.get("/api/stream/{session_id}")
+async def stream_events(request: Request, session_id: str):
+    """SSE endpoint for real-time agent updates."""
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+
+    async def event_generator():
+        state = sessions[session_id]
+        last_idx = 0
+        while True:
+            if await request.is_disconnected():
+                break
+            messages = state.messages[last_idx:]
+            for msg in messages:
+                yield {
+                    "event": msg.event_type,
+                    "data": json.dumps(msg.model_dump(), default=str),
+                }
+            last_idx = len(state.messages)
+            if state.status in ("completed", "error"):
+                yield {
+                    "event": "done",
+                    "data": json.dumps({
+                        "status": state.status,
+                        "session_id": session_id,
+                    }),
+                }
+                break
+            await asyncio.sleep(0.3)
+
+    return EventSourceResponse(event_generator())
+
+
+@app.get("/api/status/{session_id}")
+async def get_status(session_id: str):
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+    state = sessions[session_id]
+    return {
+        "session_id": session_id,
+        "status": state.status,
+        "current_agent": state.current_agent,
+        "file_tree": state.file_tree,
+        "errors": state.errors,
+    }
+
+
+@app.get("/api/files/{session_id}")
+async def get_files(session_id: str):
+    """Return the generated file tree with contents."""
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+    state = sessions[session_id]
+    return {"files": state.generated_files}
+
+
+@app.get("/api/file/{session_id}/{path:path}")
+async def get_file_content(session_id: str, path: str):
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+    state = sessions[session_id]
+    content = state.generated_files.get(path)
+    if content is None:
+        raise HTTPException(404, "File not found")
+    return {"path": path, "content": content}
+
+
+@app.post("/api/fix/{session_id}")
+async def fix_bug(session_id: str, req: FixRequest):
+    """Send a bug report through the pipeline for targeted fixing."""
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+    state = sessions[session_id]
+    state.status = "fixing"
+    asyncio.create_task(pipeline_engine.fix(state, req.error_message, req.file_path))
+    return {"status": "fix_started"}
+
+
+@app.get("/api/export/{session_id}")
+async def export_project(session_id: str):
+    """Export the generated project as a ZIP file."""
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+    state = sessions[session_id]
+    zip_path = Path(f"/tmp/nexus_projects/{session_id}.zip")
+    with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
+        for file_path, content in state.generated_files.items():
+            zf.writestr(file_path, content)
+    return FileResponse(
+        zip_path,
+        filename=f"nexus-project-{session_id}.zip",
+        media_type="application/zip",
+    )
+
+
+@app.get("/api/preview/{session_id}")
+async def preview_landing(session_id: str):
+    """Serve a combined preview HTML of the generated app."""
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+    state = sessions[session_id]
+    # Look for index.html in generated files
+    for key in [
+        "frontend/index.html",
+        "public_landing/index.html",
+        "client_portal/index.html",
+        "index.html",
+    ]:
+        if key in state.generated_files:
+            return HTMLResponse(state.generated_files[key])
+    # Build a combined preview
+    html = _build_combined_preview(state)
+    return HTMLResponse(html)
+
+
+@app.get("/api/preview/{session_id}/{system}")
+async def preview_system(session_id: str, system: str):
+    if session_id not in sessions:
+        raise HTTPException(404, "Session not found")
+    state = sessions[session_id]
+    key = f"{system}/index.html"
+    if key in state.generated_files:
+        return HTMLResponse(state.generated_files[key])
+    html = _build_system_preview(state, system)
+    return HTMLResponse(html)
+
+
+def _build_combined_preview(state: ProjectState) -> str:
+    pages = []
+    for path, content in state.generated_files.items():
+        if path.endswith(".html"):
+            pages.append(f"<!-- {path} -->\n{content}")
+    if not pages:
+        return "<html><body style='background:#0A0A0F;color:#F0F0FF;font-family:sans-serif;display:flex;align-items:center;justify-content:center;height:100vh'><h1>⏳ Preview will appear here once generation completes</h1></body></html>"
+    return pages[0]
+
+
+def _build_system_preview(state: ProjectState, system: str) -> str:
+    system_files = {
+        k: v for k, v in state.generated_files.items()
+        if k.startswith(f"{system}/")
+    }
+    for path, content in system_files.items():
+        if path.endswith(".html"):
+            return content
+    return f"<html><body style='background:#0A0A0F;color:#F0F0FF;font-family:sans-serif;padding:40px'><h1>System: {system}</h1><p>No preview available yet.</p></body></html>"
+
+
+@app.get("/api/health")
+async def health():
+    return {"status": "ok", "models": settings.model_ids}
+
+
+# ── Serve Frontend ────────────────────────────────────────────
+static_dir = Path("/app/static")
+if static_dir.exists():
+    app.mount("/assets", StaticFiles(directory=static_dir / "assets"), name="assets")
+
+    @app.get("/{path:path}")
+    async def serve_frontend(path: str):
+        file_path = static_dir / path
+        if file_path.is_file():
+            return FileResponse(file_path)
+        return FileResponse(static_dir / "index.html")
+else:
+    @app.get("/")
+    async def root():
+        return HTMLResponse(
+            "<h1>Nexus Builder</h1><p>Frontend not built. Run npm build in /frontend</p>"
+        )

app/models/__init__.py

@@ -0,0 +1 @@
+undefined

app/models/schemas.py

@@ -0,0 +1,43 @@
+from __future__ import annotations
+from pydantic import BaseModel, Field
+from typing import Optional
+from datetime import datetime
+
+
+class GenerateRequest(BaseModel):
+    prompt: str
+    app_type: Optional[str] = "saas"
+    systems: Optional[list[str]] = None
+
+
+class FixRequest(BaseModel):
+    error_message: str
+    file_path: Optional[str] = None
+
+
+class AgentMessage(BaseModel):
+    event_type: str  # agent_start, token, code_block, agent_done, error, file_created
+    agent: str       # research, orchestrator, frontend, backend, system
+    content: str = ""
+    file_path: Optional[str] = None
+    timestamp: datetime = Field(default_factory=datetime.utcnow)
+    metadata: dict = Field(default_factory=dict)
+
+
+class ProjectState(BaseModel):
+    session_id: str
+    user_prompt: str
+    app_type: str = "saas"
+    status: str = "queued"  # queued, researching, orchestrating, building_frontend, building_backend, merging, completed, error, fixing
+    current_agent: str = ""
+    project_dir: str = ""
+    systems: list[str] = Field(default_factory=list)
+    messages: list[AgentMessage] = Field(default_factory=list)
+    generated_files: dict[str, str] = Field(default_factory=dict)
+    file_tree: list[str] = Field(default_factory=list)
+    errors: list[str] = Field(default_factory=list)
+    research_output: dict = Field(default_factory=dict)
+    blueprint: dict = Field(default_factory=dict)
+
+    class Config:
+        arbitrary_types_allowed = True

app/pipeline/__init__.py

@@ -0,0 +1 @@
+undefined

app/pipeline/engine.py

@@ -0,0 +1,555 @@
+import json
+import re
+import asyncio
+import traceback
+from datetime import datetime
+
+from app.agents import (
+    ResearchAgent, OrchestratorAgent, FrontendAgent, BackendAgent
+)
+from app.models.schemas import ProjectState, AgentMessage
+
+
+class PipelineEngine:
+    """Orchestrates the 4-agent pipeline for project generation."""
+
+    def __init__(self):
+        self.research_agent = ResearchAgent()
+        self.orchestrator_agent = OrchestratorAgent()
+        self.frontend_agent = FrontendAgent()
+        self.backend_agent = BackendAgent()
+
+    def _emit(self, state: ProjectState, event_type: str, agent: str,
+              content: str = "", file_path: str | None = None, metadata: dict | None = None):
+        msg = AgentMessage(
+            event_type=event_type,
+            agent=agent,
+            content=content,
+            file_path=file_path,
+            metadata=metadata or {},
+        )
+        state.messages.append(msg)
+
+    async def run(self, state: ProjectState, sessions: dict):
+        """Execute the full 4-agent pipeline."""
+        try:
+            # ── Phase 1: Research ──────────────────────────────
+            state.status = "researching"
+            state.current_agent = "research"
+            self._emit(state, "agent_start", "research",
+                       "🔍 Starting research phase...")
+
+            research_output = await self._run_research(state)
+            state.research_output = research_output
+
+            self._emit(state, "agent_done", "research",
+                       "✅ Research complete",
+                       metadata={"summary": str(research_output)[:500]})
+
+            # ── Phase 2: Orchestration ─────────────────────────
+            state.status = "orchestrating"
+            state.current_agent = "orchestrator"
+            self._emit(state, "agent_start", "orchestrator",
+                       "🧠 Creating master blueprint...")
+
+            blueprint = await self._run_orchestrator(state)
+            state.blueprint = blueprint
+
+            self._emit(state, "agent_done", "orchestrator",
+                       "✅ Blueprint created",
+                       metadata={"systems": list(blueprint.get("systems", {}).keys())})
+
+            # ── Phase 3 & 4: Frontend + Backend (parallel) ─────
+            state.status = "building"
+            self._emit(state, "agent_start", "system",
+                       "🚀 Starting parallel code generation...")
+
+            state.current_agent = "frontend+backend"
+            await asyncio.gather(
+                self._run_frontend(state),
+                self._run_backend(state),
+            )
+
+            # ── Phase 5: Merge & Finalize ──────────────────────
+            state.status = "merging"
+            state.current_agent = "system"
+            self._emit(state, "agent_start", "system",
+                       "📦 Merging outputs and building preview...")
+
+            self._build_file_tree(state)
+            self._generate_combined_preview(state)
+
+            state.status = "completed"
+            state.current_agent = ""
+            self._emit(state, "agent_done", "system",
+                       f"🎉 Project complete! {len(state.generated_files)} files generated.")
+
+        except Exception as e:
+            state.status = "error"
+            state.errors.append(str(e))
+            self._emit(state, "error", state.current_agent or "system",
+                       f"❌ Error: {str(e)}",
+                       metadata={"traceback": traceback.format_exc()})
+
+    async def _run_research(self, state: ProjectState) -> dict:
+        prompt = f"""Research the following app idea and produce a comprehensive technical report:
+
+APP IDEA: {state.user_prompt}
+APP TYPE: {state.app_type}
+REQUIRED SYSTEMS: {', '.join(state.systems)}
+
+Produce your report as a JSON object with keys: stack_recommendation, schema_hints, api_docs_summary, security_notes, hosting_notes, ui_patterns, competitor_analysis"""
+
+        full_response = []
+        async for token in self.research_agent.call(
+            [{"role": "user", "content": prompt}], stream=True
+        ):
+            full_response.append(token)
+            if len(full_response) % 20 == 0:
+                self._emit(state, "token", "research", token)
+
+        text = "".join(full_response)
+        self._emit(state, "token", "research", "\n[Research output received]")
+
+        # Parse JSON from response
+        return self._extract_json(text)
+
+    async def _run_orchestrator(self, state: ProjectState) -> dict:
+        prompt = f"""Create a master blueprint for this application:
+
+USER REQUEST: {state.user_prompt}
+APP TYPE: {state.app_type}
+SYSTEMS TO BUILD: {', '.join(state.systems)}
+
+RESEARCH DATA:
+{json.dumps(state.research_output, indent=2, default=str)[:8000]}
+
+Generate the complete master blueprint as a JSON object following the exact structure from your instructions. Customize everything for this specific app idea."""
+
+        full_response = []
+        async for token in self.orchestrator_agent.call(
+            [{"role": "user", "content": prompt}], stream=True
+        ):
+            full_response.append(token)
+            if len(full_response) % 15 == 0:
+                self._emit(state, "token", "orchestrator", token)
+
+        text = "".join(full_response)
+        return self._extract_json(text)
+
+    async def _run_frontend(self, state: ProjectState):
+        self._emit(state, "agent_start", "frontend",
+                   "🎨 Generating frontend code...")
+
+        for system in state.systems:
+            system_blueprint = state.blueprint.get("systems", {}).get(system, {})
+            design_tokens = state.blueprint.get("design_tokens", {})
+            payment_config = state.blueprint.get("payment_config", {})
+
+            prompt = f"""Generate the complete frontend code for the "{system}" system.
+
+SYSTEM BLUEPRINT:
+{json.dumps(system_blueprint, indent=2, default=str)}
+
+DESIGN TOKENS:
+{json.dumps(design_tokens, indent=2, default=str)}
+
+PAYMENT CONFIG:
+{json.dumps(payment_config, indent=2, default=str)}
+
+DATABASE SCHEMA (for reference):
+{json.dumps(state.blueprint.get('database_schema', {}), indent=2, default=str)[:4000]}
+
+Generate ALL files needed for this system. Use React + Tailwind CSS.
+Include: all page components, shared components, routing, Supabase client setup, theme system.
+Mark each file with: // FILE: {system}/src/ComponentName.jsx
+
+The app should look premium with the specified dark mode colors. Include animations and responsive design."""
+
+            full_response = []
+            async for token in self.frontend_agent.call(
+                [{"role": "user", "content": prompt}], stream=True
+            ):
+                full_response.append(token)
+                if len(full_response) % 10 == 0:
+                    self._emit(state, "token", "frontend", token)
+
+            text = "".join(full_response)
+            files = self._extract_files(text)
+
+            for path, content in files.items():
+                state.generated_files[path] = content
+                self._emit(state, "file_created", "frontend",
+                           f"Created {path}", file_path=path)
+
+        self._emit(state, "agent_done", "frontend",
+                   f"✅ Frontend generation complete")
+
+    async def _run_backend(self, state: ProjectState):
+        self._emit(state, "agent_start", "backend",
+                   "🔐 Generating backend code...")
+
+        db_schema = state.blueprint.get("database_schema", {})
+        api_endpoints = state.blueprint.get("api_endpoints", [])
+        auth_config = state.blueprint.get("auth_config", {})
+        payment_config = state.blueprint.get("payment_config", {})
+
+        prompt = f"""Generate the complete backend code for this application.
+
+DATABASE SCHEMA:
+{json.dumps(db_schema, indent=2, default=str)}
+
+API ENDPOINTS:
+{json.dumps(api_endpoints, indent=2, default=str)}
+
+AUTH CONFIG:
+{json.dumps(auth_config, indent=2, default=str)}
+
+PAYMENT CONFIG:
+{json.dumps(payment_config, indent=2, default=str)}
+
+APP DESCRIPTION: {state.user_prompt}
+
+Generate ALL files:
+1. Complete Supabase SQL schema (CREATE TABLE, RLS, triggers, indexes)
+2. FastAPI backend with all routes, auth middleware, PayPal integration
+3. Supabase Edge Functions (TypeScript)
+4. Docker configuration (Dockerfile, docker-compose.yml)
+5. Firebase hosting config
+6. .env.example
+7. DEPLOY.md with step-by-step deployment guide
+
+Mark each file clearly with: # FILE: backend/filename.py or -- FILE: database/schema.sql"""
+
+        full_response = []
+        async for token in self.backend_agent.call(
+            [{"role": "user", "content": prompt}], stream=True
+        ):
+            full_response.append(token)
+            if len(full_response) % 10 == 0:
+                self._emit(state, "token", "backend", token)
+
+        text = "".join(full_response)
+        files = self._extract_files(text)
+
+        for path, content in files.items():
+            state.generated_files[path] = content
+            self._emit(state, "file_created", "backend",
+                       f"Created {path}", file_path=path)
+
+        self._emit(state, "agent_done", "backend",
+                   "✅ Backend generation complete")
+
+    async def fix(self, state: ProjectState, error_message: str,
+                  file_path: str | None = None):
+        """Run a targeted bug fix through the appropriate agent."""
+        self._emit(state, "agent_start", "backend",
+                   f"🔧 Fixing bug: {error_message[:100]}...")
+
+        relevant_code = ""
+        if file_path and file_path in state.generated_files:
+            relevant_code = state.generated_files[file_path]
+
+        prompt = f"""FIX THIS BUG:
+
+ERROR: {error_message}
+
+{"FILE: " + file_path if file_path else ""}
+{"CODE:" + chr(10) + relevant_code[:8000] if relevant_code else ""}
+
+Provide the COMPLETE fixed file content. Mark it with the original file path."""
+
+        # Determine which agent to use based on file type
+        if file_path and any(file_path.endswith(ext) for ext in [".jsx", ".tsx", ".css", ".html"]):
+            agent = self.frontend_agent
+            agent_name = "frontend"
+        else:
+            agent = self.backend_agent
+            agent_name = "backend"
+
+        full_response = []
+        async for token in agent.call(
+            [{"role": "user", "content": prompt}], stream=True
+        ):
+            full_response.append(token)
+
+        text = "".join(full_response)
+        files = self._extract_files(text)
+
+        for path, content in files.items():
+            state.generated_files[path] = content
+            self._emit(state, "file_created", agent_name,
+                       f"Fixed {path}", file_path=path)
+
+        state.status = "completed"
+        self._emit(state, "agent_done", agent_name, "✅ Bug fix applied")
+
+    def _extract_json(self, text: str) -> dict:
+        """Extract JSON from a model response that may contain markdown."""
+        # Try to find JSON in code blocks
+        patterns = [
+            r'```json\s*([\s\S]*?)\s*```',
+            r'```\s*([\s\S]*?)\s*```',
+            r'\{[\s\S]*\}',
+        ]
+        for pattern in patterns:
+            matches = re.findall(pattern, text)
+            for match in matches:
+                try:
+                    return json.loads(match)
+                except json.JSONDecodeError:
+                    continue
+
+        # If no valid JSON found, create a minimal structure
+        return {
+            "project_name": "generated-app",
+            "description": text[:200],
+            "systems": {
+                "client_portal": {"pages": [{"path": "/dashboard", "title": "Dashboard", "components": ["Layout", "Stats"], "auth_required": True}], "features": ["auth", "dashboard"]},
+                "public_landing": {"pages": [{"path": "/", "title": "Home", "components": ["Hero", "Features", "Pricing"], "auth_required": False}], "features": ["hero", "pricing"]},
+                "marketing_cms": {"pages": [{"path": "/blog", "title": "Blog", "components": ["BlogList", "Editor"], "auth_required": True}], "features": ["blog"]},
+                "analytics_dashboard": {"pages": [{"path": "/analytics", "title": "Analytics", "components": ["Charts", "Metrics"], "auth_required": True}], "features": ["charts"]},
+                "admin_panel": {"pages": [{"path": "/admin", "title": "Admin", "components": ["UserTable", "Settings"], "auth_required": True}], "features": ["user_management"]},
+            },
+            "database_schema": {"tables": []},
+            "api_endpoints": [],
+            "auth_config": {"providers": ["email"]},
+            "payment_config": {"provider": "paypal", "plans": []},
+            "design_tokens": {
+                "colors": {"primary": "#6C63FF", "secondary": "#00D9FF", "background": "#0A0A0F", "surface": "#111118", "text": "#F0F0FF"},
+                "fonts": {"heading": "Inter", "body": "Inter", "mono": "JetBrains Mono"},
+            },
+        }
+
+    def _extract_files(self, text: str) -> dict[str, str]:
+        """Extract file contents from model output marked with FILE: comments."""
+        files = {}
+        # Match patterns like: // FILE: path/to/file.jsx  or  # FILE: path/to/file.py  or  -- FILE: path/to/file.sql
+        pattern = r'(?://|#|--)\s*FILE:\s*(.+?)(?:\n)([\s\S]*?)(?=(?://|#|--)\s*FILE:|$)'
+        matches = re.findall(pattern, text)
+
+        if matches:
+            for file_path, content in matches:
+                path = file_path.strip()
+                # Clean content — remove trailing code block markers
+                content = re.sub(r'\s*```\s*$', '', content.strip())
+                content = re.sub(r'^```\w*\s*', '', content.strip())
+                files[path] = content.strip()
+        else:
+            # Fallback: try to extract from code blocks with filenames
+            code_blocks = re.findall(
+                r'(?:#+\s*)?(?:`([^`]+)`|(\S+\.\w+))\s*\n```\w*\n([\s\S]*?)```',
+                text
+            )
+            for name1, name2, content in code_blocks:
+                name = name1 or name2
+                if name and content.strip():
+                    files[name.strip()] = content.strip()
+
+        # If still no files extracted, save as raw output
+        if not files:
+            if "def " in text or "import " in text:
+                files["backend/generated_output.py"] = text
+            elif "function " in text or "const " in text or "import " in text:
+                files["frontend/generated_output.jsx"] = text
+            elif "CREATE TABLE" in text.upper():
+                files["database/schema.sql"] = text
+            else:
+                files["output/raw_output.txt"] = text
+
+        return files
+
+    def _build_file_tree(self, state: ProjectState):
+        """Build a sorted file tree from generated files."""
+        state.file_tree = sorted(state.generated_files.keys())
+
+    def _generate_combined_preview(self, state: ProjectState):
+        """Generate a combined HTML preview page for the app."""
+        design = state.blueprint.get("design_tokens", {})
+        colors = design.get("colors", {})
+        project_name = state.blueprint.get("project_name", "Generated App")
+        systems = state.blueprint.get("systems", {})
+
+        system_cards = ""
+        for sys_name, sys_data in systems.items():
+            pages = sys_data.get("pages", [])
+            features = sys_data.get("features", [])
+            page_list = "".join(
+                f'<li>{p.get("title", p.get("path", "Page"))}</li>'
+                for p in pages[:5]
+            )
+            feature_list = "".join(f'<span class="tag">{f}</span>' for f in features[:6])
+            nice_name = sys_name.replace("_", " ").title()
+            system_cards += f"""
+            <div class="system-card">
+                <h3>{nice_name}</h3>
+                <div class="tags">{feature_list}</div>
+                <ul>{page_list}</ul>
+                <div class="page-count">{len(pages)} pages</div>
+            </div>"""
+
+        file_count = len(state.generated_files)
+        file_types = {}
+        for f in state.generated_files:
+            ext = f.rsplit(".", 1)[-1] if "." in f else "other"
+            file_types[ext] = file_types.get(ext, 0) + 1
+        file_stats = " • ".join(f"{count} .{ext}" for ext, count in sorted(file_types.items()))
+
+        preview_html = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{project_name} — Preview</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
+        body {{
+            font-family: 'Inter', sans-serif;
+            background: {colors.get('background', '#0A0A0F')};
+            color: {colors.get('text', '#F0F0FF')};
+            min-height: 100vh;
+            padding: 2rem;
+        }}
+        .container {{ max-width: 1200px; margin: 0 auto; }}
+        .hero {{
+            text-align: center;
+            padding: 4rem 2rem;
+            background: linear-gradient(135deg, {colors.get('surface', '#111118')} 0%, {colors.get('background', '#0A0A0F')} 100%);
+            border-radius: 24px;
+            border: 1px solid #1E1E2E;
+            margin-bottom: 2rem;
+        }}
+        .hero h1 {{
+            font-size: 3rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, {colors.get('primary', '#6C63FF')}, {colors.get('secondary', '#00D9FF')});
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 1rem;
+        }}
+        .hero p {{ color: #8888AA; font-size: 1.2rem; max-width: 600px; margin: 0 auto; }}
+        .stats {{
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+            flex-wrap: wrap;
+        }}
+        .stat {{
+            background: #111118;
+            border: 1px solid #1E1E2E;
+            border-radius: 12px;
+            padding: 1rem 1.5rem;
+            text-align: center;
+        }}
+        .stat-value {{
+            font-size: 2rem;
+            font-weight: 700;
+            color: {colors.get('primary', '#6C63FF')};
+        }}
+        .stat-label {{ color: #8888AA; font-size: 0.85rem; margin-top: 0.25rem; }}
+        .systems-grid {{
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }}
+        .system-card {{
+            background: #111118;
+            border: 1px solid #1E1E2E;
+            border-radius: 16px;
+            padding: 1.5rem;
+            transition: all 0.3s ease;
+        }}
+        .system-card:hover {{
+            border-color: {colors.get('primary', '#6C63FF')}44;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 32px {colors.get('primary', '#6C63FF')}11;
+        }}
+        .system-card h3 {{
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: {colors.get('text', '#F0F0FF')};
+        }}
+        .tags {{ display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }}
+        .tag {{
+            background: {colors.get('primary', '#6C63FF')}22;
+            color: {colors.get('primary', '#6C63FF')};
+            padding: 0.2rem 0.6rem;
+            border-radius: 6px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }}
+        ul {{ list-style: none; margin-bottom: 0.75rem; }}
+        li {{
+            padding: 0.3rem 0;
+            color: #8888AA;
+            font-size: 0.9rem;
+            border-bottom: 1px solid #1E1E2E;
+        }}
+        li:last-child {{ border-bottom: none; }}
+        .page-count {{
+            color: {colors.get('secondary', '#00D9FF')};
+            font-size: 0.8rem;
+            font-weight: 500;
+        }}
+        .file-info {{
+            text-align: center;
+            margin-top: 2rem;
+            padding: 1rem;
+            color: #8888AA;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.85rem;
+        }}
+        .section-title {{
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }}
+        @keyframes fadeIn {{
+            from {{ opacity: 0; transform: translateY(10px); }}
+            to {{ opacity: 1; transform: translateY(0); }}
+        }}
+        .system-card {{ animation: fadeIn 0.5s ease forwards; }}
+        .system-card:nth-child(2) {{ animation-delay: 0.1s; }}
+        .system-card:nth-child(3) {{ animation-delay: 0.2s; }}
+        .system-card:nth-child(4) {{ animation-delay: 0.3s; }}
+        .system-card:nth-child(5) {{ animation-delay: 0.4s; }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="hero">
+            <h1>{project_name}</h1>
+            <p>{state.user_prompt[:200]}</p>
+            <div class="stats">
+                <div class="stat">
+                    <div class="stat-value">{len(systems)}</div>
+                    <div class="stat-label">Systems</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-value">{file_count}</div>
+                    <div class="stat-label">Files Generated</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-value">{sum(len(s.get('pages',[])) for s in systems.values())}</div>
+                    <div class="stat-label">Total Pages</div>
+                </div>
+            </div>
+        </div>
+
+        <h2 class="section-title">Generated Systems</h2>
+        <div class="systems-grid">
+            {system_cards}
+        </div>
+
+        <div class="file-info">
+            {file_stats}
+        </div>
+    </div>
+</body>
+</html>"""
+
+        state.generated_files["preview/index.html"] = preview_html

app/preview/__init__.py

@@ -0,0 +1 @@
+undefined

app/preview/builder.py

@@ -0,0 +1,45 @@
+"""Preview builder utilities — generates live previews of generated apps."""
+
+import subprocess
+from pathlib import Path
+
+
+def build_frontend_preview(project_dir: str, session_id: str) -> str | None:
+    """Attempt to build a frontend project for live preview.
+
+    Returns the path to built files, or None if build is not possible
+    (e.g., no package.json, or npm not available on CPU tier).
+    """
+    frontend_dir = Path(project_dir) / "frontend"
+    package_json = frontend_dir / "package.json"
+
+    if not package_json.exists():
+        return None
+
+    try:
+        # Install deps
+        subprocess.run(
+            ["npm", "install"],
+            cwd=str(frontend_dir),
+            timeout=120,
+            capture_output=True,
+        )
+        # Build
+        result = subprocess.run(
+            ["npm", "run", "build"],
+            cwd=str(frontend_dir),
+            timeout=120,
+            capture_output=True,
+        )
+        if result.returncode == 0:
+            dist_dir = frontend_dir / "dist"
+            if dist_dir.exists():
+                preview_dir = f"/tmp/nexus_previews/{session_id}"
+                Path(preview_dir).mkdir(parents=True, exist_ok=True)
+                import shutil
+                shutil.copytree(str(dist_dir), preview_dir, dirs_exist_ok=True)
+                return preview_dir
+    except (subprocess.TimeoutExpired, FileNotFoundError):
+        pass
+
+    return None

fronend/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NEXUS Builder — AI Full-Stack App Maker</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

fronend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nexus-builder-ui",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "lucide-react": "^0.469.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.5"
+  }
+}

fronend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

fronend/src/App.jsx

@@ -0,0 +1,221 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import Header from './components/Header'
+import ControlPanel from './components/ControlPanel'
+import LivePreview from './components/LivePreview'
+import StatusBar from './components/StatusBar'
+import { useSSE } from './hooks/useSSE'
+import { generateProject, getProjectStatus, getProjectFiles, exportProject, fixBug } from './utils/api'
+
+const INITIAL_AGENTS = {
+  research: { name: 'GLM 4.5 Air', status: 'idle', icon: '🌐' },
+  orchestrator: { name: 'Trinity Large', status: 'idle', icon: '🧠' },
+  frontend: { name: 'Qwen3 Coder', status: 'idle', icon: '🎨' },
+  backend: { name: 'MiniMax M2.5', status: 'idle', icon: '🔐' },
+}
+
+export default function App() {
+  const [sessionId, setSessionId] = useState(null)
+  const [status, setStatus] = useState('idle')
+  const [agents, setAgents] = useState(INITIAL_AGENTS)
+  const [messages, setMessages] = useState([])
+  const [agentFeed, setAgentFeed] = useState([])
+  const [files, setFiles] = useState({})
+  const [fileTree, setFileTree] = useState([])
+  const [selectedFile, setSelectedFile] = useState(null)
+  const [previewSystem, setPreviewSystem] = useState('preview')
+  const [viewMode, setViewMode] = useState('preview') // preview | code
+  const [errors, setErrors] = useState([])
+
+  // Handle SSE events from the pipeline
+  const handleSSEEvent = useCallback((event) => {
+    const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
+
+    switch (event.type || data.event_type) {
+      case 'agent_start':
+        setAgents(prev => ({
+          ...prev,
+          [data.agent]: { ...prev[data.agent], status: 'active' }
+        }))
+        setAgentFeed(prev => [...prev, {
+          agent: data.agent,
+          content: data.content,
+          time: new Date().toLocaleTimeString(),
+          type: 'start'
+        }])
+        setStatus(data.content || 'Working...')
+        break
+
+      case 'token':
+        setAgentFeed(prev => {
+          const last = prev[prev.length - 1]
+          if (last && last.agent === data.agent && last.type === 'stream') {
+            return [...prev.slice(0, -1), { ...last, content: last.content + data.content }]
+          }
+          return [...prev, {
+            agent: data.agent,
+            content: data.content,
+            time: new Date().toLocaleTimeString(),
+            type: 'stream'
+          }]
+        })
+        break
+
+      case 'file_created':
+        setAgentFeed(prev => [...prev, {
+          agent: data.agent,
+          content: data.content,
+          time: new Date().toLocaleTimeString(),
+          type: 'file',
+          filePath: data.file_path
+        }])
+        if (data.file_path) {
+          setFileTree(prev => {
+            const newTree = [...new Set([...prev, data.file_path])]
+            return newTree.sort()
+          })
+        }
+        break
+
+      case 'agent_done':
+        setAgents(prev => ({
+          ...prev,
+          [data.agent]: { ...prev[data.agent], status: 'done' }
+        }))
+        setAgentFeed(prev => [...prev, {
+          agent: data.agent,
+          content: data.content,
+          time: new Date().toLocaleTimeString(),
+          type: 'done'
+        }])
+        break
+
+      case 'error':
+        setErrors(prev => [...prev, data.content])
+        setAgents(prev => ({
+          ...prev,
+          [data.agent]: { ...prev[data.agent], status: 'error' }
+        }))
+        break
+
+      case 'done':
+        setStatus(data.status === 'completed' ? 'completed' : 'error')
+        // Fetch final files
+        if (data.session_id) {
+          getProjectFiles(data.session_id).then(res => {
+            if (res.files) {
+              setFiles(res.files)
+              setFileTree(Object.keys(res.files).sort())
+            }
+          })
+        }
+        break
+
+      default:
+        break
+    }
+  }, [])
+
+  const { connect, disconnect } = useSSE(handleSSEEvent)
+
+  // Start generation
+  const handleGenerate = useCallback(async (prompt, appType) => {
+    // Reset state
+    setAgents(INITIAL_AGENTS)
+    setAgentFeed([])
+    setFiles({})
+    setFileTree([])
+    setErrors([])
+    setSelectedFile(null)
+    setStatus('starting')
+
+    setMessages(prev => [...prev, { role: 'user', content: prompt }])
+
+    try {
+      const res = await generateProject(prompt, appType)
+      setSessionId(res.session_id)
+      setStatus('connected')
+
+      // Connect to SSE stream
+      connect(res.session_id)
+
+      setMessages(prev => [...prev, {
+        role: 'assistant',
+        content: `🚀 Project generation started! Session: ${res.session_id}\n\nI'm coordinating 4 AI agents to build your application...`
+      }])
+    } catch (err) {
+      setStatus('error')
+      setErrors(prev => [...prev, err.message])
+      setMessages(prev => [...prev, {
+        role: 'assistant',
+        content: `❌ Error starting generation: ${err.message}`
+      }])
+    }
+  }, [connect])
+
+  // Export
+  const handleExport = useCallback(async () => {
+    if (!sessionId) return
+    try {
+      await exportProject(sessionId)
+    } catch (err) {
+      setErrors(prev => [...prev, `Export failed: ${err.message}`])
+    }
+  }, [sessionId])
+
+  // Fix bug
+  const handleFix = useCallback(async (errorMessage, filePath) => {
+    if (!sessionId) return
+    try {
+      await fixBug(sessionId, errorMessage, filePath)
+      connect(sessionId) // Reconnect SSE for fix updates
+    } catch (err) {
+      setErrors(prev => [...prev, `Fix failed: ${err.message}`])
+    }
+  }, [sessionId, connect])
+
+  return (
+    <div className="h-screen w-screen flex flex-col overflow-hidden" style={{ background: 'var(--bg)' }}>
+      <Header
+        agents={agents}
+        sessionId={sessionId}
+        status={status}
+      />
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left Panel — Control Center */}
+        <ControlPanel
+          messages={messages}
+          agentFeed={agentFeed}
+          fileTree={fileTree}
+          files={files}
+          selectedFile={selectedFile}
+          onSelectFile={setSelectedFile}
+          onGenerate={handleGenerate}
+          onFix={handleFix}
+          status={status}
+        />
+
+        {/* Right Panel — Preview */}
+        <LivePreview
+          sessionId={sessionId}
+          files={files}
+          selectedFile={selectedFile}
+          previewSystem={previewSystem}
+          onChangeSystem={setPreviewSystem}
+          viewMode={viewMode}
+          onChangeViewMode={setViewMode}
+          onExport={handleExport}
+          status={status}
+        />
+      </div>
+
+      <StatusBar
+        status={status}
+        sessionId={sessionId}
+        agents={agents}
+        errorCount={errors.length}
+        fileCount={fileTree.length}
+      />
+    </div>
+  )
+}

fronend/src/components/AgentFeed.jsx

@@ -0,0 +1,92 @@
+import React, { useRef, useEffect } from 'react'
+import { Bot, FileCode2, CheckCircle2, AlertCircle, Zap } from 'lucide-react'
+
+const AGENT_COLORS = {
+  research: '#00D9FF',
+  orchestrator: '#6C63FF',
+  frontend: '#22D3A8',
+  backend: '#FFB547',
+  system: '#8888AA',
+}
+
+const AGENT_ICONS = {
+  research: '🌐',
+  orchestrator: '🧠',
+  frontend: '🎨',
+  backend: '🔐',
+  system: '⚙️',
+}
+
+export default function AgentFeed({ feed }) {
+  const feedEndRef = useRef(null)
+
+  useEffect(() => {
+    feedEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [feed])
+
+  if (feed.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center px-6">
+        <Bot className="w-12 h-12 mb-3" style={{ color: 'var(--text-secondary)', opacity: 0.4 }} />
+        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+          Agent activity will appear here once you start generating.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-3 space-y-2">
+      {feed.map((item, i) => (
+        <div
+          key={i}
+          className="flex items-start gap-2.5 p-2.5 rounded-lg animate-fade-in text-xs"
+          style={{
+            background: item.type === 'done' ? `${AGENT_COLORS[item.agent]}11` : 'var(--surface)',
+            border: `1px solid ${item.type === 'done' ? AGENT_COLORS[item.agent] + '33' : 'var(--border)'}`,
+          }}
+        >
+          {/* Agent icon */}
+          <span className="text-base flex-shrink-0 mt-0.5">
+            {AGENT_ICONS[item.agent] || '⚙️'}
+          </span>
+
+          <div className="flex-1 min-w-0">
+            {/* Agent name + time */}
+            <div className="flex items-center justify-between mb-1">
+              <span className="font-semibold capitalize" style={{ color: AGENT_COLORS[item.agent] }}>
+                {item.agent}
+              </span>
+              <span className="text-[10px]" style={{ color: 'var(--text-secondary)' }}>
+                {item.time}
+              </span>
+            </div>
+
+            {/* Content */}
+            <div style={{ color: 'var(--text-secondary)' }}>
+              {item.type === 'file' ? (
+                <div className="flex items-center gap-1.5">
+                  <FileCode2 className="w-3 h-3" style={{ color: 'var(--success)' }} />
+                  <span className="font-mono text-[11px]">{item.content}</span>
+                </div>
+              ) : item.type === 'done' ? (
+                <div className="flex items-center gap-1.5">
+                  <CheckCircle2 className="w-3 h-3" style={{ color: AGENT_COLORS[item.agent] }} />
+                  <span>{item.content}</span>
+                </div>
+              ) : item.type === 'stream' ? (
+                <pre className="whitespace-pre-wrap font-mono text-[11px] max-h-24 overflow-y-auto leading-relaxed">
+                  {item.content.slice(-300)}
+                  <span className="typing-cursor" />
+                </pre>
+              ) : (
+                <span>{item.content}</span>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+      <div ref={feedEndRef} />
+    </div>
+  )
+}

fronend/src/components/ChatInterface.jsx

@@ -0,0 +1,195 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Send, Sparkles, Loader2 } from 'lucide-react'
+
+const APP_TYPES = [
+  { id: 'saas', label: 'SaaS Platform', emoji: '💼' },
+  { id: 'ecommerce', label: 'E-Commerce', emoji: '🛒' },
+  { id: 'marketplace', label: 'Marketplace', emoji: '🏪' },
+  { id: 'social', label: 'Social Network', emoji: '👥' },
+  { id: 'education', label: 'EdTech / LMS', emoji: '📚' },
+  { id: 'health', label: 'HealthTech', emoji: '🏥' },
+  { id: 'finance', label: 'FinTech', emoji: '💰' },
+  { id: 'custom', label: 'Custom', emoji: '⚡' },
+]
+
+const EXAMPLE_PROMPTS = [
+  "Build a project management SaaS like Linear with team workspaces, sprint boards, and issue tracking",
+  "Create an online course marketplace where instructors can sell video courses with progress tracking",
+  "Build a subscription-based fitness app with workout plans, progress photos, and meal tracking",
+]
+
+export default function ChatInterface({ messages, onGenerate, onFix, status }) {
+  const [input, setInput] = useState('')
+  const [appType, setAppType] = useState('saas')
+  const [showTypes, setShowTypes] = useState(false)
+  const chatEndRef = useRef(null)
+  const inputRef = useRef(null)
+
+  const isGenerating = !['idle', 'completed', 'error'].includes(status)
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (!input.trim() || isGenerating) return
+    onGenerate(input.trim(), appType)
+    setInput('')
+  }
+
+  const handleExampleClick = (prompt) => {
+    setInput(prompt)
+    inputRef.current?.focus()
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.length === 0 ? (
+          /* Welcome screen */
+          <div className="flex flex-col items-center justify-center h-full text-center px-4">
+            <div className="text-5xl mb-4">🚀</div>
+            <h2 className="text-xl font-bold gradient-text mb-2">
+              Welcome to Nexus Builder
+            </h2>
+            <p className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
+              Describe your app idea and 4 AI agents will build it for you —
+              complete with auth, payments, analytics, and admin panel.
+            </p>
+
+            {/* App type selector */}
+            <div className="w-full mb-4">
+              <button
+                onClick={() => setShowTypes(!showTypes)}
+                className="w-full text-left text-xs font-medium px-3 py-2 rounded-lg border transition-all"
+                style={{
+                  borderColor: 'var(--border)',
+                  background: 'var(--surface)',
+                  color: 'var(--text-secondary)',
+                }}
+              >
+                App Type: {APP_TYPES.find(t => t.id === appType)?.emoji}{' '}
+                {APP_TYPES.find(t => t.id === appType)?.label}
+              </button>
+              {showTypes && (
+                <div className="mt-1 grid grid-cols-2 gap-1 p-2 rounded-lg border animate-fade-in"
+                  style={{ background: 'var(--surface)', borderColor: 'var(--border)' }}>
+                  {APP_TYPES.map(type => (
+                    <button
+                      key={type.id}
+                      onClick={() => { setAppType(type.id); setShowTypes(false) }}
+                      className="text-left text-xs px-2.5 py-2 rounded-md transition-all hover:scale-[1.02]"
+                      style={{
+                        background: appType === type.id ? 'var(--accent)22' : 'transparent',
+                        color: appType === type.id ? 'var(--accent)' : 'var(--text-secondary)',
+                      }}
+                    >
+                      {type.emoji} {type.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Example prompts */}
+            <div className="w-full space-y-2">
+              <p className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
+                Try an example:
+              </p>
+              {EXAMPLE_PROMPTS.map((prompt, i) => (
+                <button
+                  key={i}
+                  onClick={() => handleExampleClick(prompt)}
+                  className="w-full text-left text-xs p-3 rounded-lg border transition-all hover:scale-[1.01]"
+                  style={{
+                    borderColor: 'var(--border)',
+                    background: 'var(--surface)',
+                    color: 'var(--text-secondary)',
+                  }}
+                >
+                  <Sparkles className="w-3 h-3 inline mr-1.5" style={{ color: 'var(--accent)' }} />
+                  {prompt}
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : (
+          /* Chat messages */
+          messages.map((msg, i) => (
+            <div
+              key={i}
+              className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-slide-up`}
+            >
+              <div
+                className="max-w-[85%] rounded-2xl px-4 py-3 text-sm leading-relaxed"
+                style={{
+                  background: msg.role === 'user' ? 'var(--accent)' : 'var(--surface)',
+                  color: msg.role === 'user' ? 'white' : 'var(--text-primary)',
+                  border: msg.role === 'user' ? 'none' : '1px solid var(--border)',
+                }}
+              >
+                <pre className="whitespace-pre-wrap font-sans">{msg.content}</pre>
+              </div>
+            </div>
+          ))
+        )}
+
+        {isGenerating && (
+          <div className="flex justify-start animate-slide-up">
+            <div className="rounded-2xl px-4 py-3 text-sm flex items-center gap-2"
+              style={{ background: 'var(--surface)', border: '1px solid var(--border)' }}>
+              <Loader2 className="w-4 h-4 animate-spin" style={{ color: 'var(--accent)' }} />
+              <span style={{ color: 'var(--text-secondary)' }}>Agents are working...</span>
+              <span className="typing-cursor" />
+            </div>
+          </div>
+        )}
+
+        <div ref={chatEndRef} />
+      </div>
+
+      {/* Input area */}
+      <form onSubmit={handleSubmit} className="p-3 border-t" style={{ borderColor: 'var(--border)' }}>
+        <div className="flex items-end gap-2">
+          <div className="flex-1 relative">
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  handleSubmit(e)
+                }
+              }}
+              placeholder="Describe the app you want to build..."
+              rows={2}
+              className="w-full resize-none rounded-xl px-4 py-3 text-sm outline-none transition-all"
+              style={{
+                background: 'var(--surface)',
+                color: 'var(--text-primary)',
+                border: '1px solid var(--border)',
+              }}
+              disabled={isGenerating}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={!input.trim() || isGenerating}
+            className="p-3 rounded-xl transition-all hover:scale-105 disabled:opacity-40 disabled:hover:scale-100"
+            style={{
+              background: 'var(--accent)',
+              color: 'white',
+            }}
+          >
+            {isGenerating
+              ? <Loader2 className="w-5 h-5 animate-spin" />
+              : <Send className="w-5 h-5" />}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

fronend/src/components/CodeView.jsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react'
+import { Copy, Check } from 'lucide-react'
+
+// Basic syntax highlighting without external deps
+function highlightCode(code, ext) {
+  if (!code) return ''
+
+  // Simple keyword-based highlighting
+  const keywords = {
+    js: /\b(const|let|var|function|return|if|else|for|while|class|import|export|from|default|async|await|try|catch|throw|new|this|typeof|instanceof|switch|case|break|continue)\b/g,
+    py: /\b(def|class|import|from|return|if|elif|else|for|while|try|except|raise|with|as|yield|async|await|lambda|pass|break|continue|and|or|not|in|is|True|False|None)\b/g,
+    sql: /\b(SELECT|FROM|WHERE|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|ALTER|DROP|INDEX|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AND|OR|NOT|NULL|PRIMARY|KEY|FOREIGN|REFERENCES|CASCADE|UNIQUE|DEFAULT|CHECK|CONSTRAINT|GRANT|REVOKE|BEGIN|COMMIT|ROLLBACK|TRIGGER|FUNCTION|PROCEDURE|VIEW|ENABLE|ROW|LEVEL|SECURITY|POLICY|USING|WITH)\b/gi,
+  }
+
+  const lang = ['jsx', 'tsx', 'js', 'ts'].includes(ext) ? 'js'
+    : ['py'].includes(ext) ? 'py'
+    : ['sql'].includes(ext) ? 'sql'
+    : 'js'
+
+  let highlighted = code
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+
+  // Strings
+  highlighted = highlighted.replace(
+    /(["'`])(?:(?=(\\?))\2[\s\S])*?\1/g,
+    '<span style="color:#22D3A8">$&</span>'
+  )
+
+  // Comments
+  highlighted = highlighted.replace(
+    /(\/\/.*$|#.*$)/gm,
+    '<span style="color:#555577">$&</span>'
+  )
+  highlighted = highlighted.replace(
+    /(\/\*[\s\S]*?\*\/|--.*$)/gm,
+    '<span style="color:#555577">$&</span>'
+  )
+
+  // Keywords
+  if (keywords[lang]) {
+    highlighted = highlighted.replace(
+      keywords[lang],
+      '<span style="color:#6C63FF;font-weight:600">$&</span>'
+    )
+  }
+
+  // Numbers
+  highlighted = highlighted.replace(
+    /\b(\d+\.?\d*)\b/g,
+    '<span style="color:#FFB547">$&</span>'
+  )
+
+  return highlighted
+}
+
+export default function CodeView({ content, fileName }) {
+  const [copied, setCopied] = React.useState(false)
+
+  const ext = fileName?.split('.').pop()?.toLowerCase() || ''
+  const highlighted = useMemo(
+    () => highlightCode(content || '', ext),
+    [content, ext]
+  )
+  const lineCount = (content || '').split('\n').length
+
+  const handleCopy = async () => {
+    if (!content) return
+    await navigator.clipboard.writeText(content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  if (!content) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+          Select a file from the tree to view its code
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full h-full flex flex-col rounded-lg overflow-hidden border"
+      style={{ borderColor: 'var(--border)' }}>
+      {/* File header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b"
+        style={{ background: 'var(--bg)', borderColor: 'var(--border)' }}>
+        <span className="text-xs font-mono" style={{ color: 'var(--text-secondary)' }}>
+          {fileName}
+        </span>
+        <div className="flex items-center gap-2">
+          <span className="text-[10px]" style={{ color: 'var(--text-secondary)' }}>
+            {lineCount} lines
+          </span>
+          <button
+            onClick={handleCopy}
+            className="p-1 rounded transition-all hover:scale-110"
+            style={{ color: copied ? 'var(--success)' : 'var(--text-secondary)' }}
+            title="Copy code"
+          >
+            {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Code content */}
+      <div className="flex-1 overflow-auto" style={{ background: '#0D0D14' }}>
+        <div className="flex">
+          {/* Line numbers */}
+          <div className="flex-shrink-0 text-right pr-4 pl-4 py-3 select-none"
+            style={{ color: '#333355', fontSize: '12px', lineHeight: '1.6' }}>
+            {Array.from({ length: lineCount }, (_, i) => (
+              <div key={i}>{i + 1}</div>
+            ))}
+          </div>
+          {/* Code */}
+          <pre className="flex-1 py-3 pr-4 overflow-x-auto"
+            style={{ fontSize: '12px', lineHeight: '1.6' }}>
+            <code dangerouslySetInnerHTML={{ __html: highlighted }} />
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+}

fronend/src/components/ControlPanel.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import ChatInterface from './ChatInterface'
+import AgentFeed from './AgentFeed'
+import FileTree from './FileTree'
+import { MessageSquare, Activity, FolderTree } from 'lucide-react'
+
+const TABS = [
+  { id: 'chat', label: 'Chat', icon: MessageSquare },
+  { id: 'agents', label: 'Agents', icon: Activity },
+  { id: 'files', label: 'Files', icon: FolderTree },
+]
+
+export default function ControlPanel({
+  messages, agentFeed, fileTree, files, selectedFile,
+  onSelectFile, onGenerate, onFix, status
+}) {
+  const [activeTab, setActiveTab] = useState('chat')
+
+  return (
+    <div className="w-full md:w-[420px] lg:w-[480px] flex flex-col border-r"
+      style={{ borderColor: 'var(--border)', background: 'var(--bg)' }}>
+      {/* Tab bar */}
+      <div className="flex border-b" style={{ borderColor: 'var(--border)' }}>
+        {TABS.map(tab => {
+          const Icon = tab.icon
+          const isActive = activeTab === tab.id
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className="flex-1 flex items-center justify-center gap-2 py-2.5 text-xs font-medium transition-all relative"
+              style={{
+                color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
+                background: isActive ? 'var(--surface)' : 'transparent',
+              }}
+            >
+              <Icon className="w-3.5 h-3.5" />
+              {tab.label}
+              {tab.id === 'agents' && agentFeed.length > 0 && (
+                <span className="ml-1 w-4 h-4 text-[10px] flex items-center justify-center rounded-full"
+                  style={{ background: 'var(--accent)33', color: 'var(--accent)' }}>
+                  {agentFeed.length}
+                </span>
+              )}
+              {tab.id === 'files' && fileTree.length > 0 && (
+                <span className="ml-1 w-4 h-4 text-[10px] flex items-center justify-center rounded-full"
+                  style={{ background: 'var(--success)33', color: 'var(--success)' }}>
+                  {fileTree.length}
+                </span>
+              )}
+              {isActive && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5"
+                  style={{ background: 'var(--accent)' }} />
+              )}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-hidden">
+        {activeTab === 'chat' && (
+          <ChatInterface
+            messages={messages}
+            onGenerate={onGenerate}
+            onFix={onFix}
+            status={status}
+          />
+        )}
+        {activeTab === 'agents' && (
+          <AgentFeed feed={agentFeed} />
+        )}
+        {activeTab === 'files' && (
+          <FileTree
+            tree={fileTree}
+            files={files}
+            selectedFile={selectedFile}
+            onSelect={onSelectFile}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

fronend/src/components/FileTree.jsx

@@ -0,0 +1,141 @@
+import React, { useMemo } from 'react'
+import {
+  Folder, FolderOpen, FileCode2, FileJson, FileType2,
+  Database, FileText, Settings
+} from 'lucide-react'
+
+const FILE_ICONS = {
+  jsx: { icon: FileCode2, color: '#61DAFB' },
+  tsx: { icon: FileCode2, color: '#3178C6' },
+  js: { icon: FileCode2, color: '#F7DF1E' },
+  ts: { icon: FileCode2, color: '#3178C6' },
+  py: { icon: FileCode2, color: '#3776AB' },
+  css: { icon: FileType2, color: '#1572B6' },
+  html: { icon: FileCode2, color: '#E34F26' },
+  json: { icon: FileJson, color: '#A8B9CC' },
+  sql: { icon: Database, color: '#336791' },
+  md: { icon: FileText, color: '#083FA1' },
+  yml: { icon: Settings, color: '#CB171E' },
+  yaml: { icon: Settings, color: '#CB171E' },
+  env: { icon: Settings, color: '#ECD53F' },
+  txt: { icon: FileText, color: '#8888AA' },
+}
+
+function buildTree(paths) {
+  const root = {}
+  for (const path of paths) {
+    const parts = path.split('/')
+    let current = root
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      if (i === parts.length - 1) {
+        current[part] = path // leaf = full path
+      } else {
+        if (!current[part] || typeof current[part] === 'string') {
+          current[part] = {}
+        }
+        current = current[part]
+      }
+    }
+  }
+  return root
+}
+
+function TreeNode({ name, node, selectedFile, onSelect, depth = 0 }) {
+  const [open, setOpen] = React.useState(depth < 2)
+  const isFile = typeof node === 'string'
+  const isSelected = isFile && node === selectedFile
+
+  const ext = isFile ? name.split('.').pop()?.toLowerCase() : ''
+  const fileConfig = FILE_ICONS[ext] || { icon: FileText, color: 'var(--text-secondary)' }
+  const Icon = isFile ? fileConfig.icon : (open ? FolderOpen : Folder)
+  const iconColor = isFile ? fileConfig.color : 'var(--accent)'
+
+  if (isFile) {
+    return (
+      <button
+        onClick={() => onSelect(node)}
+        className="w-full flex items-center gap-2 py-1 px-2 rounded text-xs transition-all hover:scale-[1.01] text-left"
+        style={{
+          paddingLeft: `${depth * 16 + 8}px`,
+          background: isSelected ? 'var(--accent)15' : 'transparent',
+          color: isSelected ? 'var(--accent)' : 'var(--text-secondary)',
+        }}
+      >
+        <Icon className="w-3.5 h-3.5 flex-shrink-0" style={{ color: iconColor }} />
+        <span className="truncate font-mono">{name}</span>
+      </button>
+    )
+  }
+
+  const entries = Object.entries(node).sort(([a, av], [b, bv]) => {
+    const aIsFile = typeof av === 'string'
+    const bIsFile = typeof bv === 'string'
+    if (aIsFile !== bIsFile) return aIsFile ? 1 : -1
+    return a.localeCompare(b)
+  })
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center gap-2 py-1 px-2 rounded text-xs font-medium transition-all text-left"
+        style={{
+          paddingLeft: `${depth * 16 + 8}px`,
+          color: 'var(--text-primary)',
+        }}
+      >
+        <Icon className="w-3.5 h-3.5 flex-shrink-0" style={{ color: iconColor }} />
+        <span className="truncate">{name}</span>
+      </button>
+      {open && entries.map(([childName, childNode]) => (
+        <TreeNode
+          key={childName}
+          name={childName}
+          node={childNode}
+          selectedFile={selectedFile}
+          onSelect={onSelect}
+          depth={depth + 1}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function FileTree({ tree, files, selectedFile, onSelect }) {
+  const treeStructure = useMemo(() => buildTree(tree), [tree])
+
+  if (tree.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center px-6">
+        <Folder className="w-12 h-12 mb-3" style={{ color: 'var(--text-secondary)', opacity: 0.4 }} />
+        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+          Generated files will appear here.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full overflow-y-auto py-2">
+      <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider"
+        style={{ color: 'var(--text-secondary)' }}>
+        Project Files ({tree.length})
+      </div>
+      {Object.entries(treeStructure).sort(([a, av], [b, bv]) => {
+        const aIsFile = typeof av === 'string'
+        const bIsFile = typeof bv === 'string'
+        if (aIsFile !== bIsFile) return aIsFile ? 1 : -1
+        return a.localeCompare(b)
+      }).map(([name, node]) => (
+        <TreeNode
+          key={name}
+          name={name}
+          node={node}
+          selectedFile={selectedFile}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  )
+}

fronend/src/components/Header.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { useTheme } from './ThemeProvider'
+import { Sun, Moon, Settings, Zap } from 'lucide-react'
+
+const AGENT_LABELS = {
+  research: { icon: '🌐', label: 'Research' },
+  orchestrator: { icon: '🧠', label: 'Orchestrator' },
+  frontend: { icon: '🎨', label: 'Frontend' },
+  backend: { icon: '🔐', label: 'Backend' },
+}
+
+const STATUS_COLORS = {
+  idle: 'bg-gray-500',
+  active: 'bg-cyan-400 agent-active',
+  done: 'bg-emerald-400',
+  error: 'bg-red-400',
+}
+
+export default function Header({ agents, sessionId, status }) {
+  const { theme, toggleTheme } = useTheme()
+
+  return (
+    <header className="glass flex items-center justify-between px-4 py-2.5 border-b z-50"
+      style={{ borderColor: 'var(--border)' }}>
+      {/* Logo */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Zap className="w-6 h-6" style={{ color: 'var(--accent)' }} />
+            <div className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 agent-active" />
+          </div>
+          <span className="text-xl font-bold tracking-tight font-mono gradient-text">
+            NEXUS
+          </span>
+        </div>
+        <span className="text-xs px-2 py-0.5 rounded-full font-medium"
+          style={{ background: 'var(--accent)22', color: 'var(--accent)' }}>
+          BUILDER
+        </span>
+      </div>
+
+      {/* Agent Status Indicators */}
+      <div className="hidden md:flex items-center gap-4">
+        {Object.entries(agents).map(([key, agent]) => (
+          <div key={key} className="flex items-center gap-2 text-xs" title={`${agent.name}: ${agent.status}`}>
+            <span>{AGENT_LABELS[key]?.icon}</span>
+            <div className={`w-2 h-2 rounded-full ${STATUS_COLORS[agent.status] || STATUS_COLORS.idle}`} />
+            <span style={{ color: 'var(--text-secondary)' }}>
+              {AGENT_LABELS[key]?.label}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Right controls */}
+      <div className="flex items-center gap-3">
+        {sessionId && (
+          <span className="text-xs font-mono px-2 py-1 rounded"
+            style={{ background: 'var(--surface)', color: 'var(--text-secondary)', border: '1px solid var(--border)' }}>
+            {sessionId}
+          </span>
+        )}
+
+        <button
+          onClick={toggleTheme}
+          className="p-2 rounded-lg transition-all hover:scale-110"
+          style={{ color: 'var(--text-secondary)' }}
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+        >
+          {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+        </button>
+
+        <button className="p-2 rounded-lg transition-all"
+          style={{ color: 'var(--text-secondary)' }}>
+          <Settings className="w-4 h-4" />
+        </button>
+      </div>
+    </header>
+  )
+}

fronend/src/components/LivePreview.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react'
+import SystemTabs from './SystemTabs'
+import CodeView from './CodeView'
+import {
+  Eye, Code2, Download, Monitor, Tablet, Smartphone,
+  ExternalLink, RefreshCw, Maximize2
+} from 'lucide-react'
+
+const VIEWPORT_SIZES = {
+  desktop: { width: '100%', label: 'Desktop', icon: Monitor },
+  tablet: { width: '768px', label: 'Tablet', icon: Tablet },
+  mobile: { width: '375px', label: 'Mobile', icon: Smartphone },
+}
+
+export default function LivePreview({
+  sessionId, files, selectedFile, previewSystem, onChangeSystem,
+  viewMode, onChangeViewMode, onExport, status
+}) {
+  const [viewport, setViewport] = useState('desktop')
+  const [iframeKey, setIframeKey] = useState(0)
+
+  const previewUrl = sessionId
+    ? (previewSystem === 'preview'
+      ? `/api/preview/${sessionId}`
+      : `/api/preview/${sessionId}/${previewSystem}`)
+    : null
+
+  const selectedFileContent = selectedFile && files[selectedFile]
+    ? files[selectedFile]
+    : null
+
+  const showCode = viewMode === 'code' || selectedFileContent
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden" style={{ background: 'var(--bg)' }}>
+      {/* System tabs */}
+      <SystemTabs active={previewSystem} onChange={onChangeSystem} />
+
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-3 py-2 border-b"
+        style={{ borderColor: 'var(--border)' }}>
+        <div className="flex items-center gap-1">
+          {/* View mode toggle */}
+          <button
+            onClick={() => onChangeViewMode('preview')}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all"
+            style={{
+              background: viewMode === 'preview' ? 'var(--accent)15' : 'transparent',
+              color: viewMode === 'preview' ? 'var(--accent)' : 'var(--text-secondary)',
+            }}
+          >
+            <Eye className="w-3.5 h-3.5" />
+            Preview
+          </button>
+          <button
+            onClick={() => onChangeViewMode('code')}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all"
+            style={{
+              background: viewMode === 'code' ? 'var(--accent)15' : 'transparent',
+              color: viewMode === 'code' ? 'var(--accent)' : 'var(--text-secondary)',
+            }}
+          >
+            <Code2 className="w-3.5 h-3.5" />
+            Code
+          </button>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* Viewport toggle */}
+          {viewMode === 'preview' && Object.entries(VIEWPORT_SIZES).map(([key, val]) => {
+            const Icon = val.icon
+            return (
+              <button
+                key={key}
+                onClick={() => setViewport(key)}
+                className="p-1.5 rounded-md transition-all"
+                style={{
+                  color: viewport === key ? 'var(--accent)' : 'var(--text-secondary)',
+                  background: viewport === key ? 'var(--accent)11' : 'transparent',
+                }}
+                title={val.label}
+              >
+                <Icon className="w-3.5 h-3.5" />
+              </button>
+            )
+          })}
+
+          {/* Refresh */}
+          <button
+            onClick={() => setIframeKey(k => k + 1)}
+            className="p-1.5 rounded-md transition-all"
+            style={{ color: 'var(--text-secondary)' }}
+            title="Refresh preview"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+
+          {/* Export */}
+          {sessionId && (
+            <button
+              onClick={onExport}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all hover:scale-105"
+              style={{ background: 'var(--accent)', color: 'white' }}
+            >
+              <Download className="w-3.5 h-3.5" />
+              Export ZIP
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Preview area */}
+      <div className="flex-1 overflow-hidden flex items-center justify-center p-4"
+        style={{ background: viewMode === 'code' ? 'var(--surface)' : '#0D0D12' }}>
+        {showCode ? (
+          <CodeView
+            content={selectedFileContent || _getFirstFile(files)}
+            fileName={selectedFile || Object.keys(files)[0] || ''}
+          />
+        ) : previewUrl ? (
+          <div
+            className="h-full rounded-lg overflow-hidden border transition-all duration-300"
+            style={{
+              width: VIEWPORT_SIZES[viewport].width,
+              maxWidth: '100%',
+              borderColor: 'var(--border)',
+            }}
+          >
+            <iframe
+              key={iframeKey}
+              src={previewUrl}
+              className="w-full h-full border-0"
+              style={{ background: 'white', borderRadius: '8px' }}
+              title="App Preview"
+              sandbox="allow-scripts allow-same-origin"
+            />
+          </div>
+        ) : (
+          /* Empty state */
+          <div className="text-center">
+            <div className="text-6xl mb-4 opacity-20">🖥️</div>
+            <h3 className="text-lg font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
+              Live Preview
+            </h3>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+              Your generated app will be previewed here in real-time.
+              <br />Start by describing your app idea in the chat.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function _getFirstFile(files) {
+  const keys = Object.keys(files)
+  return keys.length > 0 ? files[keys[0]] : ''
+}

fronend/src/components/StatusBar.jsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { Wifi, WifiOff, AlertTriangle, Files, Cpu } from 'lucide-react'
+
+const STATUS_LABELS = {
+  idle: { label: 'Ready', color: 'var(--text-secondary)' },
+  starting: { label: 'Starting...', color: 'var(--warning)' },
+  connected: { label: 'Connected', color: 'var(--success)' },
+  researching: { label: '🔍 Researching...', color: 'var(--accent-2)' },
+  orchestrating: { label: '🧠 Creating Blueprint...', color: 'var(--accent)' },
+  building: { label: '🚀 Building...', color: 'var(--accent)' },
+  building_frontend: { label: '🎨 Building Frontend...', color: 'var(--success)' },
+  building_backend: { label: '🔐 Building Backend...', color: 'var(--warning)' },
+  merging: { label: '📦 Merging...', color: 'var(--accent-2)' },
+  fixing: { label: '🔧 Fixing...', color: 'var(--warning)' },
+  completed: { label: '✅ Complete', color: 'var(--success)' },
+  error: { label: '❌ Error', color: 'var(--error)' },
+}
+
+export default function StatusBar({ status, sessionId, agents, errorCount, fileCount }) {
+  const statusConfig = STATUS_LABELS[status] || STATUS_LABELS.idle
+  const isActive = !['idle', 'completed', 'error'].includes(status)
+
+  return (
+    <footer
+      className="flex items-center justify-between px-4 py-1.5 text-[11px] border-t"
+      style={{
+        borderColor: 'var(--border)',
+        background: 'var(--surface)',
+        color: 'var(--text-secondary)',
+      }}
+    >
+      {/* Left: status */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1.5">
+          {isActive ? (
+            <Wifi className="w-3 h-3" style={{ color: 'var(--success)' }} />
+          ) : (
+            <WifiOff className="w-3 h-3" />
+          )}
+          <span style={{ color: statusConfig.color, fontWeight: 500 }}>
+            {statusConfig.label}
+          </span>
+        </div>
+
+        {/* Build progress */}
+        {isActive && (
+          <div className="hidden sm:flex items-center gap-1">
+            {['researching', 'orchestrating', 'building', 'merging'].map((step, i) => {
+              const stepStatuses = {
+                researching: ['researching'],
+                orchestrating: ['orchestrating'],
+                building: ['building', 'building_frontend', 'building_backend'],
+                merging: ['merging', 'completed'],
+              }
+              const isCurrentOrPast = stepStatuses[step]?.includes(status) ||
+                ['researching', 'orchestrating', 'building', 'merging'].indexOf(step) <
+                ['researching', 'orchestrating', 'building', 'merging'].findIndex(s =>
+                  stepStatuses[s]?.includes(status)
+                )
+              return (
+                <React.Fragment key={step}>
+                  <div
+                    className="w-1.5 h-1.5 rounded-full"
+                    style={{
+                      background: stepStatuses[step]?.includes(status)
+                        ? 'var(--accent)'
+                        : isCurrentOrPast ? 'var(--success)' : 'var(--border)',
+                    }}
+                  />
+                  {i < 3 && (
+                    <div className="w-4 h-px" style={{ background: 'var(--border)' }} />
+                  )}
+                </React.Fragment>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Right: metrics */}
+      <div className="flex items-center gap-4">
+        {fileCount > 0 && (
+          <div className="flex items-center gap-1">
+            <Files className="w-3 h-3" />
+            <span>{fileCount} files</span>
+          </div>
+        )}
+        {errorCount > 0 && (
+          <div className="flex items-center gap-1" style={{ color: 'var(--error)' }}>
+            <AlertTriangle className="w-3 h-3" />
+            <span>{errorCount} errors</span>
+          </div>
+        )}
+        <div className="flex items-center gap-1">
+          <Cpu className="w-3 h-3" />
+          <span>HuggingFace CPU</span>
+        </div>
+        {sessionId && (
+          <span className="font-mono">{sessionId}</span>
+        )}
+      </div>
+    </footer>
+  )
+}

fronend/src/components/SystemTabs.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Layout, Globe, Megaphone, BarChart3, Shield } from 'lucide-react'
+
+const SYSTEMS = [
+  { id: 'preview', label: 'Overview', icon: Layout },
+  { id: 'client_portal', label: 'Portal', icon: Layout },
+  { id: 'public_landing', label: 'Landing', icon: Globe },
+  { id: 'marketing_cms', label: 'Marketing', icon: Megaphone },
+  { id: 'analytics_dashboard', label: 'Analytics', icon: BarChart3 },
+  { id: 'admin_panel', label: 'Admin', icon: Shield },
+]
+
+export default function SystemTabs({ active, onChange }) {
+  return (
+    <div className="flex items-center gap-0.5 overflow-x-auto px-2 py-1.5 border-b"
+      style={{ borderColor: 'var(--border)' }}>
+      {SYSTEMS.map(sys => {
+        const Icon = sys.icon
+        const isActive = active === sys.id
+        return (
+          <button
+            key={sys.id}
+            onClick={() => onChange(sys.id)}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap transition-all"
+            style={{
+              background: isActive ? 'var(--accent)15' : 'transparent',
+              color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
+            }}
+          >
+            <Icon className="w-3.5 h-3.5" />
+            {sys.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

fronend/src/components/ThemeProvider.jsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useState, useEffect } from 'react'
+
+const ThemeContext = createContext()
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('nexus-theme') || 'dark'
+    }
+    return 'dark'
+  })
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('nexus-theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark')
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
+  return ctx
+}

fronend/src/hooks/useSSE.js

@@ -0,0 +1,61 @@
+import { useRef, useCallback } from 'react'
+
+export function useSSE(onEvent) {
+  const eventSourceRef = useRef(null)
+
+  const connect = useCallback((sessionId) => {
+    // Close existing connection
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close()
+    }
+
+    const url = `/api/stream/${sessionId}`
+    const eventSource = new EventSource(url)
+    eventSourceRef.current = eventSource
+
+    const eventTypes = [
+      'agent_start', 'token', 'code_block', 'agent_done',
+      'error', 'file_created', 'done'
+    ]
+
+    eventTypes.forEach(type => {
+      eventSource.addEventListener(type, (event) => {
+        onEvent({ type, data: event.data })
+      })
+    })
+
+    // Also handle generic messages
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data)
+        onEvent({ type: data.event_type || 'message', data: event.data })
+      } catch {
+        // ignore parse errors
+      }
+    }
+
+    eventSource.onerror = (err) => {
+      console.error('SSE error:', err)
+      // Don't auto-reconnect on error to avoid infinite loops
+      if (eventSource.readyState === EventSource.CLOSED) {
+        onEvent({
+          type: 'error',
+          data: JSON.stringify({
+            event_type: 'error',
+            agent: 'system',
+            content: 'Connection lost. Check the status and try again.'
+          })
+        })
+      }
+    }
+  }, [onEvent])
+
+  const disconnect = useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close()
+      eventSourceRef.current = null
+    }
+  }, [])
+
+  return { connect, disconnect }
+}

fronend/src/hooks/useTheme.js

@@ -0,0 +1,2 @@
+// Re-exported from ThemeProvider for convenience
+export { useTheme } from '../components/ThemeProvider'

fronend/src/index.css

@@ -0,0 +1,126 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #0A0A0F;
+  --surface: #111118;
+  --border: #1E1E2E;
+  --accent: #6C63FF;
+  --accent-2: #00D9FF;
+  --text-primary: #F0F0FF;
+  --text-secondary: #8888AA;
+  --success: #22D3A8;
+  --error: #FF4D6D;
+  --warning: #FFB547;
+}
+
+[data-theme="light"] {
+  --bg: #F8F8FC;
+  --surface: #FFFFFF;
+  --border: #E0E0EF;
+  --accent: #5B53E8;
+  --accent-2: #0099CC;
+  --text-primary: #0A0A1A;
+  --text-secondary: #666688;
+  --success: #16A085;
+  --error: #E74C6F;
+  --warning: #E6A030;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background-color: var(--bg);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
+}
+
+/* Code blocks */
+pre, code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+/* Selection */
+::selection {
+  background: var(--accent);
+  color: white;
+}
+
+/* Focus styles */
+*:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Glassmorphism utility */
+.glass {
+  background: rgba(17, 17, 24, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border);
+}
+
+[data-theme="light"] .glass {
+  background: rgba(255, 255, 255, 0.75);
+}
+
+/* Agent status dots */
+@keyframes agentPulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.3); }
+}
+.agent-active {
+  animation: agentPulse 1.5s ease-in-out infinite;
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Typing indicator */
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+.typing-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  background: var(--accent);
+  margin-left: 2px;
+  animation: blink 1s infinite;
+  vertical-align: text-bottom;
+}

fronend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { ThemeProvider } from './components/ThemeProvider'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+)

fronend/src/utils/api.js

@@ -0,0 +1,80 @@
+const BASE = ''  // Same origin
+
+export async function generateProject(prompt, appType = 'saas', systems = null) {
+  const res = await fetch(`${BASE}/api/generate`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ prompt, app_type: appType, systems }),
+  })
+  if (!res.ok) {
+    const err = await res.text()
+    throw new Error(`Generation failed: ${err}`)
+  }
+  return res.json()
+}
+
+export async function getProjectStatus(sessionId) {
+  const res = await fetch(`${BASE}/api/status/${sessionId}`)
+  if (!res.ok) throw new Error('Failed to get status')
+  return res.json()
+}
+
+export async function getProjectFiles(sessionId) {
+  const res = await fetch(`${BASE}/api/files/${sessionId}`)
+  if (!res.ok) throw new Error('Failed to get files')
+  return res.json()
+}
+
+export async function getFileContent(sessionId, path) {
+  const res = await fetch(`${BASE}/api/file/${sessionId}/${path}`)
+  if (!res.ok) throw new Error('Failed to get file')
+  return res.json()
+}
+
+export async function exportProject(sessionId) {
+  const res = await fetch(`${BASE}/api/export/${sessionId}`)
+  if (!res.ok) throw new Error('Export failed')
+  const blob = await res.blob()
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `nexus-project-${sessionId}.zip`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+export async function fixBug(sessionId, errorMessage, filePath = null) {
+  const res = await fetch(`${BASE}/api/fix/${sessionId}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ error_message: errorMessage, file_path: filePath }),
+  })
+  if (!res.ok) throw new Error('Fix request failed')
+  return res.json()
+}
+
+// Keepalive ping to prevent HuggingFace sleep
+let keepaliveInterval = null
+
+export function startKeepalive() {
+  if (keepaliveInterval) return
+  keepaliveInterval = setInterval(async () => {
+    try {
+      await fetch(`${BASE}/api/health`)
+    } catch {
+      // ignore
+    }
+  }, 30000) // every 30 seconds
+}
+
+export function stopKeepalive() {
+  if (keepaliveInterval) {
+    clearInterval(keepaliveInterval)
+    keepaliveInterval = null
+  }
+}
+
+// Start keepalive on load
+startKeepalive()

fronend/tailwind.config.js

@@ -0,0 +1,48 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        nexus: {
+          bg: 'var(--bg)',
+          surface: 'var(--surface)',
+          border: 'var(--border)',
+          accent: 'var(--accent)',
+          'accent-2': 'var(--accent-2)',
+          'text-primary': 'var(--text-primary)',
+          'text-secondary': 'var(--text-secondary)',
+          success: 'var(--success)',
+          error: 'var(--error)',
+          warning: 'var(--warning)',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s ease-in-out infinite',
+        'fade-in': 'fadeIn 0.5s ease forwards',
+        'slide-up': 'slideUp 0.4s ease forwards',
+        'glow': 'glow 2s ease-in-out infinite alternate',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        glow: {
+          '0%': { boxShadow: '0 0 5px var(--accent)33' },
+          '100%': { boxShadow: '0 0 20px var(--accent)55' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

fronend/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+  },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:7860',
+    },
+  },
+})

requirements.txt

@@ -0,0 +1,8 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+httpx==0.28.1
+python-multipart==0.0.20
+sse-starlette==2.2.1
+pydantic==2.11.1
+aiofiles==24.1.0
+python-dotenv==1.1.0

start.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+exec uvicorn app.main:app --host 0.0.0.0 --port 7860 --workers 1 --timeout-keep-alive 120