From 4591575b8183a791cabae490990ff994da3b1fa7 Mon Sep 17 00:00:00 2001
From: Mickael Farina <farina.mickael@gmail.com>
Date: Sun, 3 May 2026 14:48:52 +0200
Subject: [PATCH] =?UTF-8?q?fix(pwa):=20move=20Project=20mode=20to=20codec?=
 =?UTF-8?q?=5Fchat.html=20(correct=20page)=20=E2=80=94=20revert=20from=20d?=
 =?UTF-8?q?ashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout fix per user feedback: PR #24 placed the Project chip on the
Flash chat composer in codec_dashboard.html. Wrong page — that's the
floating mini-chat. The Chat / Think / Agents mode selector lives on
the main Chat page (codec_chat.html) and Project belongs there.

Changes:

1. codec_dashboard.html: revert all PR #24 additions (chip dropdown,
   status pills, sendCmd Project branch, polling). Dashboard back to
   pre-PR-24 state.

2. codec_chat.html — Project mode added next to Agents:
   - New Project button in #modeToggle, no emoji, target-icon SVG
   - setMode('project'): toggles button, hides crewSelect, swaps
     placeholder to "Drop your project here — describe what you want
     CODEC to build...", inserts on-screen instructions panel above
     the messages area with examples
   - sendMessage() Project branch: POST /api/agents (Step 8 dispatch),
     renders agent_id + Approve/Reject/View plan buttons inline in
     the chat thread
   - approveAgentInChat / rejectAgentInChat / viewAgentPlan handlers
     for the inline buttons (calls Step 8 endpoints, refreshes pills)
   - viewAgentPlan inlines the plan + permission manifest as an
     assistant message so user can review before approving
   - Status pills above input area: polls /api/agents every 5s, shows
     running/paused/blocked/awaiting_approval/draft_pending agents
     with inline approve/pause/resume/abort actions
   - 401/403 silently hides pills (no auth = no UI by design)

No emojis on the new Project chip per user request — text-only "Project"
matches the Chat / Think / Agents pattern.

Reuses existing escHtml + showToast + scrollBottom + addMessage +
chatHist + isProcessing + sendBtn pattern. No new CSS classes, just
inline styles matching existing var(--accent) / var(--border) tokens.

No Python changes — backend (Step 8 + 9 + 10 endpoints) all shipped.
---
 codec_chat.html      | 191 ++++++++++++++++++++++++++++++++++++++++++-
 codec_dashboard.html | 135 ------------------------------
 2 files changed, 188 insertions(+), 138 deletions(-)

diff --git a/codec_chat.html b/codec_chat.html
index 1e3ebc1..ee43318 100644
--- a/codec_chat.html
+++ b/codec_chat.html
@@ -338,6 +338,7 @@ <h1><a href="/" style="color:inherit;text-decoration:none">CODEC</a></h1>
   <svg class="ico ico-sm" viewBox="0 0 24 24"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>Think
 </button>
 <button class="mode-btn" onclick="setMode('research')" id="modeResearchBtn"><svg class="ico" viewBox="0 0 24 24" style="width:14px;height:14px"><rect x="4" y="4" width="16" height="16" rx="2"/><circle cx="9" cy="10" r="1.5" fill="currentColor" stroke="none"/><circle cx="15" cy="10" r="1.5" fill="currentColor" stroke="none"/><path d="M9 15h6"/></svg>Agents</button>
+<button class="mode-btn" onclick="setMode('project')" id="modeProjectBtn" title="Drop a project — autonomous plan-and-build mode"><svg class="ico" viewBox="0 0 24 24" style="width:14px;height:14px"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="5"/><line x1="12" y1="2" x2="12" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/></svg>Project</button>
 <select id="crewSelect">
 <option value="deep_research">🔍 Deep Research</option>
 <option value="daily_briefing">📰 Daily Briefing</option>
@@ -516,6 +517,8 @@ <h1><a href="/" style="color:inherit;text-decoration:none">CODEC</a></h1>
   chatMode=mode;
   document.getElementById('modeChatBtn').classList.toggle('active',mode==='chat');
   document.getElementById('modeResearchBtn').classList.toggle('active',mode==='research');
