Upload 5 files

Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /app
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
-RUN mkdir -p templates
+RUN mkdir -p templates docs
 
 COPY templates/ templates/
 COPY main.py .

README.md

@@ -7,18 +7,25 @@ sdk: docker
 pinned: false
 ---
 
-# Mission Control AI
+# Mission Control AI v3
 
-Full-stack agent orchestration — FastAPI backend with direct LLM calls + pixel office frontend.
+Dynamic agent orchestration with document generation.
 
-## Setup
+## Secrets (Settings → Variables and secrets)
 
-Add these secrets in your Space settings (Settings → Variables and secrets):
-
-- `GOOGLE_API_KEY` — Google AI Studio key
-- `OPENROUTER_API_KEY` — OpenRouter key  
-- `GROQ_API_KEY` — Groq key (substitute/fallback)
+| Secret | Required | Source |
+|--------|----------|--------|
+| `GOOGLE_API_KEY` | Yes | aistudio.google.com |
+| `OPENROUTER_API_KEY` | Yes | openrouter.ai |
+| `GROQ_API_KEY` | Yes | console.groq.com |
+| `PEXELS_API_KEY` | Optional | pexels.com/api (free) |
+| `HF_TOKEN` | Optional | huggingface.co/settings/tokens |
 
 ## Health check
+Visit `/api/health` to verify all providers.
 
-Visit `/api/health` to verify all providers are configured.
+## Features
+- Manager dynamically delegates to Writer, ImageAgent, Analyst
+- Word document (.docx) generation with images
+- Add custom agents from the UI
+- Groq as automatic fallback when other providers fail

main.py

@@ -1,31 +1,42 @@
 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
+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=["*"])
 
-# ── ENV KEYS (set in HuggingFace Space Secrets) ──────────────────────────
-GOOGLE_API_KEY    = os.getenv("GOOGLE_API_KEY", "")
+GOOGLE_API_KEY     = os.getenv("GOOGLE_API_KEY", "")
 OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY", "")
-GROQ_API_KEY      = os.getenv("GROQ_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 ─────────────────────────────────────────────────────────────
 PROVIDERS = {
     "gemini": {
-        "name": "Google Gemini",
-        "type": "gemini",
-        "key": GOOGLE_API_KEY,
+        "name": "Google Gemini", "type": "gemini", "key": GOOGLE_API_KEY,
     },
     "openrouter": {
-        "name": "OpenRouter",
-        "type": "openai_compat",
-        "key": OPENROUTER_API_KEY,
+        "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",
@@ -33,165 +44,307 @@ PROVIDERS = {
         },
     },
     "groq": {
-        "name": "Groq",
-        "type": "openai_compat",
-        "key": GROQ_API_KEY,
+        "name": "Groq", "type": "openai_compat", "key": GROQ_API_KEY,
         "base_url": "https://api.groq.com/openai/v1/chat/completions",
         "headers": {},
     },
 }
 
-# ── AGENTS ────────────────────────────────────────────────────────────────
-AGENTS = [
+# ── DEFAULT AGENTS (can be extended via UI) ───────────────────────────────
+DEFAULT_AGENTS = [
     {
-        "key": "manager",
-        "name": "Manager",
-        "role": "Gerente de proyecto experto en coordinar equipos y planificar estrategias.",
-        "provider": "gemini",
-        "models": [
-            "gemini-2.5-flash-preview-04-17",
-            "gemini-2.0-flash",
-            "gemini-1.5-flash",
-        ],
+        "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",
+        "key": "developer", "name": "Developer", "provider": "openrouter",
         "role": "Programador senior especialista en crear aplicaciones y soluciones técnicas.",
-        "provider": "openrouter",
-        "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",
-            "qwen/qwen-2.5-72b-instruct:free",
-        ],
+        "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": "analyst",
-        "name": "Analyst",
-        "role": "Analista de negocios experto en evaluar viabilidad, riesgos y oportunidades.",
-        "provider": "openrouter",
-        "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",
-            "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"],
     },
 ]
 
-# Groq substitute — used when primary provider fails
-SUBSTITUTE = {
-    "provider": "groq",
-    "models": [
-        "llama-3.3-70b-versatile",
-        "llama3-70b-8192",
-        "gemma2-9b-it",
-        "mixtral-8x7b-32768",
-    ],
+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 = []
 
 
-# ── CALL GEMINI ────────────────────────────────────────────────────────────
+# ── 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": 1024, "temperature": 0.7},
+        "generationConfig": {"maxOutputTokens": 2048, "temperature": 0.7},
     }
-    async with httpx.AsyncClient(timeout=60) as client:
+    async with httpx.AsyncClient(timeout=90) as client:
         r = await client.post(url, json=payload)
         r.raise_for_status()
-        data = r.json()
-        return data["candidates"][0]["content"]["parts"][0]["text"]
+        return r.json()["candidates"][0]["content"]["parts"][0]["text"]
 
 
-# ── CALL OPENAI-COMPAT (OpenRouter / Groq) ────────────────────────────────
 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,
-    }
+    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": 1024,
-        "temperature": 0.7,
+        "messages": [{"role": "system", "content": system}, {"role": "user", "content": user}],
+        "max_tokens": 2048, "temperature": 0.7,
     }
-    async with httpx.AsyncClient(timeout=60) as client:
+    async with httpx.AsyncClient(timeout=90) as client:
         r = await client.post(base_url, json=payload, headers=headers)
         r.raise_for_status()
-        data = r.json()
-        return data["choices"][0]["message"]["content"]
-
-
-# ── RUN ONE AGENT (with model fallback + groq substitute) ─────────────────
-async def run_agent(agent: dict, task: str) -> dict:
-    prov_key  = agent["provider"]
-    provider  = PROVIDERS[prov_key]
-    models    = agent["models"]
-    system    = (
-        f"Eres {agent['name']}. {agent['role']} "
-        "Responde de forma concisa y profesional en español. "
-        "Máximo 3 párrafos."
-    )
+        return r.json()["choices"][0]["message"]["content"]
+
 
-    # Try each model of primary provider
+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 models:
+
+    for model in agent["models"]:
         try:
             if provider["type"] == "gemini":
-                text = await call_gemini(model, system, task, provider["key"])
+                return await call_gemini(model, system, task, provider["key"])
             else:
