Upload 5 files

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 🔥
-colorFrom: purple
-colorTo: purple
+title: Mission Control AI
+emoji: 🚀
+colorFrom: blue
+colorTo: gray
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Mission Control AI
+
+Agent orchestration dashboard — FastAPI + HTML frontend.

main.py

@@ -0,0 +1,121 @@
+from fastapi import FastAPI, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+import httpx
+import json
+from datetime import datetime
+from pathlib import Path
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+N8N_WEBHOOK = "https://n8n-mission-control.fly.dev/webhook/mission-control"
+
+mission_history = []
+
+AGENTS = [
+    {"key": "manager",   "name": "Manager",   "role": "Project Coordinator"},
+    {"key": "developer", "name": "Developer", "role": "Senior Engineer"},
+    {"key": "analyst",   "name": "Analyst",   "role": "Business Analyst"},
+]
+
+
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    html = Path("templates/index.html").read_text()
+    return HTMLResponse(content=html)
+
+
+@app.get("/api/agents")
+async def get_agents():
+    return {"agents": AGENTS}
+
+
+@app.get("/api/history")
+async def get_history():
+    return {"history": mission_history[-20:]}
+
+
+@app.post("/api/mission")
+async def run_mission(request: Request):
+    body = await request.json()
+    task = body.get("task", "").strip()
+
+    if not task:
+        return JSONResponse({"error": "No task provided"}, status_code=400)
+
+    started_at = datetime.now().isoformat()
+
+    try:
+        async with httpx.AsyncClient(timeout=300) as client:
+            resp = await client.post(
+                N8N_WEBHOOK,
+                json={"task": task},
+                headers={"Content-Type": "application/json"},
+            )
+
+        if resp.status_code != 200:
+            return JSONResponse({"error": f"n8n returned {resp.status_code}"}, status_code=502)
+
+        data = resp.json()
+        if isinstance(data, list):
+            data = data[0]
+
+        results = {}
+        for agent in AGENTS:
+            k   = agent["key"]
+            raw = data.get(k, {})
+
+            if isinstance(raw, dict):
+                status  = raw.get("status", "active")
+                message = raw.get("message", "")
+                model   = raw.get("model", "") or raw.get("provider", "")
+            else:
+                status  = "active"
+                message = str(raw)
+                model   = ""
+
+            if status in ("resting", "rate_limit"):
+                status = "resting"
+
+            results[k] = {
+                "status":  status,
+                "message": message,
+                "model":   model,
+            }
+
+        final_raw = data.get("final", {})
+        final_msg = final_raw.get("message", "") if isinstance(final_raw, dict) else str(final_raw)
+
+        entry = {
+            "id":         len(mission_history) + 1,
+            "task":       task,
+            "started_at": started_at,
+            "ended_at":   datetime.now().isoformat(),
+            "status":     "completed",
+            "results":    results,
+            "final":      final_msg,
+        }
+        mission_history.append(entry)
+
+        return JSONResponse({
+            "success":  True,
+            "task":     task,
+            "results":  results,
+            "final":    final_msg,
+            "mission_id": entry["id"],
+        })
+
+    except httpx.TimeoutException:
+        return JSONResponse({"error": "Request timed out"}, status_code=504)
+    except Exception as e:
+        return JSONResponse({"error": str(e)}, status_code=500)

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.115.0
+uvicorn==0.30.6
+httpx==0.27.2
+python-multipart==0.0.9

templates/index.html