+  var pBtn=document.getElementById('modeProjectBtn');
+  if(pBtn)pBtn.classList.toggle('active',mode==='project');
   var cs=document.getElementById('crewSelect');
   cs.style.display=mode==='research'?'inline-block':'none';
   var crew=mode==='research'?cs.value:'deep_research';
@@ -527,12 +530,33 @@ <h1><a href="/" style="color:inherit;text-decoration:none">CODEC</a></h1>
   // that explicitly in the placeholder so the user knows they can ask
   // follow-up questions.
   var hasAgentReport=mode==='chat'&&chatHist.some(function(m){return m.role==='assistant'&&typeof m.content==='string'&&m.content.indexOf('Complete!')!==-1});
-  document.getElementById('chatInput').placeholder=mode==='research'
-      ?(hints[crew]||'Enter crew task...')
-      :(hasAgentReport?'Ask follow-up about the report...':'Message CODEC...');
+  var ph;
+  if(mode==='research')ph=hints[crew]||'Enter crew task...';
+  else if(mode==='project')ph='Drop your project here — describe what you want CODEC to build...';
+  else ph=hasAgentReport?'Ask follow-up about the report...':'Message CODEC...';
+  document.getElementById('chatInput').placeholder=ph;
   document.getElementById('scheduleBtn').style.display=mode==='research'?'':'none';
   var builder=document.getElementById('agentBuilder');
   if(mode==='research'&&crew==='custom'){builder.classList.add('show');if(!_toolsLoaded)loadAgentTools();loadSavedAgentList()}else{builder.classList.remove('show')}
+  // Phase 3.5 Step 11: Project-mode on-screen instructions panel
+  var pPanel=document.getElementById('projectModePanel');
+  if(mode==='project'){
+    if(!pPanel){
+      pPanel=document.createElement('div');
+      pPanel.id='projectModePanel';
+      pPanel.style.cssText='margin:12px 16px 8px;padding:14px 16px;background:rgba(167,139,250,0.08);border:1px solid var(--accent,#a78bfa);border-radius:10px;font-size:13px;line-height:1.5';
+      pPanel.innerHTML=
+        '<div style="font-weight:600;color:var(--accent,#a78bfa);margin-bottom:6px">Project mode — autonomous plan-and-build</div>'+
+        '<div style="color:var(--text-dim);margin-bottom:8px">Drop a project below. CODEC drafts a plan + permission manifest, you approve once, then codec-agent-runner works through it autonomously (Qwen-3.6 + skills). Updates post back to this thread.</div>'+
+        '<div style="color:var(--text-dim);font-size:12px">Examples: <em>"Build a Telegram bot that monitors Marbella property listings under €500k"</em>  ·  <em>"Watch EUR/USD intraday vol and ping me when 30-min realized vol crosses 0.4%"</em>  ·  <em>"Plan the launch of [product] over 6 weeks with weekly milestones"</em></div>';
+    }
+    var msgsEl=document.getElementById('messages');
+    if(msgsEl&&!document.getElementById('projectModePanel')){
+      msgsEl.parentNode.insertBefore(pPanel,msgsEl);
+    }
+  }else if(pPanel){
+    pPanel.remove();
+  }
   // Live-switch behaviour: only wipe the session when the chat is EMPTY.
   // If there's already a conversation (e.g. an agent just returned a deep-
   // research report), keep chatHist intact so the user can flip into chat
@@ -749,6 +773,54 @@ <h1><a href="/" style="color:inherit;text-decoration:none">CODEC</a></h1>
   if(!text&&!pendingFiles.length)return;
   input.value='';input.style.height='auto';
 