-                text = await call_openai_compat(
+                return await call_openai_compat(
                     provider["base_url"], model, system, task,
-                    provider["key"], provider.get("headers", {})
-                )
-            return {
-                "status":   "active",
-                "message":  text.strip(),
-                "model":    model,
-                "provider": provider["name"],
-            }
+                    provider["key"], provider.get("headers", {}))
         except Exception as e:
             last_err = str(e)
-            continue
 
-    # Primary failed — try Groq substitute
-    groq_prov = PROVIDERS["groq"]
-    if groq_prov["key"]:
-        for model in SUBSTITUTE["models"]:
+    # Groq fallback
+    if GROQ_API_KEY:
+        groq = PROVIDERS["groq"]
+        for m in SUBSTITUTE_MODELS["groq"]:
             try:
-                text = await call_openai_compat(
-                    groq_prov["base_url"], model, system, task,
-                    groq_prov["key"], {}
-                )
-                return {
-                    "status":   "active",
-                    "message":  text.strip(),
-                    "model":    f"{model} (via Groq substitute)",
-                    "provider": "Groq",
-                }
+                return await call_openai_compat(
+                    groq["base_url"], m, system, task, groq["key"], {})
             except Exception as e:
                 last_err = str(e)
-                continue
 
-    # All failed
-    return {
-        "status":  "resting",
-        "message": f"All providers unavailable. Last error: {last_err}",
-        "model":   "",
-        "reason":  "all_providers_failed",
-    }
+    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 ─────────────────────────────────────────────────────────────────
@@ -202,7 +355,35 @@ async def root():
 
 @app.get("/api/agents")
 async def get_agents():
-    return {"agents": [{"key": a["key"], "name": a["name"], "role": a["role"]} for a in 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")
@@ -210,6 +391,18 @@ 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()
@@ -218,39 +411,168 @@ async def run_mission(request: Request):
         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}")
 
-    # Run all agents in parallel
-    tasks = [run_agent(agent, task) for agent in AGENTS]
-    results_list = await asyncio.gather(*tasks, return_exceptions=True)
+        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}")
 
-    results = {}
-    for agent, result in zip(AGENTS, results_list):
-        if isinstance(result, Exception):
-            results[agent["key"]] = {
-                "status": "resting", "message": str(result), "model": ""
-            }
         else:
-            results[agent["key"]] = result
+            # 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": ""}
 
-    # Simple final summary from manager response
-    manager_msg = results.get("manager", {}).get("message", "")
-    final = manager_msg[:200] + "..." if len(manager_msg) > 200 else manager_msg
+    final = results.get("manager", {}).get("message", "")[:300]
 
     entry = {
-        "id":         len(mission_history) + 1,
-        "task":       task,
+        "id": len(mission_history) + 1,
+        "task": task,
         "started_at": started_at,
-        "ended_at":   datetime.now().isoformat(),
-        "results":    results,
-        "final":      final,
+        "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,
+        "success": True, "task": task,
+        "results": results, "final": final,
+        "doc_file": doc_file, "events": events,
         "mission_id": entry["id"],
     })
 
@@ -260,8 +582,10 @@ async def health():
     return {
         "status": "ok",
         "providers": {
-            "gemini":     "configured" if GOOGLE_API_KEY     else "missing key",
-            "openrouter": "configured" if OPENROUTER_API_KEY else "missing key",
-            "groq":       "configured" if GROQ_API_KEY       else "missing key",
+            "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)",
         }
     }

requirements.txt

@@ -2,3 +2,5 @@ fastapi==0.115.0
 uvicorn==0.30.6
 httpx==0.27.2
 python-multipart==0.0.9
+python-docx==1.1.2
+Pillow==10.4.0

templates/index.html

@@ -8,788 +8,509 @@
 @import url('https://fonts.googleapis.com/css2?family=VT323&family=IBM+Plex+Mono:wght@400;500&display=swap');
 
 :root {
-  --floor: #2a3142;
-  --wall-dark: #1e2535;
-  --wall-mid: #252d3e;
-  --wall-light: #2d3750;
-  --carpet: #1a2040;
-  --carpet2: #1d2347;
-  --accent: #4a9eff;
-  --green: #4ade80;
-  --amber: #fbbf24;
-  --red: #f87171;
-  --text: #c8d4e8;
-  --text-dim: #5a6a8a;
-  --border: #2d3f5a;
-  --panel: #111827;
-  --wood: #8b6914;
-  --wood-light: #a07820;
-  --metal: #4a5568;
-  --metal-light: #6b7280;
-  --glass: rgba(74,158,255,0.15);
-  --server-rack: #1a1f2e;
-}
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  background: var(--panel);
-  font-family: 'IBM Plex Mono', monospace;
-  color: var(--text);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
+  --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;
+}
+
+*,*::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: #0d1117;
-  border-bottom: 2px solid var(--border);
-  padding: 0 20px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 50;
-}
+.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}
+.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}
 
