claude-code-kanban 2.1.0-rc.1 → 2.1.0-rc.3

package/hooks/agent-spy.sh

@@ -4,13 +4,14 @@
 
 INPUT=$(cat)
 
-# Single jq call to extract all routing fields (was 3-4 separate calls)
+# Single jq call to extract all routing fields
 eval "$(echo "$INPUT" | jq -r '
   @sh "SESSION_ID=\(.session_id // "")",
   @sh "AGENT_ID=\(.agent_id // "")",
   @sh "EVENT=\(.hook_event_name // "")",
   @sh "TOOL_NAME=\(.tool_name // "")",
-  @sh "AGENT_TYPE_RAW=\(.agent_type // "")"
+  @sh "AGENT_TYPE_RAW=\(.agent_type // "")",
+  @sh "TEAMMATE_NAME=\(.teammate_name // "")"
 ')"
 
 [ -z "$SESSION_ID" ] && exit 0
@@ -42,6 +43,26 @@ if [ "$EVENT" = "PermissionRequest" ] || { [ "$EVENT" = "PreToolUse" ] && [ "$TO
   exit 0
 fi
 
+# TeammateIdle has no agent_id — resolve via name→id mapping file
+if [ "$EVENT" = "TeammateIdle" ] && [ -z "$AGENT_ID" ] && [ -n "$TEAMMATE_NAME" ]; then
+  DIR="$HOME/.claude/agent-activity/$SESSION_ID"
+  MAP_FILE="$DIR/_name-${TEAMMATE_NAME}.id"
+  [ ! -f "$MAP_FILE" ] && exit 0
+  AGENT_ID=$(cat "$MAP_FILE")
+  [ -z "$AGENT_ID" ] && exit 0
+  FILE="$DIR/$AGENT_ID.json"
+  TS=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
+  STARTED_AT="$TS"
+  if [ -f "$FILE" ]; then
+    PREV_START=$(jq -r '.startedAt // ""' "$FILE" 2>/dev/null)
+    [ -n "$PREV_START" ] && STARTED_AT="$PREV_START"
+  fi
+  cat > "$FILE" <<EOF
+{"agentId":"$AGENT_ID","type":"$TEAMMATE_NAME","status":"idle","startedAt":"$STARTED_AT","updatedAt":"$TS"}
+EOF
+  exit 0
+fi
+
 [ -z "$AGENT_ID" ] && exit 0
 
 DIR="$HOME/.claude/agent-activity/$SESSION_ID"
@@ -64,6 +85,16 @@ if [ "$EVENT" = "SubagentStart" ]; then
   cat > "$FILE" <<EOF
 {"agentId":"$AGENT_ID","type":"$AGENT_TYPE_RAW","status":"active","startedAt":"$TS","updatedAt":"$TS"}
 EOF
+  # Write name→id mapping for TeammateIdle resolution
+  # Remove previous incarnation's agent file to avoid duplicates
+  if [ -n "$AGENT_TYPE_RAW" ]; then
+    MAP_FILE="$DIR/_name-${AGENT_TYPE_RAW}.id"
+    if [ -f "$MAP_FILE" ]; then
+      OLD_ID=$(cat "$MAP_FILE")
+      [ -n "$OLD_ID" ] && [ "$OLD_ID" != "$AGENT_ID" ] && rm -f "$DIR/$OLD_ID.json"
+    fi
+    echo -n "$AGENT_ID" > "$MAP_FILE"
+  fi
 
 elif [ "$EVENT" = "SubagentStop" ]; then
   AGENT_TYPE="$AGENT_TYPE_RAW"

package/lib/parsers.js

@@ -55,7 +55,8 @@ function parseTeamConfig(raw) {
       name: m.name,
       agentType: m.agentType || null,
       model: m.model || null,
-      cwd: m.cwd || null
+      cwd: m.cwd || null,
+      color: m.color || null
     })),
     raw: config
   };
@@ -287,6 +288,20 @@ function readRecentMessages(jsonlPath, limit = 10) {
                       return text;
                     }).join('\n\n');
                   }
+                  else if (inp.to) {
+                    const proto = inp.message && typeof inp.message === 'object' ? inp.message : null;
+                    if (proto?.type === 'shutdown_request') {
+                      detail = '→ ' + inp.to + ': shutdown request' + (proto.reason ? ' (' + proto.reason + ')' : '');
+                    } else if (proto?.type === 'shutdown_response') {
+                      detail = '→ ' + inp.to + ': ' + (proto.approve ? 'shutdown approved' : 'shutdown rejected');
+                    } else if (proto?.type === 'plan_approval_response') {
+                      detail = '→ ' + inp.to + ': ' + (proto.approve ? 'plan approved' : 'plan rejected');
+                    } else {
+                      detail = '→ ' + inp.to + (inp.summary ? ': ' + inp.summary : '');
+                    }
+                    if (detail.length > 80) detail = detail.slice(0, 80) + '...';
+                    fullDetail = typeof inp.message === 'string' ? inp.message : JSON.stringify(inp.message);
+                  }
                   else if (inp.plan) {
                     const titleMatch = inp.plan.match(/^#\s+(.+)/m);
                     detail = titleMatch ? titleMatch[1] : 'Plan';
@@ -336,9 +351,9 @@ function readRecentMessages(jsonlPath, limit = 10) {
                   } else if (block.name === 'ToolSearch') {
                     if (inp.max_results) params.max_results = inp.max_results;
                   } else if (block.name === 'TaskCreate') {
-                    if (inp.description) params.description = inp.description;
+                    if (inp.subject) params.subject = inp.subject;
                   } else if (block.name === 'TaskUpdate') {
-                    if (inp.taskId) params.taskId = inp.taskId;
+                    if (inp.taskId) params.taskId = '#' + inp.taskId;
                     if (inp.status) params.status = inp.status;
                   } else if (block.name === 'NotebookEdit') {
                     if (inp.command) params.command = inp.command;
@@ -351,6 +366,12 @@ function readRecentMessages(jsonlPath, limit = 10) {
                   } else if (block.name === 'ExitPlanMode') {
                     if (inp.plan) params.plan = inp.plan;
                     if (inp.planFilePath) params.planFilePath = inp.planFilePath;
+                  } else if (block.name === 'SendMessage') {
+                    if (inp.to) params.to = inp.to;
+                    if (inp.summary) params.summary = inp.summary;
+                    if (inp.message && typeof inp.message === 'object') {
+                      params.protocol = inp.message;
+                    }
                   }
                 }
                 const msg = {
@@ -375,6 +396,51 @@ function readRecentMessages(jsonlPath, limit = 10) {
           } else if (obj.type === 'user' && obj.message?.role === 'user' && !obj.isMeta) {
             if (typeof obj.message.content === 'string') {
               const t = obj.message.content;
+              const tmMatch = t.match(/<teammate-message\s+([^>]*)>([\s\S]*?)<\/teammate-message>/);
+              if (tmMatch) {
+                const attrs = tmMatch[1];
+                const body = tmMatch[2].trim();
+                const getAttr = (name) => (attrs.match(new RegExp(name + '="([^"]*)"')) || [])[1] || null;
+                const tid = getAttr('teammate_id');
+                const color = getAttr('color');
+                const summary = getAttr('summary');
+                let protocol = null;
+                try {
+                  const j = JSON.parse(body);
+                  if (j.type) protocol = j;
+                } catch (_) {}
+                const isIdle = protocol?.type === 'idle_notification';
+                const isProtocol = !!protocol;
+                let protocolLabel = null;
+                if (protocol) {
+                  switch (protocol.type) {
+                    case 'idle_notification': protocolLabel = protocol.idleReason || 'idle'; break;
+                    case 'task_assignment': protocolLabel = `assigned #${protocol.taskId}: ${protocol.subject || ''}`; break;
+                    case 'shutdown_request': protocolLabel = `shutdown: ${protocol.reason || 'requested'}`; break;
+                    case 'shutdown_response': protocolLabel = protocol.approve ? 'shutdown approved' : `shutdown rejected: ${protocol.reason || ''}`; break;
+                    case 'plan_approval_request': protocolLabel = 'plan approval requested'; break;
+                    case 'plan_approval_response': protocolLabel = protocol.approve ? 'plan approved' : `plan rejected: ${protocol.feedback || ''}`; break;
+                    case 'teammate_terminated': protocolLabel = protocol.message || 'shut down'; break;
+                    default: protocolLabel = protocol.type.replace(/_/g, ' '); break;
+                  }
+                }
+                const truncated = !isProtocol && body.length > 500;
+                messages.push({
+                  type: 'teammate',
+                  teammateId: tid,
+                  color,
+                  summary,
+                  isIdle,
+                  isProtocol,
+                  protocolType: protocol?.type || null,
+                  protocolLabel,
+                  protocolData: protocol || null,
+                  text: isProtocol ? null : (truncated ? body.slice(0, 500) + '...' : body),
+                  fullText: isProtocol ? null : (truncated ? body : null),
+                  timestamp: obj.timestamp
+                });
+                continue;
+              }
               const sysLabel = getSystemMessageLabel(t);
               if (sysLabel === '__skip__') continue;
               const uTruncated = t.length > 500;
@@ -440,7 +506,9 @@ function buildAgentProgressMap(jsonlPath) {
     const parentRe = /"parentToolUseID":"([^"]+)"/;
     const promptRe = /"prompt":"((?:[^"\\]|\\.)*)"/;
     const bgToolIdRe = /"tool_use_id":"([^"]+)"/;
