claude-code-kanban 3.8.0 → 3.10.0

package/cli.js

@@ -14,13 +14,14 @@ const COMMANDS = {
     summary: 'List or open Claude Code sessions',
     verbs: {
       list: {
-        summary: 'List sessions',
-        usage: 'claude-code-kanban session list [--active] [--days <n>] [--project <name>] [--limit <n|all>] [--json]',
+        summary: 'List sessions (pinned/sticky always included)',
+        usage: 'claude-code-kanban session list [--active] [--days <n>] [--project <name>] [--limit <n|all>] [--no-pins] [--json]',
         flags: {
           '--active': 'Only sessions with recent activity (sidebar-style filter)',
           '--days <n>': 'Only sessions modified within the last N days (fractional ok, e.g. 0.5)',
           '--project <name>': 'Filter by project name (substring match)',
           '--limit <n|all>': 'Max rows to display (default: 10). Use "all" for no cap.',
+          '--no-pins': 'Disable always-include and sticky-first ordering for pinned sessions',
           '--json': 'Output JSON instead of a table',
         },
         run: runSessionListCli,
@@ -52,6 +53,15 @@ const COMMANDS = {
         },
         run: runSessionPinCli,
       },
+      pins: {
+        summary: 'List sessions pinned/stickied via the dashboard or CLI',
+        usage: 'claude-code-kanban session pins [--sticky] [--json]',
+        flags: {
+          '--sticky': 'Only sessions in sticky state',
+          '--json': 'Output JSON instead of a table',
+        },
+        run: runSessionPinsCli,
+      },
       peek: {
         summary: 'Show the last N messages from a session',
         usage: 'claude-code-kanban session peek <id> [--limit <n>] [--json]',
@@ -239,13 +249,23 @@ function parseLimit(args, { fallback, allowAll = false }) {
   return { ok: true, limit: n };
 }
 
-async function fetchSessionsList(limit) {
+async function fetchSessionsList(limit, pinnedIds = []) {
   const q = limit === null ? 'all' : String(limit);
-  const res = await cliFetch(`/api/sessions?limit=${q}`);
+  const pinnedQ = pinnedIds.length ? `&pinned=${pinnedIds.join(',')}` : '';
+  const res = await cliFetch(`/api/sessions?limit=${q}${pinnedQ}`);
   if (!res.ok) throw new Error(`Failed to fetch sessions (${res.status})`);
   return res.json();
 }
 
+async function fetchPinsMap() {
+  try {
+    const res = await cliFetch('/api/session/pins');
+    if (!res.ok) return {};
+    const { pins = {} } = await res.json();
+    return pins;
+  } catch { return {}; }
+}
+
 async function resolveSessionByIdOrPrefix(idArg) {
   let res;
   try {
@@ -273,6 +293,7 @@ async function resolveSessionByIdOrPrefix(idArg) {
 
 async function runSessionListCli(args) {
   const activeOnly = args.includes('--active');
+  const noPins = args.includes('--no-pins');
   const projectFilter = getArgValue(args, 'project');
   const daysArg = getArgValue(args, 'days');
   const days = daysArg !== null ? parseFloat(daysArg) : null;
@@ -284,27 +305,40 @@ async function runSessionListCli(args) {
   if (!parsed.ok) { console.error(parsed.error); return 1; }
   const limit = parsed.limit;
   const asJson = args.includes('--json');
+  const pinsMap = noPins ? {} : await fetchPinsMap();
+  const pinnedIds = Object.keys(pinsMap);
   const hasClientFilter = activeOnly || days !== null || projectFilter;
   let list;
   try {
-    list = await fetchSessionsList(hasClientFilter ? null : limit);
+    list = await fetchSessionsList(hasClientFilter ? null : limit, pinnedIds);
   } catch (e) {
     reportCliError(e);
     return 1;
   }
-  if (activeOnly) list = list.filter(isSessionActive);
+  const pinOf = id => pinsMap[id] || null;
+  if (activeOnly) list = list.filter(s => pinOf(s.id) || isSessionActive(s));
   if (days !== null) {
     const cutoff = Date.now() - days * 86_400_000;
-    list = list.filter(s => s.modifiedAt && new Date(s.modifiedAt).getTime() >= cutoff);
+    list = list.filter(s => pinOf(s.id) || (s.modifiedAt && new Date(s.modifiedAt).getTime() >= cutoff));
   }
   if (projectFilter) {
     const needle = projectFilter.toLowerCase();
     list = list.filter(s => (s.project || '').toLowerCase().includes(needle));
   }
-  const totalMatched = list.length;
-  if (limit !== null && list.length > limit) list = list.slice(0, limit);
+  const pinRank = id => pinOf(id) === 'sticky' ? 0 : pinOf(id) === 'pinned' ? 1 : 2;
+  list.sort((a, b) => {
+    const r = pinRank(a.id) - pinRank(b.id);
+    if (r !== 0) return r;
+    return new Date(b.modifiedAt || 0) - new Date(a.modifiedAt || 0);
+  });
+  if (limit !== null && list.length > limit) {
+    const top = list.slice(0, limit);
+    const topIds = new Set(top.map(s => s.id));
+    const extraPinned = list.filter(s => pinOf(s.id) && !topIds.has(s.id));
+    list = [...top, ...extraPinned];
+  }
   if (asJson) {
-    console.log(JSON.stringify(list, null, 2));
+    console.log(JSON.stringify(list.map(s => ({ ...s, pinState: pinOf(s.id) })), null, 2));
     return 0;
   }
   if (!list.length) {
@@ -313,6 +347,7 @@ async function runSessionListCli(args) {
   }
   const rows = list.map(s => ({
     id: s.id.slice(0, 8),
+    pin: pinOf(s.id) || '',
     status: sessionStatus(s),
     age: s.modifiedAt ? formatAge(Date.now() - new Date(s.modifiedAt).getTime()) : '-',
     tasks: `${s.completed}/${s.taskCount}`,
@@ -321,17 +356,15 @@ async function runSessionListCli(args) {
   }));
   const w = {
     id: 8,
+    pin: Math.max(3, ...rows.map(r => r.pin.length)),
     status: Math.max(6, ...rows.map(r => r.status.length)),
     age: Math.max(3, ...rows.map(r => r.age.length)),
     tasks: Math.max(5, ...rows.map(r => r.tasks.length)),
     project: Math.max(7, ...rows.map(r => r.project.length)),
   };
-  console.log(`${'ID'.padEnd(w.id)}  ${'STATUS'.padEnd(w.status)}  ${'AGE'.padEnd(w.age)}  ${'TASKS'.padEnd(w.tasks)}  ${'PROJECT'.padEnd(w.project)}  TITLE`);
+  console.log(`${'ID'.padEnd(w.id)}  ${'PIN'.padEnd(w.pin)}  ${'STATUS'.padEnd(w.status)}  ${'AGE'.padEnd(w.age)}  ${'TASKS'.padEnd(w.tasks)}  ${'PROJECT'.padEnd(w.project)}  TITLE`);
   for (const r of rows) {
-    console.log(`${r.id.padEnd(w.id)}  ${r.status.padEnd(w.status)}  ${r.age.padEnd(w.age)}  ${r.tasks.padEnd(w.tasks)}  ${r.project.padEnd(w.project)}  ${r.title}`);
-  }
-  if (limit !== null && totalMatched > limit) {
-    console.log(`\n... ${totalMatched - limit} more. Use --limit <n> or --limit all to see them.`);
+    console.log(`${r.id.padEnd(w.id)}  ${r.pin.padEnd(w.pin)}  ${r.status.padEnd(w.status)}  ${r.age.padEnd(w.age)}  ${r.tasks.padEnd(w.tasks)}  ${r.project.padEnd(w.project)}  ${r.title}`);
   }
   return 0;
 }
@@ -396,6 +429,53 @@ async function runSessionPinCli(args) {
   } catch (e) { reportCliError(e); return 1; }
 }
 
+async function runSessionPinsCli(args) {
+  const stickyOnly = args.includes('--sticky');
+  const asJson = args.includes('--json');
+  const pinsMap = await fetchPinsMap();
+  const items = Object.entries(pinsMap)
+    .filter(([, state]) => !stickyOnly || state === 'sticky')
+    .map(([id, state]) => ({ id, state }));
+  if (!items.length) {
+    if (asJson) console.log('[]'); else console.log('No pinned sessions.');
+    return 0;
+  }
+  let sessions;
+  try {
+    sessions = await fetchSessionsList(items.length, items.map(p => p.id));
+  } catch (e) { reportCliError(e); return 1; }
+  const byId = new Map(sessions.map(s => [s.id, s]));
+  let rows = items
+    .map(p => {
+      const s = byId.get(p.id) || {};
+      return {
+        id: p.id,
+        state: p.state,
+        status: s.id ? sessionStatus(s) : '-',
+        age: s.modifiedAt ? formatAge(Date.now() - new Date(s.modifiedAt).getTime()) : '-',
+        project: path.basename(s.project || ''),
+        title: s.customTitle || s.name || s.slug || '',
+      };
+    })
+    .sort((a, b) => (a.state === b.state ? 0 : a.state === 'sticky' ? -1 : 1));
+  if (asJson) {
+    console.log(JSON.stringify(rows, null, 2));
+    return 0;
+  }
+  const w = {
+    id: 8,
+    state: Math.max(5, ...rows.map(r => r.state.length)),
+    status: Math.max(6, ...rows.map(r => r.status.length)),
+    age: Math.max(3, ...rows.map(r => r.age.length)),
+    project: Math.max(7, ...rows.map(r => r.project.length)),
+  };
+  console.log(`${'ID'.padEnd(w.id)}  ${'STATE'.padEnd(w.state)}  ${'STATUS'.padEnd(w.status)}  ${'AGE'.padEnd(w.age)}  ${'PROJECT'.padEnd(w.project)}  TITLE`);
+  for (const r of rows) {
+    console.log(`${r.id.slice(0, 8).padEnd(w.id)}  ${r.state.padEnd(w.state)}  ${r.status.padEnd(w.status)}  ${r.age.padEnd(w.age)}  ${r.project.padEnd(w.project)}  ${r.title}`);
+  }
+  return 0;
+}
+
 async function runSessionViewCli(args) {
   const idArg = args.find(a => !a.startsWith('--'));
   if (!idArg) {

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.8.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/plugin/plugins/claude-code-kanban/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "claude-code-kanban",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Agent activity tracking for claude-code-kanban dashboard"
 }

package/plugin/plugins/claude-code-kanban/skills/kanban/SKILL.md

@@ -32,10 +32,18 @@ claude-code-kanban session pin ${CLAUDE_SESSION_ID} --sticky   # sticky at top
 claude-code-kanban session pin ${CLAUDE_SESSION_ID} --unpin    # clear
 ```
 
-State applies to every connected browser tab (broadcast via SSE) and persists in each tab's localStorage. With no tabs open the command is a no-op.
-
 Trigger phrases: "pin this session", "pin in kanban", "make this session sticky", "unpin session".
 
+## List pinned sessions
+
+```bash
+claude-code-kanban session pins              # all pinned/sticky sessions
+claude-code-kanban session pins --sticky     # sticky only
+claude-code-kanban session pins --json       # JSON output
+```
+
+Trigger phrases: "show pinned sessions", "what's pinned", "list pins".
+
 ## Preview a file in kanban
 
 Opens a markdown file in the preview modal:

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 = '';
@@ -1322,6 +1367,16 @@ function savePinnedSessions() {
   localStorage.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
 }
 
+// Mirror pin state to server so it can be queried by the CLI. UI remains source of truth for itself.
+function offloadSessionPin(sessionId) {
+  const state = getSessionPinState(sessionId);
+  fetch('/api/session/pin', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id: sessionId, state }),
+  }).catch(() => {});
+}
+
 function toggleSessionPin(sessionId) {
   if (pinnedSessionIds.has(sessionId)) {
     pinnedSessionIds.delete(sessionId);
@@ -1332,6 +1387,7 @@ function toggleSessionPin(sessionId) {
     if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
   }
   savePinnedSessions();
+  offloadSessionPin(sessionId);
   renderSessions();
 }
 
@@ -1346,6 +1402,7 @@ function toggleSessionSticky(sessionId) {
     if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
   }
   savePinnedSessions();
+  offloadSessionPin(sessionId);
   renderSessions();
 }
 
@@ -2227,7 +2284,7 @@ async function showAllTasks() {
     updateUrl();
     renderAllTasks();
     renderSessions();
-    renderLiveUpdatesFromCache();
+    renderActivityChip();
   } catch (error) {
     console.error('Failed to fetch all tasks:', error);
   }
@@ -2301,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) {
@@ -2322,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];
@@ -2330,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];
@@ -3534,7 +3596,6 @@ async function refreshCurrentView() {
     await showAllTasks();
   } else if (currentSessionId) {
     await fetchTasks(currentSessionId);
-    renderLiveUpdatesFromCache();
   } else {
     await fetchSessions();
   }
@@ -3985,7 +4046,6 @@ function _renderStorageLinkedDocs() {
 }
 
 function _storagePreviewLinkedDoc(path) {
-  closeStorageManager();
   openPreviewByPath(path);
 }
 
@@ -4293,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) {
@@ -4612,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);
@@ -4655,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);
@@ -5084,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
@@ -5348,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`);
   }
 
@@ -5772,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');
@@ -5790,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

@@ -3,7 +3,7 @@
 const express = require('express');
 const path = require('path');
 const fs = require('fs').promises;
-const { existsSync, readdirSync, readFileSync, writeFileSync, statSync, createReadStream, unlinkSync } = require('fs');
+const { existsSync, readdirSync, readFileSync, writeFileSync, statSync, createReadStream, unlinkSync, mkdirSync, renameSync } = require('fs');
 const readline = require('readline');
 const chokidar = require('chokidar');
 const os = require('os');
@@ -73,6 +73,27 @@ const PLANS_DIR = path.join(CLAUDE_DIR, 'plans');
 const CCK_DIR = path.join(CLAUDE_DIR, '.cck');
 const AGENT_ACTIVITY_DIR = path.join(CCK_DIR, 'agent-activity');
 const CONTEXT_STATUS_DIR = path.join(CCK_DIR, 'context-status');
+const PINS_FILE = path.join(CCK_DIR, 'pins.json');
+
+// Server-side pin mirror (UI authoritative, server stores latest pushed state for CLI queries).
+function readPins() {
+  try {
+    const obj = JSON.parse(readFileSync(PINS_FILE, 'utf8'));
+    if (obj && typeof obj === 'object' && !Array.isArray(obj)) return obj;
+  } catch (_) {}
+  return {};
+}
+
+function writePins(pins) {
+  try {
+    mkdirSync(CCK_DIR, { recursive: true });
+    const tmp = `${PINS_FILE}.${process.pid}.${Date.now()}.tmp`;
+    writeFileSync(tmp, JSON.stringify(pins, null, 2), 'utf8');
+    renameSync(tmp, PINS_FILE);
+  } catch (e) {
+    console.error('Failed to write pins.json:', e.message);
+  }
+}
 
 const PERMISSION_TTL_MS = 1800000;
 const AGENT_TTL_MS = 3600000;
@@ -1067,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();
@@ -1169,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);
@@ -1176,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 });
@@ -1191,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',
@@ -1561,6 +1630,10 @@ app.post('/api/session/pin', async (req, res) => {
     if (!['none', 'pinned', 'sticky'].includes(state)) {
       return res.status(400).json({ error: 'state must be none|pinned|sticky' });
     }
+    const pins = readPins();
+    if (state === 'none') delete pins[id];
+    else pins[id] = state;
+    writePins(pins);
     broadcast({ type: 'session:pin', id, state });
     res.json({ success: true, id, state });
   } catch (error) {
@@ -1569,6 +1642,18 @@ app.post('/api/session/pin', async (req, res) => {
   }
 });
 
+app.get('/api/session/pins', (req, res) => {
+  res.setHeader('Cache-Control', 'no-store');
+  try {
+    const pins = readPins();
+    const items = Object.entries(pins).map(([id, state]) => ({ id, state }));
+    res.json({ pins, items });
+  } catch (error) {
+    console.error('Error in GET /api/session/pins:', error);
+    res.status(500).json({ error: error.message || 'Failed' });
+  }
+});
+
 app.get('/api/preview', async (req, res) => {
   try {
     const abs = resolvePreviewPath(req.query.path, req.query.base);