-.tb-logo {
-  display: flex; align-items: center; gap: 10px;
-}
-
-.tb-logo-icon {
-  width: 28px; height: 28px;
-  background: var(--accent);
-  display: flex; align-items: center; justify-content: center;
-  font-family: 'VT323', monospace; font-size: 16px; color: #fff;
-  image-rendering: pixelated;
-}
-
-.tb-title {
-  font-family: 'VT323', monospace;
-  font-size: 22px;
-  color: var(--accent);
-  letter-spacing: 2px;
-}
-
-.tb-version {
-  font-size: 10px;
-  color: var(--text-dim);
-  margin-left: 4px;
-  letter-spacing: 1px;
-}
-
-.tb-right {
-  display: flex; align-items: center; gap: 20px;
-}
-
-.tb-stat {
-  font-size: 11px;
-  color: var(--text-dim);
-  display: flex; align-items: center; gap: 5px;
-}
-
-.tb-stat .dot {
-  width: 6px; height: 6px; border-radius: 50%;
-}
-
-.dot-green  { background: var(--green); animation: pulse-dot 2s ease infinite; }
-.dot-amber  { background: var(--amber); animation: pulse-dot 1.2s ease infinite; }
-.dot-red    { background: var(--red); animation: blink-dot .5s step-end infinite; }
-.dot-dim    { background: var(--text-dim); }
-
-@keyframes pulse-dot {
-  0%,100% { opacity:1; box-shadow:0 0 0 0 currentColor; }
-  50% { box-shadow: 0 0 0 4px transparent; }
-}
-@keyframes blink-dot { 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 ── */
-.mission-bar {
-  background: #0d1117;
-  border-bottom: 1px solid var(--border);
-  padding: 10px 20px;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.mission-input {
-  flex: 1;
-  height: 36px;
-  background: var(--wall-dark);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-family: 'IBM Plex Mono', monospace;
-  font-size: 13px;
-  padding: 0 12px;
-  outline: none;
-  transition: border-color .15s;
-}
-
-.mission-input:focus { border-color: var(--accent); }
-.mission-input::placeholder { color: var(--text-dim); }
-
-.launch-btn {
-  height: 36px;
-  padding: 0 18px;
-  background: var(--accent);
-  border: none;
-  color: #fff;
-  font-family: 'VT323', monospace;
-  font-size: 18px;
-  letter-spacing: 2px;
-  cursor: pointer;
-  transition: background .15s, transform .1s;
-  display: flex; align-items: center; gap: 6px;
-}
-
-.launch-btn:hover { background: #3a8eef; }
-.launch-btn:active { transform: scale(.97); }
-.launch-btn:disabled { background: #2a4a6a; cursor: not-allowed; }
-
-.mission-count {
-  font-family: 'VT323', monospace;
-  font-size: 16px;
-  color: var(--text-dim);
-  white-space: nowrap;
-}
-
-/* ── PROGRESS ── */
-.progress-strip {
-  height: 2px;
-  background: var(--wall-dark);
-  overflow: hidden;
-  display: none;
-}
-.progress-strip.active { display: block; }
-.progress-strip::after {
-  content: '';
-  display: block;
-  height: 100%;
-  width: 30%;
-  background: var(--accent);
-  animation: progress-run 1.4s ease-in-out infinite;
-}
-@keyframes progress-run { 0%{margin-left:-30%} 100%{margin-left:110%} }
+.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)}
+.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 260px;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-@media(max-width:900px) {
-  .main { grid-template-columns: 1fr; }
-  .sidebar { display: none; }
-}
+.main{display:grid;grid-template-columns:1fr 280px;flex:1;min-height:0;overflow:hidden}
+@media(max-width:900px){.main{grid-template-columns:1fr}.sidebar{display:none}}
 
-/* ── OFFICE FLOOR ── */
-.office-floor {
-  background: var(--floor);
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 16px;
-  position: relative;
+/* ── OFFICE ── */
+.office{
+  background:var(--carpet);
+  overflow-y:auto; padding:16px; position:relative;
 }
-
-/* Floor tile pattern */
-.office-floor::before {
-  content: '';
-  position: fixed;
-  inset: 0;
+.office::before{
+  content:''; position:fixed; inset:0;
   background-image:
-    linear-gradient(var(--carpet2) 1px, transparent 1px),
-    linear-gradient(90deg, var(--carpet2) 1px, transparent 1px);
-  background-size: 32px 32px;
-  opacity: .25;
-  pointer-events: none;
+    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: 14px;
-  color: var(--text-dim);
-  letter-spacing: 3px;
-  margin-bottom: 14px;
-  text-transform: uppercase;
+.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 ── */
-.office-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  position: relative;
-  z-index: 1;
-}
-
-@media(max-width:1100px) { .office-grid { grid-template-columns: repeat(2,1fr); } }
-@media(max-width:700px)  { .office-grid { grid-template-columns: 1fr; } }
-
-/* ── ROOM CARD ── */
-.room {
-  background: var(--wall-mid);
-  border: 2px solid var(--border);
-  position: relative;
-  overflow: hidden;
-  transition: border-color .3s;
-  min-height: 240px;
-  display: flex;
-  flex-direction: column;
-}
-
-.room.active   { border-color: var(--accent); }
-.room.resting  { border-color: var(--amber); }
-.room.done     { border-color: var(--green); }
-
-/* Room wall top */
-.room-wall {
-  background: var(--wall-light);
-  height: 32px;
-  border-bottom: 2px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  flex-shrink: 0;
-}
-
-.room-name {
-  font-family: 'VT323', monospace;
-  font-size: 16px;
-  letter-spacing: 2px;
-  color: var(--text);
-}
-
-.room-badge {
-  font-family: 'VT323', monospace;
-  font-size: 13px;
-  padding: 1px 8px;
-  letter-spacing: 1px;
-}
-
-.badge-idle    { color: var(--text-dim); border: 1px solid var(--text-dim); }
-.badge-active  { color: var(--accent);   border: 1px solid var(--accent); animation: badge-pulse 1s ease infinite; }
-.badge-done    { color: var(--green);    border: 1px solid var(--green); background: rgba(74,222,128,.1); }
-.badge-resting { color: var(--amber);    border: 1px solid var(--amber); }
-.badge-error   { color: var(--red);      border: 1px solid var(--red); }
-
-@keyframes badge-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
-
-/* Room scene */
-.room-scene {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  background: var(--carpet);
-  display: flex;
-  align-items: flex-end;
-  padding: 8px;
-  gap: 10px;
-}
-
-/* carpet checker */
-.room-scene::before {
-  content: '';
-  position: absolute; inset: 0;
+.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;
+}
+.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,.02) 25%, transparent 25%),
-    linear-gradient(-45deg, rgba(255,255,255,.02) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.02) 75%),
-    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.02) 75%);
-  background-size: 16px 16px;
-  pointer-events: none;
-}
-
-/* ── PIXEL FURNITURE ── */
-
-/* Desk */
-.pixel-desk {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 3px;
-  width: 110px;
-}
-
-.desk-top {
-  width: 100%;
-  height: 8px;
-  background: var(--wood-light);
-  border-top: 2px solid #c09828;
-  position: relative;
-}
-
-.desk-top::after {
-  content: '';
-  position: absolute;
-  bottom: -2px; left: 0; right: 0;
-  height: 2px;
-  background: var(--wood);
-}
-
-.desk-legs {
-  width: 90%;
-  height: 22px;
-  background: var(--wood);
-  display: flex;
-  justify-content: space-between;
-  padding: 0 4px;
-}
-
-.desk-leg {
-  width: 6px;
-  height: 100%;
-  background: #6b4e0a;
-}
-
-.desk-monitor {
-  position: absolute;
-  bottom: 36px;
-  left: 12px;
-  width: 56px;
-  height: 42px;
-  background: #0d1117;
-  border: 2px solid var(--metal);
-  border-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.monitor-screen {
-  flex: 1;
-  background: #050a0f;
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  position: relative;
-  overflow: hidden;
-}
-
-.monitor-base {
-  height: 5px;
-  background: var(--metal);
-  position: relative;
-}
-
-.monitor-base::after {
-  content: '';
-  position: absolute;
-  bottom: -3px; left: 50%; transform: translateX(-50%);
-  width: 16px; height: 3px;
-  background: var(--metal-light);
-}
-
-/* Screen states */
-.screen-line {
-  height: 3px;
-  background: var(--green);
-  border-radius: 1px;
-  opacity: .6;
-}
-
-.screen-line.scanning {
-  width: 10%;
-  animation: scan-right .6s ease-in-out infinite alternate;
-}
-
-@keyframes scan-right { 0%{width:10%} 100%{width:85%} }
-
-.screen-cursor-blink {
-  position: absolute;
-  bottom: 3px; left: 4px;
-  width: 4px; height: 8px;
-  background: var(--green);
-  animation: blink-cur .7s step-end infinite;
-}
-
-@keyframes blink-cur { 0%,100%{opacity:1} 50%{opacity:0} }
-
-.think-dots {
-  display: flex; gap: 3px;
-  position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
-}
-
-.think-dot {
-  width:4px; height:4px; border-radius:50%;
-  background: var(--accent);
-  animation: think .8s ease-in-out infinite;
-}
-.think-dot:nth-child(2){animation-delay:.15s}
-.think-dot:nth-child(3){animation-delay:.3s}
-@keyframes think { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-5px);opacity:1} }
-
-/* Keyboard */
-.desk-keyboard {
-  position: absolute;
-  bottom: 30px; left: 72px;
-  width: 30px; height: 8px;
-  background: var(--metal-light);
-  border: 1px solid var(--metal);
-  display: flex; gap: 1px; padding: 1px 2px; align-items: center;
-}
-.kbd-key { flex:1; height:4px; background: var(--metal); }
-
-/* Coffee mug */
-.coffee {
-  position: absolute;
-  bottom: 34px; right: 14px;
-}
-
-/* Chair */
-.chair {
-  position: absolute;
-  bottom: 0;
-  right: 20px;
-}
-
-/* OOO overlay */
-.ooo-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(26,20,0,.65);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  backdrop-filter: blur(1px);
-}
-
-.ooo-text {
-  font-family: 'VT323', monospace;
-  font-size: 18px;
-  color: var(--amber);
-  letter-spacing: 2px;
-}
-
-.ooo-sub {
-  font-size: 10px;
-  color: rgba(251,191,36,.6);
-  font-family: 'IBM Plex Mono', monospace;
-}
-
-/* ── SERVER RACK (always animated) ── */
-.server-rack {
-  background: var(--server-rack);
-  border: 2px solid #2a3550;
-  padding: 6px 5px;
-  width: 44px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  align-self: flex-end;
-  margin-bottom: 8px;
-  position: relative;
-}
-
-.server-rack::before {
-  content: 'SRV';
-  position: absolute;
-  top: -20px; left: 0; right: 0;
-  text-align: center;
-  font-family: 'VT323', monospace;
-  font-size: 11px;
-  color: var(--text-dim);
-  letter-spacing: 1px;
-}
-
-.rack-unit {
-  height: 10px;
-  background: #1a2235;
-  border: 1px solid #2a3550;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 3px;
-}
-
-.rack-led {
-  width: 4px; height: 4px;
-  border-radius: 50%;
-}
-
-.led-green { background: var(--green); animation: led-blink var(--d, 1.5s) ease-in-out infinite; }
-.led-amber { background: var(--amber); animation: led-blink var(--d, 2.1s) ease-in-out infinite; }
-.led-blue  { background: var(--accent); animation: led-blink var(--d, .9s) ease-in-out infinite; }
-.led-off   { background: #1a2235; border: 1px solid #2a3550; }
-
-@keyframes led-blink { 0%,100%{opacity:.3} 50%{opacity:1; box-shadow:0 0 4px currentColor} }
-
-.rack-bar { flex:1; height:2px; background:#2a3550; }
-.rack-bar.active { background:#4a9eff; animation:rack-activity .4s ease-in-out infinite alternate; }
-@keyframes rack-activity { 0%{opacity:.3} 100%{opacity:1} }
-
-/* ── PIXEL PERSON ── */
-.pixel-person { flex-shrink:0; image-rendering:pixelated; }
-
-/* ── RESULT AREA ── */
-.room-result {
-  background: #0d1117;
-  border-top: 2px solid var(--border);
-  padding: 10px 12px;
-  min-height: 68px;
-  flex-shrink: 0;
-}
-
-.result-placeholder {
-  font-size: 11px;
-  color: var(--text-dim);
-  font-style: italic;
-}
-
-.result-content {
-  font-size: 11px;
-  color: var(--text);
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.result-model {
-  margin-top: 6px;
-  font-size: 10px;
-  color: var(--text-dim);
-  display: flex; align-items: center; gap: 5px;
-}
-
-/* ── SERVER ROOM (bottom span) ── */
-.server-room {
-  grid-column: 1 / -1;
-  background: var(--wall-dark);
-  border: 2px solid var(--border);
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-height: 80px;
-  position: relative;
-  overflow: hidden;
-}
-
-.server-room::before {
-  content: 'SERVER ROOM';
-  position: absolute;
-  top: 8px; left: 16px;
-  font-family: 'VT323', monospace;
-  font-size: 13px;
-  color: var(--text-dim);
-  letter-spacing: 3px;
-}
-
-.server-room-racks {
-  display: flex;
-  gap: 10px;
-  margin-top: 16px;
-  flex-wrap: wrap;
-}
-
-.big-rack {
-  background: var(--server-rack);
-  border: 2px solid #2a3550;
-  padding: 5px;
-  width: 48px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.big-rack-unit {
-  height: 8px;
-  background: #111827;
-  border: 1px solid #1e2a40;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 2px;
-}
-
-.server-status {
-  margin-left: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  font-size: 10px;
-  color: var(--text-dim);
-}
-
-.srv-stat {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-/* ── NOTIFICATION ── */
-.notif {
-  position: fixed;
-  top: 58px; right: 16px;
-  background: #0d1117;
-  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;
-  font-size: 12px;
-  box-shadow: 0 8px 24px rgba(0,0,0,.4);
-}
-
-.notif.show { transform: translateX(0); }
-.notif-title { font-family:'VT323',monospace; font-size:18px; color:var(--green); letter-spacing:1px; }
-.notif-msg   { color:var(--text-dim); margin-top:2px; line-height:1.4; }
+    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}}
+@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)}
+
+.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;
+}
+@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);
+}
+.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;
+}
+.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;
+}
+.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}
+.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;
+}
+.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: #0d1117;
-  border-left: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.sb-section { border-bottom: 1px solid var(--border); flex-shrink:0; }
-
-.sb-title {
-  font-family: 'VT323', monospace;
-  font-size: 14px;
-  letter-spacing: 3px;
-  color: var(--text-dim);
-  padding: 10px 14px 8px;
-  border-bottom: 1px solid var(--border);
-}
-
-.activity-scroll {
-  flex:1;
-  overflow-y: auto;
-  max-height: 280px;
-}
-
-.activity-item {
-  padding: 7px 14px;
-  border-bottom: 1px solid rgba(45,63,90,.4);
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-}
-
-.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(--text-dim); margin-top:1px; }
-
-.history-scroll { overflow-y:auto; max-height:220px; }
-
-.hist-item {
-  padding: 8px 14px;
-  border-bottom: 1px solid rgba(45,63,90,.4);
-  cursor: pointer;
-  transition: background .1s;
-}
-.hist-item:hover { background: var(--wall-dark); }
-
-.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(--text-dim); margin-top:2px; display:flex; gap:8px; }
-
-/* scrollbar */
-::-webkit-scrollbar { width:4px; }
-::-webkit-scrollbar-track { background:transparent; }
-::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
+.sidebar{background:var(--surface);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)}
+.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-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-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}
 </style>
 </head>
 <body>
 