-    const bgAgentIdRe = /agentId: ([a-zA-Z0-9_-]+)/;
+    const bgAgentIdRe = /agentId: ([a-zA-Z0-9_@-]+)/;
+    const tmToolIdRe = /"tool_use_id":"([^"]+)"/;
+    const tmAgentIdRe = /agent_id: ([a-zA-Z0-9_@-]+)/;
     for (const line of content.split('\n')) {
       if (line.includes('"agent_progress"')) {
         const agentMatch = re.exec(line);
@@ -462,6 +530,12 @@ function buildAgentProgressMap(jsonlPath) {
         if (toolIdMatch && bgAgentMatch && !map[toolIdMatch[1]]) {
           map[toolIdMatch[1]] = { agentId: bgAgentMatch[1], prompt: null };
         }
+      } else if (line.includes('"teammate_spawned"')) {
+        const toolIdMatch = tmToolIdRe.exec(line);
+        const agentMatch = tmAgentIdRe.exec(line);
+        if (toolIdMatch && agentMatch && !map[toolIdMatch[1]]) {
+          map[toolIdMatch[1]] = { agentId: agentMatch[1], prompt: null };
+        }
       }
     }
   } catch (_) {}
@@ -506,6 +580,39 @@ function readCompactSummaries(jsonlPath) {
   return results.sort((a, b) => (a.timestamp || '').localeCompare(b.timestamp || ''));
 }
 
