Update templates/index.html

templates/index.html

@@ -20,7 +20,7 @@
 }
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 html,body{height:100%;overflow:hidden}
-body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);color:var(--text);display:flex;flex-direction:column;font-size:13px}
+body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);color:var(--text);display:flex;flex-direction:column;font-size:13px;height:100vh;overflow:hidden}
 
 /* ── TOPBAR ── */
 .topbar{height:44px;background:var(--panel);border-bottom:1px solid var(--border-dark);display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0;z-index:100}
@@ -56,11 +56,11 @@ body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);co
 .mc-lbl{font-family:'DM Mono',monospace;font-size:11px;color:#4b5563;white-space:nowrap;align-self:center}
 
 /* ── MAIN GRID ── */
-.main{display:grid;grid-template-columns:1fr 420px;flex:1;min-height:0;overflow:hidden}
+.main{display:grid;grid-template-columns:1fr 420px;overflow:hidden;flex:1;min-height:0;height:0}
 @media(max-width:900px){.main{grid-template-columns:1fr}.right-col{display:none}}
 
 /* ── OFFICE ── */
-.office{position:relative;overflow:hidden;background:var(--floor)}
+.office{position:relative;overflow:hidden;background:var(--floor);min-height:0;height:100%}
 
 /* Wall */
 .wall{position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,var(--wall) 0%,var(--wall2) 100%)}
@@ -160,14 +160,14 @@ body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);co
 .agent.idle .a-body{animation:breathe 3s ease-in-out infinite}
 
 /* ── RIGHT COLUMN ── */
-.right-col{background:var(--white);border-left:1px solid var(--gray-200);display:flex;flex-direction:column;overflow:hidden;height:100%}
+.right-col{background:var(--white);border-left:1px solid var(--gray-200);display:flex;flex-direction:column;overflow:hidden;min-height:0;height:100%}
 
 /* Tabs */
 .tabs{display:flex;border-bottom:1px solid var(--gray-200);flex-shrink:0;background:var(--gray-50)}
 .tab{flex:1;padding:8px 4px;font-size:11px;font-weight:500;text-align:center;cursor:pointer;border-bottom:2px solid transparent;color:var(--text3);transition:all .15s;letter-spacing:.3px;font-family:'IBM Plex Sans',sans-serif}
 .tab.on{color:var(--text);border-bottom-color:var(--green-l);background:var(--white)}
 .tab:hover:not(.on){color:var(--text2);background:var(--gray-100)}
-.pane{flex:1;overflow-y:auto;display:none;min-height:0;flex-direction:column}
+.pane{flex:1;overflow:hidden;display:none;min-height:0;flex-direction:column}
 .pane.on{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
 
 /* Results */
@@ -193,7 +193,7 @@ body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);co
 .act-time{font-size:9px;color:var(--text3);margin-top:1px;font-family:'DM Mono',monospace}
 
 /* ── CHAT ── */