-<!-- TOPBAR -->
 <header class="topbar">
-  <div class="tb-logo">
-    <div class="tb-logo-icon">MC</div>
-    <span class="tb-title">MISSION CONTROL</span>
-    <span class="tb-version">v4.0</span>
+  <div class="tb-left">
+    <div class="tb-logo">MC</div>
+    <span class="tb-title">MISSION CONTROL AI</span>
   </div>
   <div class="tb-right">
-    <div class="tb-stat"><div class="dot dot-green"></div><span id="top-active">0 active</span></div>
-    <div class="tb-stat"><div class="dot dot-dim" id="top-dot2"></div><span id="top-status">Idle</span></div>
+    <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="clock" id="clock">00:00:00</div>
   </div>
 </header>
 
-<div class="progress-strip" id="progress"></div>
+<div class="progress" id="progress"></div>
 
-<!-- MISSION BAR -->
-<div class="mission-bar">
-  <input class="mission-input" id="task-input" placeholder="Enter mission for agents..." autocomplete="off"/>
-  <button class="launch-btn" id="launch-btn" onclick="launchMission()">&#9658; LAUNCH</button>
-  <span class="mission-count" id="mission-count">MISSIONS: 0</span>
+<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"/>
+  <button class="launch" id="launch-btn" onclick="launchMission()">&#9658; LAUNCH</button>
+  <button class="add-agent-btn" onclick="openModal()">+ Add Agent</button>
+  <span class="mc" id="mc-count">MISSIONS: 0</span>
 </div>
 
