Upload 6 files

main.py

@@ -474,15 +474,29 @@ async def run_mission(request: Request):
 
         elif key == "writer":
             try:
+                manager_context = results.get("manager", {}).get("message", "")
                 writer_prompt = (
-                    f"Redacta un informe formal y completo sobre: {task}\n\n"
-                    "Usa este formato:\n"
-                    "## Resumen Ejecutivo\n[contenido]\n\n"
-                    "### Introducción\n[contenido]\n\n"
-                    "### Desarrollo\n[contenido con subsecciones]\n\n"
-                    "### Conclusiones\n[contenido]\n\n"
-                    "### Recomendaciones\n[contenido]\n\n"
-                    "Sé formal, detallado y profesional."
+                    f"Eres un redactor experto. Escribe el contenido REAL y COMPLETO del siguiente informe.\n\n"
+                    f"TEMA DEL INFORME: {task}\n\n"
+                    f"INSTRUCCIONES DEL MANAGER:\n{manager_context[:500]}\n\n"
+                    "INSTRUCCIONES IMPORTANTES:\n"
+                    "- Escribe contenido REAL, detallado y específico sobre el tema. NO uses placeholders ni corchetes.\n"
+                    "- El informe debe tener mínimo 600 palabras de contenido real.\n"
+                    "- Usa datos, hechos y ejemplos concretos relacionados con el tema.\n"
+                    "- Estructura con estos encabezados EXACTOS (sin corchetes, solo el contenido real):\n\n"
+                    "## Resumen Ejecutivo\n"
+                    "(Escribe aquí 2-3 párrafos resumiendo los puntos clave del informe)\n\n"
+                    "### Introducción\n"
+                    "(Escribe aquí contexto e importancia del tema)\n\n"
+                    "### Desarrollo\n"
+                    "(Escribe aquí el análisis detallado con datos y hechos reales)\n\n"
+                    "### Hallazgos Principales\n"
+                    "(Escribe aquí los descubrimientos o puntos más importantes)\n\n"
+                    "### Conclusiones\n"
+                    "(Escribe aquí las conclusiones derivadas del análisis)\n\n"
+                    "### Recomendaciones\n"
+                    "(Escribe aquí recomendaciones concretas y accionables)\n\n"
+                    "IMPORTANTE: Escribe contenido real y sustancioso. Nada de '[contenido]' ni placeholders."
                 )
                 writer_text = await call_agent_llm(agent, writer_prompt)
                 results["writer"] = {

main_backup.py

@@ -0,0 +1,591 @@
+import os
+import asyncio
+import httpx
+import json
+import re
+import uuid
+import base64
+from io import BytesIO
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+from datetime import datetime
+from pathlib import Path
+
+# python-docx imports
+from docx import Document as DocxDocument
+from docx.shared import Inches, Pt, RGBColor
+from docx.enum.text import WD_ALIGN_PARAGRAPH
+from docx.oxml.ns import qn
+from docx.oxml import OxmlElement
+
+app = FastAPI()
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
+
+GOOGLE_API_KEY     = os.getenv("GOOGLE_API_KEY", "")
+OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY", "")
+GROQ_API_KEY       = os.getenv("GROQ_API_KEY", "")
+PEXELS_API_KEY     = os.getenv("PEXELS_API_KEY", "")    # free at pexels.com/api
+HF_API_KEY         = os.getenv("HF_TOKEN", "")           # HuggingFace token for image gen
+
+DOCS_DIR = Path("docs")
+DOCS_DIR.mkdir(exist_ok=True)
+
+PROVIDERS = {
+    "gemini": {
+        "name": "Google Gemini", "type": "gemini", "key": GOOGLE_API_KEY,
+    },
+    "openrouter": {
+        "name": "OpenRouter", "type": "openai_compat", "key": OPENROUTER_API_KEY,
+        "base_url": "https://openrouter.ai/api/v1/chat/completions",
+        "headers": {
+            "HTTP-Referer": "https://huggingface.co/spaces/vfven/mission-control-ui",
+            "X-Title": "Mission Control AI",
+        },
+    },
+    "groq": {
+        "name": "Groq", "type": "openai_compat", "key": GROQ_API_KEY,
+        "base_url": "https://api.groq.com/openai/v1/chat/completions",
+        "headers": {},
+    },
+}
+
+# ── DEFAULT AGENTS (can be extended via UI) ───────────────────────────────
+DEFAULT_AGENTS = [
+    {
+        "key": "manager", "name": "Manager", "provider": "gemini",
+        "role": "Gerente de proyecto experto en coordinar equipos y planificar estrategias. Cuando el usuario pide un documento o informe, DEBES indicar en tu respuesta qué agentes necesitas activar usando el formato JSON: {\"delegate\": [\"writer\", \"analyst\"]} al final de tu respuesta.",
+        "models": ["gemini-2.5-flash-preview-04-17", "gemini-2.0-flash", "gemini-1.5-flash"],
+    },
+    {
+        "key": "developer", "name": "Developer", "provider": "openrouter",
+        "role": "Programador senior especialista en crear aplicaciones y soluciones técnicas.",
+        "models": ["qwen/qwen3-4b:free", "meta-llama/llama-3.3-70b-instruct:free", "mistralai/mistral-small-3.1-24b-instruct:free", "google/gemma-3-12b-it:free"],
+    },
+    {
+        "key": "analyst", "name": "Analyst", "provider": "openrouter",
+        "role": "Analista de negocios experto en evaluar viabilidad, riesgos y oportunidades. También revisa y critica documentos formales.",
+        "models": ["meta-llama/llama-3.3-70b-instruct:free", "mistralai/mistral-small-3.1-24b-instruct:free", "google/gemma-3-27b-it:free", "qwen/qwen3-4b:free"],
+    },
+    {
+        "key": "writer", "name": "Writer", "provider": "openrouter",
+        "role": "Especialista en redacción de documentos formales, informes ejecutivos y reportes técnicos. Escribe en formato estructurado con secciones claras usando ### para títulos y ** para subtítulos.",
+        "models": ["meta-llama/llama-3.3-70b-instruct:free", "mistralai/mistral-small-3.1-24b-instruct:free", "qwen/qwen3-4b:free", "google/gemma-3-12b-it:free"],
+    },
+    {
+        "key": "image_agent", "name": "ImageAgent", "provider": "gemini",
+        "role": "Agente especializado en buscar y proveer imágenes relevantes. Cuando se te pida imágenes sobre un tema, responde con una lista JSON de términos de búsqueda en inglés: {\"image_queries\": [\"term1\", \"term2\", \"term3\"]}",
+        "models": ["gemini-2.0-flash", "gemini-1.5-flash"],
+    },
+]
+
+SUBSTITUTE_MODELS = {
+    "groq": ["llama-3.3-70b-versatile", "llama3-70b-8192", "gemma2-9b-it"],
+}
+
+# Runtime agent registry (can be extended)
+agent_registry = {a["key"]: dict(a) for a in DEFAULT_AGENTS}
+mission_history = []
+
+
+# ── LLM CALLERS ───────────────────────────────────────────────────────────
+async def call_gemini(model: str, system: str, user: str, key: str) -> str:
+    url = f"https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent?key={key}"
+    payload = {
+        "contents": [{"role": "user", "parts": [{"text": f"{system}\n\n{user}"}]}],
+        "generationConfig": {"maxOutputTokens": 2048, "temperature": 0.7},
+    }
+    async with httpx.AsyncClient(timeout=90) as client:
+        r = await client.post(url, json=payload)
+        r.raise_for_status()
+        return r.json()["candidates"][0]["content"]["parts"][0]["text"]
+
+
+async def call_openai_compat(base_url: str, model: str, system: str, user: str,
+                              key: str, extra_headers: dict) -> str:
+    headers = {"Authorization": f"Bearer {key}", "Content-Type": "application/json", **extra_headers}
+    payload = {
+        "model": model,
+        "messages": [{"role": "system", "content": system}, {"role": "user", "content": user}],
+        "max_tokens": 2048, "temperature": 0.7,
+    }
+    async with httpx.AsyncClient(timeout=90) as client:
+        r = await client.post(base_url, json=payload, headers=headers)
+        r.raise_for_status()
+        return r.json()["choices"][0]["message"]["content"]
+
+
+async def call_agent_llm(agent: dict, task: str) -> str:
+    prov_key = agent["provider"]
+    provider = PROVIDERS[prov_key]
+    system   = f"Eres {agent['name']}. {agent['role']} Responde en español. Sé conciso y profesional."
+    last_err = None
+
+    for model in agent["models"]:
+        try:
+            if provider["type"] == "gemini":
+                return await call_gemini(model, system, task, provider["key"])
+            else:
+                return await call_openai_compat(
+                    provider["base_url"], model, system, task,
+                    provider["key"], provider.get("headers", {}))
+        except Exception as e:
+            last_err = str(e)
+
+    # Groq fallback
+    if GROQ_API_KEY:
+        groq = PROVIDERS["groq"]
+        for m in SUBSTITUTE_MODELS["groq"]:
+            try:
+                return await call_openai_compat(
+                    groq["base_url"], m, system, task, groq["key"], {})
+            except Exception as e:
+                last_err = str(e)
+
+    raise Exception(f"All providers failed: {last_err}")
+
+
+# ── IMAGE FETCHING ─────────────────────────────────────────────────────────
+async def fetch_pexels_image(query: str) -> bytes | None:
+    if not PEXELS_API_KEY:
+        return None
+    try:
+        async with httpx.AsyncClient(timeout=20) as client:
+            r = await client.get(
+                "https://api.pexels.com/v1/search",
+                params={"query": query, "per_page": 1, "orientation": "landscape"},
+                headers={"Authorization": PEXELS_API_KEY}
+            )
+            data = r.json()
+            if data.get("photos"):
+                img_url = data["photos"][0]["src"]["medium"]
+                img_r = await client.get(img_url)
+                return img_r.content
+    except Exception:
+        pass
+    return None
+
+
+async def generate_hf_image(prompt: str) -> bytes | None:
+    if not HF_API_KEY:
+        return None
+    try:
+        async with httpx.AsyncClient(timeout=60) as client:
+            r = await client.post(
+                "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0",
+                headers={"Authorization": f"Bearer {HF_API_KEY}"},
+                json={"inputs": prompt, "parameters": {"width": 512, "height": 384}},
+            )
+            if r.status_code == 200 and r.headers.get("content-type", "").startswith("image"):
+                return r.content
+    except Exception:
+        pass
+    return None
+
+
+async def get_image_for_query(query: str) -> bytes | None:
+    img = await fetch_pexels_image(query)
+    if img:
+        return img
+    return await generate_hf_image(query)
+
+
+# ── DOCX BUILDER ──────────────────────────────────────────────────────────
+def build_docx(title: str, sections: dict, images: list[bytes], analyst_review: str) -> bytes:
+    doc = DocxDocument()
+
+    # Page margins
+    for section in doc.sections:
+        section.top_margin    = Inches(1)
+        section.bottom_margin = Inches(1)
+        section.left_margin   = Inches(1.2)
+        section.right_margin  = Inches(1.2)
+
+    # Title
+    title_para = doc.add_heading(title, 0)
+    title_para.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    run = title_para.runs[0]
+    run.font.color.rgb = RGBColor(0x1a, 0x56, 0xdb)
+
+    # Date + subtitle
+    sub = doc.add_paragraph()
+    sub.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    sub.add_run(f"Mission Control AI — {datetime.now().strftime('%B %d, %Y')}").italic = True
+    doc.add_paragraph()
+
+    # Horizontal rule
+    p = doc.add_paragraph()
+    pPr = p._p.get_or_add_pPr()
+    pBdr = OxmlElement("w:pBdr")
+    bottom = OxmlElement("w:bottom")
+    bottom.set(qn("w:val"), "single")
+    bottom.set(qn("w:sz"), "6")
+    bottom.set(qn("w:color"), "1a56db")
+    pBdr.append(bottom)
+    pPr.append(pBdr)
+
+    img_index = 0
+
+    # Writer content sections
+    writer_text = sections.get("writer", "")
+    current_lines = []
+
+    def flush_lines():
+        nonlocal current_lines
+        if current_lines:
+            para_text = " ".join(current_lines).strip()
+            if para_text:
+                p = doc.add_paragraph(para_text)
+                p.paragraph_format.space_after = Pt(6)
+            current_lines = []
+
+    for line in writer_text.split("\n"):
+        stripped = line.strip()
+        if not stripped:
+            flush_lines()
+            continue
+        if stripped.startswith("### "):
+            flush_lines()
+            h = doc.add_heading(stripped[4:], level=2)
+            # Insert image after each major section heading if available
+            if img_index < len(images) and images[img_index]:
+                try:
+                    img_stream = BytesIO(images[img_index])
+                    doc.add_picture(img_stream, width=Inches(5))
+                    last_para = doc.paragraphs[-1]
+                    last_para.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                    cap = doc.add_paragraph(f"Figure {img_index + 1}")
+                    cap.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                    cap.runs[0].italic = True
+                    cap.runs[0].font.size = Pt(9)
+                    img_index += 1
+                except Exception:
+                    pass
+        elif stripped.startswith("## "):
+            flush_lines()
+            doc.add_heading(stripped[3:], level=1)
+        elif stripped.startswith("**") and stripped.endswith("**"):
+            flush_lines()
+            p = doc.add_paragraph()
+            run = p.add_run(stripped.strip("**"))
+            run.bold = True
+        elif stripped.startswith("- ") or stripped.startswith("* "):
+            flush_lines()
+            doc.add_paragraph(stripped[2:], style="List Bullet")
+        else:
+            current_lines.append(stripped)
+
+    flush_lines()
+
+    # Remaining images
+    while img_index < len(images):
+        if images[img_index]:
+            try:
+                img_stream = BytesIO(images[img_index])
+                doc.add_picture(img_stream, width=Inches(5))
+                last_para = doc.paragraphs[-1]
+                last_para.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                img_index += 1
+            except Exception:
+                img_index += 1
+        else:
+            img_index += 1
+
+    # Analyst review section
+    if analyst_review:
+        doc.add_page_break()
+        doc.add_heading("Análisis y Revisión", level=1)
+        for line in analyst_review.split("\n"):
+            if line.strip():
+                doc.add_paragraph(line.strip())
+
+    # Footer
+    doc.add_paragraph()
+    footer_p = doc.add_paragraph()
+    footer_p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    footer_run = footer_p.add_run("— Generado por Mission Control AI —")
+    footer_run.italic = True
+    footer_run.font.size = Pt(9)
+    footer_run.font.color.rgb = RGBColor(0x6b, 0x72, 0x80)
+
+    buf = BytesIO()
+    doc.save(buf)
+    buf.seek(0)
+    return buf.read()
+
+
+# ── PARSE MANAGER DELEGATION ───────────────────────────────────────────────
+def parse_delegation(manager_text: str) -> list[str]:
+    match = re.search(r'\{[^}]*"delegate"\s*:\s*\[([^\]]*)\][^}]*\}', manager_text)
+    if match:
+        raw = match.group(1)
+        keys = re.findall(r'"(\w+)"', raw)
+        return keys
+    # Heuristic fallback: detect keywords in manager response
+    delegates = []
+    lower = manager_text.lower()
+    if any(w in lower for w in ["informe", "documento", "redact", "escrib", "report", "word"]):
+        delegates.extend(["writer"])
+    if any(w in lower for w in ["imagen", "image", "foto", "visual", "ilustr"]):
+        delegates.extend(["image_agent"])
+    if any(w in lower for w in ["analiz", "revisar", "evalua", "critic"]):
+        delegates.extend(["analyst"])
+    return list(dict.fromkeys(delegates))  # deduplicate
+
+
+def parse_image_queries(image_agent_text: str) -> list[str]:
+    match = re.search(r'"image_queries"\s*:\s*\[([^\]]*)\]', image_agent_text)
+    if match:
+        return re.findall(r'"([^"]+)"', match.group(1))
+    return []
+
+
+def clean_text(text: str) -> str:
+    # Remove JSON blocks from display text
+    text = re.sub(r'\{[^}]*"delegate"[^}]*\}', '', text)
+    text = re.sub(r'\{[^}]*"image_queries"[^}]*\}', '', text)
+    return text.strip()
+
+
+# ── ROUTES ─────────────────────────────────────────────────────────────────
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    return HTMLResponse(Path("templates/index.html").read_text())
+
+
+@app.get("/api/agents")
+async def get_agents():
+    return {"agents": [
+        {"key": a["key"], "name": a["name"], "role": a["role"]}
+        for a in agent_registry.values()
+    ]}
+
+
+@app.post("/api/agents/add")
+async def add_agent(request: Request):
+    body = await request.json()
+    key  = re.sub(r'\W+', '_', body.get("key", "").lower().strip())
+    if not key:
+        return JSONResponse({"error": "key required"}, status_code=400)
+    agent_registry[key] = {
+        "key":      key,
+        "name":     body.get("name", key.capitalize()),
+        "role":     body.get("role", "Agente de propósito general."),
+        "provider": body.get("provider", "openrouter"),
+        "models":   body.get("models", ["meta-llama/llama-3.3-70b-instruct:free"]),
+    }
+    return {"success": True, "agent": agent_registry[key]}
+
+
+@app.delete("/api/agents/{key}")
+async def delete_agent(key: str):
+    if key in ("manager", "developer", "analyst"):
+        return JSONResponse({"error": "Cannot delete core agents"}, status_code=400)
+    if key in agent_registry:
+        del agent_registry[key]
+    return {"success": True}
+
+
+@app.get("/api/history")
+async def get_history():
+    return {"history": mission_history[-20:]}
+
+
+@app.get("/api/docs/{filename}")
+async def download_doc(filename: str):
+    path = DOCS_DIR / filename
+    if not path.exists() or not filename.endswith(".docx"):
+        return JSONResponse({"error": "File not found"}, status_code=404)
+    return FileResponse(
+        path,
+        media_type="application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        filename=filename,
+    )
+
+
+@app.post("/api/mission")
+async def run_mission(request: Request):
+    body = await request.json()
+    task = body.get("task", "").strip()
+    if not task:
+        return JSONResponse({"error": "No task provided"}, status_code=400)
+
+    started_at = datetime.now().isoformat()
+    results    = {}
+    doc_file   = None
+    events     = []   # orchestration event log
+
+    def log(msg: str):
+        events.append({"time": datetime.now().strftime("%H:%M:%S"), "msg": msg})
+
+    # ── STEP 1: Manager plans ──────────────────────────────────────────────
+    log("Manager analyzing task...")
+    manager_agent = agent_registry["manager"]
+    try:
+        manager_raw = await call_agent_llm(manager_agent, task)
+        delegates   = parse_delegation(manager_raw)
+        manager_msg = clean_text(manager_raw)
+        results["manager"] = {
+            "status": "active", "message": manager_msg,
+            "model": manager_agent["models"][0],
+            "delegates": delegates,
+        }
+        log(f"Manager delegated to: {delegates or 'none'}")
+    except Exception as e:
+        results["manager"] = {"status": "resting", "message": str(e), "model": ""}
+        delegates = []
+        log(f"Manager failed: {e}")
+
+    # ── STEP 2: Run delegated agents ───────────────────────────────────────
+    image_bytes  = []
+    writer_text  = ""
+    analyst_text = ""
+
+    async def run_delegated(key: str):
+        nonlocal writer_text, analyst_text
+        if key not in agent_registry:
+            log(f"Agent '{key}' not found in registry")
+            return
+
+        agent = agent_registry[key]
+        log(f"{agent['name']} starting...")
+
+        if key == "image_agent":
+            try:
+                img_prompt = f"Proporciona consultas de búsqueda de imágenes en inglés para ilustrar: {task}"
+                raw = await call_agent_llm(agent, img_prompt)
+                queries = parse_image_queries(raw)
+                if not queries:
+                    queries = [task[:40]]
+                log(f"ImageAgent searching: {queries}")
+                imgs = await asyncio.gather(*[get_image_for_query(q) for q in queries[:3]])
+                for img in imgs:
+                    if img:
+                        image_bytes.append(img)
+                results["image_agent"] = {
+                    "status": "active",
+                    "message": f"Encontradas {len(image_bytes)} imágenes para: {', '.join(queries[:3])}",
+                    "model": agent["models"][0],
+                }
+                log(f"ImageAgent: {len(image_bytes)} images found")
+            except Exception as e:
+                results["image_agent"] = {"status": "resting", "message": str(e), "model": ""}
+                log(f"ImageAgent failed: {e}")
+
+        elif key == "writer":
+            try:
+                writer_prompt = (
+                    f"Redacta un informe formal y completo sobre: {task}\n\n"
+                    "Usa este formato:\n"
+                    "## Resumen Ejecutivo\n[contenido]\n\n"
+                    "### Introducción\n[contenido]\n\n"
+                    "### Desarrollo\n[contenido con subsecciones]\n\n"
+                    "### Conclusiones\n[contenido]\n\n"
+                    "### Recomendaciones\n[contenido]\n\n"
+                    "Sé formal, detallado y profesional."
+                )
+                writer_text = await call_agent_llm(agent, writer_prompt)
+                results["writer"] = {
+                    "status": "active",
+                    "message": writer_text[:200] + "..." if len(writer_text) > 200 else writer_text,
+                    "model": agent["models"][0],
+                }
+                log("Writer completed document")
+            except Exception as e:
+                results["writer"] = {"status": "resting", "message": str(e), "model": ""}
+                log(f"Writer failed: {e}")
+
+        elif key == "analyst":
+            try:
+                content_to_review = writer_text or manager_msg
+                analyst_prompt = (
+                    f"Revisa y analiza el siguiente contenido sobre: {task}\n\n"
+                    f"Contenido:\n{content_to_review[:1000]}\n\n"
+                    "Proporciona: 1) Evaluación de calidad, 2) Puntos fuertes, "
+                    "3) Áreas de mejora, 4) Conclusión final."
+                )
+                analyst_text = await call_agent_llm(agent, analyst_prompt)
+                results["analyst"] = {
+                    "status": "active",
+                    "message": analyst_text[:200] + "..." if len(analyst_text) > 200 else analyst_text,
+                    "model": agent["models"][0],
+                }
+                log("Analyst review completed")
+            except Exception as e:
+                results["analyst"] = {"status": "resting", "message": str(e), "model": ""}
+                log(f"Analyst failed: {e}")
+
+        else:
+            # Generic agent
+            try:
+                raw = await call_agent_llm(agent, task)
+                results[key] = {"status": "active", "message": raw, "model": agent["models"][0]}
+                log(f"{agent['name']} completed")
+            except Exception as e:
+                results[key] = {"status": "resting", "message": str(e), "model": ""}
+
+    # Run image_agent and writer in parallel, then analyst
+    parallel_first = [k for k in delegates if k in ("writer", "image_agent")]
+    sequential_after = [k for k in delegates if k == "analyst"]
+    other = [k for k in delegates if k not in ("writer", "image_agent", "analyst")]
+
+    if parallel_first or other:
+        await asyncio.gather(*[run_delegated(k) for k in parallel_first + other])
+
+    if sequential_after:
+        for k in sequential_after:
+            await run_delegated(k)
+
+    # ── STEP 3: Build .docx if writer was involved ─────────────────────────
+    if writer_text:
+        log("Assembling Word document...")
+        try:
+            doc_bytes = build_docx(task, {"writer": writer_text}, image_bytes, analyst_text)
+            safe_name = re.sub(r'[^\w\-]', '_', task[:40])
+            doc_filename = f"{safe_name}_{datetime.now().strftime('%Y%m%d_%H%M%S')}.docx"
+            (DOCS_DIR / doc_filename).write_bytes(doc_bytes)
+            doc_file = doc_filename
+            results["manager"]["doc_file"] = doc_filename
+            log(f"Document ready: {doc_filename}")
+        except Exception as e:
+            log(f"Document build failed: {e}")
+
+    # Mark idle agents
+    for key in agent_registry:
+        if key not in results:
+            results[key] = {"status": "idle", "message": "", "model": ""}
+
+    final = results.get("manager", {}).get("message", "")[:300]
+
+    entry = {
+        "id": len(mission_history) + 1,
+        "task": task,
+        "started_at": started_at,
+        "ended_at": datetime.now().isoformat(),
+        "results": results,
+        "final": final,
+        "doc_file": doc_file,
+        "events": events,
+    }
+    mission_history.append(entry)
+
+    return JSONResponse({
+        "success": True, "task": task,
+        "results": results, "final": final,
+        "doc_file": doc_file, "events": events,
+        "mission_id": entry["id"],
+    })
+
+
+@app.get("/api/health")
+async def health():
+    return {
+        "status": "ok",
+        "providers": {
+            "gemini":     "ok" if GOOGLE_API_KEY     else "missing",
+            "openrouter": "ok" if OPENROUTER_API_KEY else "missing",
+            "groq":       "ok" if GROQ_API_KEY       else "missing",
+            "pexels":     "ok" if PEXELS_API_KEY     else "missing (optional)",
+            "hf_images":  "ok" if HF_API_KEY         else "missing (optional)",
+        }
+    }

templates/index.html

@@ -5,906 +5,432 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Mission Control AI</title>
 <style>
-@import url('https://fonts.googleapis.com/css2?family=VT323&family=IBM+Plex+Mono:wght@400;500&display=swap');
-
-:root {
-  --bg:#0d1117; --surface:#161b22; --surface2:#1c2128; --surface3:#21262d;
-  --border:#30363d; --border2:#444c56;
-  --text:#e6edf3; --text2:#8b949e; --text3:#484f58;
-  --accent:#58a6ff; --accent-dim:#1f3f6e;
-  --green:#3fb950; --green-dim:#1a3d24;
-  --amber:#d29922; --amber-dim:#3d2f0a;
-  --red:#f85149; --red-dim:#3d1210;
-  --purple:#bc8cff;
-  --wood:#6b4e0a; --wood-l:#8b6914;
-  --metal:#2d333b; --metal-l:#444c56;
-  --carpet:#0d1620; --wall:#1a2030;
-  --shadow:0 8px 24px rgba(0,0,0,.4);
-  --r:6px;
+@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
+:root{
+  --bg:#0a0e14;--floor:#0d1320;--wall:#101828;--wall2:#131f2e;
+  --carpet:#080f1a;--carpet2:#0a1220;--border:#1e2d42;--border2:#2a3d58;
+  --text:#c8d8f0;--text2:#5a7a9a;--text3:#2a3d58;
+  --G:#00e5a0;--Gdim:#00995a;--Gdark:#002a18;
+  --B:#4a9eff;--Bdim:#1a5aaa;--A:#ffcc44;--Adim:#aa8800;
+  --R:#ff4455;--P:#cc88ff;
+  --wood:#7a5c0a;--woodl:#9a7a18;--metal:#1a2535;--metall:#243040;
+  --shadow:0 8px 32px rgba(0,0,0,.6);
 }
-
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-
-body{
-  font-family:'IBM Plex Mono',monospace;
-  background:var(--bg); color:var(--text);
-  min-height:100vh; display:flex; flex-direction:column;
-  font-size:13px; line-height:1.5; overflow-x:hidden;
-}
-
-/* ── TOPBAR ── */
-.topbar{
-  background:var(--surface); border-bottom:1px solid var(--border);
-  height:50px; padding:0 20px;
-  display:flex; align-items:center; justify-content:space-between;
-  flex-shrink:0; position:sticky; top:0; z-index:100;
-}
-.tb-left{display:flex;align-items:center;gap:10px}
-.tb-logo{
-  background:var(--accent); color:#000;
-  font-family:'VT323',monospace; font-size:15px; letter-spacing:1px;
-  padding:2px 8px; border-radius:3px;
-}
-.tb-title{font-family:'VT323',monospace;font-size:20px;color:var(--accent);letter-spacing:2px}
-.tb-right{display:flex;align-items:center;gap:16px}
+body{font-family:'Share Tech Mono',monospace;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;image-rendering:pixelated}
+body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px);pointer-events:none;z-index:500}
+.topbar{background:#050810;border-bottom:2px solid var(--border2);height:48px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:200}
+.tb-logo{font-family:'VT323',monospace;font-size:22px;color:var(--G);letter-spacing:3px;text-shadow:0 0 12px rgba(0,229,160,.4)}
+.tb-ver{font-size:10px;color:var(--text3);margin-left:4px;letter-spacing:1px}
+.tb-right{display:flex;align-items:center;gap:18px}
 .tb-stat{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:5px}
 .sdot{width:7px;height:7px;border-radius:50%}
-.dot-g{background:var(--green);animation:pulse-g 2s ease infinite}
-.dot-a{background:var(--amber);animation:pulse-g 1.2s ease infinite}
-.dot-r{background:var(--red);animation:blink-r .5s step-end infinite}
-.dot-d{background:var(--text3)}
-@keyframes pulse-g{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 4px transparent}}
-@keyframes blink-r{0%,100%{opacity:1}50%{opacity:0}}
-.clock{font-family:'VT323',monospace;font-size:20px;color:var(--accent);letter-spacing:2px}
-
-/* ── PROGRESS ── */
-.progress{height:2px;background:var(--surface2);overflow:hidden;display:none}
-.progress.on{display:block}
-.progress::after{
-  content:'';display:block;height:100%;width:30%;background:var(--accent);
-  animation:prog 1.4s ease-in-out infinite;
-}
-@keyframes prog{0%{margin-left:-30%}100%{margin-left:110%}}
-
-/* ── MISSION BAR ── */
-.mbar{
-  background:var(--surface); border-bottom:1px solid var(--border);
-  padding:12px 20px; display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap;
-}
-.minput{
-  flex:1; min-width:200px; height:36px;
-  background:var(--surface2); border:1px solid var(--border);
-  color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:13px;
-  padding:0 12px; outline:none; border-radius:var(--r);
-  transition:border-color .15s;
-}
-.minput:focus{border-color:var(--accent)}
+.dg{background:var(--G);animation:dg 2s ease infinite}
+.da{background:var(--A);animation:dg 1.2s ease infinite}
+.dr{background:var(--R);animation:bdr .5s step-end infinite}
+.dd{background:var(--text3)}
+@keyframes dg{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 4px transparent}}
+@keyframes bdr{0%,100%{opacity:1}50%{opacity:0}}
+.clock{font-family:'VT323',monospace;font-size:22px;color:var(--G);letter-spacing:2px}
+.prog{height:2px;background:var(--floor);overflow:hidden;display:none;flex-shrink:0}
+.prog.on{display:block}
+.prog::after{content:'';display:block;height:100%;width:30%;background:var(--G);animation:prun 1.4s ease-in-out infinite}
+@keyframes prun{0%{margin-left:-30%}100%{margin-left:110%}}
+.mbar{background:#050810;border-bottom:1px solid var(--border);padding:10px 20px;display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
+.minput{flex:1;min-width:200px;height:36px;background:var(--floor);border:1px solid var(--border2);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:12px;padding:0 12px;outline:none;transition:border-color .15s}
+.minput:focus{border-color:var(--G);box-shadow:0 0 0 2px rgba(0,229,160,.1)}
 .minput::placeholder{color:var(--text3)}
-.launch{
-  height:36px; padding:0 18px;
-  background:var(--accent); border:none; color:#000;
-  font-family:'VT323',monospace; font-size:18px; letter-spacing:2px;
-  cursor:pointer; border-radius:var(--r); transition:background .15s;
-  display:flex; align-items:center; gap:6px;
-}
-.launch:hover{background:#79b8ff}
-.launch:active{transform:scale(.98)}
-.launch:disabled{background:var(--accent-dim);color:var(--text3);cursor:not-allowed}
-.add-agent-btn{
-  height:36px; padding:0 14px;
-  background:transparent; border:1px solid var(--border);
-  color:var(--text2); font-family:'IBM Plex Mono',monospace; font-size:12px;
-  cursor:pointer; border-radius:var(--r); transition:all .15s;
-  display:flex; align-items:center; gap:6px;
-}
-.add-agent-btn:hover{border-color:var(--accent);color:var(--accent)}
-.mc{font-family:'VT323',monospace;font-size:16px;color:var(--text3)}
-
-/* ── MAIN LAYOUT ── */
-.main{display:grid;grid-template-columns:1fr 280px;flex:1;min-height:0;overflow:hidden}
+.launch{height:36px;padding:0 18px;background:transparent;border:2px solid var(--G);color:var(--G);font-family:'VT323',monospace;font-size:18px;letter-spacing:2px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
+.launch:hover{background:rgba(0,229,160,.1);box-shadow:0 0 12px rgba(0,229,160,.2)}
+.launch:active{transform:scale(.97)}
+.launch:disabled{border-color:var(--text3);color:var(--text3);cursor:not-allowed}
+.add-btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--border2);color:var(--text2);font-family:'Share Tech Mono',monospace;font-size:11px;cursor:pointer;transition:all .15s}
+.add-btn:hover{border-color:var(--B);color:var(--B)}
+.mc{font-family:'VT323',monospace;font-size:17px;color:var(--text3)}
+.main{display:grid;grid-template-columns:1fr 260px;flex:1;min-height:0;overflow:hidden}
 @media(max-width:900px){.main{grid-template-columns:1fr}.sidebar{display:none}}
-
-/* ── OFFICE ── */
-.office{
-  background:var(--carpet);
-  overflow-y:auto; padding:16px; position:relative;
-}
-.office::before{
-  content:''; position:fixed; inset:0;
-  background-image:
-    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
-    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
-  background-size:32px 32px; pointer-events:none;
-}
-.floor-label{
-  font-family:'VT323',monospace; font-size:13px; letter-spacing:3px;
-  color:var(--text3); margin-bottom:14px; text-transform:uppercase;
-  display:flex; align-items:center; justify-content:space-between;
-}
-
-/* ── OFFICE GRID ── */
-.ogrid{
-  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
-  position:relative; z-index:1;
-}
+.office{background:var(--carpet);overflow-y:auto;padding:16px;position:relative}
+.office::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0}
+.floor-hdr{font-family:'VT323',monospace;font-size:13px;letter-spacing:4px;color:var(--text3);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
+.floor-sub{font-size:10px;color:var(--Gdim);letter-spacing:2px}
+.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative;z-index:1}
 @media(max-width:1100px){.ogrid{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:700px){.ogrid{grid-template-columns:1fr}}
-
-/* ── ROOM ── */
-.room{
-  background:var(--wall); border:1px solid var(--border);
-  border-radius:var(--r); overflow:hidden;
-  display:flex; flex-direction:column; transition:border-color .3s;
-  min-height:220px;
-}
-.room.working{border-color:var(--accent)}
-.room.active{border-color:var(--green)}
-.room.resting{border-color:var(--amber)}
-.room.idle{border-color:var(--border)}
-
-/* room wall header */
-.rwall{
-  background:var(--surface2); height:30px;
-  border-bottom:1px solid var(--border);
-  display:flex; align-items:center; justify-content:space-between;
-  padding:0 10px; flex-shrink:0;
-}
+.room{background:var(--wall);border:1px solid var(--border);display:flex;flex-direction:column;min-height:230px;transition:border-color .3s,box-shadow .3s;overflow:hidden}
+.room.working{border-color:var(--G);box-shadow:0 0 16px rgba(0,229,160,.12)}
+.room.active{border-color:var(--Gdim)}
+.room.resting{border-color:var(--A)}
+.room.visiting{border-color:var(--B);box-shadow:0 0 16px rgba(74,158,255,.15);animation:vp 1s ease-in-out infinite}
+@keyframes vp{0%,100%{box-shadow:0 0 8px rgba(74,158,255,.1)}50%{box-shadow:0 0 20px rgba(74,158,255,.25)}}
+.rwall{background:var(--wall2);height:28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 10px;flex-shrink:0}
 .rname{font-family:'VT323',monospace;font-size:15px;letter-spacing:2px}
-.rbadge{
-  font-family:'VT323',monospace;font-size:12px;
-  padding:1px 7px; border:1px solid; letter-spacing:1px;
-}
-.b-idle{color:var(--text3);border-color:var(--text3)}
-.b-working{color:var(--accent);border-color:var(--accent);animation:badgep .9s ease infinite}
-.b-active{color:var(--green);border-color:var(--green);background:var(--green-dim)}
-.b-resting{color:var(--amber);border-color:var(--amber)}
-.b-error{color:var(--red);border-color:var(--red)}
-@keyframes badgep{0%,100%{opacity:1}50%{opacity:.5}}
-
-/* room scene */
-.rscene{
-  flex:1; background:var(--carpet); position:relative;
-  display:flex; align-items:flex-end; padding:8px; gap:8px;
-  overflow:hidden; min-height:120px;
-}
-.rscene::before{
-  content:''; position:absolute; inset:0;
-  background-image:
-    linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%),
-    linear-gradient(-45deg,rgba(255,255,255,.015) 25%,transparent 25%),
-    linear-gradient(45deg,transparent 75%,rgba(255,255,255,.015) 75%),
-    linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.015) 75%);
-  background-size:16px 16px;
-}
-
-/* SERVER RACK */
-.srack{
-  width:38px; flex-shrink:0; align-self:flex-end; margin-bottom:6px;
-  background:#0d1117; border:1px solid #1e2a40; padding:4px 3px;
-  display:flex; flex-direction:column; gap:2px; position:relative; z-index:1;
-}
-.srack::before{
-  content:'SRV';position:absolute;top:-16px;left:0;right:0;
-  text-align:center;font-family:'VT323',monospace;font-size:10px;color:var(--text3);
-}
-.runit{height:8px;background:#111827;border:1px solid #1e2a40;display:flex;align-items:center;gap:2px;padding:0 2px}
-.rled{width:4px;height:4px;border-radius:50%}
-.lg{background:var(--green);animation:led calc(var(--d,1.5s)) ease-in-out infinite}
-.la{background:var(--amber);animation:led calc(var(--d,2s)) ease-in-out infinite}
-.lb{background:var(--accent);animation:led calc(var(--d,.9s)) ease-in-out infinite}
-.lo{background:#1a2235;border:1px solid #2a3550}
-.rbar{flex:1;height:2px;background:#1e2a40}
-.rbar.on{background:var(--accent);animation:rba .4s ease-in-out infinite alternate}
-@keyframes led{0%,100%{opacity:.3}50%{opacity:1;box-shadow:0 0 4px currentColor}}
+.rbadge{font-family:'VT323',monospace;font-size:11px;padding:1px 6px;border:1px solid;letter-spacing:1px}
+.bi{color:var(--text3);border-color:var(--text3)}.bw{color:var(--G);border-color:var(--G);animation:bp .9s ease infinite}.ba{color:var(--Gdim);border-color:var(--Gdim);background:rgba(0,229,160,.08)}.br{color:var(--A);border-color:var(--A)}.bv{color:var(--B);border-color:var(--B);animation:bp .6s ease infinite}
+@keyframes bp{0%,100%{opacity:1}50%{opacity:.4}}
+.rscene{flex:1;background:var(--carpet2);position:relative;display:flex;align-items:flex-end;padding:8px;gap:8px;overflow:hidden;min-height:130px}
+.rscene::before{content:'';position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(255,255,255,.012) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.012) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.012) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.012) 75%);background-size:16px 16px}
+.srack{width:36px;flex-shrink:0;align-self:flex-end;margin-bottom:4px;background:#070e18;border:1px solid #1a2a40;padding:4px 3px;display:flex;flex-direction:column;gap:2px;position:relative;z-index:2}
+.srack::before{content:'SRV';position:absolute;top:-16px;left:0;right:0;text-align:center;font-family:'VT323',monospace;font-size:10px;color:var(--text3)}
+.ru{height:8px;background:#0d1525;border:1px solid #1a2a3a;display:flex;align-items:center;gap:2px;padding:0 2px}
+.rl{width:4px;height:4px;border-radius:50%}
+.lg{background:var(--G);animation:led var(--d,1.5s) ease-in-out infinite}
+.la{background:var(--A);animation:led var(--d,2s) ease-in-out infinite}
+.lb{background:var(--B);animation:led var(--d,.9s) ease-in-out infinite}
+.lo{background:#0d1525;border:1px solid #1a2a3a}
+.rb{flex:1;height:2px;background:#1a2a3a}
+.rb.on{background:var(--B);animation:rba .4s ease-in-out infinite alternate}
+@keyframes led{0%,100%{opacity:.25}50%{opacity:1;box-shadow:0 0 5px currentColor}}
 @keyframes rba{0%{opacity:.3}100%{opacity:1}}
-
-/* DESK AREA */
-.deskarea{flex:1;display:flex;flex-direction:column;gap:3px;position:relative;z-index:1}
-
-.monitor{
-  width:100%;height:48px;background:#050a0f;
-  border:2px solid var(--metal-l);border-radius:2px;
-  position:relative;overflow:hidden;display:flex;flex-direction:column;
-}
-.monitor.thinking{border-color:var(--accent)}
-.monitor.done{border-color:var(--green)}
-.monitor.away{border-color:var(--amber)}
-
+.deskarea{flex:1;display:flex;flex-direction:column;gap:3px;position:relative;z-index:2}
+.monitor{width:100%;height:46px;background:#030608;border:2px solid var(--metal);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .3s}
+.monitor.thinking{border-color:var(--B)}.monitor.done{border-color:var(--G)}.monitor.away{border-color:var(--Adim)}
 .mscreen{flex:1;padding:4px;display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
 .mbase{height:5px;background:var(--metal);position:relative}
-.mbase::after{
-  content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
-  width:14px;height:3px;background:var(--metal-l);
-}
-
-.sline{height:3px;background:var(--green);border-radius:1px;opacity:.6}
-.sline.scan{width:10%;animation:scan .6s ease-in-out infinite alternate}
-@keyframes scan{0%{width:10%}100%{width:85%}}
-.scur{
-  position:absolute;bottom:3px;left:4px;
-  width:4px;height:8px;background:var(--green);
-  animation:cur .7s step-end infinite;
-}
+.mbase::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:14px;height:3px;background:var(--metall)}
+.sl{height:3px;background:var(--G);border-radius:1px;opacity:.6}
+.scur{position:absolute;bottom:3px;left:4px;width:4px;height:8px;background:var(--G);animation:cur .7s step-end infinite}
 @keyframes cur{0%,100%{opacity:1}50%{opacity:0}}
 .tdots{display:flex;gap:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
-.tdot{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:td .8s ease-in-out infinite}
-.tdot:nth-child(2){animation-delay:.15s}.tdot:nth-child(3){animation-delay:.3s}
-@keyframes td{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
-
-.desk-surface{height:7px;background:var(--wood-l);border-radius:1px;border-top:2px solid #c09828}
-.keyboard{
-  height:6px;background:#c8b89a;border:1px solid #a09070;
-  border-radius:1px;display:flex;gap:1px;padding:1px 2px;align-items:center;
-}
-.key{flex:1;height:3px;background:#a09070;border-radius:.5px}
-
-/* COFFEE */
-.coffee{position:absolute;bottom:30px;right:10px;z-index:2}
-
-/* PERSON */
-.person{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2}
-
-/* CHAIR */
-.chair{position:absolute;bottom:0;right:4px;z-index:1}
-
-/* OOO */
-.ooo{
-  position:absolute;inset:0;background:rgba(20,15,0,.75);
-  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
-  z-index:10;
-}
-.ooo-t{font-family:'VT323',monospace;font-size:18px;color:var(--amber);letter-spacing:2px}
-.ooo-s{font-size:10px;color:rgba(210,153,34,.6)}
-
-/* SPEECH BUBBLE */
-.bubble{
-  position:absolute;top:6px;left:44px;
-  background:var(--surface);border:1px solid var(--border2);
-  border-radius:var(--r);padding:4px 8px;font-size:10px;
-  max-width:140px;line-height:1.3;z-index:20;
-  opacity:0;transform:translateY(-4px);pointer-events:none;
-  transition:opacity .3s,transform .3s;
-  box-shadow:var(--shadow);
-}
+.td{width:4px;height:4px;border-radius:50%;background:var(--B);animation:tdb .8s ease-in-out infinite}
+.td:nth-child(2){animation-delay:.15s}.td:nth-child(3){animation-delay:.3s}
+@keyframes tdb{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-5px);opacity:1}}
+.dtop{height:7px;background:var(--woodl);border-top:2px solid #c09828}
+.kbd{height:6px;background:#c0b090;border:1px solid #a09070;display:flex;gap:1px;padding:1px 2px;align-items:center}
+.kk{flex:1;height:3px;background:#a09070}
+.coffee{position:absolute;bottom:28px;right:8px;z-index:3}
+.person-slot{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3}
+.chair-slot{position:absolute;bottom:0;right:3px;z-index:2}
+.ooo{position:absolute;inset:0;background:rgba(20,14,0,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:10}
+.ooot{font-family:'VT323',monospace;font-size:17px;color:var(--A);letter-spacing:2px}
+.ooos{font-size:10px;color:rgba(255,204,68,.5)}
+.bubble{position:absolute;top:6px;left:42px;background:#050810;border:1px solid var(--border2);padding:4px 8px;font-size:10px;color:var(--text);max-width:130px;line-height:1.3;z-index:20;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 4px 12px rgba(0,0,0,.5)}
 .bubble.show{opacity:1;transform:translateY(0)}
-.bubble::before{
-  content:'';position:absolute;left:-6px;top:8px;
-  width:0;height:0;border-top:5px solid transparent;
-  border-bottom:5px solid transparent;border-right:6px solid var(--border2);
-}
-
-/* RESULT */
-.rresult{
-  background:var(--surface); border-top:1px solid var(--border);
-  padding:10px 12px; flex-shrink:0; min-height:60px;
-}
+.bubble::before{content:'';position:absolute;left:-6px;top:8px;border:5px solid transparent;border-right-color:var(--border2)}
+.rresult{background:#060d18;border-top:1px solid var(--border);padding:10px 12px;flex-shrink:0;min-height:56px}
 .rph{font-size:11px;color:var(--text3);font-style:italic}
 .rtxt{font-size:11px;color:var(--text);line-height:1.6;word-break:break-word}
-.rmodel{font-size:10px;color:var(--text3);margin-top:5px;display:flex;align-items:center;gap:4px}
-
-/* DOWNLOAD BUTTON */
-.dl-btn{
-  display:inline-flex;align-items:center;gap:6px;
-  margin-top:8px;padding:6px 14px;
-  background:var(--green-dim);border:1px solid var(--green);
-  color:var(--green);font-family:'IBM Plex Mono',monospace;
-  font-size:11px;font-weight:500;cursor:pointer;border-radius:var(--r);
-  text-decoration:none;transition:all .15s;
-}
-.dl-btn:hover{background:var(--green);color:#000}
-
-/* ORCHESTRATION LOG */
-.orch-log{
-  grid-column:1/-1;
-  background:var(--surface);border:1px solid var(--border);
-  border-radius:var(--r);padding:10px 14px;margin-top:4px;
-  display:none;
-}
-.orch-log.show{display:block}
-.orch-title{font-family:'VT323',monospace;font-size:14px;color:var(--text2);letter-spacing:2px;margin-bottom:8px}
-.orch-events{display:flex;flex-direction:column;gap:3px}
-.orch-event{font-size:10px;color:var(--text2);display:flex;gap:8px}
-.orch-time{color:var(--text3);flex-shrink:0}
-
-/* SERVER ROOM */
-.server-room{
-  grid-column:1/-1;
-  background:var(--surface);border:1px solid var(--border);
-  border-radius:var(--r);padding:10px 14px;
-  display:flex;align-items:center;gap:14px;
-  position:relative;overflow:hidden;
-}
-.server-room::before{
-  content:'SERVER ROOM';
-  position:absolute;top:8px;left:14px;
-  font-family:'VT323',monospace;font-size:12px;color:var(--text3);letter-spacing:3px;
-}
+.rmodel{font-size:10px;color:var(--text3);margin-top:4px;display:flex;align-items:center;gap:4px}
+.dl-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 14px;background:rgba(0,229,160,.08);border:1px solid var(--G);color:var(--G);font-family:'Share Tech Mono',monospace;font-size:11px;cursor:pointer;text-decoration:none;transition:all .15s}
+.dl-btn:hover{background:rgba(0,229,160,.18)}
+.walk-overlay{position:fixed;inset:0;background:rgba(5,8,16,.93);z-index:400;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px}
+.walk-overlay.show{display:flex}
+.walk-wrap{position:relative;width:min(700px,95vw);height:min(400px,58vh);background:var(--wall);border:2px solid var(--border2);overflow:hidden}
+.walk-lbl{font-family:'VT323',monospace;font-size:14px;color:var(--G);letter-spacing:3px;text-align:center}
+.walk-log{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text2);text-align:center;letter-spacing:1px;height:18px}
+.srv-strip{grid-column:1/-1;background:var(--wall2);border:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
+.srv-strip::before{content:'SERVER ROOM';position:absolute;top:7px;left:14px;font-family:'VT323',monospace;font-size:11px;color:var(--text3);letter-spacing:3px}
 .sroom-racks{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
-.big-rack{background:#0d1117;border:1px solid #1e2a40;padding:4px;width:44px;display:flex;flex-direction:column;gap:2px}
-.big-unit{height:8px;background:#111827;border:1px solid #1e2a40;display:flex;align-items:center;gap:2px;padding:0 2px}
+.big-rack{background:#070e18;border:1px solid #1a2a40;padding:3px;width:42px;display:flex;flex-direction:column;gap:2px}
+.big-unit{height:7px;background:#0d1525;border:1px solid #1a2a3a;display:flex;align-items:center;gap:2px;padding:0 2px}
 .srv-stats{margin-left:auto;display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--text2)}
 .srv-stat{display:flex;align-items:center;gap:5px}
-
-/* ── ADD AGENT MODAL ── */
-.modal-bg{
-  position:fixed;inset:0;background:rgba(0,0,0,.7);
-  z-index:200;display:none;align-items:center;justify-content:center;
-}
+.orch-log{grid-column:1/-1;background:var(--wall2);border:1px solid var(--border);padding:10px 14px;display:none}
+.orch-log.show{display:block}
+.orch-title{font-family:'VT323',monospace;font-size:13px;color:var(--text2);letter-spacing:3px;margin-bottom:6px}
+.orch-ev{font-size:10px;color:var(--text2);display:flex;gap:8px;padding:2px 0}
+.orch-t{color:var(--text3);flex-shrink:0}
+.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:300;display:none;align-items:center;justify-content:center}
 .modal-bg.show{display:flex}
-.modal{
-  background:var(--surface);border:1px solid var(--border2);
-  border-radius:var(--r);padding:24px;width:400px;
-  box-shadow:var(--shadow);
-}
-.modal-title{font-family:'VT323',monospace;font-size:22px;color:var(--accent);letter-spacing:2px;margin-bottom:18px}
-.field{margin-bottom:12px}
-.field label{display:block;font-size:11px;color:var(--text2);letter-spacing:1px;margin-bottom:4px;text-transform:uppercase}
-.field input,.field select,.field textarea{
-  width:100%;background:var(--surface2);border:1px solid var(--border);
-  color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:12px;
-  padding:7px 10px;outline:none;border-radius:var(--r);
-  transition:border-color .15s;
-}
-.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
-.field textarea{resize:vertical;min-height:60px}
-.field select option{background:var(--surface2)}
-.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
-.mbtn{
-  padding:7px 18px;border-radius:var(--r);
-  font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;
-  transition:all .15s;border:1px solid;
-}
-.mbtn-confirm{background:var(--accent);border-color:var(--accent);color:#000}
-.mbtn-confirm:hover{background:#79b8ff}
-.mbtn-cancel{background:transparent;border-color:var(--border);color:var(--text2)}
-.mbtn-cancel:hover{border-color:var(--text2)}
-
-/* ── SIDEBAR ── */
-.sidebar{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
+.modal{background:var(--wall);border:1px solid var(--border2);padding:24px;width:380px;box-shadow:var(--shadow)}
+.modal-t{font-family:'VT323',monospace;font-size:20px;color:var(--G);letter-spacing:2px;margin-bottom:16px}
+.field{margin-bottom:11px}
+.field label{display:block;font-size:10px;color:var(--text2);letter-spacing:2px;margin-bottom:4px;text-transform:uppercase}
+.field input,.field select,.field textarea{width:100%;background:var(--floor);border:1px solid var(--border2);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:11px;padding:7px 10px;outline:none;transition:border-color .15s}
+.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--G)}
+.field textarea{resize:vertical;min-height:56px}
+.field select option{background:var(--floor)}
+.modal-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
+.mbtn{padding:7px 16px;font-family:'Share Tech Mono',monospace;font-size:11px;cursor:pointer;border:1px solid;transition:all .15s;background:transparent}
+.mbtn-ok{border-color:var(--G);color:var(--G)}.mbtn-ok:hover{background:rgba(0,229,160,.1)}
+.mbtn-no{border-color:var(--border2);color:var(--text2)}.mbtn-no:hover{border-color:var(--text2)}
+.notif{position:fixed;top:58px;right:16px;background:var(--wall);border:1px solid var(--border);border-left:3px solid var(--G);padding:12px 16px;max-width:280px;z-index:600;transform:translateX(300px);transition:transform .3s ease;box-shadow:var(--shadow);font-size:12px}
+.notif.show{transform:translateX(0)}
+.notif-t{font-family:'VT323',monospace;font-size:18px;letter-spacing:1px}
+.notif-m{color:var(--text2);margin-top:2px;line-height:1.4;font-size:11px}
+.sidebar{background:#050810;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
 .sb-sec{border-bottom:1px solid var(--border);flex-shrink:0}
-.sb-title{font-family:'VT323',monospace;font-size:14px;letter-spacing:3px;color:var(--text2);padding:10px 14px 8px;border-bottom:1px solid var(--border)}
+.sb-t{font-family:'VT323',monospace;font-size:13px;letter-spacing:3px;color:var(--text2);padding:9px 14px 7px;border-bottom:1px solid var(--border)}
 .act-scroll{flex:1;overflow-y:auto;max-height:260px}
-.act-item{padding:7px 14px;border-bottom:1px solid rgba(48,54,61,.4);display:flex;gap:8px}
+.act-item{padding:7px 14px;border-bottom:1px solid rgba(30,45,66,.4);display:flex;gap:8px}
 .act-dot{width:5px;height:5px;border-radius:50%;margin-top:5px;flex-shrink:0}
 .act-msg{font-size:11px;color:var(--text);line-height:1.4}
 .act-time{font-size:10px;color:var(--text3);margin-top:1px}
 .hist-scroll{overflow-y:auto;max-height:200px}
-.hist-item{padding:8px 14px;border-bottom:1px solid rgba(48,54,61,.4);cursor:pointer;transition:background .1s}
-.hist-item:hover{background:var(--surface2)}
+.hist-item{padding:8px 14px;border-bottom:1px solid rgba(30,45,66,.4);cursor:pointer;transition:background .1s}
+.hist-item:hover{background:var(--wall)}
 .hist-task{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
 .hist-meta{font-size:10px;color:var(--text3);margin-top:2px;display:flex;gap:8px}
-
-/* notification */
-.notif{
-  position:fixed;top:60px;right:16px;
-  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--green);
-  padding:12px 16px;max-width:280px;z-index:999;
-  transform:translateX(300px);transition:transform .3s ease;
-  border-radius:var(--r);box-shadow:var(--shadow);
-}
-.notif.show{transform:translateX(0)}
-.notif-t{font-family:'VT323',monospace;font-size:18px;letter-spacing:1px}
-.notif-m{font-size:11px;color:var(--text2);margin-top:2px;line-height:1.4}
-
-::-webkit-scrollbar{width:4px}
-::-webkit-scrollbar-track{background:transparent}
-::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+@keyframes arm-type{0%{transform:translateY(0)rotate(0)}100%{transform:translateY(2px)rotate(-5deg)}}
 </style>
 </head>
 <body>
-
 <header class="topbar">
-  <div class="tb-left">
-    <div class="tb-logo">MC</div>
-    <span class="tb-title">MISSION CONTROL AI</span>
+  <div style="display:flex;align-items:center;gap:8px">
+    <span class="tb-logo">MISSION CONTROL AI</span>
+    <span class="tb-ver">v4</span>
   </div>
   <div class="tb-right">
-    <div class="tb-stat"><div class="sdot dot-g"></div><span id="top-active">0 active</span></div>
-    <div class="tb-stat"><div class="sdot dot-d" id="top-dot"></div><span id="top-status">Idle</span></div>
+    <div class="tb-stat"><div class="sdot dg"></div><span id="top-active">0 active</span></div>
+    <div class="tb-stat"><div class="sdot dd" id="top-dot"></div><span id="top-status">Idle</span></div>
     <div class="clock" id="clock">00:00:00</div>
   </div>
 </header>
-
-<div class="progress" id="progress"></div>
-
+<div class="prog" id="prog"></div>
 <div class="mbar">
-  <input class="minput" id="task-input" placeholder="Describe the mission... (e.g. 'Write a formal report about space exploration with images')" autocomplete="off"/>
+  <input class="minput" id="task-input" placeholder="Assign mission... (e.g. 'Write a formal report about space exploration with images')" autocomplete="off"/>
   <button class="launch" id="launch-btn" onclick="launchMission()">&#9658; LAUNCH</button>
-  <button class="add-agent-btn" onclick="openModal()">+ Add Agent</button>
+  <button class="add-btn" onclick="openModal()">+ Agent</button>
   <span class="mc" id="mc-count">MISSIONS: 0</span>
 </div>
-
 <div class="main">
   <div class="office">
-    <div class="floor-label">
-      <span>&#9632; Operations Floor</span>
-      <span style="font-size:10px;color:var(--text3)" id="floor-subtitle">Waiting for mission</span>
+    <div class="floor-hdr">
+      <span style="font-family:'VT323',monospace;font-size:13px;letter-spacing:4px">&#9632; OPERATIONS FLOOR</span>
+      <span class="floor-sub" id="floor-sub">WAITING FOR MISSION</span>
     </div>
     <div class="ogrid" id="ogrid"></div>
   </div>
-
   <aside class="sidebar">
-    <div class="sb-sec">
-      <div class="sb-title">ACTIVITY</div>
-      <div class="act-scroll" id="act-log"></div>
-    </div>
-    <div class="sb-sec">
-      <div class="sb-title">MISSIONS</div>
-      <div class="hist-scroll" id="hist-log">
-        <div style="padding:14px;font-size:11px;color:var(--text3);text-align:center">No missions yet</div>
-      </div>
-    </div>
+    <div class="sb-sec"><div class="sb-t">ACTIVITY</div><div class="act-scroll" id="act-log"></div></div>
+    <div class="sb-sec"><div class="sb-t">MISSIONS</div><div class="hist-scroll" id="hist-log"><div style="padding:14px;font-size:11px;color:var(--text3);text-align:center">No missions yet</div></div></div>
   </aside>
 </div>
-
-<!-- ADD AGENT MODAL -->
+<div class="walk-overlay" id="walk-overlay">
+  <div class="walk-lbl">MANAGER BRIEFING TEAM</div>
+  <div class="walk-wrap"><canvas id="walk-canvas"></canvas></div>
+  <div class="walk-log" id="walk-log">Preparing mission plan...</div>
+</div>
 <div class="modal-bg" id="modal-bg" onclick="if(event.target===this)closeModal()">
   <div class="modal">
-    <div class="modal-title">+ NEW AGENT</div>
-    <div class="field">
-      <label>Key (unique ID)</label>
-      <input id="m-key" placeholder="e.g. researcher" />
-    </div>
-    <div class="field">
-      <label>Display Name</label>
-      <input id="m-name" placeholder="e.g. Researcher" />
-    </div>
-    <div class="field">
-      <label>Role / System Prompt</label>
-      <textarea id="m-role" placeholder="e.g. Especialista en investigación científica..."></textarea>
-    </div>
-    <div class="field">
-      <label>Provider</label>
-      <select id="m-provider">
-        <option value="openrouter">OpenRouter (free models)</option>
-        <option value="gemini">Google Gemini</option>
-        <option value="groq">Groq</option>
-      </select>
-    </div>
-    <div class="modal-actions">
-      <button class="mbtn mbtn-cancel" onclick="closeModal()">Cancel</button>
-      <button class="mbtn mbtn-confirm" onclick="submitAgent()">Add Agent</button>
+    <div class="modal-t">+ NEW AGENT</div>
+    <div class="field"><label>Key (unique ID)</label><input id="m-key" placeholder="e.g. researcher"/></div>
+    <div class="field"><label>Display Name</label><input id="m-name" placeholder="e.g. Researcher"/></div>
+    <div class="field"><label>Role</label><textarea id="m-role" placeholder="Especialista en..."></textarea></div>
+    <div class="field"><label>Provider</label><select id="m-prov"><option value="openrouter">OpenRouter (free)</option><option value="gemini">Google Gemini</option><option value="groq">Groq</option></select></div>
+    <div class="modal-acts">
+      <button class="mbtn mbtn-no" onclick="closeModal()">Cancel</button>
+      <button class="mbtn mbtn-ok" onclick="submitAgent()">Add Agent</button>
     </div>
   </div>
 </div>
-
-<!-- NOTIFICATION -->
 <div class="notif" id="notif">
   <div class="notif-t" id="notif-t">Mission Complete</div>
   <div class="notif-m" id="notif-m"></div>
 </div>
-
 <script>
-const PROVIDER_MODELS = {
-  openrouter: ['meta-llama/llama-3.3-70b-instruct:free','qwen/qwen3-4b:free','mistralai/mistral-small-3.1-24b-instruct:free'],
-  gemini:     ['gemini-2.5-flash-preview-04-17','gemini-2.0-flash','gemini-1.5-flash'],
-  groq:       ['llama-3.3-70b-versatile','llama3-70b-8192','gemma2-9b-it'],
-};
-
-const SPEECH = {
-  manager:     ['Analyzing task...','Planning approach...','Delegating to team...','Reviewing scope...'],
-  developer:   ['Building solution...','Writing code...','Testing logic...'],
-  analyst:     ['Analyzing data...','Evaluating risks...','Reviewing document...'],
-  writer:      ['Drafting content...','Structuring report...','Writing sections...'],
-  image_agent: ['Searching images...','Finding visuals...','Fetching resources...'],
-};
-
-const COLORS = {
-  manager:'#58a6ff', developer:'#3fb950', analyst:'#d29922',
-  writer:'#bc8cff', image_agent:'#f78166',
-};
-
-let agentDefs  = [];
-let states     = {};
-let activity   = [];
-let history    = [];
-let mCount     = 0;
-let bubbleT    = {};
-
-// Load agents from API
-async function loadAgents() {
-  const r = await fetch('/api/agents');
-  const d = await r.json();
-  agentDefs = d.agents;
-  agentDefs.forEach(a => {
-    if (!states[a.key]) states[a.key] = { status:'idle', message:'', model:'' };
-  });
+const PROV_MODELS={openrouter:['meta-llama/llama-3.3-70b-instruct:free','qwen/qwen3-4b:free'],gemini:['gemini-2.5-flash-preview-04-17','gemini-2.0-flash'],groq:['llama-3.3-70b-versatile','gemma2-9b-it']};
+const COLORS={manager:'#00e5a0',developer:'#4a9eff',analyst:'#ffcc44',writer:'#cc88ff',image_agent:'#ff6688'};
+const SPEECH={manager:['Analyzing task...','Planning approach...','Coordinating team...'],developer:['Building solution...','Writing code...'],analyst:['Analyzing data...','Reviewing doc...'],writer:['Drafting report...','Writing sections...'],image_agent:['Searching images...','Finding visuals...']};
+let agentDefs=[],states={},activity=[],history=[],mCount=0,bubbleT={};
+
+async function loadAgents(){
+  const r=await fetch('/api/agents'),d=await r.json();
+  agentDefs=d.agents;
+  agentDefs.forEach(a=>{if(!states[a.key])states[a.key]={status:'idle',message:'',model:''};});
   renderOffice();
 }
 
-// CLOCK
-setInterval(() => {
-  const n = new Date();
-  document.getElementById('clock').textContent =
-    [n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
-}, 1000);
-
-// ── SVG BUILDERS ─────────────────────────────────────────────────────────
-function personSVG(color, status) {
-  const op   = status === 'resting' ? '0.2' : '1';
-  const anim = status === 'working'
-    ? 'style="animation:arm-t .28s ease-in-out infinite alternate;transform-origin:13px 18px"'
-    : '';
-  return `<svg viewBox="0 0 32 52" width="32" height="52" style="image-rendering:pixelated;display:block;opacity:${op}">
-    <style>@keyframes arm-t{0%{transform:translateY(0)rotate(0)}100%{transform:translateY(2px)rotate(-5deg)}}</style>
-    <rect x="11" y="0"  width="10" height="3"  fill="#1a1a2a"/>
-    <rect x="9"  y="3"  width="14" height="2"  fill="#1a1a2a"/>
-    <rect x="9"  y="3"  width="2"  height="5"  fill="#1a1a2a"/>
-    <rect x="21" y="3"  width="2"  height="5"  fill="#1a1a2a"/>
-    <rect x="9"  y="5"  width="14" height="12" fill="#f0c8a0"/>
-    <rect x="7"  y="8"  width="2"  height="4"  fill="#f0c8a0"/>
-    <rect x="23" y="8"  width="2"  height="4"  fill="#f0c8a0"/>
-    <rect x="11" y="9"  width="4"  height="3"  fill="${color}" opacity=".9"/>
-    <rect x="17" y="9"  width="4"  height="3"  fill="${color}" opacity=".9"/>
-    <rect x="12" y="10" width="2"  height="2"  fill="#111"/>
-    <rect x="18" y="10" width="2"  height="2"  fill="#111"/>
-    <rect x="15" y="10" width="2"  height="1"  fill="${color}"/>
-    <rect x="13" y="14" width="6"  height="1"  fill="#c88060" opacity=".5"/>
-    <rect x="9"  y="17" width="14" height="11" fill="${color}" opacity=".85"/>
-    <rect x="11" y="17" width="10" height="3"  fill="${color}"/>
-    <g ${anim}>
-      <rect x="4"  y="18" width="5"  height="8"  fill="${color}" opacity=".85"/>
-      <rect x="23" y="18" width="5"  height="8"  fill="${color}" opacity=".85"/>
-      <rect x="3"  y="25" width="5"  height="4"  fill="#f0c8a0"/>
-      <rect x="24" y="25" width="5"  height="4"  fill="#f0c8a0"/>
-    </g>
-    <rect x="9"  y="28" width="14" height="12" fill="#1e2535"/>
-    <rect x="13" y="40" width="5"  height="7"  fill="#1e2535"/>
-    <rect x="9"  y="40" width="5"  height="7"  fill="#1e2535"/>
-    <rect x="7"  y="47" width="7"  height="4"  fill="#111"/>
-    <rect x="18" y="47" width="7"  height="4"  fill="#111"/>
-  </svg>`;
-}
-
-function chairSVG(empty) {
-  const c = empty ? '#111827' : '#1e2a40', s = empty ? '#0d1117' : '#161b22';
-  return `<svg viewBox="0 0 26 30" width="26" height="30" style="image-rendering:pixelated;display:block">
-    <rect x="3" y="3"  width="20" height="13" fill="${c}" rx="1"/>
-    <rect x="4" y="4"  width="18" height="11" fill="${s}"/>
-    <rect x="3" y="16" width="20" height="4"  fill="${c}"/>
-    <rect x="3" y="0"  width="4"  height="16" fill="${c}"/>
-    <rect x="5" y="20" width="3"  height="8"  fill="${c}"/>
-    <rect x="18" y="20" width="3" height="8"  fill="${c}"/>
-    <rect x="3" y="27" width="5"  height="3"  fill="#0d1117"/>
-    <rect x="18" y="27" width="5" height="3"  fill="#0d1117"/>
-  </svg>`;
-}
-
-function coffeeSVG() {
-  return `<svg viewBox="0 0 13 13" width="13" height="13" style="image-rendering:pixelated;display:block">
-    <rect x="2" y="4" width="7" height="7" fill="#5c3a1e"/>
-    <rect x="2" y="4" width="7" height="2" fill="#7a4e2a"/>
-    <rect x="9" y="6" width="2" height="3" fill="#5c3a1e"/>
-    <rect x="1" y="11" width="9" height="2" fill="#4a2e14"/>
-    <rect x="4" y="2" width="1" height="2" fill="#555" opacity=".5"/>
-    <rect x="6" y="1" width="1" height="3" fill="#555" opacity=".4"/>
-  </svg>`;
-}
-
-function serverRack() {
-  const units = [
-    ['g','g','1.1s','1.7s',true],['a','b','2.3s','.8s',true],
-    ['g','o','1.8s',null,false], ['b','g','.7s','2.1s',true],
-    ['a','a','1.4s','1.9s',false],['g','b','2.6s','.6s',true],
-  ];
-  return units.map(([l1,l2,d1,d2,act]) =>
-    `<div class="runit">
-      <div class="rled l${l1}" style="--d:${d1}"></div>
-      <div class="rled l${l2 !== 'o' ? l2 : 'o'}" ${d2 ? `style="--d:${d2}"` : ''}></div>
-      <div class="rbar ${act?'on':''}"></div>
-    </div>`
-  ).join('');
-}
-
-function screenContent(status) {
-  if (status === 'working') return `<div class="tdots"><div class="tdot"></div><div class="tdot"></div><div class="tdot"></div></div>`;
-  if (status === 'active')  return `<div class="sline" style="width:80%"></div><div class="sline" style="width:55%;opacity:.4"></div><div class="sline" style="width:68%;opacity:.3"></div><div class="scur"></div>`;
-  if (status === 'resting') return `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-family:'VT323',monospace;font-size:11px;color:var(--amber);letter-spacing:1px;opacity:.6">AWAY</div>`;
-  return `<div class="sline" style="width:40%;opacity:.2"></div><div class="sline" style="width:28%;opacity:.15"></div>`;
-}
-
-// ── BUILD ROOM ─────────────────────────────────────────────────────────────
-function buildRoom(agent) {
-  const st     = states[agent.key] || { status:'idle', message:'', model:'' };
-  const status = st.status;
-  const color  = COLORS[agent.key] || '#58a6ff';
-  const empty  = status === 'resting';
-
-  const badgeMap = { idle:'IDLE', working:'PROCESSING', active:'DONE', resting:'AWAY', error:'ERROR' };
-  const badgeCls = { idle:'b-idle', working:'b-working', active:'b-active', resting:'b-resting', error:'b-error' };
-  const roomCls  = { idle:'idle', working:'working', active:'active', resting:'resting', error:'resting' };
-
-  const monCls = status === 'working' ? 'thinking' : status === 'active' ? 'done' : status === 'resting' ? 'away' : '';
-
-  let resultHTML = '';
-  if (status === 'idle') {
-    resultHTML = `<div class="rph">Waiting for mission...</div>`;
-  } else if (status === 'working') {
-    resultHTML = `<div class="rph" style="color:var(--accent)">Processing task...</div>`;
-  } else if (status === 'resting') {
-    resultHTML = `<div class="rph" style="color:var(--amber)">Rate limit — back in ~1-2 min</div>`;
-  } else {
-    const msg = st.message || '';
-    resultHTML = `<div class="rtxt" id="result-${agent.key}"></div>
-      ${st.model ? `<div class="rmodel"><div class="sdot dot-g" style="width:5px;height:5px"></div>${st.model}</div>` : ''}
-      ${st.doc_file ? `<a class="dl-btn" href="/api/docs/${st.doc_file}" download>⬇ Download .docx</a>` : ''}`;
-  }
-
-  return `<div class="room ${roomCls[status]||'idle'}" id="room-${agent.key}">
-    <div class="rwall">
-      <span class="rname" style="color:${color}">${agent.name}</span>
-      <span class="rbadge ${badgeCls[status]||'b-idle'}">${badgeMap[status]||'IDLE'}</span>
-    </div>
+setInterval(()=>{
+  const n=new Date();
+  document.getElementById('clock').textContent=[n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
+},1000);
+
+function personSVG(color,status){
+  const op=status==='resting'?'0.18':'1';
+  const a=status==='working'?'style="animation:arm-type .28s ease-in-out infinite alternate;transform-origin:13px 18px"':'';
+  return`<svg viewBox="0 0 32 52" width="25" height="40" style="image-rendering:pixelated;display:block;opacity:${op}"><rect x="11" y="0" width="10" height="3" fill="#1a1a2e"/><rect x="9" y="3" width="14" height="2" fill="#1a1a2e"/><rect x="9" y="3" width="2" height="5" fill="#1a1a2e"/><rect x="21" y="3" width="2" height="5" fill="#1a1a2e"/><rect x="9" y="5" width="14" height="12" fill="#f0c8a0"/><rect x="7" y="8" width="2" height="4" fill="#f0c8a0"/><rect x="23" y="8" width="2" height="4" fill="#f0c8a0"/><rect x="11" y="9" width="4" height="3" fill="${color}" opacity=".9"/><rect x="17" y="9" width="4" height="3" fill="${color}" opacity=".9"/><rect x="12" y="10" width="2" height="2" fill="#111"/><rect x="18" y="10" width="2" height="2" fill="#111"/><rect x="15" y="10" width="2" height="1" fill="${color}"/><rect x="13" y="14" width="6" height="1" fill="#c88060" opacity=".5"/><rect x="9" y="17" width="14" height="11" fill="${color}" opacity=".85"/><rect x="11" y="17" width="10" height="3" fill="${color}"/><g ${a}><rect x="4" y="18" width="5" height="8" fill="${color}" opacity=".85"/><rect x="23" y="18" width="5" height="8" fill="${color}" opacity=".85"/><rect x="3" y="25" width="5" height="4" fill="#f0c8a0"/><rect x="24" y="25" width="5" height="4" fill="#f0c8a0"/></g><rect x="9" y="28" width="14" height="12" fill="#1e2535"/><rect x="13" y="40" width="5" height="7" fill="#1e2535"/><rect x="9" y="40" width="5" height="7" fill="#1e2535"/><rect x="7" y="47" width="7" height="4" fill="#111"/><rect x="18" y="47" width="7" height="4" fill="#111"/></svg>`;
+}
+function chairSVG(e){const c=e?'#0d1117':'#1a2535',s=e?'#080d14':'#0f1a28';return`<svg viewBox="0 0 26 30" width="26" height="30" style="image-rendering:pixelated;display:block"><rect x="3" y="3" width="20" height="13" fill="${c}" rx="1"/><rect x="4" y="4" width="18" height="11" fill="${s}"/><rect x="3" y="16" width="20" height="4" fill="${c}"/><rect x="3" y="0" width="4" height="16" fill="${c}"/><rect x="5" y="20" width="3" height="8" fill="${c}"/><rect x="18" y="20" width="3" height="8" fill="${c}"/><rect x="3" y="27" width="5" height="3" fill="#080d14"/><rect x="18" y="27" width="5" height="3" fill="#080d14"/></svg>`;}
+function coffeeSVG(){return`<svg viewBox="0 0 13 13" width="13" height="13" style="image-rendering:pixelated;display:block"><rect x="2" y="4" width="7" height="7" fill="#5c3a1e"/><rect x="2" y="4" width="7" height="2" fill="#7a4e2a"/><rect x="9" y="6" width="2" height="3" fill="#5c3a1e"/><rect x="1" y="11" width="9" height="2" fill="#4a2e14"/><rect x="4" y="2" width="1" height="2" fill="#555" opacity=".5"/><rect x="6" y="1" width="1" height="3" fill="#555" opacity=".4"/></svg>`;}
+function sRack(){const us=[['lg','lb','1.1s','.7s',true],['la','lb','2.3s','.9s',true],['lg','lo','1.8s',null,false],['lb','lg','.7s','2.1s',true],['la','la','1.4s','1.9s',false],['lg','lb','2.6s','.5s',true]];return us.map(([l1,l2,d1,d2,a])=>`<div class="ru"><div class="rl ${l1}" style="--d:${d1}"></div><div class="rl ${l2}" ${d2?`style="--d:${d2}"`:''} ></div><div class="rb ${a?'on':''}"></div></div>`).join('');}
+function screenContent(s){if(s==='working')return`<div class="tdots"><div class="td"></div><div class="td"></div><div class="td"></div></div>`;if(s==='active')return`<div class="sl" style="width:78%"></div><div class="sl" style="width:52%;opacity:.4"></div><div class="sl" style="width:65%;opacity:.3"></div><div class="scur"></div>`;if(s==='resting')return`<div style="display:flex;align-items:center;justify-content:center;height:100%;font-family:'VT323',monospace;font-size:11px;color:var(--Adim);letter-spacing:1px;opacity:.7">AWAY</div>`;return`<div class="sl" style="width:38%;opacity:.18"></div><div class="sl" style="width:25%;opacity:.12"></div>`;}
+
+function buildRoom(agent){
+  const st=states[agent.key]||{status:'idle',message:'',model:''};
+  const status=st.status,color=COLORS[agent.key]||'#00e5a0',empty=status==='resting';
+  const badge={idle:'IDLE',working:'PROCESSING',active:'DONE',resting:'AWAY',visiting:'BRIEFING',error:'ERROR'};
+  const bcls={idle:'bi',working:'bw',active:'ba',resting:'br',visiting:'bv',error:'br'};
+  const rcls={idle:'idle',working:'working',active:'active',resting:'resting',visiting:'visiting',error:'resting'};
+  const mcls=status==='working'?'thinking':status==='active'?'done':status==='resting'?'away':'';
+  let resultHTML='';
+  if(status==='idle')resultHTML=`<div class="rph">Waiting for mission...</div>`;
+  else if(status==='working'||status==='visiting')resultHTML=`<div class="rph" style="color:var(--B)">Processing...</div>`;
+  else if(status==='resting')resultHTML=`<div class="rph" style="color:var(--A)">Rate limited — back soon</div>`;
+  else{const msg=st.message||'';resultHTML=`<div class="rtxt" id="result-${agent.key}"></div>${st.model?`<div class="rmodel"><div class="sdot dg" style="width:5px;height:5px;margin:0"></div>${st.model}</div>`:''} ${st.doc_file?`<a class="dl-btn" href="/api/docs/${st.doc_file}" download>&#8595; Download .docx</a>`:''}`;}
+  return`<div class="room ${rcls[status]||'idle'}" id="room-${agent.key}">
+    <div class="rwall"><span class="rname" style="color:${color}">${agent.name}</span><span class="rbadge ${bcls[status]||'bi'}">${badge[status]||'IDLE'}</span></div>
     <div class="rscene" id="scene-${agent.key}">
-      <div class="srack">${serverRack()}</div>
-      <div class="deskarea">
-        <div class="monitor ${monCls}">
-          <div class="mscreen">${screenContent(status)}</div>
-          <div class="mbase"></div>
-        </div>
-        <div class="desk-surface"></div>
-        <div class="keyboard"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div>
-      </div>
-      <div style="position:absolute;bottom:0;right:4px;z-index:1">${chairSVG(empty)}</div>
+      <div class="srack">${sRack()}</div>
+      <div class="deskarea"><div class="monitor ${mcls}"><div class="mscreen">${screenContent(status)}</div><div class="mbase"></div></div><div class="dtop"></div><div class="kbd"><div class="kk"></div><div class="kk"></div><div class="kk"></div><div class="kk"></div></div></div>
+      <div class="chair-slot">${chairSVG(empty)}</div>
       <div class="coffee">${coffeeSVG()}</div>
-      ${!empty ? `<div class="person">${personSVG(color, status)}</div>` : ''}
-      ${empty  ? `<div class="ooo"><div class="ooo-t">☕ AWAY</div><div class="ooo-s">Rate limited</div></div>` : ''}
+      ${!empty?`<div class="person-slot">${personSVG(color,status)}</div>`:''}
+      ${empty?`<div class="ooo"><div class="ooot">&#9749; AWAY</div><div class="ooos">Rate limited</div></div>`:''}
       <div class="bubble" id="bubble-${agent.key}"></div>
     </div>
     <div class="rresult" id="result-area-${agent.key}">${resultHTML}</div>
   </div>`;
 }
 
-function buildServerRoom() {
-  const racks = Array.from({length:5},()=>{
-    const units = [['g','1.1s'],['b','.8s'],['a','2s'],['g','1.6s'],['b','.5s']].map(([c,d])=>
-      `<div class="big-unit"><div class="rled l${c}" style="--d:${d}"></div><div class="rbar on"></div></div>`
-    ).join('');
-    return `<div class="big-rack">${units}</div>`;
-  }).join('');
-
-  return `<div class="server-room">
-    <div class="sroom-racks">${racks}</div>
-    <div class="srv-stats">
-      <div class="srv-stat"><div class="sdot dot-g"></div><span>FastAPI online</span></div>
-      <div class="srv-stat"><div class="sdot dot-g" id="dot-gemini"></div><span>Gemini</span></div>
-      <div class="srv-stat"><div class="sdot dot-g" id="dot-orouter"></div><span>OpenRouter</span></div>
-      <div class="srv-stat"><div class="sdot dot-g" id="dot-groq"></div><span>Groq (backup)</span></div>
-    </div>
-  </div>`;
-}
-
-function renderOffice(orchEvents) {
-  const grid = document.getElementById('ogrid');
-  let html = agentDefs.map(buildRoom).join('');
-  html += buildServerRoom();
-
-  if (orchEvents && orchEvents.length) {
-    const evHtml = orchEvents.map(e =>
-      `<div class="orch-event"><span class="orch-time">${e.time}</span><span>${e.msg}</span></div>`
-    ).join('');
-    html += `<div class="orch-log show">
-      <div class="orch-title">ORCHESTRATION LOG</div>
-      <div class="orch-events">${evHtml}</div>
-    </div>`;
+function buildSrvRoom(){
+  const racks=Array.from({length:6},()=>`<div class="big-rack">${[['lg','.9s'],['lb','1.3s'],['la','2s'],['lg','1.6s'],['lb','.6s']].map(([c,d])=>`<div class="big-unit"><div class="rl ${c}" style="--d:${d}"></div><div class="rb on"></div></div>`).join('')}</div>`).join('');
+  return`<div class="srv-strip"><div class="sroom-racks">${racks}</div><div class="srv-stats"><div class="srv-stat"><div class="sdot dg"></div><span>FastAPI OK</span></div><div class="srv-stat"><div class="sdot dg"></div><span>Gemini</span></div><div class="srv-stat"><div class="sdot dg"></div><span>OpenRouter</span></div><div class="srv-stat"><div class="sdot dg"></div><span>Groq backup</span></div></div></div>`;
+}
+
+function renderOffice(orchEvents){
+  const grid=document.getElementById('ogrid');
+  let html=agentDefs.map(buildRoom).join('')+buildSrvRoom();
+  if(orchEvents&&orchEvents.length){const ev=orchEvents.map(e=>`<div class="orch-ev"><span class="orch-t">${e.time}</span><span>${e.msg}</span></div>`).join('');html+=`<div class="orch-log show"><div class="orch-title">ORCHESTRATION LOG</div>${ev}</div>`;}
+  grid.innerHTML=html;
+  agentDefs.forEach(a=>{const st=states[a.key];if(st&&st.status==='active'&&st.message&&st._tw){const el=document.getElementById(`result-${a.key}`);if(el)typeWriter(el,st.message);}});
+  document.getElementById('top-active').textContent=`${agentDefs.filter(a=>(states[a.key]||{}).status==='working').length} active`;
+}
+
+function typeWriter(el,text,speed=14){el.textContent='';let i=0;const iv=setInterval(()=>{if(i<text.length)el.textContent+=text[i++];else clearInterval(iv);},speed);}
+function showBubble(key,text,ms=2800){const b=document.getElementById(`bubble-${key}`);if(!b)return;if(bubbleT[key])clearTimeout(bubbleT[key]);b.textContent=text;b.classList.add('show');bubbleT[key]=setTimeout(()=>b.classList.remove('show'),ms);}
+function addAct(msg,color='#4a9eff'){const n=new Date();const t=[n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');activity.unshift({msg,t,color});document.getElementById('act-log').innerHTML=activity.slice(0,30).map(a=>`<div class="act-item"><div class="act-dot" style="background:${a.color}"></div><div><div class="act-msg">${a.msg}</div><div class="act-time">${a.t}</div></div></div>`).join('');}
+function notify(title,msg,color='#00e5a0'){document.getElementById('notif-t').textContent=title;document.getElementById('notif-t').style.color=color;document.getElementById('notif-m').textContent=msg;document.getElementById('notif').style.borderLeftColor=color;const el=document.getElementById('notif');el.classList.add('show');setTimeout(()=>el.classList.remove('show'),5500);}
+function updateHistory(){const list=document.getElementById('hist-log');if(!history.length){list.innerHTML=`<div style="padding:14px;font-size:11px;color:var(--text3);text-align:center">No missions yet</div>`;return;}list.innerHTML=[...history].reverse().map(m=>`<div class="hist-item"><div class="hist-task">${m.task}</div><div class="hist-meta"><span>${m.time}</span><span style="color:${m.ok?'var(--G)':'var(--A)'}">${m.ok?'Done':'Partial'}</span>${m.doc_file?`<span style="color:var(--P)">docx</span>`:''}</div></div>`).join('');}
+
+// WALK ANIMATION
+function runWalkAnimation(task,delegates,onDone){
+  const overlay=document.getElementById('walk-overlay');
+  const canvas=document.getElementById('walk-canvas');
+  const logEl=document.getElementById('walk-log');
+  const wrap=canvas.parentElement;
+  canvas.width=wrap.clientWidth||640;
+  canvas.height=wrap.clientHeight||380;
+  const W=canvas.width,H=canvas.height,ctx=canvas.getContext('2d');
+  overlay.classList.add('show');
+  const agentColors={manager:'#00e5a0',developer:'#4a9eff',analyst:'#ffcc44',writer:'#cc88ff',image_agent:'#ff6688'};
+  const rooms=agentDefs.filter(a=>a.key!=='manager').slice(0,5);
+  const rW=Math.min(120,Math.floor((W-60)/Math.max(rooms.length,1)));
+  const rH=130,rY=H/2-rH/2;
+  const rPos=rooms.map((r,i)=>({x:30+i*(rW+14),y:rY,w:rW,h:rH,key:r.key,name:r.name,color:agentColors[r.key]||'#4a9eff'}));
+  const delSet=new Set(delegates);
+  const manColor='#00e5a0';
+  let mx=12,my=H/2+8,frame=0,stepI=0,phase='walking',talkF=0;
+  const TALK=85,SPD=2.8;
+  const msgs={writer:`"Write full report:\n${task.substring(0,26)}..."`,analyst:`"Review the\ndocument."`,developer:`"Build solution:\n${task.substring(0,24)}..."`,image_agent:`"Find images for:\n${task.substring(0,24)}..."`};
+  const steps=[{key:'__start',x:W*.07,y:H/2,msg:'Planning...'},...rPos.filter(r=>delSet.has(r.key)).map(r=>({key:r.key,x:r.x+r.w/2-8,y:r.y+r.h-26,msg:msgs[r.key]||`"Delegating task..."`})),{key:'__return',x:W*.07,y:H/2,msg:'Briefing complete!'}];
+  const visited=new Set();
+  let curMsg='';
+
+  function drawBg(){ctx.fillStyle='#080f1a';ctx.fillRect(0,0,W,H);ctx.strokeStyle='rgba(255,255,255,.025)';ctx.lineWidth=1;for(let x=0;x<W;x+=32){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}for(let y=0;y<H;y+=32){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}}
+
+  function drawRoom(r,vis){
+    ctx.fillStyle=vis?'#0d1a2a':'#090f1a';ctx.strokeStyle=vis?r.color:'#1e2d42';ctx.lineWidth=vis?2:1;
+    ctx.fillRect(r.x,r.y,r.w,r.h);ctx.strokeRect(r.x,r.y,r.w,r.h);
+    ctx.fillStyle=vis?r.color+'28':'#0d1828';ctx.fillRect(r.x,r.y,r.w,20);
+    ctx.fillStyle=vis?r.color:'#3a5a7a';ctx.font=`9px "Share Tech Mono",monospace`;ctx.textAlign='center';
+    ctx.fillText(r.name.toUpperCase(),r.x+r.w/2,r.y+14);
+    ctx.fillStyle='#7a5c0a';ctx.fillRect(r.x+8,r.y+r.h-36,r.w-16,5);
+    ctx.fillStyle='#030608';ctx.strokeStyle='#1a2535';ctx.lineWidth=1;
+    ctx.fillRect(r.x+14,r.y+r.h-58,r.w-28,22);ctx.strokeRect(r.x+14,r.y+r.h-58,r.w-28,22);
+    if(vis){ctx.fillStyle=r.color;ctx.globalAlpha=.5+.4*Math.sin(frame*.12);ctx.fillRect(r.x+17,r.y+r.h-54,(r.w-34)*.8,3);ctx.globalAlpha=.3;ctx.fillRect(r.x+17,r.y+r.h-49,(r.w-34)*.55,3);ctx.globalAlpha=1;}
+    if(!delSet.has(r.key))return;
+    const px=r.x+r.w/2-5,py=r.y+r.h-26;
+    ctx.fillStyle='#f0c8a0';ctx.fillRect(px+2,py,7,7);
+    ctx.fillStyle=r.color;ctx.fillRect(px,py+7,11,7);
+    ctx.fillStyle='#1e2535';ctx.fillRect(px+2,py+14,4,6);ctx.fillRect(px+6,py+14,4,6);
+    // LEDs
+    ['#00e5a0','#4a9eff','#ffcc44'].forEach((c,i)=>{ctx.beginPath();ctx.arc(r.x+r.w-14+i*6,r.y+r.h-8,2,0,Math.PI*2);ctx.fillStyle=c;ctx.globalAlpha=.3+.7*((Math.sin(frame*.09+i*1.4)+1)/2);ctx.fill();});ctx.globalAlpha=1;
   }
 
-  grid.innerHTML = html;
-
-  // Fill typewriter results
-  agentDefs.forEach(a => {
-    const st = states[a.key];
-    if (st && st.status === 'active' && st.message && st._typewrite) {
-      const el = document.getElementById(`result-${a.key}`);
-      if (el) typeWriter(el, st.message);
-    }
-  });
-
-  const active = agentDefs.filter(a => (states[a.key]||{}).status === 'working').length;
-  document.getElementById('top-active').textContent = `${active} active`;
-}
-
-// TYPEWRITER
-function typeWriter(el, text, speed=14) {
-  el.textContent = ''; let i = 0;
-  const iv = setInterval(() => {
-    if (i < text.length) el.textContent += text[i++];
-    else clearInterval(iv);
-  }, speed);
-}
-
-// SPEECH
-function showBubble(key, text, ms=2800) {
-  const b = document.getElementById(`bubble-${key}`);
-  if (!b) return;
-  if (bubbleT[key]) clearTimeout(bubbleT[key]);
-  b.textContent = text;
-  b.classList.add('show');
-  bubbleT[key] = setTimeout(() => b.classList.remove('show'), ms);
-}
-
-// ACTIVITY
-function addAct(msg, color='#58a6ff') {
-  const now = new Date();
-  const t = [now.getHours(),now.getMinutes(),now.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
-  activity.unshift({ msg, t, color });
-  document.getElementById('act-log').innerHTML = activity.slice(0,30).map(a=>
-    `<div class="act-item">
-      <div class="act-dot" style="background:${a.color}"></div>
-      <div><div class="act-msg">${a.msg}</div><div class="act-time">${a.t}</div></div>
-    </div>`
-  ).join('');
-}
-
-// NOTIFY
-function notify(title, msg, color='#3fb950') {
-  document.getElementById('notif-t').textContent = title;
-  document.getElementById('notif-t').style.color = color;
-  document.getElementById('notif-m').textContent = msg;
-  document.getElementById('notif').style.borderLeftColor = color;
-  const el = document.getElementById('notif');
-  el.classList.add('show');
-  setTimeout(() => el.classList.remove('show'), 5000);
-}
-
-// HISTORY
-function updateHistory() {
-  const list = document.getElementById('hist-log');
-  if (!history.length) {
-    list.innerHTML = `<div style="padding:14px;font-size:11px;color:var(--text3);text-align:center">No missions yet</div>`;
-    return;
+  function drawManager(x,y,walking){
+    const bob=walking?Math.sin(frame*.45)*2:0;
+    ctx.fillStyle='#1a1a2e';ctx.fillRect(x+4,y,8,3);
+    ctx.fillStyle='#f0c8a0';ctx.fillRect(x+3,y+3,10,8);
+    ctx.fillStyle=manColor+'bb';ctx.fillRect(x,y+3,2,4);ctx.fillRect(x+13,y+3,2,4);
+    ctx.fillStyle=manColor;ctx.fillRect(x+2,y+11,12,9);
+    ctx.fillStyle='#1e2535';
+    ctx.fillRect(x+3,y+20,5,6+bob);ctx.fillRect(x+8,y+20,5,6-bob);
+    ctx.fillStyle='#111';ctx.fillRect(x+2,y+26+bob,5,3);ctx.fillRect(x+9,y+26-bob,5,3);
   }
-  list.innerHTML = [...history].reverse().map(m=>
-    `<div class="hist-item">
-      <div class="hist-task">${m.task}</div>
-      <div class="hist-meta">
-        <span>${m.time}</span>
-        <span style="color:${m.ok?'var(--green)':'var(--amber)'}">${m.ok?'Done':'Partial'}</span>
-        ${m.doc_file ? '<span style="color:var(--purple)">📄 docx</span>' : ''}
-      </div>
-    </div>`
-  ).join('');
-}
-
-// MODAL
-function openModal() { document.getElementById('modal-bg').classList.add('show'); }
-function closeModal() { document.getElementById('modal-bg').classList.remove('show'); }
-
-async function submitAgent() {
-  const key  = document.getElementById('m-key').value.trim();
-  const name = document.getElementById('m-name').value.trim() || key;
-  const role = document.getElementById('m-role').value.trim() || 'General purpose agent.';
-  const prov = document.getElementById('m-provider').value;
-  if (!key) { alert('Key is required'); return; }
 
-  const r = await fetch('/api/agents/add', {
-    method:'POST', headers:{'Content-Type':'application/json'},
-    body: JSON.stringify({ key, name, role, provider: prov, models: PROVIDER_MODELS[prov] }),
-  });
-  const d = await r.json();
-  if (d.success) {
-    agentDefs.push({ key: d.agent.key, name: d.agent.name, role: d.agent.role });
-    states[d.agent.key] = { status:'idle', message:'', model:'' };
-    renderOffice();
-    addAct(`Agent "${name}" added`, '#bc8cff');
-    closeModal();
-    ['m-key','m-name','m-role'].forEach(id => document.getElementById(id).value = '');
+  function drawBubble(x,y,lines){
+    const mxW=Math.max(...lines.map(l=>l.length))*6.2+16,bh=lines.length*13+14;
+    const bx=Math.min(Math.max(x+14,4),W-mxW-4),by=Math.max(y-bh-8,4);
+    ctx.fillStyle='#0d1828';ctx.strokeStyle='#2a3d58';ctx.lineWidth=1;
+    ctx.fillRect(bx,by,mxW,bh);ctx.strokeRect(bx,by,mxW,bh);
+    ctx.fillStyle='#c8d8f0';ctx.font='10px "Share Tech Mono",monospace';ctx.textAlign='left';
+    lines.forEach((l,i)=>ctx.fillText(l,bx+8,by+12+i*13+2));
   }
-}
-
-// ── LAUNCH ─────────────────────────────────────────────────────────────────
-async function launchMission() {
-  const task = document.getElementById('task-input').value.trim();
-  if (!task) return;
 
-  const btn = document.getElementById('launch-btn');
-  btn.disabled = true;
-  document.getElementById('progress').classList.add('on');
-  document.getElementById('top-status').textContent = 'Running';
-  document.getElementById('top-dot').className = 'sdot dot-a';
-  document.getElementById('floor-subtitle').textContent = `Mission: "${task.substring(0,50)}${task.length>50?'...':''}"`;
-
-  // Set all agents working
-  agentDefs.forEach(a => { states[a.key] = { status:'working', message:'', model:'' }; });
-  renderOffice();
-
-  // Stagger speech bubbles
-  agentDefs.forEach((a, i) => {
-    setTimeout(() => {
-      const phrases = SPEECH[a.key] || ['Working...'];
-      showBubble(a.key, phrases[Math.floor(Math.random()*phrases.length)], 3000);
-    }, i * 600);
-  });
-
-  addAct(`Mission: "${task.substring(0,40)}"`, '#58a6ff');
-
-  try {
-    const resp = await fetch('/api/mission', {
-      method:'POST', headers:{'Content-Type':'application/json'},
-      body: JSON.stringify({ task }),
-    });
-    const data = await resp.json();
-    if (!resp.ok || data.error) throw new Error(data.error || 'Server error');
-
-    let anyResting = false;
-    let hasDoc = false;
-
-    // Update states from results
-    agentDefs.forEach(a => {
-      const r = data.results[a.key];
-      if (!r) {
-        states[a.key] = { status:'idle', message:'', model:'' };
-        return;
+  function tick(){
+    drawBg();rPos.forEach(r=>drawRoom(r,visited.has(r.key)));
+    if(stepI<steps.length){
+      const step=steps[stepI];
+      const dx=step.x-mx,dy=step.y-my,dist=Math.sqrt(dx*dx+dy*dy);
+      if(dist>3&&phase==='walking'){mx+=dx/dist*SPD;my+=dy/dist*SPD;}
+      else if(phase==='walking'){
+        phase='talking';talkF=0;curMsg=step.msg;
+        if(step.key!=='__start'&&step.key!=='__return'){visited.add(step.key);logEl.textContent=`Manager briefing ${step.key}...`;addAct(`Manager briefing ${step.key}`,'#4a9eff');}
+        else if(step.key==='__return')logEl.textContent='Team briefed! Processing...';
       }
-      if (r.status === 'resting') anyResting = true;
-      const docFile = (a.key === 'manager' && data.doc_file) ? data.doc_file : null;
-      if (docFile) hasDoc = true;
-      states[a.key] = {
-        status:   r.status === 'resting' ? 'resting' : r.status === 'idle' ? 'idle' : 'active',
-        message:  r.message || '',
-        model:    r.model   || '',
-        doc_file: docFile,
-        _typewrite: true,
-      };
-    });
-
-    renderOffice(data.events);
-
-    // Stagger bubbles for active agents
-    agentDefs.forEach((a, i) => {
-      if ((states[a.key]||{}).status === 'active') {
-        setTimeout(() => {
-          showBubble(a.key, 'Done ✓', 2000);
-          addAct(`${a.name}: complete`, '#3fb950');
-        }, i * 400);
-      }
-    });
-
-    if (hasDoc) addAct('Word document ready for download', '#bc8cff');
-
-    mCount++;
-    document.getElementById('mc-count').textContent = `MISSIONS: ${mCount}`;
-    const time = new Date().toLocaleTimeString();
-    history.push({ task, time, ok: !anyResting, doc_file: data.doc_file });
-    updateHistory();
-
-    setTimeout(() => {
-      notify(
-        anyResting ? 'Mission Partial' : hasDoc ? 'Document Ready ✓' : 'Mission Complete ✓',
-        anyResting
-          ? 'Some agents rate-limited. Try again in ~2 min.'
-          : hasDoc
-          ? 'Your .docx document is ready to download!'
-          : `All agents responded. Mission #${mCount} done.`,
-        anyResting ? '#d29922' : hasDoc ? '#bc8cff' : '#3fb950'
-      );
-    }, agentDefs.length * 400 + 300);
-
-    document.getElementById('top-status').textContent = anyResting ? 'Partial' : 'Done';
-    document.getElementById('top-dot').className = `sdot ${anyResting ? 'dot-a' : 'dot-g'}`;
-    document.getElementById('floor-subtitle').textContent = anyResting ? 'Partial results' : 'Mission complete';
-
-  } catch(err) {
-    agentDefs.forEach(a => { states[a.key] = { status:'resting', message: err.message, model:'' }; });
-    renderOffice();
-    addAct(`Error: ${err.message}`, '#f85149');
-    notify('Mission Failed', err.message, '#f85149');
-    document.getElementById('top-dot').className = 'sdot dot-r';
-    document.getElementById('top-status').textContent = 'Error';
+      if(phase==='talking'){talkF++;if(talkF>TALK){phase='walking';stepI++;curMsg='';}}
+    } else {setTimeout(()=>{overlay.classList.remove('show');onDone();},300);return;}
+    drawManager(Math.round(mx),Math.round(my),phase==='walking');
+    if(phase==='talking'&&curMsg)drawBubble(Math.round(mx),Math.round(my),curMsg.split('\n'));
+    frame++;requestAnimationFrame(tick);
   }
-
-  btn.disabled = false;
-  document.getElementById('progress').classList.remove('on');
+  tick();
+}
+
+function openModal(){document.getElementById('modal-bg').classList.add('show');}
+function closeModal(){document.getElementById('modal-bg').classList.remove('show');}
+async function submitAgent(){
+  const key=document.getElementById('m-key').value.trim();
+  const name=document.getElementById('m-name').value.trim()||key;
+  const role=document.getElementById('m-role').value.trim()||'General purpose agent.';
+  const prov=document.getElementById('m-prov').value;
+  if(!key){alert('Key required');return;}
+  const r=await fetch('/api/agents/add',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key,name,role,provider:prov,models:PROV_MODELS[prov]})});
+  const d=await r.json();
+  if(d.success){agentDefs.push({key:d.agent.key,name:d.agent.name,role:d.agent.role});states[d.agent.key]={status:'idle',message:'',model:''};renderOffice();addAct(`Agent "${name}" added`,'#cc88ff');closeModal();['m-key','m-name','m-role'].forEach(id=>document.getElementById(id).value='');}
+}
+
+async function launchMission(){
+  const task=document.getElementById('task-input').value.trim();
+  if(!task)return;
+  const btn=document.getElementById('launch-btn');
+  btn.disabled=true;
+  document.getElementById('prog').classList.add('on');
+  document.getElementById('top-status').textContent='Running';
+  document.getElementById('top-dot').className='sdot da';
+  document.getElementById('floor-sub').textContent=`MISSION: "${task.substring(0,40).toUpperCase()}${task.length>40?'...':''}"`;
+  agentDefs.forEach(a=>{states[a.key]={status:'working',message:'',model:''};});
+  renderOffice();
+  agentDefs.forEach((a,i)=>{setTimeout(()=>{const ph=SPEECH[a.key]||['Working...'];showBubble(a.key,ph[Math.floor(Math.random()*ph.length)],2800);},i*500);});
+  addAct(`Mission: "${task.substring(0,40)}"`,'#4a9eff');
+  let apiData=null;
+  const fetchP=fetch('/api/mission',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({task})}).then(r=>r.json()).then(d=>{apiData=d;}).catch(e=>{apiData={error:e.message};});
+  const lower=task.toLowerCase();
+  let qd=[];
+  if(/informe|report|documento|word|escrib|redact/.test(lower))qd.push('writer');
+  if(/imagen|image|foto|visual|picture/.test(lower))qd.push('image_agent');
+  if(/analiz|review|evalua|revisar/.test(lower))qd.push('analyst');
+  if(!qd.length)qd=['developer','analyst'];
+  runWalkAnimation(task,qd,async()=>{
+    await fetchP;
+    if(!apiData||apiData.error){agentDefs.forEach(a=>{states[a.key]={status:'resting',message:apiData?.error||'Error',model:''};});renderOffice();addAct(`Error: ${apiData?.error}`,'#ff4455');notify('Mission Failed',apiData?.error||'Error','#ff4455');document.getElementById('top-dot').className='sdot dr';document.getElementById('top-status').textContent='Error';btn.disabled=false;document.getElementById('prog').classList.remove('on');return;}
+    let anyResting=false,hasDoc=false;
+    agentDefs.forEach(a=>{const r=apiData.results[a.key];if(!r){states[a.key]={status:'idle',message:'',model:''};return;}if(r.status==='resting')anyResting=true;const docFile=(a.key==='manager'&&apiData.doc_file)?apiData.doc_file:null;if(docFile)hasDoc=true;states[a.key]={status:r.status==='resting'?'resting':r.status==='idle'?'idle':'active',message:r.message||'',model:r.model||'',doc_file:docFile,_tw:true};});
+    renderOffice(apiData.events);
+    agentDefs.forEach((a,i)=>{if((states[a.key]||{}).status==='active'){setTimeout(()=>{showBubble(a.key,'Done ✓',2000);addAct(`${a.name}: complete`,'#00e5a0');},i*400);}});
+    if(hasDoc)addAct('Word document ready','#cc88ff');
+    mCount++;document.getElementById('mc-count').textContent=`MISSIONS: ${mCount}`;
+    history.push({task,time:new Date().toLocaleTimeString(),ok:!anyResting,doc_file:apiData.doc_file});updateHistory();
+    setTimeout(()=>notify(anyResting?'Mission Partial':hasDoc?'Document Ready':'Mission Complete',anyResting?'Some agents rate-limited.':hasDoc?'Download .docx below!':'All agents responded.',anyResting?'#ffcc44':hasDoc?'#cc88ff':'#00e5a0'),agentDefs.length*400+300);
+    document.getElementById('top-status').textContent=anyResting?'Partial':'Done';
+    document.getElementById('top-dot').className=`sdot ${anyResting?'da':'dg'}`;
+    document.getElementById('floor-sub').textContent=anyResting?'PARTIAL RESULTS':'MISSION COMPLETE';
+    btn.disabled=false;document.getElementById('prog').classList.remove('on');
+  });
 }
-
-document.getElementById('task-input').addEventListener('keydown', e => {
-  if (e.key === 'Enter') launchMission();
-});
-
-// INIT
-loadAgents();
-addAct('System online — agents ready', '#3fb950');
-addAct('Server rack nominal', '#58a6ff');
+document.getElementById('task-input').addEventListener('keydown',e=>{if(e.key==='Enter')launchMission();});
+loadAgents();addAct('System online','#00e5a0');addAct('Server rack nominal','#4a9eff');
 </script>
 </body>
 </html>