+  // Phase 3.5 Step 11: Project mode → POST /api/agents (Step 8 plan dispatch)
+  if(chatMode==='project'){
+    if(!text)return;
+    addMessage('user',text);
+    chatHist.push({role:'user',content:text});
+    saveMessages([{role:'user',content:text}]);
+    var pendingDiv=document.createElement('div');
+    pendingDiv.className='msg assistant';
+    pendingDiv.innerHTML='<div class="msg-bubble">Drafting plan via Qwen-3.6...</div>';
+    document.getElementById('messages').appendChild(pendingDiv);
+    scrollBottom();
+    isProcessing=true;document.getElementById('sendBtn').disabled=true;
+    try{
+      var pr=await fetch('/api/agents',{method:'POST',headers:{'Content-Type':'application/json'},
+        body:JSON.stringify({title:text.slice(0,80),description:text})});
+      if(pr.status===401||pr.status===403){
+        pendingDiv.querySelector('.msg-bubble').innerHTML='<span style="color:var(--danger,#f87171)">Session expired</span> — refreshing...';
+        setTimeout(function(){window.location.href='/auth'},1500);
+        return;
+      }
+      var pd=await pr.json();
+      if(pd.detail){
+        pendingDiv.querySelector('.msg-bubble').innerHTML='<span style="color:var(--danger,#f87171)">Plan failed:</span> '+escHtml(pd.detail);
+        chatHist.push({role:'assistant',content:'Plan failed: '+pd.detail});
+      }else if(pd.agent_id){
+        var html='<div style="font-weight:600;margin-bottom:6px">Project drafted</div>'+
+          '<div style="margin-bottom:6px">agent_id: <code>'+escHtml(pd.agent_id)+'</code></div>'+
+          '<div style="color:var(--text-dim);font-size:12px;margin-bottom:8px">A plan with a permission manifest has been written to <code>~/.codec/agents/'+escHtml(pd.agent_id)+'/plan.json</code>. Review and approve to start.</div>'+
+          '<div style="display:flex;gap:8px;flex-wrap:wrap">'+
+            '<button onclick="approveAgentInChat(\''+pd.agent_id+'\',event)" style="padding:6px 14px;background:var(--accent,#a78bfa);color:#000;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600">Approve plan</button>'+
+            '<button onclick="rejectAgentInChat(\''+pd.agent_id+'\',event)" style="padding:6px 14px;background:transparent;color:var(--text);border:1px solid var(--border,#2a2a30);border-radius:6px;cursor:pointer;font-size:12px">Reject</button>'+
+            '<button onclick="viewAgentPlan(\''+pd.agent_id+'\',event)" style="padding:6px 14px;background:transparent;color:var(--text);border:1px solid var(--border,#2a2a30);border-radius:6px;cursor:pointer;font-size:12px">View plan</button>'+
+          '</div>';
+        pendingDiv.querySelector('.msg-bubble').innerHTML=html;
+        chatHist.push({role:'assistant',content:'Project drafted: '+pd.agent_id});
+        refreshAgentStatusPills();
+      }else{
+        pendingDiv.querySelector('.msg-bubble').innerHTML='<span style="color:var(--danger,#f87171)">Unknown response</span>';
+      }
+    }catch(e){
+      pendingDiv.querySelector('.msg-bubble').innerHTML='<span style="color:var(--danger,#f87171)">Failed:</span> '+escHtml(e.message);
+    }finally{
+      isProcessing=false;document.getElementById('sendBtn').disabled=false;
+      _showSend();
+    }
+    return;
+  }
+
   if(chatMode==='research'){
     var researchText=text||'';
     var crew=document.getElementById('crewSelect').value||'deep_research';
@@ -1206,5 +1278,118 @@ <h1><a href="/" style="color:inherit;text-decoration:none">CODEC</a></h1>
   poll();setInterval(poll,3000);
 })();
 </script>