-<!-- MAIN -->
 <div class="main">
-  <div class="office-floor">
-    <div class="floor-label">&#9632; Operations Floor</div>
-    <div class="office-grid" id="office-grid">
-      <!-- rooms injected by JS -->
+  <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>
+    <div class="ogrid" id="ogrid"></div>
   </div>
 
   <aside class="sidebar">
-    <div class="sb-section">
-      <div class="sb-title">ACTIVITY LOG</div>
-      <div class="activity-scroll" id="activity-log"></div>
+    <div class="sb-sec">
+      <div class="sb-title">ACTIVITY</div>
+      <div class="act-scroll" id="act-log"></div>
     </div>
-    <div class="sb-section">
-      <div class="sb-title">MISSION HISTORY</div>
-      <div class="history-scroll" id="history-log">
-        <div style="padding:14px;font-size:11px;color:var(--text-dim);text-align:center">No missions yet</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>
   </aside>
 </div>
 
+<!-- ADD AGENT MODAL -->
+<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>
+  </div>
+</div>
+
 <!-- NOTIFICATION -->
 <div class="notif" id="notif">
-  <div class="notif-title" id="notif-title">Mission Complete</div>
-  <div class="notif-msg" id="notif-msg"></div>
+  <div class="notif-t" id="notif-t">Mission Complete</div>
+  <div class="notif-m" id="notif-m"></div>
 </div>
 
 <script>
-const AGENTS = [
-  { key:'manager',   name:'MANAGER',   role:'Project Coordinator', color:'#4a9eff' },
-  { key:'developer', name:'DEVELOPER', role:'Senior Engineer',     color:'#4ade80' },
-  { key:'analyst',   name:'ANALYST',   role:'Business Analyst',    color:'#fbbf24' },
-];
+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:   ['Coordinating team...','Reviewing scope...','Briefing Developer...','Checking Analyst...'],
-  developer: ['Building solution...','Writing code...','Testing logic...','Manager approved!'],
-  analyst:   ['Analyzing data...','Evaluating risks...','Sending report...','Processing...'],
+  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...'],
 };
 
-let states = {};
-let activity = [];
-let history  = [];
-let missionCount = 0;
-let speechTimers = {};
-let interactionTimers = [];
+const COLORS = {
+  manager:'#58a6ff', developer:'#3fb950', analyst:'#d29922',
+  writer:'#bc8cff', image_agent:'#f78166',
+};
 
