feat: add chat API, MCP chat_turn tool, and rewrite frontend

- server/routes.py: POST /api/chat, POST /api/report, GET /api/agents
- server/web.py: include chat routes
- server/mcp.py: add chat_turn MCP tool for Claude Desktop
- web/index.html: complete rewrite — fullscreen 3D viewer with
slide-out multi-agent chat panel, @mention autocomplete,
on-demand preview, code viewer modal, gallery modal

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

server/mcp.py

@@ -391,6 +391,62 @@ def generate_from_image(
     return json.dumps(response, indent=2)
 
 
+# ── Tool: chat_turn ─────────────────────────────────────────────────────
+
+@mcp.tool()
+def chat_turn(
+    message: str,
+    history: str = "[]",
+    mentions: str = "[]",
+    backend: str = "mock",
+) -> str:
+    """
+    Multi-agent chat turn for collaborative CAD design.
+
+    Send a message to the design team agents (Design, Engineering, CNC, CAD Coder).
+    Agents collaborate to help you design a mechanical part step by step.
+
+    Args:
+        message: Your message to the design team.
+                 Use @design, @engineering, @cnc, or @cad to address specific agents.
+        history: JSON string of previous messages. Format:
+                 [{"role": "user"|"agent", "agent_id": "design", "content": "..."}]
+        mentions: JSON string of agent IDs to address. Format: ["design", "engineering"]
+                  Empty list = auto-route based on message content.
+        backend: LLM backend: "mock", "gemini", "anthropic", "openai".
+
+    Returns:
+        JSON string with agent responses and optional 3D preview data.
+    """
+    import json as json_mod
+
+    from agents.orchestrator import get_orchestrator
+    from agents.crew_orchestrator import CrewOrchestrator
+    from agents.prompts import parse_mentions
+
+    history_list = json_mod.loads(history) if isinstance(history, str) else history
+    mentions_list = json_mod.loads(mentions) if isinstance(mentions, str) else mentions
+
+    # Parse @mentions from message if not provided
+    if not mentions_list:
+        message, mentions_list = parse_mentions(message)
+
+    mentions_or_none = mentions_list if mentions_list else None
+
+    if backend in ("anthropic", "openai"):
+        orchestrator = CrewOrchestrator(backend_name=backend, output_dir=DEFAULT_OUTPUT_DIR)
+    else:
+        orchestrator = get_orchestrator(backend, output_dir=DEFAULT_OUTPUT_DIR)
+
+    result = orchestrator.chat_turn(
+        message=message,
+        history=history_list,
+        mentions=mentions_or_none,
+    )
+
+    return json_mod.dumps(result, indent=2)
+
+
 # ── Resource: System prompt (for transparency) ───────────────────────────
 
 @mcp.resource("text-to-cnc://system-prompt")

server/routes.py

@@ -0,0 +1,152 @@
+"""Chat API routes for multi-agent design conversation."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+from fastapi import APIRouter
+from fastapi.responses import JSONResponse
+
+from agents.orchestrator import get_orchestrator
+from agents.crew_orchestrator import CrewOrchestrator
+from agents.prompts import parse_mentions
+from agents.definitions import AGENTS
+
+router = APIRouter()
+
+OUTPUT_DIR = Path(__file__).parent.parent / "output"
+
+
+@router.post("/api/chat")
+async def chat(body: dict):
+    """Multi-agent chat turn.
+
+    Request body:
+        {
+            "message": "I need a servo bracket 60mm wide",
+            "history": [{"role": "user"|"agent", "agent_id": "...", "content": "..."}, ...],
+            "mentions": ["design", "engineering"],  // or [] for auto-routing
+            "backend": "mock"|"gemini"|"anthropic"|"openai"
+        }
+
+    Response:
+        {
+            "responses": [
+                {"agent_id", "agent_name", "message", "color", "avatar", "code"}, ...
+            ],
+            "preview": null | {"success", "part_name", "stl_url", "step_url", "execution", "validation"}
+        }
+    """
+    message = body.get("message", "").strip()
+    if not message:
+        return JSONResponse({"error": "Empty message"}, status_code=400)
+
+    history = body.get("history", [])
+    backend_name = body.get("backend", "mock")
+
+    # Parse @mentions from message if not provided
+    raw_mentions = body.get("mentions", [])
+    if not raw_mentions:
+        message, raw_mentions = parse_mentions(message)
+
+    mentions = raw_mentions if raw_mentions else None
+
+    # Select orchestrator based on backend
+    if backend_name in ("anthropic", "openai"):
+        orchestrator = CrewOrchestrator(
+            backend_name=backend_name, output_dir=OUTPUT_DIR
+        )
+    else:
+        orchestrator = get_orchestrator(backend_name, output_dir=OUTPUT_DIR)
+
+    # Run chat turn
+    try:
+        result = orchestrator.chat_turn(
+            message=message,
+            history=history,
+            mentions=mentions,
+        )
+        return JSONResponse(result)
+    except Exception as e:
+        return JSONResponse({"error": str(e)}, status_code=500)
+
+
+@router.post("/api/report")
+async def report(body: dict):
+    """Generate a design report from conversation history.
+
+    Request body:
+        {
+            "part_name": "servo_bracket",
+            "history": [...],
+            "backend": "gemini"
+        }
+    """
+    part_name = body.get("part_name", "part")
+    history = body.get("history", [])
+    backend_name = body.get("backend", "mock")
+
+    # Build report from conversation
+    report_sections = []
+    report_sections.append(f"# Design Report: {part_name}\n")
+
+    design_decisions = []
+    engineering_specs = []
+    cnc_notes = []
+
+    for msg in history:
+        agent_id = msg.get("agent_id", "")
+        content = msg.get("content", "")
+        if agent_id == "design":
+            design_decisions.append(content)
+        elif agent_id == "engineering":
+            engineering_specs.append(content)
+        elif agent_id == "cnc":
+            cnc_notes.append(content)
+
+    if design_decisions:
+        report_sections.append("## Design Decisions")
+        for d in design_decisions:
+            report_sections.append(f"- {d}")
+
+    if engineering_specs:
+        report_sections.append("\n## Engineering Specifications")
+        for s in engineering_specs:
+            report_sections.append(f"- {s}")
+
+    if cnc_notes:
+        report_sections.append("\n## Manufacturing Notes")
+        for n in cnc_notes:
+            report_sections.append(f"- {n}")
+
+    # Check if model files exist
+    stl_path = OUTPUT_DIR / f"{part_name}.stl"
+    step_path = OUTPUT_DIR / f"{part_name}.step"
+
+    report_sections.append("\n## Exported Files")
+    report_sections.append(f"- STEP: {'Available' if step_path.exists() else 'Not generated'}")
+    report_sections.append(f"- STL: {'Available' if stl_path.exists() else 'Not generated'}")
+
+    report_text = "\n".join(report_sections)
+
+    return JSONResponse({
+        "part_name": part_name,
+        "report": report_text,
+    })
+
+
+@router.get("/api/agents")
+async def list_agents():
+    """List available agents and their metadata."""
+    return JSONResponse({
+        "agents": [
+            {
+                "id": agent.id,
+                "name": agent.name,
+                "role": agent.role,
+                "color": agent.color,
+                "avatar": agent.avatar,
+            }
+            for agent in AGENTS.values()
+        ]
+    })

server/web.py

@@ -31,6 +31,8 @@ from fastapi import FastAPI, File, Form, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
 
+from server.routes import router
+
 from mcp import ClientSession
 from mcp.client.sse import sse_client
 
@@ -106,6 +108,8 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+app.include_router(router)
+
 
 # ── Routes ───────────────────────────────────────────────────────────────
 

web/index.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>NeuralCAD — Text-to-CNC Pipeline</title>
+<title>NeuralCAD — Multi-Agent Design</title>
 
 <!-- Three.js -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
@@ -37,6 +37,11 @@
     --machined-steel: #8899aa;
     --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
     --font-body: 'DM Sans', system-ui, sans-serif;
+    --agent-design: #7c3aed;
+    --agent-engineering: #00b4d8;
+    --agent-cnc: #00e676;
+    --agent-cad: #ffab40;
+    --chat-width: 340px;
   }
 
   html, body {
@@ -47,15 +52,23 @@
     font-family: var(--font-body);
   }
 
-  /* ── LAYOUT ─────────────────────────────────────── */
+  /* ---- Scrollbar ---- */
+  ::-webkit-scrollbar { width: 5px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--border-active); }
+
+  /* ---- LAYOUT ---- */
 
   #app {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    width: 100vw;
+    overflow: hidden;
   }
 
-  /* ── TOP BAR ────────────────────────────────────── */
+  /* ---- TOP BAR ---- */
 
   #topbar {
     flex: 0 0 44px;
@@ -65,7 +78,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 16px;
-    z-index: 10;
+    z-index: 100;
     position: relative;
   }
 
@@ -85,21 +98,10 @@
     gap: 10px;
   }
 
-  .logo-mark {
-    width: 22px; height: 22px;
-    border: 2px solid var(--accent);
-    transform: rotate(45deg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .logo-mark::after {
-    content: '';
-    width: 6px; height: 6px;
-    background: var(--accent);
-    border-radius: 1px;
+  .logo-diamond {
+    color: var(--accent);
+    font-size: 18px;
+    line-height: 1;
   }
 
   .logo-text {
@@ -122,6 +124,12 @@
     border-left: 1px solid var(--border);
   }
 
+  .topbar-center {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
   .topbar-right {
     display: flex;
     align-items: center;
@@ -131,7 +139,7 @@
   .backend-toggle {
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: 0;
     background: var(--bg-void);
     border: 1px solid var(--border);
     border-radius: 4px;
@@ -146,8 +154,11 @@
     cursor: pointer;
     color: var(--text-muted);
     transition: all 0.2s;
+    border-right: 1px solid var(--border);
   }
 
+  .backend-toggle button:last-child { border-right: none; }
+
   .backend-toggle button.active {
     background: var(--accent-glow);
     color: var(--accent);
@@ -157,8 +168,28 @@
     color: var(--text-secondary);
   }
 
+  .gallery-btn {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .gallery-btn:hover {
+    border-color: var(--accent-dim);
+    color: var(--accent);
+  }
+
   .status-dot {
-    width: 6px; height: 6px;
+    width: 7px; height: 7px;
     border-radius: 50%;
     background: var(--success);
     box-shadow: 0 0 6px var(--success);
@@ -170,19 +201,20 @@
     50% { opacity: 0.4; }
   }
 
-  .version-tag {
-    font-family: var(--font-mono);
-    font-size: 10px;
-    color: var(--text-muted);
-    padding: 2px 8px;
-    border: 1px solid var(--border);
-    border-radius: 3px;
+  /* ---- MAIN AREA ---- */
+
+  #main {
+    flex: 1;
+    display: flex;
+    position: relative;
+    min-height: 0;
+    overflow: hidden;
   }
 
-  /* ── 3D VIEWER ──────────────────────────────────── */
+  /* ---- 3D VIEWER ---- */
 
   #viewer-container {
-    flex: 1 1 60%;
+    flex: 1;
     position: relative;
     background: var(--bg-void);
     overflow: hidden;
@@ -195,42 +227,12 @@
     display: block;
   }
 
-  /* Viewport grid effect */
-  #viewer-container::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image:
-      linear-gradient(var(--border) 1px, transparent 1px),
-      linear-gradient(90deg, var(--border) 1px, transparent 1px);
-    background-size: 60px 60px;
-    opacity: 0.15;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  /* Corner brackets */
-  .corner-bracket {
-    position: absolute;
-    width: 20px; height: 20px;
-    border-color: var(--accent-dim);
-    border-style: solid;
-    border-width: 0;
-    opacity: 0.5;
-    z-index: 2;
-    pointer-events: none;
-  }
-  .corner-bracket.tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
-  .corner-bracket.tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
-  .corner-bracket.bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
-  .corner-bracket.br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }
-
-  /* Stats overlay */
+  /* Geo stats overlay - top left */
   #geo-stats {
     position: absolute;
     top: 14px;
-    right: 14px;
-    z-index: 3;
+    left: 14px;
+    z-index: 10;
     background: rgba(6, 8, 12, 0.85);
     border: 1px solid var(--border);
     border-radius: 4px;
@@ -247,17 +249,19 @@
   .stat-label { color: var(--text-muted); }
   .stat-value { color: var(--accent); }
 
-  /* CNC badge */
+  /* CNC badge - top right of viewer (NOT behind chat) */
   #cnc-badge {
     position: absolute;
     top: 14px;
-    left: 14px;
-    z-index: 3;
+    right: 14px;
+    z-index: 10;
     display: none;
     gap: 6px;
+    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   #cnc-badge.visible { display: flex; }
+  body.chat-open #cnc-badge { right: calc(var(--chat-width) + 14px); }
 
   .badge {
     font-family: var(--font-mono);
@@ -293,12 +297,12 @@
     color: var(--accent);
   }
 
-  /* Download buttons */
+  /* Download buttons - bottom left */
   #download-btns {
     position: absolute;
     bottom: 14px;
-    right: 14px;
-    z-index: 3;
+    left: 14px;
+    z-index: 10;
     display: none;
     gap: 6px;
   }
@@ -330,20 +334,23 @@
   #viewer-hint {
     position: absolute;
     bottom: 16px;
-    left: 16px;
-    z-index: 3;
+    right: 16px;
+    z-index: 10;
     font-family: var(--font-mono);
     font-size: 10px;
     color: var(--text-muted);
     letter-spacing: 0.5px;
     pointer-events: none;
+    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
+  body.chat-open #viewer-hint { right: calc(var(--chat-width) + 16px); }
+
   /* Loading spinner */
   #viewer-loading {
     position: absolute;
     inset: 0;
-    z-index: 4;
+    z-index: 20;
     display: none;
     align-items: center;
     justify-content: center;
@@ -376,12 +383,12 @@
   #viewer-empty {
     position: absolute;
     inset: 0;
-    z-index: 2;
+    z-index: 5;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    gap: 12px;
+    gap: 16px;
     pointer-events: none;
   }
 
@@ -393,6 +400,7 @@
     align-items: center;
     justify-content: center;
     transform: rotate(45deg);
+    opacity: 0.5;
   }
 
   .empty-icon-inner {
@@ -405,267 +413,537 @@
 
   .empty-text {
     font-family: var(--font-mono);
-    font-size: 11px;
+    font-size: 12px;
     color: var(--text-muted);
     letter-spacing: 1px;
+    text-align: center;
+    line-height: 1.6;
   }
 
-  /* ── BOTTOM PANEL ───────────────────────────────── */
+  /* ---- CHAT PANEL ---- */
 
-  #bottom-panel {
-    flex: 0 0 auto;
-    height: 40vh;
-    min-height: 240px;
-    max-height: 360px;
-    background: var(--bg-panel);
-    border-top: 1px solid var(--border);
+  #chat-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--chat-width);
+    height: 100%;
+    background: rgba(10, 14, 20, 0.92);
+    backdrop-filter: blur(16px);
+    border-left: 1px solid var(--border);
     display: flex;
     flex-direction: column;
-    position: relative;
+    z-index: 50;
+    transform: translateX(0);
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  #bottom-panel::before {
-    content: '';
+  #chat-panel.collapsed {
+    transform: translateX(100%);
+  }
+
+  /* Collapse toggle */
+  #chat-toggle {
+    all: unset;
     position: absolute;
-    top: -1px;
-    left: 0; right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
-    opacity: 0.3;
+    top: 50%;
+    left: -28px;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 56px;
+    background: rgba(10, 14, 20, 0.92);
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--border);
+    border-right: none;
+    border-radius: 6px 0 0 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-size: 14px;
+    transition: all 0.2s;
+    z-index: 51;
+  }
+
+  #chat-toggle:hover {
+    color: var(--accent);
+    background: rgba(10, 14, 20, 0.98);
+  }
+
+  /* Floating open pill */
+  #chat-open-pill {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 60;
+    display: none;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 20px;
+    background: rgba(10, 14, 20, 0.95);
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-primary);
+    letter-spacing: 0.5px;
+    transition: all 0.3s;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  #chat-open-pill:hover {
+    border-color: var(--accent-dim);
+    box-shadow: 0 4px 32px rgba(0, 180, 216, 0.15);
+  }
+
+  #chat-open-pill.visible { display: flex; }
+
+  .pill-dots {
+    display: flex;
+    gap: 4px;
   }
 
-  /* Tabs */
-  #tabs {
-    flex: 0 0 36px;
+  .pill-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+  }
+
+  /* Chat header */
+  .chat-header {
+    flex: 0 0 48px;
     display: flex;
-    gap: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
     border-bottom: 1px solid var(--border);
-    padding: 0 12px;
-    background: var(--bg-panel);
   }
 
-  .tab-btn {
-    all: unset;
+  .chat-header-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .chat-header-title {
     font-family: var(--font-mono);
     font-size: 11px;
-    font-weight: 400;
-    letter-spacing: 0.5px;
-    color: var(--text-muted);
-    padding: 0 16px;
-    cursor: pointer;
-    position: relative;
-    transition: color 0.2s;
+    font-weight: 600;
+    letter-spacing: 2px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+  }
+
+  .agent-dots {
+    display: flex;
+    gap: 5px;
+  }
+
+  .agent-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    opacity: 0.8;
+  }
+
+  /* Messages area */
+  #chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 12px;
     display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+  }
+
+  /* Quick examples */
+  .quick-examples {
+    display: flex;
+    flex-direction: column;
     align-items: center;
+    gap: 12px;
+    padding: 40px 16px 20px;
+  }
+
+  .quick-examples-label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+
+  .quick-chips {
+    display: flex;
+    flex-wrap: wrap;
     gap: 6px;
+    justify-content: center;
   }
 
-  .tab-btn:hover { color: var(--text-secondary); }
+  .quick-chip {
+    all: unset;
+    padding: 6px 12px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-secondary);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+  }
 
-  .tab-btn.active {
+  .quick-chip:hover {
+    border-color: var(--accent-dim);
     color: var(--accent);
+    background: var(--accent-glow);
   }
 
-  .tab-btn.active::after {
-    content: '';
-    position: absolute;
-    bottom: -1px;
-    left: 8px; right: 8px;
-    height: 1px;
-    background: var(--accent);
+  /* Message bubbles */
+  .msg {
+    display: flex;
+    gap: 8px;
+    max-width: 100%;
+    animation: msg-in 0.25s ease-out both;
   }
 
-  .tab-count {
-    font-size: 9px;
-    padding: 1px 5px;
-    border-radius: 3px;
-    background: var(--bg-void);
-    color: var(--text-muted);
+  @keyframes msg-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 
-  .tab-btn.active .tab-count {
-    background: var(--accent-glow);
-    color: var(--accent);
+  .msg-user {
+    justify-content: flex-end;
+  }
+
+  .msg-user .msg-bubble {
+    background: #1a2a3a;
+    border: 1px solid rgba(0, 180, 216, 0.15);
+    border-radius: 12px 12px 4px 12px;
+    padding: 8px 12px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--text-primary);
+    max-width: 85%;
+    word-wrap: break-word;
+  }
+
+  .msg-agent {
+    align-items: flex-start;
+  }
+
+  .msg-avatar {
+    flex-shrink: 0;
+    width: 24px; height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.7);
+    margin-top: 2px;
   }
 
-  /* Tab content */
-  .tab-content {
+  .msg-agent-body {
     flex: 1;
-    min-height: 0;
-    overflow: auto;
-    display: none;
-    padding: 12px 16px;
+    min-width: 0;
   }
 
-  .tab-content.active { display: flex; }
+  .msg-agent-name {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    margin-bottom: 3px;
+    text-transform: uppercase;
+  }
 
-  /* Scrollbar */
-  .tab-content::-webkit-scrollbar { width: 4px; }
-  .tab-content::-webkit-scrollbar-track { background: transparent; }
-  .tab-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+  .msg-agent-bubble {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px 12px 12px 12px;
+    padding: 8px 12px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--text-primary);
+    word-wrap: break-word;
+  }
 
-  /* ── GENERATE TAB ───────────────────────────────── */
+  /* CAD Coder special styling */
+  .msg-agent-bubble.cad-bubble {
+    background: rgba(255, 171, 64, 0.08);
+    border-color: rgba(255, 171, 64, 0.2);
+  }
 
-  #tab-generate {
-    gap: 12px;
+  .msg-view-code {
+    display: inline-block;
+    margin-top: 6px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--warning);
+    cursor: pointer;
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    transition: opacity 0.2s;
   }
 
-  .input-area {
-    flex: 1;
+  .msg-view-code:hover { opacity: 0.7; }
+
+  /* Typing indicator */
+  .typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+  }
+
+  .typing-dots {
+    display: flex;
+    gap: 4px;
+  }
+
+  .typing-dots span {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    animation: typing-bounce 1.2s ease-in-out infinite;
+  }
+
+  .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
+  .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
+
+  @keyframes typing-bounce {
+    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+    30% { transform: translateY(-4px); opacity: 1; }
+  }
+
+  .typing-label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+    letter-spacing: 0.5px;
+  }
+
+  /* Chat input area */
+  .chat-input-area {
+    flex: 0 0 auto;
+    padding: 12px;
+    border-top: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     gap: 8px;
-    min-width: 0;
   }
 
-  #prompt-input {
+  .chat-input-row {
+    display: flex;
+    gap: 6px;
+    align-items: flex-end;
+  }
+
+  #chat-input {
     flex: 1;
-    min-height: 60px;
+    min-height: 38px;
+    max-height: 120px;
     background: var(--bg-input);
     border: 1px solid var(--border);
-    border-radius: 4px;
-    padding: 10px 12px;
+    border-radius: 8px;
+    padding: 8px 12px;
     color: var(--text-primary);
     font-family: var(--font-body);
     font-size: 13px;
-    line-height: 1.5;
+    line-height: 1.4;
     resize: none;
     outline: none;
     transition: border-color 0.2s;
   }
 
-  #prompt-input::placeholder { color: var(--text-muted); }
-  #prompt-input:focus { border-color: var(--accent-dim); }
+  #chat-input::placeholder { color: var(--text-muted); }
+  #chat-input:focus { border-color: var(--accent-dim); }
 
-  .action-row {
+  .chat-btn {
+    all: unset;
+    flex-shrink: 0;
+    width: 34px; height: 34px;
+    border-radius: 8px;
     display: flex;
-    gap: 8px;
     align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 16px;
   }
 
-  .btn-generate {
-    all: unset;
+  .chat-btn-preview {
+    background: rgba(255, 171, 64, 0.1);
+    border: 1px solid rgba(255, 171, 64, 0.25);
+    color: var(--warning);
+  }
+
+  .chat-btn-preview:hover {
+    background: rgba(255, 171, 64, 0.2);
+    border-color: var(--warning);
+  }
+
+  .chat-btn-send {
+    background: var(--accent-glow);
+    border: 1px solid rgba(0, 180, 216, 0.3);
+    color: var(--accent);
+  }
+
+  .chat-btn-send:hover {
+    background: rgba(0, 180, 216, 0.25);
+    border-color: var(--accent);
+  }
+
+  .chat-shortcut-hint {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--text-muted);
+    text-align: right;
+    letter-spacing: 0.3px;
+  }
+
+  /* @mention autocomplete */
+  #mention-dropdown {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 12px;
+    right: 12px;
+    margin-bottom: 4px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
+    z-index: 55;
+  }
+
+  #mention-dropdown.visible { display: block; }
+
+  .mention-option {
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 8px;
-    flex: 1;
-    padding: 8px 20px;
-    background: linear-gradient(135deg, var(--accent-dim), var(--accent));
-    border-radius: 4px;
+    gap: 10px;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background 0.15s;
+    font-size: 12px;
+  }
+
+  .mention-option:hover,
+  .mention-option.active {
+    background: var(--bg-surface);
+  }
+
+  .mention-dot {
+    width: 10px; height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .mention-name {
     font-family: var(--font-mono);
+    font-weight: 500;
+    color: var(--text-primary);
     font-size: 12px;
-    font-weight: 600;
-    color: var(--bg-void);
-    letter-spacing: 1px;
-    cursor: pointer;
-    transition: all 0.2s;
   }
 
-  .btn-generate:hover { filter: brightness(1.15); }
-
-  .btn-generate:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-    filter: none;
-  }
+  .mention-role {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+    margin-left: auto;
+  }
+
+  /* ---- CODE VIEWER MODAL ---- */
+
+  #code-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    align-items: center;
+    justify-content: center;
+    background: rgba(6, 8, 12, 0.85);
+    backdrop-filter: blur(8px);
+  }
+
+  #code-modal.visible { display: flex; }
 
-  .btn-image {
-    all: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px; height: 36px;
-    background: var(--bg-surface);
+  .code-modal-inner {
+    width: min(720px, 90vw);
+    max-height: 80vh;
+    background: var(--bg-panel);
     border: 1px solid var(--border);
-    border-radius: 4px;
-    color: var(--text-muted);
-    cursor: pointer;
-    font-size: 16px;
-    transition: all 0.2s;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
+    animation: modal-in 0.25s ease-out;
   }
 
-  .btn-image:hover {
-    border-color: var(--accent-dim);
-    color: var(--accent);
+  @keyframes modal-in {
+    from { opacity: 0; transform: scale(0.96) translateY(12px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
   }
 
-  .examples-sidebar {
-    flex: 0 0 220px;
+  .code-modal-header {
     display: flex;
-    flex-direction: column;
-    gap: 4px;
-    overflow-y: auto;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
   }
 
-  .examples-label {
+  .code-modal-title {
     font-family: var(--font-mono);
-    font-size: 9px;
-    color: var(--text-muted);
-    letter-spacing: 2px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    letter-spacing: 1px;
     text-transform: uppercase;
-    margin-bottom: 2px;
   }
 
-  .example-btn {
+  .code-modal-close {
     all: unset;
+    width: 28px; height: 28px;
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 7px 10px;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
+    justify-content: center;
     border-radius: 4px;
-    font-family: var(--font-mono);
-    font-size: 10px;
-    color: var(--text-secondary);
     cursor: pointer;
-    transition: all 0.2s;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .example-btn:hover {
-    border-color: var(--accent-dim);
-    color: var(--text-primary);
-    background: var(--bg-input);
-  }
-
-  .example-arrow {
     color: var(--text-muted);
-    font-size: 8px;
-    flex-shrink: 0;
+    font-size: 18px;
+    transition: all 0.15s;
   }
 
-  /* ── CODE TAB ───────────────────────────────────── */
-
-  #tab-code {
-    padding: 0;
+  .code-modal-close:hover {
+    background: var(--bg-surface);
+    color: var(--text-primary);
   }
 
   #code-display {
-    width: 100%;
-    height: 100%;
+    flex: 1;
     margin: 0;
-    padding: 14px 16px;
+    padding: 16px;
     background: var(--bg-input);
-    border: none;
     color: var(--machined-steel);
     font-family: var(--font-mono);
-    font-size: 11.5px;
+    font-size: 12px;
     line-height: 1.7;
     overflow: auto;
     white-space: pre;
     tab-size: 4;
   }
 
-  .code-empty {
-    color: var(--text-muted) !important;
-    font-style: italic;
-  }
-
-  /* Syntax coloring via JS */
+  /* Syntax coloring */
   .kw { color: #c792ea; }
   .fn { color: #82aaff; }
   .cm { color: #546e7a; }
@@ -673,102 +951,84 @@
   .nu { color: #f78c6c; }
   .op { color: #89ddff; }
 
-  /* ── VALIDATION TAB ─────────────────────────────── */
+  /* ---- GALLERY MODAL ---- */
 
-  #tab-validation {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .validation-empty {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--text-muted);
-    letter-spacing: 0.5px;
-    margin: auto;
-  }
-
-  .validation-header {
-    display: flex;
+  #gallery-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 200;
     align-items: center;
-    gap: 12px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--border);
+    justify-content: center;
+    background: rgba(6, 8, 12, 0.85);
+    backdrop-filter: blur(8px);
   }
 
-  .validation-header .badge { font-size: 11px; }
-
-  .validation-axis {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--text-secondary);
-  }
+  #gallery-modal.visible { display: flex; }
 
-  .issue-list {
+  .gallery-modal-inner {
+    width: min(800px, 90vw);
+    max-height: 80vh;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    overflow: hidden;
+    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
+    animation: modal-in 0.25s ease-out;
   }
 
-  .issue-item {
+  .gallery-modal-header {
     display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    padding: 6px 8px;
-    border-radius: 3px;
-    font-size: 12px;
-    font-family: var(--font-mono);
-    line-height: 1.4;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
   }
 
-  .issue-item.error { background: rgba(255, 82, 82, 0.05); }
-  .issue-item.warning { background: rgba(255, 171, 64, 0.05); }
-  .issue-item.info { background: rgba(0, 180, 216, 0.03); }
-
-  .issue-severity {
-    flex-shrink: 0;
-    font-size: 10px;
+  .gallery-modal-title {
+    font-family: var(--font-mono);
+    font-size: 11px;
     font-weight: 600;
+    color: var(--text-secondary);
+    letter-spacing: 1px;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
-    width: 52px;
   }
 
-  .issue-severity.error { color: var(--error); }
-  .issue-severity.warning { color: var(--warning); }
-  .issue-severity.info { color: var(--accent); }
-
-  .issue-message { color: var(--text-secondary); }
-
-  /* ── GALLERY TAB ────────────────────────────────── */
-
-  #tab-gallery {
-    gap: 8px;
+  .gallery-grid {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
     flex-wrap: wrap;
+    gap: 12px;
     align-content: flex-start;
   }
 
   .gallery-empty {
+    width: 100%;
+    text-align: center;
+    padding: 40px;
     font-family: var(--font-mono);
     font-size: 11px;
     color: var(--text-muted);
     letter-spacing: 0.5px;
-    margin: auto;
   }
 
   .gallery-card {
     all: unset;
     flex: 0 0 auto;
-    width: 160px;
+    width: 180px;
     background: var(--bg-surface);
     border: 1px solid var(--border);
-    border-radius: 4px;
-    padding: 10px;
+    border-radius: 6px;
+    padding: 12px;
     cursor: pointer;
     transition: all 0.2s;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 8px;
   }
 
   .gallery-card:hover {
@@ -794,7 +1054,7 @@
     gap: 8px;
   }
 
-  /* ── ANIMATIONS ─────────────────────────────────── */
+  /* ---- ANIMATIONS ---- */
 
   @keyframes fade-in-up {
     from { opacity: 0; transform: translateY(8px); }
@@ -805,138 +1065,175 @@
     animation: fade-in-up 0.3s ease-out both;
   }
 
-  /* ── RESPONSIVE ─────────────────────────────────── */
+  /* ---- RESPONSIVE ---- */
 
   @media (max-width: 768px) {
-    .examples-sidebar { display: none; }
     .logo-sub { display: none; }
-    #bottom-panel { height: 50vh; max-height: none; }
+    :root { --chat-width: 100vw; }
+    #chat-toggle { display: none; }
+    .gallery-btn span { display: none; }
   }
 </style>
 </head>
-<body>
+<body class="chat-open">
 <div id="app">
 
-  <!-- ── TOP BAR ─────────────────────────────────── -->
+  <!-- ---- TOP BAR ---- -->
   <div id="topbar">
     <div class="logo">
-      <div class="logo-mark"></div>
+      <span class="logo-diamond">&#9670;</span>
       <span class="logo-text">NeuralCAD</span>
-      <span class="logo-sub">Text-to-CNC Pipeline</span>
+      <span class="logo-sub">Multi-Agent Design</span>
     </div>
     <div class="topbar-right">
       <div class="backend-toggle">
         <button id="btn-mock" class="active" onclick="setBackend('mock')">MOCK</button>
         <button id="btn-gemini" onclick="setBackend('gemini')">GEMINI</button>
-        <button id="btn-api" onclick="setBackend('anthropic')">CLAUDE</button>
+        <button id="btn-claude" onclick="setBackend('anthropic')">CLAUDE</button>
       </div>
-      <div class="status-dot" id="status-dot" title="MCP Server Connected"></div>
-      <div class="version-tag">v1.0.0</div>
+      <button class="gallery-btn" onclick="openGallery()">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        <span>GALLERY</span>
+      </button>
+      <div class="status-dot" id="status-dot" title="Server Connected"></div>
     </div>
   </div>
 
-  <!-- ── 3D VIEWER ───────────────────────────────── -->
-  <div id="viewer-container">
-    <canvas id="viewer-canvas"></canvas>
+  <!-- ---- MAIN AREA ---- -->
+  <div id="main">
 
-    <div class="corner-bracket tl"></div>
-    <div class="corner-bracket tr"></div>
-    <div class="corner-bracket bl"></div>
-    <div class="corner-bracket br"></div>
+    <!-- 3D Viewer -->
+    <div id="viewer-container">
+      <canvas id="viewer-canvas"></canvas>
 
-    <div id="geo-stats">
-      <div><span class="stat-label">VOL </span><span class="stat-value" id="stat-volume">—</span></div>
-      <div><span class="stat-label">BBOX </span><span class="stat-value" id="stat-bbox">—</span></div>
-      <div><span class="stat-label">FACES </span><span class="stat-value" id="stat-faces">—</span><span class="stat-label"> EDGES </span><span class="stat-value" id="stat-edges">—</span></div>
-    </div>
+      <div id="geo-stats">
+        <div><span class="stat-label">VOL </span><span class="stat-value" id="stat-volume">&mdash;</span></div>
+        <div><span class="stat-label">BBOX </span><span class="stat-value" id="stat-bbox">&mdash;</span></div>
+        <div><span class="stat-label">FACES </span><span class="stat-value" id="stat-faces">&mdash;</span><span class="stat-label"> EDGES </span><span class="stat-value" id="stat-edges">&mdash;</span></div>
+      </div>
 
-    <div id="cnc-badge">
-      <div class="badge badge-success" id="badge-cnc"></div>
-      <div class="badge badge-info" id="badge-axis"></div>
-    </div>
+      <div id="cnc-badge">
+        <div class="badge badge-success" id="badge-cnc"></div>
+        <div class="badge badge-info" id="badge-axis"></div>
+      </div>
 
-    <div id="download-btns">
-      <a class="dl-btn" id="dl-step" download>STEP</a>
-      <a class="dl-btn" id="dl-stl" download>STL</a>
-    </div>
+      <div id="download-btns">
+        <a class="dl-btn" id="dl-step" download>STEP</a>
+        <a class="dl-btn" id="dl-stl" download>STL</a>
+        <a class="dl-btn" id="dl-report" download>REPORT</a>
+      </div>
 
-    <div id="viewer-hint">DRAG ROTATE &middot; SCROLL ZOOM &middot; RIGHT-DRAG PAN</div>
+      <div id="viewer-hint">DRAG ROTATE &middot; SCROLL ZOOM &middot; RIGHT-DRAG PAN</div>
 
-    <div id="viewer-loading">
-      <div class="spinner"></div>
-      <div class="loading-text" id="loading-msg">GENERATING MODEL...</div>
-    </div>
+      <div id="viewer-loading">
+        <div class="spinner"></div>
+        <div class="loading-text" id="loading-msg">GENERATING MODEL...</div>
+      </div>
 
-    <div id="viewer-empty">
-      <div class="empty-icon"><div class="empty-icon-inner"></div></div>
-      <div class="empty-text">DESCRIBE A PART TO BEGIN</div>
+      <div id="viewer-empty">
+        <div class="empty-icon"><div class="empty-icon-inner"></div></div>
+        <div class="empty-text">Start a conversation to<br>design your part</div>
+      </div>
     </div>
-  </div>
 
-  <!-- ── BOTTOM PANEL ────────────────────────────── -->
-  <div id="bottom-panel">
-    <div id="tabs">
-      <button class="tab-btn active" data-tab="generate">GENERATE</button>
-      <button class="tab-btn" data-tab="code">CODE</button>
-      <button class="tab-btn" data-tab="validation">VALIDATION <span class="tab-count" id="issue-count" style="display:none">0</span></button>
-      <button class="tab-btn" data-tab="gallery">GALLERY <span class="tab-count" id="gallery-count" style="display:none">0</span></button>
-    </div>
+    <!-- Chat Panel -->
+    <div id="chat-panel">
+      <button id="chat-toggle" onclick="toggleChat()" title="Toggle chat panel">&#9664;</button>
+
+      <div class="chat-header">
+        <div class="chat-header-left">
+          <span class="chat-header-title">Design Chat</span>
+          <div class="agent-dots">
+            <div class="agent-dot" style="background: var(--agent-design);" title="Design Agent"></div>
+            <div class="agent-dot" style="background: var(--agent-engineering);" title="Engineering Agent"></div>
+            <div class="agent-dot" style="background: var(--agent-cnc);" title="CNC Agent"></div>
+            <div class="agent-dot" style="background: var(--agent-cad);" title="CAD Coder Agent"></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="chat-messages">
+        <div class="quick-examples" id="quick-examples">
+          <div class="quick-examples-label">Quick Start</div>
+          <div class="quick-chips">
+            <button class="quick-chip" onclick="quickSend('Design a servo bracket')">Design a servo bracket</button>
+            <button class="quick-chip" onclick="quickSend('I need a spur gear')">I need a spur gear</button>
+            <button class="quick-chip" onclick="quickSend('Create a heatsink')">Create a heatsink</button>
+            <button class="quick-chip" onclick="quickSend('Design a pipe flange')">Design a pipe flange</button>
+          </div>
+        </div>
+      </div>
 
-    <!-- Generate Tab -->
-    <div class="tab-content active" id="tab-generate">
-      <div class="input-area">
-        <textarea id="prompt-input" placeholder="Describe a mechanical part...&#10;&#10;e.g. A mounting bracket with four M6 bolt holes, 80mm wide, with rounded corners"></textarea>
-        <div class="action-row">
-          <button class="btn-generate" id="btn-gen" onclick="doGenerate()">
-            <span id="btn-gen-text">GENERATE MODEL</span>
+      <div class="chat-input-area" style="position: relative;">
+        <div id="mention-dropdown">
+          <div class="mention-option" data-agent="design" onclick="insertMention('design')">
+            <div class="mention-dot" style="background: var(--agent-design);"></div>
+            <span class="mention-name">@design</span>
+            <span class="mention-role">Design Agent</span>
+          </div>
+          <div class="mention-option" data-agent="engineering" onclick="insertMention('engineering')">
+            <div class="mention-dot" style="background: var(--agent-engineering);"></div>
+            <span class="mention-name">@engineering</span>
+            <span class="mention-role">Engineering Agent</span>
+          </div>
+          <div class="mention-option" data-agent="cnc" onclick="insertMention('cnc')">
+            <div class="mention-dot" style="background: var(--agent-cnc);"></div>
+            <span class="mention-name">@cnc</span>
+            <span class="mention-role">CNC Agent</span>
+          </div>
+          <div class="mention-option" data-agent="cad" onclick="insertMention('cad')">
+            <div class="mention-dot" style="background: var(--agent-cad);"></div>
+            <span class="mention-name">@cad</span>
+            <span class="mention-role">CAD Coder</span>
+          </div>
+        </div>
+        <div class="chat-input-row">
+          <textarea id="chat-input" rows="1" placeholder="Type your message..."></textarea>
+          <button class="chat-btn chat-btn-preview" onclick="sendPreview()" title="Generate 3D preview">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
           </button>
-          <button class="btn-image" title="Generate from image" onclick="document.getElementById('image-input').click()">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+          <button class="chat-btn chat-btn-send" onclick="sendFromInput()" title="Send message">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
           </button>
-          <input type="file" id="image-input" accept="image/*" style="display:none" onchange="doImageGenerate(this)">
         </div>
-      </div>
-      <div class="examples-sidebar">
-        <div class="examples-label">Quick Examples</div>
-        <button class="example-btn" onclick="runExample('A mounting bracket with four M6 bolt holes, 80mm wide')">
-          <span class="example-arrow">&#9654;</span> Mounting bracket
-        </button>
-        <button class="example-btn" onclick="runExample('A spur gear with 20 teeth, module 2, 10mm thick')">
-          <span class="example-arrow">&#9654;</span> Spur gear
-        </button>
-        <button class="example-btn" onclick="runExample('A 100mm pipe flange with 8 M8 bolt holes and center bore')">
-          <span class="example-arrow">&#9654;</span> Pipe flange
-        </button>
-        <button class="example-btn" onclick="runExample('A 30mm cylinder with 12 cooling fins, heatsink')">
-          <span class="example-arrow">&#9654;</span> Heatsink
-        </button>
-        <button class="example-btn" onclick="runExample('An L-bracket 60mm arms with M5 holes, 25mm wide')">
-          <span class="example-arrow">&#9654;</span> L-bracket
-        </button>
-        <button class="example-btn" onclick="runExample('An enclosure 120x80x40mm with pocket, slots, and rounded corners')">
-          <span class="example-arrow">&#9654;</span> Electronics enclosure
-        </button>
-        <button class="example-btn" onclick="runExample('A 50x50x10mm plate with central slot and two M6 holes')">
-          <span class="example-arrow">&#9654;</span> Slotted plate
-        </button>
-        <button class="example-btn" onclick="runExample('A box 80x60x30mm with 4 mounting bosses and chamfered edges')">
-          <span class="example-arrow">&#9654;</span> Boss mount
-        </button>
+        <div class="chat-shortcut-hint">Ctrl+Enter to send</div>
       </div>
     </div>
 
-    <!-- Code Tab -->
-    <div class="tab-content" id="tab-code">
-      <pre id="code-display" class="code-empty">No generated code yet. Run a generation to see the CadQuery output.</pre>
-    </div>
+  </div>
+</div>
+
+<!-- Floating open pill (when chat collapsed) -->
+<div id="chat-open-pill" onclick="toggleChat()">
+  <span>Open Chat</span>
+  <div class="pill-dots">
+    <div class="pill-dot" style="background: var(--agent-design);"></div>
+    <div class="pill-dot" style="background: var(--agent-engineering);"></div>
+    <div class="pill-dot" style="background: var(--agent-cnc);"></div>
+    <div class="pill-dot" style="background: var(--agent-cad);"></div>
+  </div>
+  <span>&#9654;</span>
+</div>
 
-    <!-- Validation Tab -->
-    <div class="tab-content" id="tab-validation">
-      <div class="validation-empty">No validation data. Generate a model first.</div>
+<!-- Code Viewer Modal -->
+<div id="code-modal">
+  <div class="code-modal-inner">
+    <div class="code-modal-header">
+      <span class="code-modal-title">CadQuery Code</span>
+      <button class="code-modal-close" onclick="closeCodeModal()">&times;</button>
     </div>
+    <pre id="code-display"></pre>
+  </div>
+</div>
 
-    <!-- Gallery Tab -->
-    <div class="tab-content" id="tab-gallery">
+<!-- Gallery Modal -->
+<div id="gallery-modal">
+  <div class="gallery-modal-inner">
+    <div class="gallery-modal-header">
+      <span class="gallery-modal-title">Model Gallery</span>
+      <button class="code-modal-close" onclick="closeGallery()">&times;</button>
+    </div>
+    <div class="gallery-grid" id="gallery-grid">
       <div class="gallery-empty">No models generated yet.</div>
     </div>
   </div>
@@ -946,9 +1243,21 @@
 // ── STATE ─────────────────────────────────────────────
 
 let currentBackend = 'mock';
+let chatHistory = [];
+let chatPanelOpen = true;
 let currentPartName = '';
-let scene, camera, renderer, controls, currentMesh;
+let currentCode = '';
+let scene, camera, renderer, controls, currentMesh, gridHelper;
 const galleryItems = [];
+let mentionActive = false;
+let mentionIndex = 0;
+
+const AGENTS = {
+  design:      { name: 'Design',      color: '#7c3aed', avatar: 'D' },
+  engineering: { name: 'Engineering', color: '#00b4d8', avatar: 'E' },
+  cnc:         { name: 'CNC',         color: '#00e676', avatar: 'C' },
+  cad:         { name: 'CAD Coder',   color: '#ffab40', avatar: '{}'  },
+};
 
 // ── THREE.JS SETUP ────────────────────────────────────
 
@@ -986,6 +1295,11 @@ function initViewer() {
   rimLight.position.set(0, -50, 100);
   scene.add(rimLight);
 
+  // Grid helper
+  gridHelper = new THREE.GridHelper(400, 40, 0x1a2636, 0x111822);
+  gridHelper.position.y = -0.5;
+  scene.add(gridHelper);
+
   // Controls
   controls = new THREE.OrbitControls(camera, renderer.domElement);
   controls.enableDamping = true;
@@ -1017,14 +1331,12 @@ function loadSTL(url) {
   return new Promise((resolve, reject) => {
     const loader = new THREE.STLLoader();
     loader.load(url, (geometry) => {
-      // Remove existing mesh
       if (currentMesh) {
         scene.remove(currentMesh);
         currentMesh.geometry.dispose();
         currentMesh.material.dispose();
       }
 
-      // Material: machined steel look
       const material = new THREE.MeshPhongMaterial({
         color: 0x7799aa,
         specular: 0x445566,
@@ -1036,7 +1348,6 @@ function loadSTL(url) {
       mesh.castShadow = true;
       mesh.receiveShadow = true;
 
-      // Center geometry
       geometry.computeBoundingBox();
       const center = new THREE.Vector3();
       geometry.boundingBox.getCenter(center);
@@ -1046,15 +1357,19 @@ function loadSTL(url) {
       currentMesh = mesh;
 
       // Fit camera
-      const box = geometry.boundingBox;
       const size = new THREE.Vector3();
-      box.getSize(size);
+      geometry.boundingBox.getSize(size);
       const maxDim = Math.max(size.x, size.y, size.z);
       const dist = maxDim * 2.5;
       camera.position.set(dist * 0.7, dist * 0.5, dist * 0.7);
       controls.target.set(0, 0, 0);
       controls.update();
 
+      // Update grid to match model scale
+      if (gridHelper) {
+        gridHelper.position.y = -size.y / 2 - 0.5;
+      }
+
       document.getElementById('viewer-empty').style.display = 'none';
       resolve();
     }, undefined, reject);
@@ -1067,132 +1382,279 @@ function setBackend(name) {
   currentBackend = name;
   document.getElementById('btn-mock').classList.toggle('active', name === 'mock');
   document.getElementById('btn-gemini').classList.toggle('active', name === 'gemini');
-  document.getElementById('btn-api').classList.toggle('active', name === 'anthropic');
+  document.getElementById('btn-claude').classList.toggle('active', name === 'anthropic');
 }
 
-// ── TABS ──────────────────────────────────────────────
+// ── CHAT PANEL TOGGLE ─────────────────────────────────
+
+function toggleChat() {
+  chatPanelOpen = !chatPanelOpen;
+  const panel = document.getElementById('chat-panel');
+  const pill = document.getElementById('chat-open-pill');
+  const toggle = document.getElementById('chat-toggle');
+
+  if (chatPanelOpen) {
+    panel.classList.remove('collapsed');
+    pill.classList.remove('visible');
+    toggle.innerHTML = '&#9664;';
+    document.body.classList.add('chat-open');
+  } else {
+    panel.classList.add('collapsed');
+    pill.classList.add('visible');
+    toggle.innerHTML = '&#9654;';
+    document.body.classList.remove('chat-open');
+  }
+}
 
-document.getElementById('tabs').addEventListener('click', (e) => {
-  const btn = e.target.closest('.tab-btn');
-  if (!btn) return;
-  const tabName = btn.dataset.tab;
+// ── CHAT MESSAGING ────────────────────────────────────
 
-  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
-  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+async function sendMessage(text) {
+  if (!text.trim()) return;
 
-  btn.classList.add('active');
-  document.getElementById('tab-' + tabName).classList.add('active');
-});
+  // Parse @mentions
+  const mentions = [];
+  const mentionRegex = /@(design|engineering|cnc|cad)\b/gi;
+  let match;
+  while ((match = mentionRegex.exec(text)) !== null) {
+    mentions.push(match[1].toLowerCase());
+  }
+  const cleanedText = text.replace(mentionRegex, '').trim();
 
-// ── GENERATION ────────────────────────────────────────
+  // Hide quick examples
+  const examples = document.getElementById('quick-examples');
+  if (examples) examples.style.display = 'none';
 
-async function doGenerate() {
-  const prompt = document.getElementById('prompt-input').value.trim();
-  if (!prompt) return;
+  // Add user message
+  addMessage({ role: 'user', content: text });
+  chatHistory.push({ role: 'user', content: text });
 
-  setLoading(true, 'GENERATING MODEL...');
+  // Show typing
+  showTyping();
 
   try {
-    const resp = await fetch('/api/generate', {
+    const resp = await fetch('/api/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ prompt, backend: currentBackend }),
+      body: JSON.stringify({
+        message: cleanedText,
+        history: chatHistory,
+        mentions: mentions,
+        backend: currentBackend,
+      }),
     });
     const data = await resp.json();
-    handleResult(data);
+
+    hideTyping();
+
+    // Add agent responses
+    for (const r of data.responses) {
+      addMessage({
+        role: 'agent',
+        agent_id: r.agent_id,
+        agent_name: r.agent_name,
+        content: r.message,
+        color: r.color,
+        avatar: r.avatar,
+        code: r.code,
+      });
+      chatHistory.push({ role: 'agent', agent_id: r.agent_id, content: r.message });
+    }
+
+    // If preview available, load 3D model
+    if (data.preview && data.preview.success) {
+      setViewerLoading(true, 'LOADING 3D MODEL...');
+      try {
+        await loadSTL(data.preview.stl_url);
+      } catch (e) {
+        console.warn('STL load failed:', e);
+      }
+      setViewerLoading(false);
+      updateGeoStats(data.preview.execution);
+      updateCNCBadge(data.preview.validation);
+      updateDownloads(data.preview.part_name);
+
+      if (data.preview.part_name) {
+        currentPartName = data.preview.part_name;
+        addToGallery(data.preview);
+      }
+    }
   } catch (err) {
-    setLoading(false);
-    alert('Error: ' + err.message);
+    hideTyping();
+    addMessage({
+      role: 'agent',
+      agent_id: 'system',
+      agent_name: 'System',
+      content: 'Error: ' + err.message,
+      color: '#ff5252',
+      avatar: '!',
+    });
   }
 }
 
-async function doImageGenerate(input) {
-  const file = input.files[0];
-  if (!file) return;
+function sendFromInput() {
+  const input = document.getElementById('chat-input');
+  const text = input.value.trim();
+  if (!text) return;
+  input.value = '';
+  input.style.height = 'auto';
+  closeMentionDropdown();
+  sendMessage(text);
+}
+
+function sendPreview() {
+  sendMessage('@cad Generate a 3D preview based on our discussion');
+}
 
-  setLoading(true, 'ANALYZING IMAGE...');
+function quickSend(text) {
+  const examples = document.getElementById('quick-examples');
+  if (examples) examples.style.display = 'none';
+  sendMessage(text);
+}
 
-  const form = new FormData();
-  form.append('image', file);
-  form.append('backend', currentBackend === 'mock' ? 'anthropic' : currentBackend);
+// ── MESSAGE RENDERING ─────────────────────────────────
 
-  try {
-    const resp = await fetch('/api/generate-image', { method: 'POST', body: form });
-    const data = await resp.json();
-    handleResult(data);
-  } catch (err) {
-    setLoading(false);
-    alert('Error: ' + err.message);
+function addMessage(msg) {
+  const container = document.getElementById('chat-messages');
+
+  const el = document.createElement('div');
+
+  if (msg.role === 'user') {
+    el.className = 'msg msg-user';
+    el.innerHTML = '<div class="msg-bubble">' + escapeHtml(msg.content) + '</div>';
+  } else {
+    const agentId = msg.agent_id || 'system';
+    const agentInfo = AGENTS[agentId] || { name: msg.agent_name || 'Agent', color: msg.color || '#5a7089', avatar: '?' };
+    const color = msg.color || agentInfo.color;
+    const avatar = msg.avatar || agentInfo.avatar;
+    const name = msg.agent_name || agentInfo.name;
+    const isCad = agentId === 'cad';
+
+    el.className = 'msg msg-agent';
+
+    let html = '<div class="msg-avatar" style="background: ' + color + ';">' + avatar + '</div>';
+    html += '<div class="msg-agent-body">';
+    html += '<div class="msg-agent-name" style="color: ' + color + ';">' + escapeHtml(name) + '</div>';
+    html += '<div class="msg-agent-bubble' + (isCad ? ' cad-bubble' : '') + '">' + escapeHtml(msg.content);
+
+    if (msg.code) {
+      currentCode = msg.code;
+      html += '<br><a class="msg-view-code" onclick="openCodeModal()">&#9654; View code</a>';
+    }
+
+    html += '</div></div>';
+    el.innerHTML = html;
   }
 
-  input.value = '';
+  container.appendChild(el);
+  scrollChatToBottom();
 }
 
-function runExample(prompt) {
-  document.getElementById('prompt-input').value = prompt;
-  // Force mock for examples (reliability)
-  const prevBackend = currentBackend;
-  currentBackend = 'mock';
-  doGenerate().then(() => { currentBackend = prevBackend; });
+function showTyping() {
+  const container = document.getElementById('chat-messages');
+  const el = document.createElement('div');
+  el.className = 'typing-indicator';
+  el.id = 'typing-indicator';
+  el.innerHTML = '<div class="typing-dots"><span></span><span></span><span></span></div><span class="typing-label">Agents are thinking...</span>';
+  container.appendChild(el);
+  scrollChatToBottom();
 }
 
-async function handleResult(data) {
-  if (!data.success) {
-    setLoading(false);
-    alert('Generation failed: ' + (data.execution?.error || data.error || 'Unknown error'));
-    return;
-  }
+function hideTyping() {
+  const el = document.getElementById('typing-indicator');
+  if (el) el.remove();
+}
 
-  currentPartName = data.part_name;
+function scrollChatToBottom() {
+  const container = document.getElementById('chat-messages');
+  requestAnimationFrame(() => {
+    container.scrollTop = container.scrollHeight;
+  });
+}
 
-  // Update code tab
-  updateCodeTab(data.generated_code);
+// ── @MENTION AUTOCOMPLETE ─────────────────────────────
 
-  // Update validation tab
-  updateValidationTab(data.validation, data.execution);
+const mentionAgents = ['design', 'engineering', 'cnc', 'cad'];
 
-  // Update geometry stats
-  updateGeoStats(data.execution);
+function handleInputForMention(e) {
+  const input = document.getElementById('chat-input');
+  const val = input.value;
+  const pos = input.selectionStart;
 
-  // Update CNC badge
-  updateCNCBadge(data.validation);
+  // Find @ before cursor
+  const before = val.substring(0, pos);
+  const atMatch = before.match(/@(\w*)$/);
 
-  // Update downloads
-  updateDownloads(data.part_name, data.exported_files);
+  if (atMatch) {
+    const query = atMatch[1].toLowerCase();
+    const filtered = mentionAgents.filter(a => a.startsWith(query));
 
-  // Load 3D model
-  setLoading(true, 'LOADING 3D MODEL...');
-  try {
-    await loadSTL('/api/models/' + data.part_name + '.stl');
-  } catch (e) {
-    console.warn('STL load failed:', e);
+    if (filtered.length > 0) {
+      showMentionDropdown(filtered);
+      mentionActive = true;
+      return;
+    }
+  }
+
+  closeMentionDropdown();
+}
+
+function showMentionDropdown(filtered) {
+  const dropdown = document.getElementById('mention-dropdown');
+  const options = dropdown.querySelectorAll('.mention-option');
+  let visibleCount = 0;
+
+  options.forEach(opt => {
+    const agent = opt.dataset.agent;
+    if (filtered.includes(agent)) {
+      opt.style.display = 'flex';
+      visibleCount++;
+    } else {
+      opt.style.display = 'none';
+    }
+  });
+
+  if (visibleCount > 0) {
+    dropdown.classList.add('visible');
+    mentionIndex = 0;
+    updateMentionHighlight();
   }
+}
 
-  setLoading(false);
+function closeMentionDropdown() {
+  document.getElementById('mention-dropdown').classList.remove('visible');
+  mentionActive = false;
+}
 
-  // Add to gallery
-  addToGallery(data);
+function updateMentionHighlight() {
+  const options = Array.from(document.querySelectorAll('#mention-dropdown .mention-option'))
+    .filter(o => o.style.display !== 'none');
+  options.forEach((o, i) => o.classList.toggle('active', i === mentionIndex));
+}
 
-  // Switch to generate tab if not already there
-  loadGallery();
+function insertMention(agent) {
+  const input = document.getElementById('chat-input');
+  const val = input.value;
+  const pos = input.selectionStart;
+  const before = val.substring(0, pos);
+  const after = val.substring(pos);
+  const atPos = before.lastIndexOf('@');
+
+  input.value = before.substring(0, atPos) + '@' + agent + ' ' + after;
+  input.focus();
+  const newPos = atPos + agent.length + 2;
+  input.setSelectionRange(newPos, newPos);
+  closeMentionDropdown();
 }
 
 // ── UI UPDATES ────────────────────────────────────────
 
-function setLoading(on, msg) {
+function setViewerLoading(on, msg) {
   const el = document.getElementById('viewer-loading');
-  const btn = document.getElementById('btn-gen');
-  const btnText = document.getElementById('btn-gen-text');
-
   if (on) {
     el.classList.add('visible');
     document.getElementById('loading-msg').textContent = msg || 'GENERATING...';
-    btn.disabled = true;
-    btnText.textContent = 'GENERATING...';
   } else {
     el.classList.remove('visible');
-    btn.disabled = false;
-    btnText.textContent = 'GENERATE MODEL';
   }
 }
 
@@ -1211,8 +1673,8 @@ function updateGeoStats(exec) {
       bbox.map(v => v.toFixed(1)).join(' \u00D7 ') + ' mm';
   }
 
-  document.getElementById('stat-faces').textContent = exec.face_count || '—';
-  document.getElementById('stat-edges').textContent = exec.edge_count || '—';
+  document.getElementById('stat-faces').textContent = exec.face_count || '\u2014';
+  document.getElementById('stat-edges').textContent = exec.edge_count || '\u2014';
 }
 
 function updateCNCBadge(validation) {
@@ -1233,125 +1695,83 @@ function updateCNCBadge(validation) {
   axisBadge.textContent = (validation.axis_recommendation || '').toUpperCase();
 }
 
-function updateDownloads(partName, files) {
+function updateDownloads(partName) {
   const el = document.getElementById('download-btns');
-  if (!files) { el.classList.remove('visible'); return; }
+  if (!partName) { el.classList.remove('visible'); return; }
   el.classList.add('visible');
 
   document.getElementById('dl-step').href = '/api/models/' + partName + '.step';
   document.getElementById('dl-stl').href = '/api/models/' + partName + '.stl';
+  document.getElementById('dl-report').href = '/api/models/' + partName + '_report.json';
 }
 
-function updateCodeTab(code) {
-  const el = document.getElementById('code-display');
-  if (!code) {
-    el.textContent = 'No generated code yet.';
-    el.classList.add('code-empty');
-    return;
+// ── CODE MODAL ────────────────────────────────────────
+
+function openCodeModal() {
+  const modal = document.getElementById('code-modal');
+  const display = document.getElementById('code-display');
+
+  if (currentCode) {
+    display.innerHTML = highlightPython(currentCode);
+  } else {
+    display.textContent = 'No code available.';
   }
-  el.classList.remove('code-empty');
-  el.innerHTML = highlightPython(code);
+
+  modal.classList.add('visible');
+}
+
+function closeCodeModal() {
+  document.getElementById('code-modal').classList.remove('visible');
 }
 
 function highlightPython(code) {
-  // Simple Python syntax highlighting
   let escaped = code
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;');
 
-  // Comments
   escaped = escaped.replace(/(#.*$)/gm, '<span class="cm">$1</span>');
-  // Strings
   escaped = escaped.replace(/("""[\s\S]*?"""|'''[\s\S]*?'''|"[^"\n]*"|'[^'\n]*')/g, '<span class="st">$1</span>');
-  // Keywords
+
   const kw = /\b(import|from|as|def|class|return|if|else|elif|for|while|in|not|and|or|True|False|None|with|try|except|finally|raise|pass|break|continue|lambda|yield)\b/g;
   escaped = escaped.replace(kw, '<span class="kw">$1</span>');
-  // Numbers
   escaped = escaped.replace(/\b(\d+\.?\d*)\b/g, '<span class="nu">$1</span>');
-  // Function calls
   escaped = escaped.replace(/\.([a-zA-Z_]\w*)\(/g, '.<span class="fn">$1</span>(');
 
   return escaped;
 }
 
-function updateValidationTab(validation, exec) {
-  const el = document.getElementById('tab-validation');
-
-  if (!validation) {
-    el.innerHTML = '<div class="validation-empty">No validation data. Generate a model first.</div>';
-    document.getElementById('issue-count').style.display = 'none';
-    return;
-  }
-
-  let html = '<div class="validation-header">';
-
-  if (validation.machinable) {
-    html += '<div class="badge badge-success">\u2713 MACHINABLE</div>';
-  } else {
-    html += '<div class="badge badge-error">\u2717 NOT MACHINABLE</div>';
-  }
-
-  if (validation.axis_recommendation) {
-    html += '<div class="validation-axis">Recommended: ' + validation.axis_recommendation + '</div>';
-  }
-
-  const errs = validation.error_count || 0;
-  const warns = validation.warning_count || 0;
-  html += '<div class="validation-axis" style="margin-left:auto">' + errs + ' errors, ' + warns + ' warnings</div>';
-  html += '</div>';
-
-  if (validation.issues && validation.issues.length > 0) {
-    html += '<div class="issue-list">';
-    for (const issue of validation.issues) {
-      const sev = issue.severity || 'info';
-      html += '<div class="issue-item ' + sev + '">';
-      html += '<span class="issue-severity ' + sev + '">' + sev.toUpperCase() + '</span>';
-      html += '<span class="issue-message">' + escapeHtml(issue.message) + '</span>';
-      html += '</div>';
-    }
-    html += '</div>';
-  }
-
-  el.innerHTML = html;
-
-  const totalIssues = (validation.issues || []).length;
-  const countEl = document.getElementById('issue-count');
-  if (totalIssues > 0) {
-    countEl.textContent = totalIssues;
-    countEl.style.display = '';
-  } else {
-    countEl.style.display = 'none';
-  }
-}
+// ── GALLERY ───────────────────────────────────────────
 
 function addToGallery(data) {
   galleryItems.unshift({
     name: data.part_name,
-    prompt: data.prompt,
     volume: data.execution?.volume_mm3,
     faces: data.execution?.face_count,
     machinable: data.validation?.machinable,
   });
-  loadGallery();
 }
 
-function loadGallery() {
-  const el = document.getElementById('tab-gallery');
-  const countEl = document.getElementById('gallery-count');
+function openGallery() {
+  renderGallery();
+  document.getElementById('gallery-modal').classList.add('visible');
+}
+
+function closeGallery() {
+  document.getElementById('gallery-modal').classList.remove('visible');
+}
+
+function renderGallery() {
+  const grid = document.getElementById('gallery-grid');
 
   if (galleryItems.length === 0) {
-    el.innerHTML = '<div class="gallery-empty">No models generated yet.</div>';
-    countEl.style.display = 'none';
+    grid.innerHTML = '<div class="gallery-empty">No models generated yet.</div>';
     return;
   }
 
-  countEl.textContent = galleryItems.length;
-  countEl.style.display = '';
-
   let html = '';
   for (const item of galleryItems) {
-    html += '<button class="gallery-card fade-in" onclick="loadGalleryItem(\'' + item.name + '\')">';
+    html += '<button class="gallery-card fade-in" onclick="loadGalleryItem(\'' + escapeHtml(item.name) + '\')">';
     html += '<div class="gallery-card-name">' + escapeHtml(item.name) + '</div>';
     html += '<div class="gallery-card-meta">';
     if (item.faces) html += '<span>' + item.faces + ' faces</span>';
@@ -1362,19 +1782,22 @@ function loadGallery() {
     html += '</div></button>';
   }
 
-  el.innerHTML = html;
+  grid.innerHTML = html;
 }
 
 async function loadGalleryItem(name) {
-  setLoading(true, 'LOADING MODEL...');
+  closeGallery();
+  setViewerLoading(true, 'LOADING MODEL...');
   try {
     await loadSTL('/api/models/' + name + '.stl');
   } catch (e) {
     console.warn('Failed to load:', e);
   }
-  setLoading(false);
+  setViewerLoading(false);
 }
 
+// ── UTILS ─────────────────────────────────────────────
+
 function escapeHtml(str) {
   const div = document.createElement('div');
   div.textContent = str;
@@ -1390,26 +1813,89 @@ async function checkServer() {
     if (resp.ok) {
       dot.style.background = 'var(--success)';
       dot.style.boxShadow = '0 0 6px var(--success)';
-      dot.title = 'MCP Server Connected';
+      dot.title = 'Server Connected';
     } else {
       dot.style.background = 'var(--warning)';
       dot.style.boxShadow = '0 0 6px var(--warning)';
-      dot.title = 'MCP Server Error';
+      dot.title = 'Server Error';
     }
   } catch {
     const dot = document.getElementById('status-dot');
     dot.style.background = 'var(--error)';
     dot.style.boxShadow = '0 0 6px var(--error)';
-    dot.title = 'MCP Server Offline';
+    dot.title = 'Server Offline';
   }
 }
 
-// ── KEYBOARD SHORTCUT ─────────────────────────────────
+// ── KEYBOARD / INPUT EVENTS ──────────────────────────
+
+const chatInput = document.getElementById('chat-input');
+
+chatInput.addEventListener('input', (e) => {
+  // Auto-resize
+  chatInput.style.height = 'auto';
+  chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
+
+  // Check for @mention
+  handleInputForMention(e);
+});
+
+chatInput.addEventListener('keydown', (e) => {
+  if (mentionActive) {
+    const dropdown = document.getElementById('mention-dropdown');
+    const visibleOptions = Array.from(dropdown.querySelectorAll('.mention-option'))
+      .filter(o => o.style.display !== 'none');
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      mentionIndex = (mentionIndex + 1) % visibleOptions.length;
+      updateMentionHighlight();
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      mentionIndex = (mentionIndex - 1 + visibleOptions.length) % visibleOptions.length;
+      updateMentionHighlight();
+      return;
+    }
+    if (e.key === 'Enter' || e.key === 'Tab') {
+      e.preventDefault();
+      const agent = visibleOptions[mentionIndex]?.dataset.agent;
+      if (agent) insertMention(agent);
+      return;
+    }
+    if (e.key === 'Escape') {
+      closeMentionDropdown();
+      return;
+    }
+  }
 
-document.getElementById('prompt-input').addEventListener('keydown', (e) => {
   if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
     e.preventDefault();
-    doGenerate();
+    sendFromInput();
+  }
+
+  // Regular enter sends (without shift)
+  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault();
+    sendFromInput();
+  }
+});
+
+// Close modals on backdrop click
+document.getElementById('code-modal').addEventListener('click', (e) => {
+  if (e.target === document.getElementById('code-modal')) closeCodeModal();
+});
+
+document.getElementById('gallery-modal').addEventListener('click', (e) => {
+  if (e.target === document.getElementById('gallery-modal')) closeGallery();
+});
+
+// Escape to close modals
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    closeCodeModal();
+    closeGallery();
   }
 });