+
+<!-- Phase 3.5 Step 11 — Project mode agent action handlers + status pills -->
+<script>
+async function approveAgentInChat(agentId,e){
+  if(e)e.preventDefault();
+  if(!confirm('Approve plan for '+agentId+'?\n\nThe agent will run autonomously with the manifest permissions.'))return;
+  try{
+    var r=await fetch('/api/agents/'+encodeURIComponent(agentId)+'/approve',{method:'POST'});
+    if(r.ok){
+      var div=document.createElement('div');div.className='msg assistant';
+      div.innerHTML='<div class="msg-bubble"><span style="color:var(--success,#10b981)">Plan approved.</span> codec-agent-runner picks it up within 5s. Watch <code>~/.codec/audit.log</code> for <code>agent_started</code> + checkpoint events.</div>';
+      document.getElementById('messages').appendChild(div);scrollBottom();
+    }else{
+      var d=await r.json().catch(function(){return{}});
+      showToast('Approval failed: '+(d.detail||r.status));
+    }
+  }catch(err){showToast('Approval error: '+err.message)}
+  refreshAgentStatusPills();
+}
+async function rejectAgentInChat(agentId,e){
+  if(e)e.preventDefault();
+  var reason=prompt('Reason for rejection (optional):','');
+  if(reason===null)return;
+  try{
+    var r=await fetch('/api/agents/'+encodeURIComponent(agentId)+'/reject',{method:'POST',
+      headers:{'Content-Type':'application/json'},body:JSON.stringify({reason:reason||''})});
+    if(r.ok){showToast('Plan rejected.')}else{showToast('Reject failed')}
+  }catch(err){showToast('Error: '+err.message)}
+  refreshAgentStatusPills();
+}
+async function viewAgentPlan(agentId,e){
+  if(e)e.preventDefault();
+  try{
+    var r=await fetch('/api/agents/'+encodeURIComponent(agentId));
+    if(!r.ok){showToast('Failed to load plan: '+r.status);return}
+    var d=await r.json();
+    var plan=d.plan||{};
+    var manifest=plan.permission_manifest||{};
+    var html='<div class="msg-bubble"><div style="font-weight:600;margin-bottom:8px">Plan for '+escHtml(agentId)+'</div>';
+    if(plan.goals&&plan.goals.length){
+      html+='<div style="font-weight:500;margin:8px 0 4px;font-size:12px;text-transform:uppercase;color:var(--text-dim)">Goals</div>';
+      html+='<ul style="margin:0 0 8px;padding-left:18px;font-size:13px">';
+      plan.goals.forEach(function(g){html+='<li>'+escHtml(g)+'</li>'});
+      html+='</ul>';
+    }
+    if(plan.checkpoints&&plan.checkpoints.length){
+      html+='<div style="font-weight:500;margin:8px 0 4px;font-size:12px;text-transform:uppercase;color:var(--text-dim)">Checkpoints ('+plan.checkpoints.length+')</div>';
+      html+='<ol style="margin:0 0 8px;padding-left:18px;font-size:13px">';
+      plan.checkpoints.forEach(function(cp){html+='<li><b>'+escHtml(cp.title||'')+'</b>: '+escHtml((cp.description||'').slice(0,200))+'</li>'});
+      html+='</ol>';
+    }
+    html+='<div style="font-weight:500;margin:8px 0 4px;font-size:12px;text-transform:uppercase;color:var(--text-dim)">Permission manifest</div>';
+    html+='<div style="font-size:12px;background:rgba(0,0,0,0.2);padding:8px;border-radius:6px;font-family:var(--mono,monospace)">';
+    html+='skills: '+escHtml((manifest.skills||[]).join(', ')||'(none)')+'<br>';
+    html+='network_domains: '+escHtml((manifest.network_domains||[]).join(', ')||'(none)')+'<br>';
+    html+='write_paths: '+escHtml((manifest.write_paths||[]).join(', ')||'(none)')+'<br>';
+    html+='destructive_ops: '+escHtml((manifest.destructive_ops||[]).join(', ')||'(none)');
+    html+='</div></div>';
+    var div=document.createElement('div');div.className='msg assistant';div.innerHTML=html;
+    document.getElementById('messages').appendChild(div);scrollBottom();
+  }catch(err){showToast('Error: '+err.message)}
+}
+
+// Status pills (above input) — polls /api/agents every 5s
+async function refreshAgentStatusPills(){
+  var container=document.getElementById('agentStatusPills');
+  if(!container){
+    // Inject the container right above the input area
+    var inputArea=document.querySelector('.input-area');
+    if(!inputArea)return;
+    container=document.createElement('div');
+    container.id='agentStatusPills';
+    container.style.cssText='display:none;flex-wrap:wrap;gap:6px;margin:0 16px 6px;font-size:11px';
+    inputArea.parentNode.insertBefore(container,inputArea);
+  }
+  try{
+    var r=await fetch('/api/agents');
+    if(r.status===401||r.status===403)return;
+    if(!r.ok)return;
+    var data=await r.json();
+    var pills=(data.agents||[]).filter(function(a){
+      return ['running','paused','blocked_on_permission','blocked_on_destructive',
+              'awaiting_approval','draft_pending','crashed_resumed'].indexOf(a.status)>=0;
+    }).slice(0,5);
+    if(pills.length===0){container.style.display='none';container.innerHTML='';return}
+    container.style.display='flex';
+    container.innerHTML=pills.map(function(p){
+      var color='#888';
+      if(p.status==='running')color='#10b981';
+      else if(p.status==='paused')color='#f59e0b';
+      else if(p.status==='awaiting_approval')color='#eab308';
+      else if(p.status==='draft_pending')color='#6b7280';
+      else if(p.status==='blocked_on_permission'||p.status==='blocked_on_destructive')color='#ef4444';
+      else if(p.status==='crashed_resumed')color='#f59e0b';
+      var actions='';
+      if(p.status==='awaiting_approval'){
+        actions=' <a href="#" onclick="approveAgentInChat(\''+p.agent_id+'\',event)" style="color:#fff;text-decoration:underline;margin-left:4px">approve</a>';
+      }else if(p.status==='paused'){
+        actions=' <a href="#" onclick="resumeAgentInChat(\''+p.agent_id+'\',event)" style="color:#fff;text-decoration:underline;margin-left:4px">resume</a>';
+      }else if(p.status==='running'){
+        actions=' <a href="#" onclick="pauseAgentInChat(\''+p.agent_id+'\',event)" style="color:#fff;text-decoration:underline;margin-left:4px">pause</a>';
+      }
+      actions+=' <a href="#" onclick="abortAgentInChat(\''+p.agent_id+'\',event)" style="color:#fff;text-decoration:underline;margin-left:4px">abort</a>';
+      return '<span style="display:inline-flex;align-items:center;padding:3px 10px;background:'+color+';color:#fff;border-radius:10px">'+
+             escHtml((p.title||p.agent_id).slice(0,40))+' · '+p.status+actions+'</span>';
+    }).join('');
+  }catch(e){/* silent */}
+}
+async function pauseAgentInChat(agentId,e){if(e)e.preventDefault();await fetch('/api/agents/'+encodeURIComponent(agentId)+'/pause',{method:'POST'});refreshAgentStatusPills()}
+async function resumeAgentInChat(agentId,e){if(e)e.preventDefault();await fetch('/api/agents/'+encodeURIComponent(agentId)+'/resume',{method:'POST'});refreshAgentStatusPills()}
+async function abortAgentInChat(agentId,e){if(e)e.preventDefault();if(!confirm('Abort agent '+agentId+'?'))return;await fetch('/api/agents/'+encodeURIComponent(agentId)+'/abort',{method:'POST'});refreshAgentStatusPills()}
+setTimeout(refreshAgentStatusPills,500);setInterval(refreshAgentStatusPills,5000);
+</script>
 </body>
 </html>