+function findTerminatedTeammates(jsonlPath) {
+  const terminated = new Map();
+  try {
+    const content = readFileSync(jsonlPath, 'utf8');
+    for (const line of content.split('\n')) {
+      if (!line.includes('teammate-message')) continue;
+      if (!line.includes('teammate_terminated') && !line.includes('shutdown_response')) continue;
+      try {
+        const obj = JSON.parse(line);
+        if (obj.type !== 'user') continue;
+        const text = typeof obj.message?.content === 'string' ? obj.message.content : null;
+        if (!text) continue;
+        const ts = obj.timestamp || null;
+        for (const tmMatch of text.matchAll(/<teammate-message\s+[^>]*teammate_id="([^"]+)"[^>]*>([\s\S]*?)<\/teammate-message>/g)) {
+          try {
+            const tid = tmMatch[1];
+            const body = tmMatch[2].trim();
+            const protocol = JSON.parse(body);
+            if (protocol.type === 'teammate_terminated') {
+              const name = protocol.from || (protocol.message?.match(/^(\S+)\s/)?.[1]) || tid;
+              if (name !== 'system') terminated.set(name, ts);
+            } else if (protocol.type === 'shutdown_response' && protocol.approve) {
+              const name = protocol.from || tid;
+              if (name !== 'system') terminated.set(name, ts);
+            }
+          } catch (_) {}
+        }
+      } catch (_) {}
+    }
+  } catch (_) {}
+  return terminated;
+}
+
 module.exports = {
   parseTask,
   parseAgent,
@@ -516,5 +623,6 @@ module.exports = {
   readSessionInfoFromJsonl,
   readRecentMessages,
   buildAgentProgressMap,
-  readCompactSummaries
+  readCompactSummaries,
+  findTerminatedTeammates
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "2.1.0-rc.1",
+  "version": "2.1.0-rc.3",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -109,10 +109,10 @@ async function fetchSessions() {
   console.log('[fetchSessions] Starting...');
   try {
     const pinnedParam = pinnedSessionIds.size > 0 ? `&pinned=${[...pinnedSessionIds].join(',')}` : '';
-    const res = await fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`);
-    const newSessions = await res.json();
-    const tasksRes = await fetch('/api/tasks/all');
-    const newTasks = await tasksRes.json();
+    const [newSessions, newTasks] = await Promise.all([
+      fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`).then((r) => r.json()),
+      fetch('/api/tasks/all').then((r) => r.json()),
+    ]);
 
     const sessionsHash = JSON.stringify(newSessions);
     const tasksHash = JSON.stringify(newTasks);
@@ -436,10 +436,12 @@ async function fetchTasks(sessionId) {
     currentPins = loadPins(sessionId);
     ownerFilter = '';
     lastMessagesHash = '';
+    for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
+    for (const k of Object.keys(teamColorMap)) delete teamColorMap[k];
     sessionJustSelected = true;
     updateUrl();
     renderSession();
-    fetchAgents(sessionId);
+    await fetchAgents(sessionId);
     if (!agentLogMode) fetchMessages(sessionId);
   } catch (error) {
     console.error('Failed to fetch tasks:', error);
@@ -472,7 +474,10 @@ async function fetchAgents(sessionId) {
     if (hash === lastAgentsHash) return;
     lastAgentsHash = hash;
     currentAgents = agents;
+    updateTeamColors(agents, data.teamColors);
+    for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
     renderAgentFooter();
+    if (currentSessionId === sessionId) renderKanban();
   } catch (e) {
     console.error('[fetchAgents]', e);
   }
@@ -494,8 +499,12 @@ function toggleMessagePanel() {
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function viewAgentLog(agentId) {
-  const agent = currentAgents.find((a) => a.agentId === agentId);
+async function viewAgentLog(agentId) {
+  let agent = currentAgents.find((a) => a.agentId === agentId);
+  if (!agent && currentSessionId) {
+    await fetchAgents(currentSessionId);
+    agent = currentAgents.find((a) => a.agentId === agentId);
+  }
   if (!agent) return;
   const shortId = agentId.length > 8 ? agentId.slice(0, 8) : agentId;
   agentLogMode = { agentId, sessionId: currentSessionId, agentType: agent.type || 'unknown' };
@@ -704,15 +713,53 @@ function renderMessages(messages) {
           m.tool === 'Agent' && m.agentId
             ? ` <span class="msg-agent-link" title="View agent" onclick="event.stopPropagation();showAgentModal('${escapeHtml(m.agentId)}')">⇗</span>`
             : '';
-        const agentLogBtn = m.tool === 'Agent' && m.agentId ? agentLogButton(m.agentId) : '';
-        const itemClick =
+        let agentLogBtn = '';
+        if (m.tool === 'Agent' && m.agentId) {
+          agentLogBtn = agentLogButton(m.agentId);
+        } else if (m.tool === 'SendMessage' && m.params?.to) {
+          const recipient = currentAgents.find((a) => (a.type || a.name) === m.params.to);
+          if (recipient) agentLogBtn = agentLogButton(recipient.agentId);
+        }
+        const recipientColor =
+          m.tool === 'SendMessage' && m.params?.to ? resolveNamedColor(teamColorMap[m.params.to]) : null;
+        const borderStyle = recipientColor ? `border-left:3px solid ${recipientColor.color};` : '';
+        const combinedStyle = `style="${borderStyle}cursor:pointer"`;
+        const itemClickAttr =
           m.tool === 'Agent' && m.agentId
-            ? `onclick="showAgentModal('${escapeHtml(m.agentId)}')" style="cursor:pointer"`
-            : clickable;
-        return `<div class="msg-item msg-tool" ${itemClick}>
+            ? `onclick="showAgentModal('${escapeHtml(m.agentId)}')" ${combinedStyle}`
+            : `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" ${combinedStyle}`;
+        return `<div class="msg-item msg-tool" ${itemClickAttr}>
             ${MSG_ICON_TOOL}
             <div class="msg-body"><div class="msg-text">${escapeHtml(m.tool)}${toolDetail}${agentLink}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${agentLogBtn}${pinBtn}
           </div>`;
+      } else if (m.type === 'teammate') {
+        if (m.teammateId && m.color && !teamColorMap[m.teammateId]) teamColorMap[m.teammateId] = m.color;
+        const tmColor = m.color ? resolveNamedColor(m.color)?.color || m.color : '';
+        const nameSpan = `<span class="teammate-name" style="${tmColor ? `color:${escapeHtml(tmColor)}` : ''}">${escapeHtml(m.teammateId || 'teammate')}</span>`;
+        let tmLookupName = m.teammateId;
+        if (m.teammateId === 'system' && m.protocolType === 'teammate_terminated' && m.protocolData?.message) {
+          const shutMatch = m.protocolData.message.match(/^(.+?) has shut down/);
+          if (shutMatch) tmLookupName = shutMatch[1];
+        }
+        const tmAgent = tmLookupName ? currentAgents.find((a) => (a.type || a.name) === tmLookupName) : null;
+        const tmLogBtn = tmAgent ? agentLogButton(tmAgent.agentId) : '';
+        if (m.isIdle) {
+          return `<div class="msg-item msg-teammate msg-idle" ${clickable}>
+              ${MSG_ICON_IDLE}
+              <div class="msg-body"><div class="msg-text">${nameSpan} <span class="idle-label">${escapeHtml(m.protocolLabel || 'idle')}</span></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}
+            </div>`;
+        }
+        if (m.isProtocol) {
+          return `<div class="msg-item msg-teammate msg-protocol" ${clickable}>
+              ${MSG_ICON_TEAMMATE}
+              <div class="msg-body"><div class="msg-text">${nameSpan} <span class="protocol-label">${escapeHtml(m.protocolLabel || m.protocolType)}</span></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}
+            </div>`;
+        }
+        const summaryText = m.summary ? escapeHtml(m.summary) : escapeHtml((m.text || '').slice(0, 80));
+        return `<div class="msg-item msg-teammate" ${clickable}>
+            ${MSG_ICON_TEAMMATE}
+            <div class="msg-body"><div class="msg-text">${nameSpan} ${summaryText}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}${pinBtn}
+          </div>`;
       }
       return '';
     })
@@ -736,6 +783,10 @@ const MSG_ICON_TOOL =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>';
 const MSG_ICON_SYSTEM =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>';
+const MSG_ICON_TEAMMATE =
+  '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>';
+const MSG_ICON_IDLE =
+  '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6"/></svg>';
 const AGENT_LOG_ICON =
   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>';
 function agentLogButton(agentId) {
@@ -963,12 +1014,25 @@ function showMsgDetail(idx) {
     } else {
       agentBtn.style.display = 'none';
     }
-    const toolParamsHtml = renderToolParamsHtml(m.params);
-    const toolResultHtml = renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull);
+    const sendProto = m.tool === 'SendMessage' && m.params?.protocol;
+    const toolParamsHtml = renderToolParamsHtml(
+      sendProto ? Object.fromEntries(Object.entries(m.params).filter(([k]) => k !== 'protocol')) : m.params,
+    );
+    const hideResult = m.tool === 'SendMessage' || TASK_TOOLS.has(m.tool);
+    const taskResultHtml = TASK_TOOLS.has(m.tool) ? renderTaskResult(m.toolResult) : '';
+    const toolResultHtml = hideResult
+      ? ''
+      : renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull);
     const hasAgentTabs = m.tool === 'Agent' && m.agentId && (m.agentLastMessage || m.agentPrompt);
     let mainHtml;
-    if (hasAgentTabs) {
+    if (sendProto) {
+      mainHtml = descHtml + renderProtocolDetail(m.params.protocol);
+    } else if (m.tool === 'SendMessage' && fullText) {
+      mainHtml = `${descHtml}<div class="markdown-body">${renderMarkdown(fullText)}</div>`;
+    } else if (hasAgentTabs) {
       mainHtml = descHtml || '';
+    } else if (taskResultHtml) {
+      mainHtml = '';
     } else if (fullText) {
       const detailEscaped = escapeHtml(fullText);
       const detailRendered = m.tool === 'Bash' ? highlightBash(detailEscaped) : detailEscaped;
@@ -976,7 +1040,18 @@ function showMsgDetail(idx) {
     } else {
       mainHtml = '<em>No details</em>';
     }
-    body.innerHTML = mainHtml + toolParamsHtml + (hasAgentTabs ? '' : toolResultHtml) + agentExtraHtml;
+    body.innerHTML = mainHtml + toolParamsHtml + taskResultHtml + (hasAgentTabs ? '' : toolResultHtml) + agentExtraHtml;
+  } else if (m.type === 'teammate') {
+    document.getElementById('msg-detail-title').textContent = m.teammateId || 'Teammate';
+    document.getElementById('msg-detail-agent-btn').style.display = 'none';
+    if (m.isProtocol) {
+      body.innerHTML = m.protocolData
+        ? renderProtocolDetail(m.protocolData)
+        : `<div class="teammate-idle-detail"><span class="protocol-label">${escapeHtml(m.protocolLabel || m.protocolType)}</span></div>`;
+    } else {
+      const text = stripAnsi(m.fullText || m.text || '');
+      body.innerHTML = renderMarkdown(text);
+    }
   } else {
     const text = stripAnsi(m.fullText || m.text);
     document.getElementById('msg-detail-title').textContent =
@@ -1067,6 +1142,69 @@ async function copyWithFeedback(text, btn) {
 //#endregion
 
 //#region TOOL_RENDERING
+const PROTOCOL_SKIP_KEYS = new Set(['type', 'from', 'timestamp', 'paneId', 'backendType']);
+function renderProtocolDetail(data) {
+  if (!data || typeof data !== 'object') return '';
+  const typeBadge = data.type
+    ? `<span class="protocol-type-badge">${escapeHtml(data.type.replace(/_/g, ' '))}</span>`
+    : '';
+  const fields = Object.entries(data)
+    .filter(([k]) => !PROTOCOL_SKIP_KEYS.has(k))
+    .map(([k, v]) => {
+      const label = escapeHtml(
+        k
+          .replace(/([A-Z])/g, ' $1')
+          .replace(/_/g, ' ')
+          .trim()
+          .toLowerCase(),
+      );
+      let val;
+      if (typeof v === 'boolean') {
+        val = `<span class="protocol-bool protocol-bool-${v}">${v ? 'yes' : 'no'}</span>`;
+      } else if (v == null) {
+        val = `<span style="color:var(--text-muted)">null</span>`;
+      } else {
+        val = escapeHtml(String(v));
+      }
+      return `<div class="protocol-field"><span class="protocol-field-key">${label}</span>${val}</div>`;
+    });
+  return `<div class="protocol-detail">${typeBadge}${fields.length ? `<div class="protocol-fields">${fields.join('')}</div>` : ''}</div>`;
+}
+
+const TASK_TOOLS = new Set(['TaskCreate', 'TaskUpdate', 'TaskGet', 'TaskList']);
+function renderTaskResult(toolResult) {
+  if (!toolResult) return '';
+  const lines = toolResult.trim().split('\n');
+  const fields = [];
+  for (const line of lines) {
+    const m = line.match(/^([A-Za-z #]+):\s*(.+)$/);
+    if (m) fields.push([m[1].trim(), m[2].trim()]);
+  }
+  if (!fields.length) return '';
+  const title = fields.find(([k]) => /^Task/.test(k));
+  const status = fields.find(([k]) => k === 'Status');
+  const rest = fields.filter(([k]) => !/^Task/.test(k) && k !== 'Status');
+  const statusColors = {
+    pending: 'var(--text-muted)',
+    in_progress: 'var(--info)',
+    completed: 'var(--success)',
+    deleted: 'var(--danger)',
+  };
+  const sc = status ? statusColors[status[1]] || 'var(--text-muted)' : '';
+  let html = '<div class="protocol-detail">';
+  if (title) html += `<span class="protocol-type-badge">${escapeHtml(title[1])}</span>`;
+  if (status)
+    html += `<span style="display:inline-block;font-size:10px;font-weight:600;color:${sc};text-transform:uppercase;margin-bottom:6px">${escapeHtml(status[1])}</span>`;
+  if (rest.length) {
+    html += '<div class="protocol-fields">';
+    for (const [k, v] of rest) {
+      html += `<div class="protocol-field"><span class="protocol-field-key">${escapeHtml(k.toLowerCase())}</span>${escapeHtml(v)}</div>`;
+    }
+    html += '</div>';
+  }
+  return `${html}</div>`;
+}
+
 function renderToolParamsHtml(params) {
   if (!params) return '';
   const BLOCK_KEYS = new Set(['old_string', 'new_string', 'content', 'plan']);
@@ -1272,9 +1410,14 @@ function renderAgentFooter() {
       if (overlapped || reSpawn || isActive) filtered.push(group[i]);
     }
   }
-  // Sort by updatedAt desc, keep up to 7 most recent
+  // Sort: active/idle first, then by updatedAt desc
+  const statusOrder = { active: 0, idle: 1, stopped: 2 };
   const visible = filtered
-    .sort((a, b) => new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0))
+    .sort(
+      (a, b) =>
+        (statusOrder[a.status] ?? 2) - (statusOrder[b.status] ?? 2) ||
+        new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0),
+    )
     .slice(0, AGENT_LOG_MAX);
 
   const permFresh = currentWaiting?.timestamp && now - new Date(currentWaiting.timestamp).getTime() < WAITING_TTL_MS;
@@ -1320,7 +1463,9 @@ function renderAgentFooter() {
         const colonIdx = rawType.indexOf(':');
         const typeNs = colonIdx > 0 ? rawType.substring(0, colonIdx + 1) : '';
         const typeName = colonIdx > 0 ? rawType.substring(colonIdx + 1) : rawType;
-        return `<div class="agent-card" onclick="showAgentModal('${a.agentId}')">
+        const agentColor = resolveNamedColor(a.color);
+        const colorStyle = agentColor ? ` style="border-left:3px solid ${agentColor.color}"` : '';
+        return `<div class="agent-card"${colorStyle} onclick="showAgentModal('${a.agentId}')">
           <div class="agent-type-row">${typeNs ? `<span class="agent-type-ns">${escapeHtml(typeNs)}</span>` : ''}<span class="agent-type-name">${escapeHtml(typeName)}</span></div>
           <div class="agent-status-row"><span class="agent-dot ${a.status}"></span><span class="agent-status">${statusText}</span></div>
           ${msgHtml}
@@ -2961,9 +3106,12 @@ function setupEventSource() {
     function debouncedRefresh(sessionId, isMetadata) {
       if (isMetadata) {
         clearTimeout(metadataRefreshTimer);
-        metadataRefreshTimer = setTimeout(() => {
+        metadataRefreshTimer = setTimeout(async () => {
           fetchSessions().catch((err) => console.error('[SSE] fetchSessions failed:', err));
-          if (currentSessionId && !agentLogMode) fetchMessages(currentSessionId);
+          if (currentSessionId) {
+            await fetchAgents(currentSessionId);
+            if (!agentLogMode) fetchMessages(currentSessionId);
+          }
         }, 2000);
       } else {
         pendingTaskSessionIds.add(sessionId);
@@ -3252,13 +3400,46 @@ const ownerColors = [
   { bg: 'rgba(22, 163, 74, 0.14)', color: '#15803d' }, // green
   { bg: 'rgba(99, 102, 241, 0.14)', color: '#4f46e5' }, // indigo
 ];
+const namedColorMap = {
+  red: { bg: 'rgba(239, 68, 68, 0.14)', color: '#dc2626' },
+  blue: { bg: 'rgba(37, 99, 235, 0.14)', color: '#1d5bbf' },
+  green: { bg: 'rgba(22, 163, 74, 0.14)', color: '#15803d' },
+  purple: { bg: 'rgba(168, 85, 247, 0.14)', color: '#7c3aed' },
+  orange: { bg: 'rgba(234, 88, 12, 0.14)', color: '#c2410c' },
+  pink: { bg: 'rgba(219, 39, 119, 0.14)', color: '#b5246a' },
+  yellow: { bg: 'rgba(202, 138, 4, 0.14)', color: '#92700c' },
+  teal: { bg: 'rgba(14, 165, 133, 0.14)', color: '#0d7d65' },
+  indigo: { bg: 'rgba(99, 102, 241, 0.14)', color: '#4f46e5' },
+  cyan: { bg: 'rgba(6, 182, 212, 0.14)', color: '#0891b2' },
+};
 const ownerColorCache = {};
+const teamColorMap = {};
 function isInternalTask(task) {
   return task.metadata && task.metadata._internal === true;
 }
 
+function resolveNamedColor(colorName) {
+  if (!colorName) return null;
+  return namedColorMap[colorName.toLowerCase()] || null;
+}
+
+function updateTeamColors(agents, colors) {
+  if (colors) Object.assign(teamColorMap, colors);
+  for (const a of agents) {
+    const name = a.type || a.name;
+    if (name && a.color) teamColorMap[name] = a.color;
+  }
+}
+
 function getOwnerColor(name) {
   if (ownerColorCache[name]) return ownerColorCache[name];
+  if (teamColorMap[name]) {
+    const c = resolveNamedColor(teamColorMap[name]);
+    if (c) {
+      ownerColorCache[name] = c;
+      return c;
+    }
+  }
   let hash = 5381;
   for (let i = 0; i < name.length; i++) {
     hash = ((hash * 33) ^ name.charCodeAt(i)) | 0;
@@ -3623,6 +3804,10 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   if (session.tasksDir) {
     infoRows.push(['Tasks Dir', session.tasksDir, { openPath: session.tasksDir }]);
   }
+  if (teamConfig?.configPath) {
+    const configDir = teamConfig.configPath.replace(/[/\\][^/\\]+$/, '');
+    infoRows.push(['Team Config', teamConfig.configPath, { openPath: configDir, openFile: teamConfig.configPath }]);
+  }
   const clickableStyle =
     "font-family: 'IBM Plex Mono', monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--accent-text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;";
   const plainStyle =
@@ -3638,7 +3823,8 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
     } else {
       html += `<span style="${plainStyle}" title="${copyVal}">${escapeHtml(value)}</span>`;
     }
-    html += `<button onclick="navigator.clipboard.writeText('${copyVal.replace(/'/g, "\\'")}'); this.textContent='✓'; setTimeout(() => this.textContent='Copy', 1000)" style="padding: 2px 8px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;">Copy</button>`;
+    const jsCopyVal = copyVal.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+    html += `<button onclick="navigator.clipboard.writeText('${jsCopyVal}'); this.textContent='✓'; setTimeout(() => this.textContent='Copy', 1000)" style="padding: 2px 8px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;">Copy</button>`;
   });
   html += `</div>`;
 
@@ -3686,10 +3872,12 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
     members.forEach((member) => {
       const taskCount = ownerCounts[member.name] || 0;
       const memberDesc = memberDescriptions[member.name];
+      const mc = resolveNamedColor(member.color);
+      const borderStyle = mc ? ` style="border-left:3px solid ${mc.color}"` : '';
+      const nameStyle = mc ? ` style="color:${mc.color}"` : '';
       html += `
-            <div class="team-member-card">
-              <div class="member-name">🟢 ${escapeHtml(member.name)}</div>
-              <div class="member-detail">Role: ${escapeHtml(member.agentType || 'unknown')}</div>
+            <div class="team-member-card"${borderStyle}>
+              <div class="member-name"${nameStyle}>${escapeHtml(member.name)}</div>
               ${member.model ? `<div class="member-detail">Model: ${escapeHtml(member.model)}</div>` : ''}
               ${memberDesc ? `<div class="member-detail" style="margin-top: 4px; font-style: italic; color: var(--text-secondary);">${escapeHtml(memberDesc.split('\n')[0])}</div>` : ''}
               <div class="member-tasks">Tasks: ${taskCount} assigned</div>

package/public/style.css

@@ -2115,6 +2115,36 @@ body::before {
   padding: 0;
   font-size: 11px;
 }
+.msg-item.msg-teammate {
+  border-left: 3px solid var(--team);
+}
+.msg-item.msg-protocol {
+  border-left: 3px solid var(--border);
+  opacity: 0.7;
+}
+.msg-item.msg-idle {
+  border-left: 3px solid var(--border);
+  opacity: 0.75;
+}
+.msg-item.msg-idle .msg-icon {
+  width: 12px;
+  height: 12px;
+}
+.teammate-name {
+  font-weight: 600;
+  font-size: 11px;
+}
+.idle-label,
+.protocol-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+.teammate-idle-detail {
+  padding: 12px;
+  text-align: center;
+  color: var(--text-muted);
+}
 .msg-time {
   font-size: 10px;
   color: var(--text-muted);
@@ -2150,6 +2180,7 @@ body::before {
 }
 .msg-agent-log-btn {
   flex-shrink: 0;
+  margin-left: 0;
   background: none;
   border: none;
   color: var(--text-muted);
@@ -2167,6 +2198,52 @@ body::before {
   opacity: 1;
   color: var(--accent);
 }
+.protocol-detail {
+  padding: 8px 12px;
+}
+.protocol-detail + div {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+.protocol-type-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  margin-bottom: 8px;
+}
+.protocol-fields {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 10px;
+  align-items: baseline;
+  font-size: 0.85rem;
+}
+.protocol-field {
+  display: contents;
+}
+.protocol-field-key {
+  color: var(--text-muted);
+  white-space: nowrap;
+  text-align: right;
+}
+.protocol-field-key::after {
+  content: ':';
+}
+.protocol-bool {
+  font-weight: 600;
+}
+.protocol-bool-true {
+  color: #4caf50;
+}
+.protocol-bool-false {
+  color: #ef5350;
+}
 
 /* #endregion */
 

package/server.js

@@ -14,7 +14,8 @@ const {
   readRecentMessages: _readRecentMessagesUncached,
   readSessionInfoFromJsonl,
   buildAgentProgressMap,
-  readCompactSummaries
+  readCompactSummaries,
+  findTerminatedTeammates
 } = require('./lib/parsers');
 
 const isSetupCommand = process.argv.includes('--install') || process.argv.includes('--uninstall');
@@ -55,7 +56,8 @@ const CONTEXT_STATUS_DIR = path.join(CLAUDE_DIR, 'context-status');
 
 const PERMISSION_TTL_MS = 1800000;
 const AGENT_TTL_MS = 3600000;
-const AGENT_STALE_MS = 300000;
+const AGENT_STALE_MS = 900000;
+const SESSION_STALE_MS = 300000;
 
 const WAITING_RESOLVE_GRACE_MS = 15000;
 
@@ -74,10 +76,20 @@ function checkWaitingForUser(agentDir, logMtime) {
   return null;
 }
 
+function isGhostAgent(agent) {
+  if (agent.startedAt !== agent.updatedAt || agent.lastMessage) return false;
+  return (Date.now() - new Date(agent.startedAt).getTime()) >= AGENT_STALE_MS;
+}
+
+function getContextStatus(sessionId, meta) {
+  return contextStatusCache.get(sessionId) || (meta?.teamLeaderId ? contextStatusCache.get(meta.teamLeaderId) : null) || null;
+}
+
 function isAgentFresh(agent) {
-  if (!agent.updatedAt) return true;
-  if (agent.startedAt === agent.updatedAt && !agent.lastMessage) return false;
-  return (Date.now() - new Date(agent.updatedAt).getTime()) < AGENT_TTL_MS;
+  if (isGhostAgent(agent)) return false;
+  const ts = agent.updatedAt || agent.startedAt;
+  if (!ts) return true;
+  return (Date.now() - new Date(ts).getTime()) < AGENT_TTL_MS;
 }
 
 function getSessionLogStat(meta) {
@@ -88,17 +100,20 @@ function getSessionLogStat(meta) {
   } catch (e) { return { mtime: null, hasMessages: false }; }
 }
 
-function checkAgentStatus(agentDir, stale, logMtime) {
+function checkAgentStatus(agentDir, stale, logMtime, isTeam) {
   const result = { hasActive: false, hasRunning: false, waitingForUser: null };
   if (!existsSync(agentDir)) return result;
   result.waitingForUser = checkWaitingForUser(agentDir, logMtime);
   if (result.waitingForUser) result.hasActive = true;
-  if (stale) return result;
+  if (stale && !isTeam) return result;
   try {
     for (const file of readdirSync(agentDir).filter(f => f.endsWith('.json') && !f.startsWith('_'))) {
       try {
         const agent = JSON.parse(readFileSync(path.join(agentDir, file), 'utf8'));
-        if (isAgentFresh(agent)) {
+        if (isTeam && (agent.status === 'active' || agent.status === 'idle')) {
+          result.hasActive = true;
+          if (agent.status === 'active') result.hasRunning = true;
+        } else if (isAgentFresh(agent)) {
           if (agent.status === 'active') { result.hasActive = true; result.hasRunning = true; }
         }
         if (result.hasRunning && result.hasActive) break;
@@ -170,6 +185,7 @@ const messageCache = new Map();
 const MESSAGE_CACHE_TTL = 5000;
 const MAX_CACHE_ENTRIES = 200;
 const progressMapCache = new Map();
+const terminatedCache = new Map();
 const compactSummaryCache = new Map();
 const taskCountsCache = new Map();
 const contextStatusCache = new Map();
@@ -208,36 +224,32 @@ function getTaskCounts(sessionPath) {
   return result;
 }
 
-function getProgressMap(jsonlPath) {
+function cachedByMtime(cache, filePath, loadFn, fallback) {
   try {
-    const cached = progressMapCache.get(jsonlPath);
-    if (cached && Date.now() - cached.ts < MESSAGE_CACHE_TTL) return cached.map;
-    const st = statSync(jsonlPath);
+    const cached = cache.get(filePath);
+    if (cached && Date.now() - cached.ts < MESSAGE_CACHE_TTL) return cached.data;
+    const st = statSync(filePath);
     if (cached && cached.mtime === st.mtimeMs) {
       cached.ts = Date.now();
-      return cached.map;
+      return cached.data;
     }
-    const map = buildAgentProgressMap(jsonlPath);
-    progressMapCache.set(jsonlPath, { map, mtime: st.mtimeMs, ts: Date.now() });
-    evictStaleCache(progressMapCache);
-    return map;
-  } catch (_) { return {}; }
+    const data = loadFn(filePath);
+    cache.set(filePath, { data, mtime: st.mtimeMs, ts: Date.now() });
+    evictStaleCache(cache);
+    return data;
+  } catch (_) { return fallback; }
+}
+
+function getProgressMap(jsonlPath) {
+  return cachedByMtime(progressMapCache, jsonlPath, buildAgentProgressMap, {});
+}
+
+function getTerminatedTeammates(jsonlPath) {
+  return cachedByMtime(terminatedCache, jsonlPath, findTerminatedTeammates, new Set());
 }
 
 function readRecentMessages(jsonlPath, limit = 10) {
-  try {
-    const stat = statSync(jsonlPath);
-    const cached = messageCache.get(jsonlPath);
-    if (cached && cached.mtime === stat.mtimeMs && Date.now() - cached.ts < MESSAGE_CACHE_TTL) {
-      return cached.messages;
-    }
-    const messages = _readRecentMessagesUncached(jsonlPath, limit);
-    messageCache.set(jsonlPath, { messages, mtime: stat.mtimeMs, ts: Date.now() });
-    evictStaleCache(messageCache);
-    return messages;
-  } catch (e) {
-    return [];
-  }
+  return cachedByMtime(messageCache, jsonlPath, p => _readRecentMessagesUncached(p, limit), []);
 }
 
 /**
@@ -378,6 +390,42 @@ function getSessionDisplayName(sessionId, meta) {
   return null;
 }
 
+function buildSessionObject(id, meta, overrides = {}) {
+  const logStat = overrides._logStat || getSessionLogStat(meta);
+  const logMtime = logStat.mtime;
+  const logAge = logMtime ? Date.now() - logMtime : Infinity;
+  return {
+    id,
+    name: getSessionDisplayName(id, meta),
+    slug: meta.slug || null,
+    project: meta.project || null,
+    description: meta.description || null,
+    gitBranch: meta.gitBranch || null,
+    customTitle: meta.customTitle || null,
+    taskCount: 0,
+    completed: 0,
+    inProgress: 0,
+    pending: 0,
+    createdAt: meta.created || null,
+    modifiedAt: overrides.modifiedAt || new Date(0).toISOString(),
+    isTeam: false,
+    memberCount: 0,
+    hasMessages: logStat.hasMessages,
+    hasActiveAgents: false,
+    hasRunningAgents: false,
+    hasWaitingForUser: false,
+    hasRecentLog: logAge <= SESSION_STALE_MS,
+    jsonlPath: meta.jsonlPath || null,
+    tasksDir: null,
+    projectDir: meta.jsonlPath ? path.dirname(meta.jsonlPath) : null,
+    contextStatus: getContextStatus(id, meta),
+    ...getPlanInfo(meta.slug),
+    ...overrides,
+    // Remove internal-only field
+    _logStat: undefined,
+  };
+}
+
 // API: List all sessions
 app.get('/api/sessions', async (req, res) => {
   // Prevent browser caching
@@ -422,43 +470,31 @@ app.get('/api/sessions', async (req, res) => {
           }
 
           const isTeam = isTeamSession(entry.name);
-          const memberCount = isTeam ? (loadTeamConfig(entry.name)?.members?.length || 0) : 0;
+          const teamConfig = isTeam ? loadTeamConfig(entry.name) : null;
+          const memberCount = teamConfig?.members?.length || 0;
           const planInfo = getPlanInfo(meta.slug);
 
           const resolvedAgentDir = (() => {
-            const tc = loadTeamConfig(entry.name);
-            const rid = (tc && tc.leadSessionId) ? tc.leadSessionId : entry.name;
+            const rid = teamConfig?.leadSessionId || entry.name;
             return path.join(AGENT_ACTIVITY_DIR, rid);
           })();
-          const agentStatus = checkAgentStatus(resolvedAgentDir, stale, logMtime);
-
-          sessionsMap.set(entry.name, {
-            id: entry.name,
-            name: getSessionDisplayName(entry.name, meta),
-            slug: meta.slug || null,
-            project: meta.project || null,
-            description: meta.description || null,
-            gitBranch: meta.gitBranch || null,
-            customTitle: meta.customTitle || null,
+          const agentStatus = checkAgentStatus(resolvedAgentDir, stale, logMtime, isTeam);
+
+          sessionsMap.set(entry.name, buildSessionObject(entry.name, meta, {
+            _logStat: logStat,
             taskCount,
             completed,
             inProgress,
             pending,
-            createdAt: meta.created || null,
-            modifiedAt: modifiedAt,
+            modifiedAt,
             isTeam,
             memberCount,
-            hasMessages: logStat.hasMessages,
             hasActiveAgents: agentStatus.hasActive,
             hasRunningAgents: agentStatus.hasRunning,
             hasWaitingForUser: !!agentStatus.waitingForUser,
-            hasRecentLog: logAge <= AGENT_STALE_MS,
-            jsonlPath: meta.jsonlPath || null,
             tasksDir: sessionPath,
-            projectDir: meta.jsonlPath ? path.dirname(meta.jsonlPath) : null,
-            contextStatus: contextStatusCache.get(entry.name) || (meta.teamLeaderId ? contextStatusCache.get(meta.teamLeaderId) : null) || null,
             ...planInfo
-          });
+          }));
         }
       }
     }
@@ -475,36 +511,16 @@ app.get('/api/sessions', async (req, res) => {
           const jsonlMtime = new Date(logMtime).toISOString();
           if (!modifiedAt || jsonlMtime > modifiedAt) modifiedAt = jsonlMtime;
         }
-        const planInfo = getPlanInfo(meta.slug);
+        const metaIsTeam = isTeamSession(sessionId);
         const metaAgentDir = path.join(AGENT_ACTIVITY_DIR, sessionId);
-        const metaAgentStatus = checkAgentStatus(metaAgentDir, stale, logMtime);
-        sessionsMap.set(sessionId, {
-          id: sessionId,
-          name: getSessionDisplayName(sessionId, meta),
-          slug: meta.slug || null,
-          project: meta.project || null,
-          description: meta.description || null,
-          gitBranch: meta.gitBranch || null,
-          customTitle: meta.customTitle || null,
-          taskCount: 0,
-          completed: 0,
-          inProgress: 0,
-          pending: 0,
-          createdAt: meta.created || null,
+        const metaAgentStatus = checkAgentStatus(metaAgentDir, stale, logMtime, metaIsTeam);
+        sessionsMap.set(sessionId, buildSessionObject(sessionId, meta, {
+          _logStat: logStat,
           modifiedAt: modifiedAt || new Date(0).toISOString(),
-          isTeam: false,
-          memberCount: 0,
-          hasMessages: logStat.hasMessages,
           hasActiveAgents: metaAgentStatus.hasActive,
           hasRunningAgents: metaAgentStatus.hasRunning,
           hasWaitingForUser: !!metaAgentStatus.waitingForUser,
-          hasRecentLog: logAge <= AGENT_STALE_MS,
-          jsonlPath: meta.jsonlPath || null,
-          tasksDir: null,
-          projectDir: meta.jsonlPath ? path.dirname(meta.jsonlPath) : null,
-          contextStatus: contextStatusCache.get(sessionId) || (meta.teamLeaderId ? contextStatusCache.get(meta.teamLeaderId) : null) || null,
-          ...planInfo
-        });
+        }));
       }
     }
 
@@ -518,29 +534,12 @@ app.get('/api/sessions', async (req, res) => {
           const logStat = getSessionLogStat(meta);
           const waiting = checkWaitingForUser(agentDir, logStat.mtime);
           if (!waiting) continue;
-          sessionsMap.set(dir.name, {
-            id: dir.name,
-            name: getSessionDisplayName(dir.name, meta),
-            slug: meta.slug || null,
-            project: meta.project || null,
-            description: meta.description || null,
-            gitBranch: meta.gitBranch || null,
-            customTitle: meta.customTitle || null,
-            taskCount: 0,
-            completed: 0,
-            inProgress: 0,
-            pending: 0,
-            createdAt: meta.created || null,
+          sessionsMap.set(dir.name, buildSessionObject(dir.name, meta, {
+            _logStat: logStat,
             modifiedAt: waiting.timestamp || new Date().toISOString(),
-            isTeam: false,
-            memberCount: 0,
-            hasMessages: logStat.hasMessages,
             hasActiveAgents: true,
             hasWaitingForUser: true,
-            jsonlPath: meta.jsonlPath || null,
-            tasksDir: null,
-            projectDir: meta.jsonlPath ? path.dirname(meta.jsonlPath) : null,
-          });
+          }));
         }
       } catch (e) { /* ignore */ }
     }
@@ -554,8 +553,7 @@ app.get('/api/sessions', async (req, res) => {
       }
     }
     for (const leaderId of teamLeaderIds) {
-      const session = sessionsMap.get(leaderId);
-      if (session && session.taskCount === 0) {
+      if (sessionsMap.has(leaderId)) {
         sessionsMap.delete(leaderId);
       }
     }
@@ -585,7 +583,7 @@ app.get('/api/sessions', async (req, res) => {
       const s = sessionsMap.get(pid);
       if (s && !s.contextStatus) {
         const meta = metadata[pid];
-        s.contextStatus = contextStatusCache.get(pid) || (meta?.teamLeaderId ? contextStatusCache.get(meta.teamLeaderId) : null) || null;
+        s.contextStatus = getContextStatus(pid, meta);
       }
     }
 
@@ -594,34 +592,17 @@ app.get('/api/sessions', async (req, res) => {
       if (sessionsMap.has(pid)) continue;
       const meta = metadata[pid];
       if (!meta) continue;
-      const logStat = getSessionLogStat(meta);
-      const logMtime = logStat.mtime;
+      const pinnedLogStat = getSessionLogStat(meta);
+      const pinnedLogMtime = pinnedLogStat.mtime;
       let modifiedAt = meta.created || null;
-      if (logMtime) {
-        const jsonlMtime = new Date(logMtime).toISOString();
+      if (pinnedLogMtime) {
+        const jsonlMtime = new Date(pinnedLogMtime).toISOString();
         if (!modifiedAt || jsonlMtime > modifiedAt) modifiedAt = jsonlMtime;
       }
-      sessionsMap.set(pid, {
-        id: pid,
-        name: getSessionDisplayName(pid, meta),
-        slug: meta.slug || null,
-        project: meta.project || null,
-        description: meta.description || null,
-        gitBranch: meta.gitBranch || null,
-        customTitle: meta.customTitle || null,
-        taskCount: 0, completed: 0, inProgress: 0, pending: 0,
-        createdAt: meta.created || null,
+      sessionsMap.set(pid, buildSessionObject(pid, meta, {
+        _logStat: pinnedLogStat,
         modifiedAt: modifiedAt || new Date(0).toISOString(),
-        isTeam: false, memberCount: 0,
-        hasMessages: logStat.hasMessages,
-        hasActiveAgents: false, hasRunningAgents: false, hasWaitingForUser: false,
-        hasRecentLog: false,
-        jsonlPath: meta.jsonlPath || null,
-        tasksDir: null,
-        projectDir: meta.jsonlPath ? path.dirname(meta.jsonlPath) : null,
-        contextStatus: contextStatusCache.get(pid) || (meta.teamLeaderId ? contextStatusCache.get(meta.teamLeaderId) : null) || null,
-        ...getPlanInfo(meta.slug)
-      });
+      }));
     }
 
     // Convert map to array and sort by most recently modified
@@ -771,6 +752,7 @@ app.post('/api/open-in-editor', (req, res) => {
 app.get('/api/teams/:name', (req, res) => {
   const config = loadTeamConfig(req.params.name);
   if (!config) return res.status(404).json({ error: 'Team not found' });
+  config.configPath = path.join(TEAMS_DIR, req.params.name, 'config.json');
   res.json(config);
 });
 
@@ -785,22 +767,60 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     const logMtime = getSessionLogStat(meta).mtime;
     const sessionStale = logMtime ? (Date.now() - logMtime) > AGENT_STALE_MS : true;
 
+    let teamConfig = loadTeamConfig(req.params.sessionId);
+    if (!teamConfig && existsSync(TEAMS_DIR)) {
+      try {
+        for (const td of readdirSync(TEAMS_DIR, { withFileTypes: true })) {
+          if (!td.isDirectory()) continue;
+          const cfg = loadTeamConfig(td.name);
+          if (cfg && cfg.leadSessionId === sessionId) { teamConfig = cfg; break; }
+        }
+      } catch (_) {}
+    }
+    const isTeam = !!teamConfig;
+    const teamMemberNames = isTeam ? new Set(teamConfig.members.map(m => m.name)) : null;
+
     const files = readdirSync(agentDir).filter(f => f.endsWith('.json') && !f.startsWith('_'));
     const agents = [];
     for (const file of files) {
       try {
         const agent = JSON.parse(readFileSync(path.join(agentDir, file), 'utf8'));
-        if (agent.startedAt === agent.updatedAt && !agent.lastMessage) continue;
-        const agentStale = !sessionStale && agent.updatedAt && (Date.now() - new Date(agent.updatedAt).getTime()) > AGENT_STALE_MS;
+        if (isGhostAgent(agent)) continue;
+        const agentTs = agent.updatedAt || agent.startedAt;
+        const agentStale = !sessionStale && agentTs && (Date.now() - new Date(agentTs).getTime()) > AGENT_STALE_MS;
         if (!isAgentFresh(agent) || sessionStale || agentStale) {
           if (agent.status === 'active' || agent.status === 'idle') {
-            agent.status = 'stopped';
-            if (!agent.stoppedAt) agent.stoppedAt = agent.updatedAt || agent.startedAt;
+            const agentName = agent.type || agent.name;
+            const isTeamMember = isTeam && agentName && teamMemberNames.has(agentName);
+            if (!isTeamMember) {
+              agent.status = 'stopped';
+              if (!agent.stoppedAt) agent.stoppedAt = agent.updatedAt || agent.startedAt;
+            }
           }
         }
         agents.push(agent);
       } catch (e) { /* skip invalid */ }
     }
+    const liveAgents = agents.filter(a => a.status === 'active' || a.status === 'idle');
+    if (liveAgents.length && meta.jsonlPath) {
+      try {
+        const terminated = getTerminatedTeammates(meta.jsonlPath);
+        if (terminated.size) {
+          for (const agent of liveAgents) {
+            const agentName = agent.type || agent.name;
+            if (agentName && terminated.has(agentName)) {
+              const terminatedAt = terminated.get(agentName);
+              if (terminatedAt && agent.startedAt && terminatedAt < agent.startedAt) continue;
+              agent.status = 'stopped';
+              agent.stoppedAt = agent.stoppedAt || new Date().toISOString();
+              const agentFile = path.join(agentDir, agent.agentId + '.json');
+              fs.writeFile(agentFile, JSON.stringify(agent), 'utf8').catch(() => {});
+            }
+          }
+        }
+      } catch (_) {}
+    }
+
     const agentsNeedingPrompt = agents.filter(a => !a.prompt);
     if (agentsNeedingPrompt.length && meta.jsonlPath) {
       try {
@@ -819,8 +839,21 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
         }
       } catch (_) {}
     }
+    const teamColors = {};
+    if (teamConfig?.members) {
+      for (const m of teamConfig.members) {
+        if (m.name && m.color) teamColors[m.name] = m.color;
+      }
+      if (Object.keys(teamColors).length) {
+        for (const agent of agents) {
+          const name = agent.type || agent.name;
+          if (name && teamColors[name]) agent.color = teamColors[name];
+        }
+      }
+    }
+
     const waitingForUser = checkWaitingForUser(agentDir, logMtime);
-    res.json({ agents, waitingForUser });
+    res.json({ agents, waitingForUser, teamColors });
   } catch (e) {
     res.json({ agents: [], waitingForUser: null });
   }
@@ -828,7 +861,7 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
 
 app.post('/api/sessions/:sessionId/agents/:agentId/stop', (req, res) => {
   const sessionId = resolveSessionId(req.params.sessionId);
-  const agentId = path.basename(req.params.agentId).replace(/[^a-zA-Z0-9_-]/g, '');
+  const agentId = sanitizeAgentId(req.params.agentId);
   const agentFile = path.join(AGENT_ACTIVITY_DIR, sessionId, agentId + '.json');
   if (!existsSync(agentFile)) return res.status(404).json({ error: 'Agent not found' });
   try {
@@ -897,27 +930,28 @@ app.get('/api/sessions/:sessionId/agents/:agentId/messages/stream', (req, res) =
     awaitWriteFinish: { stabilityThreshold: 200, pollInterval: 50 }
   });
 
-  const cleanup = () => watcher.close();
+  let closed = false;
+  const cleanup = () => { if (!closed) { closed = true; watcher.close(); } };
+
+  function emitMessages() {
+    const messages = readRecentMessages(subagentJsonl, 50);
+    lastSize = statSync(subagentJsonl).size;
+    res.write(`event: agent-log-update\ndata: ${JSON.stringify({ messages, agentId })}\n\n`);
+  }
 
   watcher.on('change', () => {
     try {
-      const currentSize = statSync(subagentJsonl).size;
-      if (currentSize <= lastSize) return;
-      const messages = readRecentMessages(subagentJsonl, 50);
-      lastSize = currentSize;
-      res.write(`event: agent-log-update\ndata: ${JSON.stringify({ messages, agentId })}\n\n`);
+      if (statSync(subagentJsonl).size <= lastSize) return;
+      emitMessages();
     } catch (_) {}
   });
 
   watcher.on('add', () => {
-    try {
-      const messages = readRecentMessages(subagentJsonl, 50);
-      lastSize = statSync(subagentJsonl).size;
-      res.write(`event: agent-log-update\ndata: ${JSON.stringify({ messages, agentId })}\n\n`);
-    } catch (_) {}
+    try { emitMessages(); } catch (_) {}
   });
 
   req.on('close', cleanup);
+  res.on('close', cleanup);
   res.on('error', cleanup);
 });