-AGENTS.forEach(a => { states[a.key] = { status:'idle', message:'', model:'' }; });
+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:'' };
+  });
+  renderOffice();
+}
 
 // CLOCK
 setInterval(() => {
@@ -798,27 +519,19 @@ setInterval(() => {
     [n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
 }, 1000);
 
-// PIXEL PERSON SVG
-function pixelPerson(color, status) {
-  const op    = status === 'resting' ? '0.2' : '1';
-  const shirt = color;
-  const anim  = status === 'active' && Math.random() > .5
-    ? 'style="animation:arm-idle 3s ease-in-out infinite"'
+// ── 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"'
     : '';
-  const wAnim = status === 'working'
-    ? 'style="animation:arm-type .28s ease-in-out infinite alternate;transform-origin:13px 18px"'
-    : anim;
-
   return `<svg viewBox="0 0 32 52" width="32" height="52" style="image-rendering:pixelated;display:block;opacity:${op}">
-    <style>
-      @keyframes arm-type{0%{transform:translateY(0)rotate(0)}100%{transform:translateY(2px)rotate(-5deg)}}
-      @keyframes arm-idle{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
-    </style>
-    <rect x="11" y="0"  w="10" width="10" height="3"  fill="#111"/>
-    <rect x="9"  y="3"  width="14" height="2"  fill="#111"/>
-    <rect x="9"  y="3"  width="2"  height="5"  fill="#111"/>
-    <rect x="21" y="3"  width="2"  height="5"  fill="#111"/>
-    <rect x="9"  y="5"  width="14" height="11" fill="#f0c8a0"/>
+    <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"/>
@@ -826,383 +539,362 @@ function pixelPerson(color, status) {
     <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="13" width="6"  height="1"  fill="#c88060" opacity=".5"/>
-    <rect x="9"  y="16" width="14" height="11" fill="${shirt}" opacity=".9"/>
-    <rect x="11" y="16" width="10" height="3"  fill="${shirt}"/>
-    <g ${wAnim}>
-      <rect x="4"  y="17" width="5"  height="8"  fill="${shirt}" opacity=".9"/>
-      <rect x="23" y="17" width="5"  height="8"  fill="${shirt}" opacity=".9"/>
-      <rect x="3"  y="24" width="5"  height="3"  fill="#f0c8a0"/>
-      <rect x="24" y="24" width="5"  height="3"  fill="#f0c8a0"/>
+    <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="27" width="14" height="12" fill="#1e2535"/>
-    <rect x="13" y="39" width="5"  height="7"  fill="#1e2535"/>
-    <rect x="9"  y="39" width="5"  height="7"  fill="#1e2535"/>
-    <rect x="7"  y="46" width="7"  height="4"  fill="#111"/>
-    <rect x="18" y="46" width="7"  height="4"  fill="#111"/>
+    <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>`;
 }
 
-// CHAIR SVG
-function chairSVG(isEmpty) {
-  const c = isEmpty ? '#1a2235' : '#2a3550';
-  const s = isEmpty ? '#111827' : '#1e2a40';
-  return `<svg viewBox="0 0 28 32" width="28" height="32" style="image-rendering:pixelated;display:block">
-    <rect x="4"  y="4"  width="20" height="14" fill="${c}" rx="1"/>
-    <rect x="5"  y="5"  width="18" height="12" fill="${s}"/>
-    <rect x="4"  y="18" width="20" height="4"  fill="${c}"/>
-    <rect x="4"  y="0"  width="4"  height="18" fill="${c}"/>
-    <rect x="6"  y="22" width="3"  height="8"  fill="${c}"/>
-    <rect x="19" y="22" width="3"  height="8"  fill="${c}"/>
-    <rect x="4"  y="29" width="5"  height="3"  fill="#111"/>
-    <rect x="19" y="29" width="5"  height="3"  fill="#111"/>
+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>`;
 }
 
-// COFFEE SVG
 function coffeeSVG() {
-  return `<svg viewBox="0 0 14 14" width="14" height="14" style="image-rendering:pixelated;display:block">
-    <rect x="2" y="4"  width="8"  height="8"  fill="#5c3a1e"/>
-    <rect x="2" y="4"  width="8"  height="2"  fill="#7a4e2a"/>
-    <rect x="3" y="5"  width="6"  height="1"  fill="#9a6840" opacity=".4"/>
-    <rect x="10" y="6" width="2"  height="4"  fill="#5c3a1e"/>
-    <rect x="1" y="12" width="10" height="2"  fill="#4a2e14"/>
-    <rect x="4" y="2"  width="1"  height="2"  fill="#888" opacity=".4"/>
-    <rect x="7" y="1"  width="1"  height="3"  fill="#888" opacity=".4"/>
+  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>`;
 }
 
-// SCREEN CONTENT
-function screenContent(status) {
-  if (status === 'working') {
-    return `<div class="think-dots">
-      <div class="think-dot"></div>
-      <div class="think-dot"></div>
-      <div class="think-dot"></div>
-    </div>`;
-  }
-  if (status === 'active' || status === 'done') {
-    return `
-      <div class="screen-line" style="width:80%"></div>
-      <div class="screen-line" style="width:55%;opacity:.5"></div>
-      <div class="screen-line" style="width:70%;opacity:.4"></div>
-      <div class="screen-line" style="width:40%;opacity:.3"></div>
-      <div class="screen-cursor-blink"></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:#fbbf2466;letter-spacing:1px">AWAY</div>`;
-  }
-  return `
-    <div class="screen-line" style="width:50%;opacity:.2"></div>
-    <div class="screen-line" style="width:35%;opacity:.15"></div>`;
-}
-
-// SERVER RACK
-function serverRackHTML() {
+function serverRack() {
   const units = [
-    { l1:'green', l2:'green', d1:'1.1s', d2:'1.7s', active:true  },
-    { l1:'amber', l2:'blue',  d1:'2.3s', d2:'.8s',  active:true  },
-    { l1:'green', l2:'off',   d1:'1.8s', d2:null,   active:false },
-    { l1:'blue',  l2:'green', d1:'.7s',  d2:'2.1s', active:true  },
-    { l1:'amber', l2:'amber', d1:'1.4s', d2:'1.9s', active:false },
-    { l1:'green', l2:'blue',  d1:'2.6s', d2:'.6s',  active:true  },
+    ['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(u => `
-    <div class="rack-unit">
-      <div class="rack-led led-${u.l1}" style="--d:${u.d1}"></div>
-      ${u.l2 !== 'off' ? `<div class="rack-led led-${u.l2}" style="--d:${u.d2}"></div>` : '<div class="rack-led led-off"></div>'}
-      <div class="rack-bar ${u.active ? 'active' : ''}"></div>
-    </div>`).join('');
+  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 HTML
+// ── BUILD ROOM ─────────────────────────────────────────────────────────────
 function buildRoom(agent) {
-  const st     = states[agent.key];
+  const st     = states[agent.key] || { status:'idle', message:'', model:'' };
   const status = st.status;
-  const isEmpty = status === 'resting';
-
-  const cardCls  = `room ${status === 'working' ? 'active' : status === 'active' ? 'done' : status === 'resting' ? 'resting' : ''}`;
-  const badgeLbl = { idle:'IDLE', working:'PROCESSING', active:'DONE', resting:'AWAY', error:'ERROR' }[status] || 'IDLE';
-  const badgeCls = `room-badge badge-${status === 'active' ? 'done' : status}`;
-
-  const resultHTML = status === 'idle'
-    ? `<div class="result-placeholder">Waiting for mission...</div>`
-    : status === 'working'
-    ? `<div class="result-placeholder" style="color:var(--accent)">Processing...</div>`
-    : status === 'resting'
-    ? `<div class="result-placeholder" style="color:var(--amber)">Rate limit — back in ~1-2 min</div>`
-    : `<div class="result-content" id="result-${agent.key}"></div>
-       ${st.model ? `<div class="result-model"><div class="dot dot-green" style="width:5px;height:5px;margin:0"></div>${st.model}</div>` : ''}`;
-
-  return `<div class="${cardCls}" id="room-${agent.key}">
-    <div class="room-wall">
-      <span class="room-name" style="color:${agent.color}">${agent.name}</span>
-      <span class="${badgeCls}">${badgeLbl}</span>
-    </div>
-
-    <div class="room-scene" id="scene-${agent.key}">
-      <!-- server rack always animated -->
-      <div class="server-rack">${serverRackHTML()}</div>
+  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>` : ''}`;
+  }
 
-      <!-- desk with monitor -->
-      <div style="position:relative;flex:1;height:100%;display:flex;align-items:flex-end">
-        <div class="desk-monitor" id="monitor-${agent.key}">
-          <div class="monitor-screen">${screenContent(status)}</div>
-          <div class="monitor-base"></div>
-        </div>
-        <div class="desk-keyboard"><div class="kbd-key"></div><div class="kbd-key"></div><div class="kbd-key"></div></div>
-        <div class="coffee">${coffeeSVG()}</div>
-        <div class="pixel-desk">
-          <div class="desk-top"></div>
-          <div class="desk-legs"><div class="desk-leg"></div><div class="desk-leg"></div></div>
+  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>
+    <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="chair" style="position:absolute;bottom:0;right:6px">${chairSVG(isEmpty)}</div>
-        ${!isEmpty
-          ? `<div style="position:absolute;bottom:28px;left:50%;transform:translateX(-50%)">${pixelPerson(agent.color, status)}</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>
-
-      ${isEmpty
-        ? `<div class="ooo-overlay">
-             <div class="ooo-text">☕ AWAY</div>
-             <div class="ooo-sub">Rate limited — available soon</div>
-           </div>`
-        : ''}
-
-      <!-- speech bubble -->
-      <div id="bubble-${agent.key}" style="
-        position:absolute;top:8px;left:54px;
-        background:#0d1117;border:1px solid var(--border);
-        padding:4px 8px;font-size:10px;color:var(--text);max-width:140px;
-        box-shadow:0 4px 12px rgba(0,0,0,.4);line-height:1.3;
-        opacity:0;transform:translateY(-4px);
-        transition:opacity .3s,transform .3s;pointer-events:none;
-        font-family:'IBM Plex Mono',monospace;
-        z-index:10;
-      "></div>
-    </div>
-
-    <div class="room-result" id="result-area-${agent.key}">
-      ${resultHTML}
+      <div style="position:absolute;bottom:0;right:4px;z-index:1">${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>` : ''}
+      <div class="bubble" id="bubble-${agent.key}"></div>
     </div>
+    <div class="rresult" id="result-area-${agent.key}">${resultHTML}</div>
   </div>`;
 }
 
-// SERVER ROOM (bottom)
 function buildServerRoom() {
-  const racks = Array.from({length:6}, (_,i) => {
-    const units = Array.from({length:5}, (_,j) => {
-      const colors = ['green','blue','amber','green','blue'];
-      const delays = [1.1,2.3,.8,1.7,.5];
-      return `<div class="big-rack-unit">
-        <div class="rack-led led-${colors[j]}" style="--d:${delays[j]}s"></div>
-        <div class="rack-bar active"></div>
-      </div>`;
-    }).join('');
+  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="server-room-racks">${racks}</div>
-    <div class="server-status">
-      <div class="srv-stat"><div class="dot dot-green"></div><span>n8n online</span></div>
-      <div class="srv-stat"><div class="dot dot-green"></div><span>Replit API</span></div>
-      <div class="srv-stat"><div class="dot dot-amber" id="srv-llm"></div><span id="srv-llm-label">LLM providers</span></div>
+    <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() {
-  const grid = document.getElementById('office-grid');
-  grid.innerHTML = AGENTS.map(buildRoom).join('') + buildServerRoom();
-  const active = AGENTS.filter(a => states[a.key].status === 'working').length;
+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>`;
+  }
+
+  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=16) {
-  el.textContent = '';
-  let i = 0;
+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 BUBBLE
+// SPEECH
 function showBubble(key, text, ms=2800) {
   const b = document.getElementById(`bubble-${key}`);
   if (!b) return;
-  if (speechTimers[key]) clearTimeout(speechTimers[key]);
+  if (bubbleT[key]) clearTimeout(bubbleT[key]);
   b.textContent = text;
-  b.style.opacity = '1';
-  b.style.transform = 'translateY(0)';
-  speechTimers[key] = setTimeout(() => {
-    b.style.opacity = '0';
-    b.style.transform = 'translateY(-4px)';
-  }, ms);
+  b.classList.add('show');
+  bubbleT[key] = setTimeout(() => b.classList.remove('show'), ms);
 }
 
 // ACTIVITY
-function addActivity(msg, color='#4a9eff') {
+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 });
-  const feed = document.getElementById('activity-log');
-  feed.innerHTML = activity.slice(0,30).map(a=>`
-    <div class="activity-item">
+  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('');
+      <div><div class="act-msg">${a.msg}</div><div class="act-time">${a.t}</div></div>
+    </div>`
+  ).join('');
 }
 
-// NOTIFICATION
-function notify(title, msg, color='#4ade80') {
-  document.getElementById('notif-title').textContent = title;
-  document.getElementById('notif-title').style.color = color;
-  document.getElementById('notif-msg').textContent = msg;
+// 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.style.borderLeftColor = color;
   el.classList.add('show');
   setTimeout(() => el.classList.remove('show'), 5000);
 }
 
 // HISTORY
 function updateHistory() {
-  const list = document.getElementById('history-log');
+  const list = document.getElementById('hist-log');
   if (!history.length) {
-    list.innerHTML = `<div style="padding:14px;font-size:11px;color:var(--text-dim);text-align:center">No missions yet</div>`;
+    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">
+  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('');
+    </div>`
+  ).join('');
 }
 
-// AGENT INTERACTIONS
-function startInteractions() {
-  interactionTimers.forEach(t => clearTimeout(t));
-  interactionTimers = [];
-  const events = [
-    { key:'manager',   msg:'Briefing Developer...', delay:3000 },
-    { key:'developer', msg:'Manager confirmed scope', delay:6000 },
-    { key:'manager',   msg:'Checking with Analyst...', delay:9000 },
-    { key:'analyst',   msg:'Flagging findings...', delay:12000 },
-    { key:'developer', msg:'Almost done...', delay:15000 },
-    { key:'analyst',   msg:'Report ready!', delay:18000 },
-  ];
-  events.forEach(e => {
-    const t = setTimeout(() => {
-      if (states[e.key]?.status === 'working') {
-        showBubble(e.key, e.msg, 2500);
-        addActivity(`${e.key}: ${e.msg}`, '#a78bfa');
-      }
-    }, e.delay);
-    interactionTimers.push(t);
+// 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 = '');
+  }
 }
 
-// LAUNCH
+// ── 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('active');
-  document.getElementById('top-status').textContent = 'Mission running';
-  document.getElementById('top-dot2').className = 'dot dot-amber';
-  document.getElementById('mission-count').textContent = `MISSIONS: ${missionCount}`;
+  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?'...':''}"`;
 
-  AGENTS.forEach(a => { states[a.key] = { status:'working', message:'', model:'' }; });
+  // Set all agents working
+  agentDefs.forEach(a => { states[a.key] = { status:'working', message:'', model:'' }; });
   renderOffice();
 
-  AGENTS.forEach((a,i) => {
+  // Stagger speech bubbles
+  agentDefs.forEach((a, i) => {
     setTimeout(() => {
-      const phrases = SPEECH[a.key];
+      const phrases = SPEECH[a.key] || ['Working...'];
       showBubble(a.key, phrases[Math.floor(Math.random()*phrases.length)], 3000);
-    }, i * 700);
+    }, i * 600);
   });
 
-  addActivity(`Mission: "${task.substring(0,40)}"`, '#4a9eff');
-  startInteractions();
+  addAct(`Mission: "${task.substring(0,40)}"`, '#58a6ff');
 
   try {
     const resp = await fetch('/api/mission', {
-      method:'POST',
-      headers:{'Content-Type':'application/json'},
+      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;
-
-    AGENTS.forEach(a => {
-      const r = data.results[a.key] || {};
-      const status = r.status === 'resting' ? 'resting' : 'active';
-      if (status === 'resting') anyResting = true;
-      states[a.key] = { status, message: r.message || '', model: r.model || '' };
+    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;
+      }
+      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();
+    renderOffice(data.events);
 
-    // Typewriter staggered
-    AGENTS.forEach((a, i) => {
-      const st = states[a.key];
-      if (st.status === 'active' && st.message) {
+    // Stagger bubbles for active agents
+    agentDefs.forEach((a, i) => {
+      if ((states[a.key]||{}).status === 'active') {
         setTimeout(() => {
-          const el = document.getElementById(`result-${a.key}`);
-          if (el) typeWriter(el, st.message);
-          showBubble(a.key, 'Done! ✓', 2000);
-          addActivity(`${a.name}: task complete`, '#4ade80');
-        }, i * 500);
-      } else if (st.status === 'resting') {
-        addActivity(`${a.name}: rate-limited`, '#fbbf24');
-        document.getElementById('srv-llm').className = 'dot dot-amber';
+          showBubble(a.key, 'Done ✓', 2000);
+          addAct(`${a.name}: complete`, '#3fb950');
+        }, i * 400);
       }
     });
 
-    missionCount++;
-    document.getElementById('mission-count').textContent = `MISSIONS: ${missionCount}`;
+    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 });
+    history.push({ task, time, ok: !anyResting, doc_file: data.doc_file });
     updateHistory();
 
     setTimeout(() => {
       notify(
-        anyResting ? 'Mission Partial' : 'Mission Complete ✓',
+        anyResting ? 'Mission Partial' : hasDoc ? 'Document Ready ✓' : 'Mission Complete ✓',
         anyResting
-          ? 'Some agents are rate-limited. Try again in ~2 min.'
-          : `All agents responded. Mission #${missionCount} complete.`,
-        anyResting ? '#fbbf24' : '#4ade80'
+          ? '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'
       );
-    }, AGENTS.length * 500 + 400);
+    }, agentDefs.length * 400 + 300);
 
-    document.getElementById('top-status').textContent = anyResting ? 'Partial' : 'Complete';
-    document.getElementById('top-dot2').className = `dot ${anyResting ? 'dot-amber' : 'dot-green'}`;
+    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) {
-    AGENTS.forEach(a => { states[a.key] = { status:'error', message: err.message, model:'' }; });
+    agentDefs.forEach(a => { states[a.key] = { status:'resting', message: err.message, model:'' }; });
     renderOffice();
-    addActivity(`Error: ${err.message}`, '#f87171');
-    document.getElementById('top-dot2').className = 'dot dot-red';
+    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';
-    notify('Mission Failed', err.message, '#f87171');
   }
 
   btn.disabled = false;
-  document.getElementById('progress').classList.remove('active');
+  document.getElementById('progress').classList.remove('on');
 }
 
 document.getElementById('task-input').addEventListener('keydown', e => {
@@ -1210,9 +902,9 @@ document.getElementById('task-input').addEventListener('keydown', e => {
 });
 
 // INIT
-renderOffice();
-addActivity('System online — all agents ready', '#4ade80');
-addActivity('Server rack active — LEDs nominal', '#4a9eff');
+loadAgents();
+addAct('System online — agents ready', '#3fb950');
+addAct('Server rack nominal', '#58a6ff');
 </script>
 </body>
 </html>