diff --git a/codec_dashboard.html b/codec_dashboard.html
index be035ca..68900e8 100644
--- a/codec_dashboard.html
+++ b/codec_dashboard.html
@@ -704,13 +704,6 @@ <h2>MENU</h2>
   </div>
 
   <div class="input-area">
-    <!-- Phase 3.5 Step 11: Agent status pills (poll /api/agents every 5s) -->
-    <div id="agentStatusPills" style="display:none;margin:0 0 6px 0;flex-wrap:wrap;gap:6px"></div>
-    <!-- Phase 3.5 Step 11: Mode toggle (Chat | Project) -->
-    <div id="chatModeToggle" style="display:flex;gap:4px;margin:0 0 6px 0;font-size:11px">
-      <button class="mode-chip active" data-mode="chat" onclick="setChatMode('chat')" style="padding:3px 10px;background:var(--accent,#26c6da);color:#000;border:none;border-radius:10px;cursor:pointer;font-size:11px">💬 Chat</button>
-      <button class="mode-chip" data-mode="project" onclick="setChatMode('project')" style="padding:3px 10px;background:transparent;color:var(--text);border:1px solid var(--border,#2a2a30);border-radius:10px;cursor:pointer;font-size:11px">🎯 Project</button>
-    </div>
     <div class="input-row">
       <button class="ibtn" id="micBtn" onclick="toggleMic()" title="Voice input">
         <svg class="ico" viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