-.chat-col{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;overflow:hidden}
+.chat-col{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
 .chat-chips{padding:8px 10px;border-bottom:1px solid var(--gray-100);display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;background:var(--gray-50)}
 .chip{font-size:10px;font-weight:500;padding:3px 9px;border:1px solid;border-radius:20px;cursor:pointer;transition:all .15s;font-family:'IBM Plex Sans',sans-serif;white-space:nowrap}
 .chip.on{color:var(--white)}
@@ -201,13 +201,13 @@ body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);co
 .chat-hdr-info{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace}
 .chat-hdr-clear{font-size:10px;color:var(--text3);cursor:pointer;padding:2px 7px;border:1px solid var(--gray-200);border-radius:4px;transition:all .15s;font-family:'IBM Plex Sans',sans-serif}
 .chat-hdr-clear:hover{color:var(--red);border-color:#fca5a5}
-.chat-msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:0;background:var(--gray-50);align-items:stretch}
-.msg{padding:9px 11px;border-radius:8px;font-size:11px;line-height:1.6;width:100%;max-width:100%;word-break:break-word;font-family:'IBM Plex Sans',sans-serif;box-sizing:border-box}
-.msg.user{background:var(--gray-100);border:1px solid var(--gray-200);align-self:flex-end;color:var(--text);max-width:85%;width:fit-content}
-.msg.agent{background:var(--white);border:1px solid var(--gray-200);color:var(--text);box-shadow:var(--shadow);width:100%}
+.chat-msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:0;background:var(--gray-50)}
+.msg{padding:9px 11px;border-radius:8px;font-size:11px;line-height:1.6;word-break:break-word;font-family:'IBM Plex Sans',sans-serif;box-sizing:border-box}
+.msg.user{background:var(--gray-100);border:1px solid var(--gray-200);align-self:flex-end;color:var(--text);max-width:88%}
+.msg.agent{background:var(--white);border:1px solid var(--gray-200);color:var(--text);box-shadow:var(--shadow);align-self:stretch}
 .msg.user .msg-who{font-size:9px;color:var(--text3);text-align:right;margin-bottom:2px;font-family:'DM Mono',monospace}
 .msg.agent .msg-who{font-size:9px;margin-bottom:3px;font-family:'DM Mono',monospace;font-weight:500}
-.msg-text{user-select:text;cursor:text;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
+.msg-text{user-select:text;cursor:text;word-break:break-word;overflow-wrap:anywhere;white-space:normal}
 .msg-model{font-size:8px;color:var(--text3);margin-top:4px;font-family:'DM Mono',monospace}
 .msg-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;padding:6px;background:var(--gray-50);border-radius:6px;border:1px solid var(--gray-200)}
 .chat-typing{padding:2px 12px 0;font-size:10px;color:var(--text3);height:16px;font-style:italic;font-family:'IBM Plex Sans',sans-serif;flex-shrink:0}
@@ -334,7 +334,7 @@ body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);co
       <div class="tab" onclick="switchTab('archive')">Archive</div>
     </div>
 
-    <div class="pane on" id="pane-results">
+    <div class="pane on" id="pane-results" style="overflow-y:auto">
       <div class="results-wrap" id="results-wrap">
         <div class="r-empty">Launch a mission to see results.</div>
       </div>
@@ -344,7 +344,7 @@ body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--floor);co
       </div>
     </div>
 
-    <div class="pane" id="pane-chat" style="height:100%">
+    <div class="pane" id="pane-chat">
       <div class="chat-col">
         <div class="chat-chips" id="chat-chips"></div>
         <div class="chat-hdr">
@@ -716,8 +716,20 @@ async function sendChat(){
     const r=await fetch('/api/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent:chatAgent,message:msg,session_id:chatAgent})});
     const d=await r.json();
     if(d.error) throw new Error(d.error);
+    // Main agent response
     const imgs=d.img_base&&d.img_count>0?{base:d.img_base,count:d.img_count}:null;
     chatHist[chatAgent].push({role:'agent',text:d.response,model:d.model,turn:d.turn,imgs});
+    // If manager delegated → show each sub-agent as separate message
+    if(d.delegate_result&&d.delegate_result.sub_results){
+      Object.entries(d.delegate_result.sub_results).forEach(([key,r])=>{
+        if(!r||r.status==='idle') return;
+        const sc=AC[key]||'#2563eb';
+        const sn=agents.find(a=>a.key===key)?.name||key;
+        const si=(key==='image_agent'&&r.img_base&&r.img_count>0)?{base:r.img_base,count:r.img_count}:null;
+        chatHist[chatAgent].push({role:'agent',agentKey:key,agentName:sn,agentColor:sc,
+          text:r.message||'Done.',model:r.model||'',doc_file:r.doc_file||null,imgs:si,collab:true});
+      });
+    }
     showBubble(chatAgent,d.response.substring(0,50)+(d.response.length>50?'…':''),3000);
     updateChatHdr();
   }catch(e){