Spaces:

vfven
/

test

Paused

App Files Files Community

vfven commited on Mar 20

Commit

556d544

verified ·

1 Parent(s): 5295a50

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +1177 -596

templates/index.html CHANGED Viewed

@@ -1,251 +1,601 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Mission Control AI</title>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
-:root{
-  --bg:#0a0e14;--floor:#0d1320;--wall:#101828;--wall2:#131f2e;
-  --carpet:#080f1a;--carpet2:#0a1220;--border:#1e2d42;--border2:#2a3d58;
-  --text:#c8d8f0;--text2:#5a7a9a;--text3:#2a3d58;
-  --G:#00e5a0;--Gdim:#00995a;--B:#4a9eff;--Bdim:#1a5aaa;
-  --A:#ffcc44;--Adim:#aa8800;--R:#ff4455;--P:#cc88ff;
-  --wood:#7a5c0a;--woodl:#9a7a18;--metal:#1a2535;--metall:#243040;
-  --shadow:0 8px 32px rgba(0,0,0,.6);
-}
-*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-body{font-family:'Share Tech Mono',monospace;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
-body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);pointer-events:none;z-index:500}
-/* TOPBAR */
-.topbar{background:#050810;border-bottom:2px solid var(--border2);height:48px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:200}
-.tb-logo{font-family:'VT323',monospace;font-size:22px;color:var(--G);letter-spacing:3px;text-shadow:0 0 12px rgba(0,229,160,.3)}
-.tb-ver{font-size:10px;color:var(--text3);margin-left:4px}
-.tb-right{display:flex;align-items:center;gap:18px}
-.tb-stat{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:5px}
-.sdot{width:7px;height:7px;border-radius:50%}
-.dg{background:var(--G);animation:dg 2s ease infinite}
-.da{background:var(--A);animation:dg 1.2s ease infinite}
-.dr{background:var(--R);animation:bdr .5s step-end infinite}
-.dd{background:var(--text3)}
-@keyframes dg{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 4px transparent}}
-@keyframes bdr{0%,100%{opacity:1}50%{opacity:0}}
-.clock{font-family:'VT323',monospace;font-size:22px;color:var(--G);letter-spacing:2px}
-/* PROGRESS */
-.prog{height:2px;background:var(--floor);overflow:hidden;display:none;flex-shrink:0}
-.prog.on{display:block}
-.prog::after{content:'';display:block;height:100%;width:30%;background:var(--G);animation:prun 1.4s ease-in-out infinite}
-@keyframes prun{0%{margin-left:-30%}100%{margin-left:110%}}
-/* MISSION BAR */
-.mbar{background:#050810;border-bottom:1px solid var(--border);padding:10px 20px;display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
-.minput{flex:1;min-width:200px;height:36px;background:var(--floor);border:1px solid var(--border2);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:12px;padding:0 12px;outline:none;transition:border-color .15s}
-.minput:focus{border-color:var(--G)}
-.minput::placeholder{color:var(--text3)}
-.launch{height:36px;padding:0 18px;background:transparent;border:2px solid var(--G);color:var(--G);font-family:'VT323',monospace;font-size:18px;letter-spacing:2px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
-.launch:hover{background:rgba(0,229,160,.1);box-shadow:0 0 12px rgba(0,229,160,.2)}
-.launch:active{transform:scale(.97)}
-.launch:disabled{border-color:var(--text3);color:var(--text3);cursor:not-allowed}
-.add-btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--border2);color:var(--text2);font-family:'Share Tech Mono',monospace;font-size:11px;cursor:pointer;transition:all .15s}
-.add-btn:hover{border-color:var(--B);color:var(--B)}
-.mc{font-family:'VT323',monospace;font-size:17px;color:var(--text3)}
-/* MAIN */
-.main{display:grid;grid-template-columns:1fr 260px;flex:1;min-height:0;overflow:hidden}
-@media(max-width:900px){.main{grid-template-columns:1fr}.sidebar{display:none}}
-/* OFFICE */
-.office{background:var(--carpet);overflow-y:auto;padding:16px;position:relative}
-.office::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0}
-.floor-hdr{font-family:'VT323',monospace;font-size:13px;letter-spacing:4px;color:var(--text3);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
-.floor-sub{font-size:10px;color:var(--Gdim);letter-spacing:2px}
-/* OFFICE GRID */
-.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);display:flex;flex-direction:column;min-height:200px;transition:border-color .3s,box-shadow .3s;overflow:hidden}
-.room.working{border-color:var(--G);box-shadow:0 0 16px rgba(0,229,160,.1)}
-.room.active{border-color:var(--Gdim)}
-.room.resting{border-color:var(--A)}
-.room.visiting{border-color:var(--B);box-shadow:0 0 16px rgba(74,158,255,.14);animation:vp 1s ease-in-out infinite}
-@keyframes vp{0%,100%{box-shadow:0 0 8px rgba(74,158,255,.08)}50%{box-shadow:0 0 20px rgba(74,158,255,.22)}}
-/* ROOM HEADER */
-.rwall{background:var(--wall2);height:28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 10px;flex-shrink:0}
-.rname{font-family:'VT323',monospace;font-size:15px;letter-spacing:2px}
-.rbadge{font-family:'VT323',monospace;font-size:11px;padding:1px 6px;border:1px solid;letter-spacing:1px}
-.bi{color:var(--text3);border-color:var(--text3)}.bw{color:var(--G);border-color:var(--G);animation:bp .9s ease infinite}.ba{color:var(--Gdim);border-color:var(--Gdim);background:rgba(0,229,160,.07)}.br{color:var(--A);border-color:var(--A)}.bv{color:var(--B);border-color:var(--B);animation:bp .6s ease infinite}
-@keyframes bp{0%,100%{opacity:1}50%{opacity:.4}}
-/* ROOM SCENE — compact, no overflow */
-.rscene{
-  height:90px;background:var(--carpet2);position:relative;
-  display:flex;align-items:flex-end;padding:6px 8px;gap:6px;
-  overflow:hidden;flex-shrink:0;
-}
-.rscene::before{content:'';position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(255,255,255,.01) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.01) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.01) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.01) 75%);background-size:16px 16px}
-/* SERVER RACK — slim */
-.srack{width:30px;flex-shrink:0;align-self:flex-end;margin-bottom:3px;background:#070e18;border:1px solid #1a2a40;padding:3px 2px;display:flex;flex-direction:column;gap:2px;position:relative;z-index:2}
-.ru{height:7px;background:#0d1525;border:1px solid #1a2a3a;display:flex;align-items:center;gap:2px;padding:0 2px}
-.rl{width:3px;height:3px;border-radius:50%}
-.lg{background:var(--G);animation:led var(--d,1.5s) ease-in-out infinite}
-.la{background:var(--A);animation:led var(--d,2s) ease-in-out infinite}
-.lb{background:var(--B);animation:led var(--d,.9s) ease-in-out infinite}
-.lo{background:#0d1525;border:1px solid #1a2a3a}
-.rb{flex:1;height:2px;background:#1a2a3a}
-.rb.on{background:var(--B);animation:rba .4s ease-in-out infinite alternate}
-@keyframes led{0%,100%{opacity:.25}50%{opacity:1;box-shadow:0 0 4px currentColor}}
-@keyframes rba{0%{opacity:.3}100%{opacity:1}}
-/* DESK AREA — fixed width */
-.deskarea{width:88px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;position:relative;z-index:2}
-/* Agent + chair sit next to desk on the left */
-.agent-seat{
-  display:flex;flex-direction:column;align-items:center;
-  flex-shrink:0;position:relative;z-index:3;
-  gap:0;
-}
-/* Monitor — small and clean */
-.monitor{
-  width:88px;height:38px;background:#030608;
-  border:1px solid var(--metall);display:flex;flex-direction:column;
-  position:relative;overflow:hidden;transition:border-color .3s;
-}
-.monitor.thinking{border-color:var(--B)}
-.monitor.done{border-color:var(--Gdim)}
-.monitor.away{border-color:var(--Adim)}
-.mscreen{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
-/* Thinking dots */
-.tdots{display:flex;gap:3px;align-items:center}
-.td{width:4px;height:4px;border-radius:50%;background:var(--B);animation:tdb .8s ease-in-out infinite}
-.td:nth-child(2){animation-delay:.15s}.td:nth-child(3){animation-delay:.3s}
-@keyframes tdb{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-4px);opacity:1}}
-/* Active: just a blinking cursor, no lines */
-.scur{width:4px;height:10px;background:var(--G);animation:cur .7s step-end infinite}
-@keyframes cur{0%,100%{opacity:1}50%{opacity:0}}
-/* Idle/resting text */
-.mscreen-txt{font-family:'VT323',monospace;font-size:10px;letter-spacing:1px;opacity:.5}
-.mbase{height:4px;background:var(--metal)}
-.mbase::after{content:'';display:block;width:12px;height:3px;background:var(--metall);margin:0 auto;position:relative;top:-1px}
-.dtop{height:6px;background:var(--woodl);border-top:1px solid #c09828}
-.kbd{height:5px;background:#c0b090;border:1px solid #a09070;display:flex;gap:1px;padding:1px 2px;align-items:center}
-.kk{flex:1;height:3px;background:#a09070}
-/* Coffee — small, on desk corner */
-.coffee-on-desk{position:absolute;bottom:17px;right:6px;z-index:3;opacity:.8}
-/* OOO */
-.ooo{position:absolute;inset:0;background:rgba(20,14,0,.78);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;z-index:10}
-.ooot{font-family:'VT323',monospace;font-size:15px;color:var(--A);letter-spacing:2px}
-.ooos{font-size:9px;color:rgba(255,204,68,.5)}
-/* SPEECH BUBBLE */
-.bubble{position:absolute;top:5px;left:38px;background:#050810;border:1px solid var(--border2);padding:3px 7px;font-size:10px;color:var(--text);max-width:120px;line-height:1.3;z-index:20;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .25s,transform .25s}
-.bubble.show{opacity:1;transform:translateY(0)}
-.bubble::before{content:'';position:absolute;left:-5px;top:7px;border:4px solid transparent;border-right-color:var(--border2)}
-/* RESULT AREA */
-.rresult{background:#060d18;border-top:1px solid var(--border);padding:8px 12px;flex-shrink:0;min-height:52px;flex:1}
-.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:4px;display:flex;align-items:center;gap:4px}
-.dl-btn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 12px;background:rgba(0,229,160,.07);border:1px solid var(--G);color:var(--G);font-size:10px;cursor:pointer;text-decoration:none;transition:all .15s;font-family:'Share Tech Mono',monospace}
-.dl-btn:hover{background:rgba(0,229,160,.16)}
-/* IMAGE PREVIEW inside result area */
-.img-preview-wrap{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
-.img-thumb{width:72px;height:52px;object-fit:cover;border:1px solid var(--border2);cursor:pointer;transition:border-color .15s}
-.img-thumb:hover{border-color:var(--G)}
-/* IMAGE LIGHTBOX */
-.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:800;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px}
-.lightbox.show{display:flex}
-.lightbox img{max-width:85vw;max-height:75vh;border:1px solid var(--border2)}
-.lightbox-close{font-family:'VT323',monospace;font-size:16px;color:var(--text2);cursor:pointer;letter-spacing:2px;padding:4px 14px;border:1px solid var(--border);transition:color .15s}
-.lightbox-close:hover{color:var(--text)}
-.lightbox-dl{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;background:rgba(0,229,160,.08);border:1px solid var(--G);color:var(--G);font-size:11px;cursor:pointer;text-decoration:none;font-family:'Share Tech Mono',monospace}
-/* SERVER ROOM STRIP */
-.srv-strip{grid-column:1/-1;background:var(--wall2);border:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
-.srv-strip::before{content:'SERVER ROOM';position:absolute;top:6px;left:14px;font-family:'VT323',monospace;font-size:11px;color:var(--text3);letter-spacing:3px}
-.sroom-racks{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
-.big-rack{background:#070e18;border:1px solid #1a2a40;padding:3px;width:40px;display:flex;flex-direction:column;gap:2px}
-.big-unit{height:7px;background:#0d1525;border:1px solid #1a2a3a;display:flex;align-items:center;gap:2px;padding:0 2px}
-.srv-stats{margin-left:auto;display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--text2)}
-.srv-stat{display:flex;align-items:center;gap:5px}
-/* ORCH LOG */
-.orch-log{grid-column:1/-1;background:var(--wall2);border:1px solid var(--border);padding:8px 14px;display:none}
-.orch-log.show{display:block}
-.orch-title{font-family:'VT323',monospace;font-size:12px;color:var(--text2);letter-spacing:3px;margin-bottom:5px}
-.orch-ev{font-size:10px;color:var(--text2);display:flex;gap:8px;padding:1px 0}
-.orch-t{color:var(--text3);flex-shrink:0}
 /* WALK OVERLAY */
-.walk-overlay{position:fixed;inset:0;background:rgba(5,8,16,.93);z-index:400;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px}
-.walk-overlay.show{display:flex}
-.walk-wrap{position:relative;width:min(680px,95vw);height:min(380px,55vh);background:var(--wall);border:2px solid var(--border2);overflow:hidden}
-.walk-lbl{font-family:'VT323',monospace;font-size:14px;color:var(--G);letter-spacing:3px;text-align:center}
-.walk-log{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text2);text-align:center;height:16px}
-/* ADD AGENT MODAL */
-.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:300;display:none;align-items:center;justify-content:center}
-.modal-bg.show{display:flex}
-.modal{background:var(--wall);border:1px solid var(--border2);padding:22px;width:370px;box-shadow:var(--shadow)}
-.modal-t{font-family:'VT323',monospace;font-size:20px;color:var(--G);letter-spacing:2px;margin-bottom:14px}
-.field{margin-bottom:10px}
-.field label{display:block;font-size:10px;color:var(--text2);letter-spacing:2px;margin-bottom:3px;text-transform:uppercase}
-.field input,.field select,.field textarea{width:100%;background:var(--floor);border:1px solid var(--border2);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:11px;padding:6px 10px;outline:none;transition:border-color .15s}
-.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--G)}
-.field textarea{resize:vertical;min-height:52px}
-.field select option{background:var(--floor)}
-.modal-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
-.mbtn{padding:6px 16px;font-family:'Share Tech Mono',monospace;font-size:11px;cursor:pointer;border:1px solid;transition:all .15s;background:transparent}
-.mbtn-ok{border-color:var(--G);color:var(--G)}.mbtn-ok:hover{background:rgba(0,229,160,.1)}
-.mbtn-no{border-color:var(--border2);color:var(--text2)}.mbtn-no:hover{border-color:var(--text2)}
 /* NOTIFICATION */
-.notif{position:fixed;top:56px;right:16px;background:var(--wall);border:1px solid var(--border);border-left:3px solid var(--G);padding:10px 16px;max-width:270px;z-index:600;transform:translateX(290px);transition:transform .3s ease;box-shadow:var(--shadow);font-size:12px}
-.notif.show{transform:translateX(0)}
-.notif-t{font-family:'VT323',monospace;font-size:17px;letter-spacing:1px}
-.notif-m{color:var(--text2);margin-top:2px;line-height:1.4;font-size:11px}
 /* SIDEBAR */
-.sidebar{background:#050810;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
-.sb-sec{border-bottom:1px solid var(--border);flex-shrink:0}
-.sb-t{font-family:'VT323',monospace;font-size:13px;letter-spacing:3px;color:var(--text2);padding:8px 14px 7px;border-bottom:1px solid var(--border)}
-.act-scroll{flex:1;overflow-y:auto;max-height:260px}
-.act-item{padding:6px 14px;border-bottom:1px solid rgba(30,45,66,.4);display:flex;gap:7px}
-.act-dot{width:5px;height:5px;border-radius:50%;margin-top:4px;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(30,45,66,.4);cursor:pointer;transition:background .1s}
-.hist-item:hover{background:var(--wall)}
-.hist-task{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
-.hist-meta{font-size:10px;color:var(--text3);margin-top:2px;display:flex;gap:8px}
-::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
-@keyframes arm-type{0%{transform:translateY(0)rotate(0)}100%{transform:translateY(2px)rotate(-5deg)}}
 </style>
 </head>
 <body>
 <header class="topbar">
   <div style="display:flex;align-items:center;gap:8px">
     <span class="tb-logo">MISSION CONTROL AI</span>
-    <span class="tb-ver">v5</span>
   </div>
   <div class="tb-right">
     <div class="tb-stat"><div class="sdot dg"></div><span id="top-active">0 active</span></div>
@@ -253,51 +603,123 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
     <div class="clock" id="clock">00:00:00</div>
   </div>
 </header>
 <div class="prog" id="prog"></div>
 <div class="mbar">
-  <input class="minput" id="task-input" placeholder="Mission... (e.g. 'cat image', 'excel template for school', 'python hello world with HTML')" autocomplete="off"/>
   <button class="launch" id="launch-btn" onclick="launchMission()">&#9658; LAUNCH</button>
   <button class="add-btn" onclick="openModal()">+ Agent</button>
-  <span class="mc" id="mc-count">MISSIONS: 0</span>
 </div>
 <div class="main">
-  <div class="office">
-    <div class="floor-hdr">
-      <span style="font-family:'VT323',monospace;font-size:13px;letter-spacing:4px">&#9632; OPERATIONS FLOOR</span>
-      <span class="floor-sub" id="floor-sub">WAITING FOR MISSION</span>
     </div>
-    <div class="ogrid" id="ogrid"></div>
   </div>
   <aside class="sidebar">
     <div class="sb-sec"><div class="sb-t">ACTIVITY</div><div class="act-scroll" id="act-log"></div></div>
-    <div class="sb-sec"><div class="sb-t">MISSIONS</div><div class="hist-scroll" id="hist-log"><div style="padding:14px;font-size:11px;color:var(--text3);text-align:center">No missions yet</div></div></div>
   </aside>
 </div>
 <!-- WALK OVERLAY -->
-<div class="walk-overlay" id="walk-overlay">
-  <div class="walk-lbl">MANAGER BRIEFING TEAM</div>
   <div class="walk-wrap"><canvas id="walk-canvas"></canvas></div>
-  <div class="walk-log" id="walk-log">Planning...</div>
 </div>
 <!-- LIGHTBOX -->
-<div class="lightbox" id="lightbox" onclick="if(event.target===this)closeLightbox()">
-  <img id="lightbox-img" src="" alt=""/>
-  <div style="display:flex;gap:10px;align-items:center">
-    <a class="lightbox-dl" id="lightbox-dl" href="#" download>&#8595; Download image</a>
-    <div class="lightbox-close" onclick="closeLightbox()">&#10005; CLOSE</div>
   </div>
 </div>
 <!-- ADD AGENT MODAL -->
 <div class="modal-bg" id="modal-bg" onclick="if(event.target===this)closeModal()">
   <div class="modal">
-    <div class="modal-t">+ NEW AGENT</div>
-    <div class="field"><label>Key (unique ID)</label><input id="m-key" placeholder="e.g. researcher"/></div>
-    <div class="field"><label>Display Name</label><input id="m-name" placeholder="e.g. Researcher"/></div>
     <div class="field"><label>Role</label><textarea id="m-role" placeholder="Especialista en..."></textarea></div>
-    <div class="field"><label>Provider</label><select id="m-prov"><option value="openrouter">OpenRouter (free)</option><option value="gemini">Google Gemini</option><option value="groq">Groq</option></select></div>
     <div class="modal-acts">
       <button class="mbtn mbtn-no" onclick="closeModal()">Cancel</button>
       <button class="mbtn mbtn-ok" onclick="submitAgent()">Add Agent</button>
@@ -307,221 +729,305 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
 <!-- NOTIFICATION -->
 <div class="notif" id="notif">
-  <div class="notif-t" id="notif-t">Mission Complete</div>
   <div class="notif-m" id="notif-m"></div>
 </div>
 <script>
-const PROV_MODELS={openrouter:['meta-llama/llama-3.3-70b-instruct:free','qwen/qwen3-4b:free'],gemini:['gemini-2.5-flash-preview-04-17','gemini-2.0-flash'],groq:['llama-3.3-70b-versatile','gemma2-9b-it']};
-const COLORS={manager:'#00e5a0',backend_dev:'#4a9eff',frontend_dev:'#cc88ff',analyst:'#ffcc44',writer:'#a0d8ff',image_agent:'#ff6688',developer:'#4a9eff'};
-const SPEECH={manager:['Analyzing task...','Planning...','Coordinating...'],backend_dev:['Writing code...','Building backend...'],frontend_dev:['Coding HTML...','Styling UI...'],analyst:['Analyzing...','Reviewing...'],writer:['Drafting...','Writing...'],image_agent:['Searching images...','Finding visuals...']};
-let agentDefs=[],states={},activity=[],history=[],mCount=0,bubbleT={};
-async function loadAgents(){
-  const r=await fetch('/api/agents'),d=await r.json();
-  agentDefs=d.agents;
-  agentDefs.forEach(a=>{if(!states[a.key])states[a.key]={status:'idle',message:'',model:''};});
-  renderOffice();
 }
-setInterval(()=>{
-  const n=new Date();
-  document.getElementById('clock').textContent=[n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
-},1000);
-// ── SVG BUILDERS ─────────────────────────────────────────────────────────
-function personSVG(color,status,w=22,h=36){
-  const op=status==='resting'?'0.15':'1';
-  const a=status==='working'?`style="animation:arm-type .28s ease-in-out infinite alternate;transform-origin:13px 18px"`:'';
-  return`<svg viewBox="0 0 32 52" width="${w}" height="${h}" style="image-rendering:pixelated;display:block;opacity:${op}">
-    <rect x="11" y="0" width="10" height="3" fill="#1a1a2e"/>
-    <rect x="9"  y="3" width="14" height="2" fill="#1a1a2e"/>
-    <rect x="9"  y="3" width="2"  height="5" fill="#1a1a2e"/>
-    <rect x="21" y="3" width="2"  height="5" fill="#1a1a2e"/>
-    <rect x="9"  y="5" width="14" height="12" fill="#f0c8a0"/>
-    <rect x="7"  y="8" width="2"  height="4" fill="#f0c8a0"/>
-    <rect x="23" y="8" width="2"  height="4" fill="#f0c8a0"/>
-    <rect x="11" y="9" width="4"  height="3" fill="${color}" opacity=".9"/>
-    <rect x="17" y="9" width="4"  height="3" fill="${color}" opacity=".9"/>
-    <rect x="12" y="10" width="2" height="2" fill="#111"/>
-    <rect x="18" y="10" width="2" height="2" fill="#111"/>
-    <rect x="15" y="10" width="2" height="1" fill="${color}"/>
-    <rect x="13" y="14" width="6" height="1" fill="#c88060" opacity=".5"/>
-    <rect x="9"  y="17" width="14" height="11" fill="${color}" opacity=".85"/>
-    <rect x="11" y="17" width="10" height="3" fill="${color}"/>
-    <g ${a}>
-      <rect x="4"  y="18" width="5"  height="8" fill="${color}" opacity=".85"/>
-      <rect x="23" y="18" width="5"  height="8" fill="${color}" opacity=".85"/>
-      <rect x="3"  y="25" width="5"  height="4" fill="#f0c8a0"/>
-      <rect x="24" y="25" width="5"  height="4" fill="#f0c8a0"/>
-    </g>
-    <rect x="9"  y="28" width="14" height="12" fill="#1e2535"/>
-    <rect x="13" y="40" width="5"  height="7" fill="#1e2535"/>
-    <rect x="9"  y="40" width="5"  height="7" fill="#1e2535"/>
-    <rect x="7"  y="47" width="7"  height="4" fill="#111"/>
-    <rect x="18" y="47" width="7"  height="4" fill="#111"/>
-  </svg>`;
-}
-function chairSVG(empty,w=22,h=26){
-  const c=empty?'#0a0f18':'#182030', s=empty?'#060b12':'#0d1a28';
-  return`<svg viewBox="0 0 26 30" width="${w}" height="${h}" 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="#050a10"/>
-    <rect x="18" y="27" width="5" height="3" fill="#050a10"/>
-  </svg>`;
-}
-function coffeeSVG(){
-  return`<svg viewBox="0 0 12 12" width="11" height="11" style="image-rendering:pixelated;display:block">
-    <rect x="2" y="4" width="6" height="6" fill="#5c3a1e"/>
-    <rect x="2" y="4" width="6" height="2" fill="#7a4e2a"/>
-    <rect x="8" y="5" width="2" height="3" fill="#5c3a1e"/>
-    <rect x="1" y="10" width="8" height="2" fill="#4a2e14"/>
-    <rect x="4" y="2" width="1" height="2" fill="#555" opacity=".5"/>
-  </svg>`;
-}
-function sRack(){
-  const us=[['lg','lb','1.1s','.7s',true],['la','lb','2.3s','.9s',true],['lg','lo','1.8s',null,false],['lb','lg','.7s','2.1s',true],['la','la','1.4s','1.9s',false]];
-  return us.map(([l1,l2,d1,d2,a])=>`<div class="ru"><div class="rl ${l1}" style="--d:${d1}"></div><div class="rl ${l2}" ${d2?`style="--d:${d2}"`:''} ></div><div class="rb ${a?'on':''}"></div></div>`).join('');
-}
-function screenContent(status){
-  if(status==='working') return`<div class="tdots"><div class="td"></div><div class="td"></div><div class="td"></div></div>`;
-  if(status==='active')  return`<div class="scur"></div>`;
-  if(status==='resting') return`<div class="mscreen-txt" style="color:var(--Adim)">AWAY</div>`;
-  return`<div class="mscreen-txt" style="color:var(--text3)">IDLE</div>`;
-}
-// ── BUILD ROOM ─────────────────────────────────────────────────────────────
-function buildRoom(agent){
-  const st=states[agent.key]||{status:'idle',message:'',model:''};
-  const status=st.status, color=COLORS[agent.key]||'#00e5a0', empty=status==='resting';
-  const badge={idle:'IDLE',working:'PROCESSING',active:'DONE',resting:'AWAY',visiting:'BRIEFING',error:'ERROR'};
-  const bcls={idle:'bi',working:'bw',active:'ba',resting:'br',visiting:'bv',error:'br'};
-  const rcls={idle:'idle',working:'working',active:'active',resting:'resting',visiting:'visiting',error:'resting'};
-  const mcls=status==='working'?'thinking':status==='active'?'done':status==='resting'?'away':'';
-  // Result HTML — handles images specially
-  let resultHTML='';
-  if(status==='idle'){
-    resultHTML=`<div class="rph">Waiting for mission...</div>`;
-  } else if(status==='working'||status==='visiting'){
-    resultHTML=`<div class="rph" style="color:var(--B)">Processing...</div>`;
-  } else if(status==='resting'){
-    resultHTML=`<div class="rph" style="color:var(--A)">Rate limited — back soon</div>`;
-  } else {
-    // Build download buttons per agent
-    let downloads='';
-    if(st.doc_file){
-      const label = st.doc_file.endsWith('.xlsx') ? '&#8595; Download .xlsx'
-                  : st.doc_file.endsWith('.docx') ? '&#8595; Download .docx'
-                  : st.doc_file.endsWith('.html') ? '&#8595; Download .html'
-                  : st.doc_file.endsWith('.py')   ? '&#8595; Download .py'
-                  : st.doc_file.endsWith('.groovy')? '&#8595; Download .groovy'
-                  : st.doc_file.endsWith('.jpg')  ? null  // images shown as thumbs
-                  : '&#8595; Download file';
-      if(label) downloads += `<a class="dl-btn" href="/api/docs/${st.doc_file}" download>${label}</a>`;
-    }
-    // Image thumbnails for image_agent
-    let imgThumbs='';
-    if(agent.key==='image_agent' && st.images && st.images.length){
-      const thumbs=st.images.map((src,i)=>
-        `<img class="img-thumb" src="${src}" onclick="openLightbox('${src}','img_${i}.jpg')" title="Click to enlarge"/>`
-      ).join('');
-      imgThumbs=`<div class="img-preview-wrap">${thumbs}</div>`;
-      imgThumbs+=`<div style="font-size:10px;color:var(--text3);margin-top:4px">${st.images.length} image(s) — click to enlarge & download</div>`;
-    }
-    resultHTML=`<div class="rtxt" id="result-${agent.key}"></div>
-      ${st.model?`<div class="rmodel"><div class="sdot dg" style="width:5px;height:5px;margin:0"></div>${st.model}</div>`:''}
-      ${imgThumbs}
-      ${downloads}`;
   }
-  return`<div class="room ${rcls[status]||'idle'}" id="room-${agent.key}">
-    <div class="rwall">
-      <span class="rname" style="color:${color}">${agent.name}</span>
-      <span class="rbadge ${bcls[status]||'bi'}">${badge[status]||'IDLE'}</span>
-    </div>
-    <div class="rscene" id="scene-${agent.key}">
-      <div class="srack">${sRack()}</div>
-      <!-- agent seat: person + chair, left side -->
-      <div class="agent-seat">
-        ${!empty ? personSVG(color,status) : ''}
-        ${chairSVG(empty)}
       </div>
-      <!-- desk + monitor, right side -->
-      <div class="deskarea">
-        <div class="monitor ${mcls}">
-          <div class="mscreen">${screenContent(status)}</div>
-          <div class="mbase"></div>
-        </div>
-        <div class="dtop"></div>
-        <div class="kbd"><div class="kk"></div><div class="kk"></div><div class="kk"></div><div class="kk"></div></div>
       </div>
-      <!-- coffee on desk -->
-      <div class="coffee-on-desk">${coffeeSVG()}</div>
-      ${empty?`<div class="ooo"><div class="ooot">&#9749; AWAY</div><div class="ooos">Rate limited</div></div>`:''}
-      <div class="bubble" id="bubble-${agent.key}"></div>
-    </div>
-    <div class="rresult" id="result-area-${agent.key}">${resultHTML}</div>
-  </div>`;
 }
-function buildSrvRoom(){
-  const racks=Array.from({length:6},()=>`<div class="big-rack">${[['lg','.9s'],['lb','1.3s'],['la','2s'],['lg','1.6s'],['lb','.6s']].map(([c,d])=>`<div class="big-unit"><div class="rl ${c}" style="--d:${d}"></div><div class="rb on"></div></div>`).join('')}</div>`).join('');
-  return`<div class="srv-strip"><div class="sroom-racks">${racks}</div><div class="srv-stats"><div class="srv-stat"><div class="sdot dg"></div><span>FastAPI OK</span></div><div class="srv-stat"><div class="sdot dg"></div><span>Gemini</span></div><div class="srv-stat"><div class="sdot dg"></div><span>OpenRouter</span></div><div class="srv-stat"><div class="sdot dg"></div><span>Groq backup</span></div></div></div>`;
 }
-function renderOffice(orchEvents){
-  const grid=document.getElementById('ogrid');
-  let html=agentDefs.map(buildRoom).join('')+buildSrvRoom();
-  if(orchEvents&&orchEvents.length){
-    const ev=orchEvents.map(e=>`<div class="orch-ev"><span class="orch-t">${e.time}</span><span>${e.msg}</span></div>`).join('');
-    html+=`<div class="orch-log show"><div class="orch-title">ORCHESTRATION LOG</div>${ev}</div>`;
   }
-  grid.innerHTML=html;
-  agentDefs.forEach(a=>{
-    const st=states[a.key];
-    if(st&&st.status==='active'&&st.message&&st._tw){
-      const el=document.getElementById(`result-${a.key}`);
-      if(el) typeWriter(el,st.message);
-    }
-  });
-  document.getElementById('top-active').textContent=`${agentDefs.filter(a=>(states[a.key]||{}).status==='working').length} active`;
 }
-// LIGHTBOX
-function openLightbox(src, filename){
-  document.getElementById('lightbox-img').src=src;
-  document.getElementById('lightbox-dl').href=src;
-  document.getElementById('lightbox-dl').download=filename;
-  document.getElementById('lightbox').classList.add('show');
 }
-function closeLightbox(){ document.getElementById('lightbox').classList.remove('show'); }
-function typeWriter(el,text,speed=14){
-  el.textContent=''; let i=0;
-  const iv=setInterval(()=>{if(i<text.length)el.textContent+=text[i++];else clearInterval(iv);},speed);
 }
-function showBubble(key,text,ms=2600){
-  const b=document.getElementById(`bubble-${key}`);
-  if(!b)return;
-  if(bubbleT[key])clearTimeout(bubbleT[key]);
-  b.textContent=text; b.classList.add('show');
-  bubbleT[key]=setTimeout(()=>b.classList.remove('show'),ms);
 }
-function addAct(msg,color='#4a9eff'){
   const n=new Date();
   const t=[n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
   activity.unshift({msg,t,color});
@@ -530,138 +1036,211 @@ function addAct(msg,color='#4a9eff'){
   ).join('');
 }
-function notify(title,msg,color='#00e5a0'){
   document.getElementById('notif-t').textContent=title;
   document.getElementById('notif-t').style.color=color;
   document.getElementById('notif-m').textContent=msg;
   document.getElementById('notif').style.borderLeftColor=color;
-  const el=document.getElementById('notif');
-  el.classList.add('show');
-  setTimeout(()=>el.classList.remove('show'),5500);
 }
 function updateHistory(){
   const list=document.getElementById('hist-log');
-  if(!history.length){list.innerHTML=`<div style="padding:14px;font-size:11px;color:var(--text3);text-align:center">No missions yet</div>`;return;}
-  list.innerHTML=[...history].reverse().map(m=>
-    `<div class="hist-item"><div class="hist-task">${m.task}</div><div class="hist-meta"><span>${m.time}</span><span style="color:${m.ok?'var(--G)':'var(--A)'}">${m.ok?'Done':'Partial'}</span>${m.doc_file?`<span style="color:var(--P)">file</span>`:''}</div></div>`
-  ).join('');
 }
-// ── WALK ANIMATION ─────────────────────────────────────────────────────────
 function runWalkAnimation(task, delegates, onDone){
-  const overlay=document.getElementById('walk-overlay');
-  const canvas=document.getElementById('walk-canvas');
   const logEl=document.getElementById('walk-log');
-  const wrap=canvas.parentElement;
-  canvas.width=wrap.clientWidth||640; canvas.height=wrap.clientHeight||360;
-  const W=canvas.width, H=canvas.height, ctx=canvas.getContext('2d');
-  overlay.classList.add('show');
-  const agentColors={manager:'#00e5a0',backend_dev:'#4a9eff',frontend_dev:'#cc88ff',analyst:'#ffcc44',writer:'#a0d8ff',image_agent:'#ff6688',developer:'#4a9eff'};
-  const rooms=agentDefs.filter(a=>a.key!=='manager').slice(0,5);
-  const rW=Math.min(118,Math.floor((W-60)/Math.max(rooms.length,1)));
-  const rH=120, rY=H/2-rH/2+20;
-  const rPos=rooms.map((r,i)=>({x:30+i*(rW+12),y:rY,w:rW,h:rH,key:r.key,name:r.name,color:agentColors[r.key]||'#4a9eff'}));
   const delSet=new Set(delegates);
-  const manColor='#00e5a0';
-  let mx=W/2-8, my=6, frame=0, stepI=0, phase='walking', talkF=0;
-  const TALK=80, SPD=3;
-  const msgs={writer:`Write report:\n"${task.substring(0,24)}..."`,analyst:`Review the\ndocument.`,backend_dev:`Build backend:\n"${task.substring(0,22)}..."`,frontend_dev:`Build HTML:\n"${task.substring(0,22)}..."`,image_agent:`Find images:\n"${task.substring(0,24)}..."`};
-  const steps=[
-    {key:'__top',x:W/2-8,y:H*.12,msg:'Planning...'},
-    ...rPos.filter(r=>delSet.has(r.key)).map(r=>({key:r.key,x:r.x+r.w/2-8,y:r.y+r.h-30,msg:msgs[r.key]||'Delegating...'})),
-    {key:'__back',x:W/2-8,y:H*.12,msg:'Team briefed!'}
-  ];
   const visited=new Set(); let curMsg='';
-  function drawBg(){
-    ctx.fillStyle='#080f1a'; ctx.fillRect(0,0,W,H);
-    ctx.strokeStyle='rgba(255,255,255,.025)'; ctx.lineWidth=1;
-    for(let x=0;x<W;x+=32){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
-    for(let y=0;y<H;y+=32){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}
   }
-  function drawRoom(r,vis){
-    ctx.fillStyle=vis?'#0d1a2a':'#08101c'; ctx.strokeStyle=vis?r.color:'#1e2d42'; ctx.lineWidth=vis?1.5:1;
-    ctx.fillRect(r.x,r.y,r.w,r.h); ctx.strokeRect(r.x,r.y,r.w,r.h);
-    ctx.fillStyle=vis?r.color+'22':'#0c1522'; ctx.fillRect(r.x,r.y,r.w,18);
-    ctx.fillStyle=vis?r.color:'#3a5a7a'; ctx.font=`9px "Share Tech Mono",monospace`; ctx.textAlign='center';
-    ctx.fillText(r.name.toUpperCase(),r.x+r.w/2,r.y+13);
-    // desk
-    ctx.fillStyle='#7a5c0a'; ctx.fillRect(r.x+8,r.y+r.h-32,r.w-16,5);
-    // monitor
-    ctx.fillStyle='#030608'; ctx.strokeStyle='#1a2535'; ctx.lineWidth=1;
-    ctx.fillRect(r.x+14,r.y+r.h-54,r.w-28,20); ctx.strokeRect(r.x+14,r.y+r.h-54,r.w-28,20);
-    if(vis){
-      ctx.fillStyle=r.color; ctx.globalAlpha=.5+.4*Math.sin(frame*.12);
-      ctx.fillRect(r.x+17,r.y+r.h-50,(r.w-34)*.75,3);
-      ctx.globalAlpha=1;
-    }
-    // agent figure
-    if(!delSet.has(r.key))return;
-    const px=r.x+12, py=r.y+r.h-28;
-    ctx.fillStyle='#f0c8a0'; ctx.fillRect(px+3,py,7,7);
-    ctx.fillStyle=r.color; ctx.fillRect(px,py+7,13,7);
-    ctx.fillStyle='#1e2535'; ctx.fillRect(px+2,py+14,4,6); ctx.fillRect(px+7,py+14,4,6);
-    // LEDs
-    ['#00e5a0','#4a9eff','#ffcc44'].forEach((c,i)=>{
-      ctx.beginPath(); ctx.arc(r.x+r.w-14+i*6,r.y+r.h-8,2,0,Math.PI*2);
-      ctx.fillStyle=c; ctx.globalAlpha=.3+.7*((Math.sin(frame*.09+i*1.4)+1)/2); ctx.fill();
-    }); ctx.globalAlpha=1;
-  }
-  function drawManager(x,y,walking){
-    const bob=walking?Math.sin(frame*.45)*2:0;
-    ctx.fillStyle='#1a1a2e'; ctx.fillRect(x+4,y,8,3);
-    ctx.fillStyle='#f0c8a0'; ctx.fillRect(x+3,y+3,10,8);
-    ctx.fillStyle=manColor+'bb'; ctx.fillRect(x,y+3,2,4); ctx.fillRect(x+13,y+3,2,4);
-    ctx.fillStyle=manColor; ctx.fillRect(x+2,y+11,12,9);
-    ctx.fillStyle='#1e2535';
-    ctx.fillRect(x+3,y+20,5,6+bob); ctx.fillRect(x+8,y+20,5,6-bob);
-    ctx.fillStyle='#111'; ctx.fillRect(x+2,y+26+bob,5,3); ctx.fillRect(x+9,y+26-bob,5,3);
   }
   function drawBubble(x,y,lines){
-    const mxW=Math.max(...lines.map(l=>l.length))*6+16, bh=lines.length*13+14;
-    const bx=Math.min(Math.max(x+14,4),W-mxW-4), by=Math.max(y-bh-6,4);
-    ctx.fillStyle='#0d1828'; ctx.strokeStyle='#2a3d58'; ctx.lineWidth=1;
-    ctx.fillRect(bx,by,mxW,bh); ctx.strokeRect(bx,by,mxW,bh);
-    ctx.fillStyle='#c8d8f0'; ctx.font='10px "Share Tech Mono",monospace'; ctx.textAlign='left';
-    lines.forEach((l,i)=>ctx.fillText(l,bx+8,by+12+i*13+2));
   }
   function tick(){
-    drawBg(); rPos.forEach(r=>drawRoom(r,visited.has(r.key)));
     if(stepI<steps.length){
       const step=steps[stepI];
-      const dx=step.x-mx, dy=step.y-my, dist=Math.sqrt(dx*dx+dy*dy);
-      if(dist>3&&phase==='walking'){mx+=dx/dist*SPD; my+=dy/dist*SPD;}
       else if(phase==='walking'){
-        phase='talking'; talkF=0; curMsg=step.msg;
         if(step.key!=='__top'&&step.key!=='__back'){
           visited.add(step.key);
           logEl.textContent=`Briefing ${step.key}...`;
-          addAct(`Manager → ${step.key}`,'#4a9eff');
         } else if(step.key==='__back'){
-          logEl.textContent='Team ready — processing...';
         }
       }
       if(phase==='talking'){talkF++;if(talkF>TALK){phase='walking';stepI++;curMsg='';}}
     } else {
-      setTimeout(()=>{overlay.classList.remove('show');onDone();},300); return;
     }
-    drawManager(Math.round(mx),Math.round(my),phase==='walking');
-    if(phase==='talking'&&curMsg) drawBubble(Math.round(mx),Math.round(my),curMsg.split('\n'));
-    frame++; requestAnimationFrame(tick);
   }
   tick();
 }
-// ── 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;
@@ -672,8 +1251,10 @@ async function submitAgent(){
   const d=await r.json();
   if(d.success){
     agentDefs.push({key:d.agent.key,name:d.agent.name,role:d.agent.role});
-    states[d.agent.key]={status:'idle',message:'',model:''};
-    renderOffice(); addAct(`Agent "${name}" added`,'#cc88ff'); closeModal();
     ['m-key','m-name','m-role'].forEach(id=>document.getElementById(id).value='');
   }
 }
@@ -687,109 +1268,109 @@ async function launchMission(){
   document.getElementById('prog').classList.add('on');
   document.getElementById('top-status').textContent='Running';
   document.getElementById('top-dot').className='sdot da';
-  document.getElementById('floor-sub').textContent=`MISSION: "${task.substring(0,45).toUpperCase()}${task.length>45?'...':''}"`;
-  agentDefs.forEach(a=>{states[a.key]={status:'working',message:'',model:'',images:null};});
-  renderOffice();
-  agentDefs.forEach((a,i)=>{
-    setTimeout(()=>{const ph=SPEECH[a.key]||['Working...'];showBubble(a.key,ph[Math.floor(Math.random()*ph.length)],2500);},i*500);
   });
-  addAct(`Mission: "${task.substring(0,40)}"`,'#4a9eff');
-  // Start API call
   let apiData=null;
-  const fetchP=fetch('/api/mission',{
-    method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({task})
-  }).then(r=>r.json()).then(d=>{apiData=d;}).catch(e=>{apiData={error:e.message};});
-  // Quick delegate guess for walk animation
   const lo=task.toLowerCase();
   let qd=[];
-  if(/imagen|image|foto|gato|cat|dog|perro|picture|dibuja/.test(lo)) qd.push('image_agent');
   if(/informe|report|word|documento/.test(lo)){qd.push('writer');qd.push('analyst');}
   if(/excel|planilla|spreadsheet|registro/.test(lo)) qd.push('backend_dev');
   if(/python|script|groovy|jenkins|backend|api/.test(lo)) qd.push('backend_dev');
   if(/html|css|frontend|web|interfaz/.test(lo)) qd.push('frontend_dev');
-  if(!qd.length) qd=['backend_dev','analyst'];
   runWalkAnimation(task, qd, async()=>{
     await fetchP;
     if(!apiData||apiData.error){
-      agentDefs.forEach(a=>{states[a.key]={status:'resting',message:apiData?.error||'Error',model:''};});
-      renderOffice();
-      addAct(`Error: ${apiData?.error}`,'#ff4455');
-      notify('Mission Failed',apiData?.error||'Error','#ff4455');
       document.getElementById('top-dot').className='sdot dr';
       document.getElementById('top-status').textContent='Error';
-      btn.disabled=false; document.getElementById('prog').classList.remove('on');
-      return;
     }
-    let anyResting=false, hasFile=false;
     agentDefs.forEach(a=>{
       const r=apiData.results[a.key];
-      if(!r){states[a.key]={status:'idle',message:'',model:'',images:null};return;}
       if(r.status==='resting') anyResting=true;
-      const docFile=r.doc_file||null;
-      if(docFile) hasFile=true;
-      // For image_agent: build preview URLs using img_count + img_base
-      let images=null;
-      if(a.key==='image_agent' && r.img_base && r.img_count>0){
-        images=[];
-        for(let i=1;i<=r.img_count;i++){
-          images.push(`/api/docs/${r.img_base}_img${i}.jpg`);
-        }
-      }
-      states[a.key]={
-        status: r.status==='resting'?'resting': r.status==='idle'?'idle':'active',
-        message: r.message||'',
-        model:   r.model||'',
-        doc_file: docFile,
-        images: images,
-        _tw: true,
       };
-    });
-    renderOffice(apiData.events);
-    // Stagger completion bubbles
-    agentDefs.forEach((a,i)=>{
-      if((states[a.key]||{}).status==='active'){
-        setTimeout(()=>{
-          showBubble(a.key,'Done ✓',2000);
-          addAct(`${a.name}: complete`,'#00e5a0');
-        },i*400);
       }
     });
-    if(hasFile) addAct('Files ready for download','#cc88ff');
     mCount++;
     document.getElementById('mc-count').textContent=`MISSIONS: ${mCount}`;
     history.push({task,time:new Date().toLocaleTimeString(),ok:!anyResting,doc_file:apiData.doc_file});
     updateHistory();
     setTimeout(()=>notify(
-      anyResting?'Mission Partial': hasFile?'Files Ready ✓':'Mission Complete ✓',
-      anyResting?'Some agents rate-limited.':hasFile?'Download files below!':'All agents responded.',
-      anyResting?'#ffcc44':hasFile?'#cc88ff':'#00e5a0'
-    ), agentDefs.length*400+300);
     document.getElementById('top-status').textContent=anyResting?'Partial':'Done';
     document.getElementById('top-dot').className=`sdot ${anyResting?'da':'dg'}`;
-    document.getElementById('floor-sub').textContent=anyResting?'PARTIAL RESULTS':'MISSION COMPLETE';
-    btn.disabled=false;
-    document.getElementById('prog').classList.remove('on');
   });
 }
 document.getElementById('task-input').addEventListener('keydown',e=>{if(e.key==='Enter')launchMission();});
-loadAgents();
-addAct('System online','#00e5a0');
-addAct('Server rack nominal','#4a9eff');
 </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="es">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Mission Control AI</title>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
+:root {
+  --wall:#f2ede0; --wall2:#e8e2d2; --floor:#d4cdb8; --floor2:#ccc5ae;
+  --desk:#c8a96e; --desk2:#b8996a; --desk-dark:#a07840;
+  --monitor-bg:#2a3545; --monitor-screen:#1a4a2a;
+  --skin:#f5c9a0; --hair-dark:#4a2e18; --hair-med:#7a4828;
+  --chair:#8a7a6a; --chair2:#6a5a4a;
+  --accent:#2563eb; --accent2:#1d4ed8;
+  --server:#1a2035; --server2:#0d1520;
+  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --blue:#3b82f6; --purple:#a855f7;
+  --text:#1a1a2a; --text2:#4a5a6a; --text3:#8a9aaa;
+  --shadow:0 8px 32px rgba(0,0,0,.18);
+  --shadow-sm:0 2px 8px rgba(0,0,0,.12);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; overflow: hidden; }
+body {
+  font-family: 'Share Tech Mono', system-ui, monospace;
+  background: var(--floor);
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+/* ── TOPBAR ── */
+.topbar {
+  height: 44px;
+  background: #1e2535;
+  border-bottom: 2px solid #2a3550;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  flex-shrink: 0;
+  z-index: 100;
+}
+.tb-logo { font-family: 'VT323', monospace; font-size: 20px; color: #4ade80; letter-spacing: 3px; }
+.tb-right { display: flex; align-items: center; gap: 14px; }
+.tb-stat { font-size: 10px; color: #5a7a9a; display: flex; align-items: center; gap: 4px; }
+.sdot { width: 6px; height: 6px; border-radius: 50%; }
+.dg { background: #22c55e; animation: dg 2s ease infinite; }
+.da { background: #f59e0b; animation: dg 1.2s ease infinite; }
+.dr { background: #ef4444; animation: bdr .5s step-end infinite; }
+.dd { background: #334; }
+@keyframes dg { 0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 3px transparent} }
+@keyframes bdr { 0%,100%{opacity:1}50%{opacity:0} }
+.clock { font-family: 'VT323', monospace; font-size: 20px; color: #4ade80; letter-spacing: 2px; }
+/* ── PROGRESS ── */
+.prog { height: 2px; background: #1e2535; overflow: hidden; display: none; flex-shrink: 0; }
+.prog.on { display: block; }
+.prog::after { content:''; display:block; height:100%; width:30%; background:#4ade80; animation:prun 1.4s ease-in-out infinite; }
+@keyframes prun { 0%{margin-left:-30%}100%{margin-left:110%} }
+/* ── MISSION BAR ── */
+.mbar {
+  background: #1e2535;
+  border-bottom: 1px solid #2a3550;
+  padding: 7px 16px;
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  z-index: 100;
+}
+.minput {
+  flex: 1; min-width: 180px; height: 30px;
+  background: #111825; border: 1px solid #2a3550;
+  color: #c8d8f0; font-family: 'Share Tech Mono', monospace; font-size: 11px;
+  padding: 0 10px; outline: none; border-radius: 2px;
+  transition: border-color .15s;
+}
+.minput:focus { border-color: #4ade80; }
+.minput::placeholder { color: #2a3d58; }
+.launch {
+  height: 30px; padding: 0 14px;
+  background: #22c55e; border: none; color: #0a1a0a;
+  font-family: 'VT323', monospace; font-size: 16px; letter-spacing: 2px;
+  cursor: pointer; border-radius: 2px; transition: background .15s; white-space: nowrap;
+}
+.launch:hover { background: #16a34a; }
+.launch:disabled { background: #1a3a25; color: #2a4a35; cursor: not-allowed; }
+.add-btn {
+  height: 30px; padding: 0 12px;
+  background: transparent; border: 1px solid #2a3550;
+  color: #5a7a9a; font-size: 10px; cursor: pointer;
+  border-radius: 2px; transition: all .15s; white-space: nowrap;
+}
+.add-btn:hover { border-color: #3b82f6; color: #3b82f6; }
+.mc-count { font-family: 'VT323', monospace; font-size: 15px; color: #2a3d58; white-space: nowrap; align-self: center; }
+/* ── MAIN ── */
+.main { display: grid; grid-template-columns: 1fr 230px; flex: 1; min-height: 0; overflow: hidden; }
+@media(max-width:780px){ .main{grid-template-columns:1fr} .sidebar{display:none} }
+/* ── OFFICE SCENE ── */
+.office {
+  position: relative;
+  overflow: hidden;
+  background: var(--floor);
+}
+/* WALL */
+.wall {
+  position: absolute; top: 0; left: 0; right: 0; height: 38%;
+  background: linear-gradient(180deg, var(--wall) 0%, var(--wall2) 100%);
+  box-shadow: inset 0 -8px 20px rgba(0,0,0,.08);
+}
+/* Wall trim */
+.wall::after {
+  content: '';
+  position: absolute; bottom: 0; left: 0; right: 0; height: 8px;
+  background: #c8bc9a;
+  box-shadow: 0 2px 6px rgba(0,0,0,.1);
+}
+/* FLOOR */
+.floor-area {
+  position: absolute; bottom: 0; left: 0; right: 0; top: 38%;
+  background: var(--floor);
+}
+/* Parquet pattern */
+.floor-area::before {
+  content: '';
+  position: absolute; inset: 0;
+  background-image:
+    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px),
+    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
+  background-size: 60px 40px;
+}
+/* BIG SCREEN — back wall */
+.big-screen {
+  position: absolute;
+  left: 50%; top: 3%;
+  transform: translateX(-50%);
+  width: min(38%, 340px);
+  aspect-ratio: 16/9;
+  background: var(--monitor-bg);
+  border: 6px solid #8a9aaa;
+  border-radius: 6px;
+  box-shadow: var(--shadow), inset 0 0 40px rgba(0,0,0,.3);
+  overflow: hidden;
+  z-index: 5;
+}
+.big-screen-inner {
+  width: 100%; height: 100%;
+  background: var(--monitor-screen);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px;
+  position: relative;
+  overflow: hidden;
+}
+.bs-title {
+  font-family: 'VT323', monospace;
+  font-size: 11px;
+  color: #4ade80;
+  letter-spacing: 3px;
+  text-align: center;
+}
+.bs-content {
+  font-size: 9px;
+  color: #a0d4b0;
+  text-align: center;
+  line-height: 1.5;
+  padding: 0 4px;
+  word-break: break-word;
+  max-height: 60%;
+  overflow: hidden;
+}
+.bs-scan {
+  position: absolute; left: 0; right: 0; height: 1px;
+  background: rgba(74,222,128,.3);
+  animation: scan-line 3s linear infinite;
+}
+@keyframes scan-line { 0%{top:0}100%{top:100%} }
+.bs-corner {
+  position: absolute; width: 8px; height: 8px;
+  border-color: #4ade80; border-style: solid;
+}
+.bs-corner.tl{top:4px;left:4px;border-width:2px 0 0 2px}
+.bs-corner.tr{top:4px;right:4px;border-width:2px 2px 0 0}
+.bs-corner.bl{bottom:4px;left:4px;border-width:0 0 2px 2px}
+.bs-corner.br{bottom:4px;right:4px;border-width:0 2px 2px 0}
+/* Screen stand */
+.screen-stand {
+  position: absolute;
+  left: 50%; transform: translateX(-50%);
+  width: 60px; height: 8px;
+  background: #8a9aaa;
+  border-radius: 0 0 4px 4px;
+  z-index: 4;
+}
+.screen-base {
+  position: absolute;
+  left: 50%; transform: translateX(-50%);
+  width: 100px; height: 5px;
+  background: #7a8a9a;
+  border-radius: 4px;
+  z-index: 4;
+}
+/* WINDOWS — back wall sides */
+.window {
+  position: absolute; top: 3%; width: 10%; height: 28%;
+  background: linear-gradient(180deg, #c8e8f8 0%, #a8d4f0 60%, #e8f4ff 100%);
+  border: 4px solid #d8ceb8;
+  border-radius: 3px;
+  box-shadow: inset 0 0 20px rgba(200,230,255,.5);
+  overflow: hidden;
+}
+.window::before {
+  content: ''; position: absolute;
+  top: 0; left: 50%; transform: translateX(-50%);
+  width: 3px; height: 100%; background: rgba(216,206,184,.8);
+}
+.window::after {
+  content: ''; position: absolute;
+  left: 0; top: 50%; transform: translateY(-50%);
+  height: 3px; width: 100%; background: rgba(216,206,184,.8);
+}
+.window.left { left: 4%; }
+.window.right { right: 4%; }
+/* SERVER RACK */
+.server-rack {
+  position: absolute;
+  top: 2%; right: 1%;
+  width: 52px;
+  background: var(--server);
+  border: 1px solid #2a3550;
+  border-radius: 2px;
+  padding: 5px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-shadow: var(--shadow-sm);
+  z-index: 5;
+}
+.rack-unit {
+  height: 8px;
+  background: var(--server2);
+  border: 1px solid #1a2a3a;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 3px;
+}
+.rack-led {
+  width: 4px; height: 4px; border-radius: 50%;
+}
+.rack-bar { flex: 1; height: 2px; background: #1a2a3a; }
+/* DESK */
+.desk {
+  position: absolute;
+  width: 130px; height: 72px;
+  background: var(--desk);
+  border-radius: 6px;
+  box-shadow: 0 12px 30px rgba(0,0,0,.18),
+              inset 0 3px 8px rgba(255,255,255,.22);
+}
+.desk::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: rgba(255,255,255,.28);
+  border-radius: 6px 6px 0 0;
+}
+/* Desk legs shadow */
+.desk::after {
+  content: '';
+  position: absolute; bottom: -14px; left: 8px; right: 8px; height: 14px;
+  background: linear-gradient(180deg, rgba(0,0,0,.15), transparent);
+}
+.desk-monitor {
+  position: absolute; top: 6px; left: 10px;
+  width: 88px; height: 52px;
+  background: #2a3545;
+  border: 2px solid #1a2535;
+  border-radius: 3px;
+  overflow: hidden;
+}
+.desk-monitor-screen {
+  width: 100%; height: 100%;
+  background: #0a1a28;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 7px; color: #4ade80; letter-spacing: 1px;
+  font-family: 'Share Tech Mono', monospace;
+  position: relative;
+}
+.desk-mug {
+  position: absolute; top: 10px; right: 8px;
+  width: 18px; height: 20px;
+  border-radius: 3px 3px 5px 5px;
+  box-shadow: inset 0 -4px 6px rgba(0,0,0,.2);
+}
+.desk-kbd {
+  position: absolute; bottom: 7px; left: 14px;
+  width: 70px; height: 8px;
+  background: #d4cdc0; border-radius: 2px;
+  box-shadow: inset 0 2px 4px rgba(0,0,0,.1);
+}
+.desk-paper {
+  position: absolute; bottom: 18px; right: 10px;
+  width: 28px; height: 20px;
+  background: #fafaf5;
+  border: 1px solid #ddd;
+  border-radius: 1px;
+  transform: rotate(-3deg);
+  box-shadow: 1px 1px 3px rgba(0,0,0,.1);
+}
+/* AGENT PERSON — CSS character */
+.agent-person {
+  position: absolute;
+  width: 36px; height: 80px;
+  z-index: 20;
+  transition: left .8s cubic-bezier(.4,0,.2,1), bottom .8s cubic-bezier(.4,0,.2,1);
+  cursor: pointer;
+}
+.p-head {
+  width: 24px; height: 24px;
+  background: var(--skin);
+  border-radius: 50%;
+  position: absolute; top: 0; left: 6px;
+  box-shadow: 0 3px 8px rgba(0,0,0,.15);
+}
+.p-hair {
+  width: 26px; height: 16px;
+  position: absolute; top: -5px; left: 5px;
+  border-radius: 50% 50% 20% 20%;
+}
+.p-eyes {
+  position: absolute; top: 9px; left: 8px;
+  display: flex; gap: 6px;
+}
+.p-eye { width: 4px; height: 4px; background: #2a1a0a; border-radius: 50%; }
+.p-body {
+  width: 28px; height: 38px;
+  position: absolute; top: 22px; left: 4px;
+  border-radius: 8px 8px 6px 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,.15);
+}
+.p-arms {
+  position: absolute; top: 26px; left: 0; right: 0; height: 24px;
+}
+.p-arm {
+  position: absolute; width: 8px; height: 22px;
+  border-radius: 4px;
+  top: 0;
+}
+.p-arm.left { left: 0; transform-origin: top center; }
+.p-arm.right { right: 0; transform-origin: top center; }
+.p-legs { position: absolute; top: 58px; left: 4px; right: 4px; height: 20px; display: flex; gap: 2px; }
+.p-leg { flex: 1; background: #2a3545; border-radius: 2px 2px 4px 4px; height: 100%; }
+.p-feet { position: absolute; top: 74px; left: 2px; right: 2px; display: flex; gap: 4px; }
+.p-foot { flex: 1; height: 6px; background: #1a1a2a; border-radius: 0 0 3px 3px; }
+/* Walking animation */
+@keyframes walk-bob { 0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)} }
+@keyframes arm-swing-l { 0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)} }
+@keyframes arm-swing-r { 0%,100%{transform:rotate(15deg)}50%{transform:rotate(-15deg)} }
+@keyframes work-type { 0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)} }
+@keyframes breathe { 0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.02)} }
+.agent-person.walking { animation: walk-bob .5s ease-in-out infinite; }
+.agent-person.walking .p-arm.left { animation: arm-swing-l .5s ease-in-out infinite; }
+.agent-person.walking .p-arm.right { animation: arm-swing-r .5s ease-in-out infinite; }
+.agent-person.working .p-arm.left { animation: work-type .3s ease-in-out infinite; }
+.agent-person.working .p-arm.right { animation: work-type .3s ease-in-out infinite reverse; }
+.agent-person.idle .p-body { animation: breathe 3s ease-in-out infinite; }
+/* Agent name tag */
+.agent-tag {
+  position: absolute;
+  bottom: -18px; left: 50%; transform: translateX(-50%);
+  font-size: 8px; white-space: nowrap;
+  font-family: 'VT323', monospace;
+  letter-spacing: 1px;
+  padding: 1px 5px;
+  border-radius: 2px;
+  opacity: .9;
+}
+/* Talk bubble */
+.talk-bubble {
+  position: absolute;
+  bottom: 88px; left: 50%;
+  transform: translateX(-50%) scale(.9);
+  background: white; color: var(--text);
+  padding: 6px 10px;
+  border-radius: 10px;
+  font-size: 10px; font-family: 'Share Tech Mono', monospace;
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid #ddd;
+  opacity: 0;
+  transition: all .3s;
+  z-index: 30;
+  pointer-events: none;
+  max-width: 160px;
+  white-space: normal;
+  text-align: center;
+  line-height: 1.3;
+}
+.talk-bubble::after {
+  content: '';
+  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: white;
+}
+.talk-bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }
+/* Status glow ring */
+.agent-person.working::before {
+  content: '';
+  position: absolute; inset: -4px;
+  border-radius: 50%;
+  border: 2px solid;
+  animation: dg 1s ease infinite;
+}
+/* PLANT */
+.plant {
+  position: absolute;
+  z-index: 6;
+}
+.plant-pot { width: 20px; height: 16px; background: #a07050; border-radius: 0 0 4px 4px; margin: 0 auto; }
+.plant-soil { width: 24px; height: 5px; background: #5a3a20; border-radius: 2px; margin: 0 auto; }
+.plant-leaves { display: flex; justify-content: center; gap: 3px; margin-bottom: 2px; }
+.plant-leaf { width: 12px; height: 18px; background: #2d7a3a; border-radius: 50% 50% 40% 40%; }
+.plant-leaf:nth-child(1) { transform: rotate(-25deg); background: #267030; }
+.plant-leaf:nth-child(3) { transform: rotate(25deg); background: #34884a; }
+/* BOOKSHELF */
+.bookshelf {
+  position: absolute;
+  background: #b8905a;
+  border: 2px solid #9a7840;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 3px 4px;
+  z-index: 5;
+}
+.book-row { display: flex; gap: 1px; }
+.book { width: 6px; height: 18px; border-radius: 1px 2px 2px 1px; }
+/* RESULT PANEL */
+.result-panel {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  max-height: 42%;
+  background: rgba(248,249,250,.96);
+  border-top: 2px solid #ddd;
+  padding: 10px 14px;
+  overflow-y: auto;
+  z-index: 50;
+  display: none;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 -8px 32px rgba(0,0,0,.12);
+}
+.result-panel.show { display: block; }
+.rp-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+.rp-title { font-family: 'VT323', monospace; font-size: 16px; color: var(--text); letter-spacing: 2px; }
+.rp-close { cursor: pointer; color: var(--text3); font-size: 16px; padding: 2px 8px; border: 1px solid #ddd; border-radius: 3px; }
+.rp-close:hover { background: #f0f0f0; }
+.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
+.rp-card {
+  background: white; border: 1px solid #e8e8e8;
+  border-radius: 6px; padding: 10px 12px;
+  box-shadow: var(--shadow-sm);
+}
+.rp-name {
+  font-family: 'VT323', monospace; font-size: 14px;
+  letter-spacing: 1px; margin-bottom: 5px;
+  display: flex; align-items: center; gap: 6px;
+}
+.rp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.rp-text { font-size: 10px; color: var(--text2); line-height: 1.5; word-break: break-word; }
+.rp-model { font-size: 9px; color: var(--text3); margin-top: 5px; }
+.dl-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  margin-top: 6px; padding: 4px 10px;
+  background: #f0f9f0; border: 1px solid #4ade80;
+  color: #16a34a; font-size: 9px; cursor: pointer;
+  text-decoration: none; border-radius: 3px;
+  font-family: 'Share Tech Mono', monospace;
+  transition: background .15s;
+}
+.dl-btn:hover { background: #dcfce7; }
+.img-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
+.img-th {
+  width: 64px; height: 46px; object-fit: cover;
+  border: 1px solid #ddd; border-radius: 3px;
+  cursor: pointer; transition: border-color .15s;
+}
+.img-th:hover { border-color: #4ade80; }
+/* Orch log in result panel */
+.orch-log { margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee; }
+.orch-title { font-family: 'VT323', monospace; font-size: 12px; color: var(--text3); letter-spacing: 2px; margin-bottom: 4px; }
+.orch-ev { font-size: 9px; color: var(--text3); padding: 1px 0; display: flex; gap: 8px; }
+.orch-t { color: var(--text3); flex-shrink: 0; }
+/* LIGHTBOX */
+.lbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 900; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
+.lbox.show { display: flex; }
+.lbox img { max-width: 85vw; max-height: 72vh; border-radius: 4px; box-shadow: var(--shadow); }
+.lbox-btns { display: flex; gap: 10px; }
+.lbox-dl { display:inline-flex;align-items:center;gap:4px;padding:6px 16px;background:rgba(74,222,128,.1);border:1px solid #4ade80;color:#4ade80;font-size:11px;cursor:pointer;text-decoration:none;border-radius:3px; }
+.lbox-cl { font-size: 13px; color: #8a9aaa; cursor: pointer; padding: 6px 16px; border: 1px solid #334; border-radius: 3px; }
+.lbox-cl:hover { color: white; }
 /* WALK OVERLAY */
+.walk-ov { position: fixed; inset: 0; background: rgba(248,249,250,.94); z-index: 400; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; backdrop-filter: blur(4px); }
+.walk-ov.show { display: flex; }
+.walk-wrap { width: min(680px,94vw); height: min(340px,50vh); background: white; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); position: relative; }
+.walk-lbl { font-family: 'VT323', monospace; font-size: 14px; color: var(--text); letter-spacing: 3px; }
+.walk-log { font-size: 10px; color: var(--text2); height: 14px; font-family: 'Share Tech Mono', monospace; }
+/* MODAL */
+.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300; display: none; align-items: center; justify-content: center; }
+.modal-bg.show { display: flex; }
+.modal { background: white; border-radius: 8px; padding: 22px; width: 360px; box-shadow: var(--shadow); }
+.modal-t { font-family: 'VT323', monospace; font-size: 20px; color: var(--text); letter-spacing: 2px; margin-bottom: 14px; }
+.field { margin-bottom: 10px; }
+.field label { display: block; font-size: 10px; color: var(--text2); letter-spacing: 1px; margin-bottom: 3px; }
+.field input, .field select, .field textarea { width: 100%; background: #f8f9fa; border: 1px solid #ddd; color: var(--text); font-family: 'Share Tech Mono', monospace; font-size: 11px; padding: 6px 8px; outline: none; border-radius: 3px; transition: border-color .15s; }
+.field input:focus, .field select:focus, .field textarea:focus { border-color: #22c55e; }
+.field textarea { resize: vertical; min-height: 50px; }
+.modal-acts { display: flex; gap: 7px; justify-content: flex-end; margin-top: 12px; }
+.mbtn { padding: 6px 16px; font-size: 11px; cursor: pointer; border: 1px solid; background: transparent; border-radius: 3px; transition: all .15s; }
+.mbtn-ok { border-color: #22c55e; color: #16a34a; }
+.mbtn-ok:hover { background: #f0fdf4; }
+.mbtn-no { border-color: #ddd; color: var(--text2); }
+.mbtn-no:hover { background: #f8f9fa; }
 /* NOTIFICATION */
+.notif {
+  position: fixed; top: 52px; right: 14px;
+  background: white; border: 1px solid #ddd; border-left: 3px solid #22c55e;
+  padding: 10px 14px; max-width: 260px; z-index: 600;
+  transform: translateX(280px); transition: transform .3s ease;
+  border-radius: 6px; box-shadow: var(--shadow); font-size: 11px;
+}
+.notif.show { transform: translateX(0); }
+.notif-t { font-family: 'VT323', monospace; font-size: 16px; letter-spacing: 1px; margin-bottom: 2px; }
+.notif-m { color: var(--text2); font-size: 10px; line-height: 1.4; }
 /* SIDEBAR */
+.sidebar { background: white; border-left: 1px solid #e8e8e8; display: flex; flex-direction: column; overflow: hidden; }
+.sb-sec { border-bottom: 1px solid #eee; flex-shrink: 0; }
+.sb-t { font-family: 'VT323', monospace; font-size: 13px; color: var(--text2); padding: 8px 12px 6px; border-bottom: 1px solid #eee; letter-spacing: 2px; }
+.act-scroll { overflow-y: auto; max-height: 240px; }
+.act-item { padding: 6px 12px; border-bottom: 1px solid #f0f0f0; display: flex; gap: 6px; }
+.act-dot { width: 4px; height: 4px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
+.act-msg { font-size: 10px; color: var(--text); line-height: 1.4; }
+.act-time { font-size: 9px; color: var(--text3); margin-top: 1px; }
+.hist-scroll { overflow-y: auto; max-height: 200px; }
+.hist-item { padding: 7px 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background .1s; }
+.hist-item:hover { background: #f8f9fa; }
+.hist-task { font-size: 10px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hist-meta { font-size: 9px; color: var(--text3); margin-top: 2px; display: flex; gap: 6px; }
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
 </style>
 </head>
 <body>
+<!-- TOPBAR -->
 <header class="topbar">
   <div style="display:flex;align-items:center;gap:8px">
     <span class="tb-logo">MISSION CONTROL AI</span>
+    <span style="font-size:9px;color:#2a3d58">v7</span>
   </div>
   <div class="tb-right">
     <div class="tb-stat"><div class="sdot dg"></div><span id="top-active">0 active</span></div>
     <div class="clock" id="clock">00:00:00</div>
   </div>
 </header>
 <div class="prog" id="prog"></div>
+<!-- MISSION BAR -->
 <div class="mbar">
+  <input class="minput" id="task-input" placeholder="Assign mission to agents..." autocomplete="off"/>
   <button class="launch" id="launch-btn" onclick="launchMission()">&#9658; LAUNCH</button>
   <button class="add-btn" onclick="openModal()">+ Agent</button>
+  <span class="mc-count" id="mc-count">MISSIONS: 0</span>
 </div>
+<!-- MAIN -->
 <div class="main">
+  <div class="office" id="office">
+    <!-- WALL -->
+    <div class="wall"></div>
+    <!-- WINDOWS -->
+    <div class="window left"></div>
+    <div class="window right"></div>
+    <!-- FLOOR -->
+    <div class="floor-area"></div>
+    <!-- BIG SCREEN -->
+    <div class="big-screen" id="big-screen">
+      <div class="big-screen-inner">
+        <div class="bs-corner tl"></div>
+        <div class="bs-corner tr"></div>
+        <div class="bs-corner bl"></div>
+        <div class="bs-corner br"></div>
+        <div class="bs-scan"></div>
+        <div class="bs-title" id="bs-title">MISSION CONTROL AI</div>
+        <div class="bs-content" id="bs-content">Awaiting mission...</div>
+      </div>
     </div>
+    <!-- Screen stand -->
+    <div class="screen-stand" id="screen-stand" style="top:0;"></div>
+    <div class="screen-base"  id="screen-base"  style="top:0;"></div>
+    <!-- SERVER RACK -->
+    <div class="server-rack" id="server-rack-el"></div>
+    <!-- PLANTS -->
+    <div class="plant" style="right:16%;bottom:32%">
+      <div class="plant-leaves"><div class="plant-leaf"></div><div class="plant-leaf"></div><div class="plant-leaf"></div></div>
+      <div class="plant-soil"></div><div class="plant-pot"></div>
+    </div>
+    <div class="plant" style="left:17%;bottom:30%">
+      <div class="plant-leaves"><div class="plant-leaf"></div><div class="plant-leaf"></div><div class="plant-leaf"></div></div>
+      <div class="plant-soil"></div><div class="plant-pot"></div>
+    </div>
+    <!-- BOOKSHELF -->
+    <div class="bookshelf" style="left:1%;top:10%;width:36px;height:70px" id="bookshelf-el"></div>
+    <!-- DESKS rendered by JS -->
+    <div id="desks-layer"></div>
+    <!-- AGENTS rendered by JS -->
+    <div id="agents-layer"></div>
+    <!-- RESULT PANEL -->
+    <div class="result-panel" id="result-panel">
+      <div class="rp-header">
+        <div class="rp-title">MISSION RESULTS</div>
+        <div class="rp-close" onclick="document.getElementById('result-panel').classList.remove('show')">&#10005; close</div>
+      </div>
+      <div class="rp-grid" id="rp-grid"></div>
+      <div id="orch-log-wrap"></div>
+    </div>
   </div>
+  <!-- SIDEBAR -->
   <aside class="sidebar">
     <div class="sb-sec"><div class="sb-t">ACTIVITY</div><div class="act-scroll" id="act-log"></div></div>
+    <div class="sb-sec"><div class="sb-t">MISSIONS</div>
+      <div class="hist-scroll" id="hist-log">
+        <div style="padding:12px;font-size:10px;color:var(--text3);text-align:center">No missions yet</div>
+      </div>
+    </div>
   </aside>
 </div>
 <!-- WALK OVERLAY -->
+<div class="walk-ov" id="walk-ov">
+  <div class="walk-lbl" id="walk-lbl">MANAGER HEADING TO CONFERENCE ROOM</div>
   <div class="walk-wrap"><canvas id="walk-canvas"></canvas></div>
+  <div class="walk-log" id="walk-log">Preparing briefing...</div>
 </div>
 <!-- LIGHTBOX -->
+<div class="lbox" id="lbox" onclick="if(event.target===this)closeLbox()">
+  <img id="lbox-img" src="" alt=""/>
+  <div class="lbox-btns">
+    <a class="lbox-dl" id="lbox-dl" href="#" download>&#8595; Download</a>
+    <div class="lbox-cl" onclick="closeLbox()">&#10005; Close</div>
   </div>
 </div>
 <!-- ADD AGENT MODAL -->
 <div class="modal-bg" id="modal-bg" onclick="if(event.target===this)closeModal()">
   <div class="modal">
+    <div class="modal-t">+ New Agent</div>
+    <div class="field"><label>Key (ID)</label><input id="m-key" placeholder="e.g. researcher"/></div>
+    <div class="field"><label>Name</label><input id="m-name" placeholder="e.g. Researcher"/></div>
     <div class="field"><label>Role</label><textarea id="m-role" placeholder="Especialista en..."></textarea></div>
+    <div class="field"><label>Provider</label>
+      <select id="m-prov">
+        <option value="openrouter">OpenRouter (free)</option>
+        <option value="gemini">Google Gemini</option>
+        <option value="groq">Groq</option>
+      </select>
+    </div>
     <div class="modal-acts">
       <button class="mbtn mbtn-no" onclick="closeModal()">Cancel</button>
       <button class="mbtn mbtn-ok" onclick="submitAgent()">Add Agent</button>
 <!-- NOTIFICATION -->
 <div class="notif" id="notif">
+  <div class="notif-t" id="notif-t">Done</div>
   <div class="notif-m" id="notif-m"></div>
 </div>
 <script>
+// ── CONFIG ────────────────────────────────────────────────────────────────
+const AGENT_COLORS = {
+  manager:'#22c55e', backend_dev:'#3b82f6', frontend_dev:'#a855f7',
+  analyst:'#f59e0b', writer:'#06b6d4', image_agent:'#ec4899', developer:'#3b82f6'
+};
+const SHIRT_COLORS = {
+  manager:'#166534', backend_dev:'#1e3a6e', frontend_dev:'#581c87',
+  analyst:'#78350f', writer:'#164e63', image_agent:'#831843', developer:'#1e3a6e'
+};
+const HAIR_COLORS = { manager:'#4a2e18', backend_dev:'#1a1a2e', frontend_dev:'#2e0a4a', analyst:'#3a2010', writer:'#0a2a3a', image_agent:'#2a0a1a', developer:'#1a1a2e' };
+const SPEECH_IDLE = { manager:['Planning next move...','Reviewing KPIs...','Coffee break?'], backend_dev:['Debugging...','Push to prod?','PR approved!'], frontend_dev:['CSS is fine...','Pixel perfect!','Dark mode ftw'], analyst:['Numbers check out','Risk: medium','ROI looks good'], writer:['Draft complete','Editing now...','Words per minute: ∞'], image_agent:['Searching...','Found it!','Resolution: HD'], developer:['Compiling...','Ship it!','LGTM'] };
+const SPEECH_WORK = { manager:['Delegating now...','Team briefed!','Executing plan'], backend_dev:['Building...','Almost done...','Tests passing!'], frontend_dev:['Styling...','Responsive ✓','Deployed!'], analyst:['Analyzing data...','Insight found!','Report ready'], writer:['Writing report...','First draft done','Publishing...'], image_agent:['Fetching image...','Generating AI...','Found 3 images!'], developer:['Coding...','Feature done!','Bug fixed!'] };
+const PROV_MODELS = { openrouter:['meta-llama/llama-3.3-70b-instruct:free','qwen/qwen3-4b:free'], gemini:['gemini-2.5-flash-preview-04-17','gemini-2.0-flash'], groq:['llama3-70b-8192','gemma2-9b-it'] };
+let agentDefs=[], agentStates={}, agentPositions={}, agentTargets={}, agentModes={};
+let activity=[], history=[], mCount=0, bubbleTimers={};
+let officeW=0, officeH=0;
+// ── INIT ───────────────────────────────────────────────────────────────────
+async function init(){
+  positionScreenElements();
+  buildServerRack();
+  buildBookshelf();
+  const r = await fetch('/api/agents'), d = await r.json();
+  agentDefs = d.agents;
+  agentDefs.forEach(a=>{
+    agentStates[a.key]   = { status:'idle', message:'', model:'', doc_file:null, img_base:null, img_count:0 };
+    agentModes[a.key]    = 'idle';
+  });
+  renderDesks();
+  renderAgents();
+  startIdleLife();
+  addAct('Office open — agents ready','#22c55e');
 }
+function positionScreenElements(){
+  const office = document.getElementById('office');
+  officeW = office.clientWidth; officeH = office.clientHeight;
+  const screen = document.getElementById('big-screen');
+  const sw = screen.offsetWidth, sh = screen.offsetHeight;
+  const screenBottom = officeH * 0.04 + sh;
+  document.getElementById('screen-stand').style.cssText = `top:${screenBottom}px;left:${officeW/2-30}px;`;
+  document.getElementById('screen-base').style.cssText  = `top:${screenBottom+8}px;left:${officeW/2-50}px;`;
+}
+// ── SERVER RACK ────────────────────────────────────────────────────────────
+function buildServerRack(){
+  const el = document.getElementById('server-rack-el');
+  el.style.cssText = `position:absolute;top:3%;right:1%;width:52px;background:#1a2035;border:1px solid #2a3550;border-radius:2px;padding:5px 4px;display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:5`;
+  const ledColors = ['#22c55e','#3b82f6','#f59e0b','#22c55e','#ec4899','#22c55e','#3b82f6'];
+  let html = '';
+  ledColors.forEach((c,i)=>{
+    html += `<div style="height:8px;background:#0d1520;border:1px solid #1a2a3a;display:flex;align-items:center;gap:2px;padding:0 3px">
+      <div style="width:4px;height:4px;border-radius:50%;background:${c};animation:led-blink ${.8+i*.3}s ease-in-out infinite alternate" class="rack-led"></div>
+      <div style="flex:1;height:2px;background:#1a2a3a"></div>
+    </div>`;
+  });
+  el.innerHTML = html + `<div style="font-family:'VT323',monospace;font-size:8px;color:#2a3d58;text-align:center;letter-spacing:1px;margin-top:2px">SRV</div>`;
+}
+// ── BOOKSHELF ──────────────────────────────────────────────────────────────
+function buildBookshelf(){
+  const el = document.getElementById('bookshelf-el');
+  const BOOKS = ['#e74c3c','#3498db','#2ecc71','#f39c12','#9b59b6','#1abc9c','#e67e22','#34495e','#e91e63','#00bcd4'];
+  let html = '';
+  for(let row=0;row<3;row++){
+    html += '<div class="book-row">';
+    for(let b=0;b<5;b++) html += `<div class="book" style="background:${BOOKS[(row*5+b)%BOOKS.length]}"></div>`;
+    html += '</div>';
+  }
+  el.innerHTML = html;
+}
+// ── DESK POSITIONS ─────────────────────────────────────────────────────────
+function getDeskPositions(count){
+  const positions = [];
+  const cols = Math.ceil(count/2);
+  for(let i=0;i<count;i++){
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const xPct = 15 + (col / Math.max(cols-1,1)) * 65;
+    const yFromBottom = 22 + row * 22; // % from bottom
+    positions.push({ xPct, yFromBottom });
   }
+  return positions;
+}
+function renderDesks(){
+  const layer = document.getElementById('desks-layer');
+  const positions = getDeskPositions(agentDefs.length);
+  const mugColors = ['#f6eb61','#ff8a65','#4fc3f7','#a5d6a7','#ce93d8','#ffcc02'];
+  layer.innerHTML = agentDefs.map((agent,i)=>{
+    const pos = positions[i];
+    const color = AGENT_COLORS[agent.key] || '#3b82f6';
+    const status = agentStates[agent.key]?.status || 'idle';
+    const screenTxt = status==='working' ? '▌▌ BUSY ▌▌' : status==='active' ? '● DONE' : '— IDLE';
+    const screenColor = status==='working' ? '#4ade80' : status==='active' ? '#22c55e' : '#334';
+    return `<div id="desk-${agent.key}" class="desk" style="left:${pos.xPct}%;bottom:${pos.yFromBottom}%;transform:translateX(-50%)">
+      <div class="desk-monitor">
+        <div class="desk-monitor-screen" id="dscreen-${agent.key}" style="color:${screenColor}">${screenTxt}</div>
+      </div>
+      <div class="desk-mug" style="background:${mugColors[i%mugColors.length]}"></div>
+      <div class="desk-kbd"></div>
+      <div class="desk-paper"></div>
+    </div>`;
+  }).join('');
+}
+// ── AGENT RENDERING ────────────────────────────────────────────────────────
+function seatPosition(agentKey){
+  const i = agentDefs.findIndex(a=>a.key===agentKey);
+  if(i<0) return {x:50,y:30};
+  const positions = getDeskPositions(agentDefs.length);
+  const pos = positions[i];
+  return { x: pos.xPct, y: pos.yFromBottom + 12 };
+}
+function renderAgents(){
+  const layer = document.getElementById('agents-layer');
+  layer.innerHTML = agentDefs.map(agent=>{
+    const color  = AGENT_COLORS[agent.key] || '#3b82f6';
+    const shirt  = SHIRT_COLORS[agent.key] || '#1e3a6e';
+    const hair   = HAIR_COLORS[agent.key]  || '#1a1a2e';
+    const st     = agentStates[agent.key] || {};
+    const status = st.status || 'idle';
+    const seat   = seatPosition(agent.key);
+    const mode   = agentModes[agent.key] || 'idle';
+    const isEmpty = status === 'resting';
+    if(!agentPositions[agent.key]) agentPositions[agent.key] = { x:seat.x, y:seat.y };
+    const pos = agentPositions[agent.key];
+    const modeClass = mode === 'walking' ? 'walking' : mode === 'working' ? 'working' : 'idle';
+    const tagColor = status==='working'?color : status==='active'?'#16a34a' : status==='resting'?'#f59e0b' : '#8a9aaa';
+    const tagBg = status==='working'?`${color}22` : 'rgba(255,255,255,.8)';
+    const tagLabel = {idle:'IDLE',working:'●',active:'✓',resting:'ZZZ',error:'!'}[status]||'IDLE';
+    return `<div class="agent-person ${modeClass}" id="agent-${agent.key}"
+      style="left:${pos.x}%;bottom:${pos.y}%;transform:translateX(-50%);${isEmpty?'opacity:.3':''}"
+      onclick="onAgentClick('${agent.key}')">
+      <div class="p-hair" style="background:${hair}"></div>
+      <div class="p-head"><div class="p-eyes"><div class="p-eye"></div><div class="p-eye"></div></div></div>
+      <div class="p-body" style="background:${shirt}">
+        <div style="position:absolute;top:4px;left:50%;transform:translateX(-50%);width:10px;height:3px;background:${color};opacity:.6;border-radius:1px"></div>
       </div>
+      <div class="p-arms">
+        <div class="p-arm left" style="background:${shirt}"></div>
+        <div class="p-arm right" style="background:${shirt}"></div>
       </div>
+      <div class="p-legs"><div class="p-leg"></div><div class="p-leg"></div></div>
+      <div class="p-feet"><div class="p-foot"></div><div class="p-foot"></div></div>
+      <div class="agent-tag" style="color:${tagColor};background:${tagBg}">${tagLabel} ${agent.name}</div>
+      <div class="talk-bubble" id="bubble-${agent.key}"></div>
+      ${isEmpty?`<div style="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-size:16px">💤</div>`:''}
+    </div>`;
+  }).join('');
+}
+function updateAgentEl(agentKey){
+  const el = document.getElementById(`agent-${agentKey}`);
+  if(!el) return;
+  const st    = agentStates[agentKey] || {};
+  const status = st.status || 'idle';
+  const mode   = agentModes[agentKey] || 'idle';
+  const color  = AGENT_COLORS[agentKey] || '#3b82f6';
+  const pos    = agentPositions[agentKey] || seatPosition(agentKey);
+  el.style.left   = pos.x + '%';
+  el.style.bottom = pos.y + '%';
+  el.className = `agent-person ${mode}`;
+  el.style.opacity = status === 'resting' ? '.3' : '1';
+  el.style.transform = 'translateX(-50%)';
+  // Tag
+  const tag = el.querySelector('.agent-tag');
+  if(tag){
+    const tagColor = status==='working'?color : status==='active'?'#16a34a' : status==='resting'?'#f59e0b' : '#8a9aaa';
+    const tagBg    = status==='working'?`${color}22` : 'rgba(255,255,255,.8)';
+    const name     = agentDefs.find(a=>a.key===agentKey)?.name || agentKey;
+    tag.style.color      = tagColor;
+    tag.style.background = tagBg;
+    tag.textContent      = ({idle:'IDLE',working:'●',active:'✓',resting:'ZZZ',error:'!'}[status]||'IDLE') + ' ' + name;
+  }
+  // Desk monitor
+  const dscreen = document.getElementById(`dscreen-${agentKey}`);
+  if(dscreen){
+    dscreen.textContent = status==='working'?'▌▌ BUSY ▌▌': status==='active'?'● DONE':'— IDLE';
+    dscreen.style.color = status==='working'?'#4ade80':status==='active'?'#22c55e':'#334';
+  }
 }
+function onAgentClick(key){
+  const st = agentStates[key];
+  if(st && st.message) showSingleResult(key);
 }
+function showSingleResult(key){
+  const st = agentStates[key];
+  if(!st || !st.message) return;
+  const agent = agentDefs.find(a=>a.key===key);
+  const color = AGENT_COLORS[key]||'#3b82f6';
+  let extra='';
+  if(st.doc_file){
+    const ext=st.doc_file.split('.').pop().toLowerCase();
+    const label={xlsx:'Excel',docx:'Word',html:'HTML',py:'Python',groovy:'Groovy',jpg:'Image'}[ext]||'File';
+    extra+=`<a class="dl-btn" href="/api/docs/${st.doc_file}" download>&#8595; Download ${label}</a>`;
   }
+  if(st.img_base&&st.img_count>0){
+    const thumbs=Array.from({length:st.img_count},(_,i)=>`<img class="img-th" src="/api/docs/${st.img_base}_img${i+1}.jpg" onclick="openLbox('/api/docs/${st.img_base}_img${i+1}.jpg','img${i+1}.jpg')"/>`).join('');
+    extra+=`<div class="img-row">${thumbs}</div>`;
+  }
+  document.getElementById('rp-grid').innerHTML=`<div class="rp-card">
+    <div class="rp-name"><div class="rp-dot" style="background:${color}"></div><span style="color:${color}">${agent?.name||key}</span></div>
+    <div class="rp-text">${(st.message||'').substring(0,500)}</div>
+    ${st.model?`<div class="rp-model">via ${st.model}</div>`:''}
+    ${extra}
+  </div>`;
+  document.getElementById('result-panel').classList.add('show');
 }
+// ── IDLE LIFE ──────────────────────────────────────────────────────────────
+function startIdleLife(){
+  setInterval(()=>{
+    agentDefs.forEach(agent=>{
+      const st = agentStates[agent.key]?.status || 'idle';
+      if(st === 'working') return;
+      const mode = agentModes[agent.key] || 'idle';
+      if(Math.random() < .25){
+        if(mode === 'idle' || mode === 'talking'){
+          // Start walking to random spot
+          agentModes[agent.key] = 'walking';
+          const targetX = 10 + Math.random() * 75;
+          const targetY = 10 + Math.random() * 35;
+          agentTargets[agent.key] = { x: targetX, y: targetY };
+        }
+      }
+      if(Math.random() < .06){
+        const phrases = SPEECH_IDLE[agent.key] || ['Working...'];
+        showBubble(agent.key, phrases[Math.floor(Math.random()*phrases.length)], 2500);
+      }
+    });
+  }, 3000);
+  // Smooth movement loop
+  setInterval(()=>{
+    agentDefs.forEach(agent=>{
+      const st = agentStates[agent.key]?.status || 'idle';
+      if(st === 'working'){
+        // Stay at desk
+        const seat = seatPosition(agent.key);
+        agentPositions[agent.key] = { x: seat.x, y: seat.y };
+        agentModes[agent.key] = 'working';
+        updateAgentEl(agent.key);
+        return;
+      }
+      const target = agentTargets[agent.key];
+      if(!target) return;
+      const pos = agentPositions[agent.key] || seatPosition(agent.key);
+      const dx = target.x - pos.x, dy = target.y - pos.y;
+      const dist = Math.sqrt(dx*dx+dy*dy);
+      if(dist < 1.2){
+        agentPositions[agent.key] = { x: target.x, y: target.y };
+        agentTargets[agent.key]   = null;
+        agentModes[agent.key]     = 'idle';
+      } else {
+        const spd = 0.4;
+        agentPositions[agent.key] = { x: pos.x + dx/dist*spd, y: pos.y + dy/dist*spd };
+        agentModes[agent.key] = 'walking';
+      }
+      updateAgentEl(agent.key);
+    });
+  }, 80);
 }
+// ── CLOCK ──────────────────────────────────────────────────────────────────
+setInterval(()=>{
+  const n=new Date();
+  const t=[n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
+  document.getElementById('clock').textContent=t;
+},1000);
+// ── SPEECH BUBBLES ─────────────────────────────────────────────────────────
+function showBubble(key, text, ms=2500){
+  const b = document.getElementById(`bubble-${key}`);
+  if(!b) return;
+  if(bubbleTimers[key]) clearTimeout(bubbleTimers[key]);
+  b.textContent = text;
+  b.classList.add('show');
+  bubbleTimers[key] = setTimeout(()=>b.classList.remove('show'), ms);
 }
+// ── SCREEN UPDATE ──────────────────────────────────────────────────────────
+function updateScreen(title, content){
+  document.getElementById('bs-title').textContent = title;
+  document.getElementById('bs-content').textContent = content;
 }
+// ── ACTIVITY ───────────────────────────────────────────────────────────────
+function addAct(msg,color='#3b82f6'){
   const n=new Date();
   const t=[n.getHours(),n.getMinutes(),n.getSeconds()].map(x=>String(x).padStart(2,'0')).join(':');
   activity.unshift({msg,t,color});
   ).join('');
 }
+function notify(title,msg,color='#22c55e'){
   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;
+  document.getElementById('notif').classList.add('show');
+  setTimeout(()=>document.getElementById('notif').classList.remove('show'),5500);
 }
 function updateHistory(){
   const list=document.getElementById('hist-log');
+  if(!history.length){list.innerHTML=`<div style="padding:12px;font-size:10px;color:var(--text3);text-align:center">No missions yet</div>`;return;}
+  list.innerHTML=[...history].reverse().map(m=>`<div class="hist-item" onclick=""><div class="hist-task">${m.task}</div><div class="hist-meta"><span>${m.time}</span><span style="color:${m.ok?'#16a34a':'#f59e0b'}">${m.ok?'Done':'Partial'}</span></div></div>`).join('');
 }
+// ── WALK OVERLAY ANIMATION ─────────────────────────────────────────────────
 function runWalkAnimation(task, delegates, onDone){
+  const ov=document.getElementById('walk-ov');
+  const wc=document.getElementById('walk-canvas');
   const logEl=document.getElementById('walk-log');
+  const wrap=wc.parentElement;
+  wc.width=wrap.clientWidth||640; wc.height=wrap.clientHeight||320;
+  const W=wc.width,H=wc.height,ctx=wc.getContext('2d');
+  ov.classList.add('show');
+  // Light office background
+  const others=agentDefs.filter(a=>a.key!=='manager').slice(0,6);
   const delSet=new Set(delegates);
+  const deskW=100,deskH=52,deskY=H*0.52;
+  const spacing=(W-80)/(Math.max(others.length-1,1)||1);
+  const desks=others.map((a,i)=>({
+    x:40+i*spacing, y:deskY, key:a.key, name:a.name,
+    color:AGENT_COLORS[a.key]||'#3b82f6',
+    shirt:SHIRT_COLORS[a.key]||'#1e3a6e',
+    hair:HAIR_COLORS[a.key]||'#1a1a2e',
+  }));
+  const delSet2=new Set(delegates);
+  const toVisit=desks.filter(d=>delSet2.has(d.key));
+  const msgs={writer:`Write report on:\n"${task.substring(0,22)}..."`,analyst:`Analyze results\nfor this task.`,backend_dev:`Build solution:\n"${task.substring(0,22)}..."`,frontend_dev:`Design the HTML\ninterface.`,image_agent:`Find/generate\nimages now.`};
+  const manColor='#22c55e',manShirt='#166534',manHair='#4a2e18';
+  let mx=W/2,my=6,frame=0,stepI=0,phase='walking',talkF=0;
+  const TALK=75,SPD=3.2;
+  const steps=[{key:'__top',x:W/2,y:H*0.14,msg:'Team! New mission.'},{...toVisit.map(d=>({key:d.key,x:d.x,y:deskY-20,msg:msgs[d.key]||'Please handle this.'}))}.length===0?{key:'__back',x:W/2,y:H*0.14,msg:'All briefed!'}:{key:'__dummy'},...toVisit.map(d=>({key:d.key,x:d.x,y:deskY-20,msg:msgs[d.key]||'Please handle this.'})),{key:'__back',x:W/2,y:H*0.14,msg:'All briefed!'}].filter(s=>s.key!=='__dummy');
   const visited=new Set(); let curMsg='';
+  function drawPerson(x,y,hair,shirt,color,scale=1){
+    const s=scale;
+    // Hair
+    ctx.fillStyle=hair; ctx.beginPath(); ctx.ellipse(x,y-22*s,10*s,9*s,0,0,Math.PI*2); ctx.fill();
+    // Head
+    ctx.fillStyle='#f5c9a0'; ctx.beginPath(); ctx.arc(x,y-16*s,9*s,0,Math.PI*2); ctx.fill();
+    // Eyes
+    ctx.fillStyle='#2a1a0a';
+    ctx.beginPath(); ctx.arc(x-3*s,y-17*s,1.5*s,0,Math.PI*2); ctx.fill();
+    ctx.beginPath(); ctx.arc(x+3*s,y-17*s,1.5*s,0,Math.PI*2); ctx.fill();
+    // Body
+    ctx.fillStyle=shirt;
+    ctx.beginPath(); ctx.roundRect(x-8*s,y-7*s,16*s,20*s,4*s); ctx.fill();
+    // Color badge
+    ctx.fillStyle=color; ctx.globalAlpha=.6;
+    ctx.fillRect(x-3*s,y-5*s,6*s,3*s); ctx.globalAlpha=1;
+    // Legs
+    ctx.fillStyle='#2a3545';
+    ctx.fillRect(x-6*s,y+13*s,6*s,14*s); ctx.fillRect(x+1*s,y+13*s,6*s,14*s);
+    ctx.fillStyle='#1a1a2a';
+    ctx.fillRect(x-7*s,y+27*s,7*s,4*s); ctx.fillRect(x+1*s,y+27*s,7*s,4*s);
   }
+  function drawDesk(d,visited){
+    const dw=deskW*0.8,dh=deskH*0.7;
+    const dx=d.x-dw/2,dy=d.y;
+    // Desk
+    ctx.fillStyle=visited?'#d4a870':'#c8a060';
+    ctx.beginPath(); ctx.roundRect(dx,dy,dw,dh,4); ctx.fill();
+    ctx.fillStyle='rgba(255,255,255,.15)';
+    ctx.fillRect(dx,dy,dw,3);
+    // Monitor
+    ctx.fillStyle='#2a3545';
+    ctx.fillRect(dx+8,dy+6,dw-44,dh-14);
+    ctx.fillStyle=visited?d.color:'#1a2535';
+    ctx.fillRect(dx+10,dy+8,dw-48,dh-18);
+    // Name
+    ctx.fillStyle=visited?d.color:'#8a9aaa';
+    ctx.font=`bold 9px "Share Tech Mono"`;
+    ctx.textAlign='center';
+    ctx.fillText(d.name.toUpperCase(),d.x,dy+dh+14);
   }
   function drawBubble(x,y,lines){
+    const mxW=Math.max(...lines.map(l=>l.length))*6.5+18,bh=lines.length*14+14;
+    const bx=Math.min(Math.max(x-mxW/2,4),W-mxW-4),by=Math.max(y-bh-8,4);
+    ctx.fillStyle='white'; ctx.strokeStyle='#ddd'; ctx.lineWidth=1;
+    ctx.beginPath(); ctx.roundRect(bx,by,mxW,bh,6); ctx.fill(); ctx.stroke();
+    // Arrow
+    ctx.beginPath(); ctx.moveTo(x-5,by+bh); ctx.lineTo(x+5,by+bh); ctx.lineTo(x,by+bh+8); ctx.closePath();
+    ctx.fillStyle='white'; ctx.fill(); ctx.stroke();
+    ctx.fillStyle='#1a1a2a'; ctx.font=`10px "Share Tech Mono"`; ctx.textAlign='left';
+    lines.forEach((l,i)=>ctx.fillText(l,bx+9,by+12+i*14+4));
   }
   function tick(){
+    // BG
+    ctx.fillStyle='#f2ede0'; ctx.fillRect(0,0,W,H);
+    ctx.fillStyle='linear-gradient';
+    // Wall
+    const wallH=H*0.45;
+    ctx.fillStyle='#ece7d8'; ctx.fillRect(0,0,W,wallH);
+    ctx.fillStyle='#c8bc9a'; ctx.fillRect(0,wallH-6,W,6);
+    // Floor
+    ctx.fillStyle='#d4cdb8'; ctx.fillRect(0,wallH,W,H-wallH);
+    // Floor lines
+    ctx.strokeStyle='rgba(0,0,0,.04)'; ctx.lineWidth=1;
+    for(let fx=0;fx<W;fx+=60){ctx.beginPath();ctx.moveTo(fx,wallH);ctx.lineTo(fx,H);ctx.stroke();}
+    for(let fy=wallH;fy<H;fy+=40){ctx.beginPath();ctx.moveTo(0,fy);ctx.lineTo(W,fy);ctx.stroke();}
+    // Big screen on wall
+    const scW=200,scH=120,scX=W/2-scW/2,scY=20;
+    ctx.fillStyle='#2a3545'; ctx.fillRect(scX-6,scY-6,scW+12,scH+12);
+    ctx.fillStyle='#1a4a2a'; ctx.fillRect(scX,scY,scW,scH);
+    ctx.fillStyle='#4ade80'; ctx.font=`bold 9px "Share Tech Mono"`; ctx.textAlign='center';
+    ctx.fillText('MISSION CONTROL', W/2, scY+20);
+    ctx.fillStyle='#a0d4b0'; ctx.font=`8px "Share Tech Mono"`;
+    const taskShort=task.substring(0,30)+(task.length>30?'...':'');
+    ctx.fillText(taskShort, W/2, scY+38);
+    // Desks + seated agents
+    desks.forEach(d=>{
+      drawDesk(d,visited.has(d.key));
+      // Seated agent at desk
+      drawPerson(d.x, d.y-18, d.hair, d.shirt, d.color, 0.75);
+    });
+    // Walking manager
+    const bob=phase==='walking'?Math.sin(frame*.4)*2:0;
+    drawPerson(Math.round(mx),Math.round(my+bob),manHair,manShirt,manColor,1);
+    // Speech bubble
+    if(phase==='talking'&&curMsg) drawBubble(Math.round(mx),Math.round(my-10),curMsg.split('\n'));
+    // Step logic
     if(stepI<steps.length){
       const step=steps[stepI];
+      const dx=step.x-mx,dy=step.y-my,dist=Math.sqrt(dx*dx+dy*dy);
+      if(dist>3&&phase==='walking'){mx+=dx/dist*SPD;my+=dy/dist*SPD;}
       else if(phase==='walking'){
+        phase='talking';talkF=0;curMsg=step.msg;
         if(step.key!=='__top'&&step.key!=='__back'){
           visited.add(step.key);
           logEl.textContent=`Briefing ${step.key}...`;
+          addAct(`Manager → ${step.key}`,'#3b82f6');
         } else if(step.key==='__back'){
+          logEl.textContent='Team briefed — processing!';
         }
       }
       if(phase==='talking'){talkF++;if(talkF>TALK){phase='walking';stepI++;curMsg='';}}
     } else {
+      setTimeout(()=>{ov.classList.remove('show');onDone();},300);return;
     }
+    frame++;
+    requestAnimationFrame(tick);
   }
   tick();
 }
+// ── RESULTS PANEL ──────────────────────────────────────────────────────────
+function showAllResults(results, events){
+  const panel=document.getElementById('result-panel');
+  const grid=document.getElementById('rp-grid');
+  panel.classList.add('show');
+  grid.innerHTML=agentDefs.map(agent=>{
+    const r=results[agent.key];
+    if(!r||r.status==='idle') return '';
+    const color=AGENT_COLORS[agent.key]||'#3b82f6';
+    const msg=(r.message||'').substring(0,400)+(r.message?.length>400?'...':'');
+    let extra='';
+    if(r.doc_file){
+      const ext=r.doc_file.split('.').pop().toLowerCase();
+      const label={xlsx:'Excel',docx:'Word',html:'HTML',py:'Python',groovy:'Groovy',jpg:'Image'}[ext]||'File';
+      extra+=`<a class="dl-btn" href="/api/docs/${r.doc_file}" download>&#8595; ${label}</a>`;
+    }
+    if(r.img_base&&r.img_count>0){
+      const thumbs=Array.from({length:r.img_count},(_,i)=>`<img class="img-th" src="/api/docs/${r.img_base}_img${i+1}.jpg" onclick="openLbox('/api/docs/${r.img_base}_img${i+1}.jpg','img${i+1}.jpg')"/>`).join('');
+      extra+=`<div class="img-row">${thumbs}</div>`;
+    }
+    return `<div class="rp-card">
+      <div class="rp-name"><div class="rp-dot" style="background:${color}"></div><span style="color:${color}">${agent.name}</span></div>
+      <div class="rp-text">${msg||'Completed.'}</div>
+      ${r.model?`<div class="rp-model">via ${r.model}</div>`:''}
+      ${extra}
+    </div>`;
+  }).filter(Boolean).join('');
+  if(events&&events.length){
+    const evHtml=events.map(e=>`<div class="orch-ev"><span class="orch-t">${e.time}</span><span>${e.msg}</span></div>`).join('');
+    document.getElementById('orch-log-wrap').innerHTML=`<div class="orch-log"><div class="orch-title">LOG</div>${evHtml}</div>`;
+  }
+}
+// ── LIGHTBOX ───────────────────────────────────────────────────────────────
+function openLbox(src,fn){document.getElementById('lbox-img').src=src;document.getElementById('lbox-dl').href=src;document.getElementById('lbox-dl').download=fn;document.getElementById('lbox').classList.add('show');}
+function closeLbox(){document.getElementById('lbox').classList.remove('show');}
+// ── 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 d=await r.json();
   if(d.success){
     agentDefs.push({key:d.agent.key,name:d.agent.name,role:d.agent.role});
+    agentStates[d.agent.key]={status:'idle',message:'',model:'',doc_file:null,img_base:null,img_count:0};
+    agentModes[d.agent.key]='idle';
+    renderDesks(); renderAgents(); startIdleLife();
+    addAct(`Agent "${name}" added`,'#a855f7'); closeModal();
     ['m-key','m-name','m-role'].forEach(id=>document.getElementById(id).value='');
   }
 }
   document.getElementById('prog').classList.add('on');
   document.getElementById('top-status').textContent='Running';
   document.getElementById('top-dot').className='sdot da';
+  document.getElementById('result-panel').classList.remove('show');
+  updateScreen('MISSION ACTIVE', task.substring(0,60));
+  // Set all working
+  agentDefs.forEach(a=>{
+    agentStates[a.key]={status:'working',message:'',model:'',doc_file:null,img_base:null,img_count:0};
+    agentModes[a.key]='working';
+    const seat=seatPosition(a.key);
+    agentPositions[a.key]={x:seat.x,y:seat.y};
+    agentTargets[a.key]=null;
+    updateAgentEl(a.key);
   });
+  addAct(`Mission: "${task.substring(0,38)}"`,'#3b82f6');
   let apiData=null;
+  const fetchP=fetch('/api/mission',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({task})})
+    .then(r=>r.json()).then(d=>{apiData=d;}).catch(e=>{apiData={error:e.message};});
   const lo=task.toLowerCase();
   let qd=[];
+  if(/imagen|image|foto|gato|cat|dog|perro|picture|dibuja|genera/.test(lo)) qd.push('image_agent');
   if(/informe|report|word|documento/.test(lo)){qd.push('writer');qd.push('analyst');}
   if(/excel|planilla|spreadsheet|registro/.test(lo)) qd.push('backend_dev');
   if(/python|script|groovy|jenkins|backend|api/.test(lo)) qd.push('backend_dev');
   if(/html|css|frontend|web|interfaz/.test(lo)) qd.push('frontend_dev');
+  if(!qd.length) qd=['analyst'];
   runWalkAnimation(task, qd, async()=>{
+    // Stagger speech bubbles while waiting
+    agentDefs.forEach((a,i)=>{
+      setTimeout(()=>{
+        const phrases=SPEECH_WORK[a.key]||['Working...'];
+        showBubble(a.key,phrases[Math.floor(Math.random()*phrases.length)],3000);
+      },i*600);
+    });
     await fetchP;
     if(!apiData||apiData.error){
+      agentDefs.forEach(a=>{
+        agentStates[a.key]={status:'resting',message:apiData?.error||'Error',model:'',doc_file:null,img_base:null,img_count:0};
+        agentModes[a.key]='idle'; updateAgentEl(a.key);
+      });
+      updateScreen('ERROR',apiData?.error||'Mission failed');
+      addAct(`Error: ${apiData?.error}`,'#ef4444');
+      notify('Mission Failed',apiData?.error||'Error','#ef4444');
       document.getElementById('top-dot').className='sdot dr';
       document.getElementById('top-status').textContent='Error';
+      btn.disabled=false; document.getElementById('prog').classList.remove('on'); return;
     }
+    let anyResting=false, hasFile=false, screenText='';
     agentDefs.forEach(a=>{
       const r=apiData.results[a.key];
+      if(!r){agentStates[a.key]={status:'idle',message:'',model:'',doc_file:null,img_base:null,img_count:0};return;}
       if(r.status==='resting') anyResting=true;
+      if(r.doc_file) hasFile=true;
+      agentStates[a.key]={
+        status:r.status==='resting'?'resting':r.status==='idle'?'idle':'active',
+        message:r.message||'', model:r.model||'',
+        doc_file:r.doc_file||null, img_base:r.img_base||null, img_count:r.img_count||0,
       };
+      agentModes[a.key]='idle';
+      updateAgentEl(a.key);
+      if(r.message&&r.status!=='resting') screenText+=(agentDefs.find(x=>x.key===a.key)?.name||a.key)+': '+r.message.substring(0,60)+'\n';
+      // Celebration bubble
+      if(r.status!=='resting'&&r.status!=='idle'){
+        setTimeout(()=>showBubble(a.key,'Done! ✓',2000),Math.random()*1000);
       }
     });
+    updateScreen('MISSION COMPLETE', screenText || 'All agents responded.');
+    showAllResults(apiData.results, apiData.events);
     mCount++;
     document.getElementById('mc-count').textContent=`MISSIONS: ${mCount}`;
+    document.getElementById('top-active').textContent='0 active';
     history.push({task,time:new Date().toLocaleTimeString(),ok:!anyResting,doc_file:apiData.doc_file});
     updateHistory();
+    addAct('Mission complete','#22c55e');
     setTimeout(()=>notify(
+      anyResting?'Mission Partial':hasFile?'Files Ready ✓':'Mission Complete ✓',
+      anyResting?'Some agents rate-limited.':hasFile?'Click agents to see results.':'All agents responded.',
+      anyResting?'#f59e0b':hasFile?'#a855f7':'#22c55e'
+    ),500);
     document.getElementById('top-status').textContent=anyResting?'Partial':'Done';
     document.getElementById('top-dot').className=`sdot ${anyResting?'da':'dg'}`;
+    btn.disabled=false; document.getElementById('prog').classList.remove('on');
   });
 }
 document.getElementById('task-input').addEventListener('keydown',e=>{if(e.key==='Enter')launchMission();});
+// Add CSS keyframe for rack-led
+const style=document.createElement('style');
+style.textContent=`@keyframes led-blink{0%{opacity:.25}100%{opacity:1;box-shadow:0 0 4px currentColor}}`;
+document.head.appendChild(style);
+// INIT
+window.addEventListener('resize',positionScreenElements);
+init();
 </script>
 </body>
+</html>