@@ -872,66 +865,12 @@ <h2>MENU</h2>
 
 var _pendingImage = null; // {base64, name}
 
-// ── Phase 3.5 Step 11: Chat mode (chat | project) ──
-window._chatMode = window._chatMode || 'chat';
-function setChatMode(mode) {
-  window._chatMode = mode;
-  // Update button styles
-  document.querySelectorAll('.mode-chip').forEach(function(btn) {
-    var active = btn.getAttribute('data-mode') === mode;
-    btn.classList.toggle('active', active);
-    btn.style.background = active ? 'var(--accent, #26c6da)' : 'transparent';
-    btn.style.color = active ? '#000' : 'var(--text)';
-    btn.style.border = active ? 'none' : '1px solid var(--border, #2a2a30)';
-  });
-  // Update placeholder
-  var input = document.getElementById('cmdInput');
-  if (input) {
-    input.placeholder = (mode === 'project')
-      ? 'Drop your project here — describe what you want CODEC to build…'
-      : 'Flash — ask anything...';
-  }
-}
-
 // ── Send Command ──
 async function sendCmd() {
   var input = document.getElementById('cmdInput');
   var task = input.value.trim();
   if (!task && !_pendingImage) return;
   input.value = '';
-
-  // Phase 3.5 Step 11: Project mode dispatches to /api/agents
-  if (window._chatMode === 'project' && task) {
-    var pResult = document.getElementById('cmdResult');
-    var pText = document.getElementById('cmdResultText');
-    pResult.style.display = 'block';
-    pText.innerHTML = '<span style="color:var(--accent)">📝 Drafting plan…</span> ' + escHtml(task);
-    try {
-      var pr = await fetch('/api/agents', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({title: task.slice(0, 80), description: task})
-      });
-      if (pr.status === 401 || pr.status === 403) {
-        pText.innerHTML = '<span style="color:var(--danger)">Session expired</span> — refreshing...';
-        setTimeout(function(){ window.location.href = '/auth'; }, 1500);
-        return;
-      }
-      var pd = await pr.json();
-      if (pd.detail) {
-        pText.innerHTML = '<span style="color:var(--danger)">Plan failed:</span> ' + escHtml(pd.detail);
-      } else if (pd.agent_id) {
-        pText.innerHTML = '<span style="color:var(--success)">Project started:</span> agent_id=<code>' + escHtml(pd.agent_id) + '</code><br><span style="opacity:.7">Plan drafted, awaiting your approval. Watch the status pill below or check ~/.codec/agents/' + escHtml(pd.agent_id) + '/plan.json. Approve via: POST /api/agents/' + escHtml(pd.agent_id) + '/approve</span>';
-        refreshAgentStatusPills();
-      } else {
-        pText.innerHTML = '<span style="color:var(--danger)">Unknown response:</span> ' + escHtml(JSON.stringify(pd).slice(0, 200));
-      }
-    } catch(e) {
-      pText.innerHTML = '<span style="color:var(--danger)">Failed to start project:</span> ' + escHtml(e.message);
-    }
-    return;  // don't fall through to chat dispatch
-  }
-
   var result = document.getElementById('cmdResult');
   var text = document.getElementById('cmdResultText');
   result.style.display = 'block';
@@ -1037,80 +976,6 @@ <h2>MENU</h2>
 document.getElementById('cmdInput').addEventListener('keydown', function(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendCmd(); } });
 document.getElementById('cmdInput').addEventListener('input', function() { this.style.height = 'auto'; this.style.height = Math.min(this.scrollHeight, 120) + 'px'; });
 
