claude-code-kanban 3.9.0 → 3.10.0

package/lib/parsers.js

@@ -115,6 +115,20 @@ function parseJsonlLine(line) {
 }
 
 const TOOL_RESULT_MAX = 1500;
+const USER_TEXT_MAX = 500;
+const INTERRUPT_MARKER = '[Request interrupted by user]';
+
+function pushUserMessage(messages, text, timestamp, sysLabel) {
+  if (sysLabel === '__skip__') return;
+  const truncated = text.length > USER_TEXT_MAX;
+  messages.push({
+    type: 'user',
+    text: truncated ? text.slice(0, USER_TEXT_MAX) + '...' : text,
+    fullText: truncated ? text : null,
+    timestamp,
+    ...(sysLabel && { systemLabel: sysLabel })
+  });
+}
 
 // Cache: jsonlPath -> { scannedUpTo, customTitle }
 // Only re-scan the new bytes appended since last scan
@@ -516,17 +530,16 @@ function readRecentMessages(jsonlPath, limit = 10) {
                 });
                 continue;
               }
-              const sysLabel = getSystemMessageLabel(t);
-              if (sysLabel === '__skip__') continue;
-              const uTruncated = t.length > 500;
-              messages.push({
-                type: 'user',
-                text: uTruncated ? t.slice(0, 500) + '...' : t,
-                fullText: uTruncated ? t : null,
-                timestamp: obj.timestamp,
-                ...(sysLabel && { systemLabel: sysLabel })
-              });
+              pushUserMessage(messages, t, obj.timestamp, getSystemMessageLabel(t));
             } else if (Array.isArray(obj.message.content)) {
+              const joined = obj.message.content
+                .filter(b => b.type === 'text' && typeof b.text === 'string' && b.text)
+                .map(b => b.text)
+                .join('\n')
+                .trim();
+              if (joined && joined !== INTERRUPT_MARKER) {
+                pushUserMessage(messages, joined, obj.timestamp, getSystemMessageLabel(joined));
+              }
               for (const block of obj.message.content) {
                 if (block.type === 'tool_result' && block.tool_use_id) {
                   let resultText = '';
@@ -633,6 +646,9 @@ function readMessagesPage(jsonlPath, limit = 10, beforeTimestamp = null) {
 function buildSessionDigest(jsonlPath) {
   const map = {};
   const terminated = new Map();
+  const rejectedToolUseIds = new Set();
+  const promptByToolUseId = {};
+  const killedAgentIds = new Set();
   try {
     const content = readFileSync(jsonlPath, 'utf8');
     const re = /"type":"agent_progress"[^}]*"agentId":"([^"]+)"/;
@@ -642,6 +658,7 @@ function buildSessionDigest(jsonlPath) {
     const bgAgentIdRe = /agentId: ([a-zA-Z0-9_@-]+)/;
     const tmToolIdRe = /"tool_use_id":"([^"]+)"/;
     const tmAgentIdRe = /agent_id: ([a-zA-Z0-9_@-]+)/;
+    const taskIdRe = /<task-id>([a-zA-Z0-9_-]+)<\/task-id>/;
     const nameByToolUseId = {};
     const descByToolUseId = {};
     for (const line of content.split('\n')) {
@@ -708,10 +725,18 @@ function buildSessionDigest(jsonlPath) {
               if (b.type === 'tool_use' && b.name === 'Agent' && b.id) {
                 if (b.input?.name) nameByToolUseId[b.id] = b.input.name;
                 if (b.input?.description) descByToolUseId[b.id] = b.input.description;
+                if (b.input?.prompt) promptByToolUseId[b.id] = b.input.prompt;
               }
             }
           }
         } catch (_) {}
+      } else if (line.includes('User rejected tool use') && line.includes('"tool_use_id"')) {
+        const m = tmToolIdRe.exec(line);
+        if (m) rejectedToolUseIds.add(m[1]);
+      } else if (line.includes('<task-notification>') &&
+                 (line.includes('<status>killed</status>') || line.includes('<status>error</status>'))) {
+        const idMatch = taskIdRe.exec(line);
+        if (idMatch) killedAgentIds.add(idMatch[1]);
       } else if (line.includes('"toolUseResult"') && line.includes('"agentId"') && line.includes('"tool_result"')) {
         try {
           const obj = JSON.parse(line);
@@ -734,7 +759,15 @@ function buildSessionDigest(jsonlPath) {
       if (descByToolUseId[key]) entry.description = descByToolUseId[key];
     }
   } catch (_) {}
-  return { progressMap: map, terminated };
+  const rejectedAgentIds = new Set();
+  const rejectedPrompts = new Set();
+  for (const toolUseId of rejectedToolUseIds) {
+    const entry = map[toolUseId];
+    if (entry?.agentId) rejectedAgentIds.add(entry.agentId);
+    const prompt = entry?.prompt || promptByToolUseId[toolUseId];
+    if (prompt) rejectedPrompts.add(prompt);
+  }
+  return { progressMap: map, terminated, rejectedAgentIds, rejectedPrompts, killedAgentIds };
 }
 
 function buildAgentProgressMap(jsonlPath) {

package/package.json

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

package/public/app.js

@@ -4,6 +4,8 @@ let currentSessionId = null;
 let currentTasks = [];
 let viewMode = 'session';
 let sessionFilter = 'active';
+// Only meaningful while sessionFilter === 'active' (filterBySessions clears it otherwise)
+const activityFilter = new Set(); // kinds: 'waiting' | 'active'
 let sessionLimit = '20';
 let filterProject = '__recent__'; // null = all, '__recent__' = last 24h, or project path
 let recentProjects = new Set();
@@ -144,7 +146,6 @@ const inProgressCount = document.getElementById('in-progress-count');
 const completedCount = document.getElementById('completed-count');
 const detailPanel = document.getElementById('detail-panel');
 const detailContent = document.getElementById('detail-content');
-const connectionStatus = document.getElementById('connection-status');
 const CONTENT_TRUNCATE_MAX = 1500;
 const COLUMNS = [{ el: pendingTasks }, { el: inProgressTasks }, { el: completedTasks }];
 
@@ -186,7 +187,7 @@ async function fetchSessions(includeTasks = true) {
 
     sessions = newSessions;
     renderSessions();
-    renderLiveUpdatesFromCache();
+    renderActivityChip();
   } catch (error) {
     console.error('Failed to fetch sessions:', error);
   }
@@ -412,15 +413,7 @@ function fuzzyMatch(text, query) {
 
 //#endregion
 
-//#region LIVE_UPDATES
-function renderLiveUpdatesFromCache() {
-  let activeTasks = allTasksCache.filter((t) => t.status === 'in_progress' && !isInternalTask(t));
-  if (filterProject) {
-    activeTasks = activeTasks.filter((t) => matchesProjectFilter(t.project));
-  }
-  renderLiveUpdates(activeTasks);
-}
-
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleSection(containerId, chevronId) {
   const container = document.getElementById(containerId);
   const chevron = document.getElementById(chevronId);
@@ -429,38 +422,90 @@ function toggleSection(containerId, chevronId) {
   localStorage.setItem(`${containerId}Collapsed`, collapsed);
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function toggleLiveUpdates() {
-  toggleSection('live-updates', 'live-updates-chevron');
+function isWaitingSession(s) {
+  return !!s.hasWaitingForUser;
+}
+function isActiveSession(s) {
+  return !s.hasWaitingForUser && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
 }
 
-function renderLiveUpdates(activeTasks) {
-  const container = document.getElementById('live-updates');
+const ACTIVITY_PREDICATES = {
+  waiting: isWaitingSession,
+  active: isActiveSession,
+};
 
-  if (activeTasks.length === 0) {
-    container.innerHTML = '<div class="live-empty">No active tasks</div>';
-    return;
-  }
+let lastChipKey = '';
 
-  container.innerHTML = activeTasks
-    .map(
-      (task) => `
-        <div class="live-item" onclick="openLiveTask('${task.sessionId}', '${task.id}')">
-          <span class="pulse"></span>
-          <div class="live-item-content">
-            <div class="live-item-action" title="${escapeHtml(task.activeForm || task.subject)}">${escapeHtml(task.activeForm || task.subject)}</div>
-            <div class="live-item-session" title="${escapeHtml(task.sessionName || task.sessionId)}">${escapeHtml(task.sessionName || task.sessionId)}</div>
-          </div>
-        </div>
-      `,
-    )
+function renderActivityChip() {
+  const container = document.getElementById('activity-chips');
+  if (!container) return;
+
+  let waiting = 0;
+  let active = 0;
+  for (const s of sessions) {
+    if (s.hasWaitingForUser) waiting++;
+    else if (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents) active++;
+  }
+
+  const key = `${waiting}|${active}|${[...activityFilter].sort().join(',')}`;
+  if (key === lastChipKey) return;
+  lastChipKey = key;
+
+  const chips = [
+    {
+      kind: 'waiting',
+      count: waiting,
+      label: `${waiting} waiting`,
+      title: `${waiting} session${waiting === 1 ? '' : 's'} waiting for input`,
+    },
+    {
+      kind: 'active',
+      count: active,
+      label: `${active} active`,
+      title: `${active} session${active === 1 ? '' : 's'} with running work or recent activity`,
+    },
+  ];
+
+  container.innerHTML = chips
+    .map((c) => {
+      const isOn = activityFilter.has(c.kind);
+      const classes = [
+        'activity-chip',
+        `activity-${c.kind}`,
+        c.count === 0 ? 'activity-zero' : '',
+        isOn ? 'activity-filter-on' : '',
+      ]
+        .filter(Boolean)
+        .join(' ');
+      const hint = isOn ? ' — click to clear filter' : ` — click to filter to ${c.kind}`;
+      return `
+        <button type="button"
+          class="${classes}"
+          onclick="setActivityFilter('${c.kind}')"
+          aria-pressed="${isOn ? 'true' : 'false'}"
+          title="${escapeHtml(c.title + hint)}">
+          <span class="activity-dot"></span>
+          <span class="activity-label">${escapeHtml(c.label)}</span>
+        </button>
+      `;
+    })
     .join('');
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
-async function openLiveTask(sessionId, taskId) {
-  await fetchTasks(sessionId);
-  showTaskDetail(taskId, sessionId);
+function setActivityFilter(kind) {
+  if (activityFilter.has(kind)) activityFilter.delete(kind);
+  else activityFilter.add(kind);
+  // active/waiting only make sense with the active session filter on
+  const targetFilter = activityFilter.size > 0 ? 'active' : sessionFilter;
+  if (targetFilter !== sessionFilter) {
+    sessionFilter = targetFilter;
+    const dropdown = document.getElementById('session-filter');
+    if (dropdown) dropdown.value = targetFilter;
+    updateUrl();
+  }
+  renderSessions();
+  renderActivityChip();
 }
 
 let lastCurrentTasksHash = '';
@@ -2239,7 +2284,7 @@ async function showAllTasks() {
     updateUrl();
     renderAllTasks();
     renderSessions();
-    renderLiveUpdatesFromCache();
+    renderActivityChip();
   } catch (error) {
     console.error('Failed to fetch all tasks:', error);
   }
@@ -2313,7 +2358,11 @@ function renderSessions() {
     filteredSessions = filteredSessions.filter((s) => matchesProjectFilter(s.project));
   }
 
-  // Apply search filter
+  if (activityFilter.size > 0) {
+    const preds = [...activityFilter].map((k) => ACTIVITY_PREDICATES[k]).filter(Boolean);
+    if (preds.length) filteredSessions = filteredSessions.filter((s) => preds.some((p) => p(s)));
+  }
+
   if (searchQuery) {
     const taskMatchIds = new Set();
     for (const t of allTasksCache) {
@@ -2334,7 +2383,7 @@ function renderSessions() {
     filteredSessions = filteredSessions.filter(matchesSearch);
 
     // Re-add pinned/sticky sessions that match the query but were excluded by active filter
-    if (pinnedSessionIds.size > 0 || stickySessionIds.size > 0) {
+    if (activityFilter.size === 0 && (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)) {
       const filteredIds = new Set(filteredSessions.map((s) => s.id));
       const missingPinned = sessions.filter((s) => isAnyPinned(s.id) && !filteredIds.has(s.id) && matchesSearch(s));
       if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
@@ -2342,7 +2391,8 @@ function renderSessions() {
   }
 
   // Include pinned/sticky sessions even if they don't match active/recent filter
-  if (!searchQuery && (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)) {
+  // (skipped when an activity chip filter is on — user explicitly asked for a slice)
+  if (activityFilter.size === 0 && !searchQuery && (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)) {
     const filteredIds = new Set(filteredSessions.map((s) => s.id));
     const missingPinned = sessions.filter((s) => isAnyPinned(s.id) && !filteredIds.has(s.id));
     if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
@@ -3546,7 +3596,6 @@ async function refreshCurrentView() {
     await showAllTasks();
   } else if (currentSessionId) {
     await fetchTasks(currentSessionId);
-    renderLiveUpdatesFromCache();
   } else {
     await fetchSessions();
   }
@@ -3997,7 +4046,6 @@ function _renderStorageLinkedDocs() {
 }
 
 function _storagePreviewLinkedDoc(path) {
-  closeStorageManager();
   openPreviewByPath(path);
 }
 
@@ -4305,6 +4353,33 @@ document.addEventListener('keydown', (e) => {
     hubNavigate('memory', mSession?.project ? `?project=${encodeURIComponent(mSession.project)}` : undefined);
     return;
   }
+  if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'd') {
+    e.preventDefault();
+    if (!contextSid || dismissedSessionIds.has(contextSid)) return;
+    const prevIdx = selectedSessionIdx;
+    dismissedSessionIds.add(contextSid);
+    updateDismissBtnState();
+    renderSessions();
+    const newItems = getNavigableItems();
+    const targetIdx = newItems.length > 0 ? Math.max(0, prevIdx - 1) : -1;
+    // If the dismissed session is currently open, navigate to the previous one
+    if (currentSessionId === contextSid || selectedSessionId === contextSid) {
+      selectedSessionId = null;
+      if (targetIdx >= 0) {
+        const targetSid = newItems[targetIdx]?.dataset?.sessionId;
+        if (targetSid) {
+          fetchTasks(targetSid).then(() => selectSessionByIndex(targetIdx, getNavigableItems()));
+        } else {
+          showAllTasks().then(() => selectSessionByIndex(targetIdx, getNavigableItems()));
+        }
+      } else {
+        showAllTasks();
+      }
+    } else if (targetIdx >= 0) {
+      selectSessionByIndex(targetIdx, newItems);
+    }
+    return;
+  }
   if (e.code === 'KeyC' && e.shiftKey) {
     e.preventDefault();
     if (!contextSid) {
@@ -4624,20 +4699,12 @@ function setupEventSource() {
       wasConnected = true;
       retryDelay = 1000;
       hideOffline();
-      connectionStatus.innerHTML = `
-            <span class="connection-dot live"></span>
-            <span>Connected</span>
-          `;
     };
 
     eventSource.onerror = () => {
       eventSource.close();
       failCount++;
       console.warn('[SSE] Connection lost, retrying in', retryDelay, 'ms');
-      connectionStatus.innerHTML = `
-            <span class="connection-dot error"></span>
-            <span>Reconnecting...</span>
-          `;
       if (failCount >= 2) showOffline();
       setTimeout(connect, retryDelay);
       retryDelay = Math.min(retryDelay * 2, 30000);
@@ -4667,7 +4734,7 @@ function setupEventSource() {
           if (viewMode === 'all') {
             currentTasks = filterProject ? allTasksCache.filter((t) => matchesProjectFilter(t.project)) : allTasksCache;
             renderAllTasks();
-            renderLiveUpdatesFromCache();
+            renderActivityChip();
           } else if (viewMode === 'project' && currentProjectPath) {
             const hasUpdate = currentProjectSessionIds.some((id) => pendingTaskSessionIds.has(id));
             if (hasUpdate) fetchProjectView(currentProjectPath);
@@ -5096,8 +5163,10 @@ function getOwnerColor(name) {
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function filterBySessions(value) {
   sessionFilter = value;
+  if (value !== 'active') activityFilter.clear();
   updateUrl();
   renderSessions();
+  renderActivityChip();
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
@@ -5360,7 +5429,7 @@ function initPanelResize(panelId, handleId, cssVar, storageKey) {
   });
 
   function onMove(e) {
-    const w = Math.min(900, Math.max(320, startWidth - (e.clientX - startX)));
+    const w = Math.max(200, startWidth - (e.clientX - startX));
     panel.style.setProperty(cssVar, `${w}px`);
   }
 
@@ -5784,15 +5853,6 @@ function filterByOwner(value) {
 
 //#endregion
 
-//#region LAYOUT_SYNC
-const sidebarHeader = document.querySelector('.sidebar-header');
-const viewHeader = document.querySelector('.view-header');
-new ResizeObserver(() => {
-  sidebarHeader.style.height = `${viewHeader.offsetHeight}px`;
-}).observe(viewHeader);
-
-//#endregion
-
 //#region PWA
 if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw.js');
@@ -5802,14 +5862,10 @@ if ('serviceWorker' in navigator) {
 
 //#region INIT
 loadTheme();
-['live-updates', 'sessions-filters'].forEach((id) => {
-  if (localStorage.getItem(`${id}Collapsed`) === 'true') {
-    document.getElementById(id).classList.add('collapsed');
-    document
-      .getElementById(id === 'live-updates' ? 'live-updates-chevron' : 'sessions-chevron')
-      .classList.add('rotated');
-  }
-});
+if (localStorage.getItem('sessions-filtersCollapsed') === 'true') {
+  document.getElementById('sessions-filters').classList.add('collapsed');
+  document.getElementById('sessions-chevron').classList.add('rotated');
+}
 
 document.addEventListener('DOMContentLoaded', () => {
   if (typeof marked !== 'undefined' && typeof hljs !== 'undefined') {

package/public/index.html

@@ -44,18 +44,7 @@
     <!-- Sidebar -->
     <aside class="sidebar">
       <header class="sidebar-header">
-        <div class="logo">
-          <div class="logo-mark">
-            <svg viewBox="4 6 16 12" fill="none" stroke="currentColor" stroke-width="2.5">
-              <path d="M5 13l4 4L19 7"/>
-            </svg>
-          </div>
-          <span class="logo-text">Dashboard</span>
-        </div>
-        <div id="connection-status" class="connection">
-          <span class="connection-dot"></span>
-          <span>Connecting</span>
-        </div>
+        <div id="activity-chips" class="activity-chips"></div>
         <button id="sidebar-toggle" class="sidebar-toggle-btn" onclick="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M15 18l-6-6 6-6"/>
@@ -63,19 +52,6 @@
         </button>
       </header>
 
-      <!-- Live Updates -->
-      <div class="sidebar-section">
-        <div class="section-header" onclick="toggleLiveUpdates()" style="cursor: pointer;">
-          <span>Live Updates</span>
-          <svg id="live-updates-chevron" class="collapse-chevron" viewBox="0 0 24 24">
-            <path d="M6 9l6 6 6-6"/>
-          </svg>
-        </div>
-        <div id="live-updates" class="live-updates">
-          <div class="live-empty">No active tasks</div>
-        </div>
-      </div>
-
       <!-- Tasks -->
       <div class="sidebar-section flex-1">
         <div class="section-header" onclick="toggleSection('sessions-filters', 'sessions-chevron')" style="cursor: pointer;">
@@ -413,6 +389,10 @@
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">I</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Open session info</td>
               </tr>
+              <tr>
+                <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl+D</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Dismiss selected session</td>
+              </tr>
               <tr>
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">D</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Delete selected task</td>

package/public/style.css

@@ -100,19 +100,118 @@ body::before {
 }
 
 .sidebar-header {
-  padding: 20px 20px 16px;
+  padding: 6px 10px;
   border-bottom: none;
   background-image: linear-gradient(to right, transparent, var(--border), transparent);
   background-size: 100% 1px;
   background-repeat: no-repeat;
   background-position: bottom;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.activity-chips {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.activity-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 10px 4px 9px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background 0.2s ease,
+    transform 0.1s ease;
+}
+
+.activity-chip:hover {
+  background: var(--bg-hover);
+  border-color: color-mix(in srgb, var(--text-secondary) 30%, var(--border));
+}
+
+.activity-chip:active {
+  transform: scale(0.97);
+}
+
+.activity-chip.activity-filter-on {
+  background: color-mix(in srgb, var(--accent) 14%, var(--bg-deep));
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+.activity-chip.activity-waiting.activity-filter-on {
+  border-color: var(--warning);
+  box-shadow: inset 0 0 0 1px var(--warning);
+  background: color-mix(in srgb, var(--warning) 14%, var(--bg-deep));
+}
+
+.activity-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  flex-shrink: 0;
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.activity-chip.activity-zero {
+  color: var(--text-tertiary);
+  border-color: var(--border);
+  opacity: 0.6;
+}
+.activity-chip.activity-zero .activity-dot {
+  background: var(--text-muted);
+  box-shadow: none;
+  animation: none;
+}
+.activity-chip.activity-zero:hover {
+  opacity: 1;
+}
+
+.activity-chip.activity-waiting {
+  color: var(--warning);
+  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
+}
+.activity-chip.activity-waiting .activity-dot {
+  background: var(--warning);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--warning) 60%, transparent);
+}
+
+.activity-chip.activity-active {
+  color: color-mix(in srgb, var(--accent) 70%, var(--text-secondary));
+  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
+}
+.activity-chip.activity-active .activity-dot {
+  background: color-mix(in srgb, var(--accent) 75%, var(--text-secondary));
+  box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
+  animation: pulse 2.5s ease-in-out infinite;
+}
+
+.sidebar.collapsed .activity-chips {
+  display: none;
 }
 
 .sidebar-toggle-btn {
-  position: absolute;
-  top: 20px;
-  right: 8px;
   width: 28px;
   height: 28px;
   display: flex;
@@ -178,62 +277,6 @@ body::before {
   background: var(--accent-dim);
 }
 
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.logo-mark {
-  width: 24px;
-  height: 24px;
-  background: var(--accent);
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo-mark svg {
-  width: 14px;
-  height: 14px;
-  color: white;
-}
-
-.logo-text {
-  font-family: var(--serif);
-  font-size: 17px;
-  font-weight: 500;
-  letter-spacing: -0.02em;
-}
-
-.connection {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-top: 10px;
-  font-size: 10px;
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.connection-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--warning);
-}
-
-.connection-dot.live {
-  background: var(--success);
-  box-shadow: 0 0 8px var(--success);
-}
-
-.connection-dot.error {
-  background: #ef4444;
-}
-
 .offline-overlay {
   display: none;
   position: fixed;
@@ -370,7 +413,7 @@ body::before {
 
 /* #endregion */
 
-/* #region LIVE_UPDATES */
+/* #region COLLAPSIBLE */
 .collapse-chevron {
   width: 14px;
   height: 14px;
@@ -401,80 +444,6 @@ body::before {
   overflow: hidden;
 }
 
-.live-updates {
-  padding: 0 16px 8px;
-  max-height: 140px;
-  overflow-y: auto;
-  transition:
-    max-height 0.2s ease,
-    padding 0.2s ease,
-    opacity 0.2s ease;
-}
-
-.live-updates.collapsed {
-  max-height: 0;
-  padding: 0 16px;
-  overflow: hidden;
-  opacity: 0;
-}
-
-.live-empty {
-  padding: 8px;
-  text-align: center;
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.live-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 6px 10px;
-  background: var(--bg-deep);
-  border: 1px solid transparent;
-  border-radius: 6px;
-  margin-bottom: 3px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.live-item:hover {
-  background: var(--bg-hover);
-}
-
-.live-item .pulse {
-  width: 6px;
-  height: 6px;
-  margin-top: 4px;
-  background: var(--accent);
-  border-radius: 50%;
-  flex-shrink: 0;
-  animation: pulse 2s ease-in-out infinite;
-  box-shadow: 0 0 8px var(--accent-glow);
-}
-
-.live-item-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.live-item-action {
-  font-size: 11px;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.live-item-session {
-  font-size: 10px;
-  color: var(--text-tertiary);
-  margin-top: 1px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 /* #endregion */
 
 /* #region SESSIONS */
@@ -762,8 +731,6 @@ body::before {
 .sidebar.collapsed {
   width: 48px;
 }
-.sidebar.collapsed .logo-text,
-.sidebar.collapsed .connection,
 .sidebar.collapsed .sidebar-section,
 .sidebar.collapsed .sidebar-footer {
   display: none;
@@ -3455,10 +3422,6 @@ pre.mermaid svg {
   }
 }
 
-.connection-dot.live {
-  animation: breathe 3s ease-in-out infinite;
-}
-
 /* Progress bar shimmer */
 @keyframes shimmer {
   0% {

package/server.js

@@ -1088,6 +1088,29 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
           }
         }
       } catch (_) {}
+      // Mark agents whose spawning Agent tool_use was rejected by the user as stopped:
+      // the parent will never read their output, so they're orphans. Match by agentId
+      // when the digest already correlated tool_use→agent, else fall back to prompt text
+      // (the agent-spy hook doesn't record the spawning tool_use_id).
+      try {
+        const { rejectedAgentIds = new Set(), rejectedPrompts = new Set(), killedAgentIds = new Set() } =
+          getSessionDigest(meta.jsonlPath);
+        if (rejectedAgentIds.size || rejectedPrompts.size || killedAgentIds.size) {
+          for (const agent of liveAgents) {
+            if (agent.status !== 'active' && agent.status !== 'idle') continue;
+            let reason = null;
+            if (killedAgentIds.has(agent.agentId)) reason = 'killed-by-harness';
+            else if (rejectedAgentIds.has(agent.agentId) || (agent.prompt && rejectedPrompts.has(agent.prompt))) {
+              reason = 'orphaned-by-rejection';
+            }
+            if (!reason) continue;
+            agent.status = 'stopped';
+            agent.stoppedAt = agent.stoppedAt || new Date().toISOString();
+            agent.stopReason = agent.stopReason || reason;
+            persistAgent(agentDir, agent);
+          }
+        }
+      } catch (_) {}
     }
 
     const dirty = new Set();
@@ -1190,6 +1213,31 @@ function subagentJsonlPath(meta, agentId) {
   );
 }
 
+// Claude Code can scatter a session's records across multiple project dirs
+// (e.g. main repo + worktree), so the subagent JSONL may live under a
+// different project dir than meta.jsonlPath. Fall back to scanning when the
+// derived path is missing.
+const subagentPathCache = new Map();
+function resolveSubagentJsonl(meta, sessionId, agentId) {
+  const primary = subagentJsonlPath(meta, agentId);
+  if (existsSync(primary)) return primary;
+  const key = sessionId + '/' + agentId;
+  if (subagentPathCache.has(key)) return subagentPathCache.get(key) || primary;
+  let found = null;
+  try {
+    for (const entry of readdirSync(PROJECTS_DIR, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue;
+      const candidate = path.join(
+        PROJECTS_DIR, entry.name, sessionId,
+        'subagents', 'agent-' + agentId + '.jsonl'
+      );
+      if (existsSync(candidate)) { found = candidate; break; }
+    }
+  } catch (_) { /* projects dir missing */ }
+  subagentPathCache.set(key, found);
+  return found || primary;
+}
+
 app.get('/api/sessions/:sessionId/agents/:agentId/messages', (req, res) => {
   const sessionId = resolveSessionId(req.params.sessionId);
   const agentId = sanitizeAgentId(req.params.agentId);
@@ -1197,7 +1245,7 @@ app.get('/api/sessions/:sessionId/agents/:agentId/messages', (req, res) => {
   const metadata = loadSessionMetadata();
   const meta = metadata[sessionId];
   if (!meta?.jsonlPath) return res.json({ messages: [], agentId });
-  const subagentJsonl = subagentJsonlPath(meta, agentId);
+  const subagentJsonl = resolveSubagentJsonl(meta, sessionId, agentId);
   if (!existsSync(subagentJsonl)) return res.json({ messages: [], agentId });
   const messages = readRecentMessages(subagentJsonl, limit);
   res.json({ messages, agentId });
@@ -1212,7 +1260,7 @@ app.get('/api/sessions/:sessionId/agents/:agentId/messages/stream', (req, res) =
     res.status(404).json({ error: 'Session not found' });
     return;
   }
-  const subagentJsonl = subagentJsonlPath(meta, agentId);
+  const subagentJsonl = resolveSubagentJsonl(meta, sessionId, agentId);
 
   res.writeHead(200, {
     'Content-Type': 'text/event-stream',