@@ -0,0 +1,1082 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mission Control AI</title>
+<style>
+  :root {
+    --bg: #f4f5f7;
+    --surface: #ffffff;
+    --surface2: #f8f9fb;
+    --border: #e1e4e8;
+    --border2: #d0d4da;
+    --text: #1a1d23;
+    --text2: #5a6270;
+    --text3: #8a93a0;
+    --accent: #2563eb;
+    --accent-light: #eff4ff;
+    --success: #16a34a;
+    --success-light: #f0fdf4;
+    --warning: #d97706;
+    --warning-light: #fffbeb;
+    --danger: #dc2626;
+    --danger-light: #fef2f2;
+    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
+    --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
+    --radius: 8px;
+    --radius-sm: 6px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  /* TOPBAR */
+  .topbar {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    padding: 0 24px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow);
+  }
+
+  .topbar-left { display: flex; align-items: center; gap: 12px; }
+
+  .logo {
+    width: 32px; height: 32px;
+    background: var(--accent);
+    border-radius: var(--radius-sm);
+    display: flex; align-items: center; justify-content: center;
+  }
+
+  .logo svg { width: 18px; height: 18px; fill: white; }
+
+  .topbar-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text);
+    letter-spacing: -.01em;
+  }
+
+  .topbar-subtitle {
+    font-size: 12px;
+    color: var(--text3);
+    margin-left: 4px;
+  }
+
+  .topbar-right { display: flex; align-items: center; gap: 16px; }
+
+  .system-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text2);
+  }
+
+  .status-dot {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--success);
+  }
+
+  .status-dot.pulse { animation: pulse-green 2s ease infinite; }
+
+  @keyframes pulse-green {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
+    50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
+  }
+
+  .clock {
+    font-size: 12px;
+    color: var(--text3);
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+  }
+
+  /* MISSION BAR */
+  .mission-bar {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    padding: 16px 24px;
+  }
+
+  .mission-form {
+    display: flex;
+    gap: 10px;
+    max-width: 900px;
+  }
+
+  .mission-input {
+    flex: 1;
+    height: 40px;
+    border: 1px solid var(--border2);
+    border-radius: var(--radius-sm);
+    padding: 0 14px;
+    font-size: 14px;
+    color: var(--text);
+    background: var(--surface);
+    outline: none;
+    transition: border-color .15s, box-shadow .15s;
+    font-family: inherit;
+  }
+
+  .mission-input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
+  }
+
+  .mission-input::placeholder { color: var(--text3); }
+
+  .launch-btn {
+    height: 40px;
+    padding: 0 20px;
+    background: var(--accent);
+    color: white;
+    border: none;
+    border-radius: var(--radius-sm);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    transition: background .15s, transform .1s;
+    font-family: inherit;
+    white-space: nowrap;
+  }
+
+  .launch-btn:hover { background: #1d4ed8; }
+  .launch-btn:active { transform: scale(.98); }
+  .launch-btn:disabled { background: #93afd8; cursor: not-allowed; transform: none; }
+
+  .launch-btn svg { width: 15px; height: 15px; fill: white; flex-shrink: 0; }
+
+  /* MAIN LAYOUT */
+  .main {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    gap: 0;
+    flex: 1;
+    min-height: 0;
+  }
+
+  @media (max-width: 1024px) {
+    .main { grid-template-columns: 1fr; }
+    .sidebar { display: none; }
+  }
+
+  /* AGENTS AREA */
+  .agents-area {
+    padding: 20px 24px;
+    overflow-y: auto;
+  }
+
+  .section-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text3);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    margin-bottom: 14px;
+  }
+
+  .agents-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 14px;
+    margin-bottom: 24px;
+  }
+
+  /* AGENT CARD */
+  .agent-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    transition: box-shadow .2s, transform .2s;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .agent-card.is-active {
+    box-shadow: var(--shadow-md);
+    border-color: var(--accent);
+  }
+
+  .agent-card.is-resting {
+    border-color: var(--warning);
+  }
+
+  /* AGENT HEADER */
+  .agent-header {
+    padding: 14px 16px 12px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .agent-avatar {
+    width: 40px; height: 40px;
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .agent-avatar.idle    { background: var(--surface2); border: 1px solid var(--border); }
+  .agent-avatar.working { background: var(--accent-light); border: 1px solid #bfcfef; }
+  .agent-avatar.active  { background: var(--success-light); border: 1px solid #bbdfc8; }
+  .agent-avatar.resting { background: var(--warning-light); border: 1px solid #f0d89e; }
+  .agent-avatar.error   { background: var(--danger-light); border: 1px solid #f5baba; }
+
+  .agent-avatar-img {
+    width: 28px; height: 28px;
+    image-rendering: pixelated;
+    display: block;
+  }
+
+  .agent-info { flex: 1; min-width: 0; }
+
+  .agent-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .agent-role {
+    font-size: 12px;
+    color: var(--text3);
+    margin-top: 1px;
+  }
+
+  .agent-badge {
+    flex-shrink: 0;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 3px 9px;
+    border-radius: 20px;
+    letter-spacing: .01em;
+  }
+
+  .badge-idle    { background: var(--surface2); color: var(--text3); }
+  .badge-working { background: var(--accent-light); color: var(--accent); }
+  .badge-active  { background: var(--success-light); color: var(--success); }
+  .badge-resting { background: var(--warning-light); color: var(--warning); }
+  .badge-error   { background: var(--danger-light); color: var(--danger); }
+
+  /* AGENT BODY - pixel desktop scene */
+  .agent-scene {
+    padding: 14px 16px;
+    background: var(--surface2);
+    border-bottom: 1px solid var(--border);
+    min-height: 110px;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    gap: 12px;
+  }
+
+  .pixel-figure { flex-shrink: 0; }
+
+  .pixel-desk-area { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+
+  .pixel-monitor-wrap {
+    background: #1a1a2e;
+    border: 2px solid #2d2d4a;
+    border-radius: 3px;
+    padding: 4px;
+    height: 52px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .pixel-monitor-wrap.thinking {
+    border-color: var(--accent);
+  }
+
+  /* Thinking dots animation */
+  .think-dots {
+    display: flex; gap: 4px; align-items: center;
+    position: absolute; top: 50%; left: 50%;
+    transform: translate(-50%,-50%);
+  }
+
+  .think-dot {
+    width: 5px; height: 5px; border-radius: 50%;
+    background: var(--accent);
+    animation: think-bounce .8s ease-in-out infinite;
+  }
+
+  .think-dot:nth-child(2) { animation-delay: .15s; }
+  .think-dot:nth-child(3) { animation-delay: .3s; }
+
+  @keyframes think-bounce {
+    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
+    40% { transform: translateY(-6px); opacity: 1; }
+  }
+
+  /* Screen content lines */
+  .screen-lines { padding: 2px; display: flex; flex-direction: column; gap: 3px; }
+
+  .screen-line {
+    height: 3px;
+    background: #4ade80;
+    border-radius: 1px;
+    opacity: .7;
+  }
+
+  .screen-line.dim { opacity: .25; }
+  .screen-line.mid { opacity: .5; }
+
+  .screen-cursor {
+    width: 4px; height: 10px;
+    background: #4ade80;
+    position: absolute;
+    bottom: 5px; left: 6px;
+    animation: blink-cursor .8s step-end infinite;
+  }
+
+  @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+
+  /* typing animation on screen lines */
+  @keyframes scan-line {
+    0% { width: 10%; }
+    100% { width: 85%; }
+  }
+
+  .screen-line.scanning {
+    animation: scan-line .6s ease-in-out infinite alternate;
+  }
+
+  .pixel-desk-surface {
+    height: 8px;
+    background: #c8b89a;
+    border-radius: 2px;
+    border-top: 2px solid #a09070;
+  }
+
+  .pixel-keyboard {
+    height: 6px;
+    background: #d4ccc0;
+    border-radius: 2px;
+    border: 1px solid #b0a898;
+    display: flex; gap: 1px; padding: 1px 3px; align-items: center;
+  }
+
+  .pixel-key { flex: 1; height: 3px; background: #b8b0a4; border-radius: .5px; }
+
+  /* Speech bubble */
+  .speech-bubble {
+    position: absolute;
+    top: 8px; left: 55px;
+    background: white;
+    border: 1px solid var(--border2);
+    border-radius: var(--radius-sm);
+    padding: 5px 9px;
+    font-size: 11px;
+    color: var(--text);
+    max-width: 160px;
+    box-shadow: var(--shadow);
+    z-index: 10;
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity .3s, transform .3s;
+    pointer-events: none;
+    line-height: 1.3;
+  }
+
+  .speech-bubble.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .speech-bubble::before {
+    content: '';
+    position: absolute;
+    left: -6px; top: 10px;
+    width: 0; height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 6px solid var(--border2);
+  }
+
+  .speech-bubble::after {
+    content: '';
+    position: absolute;
+    left: -5px; top: 10px;
+    width: 0; height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 6px solid white;
+  }
+
+  /* OOO card */
+  .ooo-card {
+    position: absolute; inset: 10px;
+    background: var(--warning-light);
+    border: 1px dashed #e8c96a;
+    border-radius: var(--radius-sm);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-size: 11px;
+    color: var(--warning);
+    font-weight: 500;
+  }
+
+  .ooo-icon { font-size: 20px; }
+
+  /* AGENT RESULT */
+  .agent-result {
+    padding: 12px 16px;
+    flex: 1;
+    min-height: 60px;
+  }
+
+  .result-placeholder {
+    font-size: 12px;
+    color: var(--text3);
+    font-style: italic;
+  }
+
+  .result-text {
+    font-size: 13px;
+    color: var(--text);
+    line-height: 1.6;
+  }
+
+  .result-model {
+    margin-top: 6px;
+    font-size: 11px;
+    color: var(--text3);
+    display: flex; align-items: center; gap: 4px;
+  }
+
+  .model-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); }
+
+  /* SIDEBAR */
+  .sidebar {
+    border-left: 1px solid var(--border);
+    background: var(--surface);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .sidebar-section {
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .sidebar-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text3);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    padding: 14px 16px 10px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  /* Activity feed */
+  .activity-feed {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+  }
+
+  .activity-item {
+    padding: 8px 16px;
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+    transition: background .1s;
+  }
+
+  .activity-item:hover { background: var(--surface2); }
+
+  .activity-dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    margin-top: 5px;
+    flex-shrink: 0;
+  }
+
+  .activity-content { flex: 1; min-width: 0; }
+  .activity-msg { font-size: 12px; color: var(--text); line-height: 1.4; }
+  .activity-time { font-size: 11px; color: var(--text3); margin-top: 1px; }
+
+  /* Mission history */
+  .history-list { overflow-y: auto; max-height: 240px; }
+
+  .history-item {
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+    transition: background .1s;
+  }
+
+  .history-item:hover { background: var(--surface2); }
+  .history-item:last-child { border-bottom: none; }
+
+  .history-task {
+    font-size: 12px;
+    color: var(--text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+  }
+
+  .history-meta {
+    font-size: 11px;
+    color: var(--text3);
+    margin-top: 2px;
+    display: flex; gap: 8px;
+  }
+
+  /* NOTIFICATION */
+  .notification {
+    position: fixed;
+    top: 70px; right: 20px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--success);
+    border-radius: var(--radius);
+    padding: 12px 16px;
+    box-shadow: var(--shadow-md);
+    max-width: 300px;
+    z-index: 999;
+    transform: translateX(320px);
+    transition: transform .3s ease;
+    font-size: 13px;
+  }
+
+  .notification.show { transform: translateX(0); }
+  .notification-title { font-weight: 600; margin-bottom: 2px; }
+  .notification-msg { color: var(--text2); font-size: 12px; }
+
+  /* PROGRESS BAR */
+  .progress-bar {
+    height: 2px;
+    background: var(--accent-light);
+    position: relative;
+    overflow: hidden;
+    display: none;
+  }
+
+  .progress-bar.active { display: block; }
+
+  .progress-bar::after {
+    content: '';
+    position: absolute;
+    top: 0; left: -100%;
+    width: 40%;
+    height: 100%;
+    background: var(--accent);
+    animation: progress-slide 1.5s ease-in-out infinite;
+  }
+
+  @keyframes progress-slide {
+    0% { left: -40%; }
+    100% { left: 100%; }
+  }
+
+  /* SCROLLBAR */
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--text3); }
+
+  /* RESPONSIVE */
+  @media (max-width: 768px) {
+    .topbar { padding: 0 16px; }
+    .topbar-subtitle { display: none; }
+    .mission-bar { padding: 12px 16px; }
+    .agents-area { padding: 16px; }
+    .agents-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- TOPBAR -->
+<header class="topbar">
+  <div class="topbar-left">
+    <div class="logo">
+      <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+    </div>
+    <div>
+      <span class="topbar-title">Mission Control AI</span>
+      <span class="topbar-subtitle">— Agent Orchestration</span>
+    </div>
+  </div>
+  <div class="topbar-right">
+    <div class="system-status">
+      <div class="status-dot pulse" id="sys-dot"></div>
+      <span id="sys-label">System Online</span>
+    </div>
+    <div class="clock" id="clock">--:--:--</div>
+  </div>
+</header>
+
+<div class="progress-bar" id="progress-bar"></div>
+
+<!-- MISSION BAR -->
+<div class="mission-bar">
+  <div class="mission-form">
+    <input
+      class="mission-input"
+      id="task-input"
+      placeholder="Describe the mission for your agents..."
+      autocomplete="off"
+    />
+    <button class="launch-btn" id="launch-btn" onclick="launchMission()">
+      <svg viewBox="0 0 24 24"><path d="M22 2L11 13M22 2L15 22 11 13 2 9l20-7z"/></svg>
+      Launch Mission
+    </button>
+  </div>
+</div>
+
+<!-- MAIN -->
+<div class="main">
+
+  <!-- AGENTS -->
+  <div class="agents-area">
+    <div class="section-label" id="agents-label">Agents — Waiting for mission</div>
+    <div class="agents-grid" id="agents-grid"></div>
+  </div>
+
+  <!-- SIDEBAR -->
+  <aside class="sidebar">
+    <div class="sidebar-section">
+      <div class="sidebar-title">Activity</div>
+      <div class="activity-feed" id="activity-feed"></div>
+    </div>
+    <div class="sidebar-section">
+      <div class="sidebar-title">Mission History</div>
+      <div class="history-list" id="history-list">
+        <div style="padding:16px;font-size:12px;color:var(--text3);text-align:center">No missions yet</div>
+      </div>
+    </div>
+  </aside>
+
+</div>
+
+<!-- NOTIFICATION -->
+<div class="notification" id="notification">
+  <div class="notification-title" id="notif-title">Mission Complete</div>
+  <div class="notification-msg" id="notif-msg"></div>
+</div>
+
+<script>
+const AGENT_DEFS = [
+  { key: 'manager',   name: 'Manager',   role: 'Project Coordinator', emoji: '👔' },
+  { key: 'developer', name: 'Developer', role: 'Senior Engineer',     emoji: '💻' },
+  { key: 'analyst',   name: 'Analyst',   role: 'Business Analyst',    emoji: '📊' },
+];
+
+const SPEECH = {
+  manager:   ['Delegating tasks...', 'Reviewing plan...', 'Coordinating team...'],
+  developer: ['Writing code...', 'Debugging...', 'Building solution...'],
+  analyst:   ['Analyzing data...', 'Evaluating risks...', 'Processing insights...'],
+};
+
+const INTER_SPEECH = {
+  manager:   ['Checking with Developer...', 'Reviewing Analyst output...'],
+  developer: ['Manager approved scope', 'Implementing per spec...'],
+  analyst:   ['Flagging to Manager...', 'Sharing findings...'],
+};
+
+let agentStates = {};
+let activityLog = [];
+let missionHistory = [];
+let missionCount = 0;
+let speechTimers = {};
+let interactionTimers = [];
+
+AGENT_DEFS.forEach(a => {
+  agentStates[a.key] = { status: 'idle', message: '', model: '' };
+});
+
+// CLOCK
+function updateClock() {
+  const now = new Date();
+  document.getElementById('clock').textContent =
+    [now.getHours(), now.getMinutes(), now.getSeconds()]
+      .map(n => String(n).padStart(2, '0')).join(':');
+}
+setInterval(updateClock, 1000);
+updateClock();
+
+// PIXEL PERSON SVG
+function pixelPerson(status) {
+  const isWorking = status === 'working';
+  const isResting = status === 'resting';
+  const bodyOp    = isResting ? '0.35' : '1';
+  const armAnim   = isWorking
+    ? 'style="animation:arm-type .3s ease-in-out infinite alternate;transform-origin:14px 18px"'
+    : '';
+
+  return `<svg viewBox="0 0 36 56" width="36" height="56" style="image-rendering:pixelated;display:block;opacity:${bodyOp}">
+    <style>@keyframes arm-type{0%{transform:translateY(0)rotate(0)}100%{transform:translateY(2px)rotate(-4deg)}}</style>
+    <rect x="12" y="0"  width="12" height="3"  fill="#1a1a2a"/>
+    <rect x="10" y="3"  width="16" height="2"  fill="#1a1a2a"/>
+    <rect x="10" y="5"  width="2"  height="5"  fill="#1a1a2a"/>
+    <rect x="24" y="5"  width="2"  height="5"  fill="#1a1a2a"/>
+    <rect x="10" y="5"  width="16" height="12" fill="#f0c8a0"/>
+    <rect x="8"  y="8"  width="2"  height="5"  fill="#f0c8a0"/>
+    <rect x="26" y="8"  width="2"  height="5"  fill="#f0c8a0"/>
+    <rect x="13" y="9"  width="4"  height="3"  fill="#2563eb" opacity=".9"/>
+    <rect x="19" y="9"  width="4"  height="3"  fill="#2563eb" opacity=".9"/>
+    <rect x="14" y="10" width="2"  height="2"  fill="#111"/>
+    <rect x="20" y="10" width="2"  height="2"  fill="#111"/>
+    <rect x="17" y="10" width="2"  height="1"  fill="#2563eb"/>
+    <rect x="15" y="14" width="6"  height="1"  fill="#c88870" opacity=".6"/>
+    <rect x="10" y="17" width="16" height="12" fill="#e8f0ff"/>
+    <rect x="13" y="17" width="10" height="4"  fill="#e8f0ff"/>
+    <rect x="6"  y="18" width="4"  height="3"  fill="#e8f0ff"/>
+    <rect x="26" y="18" width="4"  height="3"  fill="#e8f0ff"/>
+    <g ${armAnim}>
+      <rect x="4"  y="18" width="6"  height="8"  fill="#e8f0ff"/>
+      <rect x="26" y="18" width="6"  height="8"  fill="#e8f0ff"/>
+      <rect x="4"  y="26" width="6"  height="4"  fill="#f0c8a0"/>
+      <rect x="26" y="26" width="6"  height="4"  fill="#f0c8a0"/>
+    </g>
+    <rect x="10" y="29" width="16" height="14" fill="#2d3748"/>
+    <rect x="15" y="43" width="6"  height="8"  fill="#2d3748"/>
+    <rect x="10" y="43" width="6"  height="8"  fill="#2d3748"/>
+    <rect x="8"  y="51" width="8"  height="4"  fill="#1a1a2a"/>
+    <rect x="20" y="51" width="8"  height="4"  fill="#1a1a2a"/>
+  </svg>`;
+}
+
+// MONITOR SCREEN CONTENT
+function monitorContent(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') {
+    return `<div class="screen-lines">
+      <div class="screen-line" style="width:80%"></div>
+      <div class="screen-line mid" style="width:60%"></div>
+      <div class="screen-line dim" style="width:70%"></div>
+      <div class="screen-line mid" style="width:45%"></div>
+    </div>
+    <div class="screen-cursor"></div>`;
+  }
+  if (status === 'resting') {
+    return `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:9px;color:#e8c96a;font-family:monospace;letter-spacing:1px;opacity:.7">AWAY</div>`;
+  }
+  return `<div class="screen-lines">
+    <div class="screen-line dim" style="width:50%"></div>
+    <div class="screen-line dim" style="width:35%"></div>
+  </div>`;
+}
+
+// BUILD AGENT CARD HTML
+function buildAgentCard(agent) {
+  const st = agentStates[agent.key];
+  const status = st.status;
+
+  const avatarClass  = `agent-avatar ${status === 'working' ? 'working' : status === 'active' ? 'active' : status === 'resting' ? 'resting' : 'idle'}`;
+  const cardClass    = `agent-card ${status === 'working' || status === 'active' ? 'is-active' : status === 'resting' ? 'is-resting' : ''}`;
+  const badgeClass   = `agent-badge badge-${status === 'active' ? 'active' : status}`;
+  const badgeLabel   = { idle: 'Idle', working: 'Processing', active: 'Done', resting: 'Away', error: 'Error' }[status] || status;
+  const monThinking  = status === 'working' ? 'thinking' : '';
+
+  const sceneContent = status === 'resting'
+    ? `<div class="ooo-card">
+         <div class="ooo-icon">☕</div>
+         <div>Out of Office</div>
+         <div style="font-size:10px;font-weight:400;color:var(--warning);opacity:.7">Rate limit — back soon</div>
+       </div>`
+    : `<div class="pixel-figure">${pixelPerson(status)}</div>
+       <div class="pixel-desk-area">
+         <div class="pixel-monitor-wrap ${monThinking}">
+           ${monitorContent(status)}
+         </div>
+         <div class="pixel-desk-surface"></div>
+         <div class="pixel-keyboard">
+           <div class="pixel-key"></div>
+           <div class="pixel-key"></div>
+           <div class="pixel-key"></div>
+           <div class="pixel-key"></div>
+         </div>
+       </div>`;
+
+  const resultContent = status === 'idle'
+    ? `<div class="result-placeholder">Waiting for mission...</div>`
+    : status === 'working'
+    ? `<div class="result-placeholder" style="color:var(--accent)">Thinking...</div>`
+    : status === 'resting'
+    ? `<div class="result-placeholder" style="color:var(--warning)">Rate limit — available in ~1-2 min</div>`
+    : `<div class="result-text" id="result-${agent.key}"></div>
+       ${st.model ? `<div class="result-model"><div class="model-dot"></div>${st.model}</div>` : ''}`;
+
+  return `<div class="${cardClass}" id="card-${agent.key}">
+    <div class="agent-header">
+      <div class="${avatarClass}" id="avatar-${agent.key}">
+        ${pixelPerson(status)}
+      </div>
+      <div class="agent-info">
+        <div class="agent-name">${agent.name}</div>
+        <div class="agent-role">${agent.role}</div>
+      </div>
+      <span class="${badgeClass}" id="badge-${agent.key}">${badgeLabel}</span>
+    </div>
+    <div class="agent-scene" id="scene-${agent.key}">
+      ${sceneContent}
+      <div class="speech-bubble" id="bubble-${agent.key}"></div>
+    </div>
+    <div class="agent-result" id="result-area-${agent.key}">
+      ${resultContent}
+    </div>
+  </div>`;
+}
+
+function renderAgents() {
+  const grid = document.getElementById('agents-grid');
+  grid.innerHTML = AGENT_DEFS.map(buildAgentCard).join('');
+}
+
+// TYPEWRITER EFFECT
+function typeWriter(el, text, speed = 18) {
+  el.textContent = '';
+  let i = 0;
+  const interval = setInterval(() => {
+    if (i < text.length) {
+      el.textContent += text[i++];
+    } else {
+      clearInterval(interval);
+    }
+  }, speed);
+}
+
+// SPEECH BUBBLE
+function showBubble(agentKey, text, duration = 2800) {
+  const bubble = document.getElementById(`bubble-${agentKey}`);
+  if (!bubble) return;
+  if (speechTimers[agentKey]) clearTimeout(speechTimers[agentKey]);
+  bubble.textContent = text;
+  bubble.classList.add('visible');
+  speechTimers[agentKey] = setTimeout(() => {
+    bubble.classList.remove('visible');
+  }, duration);
+}
+
+// ACTIVITY LOG
+function addActivity(msg, color = '#2563eb') {
+  const now = new Date();
+  const time = [now.getHours(), now.getMinutes(), now.getSeconds()]
+    .map(n => String(n).padStart(2, '0')).join(':');
+  activityLog.unshift({ msg, time, color });
+
+  const feed = document.getElementById('activity-feed');
+  feed.innerHTML = activityLog.slice(0, 30).map(a => `
+    <div class="activity-item">
+      <div class="activity-dot" style="background:${a.color}"></div>
+      <div class="activity-content">
+        <div class="activity-msg">${a.msg}</div>
+        <div class="activity-time">${a.time}</div>
+      </div>
+    </div>`).join('');
+}
+
+// NOTIFICATION
+function notify(title, msg) {
+  document.getElementById('notif-title').textContent = title;
+  document.getElementById('notif-msg').textContent = msg;
+  const el = document.getElementById('notification');
+  el.classList.add('show');
+  setTimeout(() => el.classList.remove('show'), 5000);
+}
+
+// AGENT INTERACTIONS (manager talks to others while working)
+function startInteractions() {
+  interactionTimers.forEach(t => clearTimeout(t));
+  interactionTimers = [];
+
+  const pairs = [
+    { from: 'manager',   msg: 'Briefing Developer...' },
+    { from: 'manager',   msg: 'Checking with Analyst...' },
+    { from: 'developer', msg: 'Manager approved — building...' },
+    { from: 'analyst',   msg: 'Sending report to Manager...' },
+  ];
+
+  pairs.forEach((p, i) => {
+    const t = setTimeout(() => {
+      if (agentStates[p.from]?.status === 'working') {
+        showBubble(p.from, p.msg, 2500);
+        addActivity(`${p.from.charAt(0).toUpperCase() + p.from.slice(1)}: ${p.msg}`, '#6366f1');
+      }
+    }, 3000 + i * 5000);
+    interactionTimers.push(t);
+  });
+}
+
+// UPDATE HISTORY
+function updateHistory() {
+  const list = document.getElementById('history-list');
+  if (!missionHistory.length) {
+    list.innerHTML = `<div style="padding:16px;font-size:12px;color:var(--text3);text-align:center">No missions yet</div>`;
+    return;
+  }
+  list.innerHTML = missionHistory.slice().reverse().map(m => `
+    <div class="history-item">
+      <div class="history-task">${m.task}</div>
+      <div class="history-meta">
+        <span>${m.time}</span>
+        <span style="color:${m.ok ? 'var(--success)' : 'var(--warning)'}">
+          ${m.ok ? 'Completed' : 'Partial'}
+        </span>
+      </div>
+    </div>`).join('');
+}
+
+// LAUNCH MISSION
+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-bar').classList.add('active');
+  document.getElementById('agents-label').textContent = `Agents — Processing: "${task.substring(0, 50)}${task.length > 50 ? '...' : ''}"`;
+  document.getElementById('sys-label').textContent = 'Mission Running';
+
+  // Set all to working
+  AGENT_DEFS.forEach((a, i) => {
+    agentStates[a.key] = { status: 'working', message: '', model: '' };
+  });
+  renderAgents();
+
+  // Stagger bubble appearances
+  AGENT_DEFS.forEach((a, i) => {
+    setTimeout(() => {
+      const phrases = SPEECH[a.key];
+      showBubble(a.key, phrases[Math.floor(Math.random() * phrases.length)], 3000);
+    }, i * 800);
+  });
+
+  addActivity(`Mission launched: "${task.substring(0, 40)}"`, '#2563eb');
+  startInteractions();
+
+  try {
+    const resp = await fetch('/api/mission', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ task }),
+    });
+
+    const data = await resp.json();
+
+    if (!resp.ok || data.error) {
+      throw new Error(data.error || 'Server error');
+    }
+
+    let anyResting = false;
+
+    AGENT_DEFS.forEach(a => {
+      const r = data.results[a.key] || {};
+      const status = r.status === 'resting' ? 'resting' : 'active';
+      if (status === 'resting') anyResting = true;
+
+      agentStates[a.key] = {
+        status,
+        message: r.message || '',
+        model:   r.model   || '',
+      };
+    });
+
+    renderAgents();
+
+    // Typewriter for each active agent
+    AGENT_DEFS.forEach((a, i) => {
+      const st = agentStates[a.key];
+      if (st.status === 'active' && st.message) {
+        setTimeout(() => {
+          const el = document.getElementById(`result-${a.key}`);
+          if (el) typeWriter(el, st.message);
+          showBubble(a.key, 'Done!', 2000);
+          addActivity(`${a.name} completed task`, '#16a34a');
+        }, i * 600);
+      } else if (st.status === 'resting') {
+        addActivity(`${a.name} is rate-limited — resting`, '#d97706');
+      }
+    });
+
+    const time = new Date().toLocaleTimeString();
+    missionHistory.push({ task, time, ok: !anyResting });
+    missionCount++;
+    updateHistory();
+
+    setTimeout(() => {
+      notify(
+        anyResting ? 'Mission Partial' : 'Mission Complete',
+        anyResting
+          ? 'Some agents hit rate limits. Try again in ~2 minutes.'
+          : `All agents responded. Mission #${missionCount} done.`
+      );
+    }, AGENT_DEFS.length * 600 + 500);
+
+    document.getElementById('agents-label').textContent = anyResting
+      ? `Agents — Partial results (some rate-limited)`
+      : `Agents — Mission #${missionCount} complete`;
+
+    document.getElementById('sys-label').textContent = 'System Online';
+
+  } catch (err) {
+    AGENT_DEFS.forEach(a => {
+      agentStates[a.key] = { status: 'error', message: err.message, model: '' };
+    });
+    renderAgents();
+    addActivity(`Error: ${err.message}`, '#dc2626');
+    document.getElementById('sys-dot').style.background = 'var(--danger)';
+  }
+
+  btn.disabled = false;
+  document.getElementById('progress-bar').classList.remove('active');
+}
+
+// ENTER KEY
+document.getElementById('task-input').addEventListener('keydown', e => {
+  if (e.key === 'Enter') launchMission();
+});
+
+// INIT
+renderAgents();
+addActivity('System online — agents ready', '#16a34a');
+</script>
+</body>
+</html>