-// ── Phase 3.5 Step 11: Agent status pills (polls /api/agents every 5s) ──
-async function refreshAgentStatusPills() {
-  var container = document.getElementById('agentStatusPills');
-  if (!container) return;
-  try {
-    var r = await fetch('/api/agents');
-    if (r.status === 401 || r.status === 403) return;  // not authed; pills hidden
-    if (!r.ok) return;
-    var data = await r.json();
-    var pills = (data.agents || []).filter(function(a) {
-      return ['running','paused','blocked_on_permission','blocked_on_destructive',
-              'awaiting_approval','draft_pending','crashed_resumed'].indexOf(a.status) >= 0;
-    }).slice(0, 5);
-    if (pills.length === 0) {
-      container.style.display = 'none';
-      container.innerHTML = '';
-      return;
-    }
-    container.style.display = 'flex';
-    container.innerHTML = pills.map(function(p) {
-      var color = '#888', icon = '';
-      if (p.status === 'running') { color = '#0a0'; icon = '🟢'; }
-      else if (p.status === 'paused') { color = '#fa0'; icon = '⏸'; }
-      else if (p.status === 'awaiting_approval') { color = '#fc0'; icon = '⏳'; }
-      else if (p.status === 'draft_pending') { color = '#888'; icon = '📝'; }
-      else if (p.status === 'blocked_on_permission' || p.status === 'blocked_on_destructive') { color = '#c33'; icon = '🛑'; }
-      else if (p.status === 'crashed_resumed') { color = '#fa0'; icon = '⏵'; }
-      var actions = '';
-      if (p.status === 'awaiting_approval') {
-        actions = '<a href="#" onclick="approveAgent(event,\'' + p.agent_id + '\')" style="color:#fff;margin-left:8px;text-decoration:underline">approve</a>';
-      } else if (p.status === 'paused') {
-        actions = '<a href="#" onclick="resumeAgent(event,\'' + p.agent_id + '\')" style="color:#fff;margin-left:8px;text-decoration:underline">resume</a>';
-      } else if (p.status === 'running') {
-        actions = '<a href="#" onclick="pauseAgent(event,\'' + p.agent_id + '\')" style="color:#fff;margin-left:8px;text-decoration:underline">pause</a>';
-      }
-      actions += '<a href="#" onclick="abortAgent(event,\'' + p.agent_id + '\')" style="color:#fff;margin-left:6px;text-decoration:underline">abort</a>';
-      return '<span style="display:inline-flex;align-items:center;padding:3px 10px;background:' + color + ';color:#fff;border-radius:10px;font-size:11px;font-family:var(--font)">' +
-             icon + ' ' + escHtml((p.title || p.agent_id).slice(0, 40)) + ' · ' + p.status +
-             actions + '</span>';
-    }).join('');
-  } catch(e) { /* silent — pills are decorative */ }
-}
-async function abortAgent(e, agentId) {
-  e.preventDefault();
-  if (!confirm('Abort agent ' + agentId + '?')) return;
-  await fetch('/api/agents/' + encodeURIComponent(agentId) + '/abort', {method: 'POST'});
-  refreshAgentStatusPills();
-}
-async function pauseAgent(e, agentId) {
-  e.preventDefault();
-  await fetch('/api/agents/' + encodeURIComponent(agentId) + '/pause', {method: 'POST'});
-  refreshAgentStatusPills();
-}
-async function resumeAgent(e, agentId) {
-  e.preventDefault();
-  await fetch('/api/agents/' + encodeURIComponent(agentId) + '/resume', {method: 'POST'});
-  refreshAgentStatusPills();
-}
-async function approveAgent(e, agentId) {
-  e.preventDefault();
-  if (!confirm('Approve plan for agent ' + agentId + '?\n\nThis will let codec-agent-runner execute the plan autonomously with the manifest permissions.')) return;
-  var r = await fetch('/api/agents/' + encodeURIComponent(agentId) + '/approve', {method: 'POST'});
-  if (r.ok) {
-    showToast('Plan approved — agent will start within 5s');
-  } else {
-    var d = await r.json().catch(function(){return {};});
-    showToast('Approval failed: ' + (d.detail || r.status));
-  }
-  refreshAgentStatusPills();
-}
-// Start polling on page load
-setInterval(refreshAgentStatusPills, 5000);
-setTimeout(refreshAgentStatusPills, 500);
-
 // ── Paste image into chat (Cmd+V on a screenshot) ──
 // Document-level handler so paste anywhere on the page routes the image
 // through handleFile (same flow as drag-drop / file-picker). Without