claude-code-kanban 4.23.1 → 4.24.0

package/README.md

@@ -53,6 +53,7 @@ Tasks, agents, and messages appear on the board automatically — Claude Code wr
 - **Agent teams** — Color-coded team members, owner filtering, member count badges
 - **17 color themes** — Dracula, Nord, Catppuccin, Gruvbox, Tokyo Night, and more — each in light and dark
 - **Storage manager** — Inspect disk usage and clean up stale sessions and tasks
+- **Session picker** — Jump to any session in the sidebar with `Shift+P`, filtering by name, project or branch
 - **Keyboard-first** — Press `?` for the full shortcut reference
 
 ![Session info](assets/shot-session-info.png)

package/lib/parsers.js

@@ -160,6 +160,17 @@ function formatTaskUsage(usage) {
   return parts.length ? ' · ' + parts.join(' · ') : '';
 }
 
+// Raw per-agent cost for the agent modal's chips plus the formatted one-liner for
+// the inline message row. Null when the source carried no numbers.
+function agentUsageEntry(subagentTokens, toolUses, durationMs) {
+  const usage = {};
+  if (subagentTokens != null) usage.tokens = subagentTokens;
+  if (toolUses != null) usage.tools = toolUses;
+  if (durationMs != null) usage.durationMs = durationMs;
+  if (!Object.keys(usage).length) return null;
+  return { usage, usageText: formatTaskUsage({ subagentTokens, toolUses, durationMs }) };
+}
+
 function pushUserMessage(messages, text, timestamp, sysLabel, extras) {
   if (sysLabel === '__skip__') return;
   let safeText = text || '';
@@ -1099,6 +1110,7 @@ function buildSessionDigest(jsonlPath) {
     const taskIdRe = /<task-id>([a-zA-Z0-9_-]+)<\/task-id>/;
     const nameByToolUseId = {};
     const descByToolUseId = {};
+    const usageByToolUseId = {};
     for (const line of content.split('\n')) {
       // Terminated-teammate detection: check first since cheap substring guards
       if (line.includes('teammate-message') &&
@@ -1171,34 +1183,34 @@ function buildSessionDigest(jsonlPath) {
       } 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('<task-notification>')) {
+        // The envelope's tags survive JSON escaping, so read them off the raw line.
+        // This covers every delivery shape (user message, queue-operation,
+        // queued_command attachment) without enumerating them.
+        if (line.includes('<status>killed</status>') || line.includes('<status>error</status>')) {
+          const idMatch = taskIdRe.exec(line);
+          if (idMatch) killedAgentIds.add(idMatch[1]);
+        }
+        if (line.includes('<subagent_tokens>')) {
+          const notif = parseTaskNotification(line);
+          const u = notif?.usage;
+          const entry = u && notif.toolUseId ? agentUsageEntry(u.subagentTokens, u.toolUses, u.durationMs) : null;
+          if (entry) usageByToolUseId[notif.toolUseId] = entry;
+        }
       } else if (line.includes('"toolUseResult"') && line.includes('"agentId"') && line.includes('"tool_result"')) {
         try {
           const obj = JSON.parse(line);
           const tur = obj.toolUseResult;
           if (tur?.agentId) {
-            // Foreground agents report their cost on the completion toolUseResult
-            // (totalTokens/totalToolUseCount/totalDurationMs) — the same numbers a
-            // background agent surfaces via its <task-notification> <usage> block. Keep
-            // the raw numbers (for the agent modal's per-stat chips) and a formatted
-            // one-liner via the shared formatter (for the inline message row):
-            // " · 31.5k tok · 5 tools · 34s".
-            const usage = {};
-            if (tur.totalTokens != null) usage.tokens = tur.totalTokens;
-            if (tur.totalToolUseCount != null) usage.tools = tur.totalToolUseCount;
-            if (tur.totalDurationMs != null) usage.durationMs = tur.totalDurationMs;
-            const hasUsage = Object.keys(usage).length > 0;
-            const usageText = hasUsage
-              ? formatTaskUsage({ subagentTokens: usage.tokens, toolUses: usage.tools, durationMs: usage.durationMs })
-              : null;
+            // Foreground agents report their cost on the completion toolUseResult;
+            // background agents report the same numbers in their <task-notification>.
+            const { usage, usageText } = agentUsageEntry(tur.totalTokens, tur.totalToolUseCount, tur.totalDurationMs)
+              || { usage: null, usageText: null };
             const blocks = obj.message?.content;
             if (Array.isArray(blocks)) {
               for (const b of blocks) {
                 if (b.type === 'tool_result' && b.tool_use_id && !map[b.tool_use_id]) {
-                  map[b.tool_use_id] = { agentId: tur.agentId, prompt: tur.prompt || null, usage: hasUsage ? usage : null, usageText };
+                  map[b.tool_use_id] = { agentId: tur.agentId, prompt: tur.prompt || null, usage, usageText };
                 }
               }
             }
@@ -1207,6 +1219,7 @@ function buildSessionDigest(jsonlPath) {
       }
     }
     for (const [key, entry] of Object.entries(map)) {
+      if (!entry.usage && usageByToolUseId[key]) Object.assign(entry, usageByToolUseId[key]);
       if (nameByToolUseId[key]) entry.name = nameByToolUseId[key];
       if (descByToolUseId[key]) entry.description = descByToolUseId[key];
       // Prefer the full prompt from the assistant's tool_use input — Claude Code's

package/package.json

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

package/public/app.js

@@ -15,6 +15,9 @@ let filterProject = FILTER_DEFAULTS.project; // null = all, '__recent__' = last
 let recentProjects = new Set();
 let projectsCacheDirty = true;
 const collapsedProjectGroups = new Set();
+const SECTION_GROUPS = '__section_groups__';
+const SECTION_PROJECTS = '__section_projects__';
+const SECTION_SESSIONS = '__section_sessions__';
 let stableGroupOrder = []; // cached project path order to prevent jumping
 let sessionGroups = []; // user-named groups: [{id, name, color, members:[{type,ref}]}]
 let sgDrag = null; // in-flight sidebar drag: {kind:'session'|'project'|'group', ref}
@@ -280,6 +283,11 @@ function isWaitingSession(s) {
 function isActiveSession(s) {
   return !s.hasWaitingForUser && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
 }
+// hasRecentLog carries the server's registry-idle correction: an open-but-idle
+// terminal keeps touching its JSONL, so mtime alone is not proof of activity.
+function isSessionLive(s) {
+  return !!s.hasRecentLog && Date.now() - Date.parse(s.modifiedAt) <= LIVE_INDICATOR_MS;
+}
 
 const ACTIVITY_PREDICATES = {
   waiting: isWaitingSession,
@@ -2883,10 +2891,8 @@ function showAgentModal(agentId) {
     return `<span class="agent-chip${cls}"${style}${title}>${labelHtml}<span class="agent-chip-val">${value}</span></span>`;
   };
 
-  // Agent cost stats live on the launch row's message (resolved from the completion
-  // toolUseResult), not on the agent-activity record — so read them from there.
   const agentMsg = currentMessages.find((m) => m.tool === 'Agent' && m.agentId === agentId);
-  const usageStats = agentMsg?.agentUsageStats || null;
+  const usageStats = agent.usage || null;
   const fmtTok = fmtTokens;
 
   const chips = [];
@@ -2953,6 +2959,19 @@ function highlightSelectedAgent() {
 //#region RENDERING
 let revealedPlanSessionId = null;
 let revealedStorageSessionId = null;
+
+// Opens a session and scrolls the sidebar to it, refetching first when the id
+// fell outside the session list the current filters asked for.
+async function revealSession(id) {
+  if (!sessions.some((s) => s.id === id)) {
+    lastSessionsHash = '';
+    await fetchSessions();
+  }
+  await fetchTasks(id);
+  const el = document.querySelector(`.session-item[data-session-id="${escSel(id)}"]`);
+  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function revealPlanSession(planSessionId) {
   if (revealedPlanSessionId === planSessionId) {
@@ -2961,13 +2980,7 @@ async function revealPlanSession(planSessionId) {
     return;
   }
   revealedPlanSessionId = planSessionId;
-  if (!sessions.some((s) => s.id === planSessionId)) {
-    lastSessionsHash = '';
-    await fetchSessions();
-  }
-  await fetchTasks(planSessionId);
-  const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(planSessionId)}"]`);
-  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  await revealSession(planSessionId);
 }
 
 async function showAllTasks() {
@@ -3019,15 +3032,10 @@ function renderAllTasks() {
   renderKanban();
 }
 
-function renderSessions() {
-  // Rebuilding the list under the pointer cancels an in-flight drop and would swallow a
-  // half-typed group name, and the SSE path can fire at any moment — defer instead.
-  if (sgDrag || sgIsEditing()) return;
-  // Update project dropdown
-  updateProjectDropdown();
-
-  // Filter pipeline: active filter → force-include revealed/current (non-pinned) sessions →
-  // project filter → search filter → ensure pinned/sticky sessions are always included
+// Filter pipeline: active filter → force-include revealed/current (non-pinned) sessions →
+// project filter → search filter → ensure pinned/sticky sessions are always included.
+// Pure over module state, so the session picker can ask for the same list without a render.
+function getFilteredSessions() {
   let filteredSessions = sessions;
   if (sessionFilter === 'active') {
     const activeSessionIds = new Set();
@@ -3111,6 +3119,18 @@ function renderSessions() {
     if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
   }
 
+  return filteredSessions;
+}
+
+function renderSessions() {
+  // Rebuilding the list under the pointer cancels an in-flight drop and would swallow a
+  // half-typed group name, and the SSE path can fire at any moment — defer instead.
+  if (sgDrag || sgIsEditing()) return;
+  // Update project dropdown
+  updateProjectDropdown();
+
+  const filteredSessions = getFilteredSessions();
+
   if (filteredSessions.length === 0) {
     let emptyMsg = 'No sessions found';
     let emptyHint = 'Tasks appear when you use Claude Code';
@@ -3142,13 +3162,8 @@ function renderSessions() {
     const total = session.taskCount;
     const percent = total > 0 ? Math.round((session.completed / total) * 100) : 0;
     const isActive = session.id === currentSessionId && viewMode === 'session';
-    // hasRecentLog carries the server's registry-idle correction: an open-but-idle
-    // terminal keeps touching its JSONL, so mtime alone is not proof of activity.
-    const isLive = session.hasRecentLog && Date.now() - Date.parse(session.modifiedAt) <= LIVE_INDICATOR_MS;
-    const rawName = session.name || session.id;
-    const sessionName = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(rawName)
-      ? rawName.slice(0, 8)
-      : rawName;
+    const isLive = isSessionLive(session);
+    const sessionName = sessionDisplayName(session);
     const useGrouped = sessionFilter === 'active' && session.project;
     const primaryName = useGrouped ? sessionName : session.project ? session.project.split('/').pop() : sessionName;
     const secondaryName = useGrouped ? null : session.project ? sessionName : null;
@@ -3214,6 +3229,15 @@ function renderSessions() {
     const active = arr.reduce((n, s) => n + (isSessionActive(s) ? 1 : 0), 0);
     return `<span class="group-count" title="${active} active / ${arr.length} total">${active > 0 ? `<span class="group-count-active">${active}</span><span class="group-count-sep">/</span>` : ''}${arr.length}</span>`;
   };
+  // `ungroup` marks the label as the drop target for pulling an item out of a named group.
+  const sectionHtml = (key, text, ungroup, body) => {
+    const collapsed = collapsedProjectGroups.has(key);
+    const escPath = escapeHtml(key);
+    const title = ungroup ? 'Click to collapse — drop here to remove from a group' : 'Click to collapse';
+    return `<div class="sg-section-label sg-section-toggle${ungroup ? ' sg-ungroup-zone' : ''}${collapsed ? ' collapsed' : ''}" data-group-path="${escPath}" title="${escapeHtml(title)}">${groupChevronSvg(10)}<span>${text}</span></div>
+      <div class="sg-section-body${collapsed ? ' collapsed' : ''}" data-group-path="${escPath}">${body}</div>`;
+  };
+
   const renderGroupSessions = (sessions, pinKey) => {
     if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
     const gPinned = sessions.filter((s) => isPlacedPinned(s.id) && !isPlacedSticky(s.id));
@@ -3300,7 +3324,7 @@ function renderSessions() {
   // flat = the "All sessions" view, which has no project sub-blocks.
   const sgSectionHtml = (flat) => {
     if (sessionGroups.length === 0) return '';
-    let out = '<div class="sg-section-label">Groups</div>';
+    let out = '';
     for (const group of sessionGroups) {
       const bucket = sgBuckets.get(group.id) || [];
       if (bucket.length === 0 && sgFiltering) continue;
@@ -3343,7 +3367,8 @@ function renderSessions() {
       out += sgHeaderHtml(group, countHtml(bucket));
       out += `<div class="session-group-sessions${collapsed ? ' collapsed' : ''}" data-group-id="${escapeHtml(group.id)}">${body}</div>`;
     }
-    return out;
+    if (!out) return '';
+    return sectionHtml(SECTION_GROUPS, 'Groups', false, out);
   };
 
   let html = '';
@@ -3391,17 +3416,19 @@ function renderSessions() {
     stableGroupOrder = [...keptOrder, ...newPaths];
     const sortedGroups = stableGroupOrder.filter((p) => groups.has(p)).map((p) => [p, groups.get(p)]);
 
-    // Rendered even when nothing is left under it: it is the drop target for ungrouping.
-    if (sessionGroups.length > 0) {
-      html += '<div class="sg-section-label sg-ungroup-zone" title="Drop here to remove from a group">Projects</div>';
-    }
-    for (const [projectPath, projectSessions] of sortedGroups) {
-      html += projectBlock(projectPath, projectSessions, false);
-    }
+    // The section header is rendered even when nothing is left under it: it is the drop target
+    // for ungrouping. Its body is skipped while collapsed — nothing would be visible, and this is
+    // the whole project list, re-parsed on every live refresh.
+    const sectioned = sessionGroups.length > 0;
+    let projectsHtml = '';
+    if (!sectioned || !collapsedProjectGroups.has(SECTION_PROJECTS)) {
+      for (const [projectPath, projectSessions] of sortedGroups) {
+        projectsHtml += projectBlock(projectPath, projectSessions, false);
+      }
 
-    if (ungrouped.length > 0 && sortedGroups.length > 0) {
-      const isCollapsed = collapsedProjectGroups.has('__ungrouped__');
-      html += `
+      if (ungrouped.length > 0 && sortedGroups.length > 0) {
+        const isCollapsed = collapsedProjectGroups.has('__ungrouped__');
+        projectsHtml += `
             <div class="project-group-header${isCollapsed ? ' collapsed' : ''}" data-group-path="__ungrouped__">
               ${groupChevronSvg()}
               <span class="group-name">Ungrouped</span>
@@ -3411,17 +3438,20 @@ function renderSessions() {
               ${renderGroupSessions(ungrouped, '__pinned___ungrouped__')}
             </div>
           `;
-    } else {
-      html += ungrouped.map(renderSessionCard).join('');
+      } else {
+        projectsHtml += ungrouped.map(renderSessionCard).join('');
+      }
     }
 
+    html += sectioned ? sectionHtml(SECTION_PROJECTS, 'Projects', true, projectsHtml) : projectsHtml;
+
     sessionsList.innerHTML = html;
   } else {
-    const ungroupZone =
-      sessionGroups.length > 0
-        ? '<div class="sg-section-label sg-ungroup-zone" title="Drop here to remove from a group">Sessions</div>'
-        : '';
-    sessionsList.innerHTML = html + sgSectionHtml(true) + ungroupZone + sgRest.map(renderSessionCard).join('');
+    const sectioned = sessionGroups.length > 0;
+    const restHtml =
+      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).join('');
+    const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml) : restHtml;
+    sessionsList.innerHTML = html + sgSectionHtml(true) + tail;
   }
 
   const navItems = getNavigableItems();
@@ -4416,14 +4446,24 @@ function getKbId(el) {
   return el.dataset.sessionId || el.dataset.groupPath || null;
 }
 
+// Every collapsible header class and the body class it opens. Order matters only in that a
+// header carries exactly one of these.
+const COLLAPSIBLE_BODY_CLASS = {
+  'pinned-sub-header': 'pinned-sub-items',
+  'session-group-header': 'session-group-sessions',
+  'sg-section-toggle': 'sg-section-body',
+  'project-group-header': 'project-group-sessions',
+};
+const COLLAPSIBLE_HEADER_SELECTOR = Object.keys(COLLAPSIBLE_BODY_CLASS)
+  .map((c) => `.${c}`)
+  .join(', ');
+
 function getGroupSessionsContainer(header) {
-  const cls = header.classList.contains('pinned-sub-header')
-    ? 'pinned-sub-items'
-    : header.classList.contains('session-group-header')
-      ? 'session-group-sessions'
-      : 'project-group-sessions';
+  const cls = Object.keys(COLLAPSIBLE_BODY_CLASS).find((c) => header.classList.contains(c));
+  if (!cls) return null;
   let el = header.nextElementSibling;
-  while (el && !el.classList.contains(cls)) el = el.nextElementSibling;
+  const bodyCls = COLLAPSIBLE_BODY_CLASS[cls];
+  while (el && !el.classList.contains(bodyCls)) el = el.nextElementSibling;
   return el;
 }
 
@@ -4450,16 +4490,27 @@ function getNavigableItems() {
       }
     }
   };
-  for (const el of sessionsList.children) {
-    if (el.classList.contains('project-group-header') || el.classList.contains('session-group-header')) {
-      items.push(el);
-      if (!collapsedProjectGroups.has(el.dataset.groupPath)) {
-        walkGroupContainer(getGroupSessionsContainer(el));
+  // A section label sits next to its body div rather than wrapping it, so the top level walks
+  // into the body to reach the blocks inside.
+  const walkTopLevel = (children) => {
+    for (const el of children) {
+      if (
+        el.classList.contains('project-group-header') ||
+        el.classList.contains('session-group-header') ||
+        el.classList.contains('sg-section-toggle')
+      ) {
+        items.push(el);
+        if (!el.classList.contains('sg-section-toggle') && !collapsedProjectGroups.has(el.dataset.groupPath)) {
+          walkGroupContainer(getGroupSessionsContainer(el));
+        }
+      } else if (el.classList.contains('session-item')) {
+        items.push(el);
+      } else if (el.classList.contains('sg-section-body') && !el.classList.contains('collapsed')) {
+        walkTopLevel(el.children);
       }
-    } else if (el.classList.contains('session-item')) {
-      items.push(el);
     }
-  }
+  };
+  walkTopLevel(sessionsList.children);
   return items;
 }
 
@@ -4543,6 +4594,10 @@ function expandActiveGroups({ onlyNew = false } = {}) {
     // A named group wrapping that project (or the session itself) would keep it hidden.
     const group = sgGroupForSession(s);
     if (group && collapsedProjectGroups.delete(sgKey(group.id))) changed = true;
+    // Which section holds it depends on the view, so open every one rather than re-deriving it.
+    for (const key of [SECTION_GROUPS, SECTION_PROJECTS, SECTION_SESSIONS]) {
+      if (collapsedProjectGroups.delete(key)) changed = true;
+    }
   }
   prevActiveSessionIds = activeIds;
   if (changed) persistCollapsedGroups();
@@ -4550,11 +4605,7 @@ function expandActiveGroups({ onlyNew = false } = {}) {
 }
 
 function isGroupHeader(el) {
-  return (
-    el.classList.contains('project-group-header') ||
-    el.classList.contains('pinned-sub-header') ||
-    el.classList.contains('session-group-header')
-  );
+  return el.matches(COLLAPSIBLE_HEADER_SELECTOR);
 }
 
 function findParentHeader(el) {
@@ -5032,19 +5083,122 @@ async function confirmDelete() {
 //#endregion
 
 //#region HELP
+// Each entry pairs a left and a right group onto the same grid rows, so their
+// headings sit level and the shorter group just leaves empty rows.
+// `combo` joins the keys with a plus (a chord) instead of listing them as
+// alternatives; `hub` marks rows that only work inside Claude Code Hub.
+const SHORTCUT_PAIRS = [
+  [
+    {
+      title: 'Navigate',
+      rows: [
+        { keys: ['J', '↓'], label: 'Next item' },
+        { keys: ['K', '↑'], label: 'Previous item' },
+        { keys: ['H', '←'], label: 'Left column / collapse group' },
+        { keys: ['L', '→'], label: 'Right column / expand group' },
+        { keys: ['Tab'], label: 'Switch sidebar ↔ board' },
+        { keys: ['Enter', 'Space'], label: 'Open selected item' },
+      ],
+    },
+    {
+      title: 'Session',
+      rows: [
+        { keys: ['P'], label: 'Open plan' },
+        { keys: ['Shift', 'P'], combo: true, label: 'Session picker' },
+        { keys: ['I'], label: 'Session info' },
+        { keys: ['.'], label: 'Pin / unpin' },
+        { keys: ['>'], label: 'Toggle sticky' },
+        { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session' },
+        { keys: ['Shift', 'L'], combo: true, label: 'Toggle session log' },
+        { keys: ['Shift', 'M'], combo: true, label: 'Open last message' },
+        { keys: ['J', 'K'], label: 'Previous / next message in detail' },
+      ],
+    },
+  ],
+  [
+    {
+      title: 'Board',
+      rows: [
+        { keys: ['Enter'], label: 'Toggle task detail panel' },
+        { keys: ['D'], label: 'Delete selected task' },
+        { keys: ['N'], label: 'Toggle scratchpad' },
+        { keys: ['R'], label: 'Refresh data' },
+        { keys: ['Esc'], label: 'Close panel / clear selection' },
+      ],
+    },
+    {
+      title: 'View',
+      rows: [
+        { keys: ['['], label: 'Toggle sidebar' },
+        { keys: ['T'], label: 'Toggle theme' },
+        { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
+        { keys: ['Ctrl', '+'], combo: true, label: 'Larger modal text' },
+        { keys: ['Ctrl', '−'], combo: true, label: 'Smaller modal text' },
+        { keys: ['Ctrl', '0'], combo: true, label: 'Reset modal text size' },
+        { keys: ['?'], label: 'Show this help' },
+      ],
+    },
+  ],
+  [
+    {
+      title: 'Copy',
+      rows: [
+        { keys: ['Shift', 'C'], combo: true, label: 'Session id' },
+        { keys: ['Ctrl', 'Shift', 'C'], combo: true, label: 'Resume command (claude -r <id>)' },
+      ],
+    },
+    {
+      title: 'Hub',
+      hub: true,
+      rows: [
+        { keys: ['M'], label: 'Jump to marketplace' },
+        { keys: ['$'], label: 'Jump to cost' },
+        { keys: ['Ctrl', 'M'], combo: true, label: 'Jump to memory' },
+        { keys: ['Ctrl', 'Alt', '←/→'], combo: true, label: 'Previous / next hub app' },
+        { keys: ['Alt', '1…9'], combo: true, label: 'Jump to hub app by number' },
+        { keys: ['Ctrl', 'Alt', 'P'], combo: true, label: 'Project picker' },
+      ],
+    },
+  ],
+];
+
+const EMPTY_GROUP = { title: '', rows: [] };
+
+// Interleaves each pair's rows left-then-right so CSS grid auto-placement lands
+// them on shared row tracks (see .shortcuts in style.css).
+function buildHelpShortcuts() {
+  const cells = [];
+  SHORTCUT_PAIRS.forEach(([left, right = EMPTY_GROUP], pair) => {
+    const first = pair === 0 ? ' sc-first' : '';
+    const sides = [
+      [left, 'sc-l'],
+      [right, 'sc-r'],
+    ];
+    const head = (g, side) =>
+      g.title ? `<div class="${escapeHtml(`sc-group ${side}${first}${g.hub ? ' sc-hub' : ''}`)}">${g.title}</div>` : '';
+    cells.push(sides.map(([g, side]) => head(g, side)).join(''));
+    for (let i = 0; i < Math.max(left.rows.length, right.rows.length); i++) {
+      for (const [group, side] of sides) {
+        const row = group.rows[i];
+        if (!row) continue;
+        const sep = row.combo ? '<span class="sc-plus">+</span>' : '<span class="sc-or">/</span>';
+        const keys = row.keys.map((k) => `<kbd>${escapeHtml(k)}</kbd>`).join(sep);
+        const cls = side + (group.hub ? ' sc-hub' : '');
+        cells.push(
+          `<dt class="${escapeHtml(cls)}">${keys}</dt><dd class="${escapeHtml(cls)}">${escapeHtml(row.label)}</dd>`,
+        );
+      }
+    }
+  });
+  return cells.join('');
+}
+
 function showHelpModal() {
   const modal = document.getElementById('help-modal');
+  const list = document.getElementById('help-shortcuts');
+  if (!list.childElementCount) list.innerHTML = buildHelpShortcuts();
+  list.classList.toggle('sc-standalone', !window.__HUB__?.enabled);
   modal.classList.add('visible');
-
-  // Handle keyboard shortcuts
-  const keyHandler = (e) => {
-    if (e.key === 'Escape' || e.key === '?') {
-      e.preventDefault();
-      closeHelpModal();
-      document.removeEventListener('keydown', keyHandler);
-    }
-  };
-  document.addEventListener('keydown', keyHandler);
 }
 
 function closeHelpModal() {
@@ -5320,13 +5474,7 @@ function _renderStorageSessions() {
 async function _storageViewSession(id) {
   closeStorageManager();
   revealedStorageSessionId = id;
-  if (!sessions.some((s) => s.id === id)) {
-    lastSessionsHash = '';
-    await fetchSessions();
-  }
-  await fetchTasks(id);
-  const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(id)}"]`);
-  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  await revealSession(id);
 }
 
 function _storageUnpinSession(id) {
@@ -5618,6 +5766,7 @@ const MODAL_CLOSERS = {
   'team-modal': () => closeTeamModal(),
   'agent-modal': () => closeAgentModal(),
   'help-modal': () => closeHelpModal(),
+  'session-picker-modal': () => closeSessionPicker(),
 };
 
 document.addEventListener('keydown', (e) => {
@@ -5651,6 +5800,9 @@ document.addEventListener('keydown', (e) => {
       if (close) close();
       else document.getElementById(topId).classList.remove('visible');
       e.stopImmediatePropagation();
+    } else if (e.key === '?' && document.getElementById('help-modal').classList.contains('visible')) {
+      e.preventDefault();
+      closeHelpModal();
     } else if (
       e.code === 'KeyM' &&
       e.shiftKey &&
@@ -5720,6 +5872,12 @@ document.addEventListener('keydown', (e) => {
     showStorageManager();
     return;
   }
+  // Ctrl+Shift+P is the browser's own; only the bare chord opens the picker.
+  if (e.code === 'KeyP' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+    e.preventDefault();
+    openSessionPicker();
+    return;
+  }
   if (e.key === '.' || e.key === '>') {
     const sid = sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId;
     if (sid) {
@@ -5894,16 +6052,18 @@ document.addEventListener('keydown', (e) => {
     }
     return;
   }
-  if (e.code === 'KeyC' && e.shiftKey) {
+  if (e.code === 'KeyC' && e.shiftKey && !e.altKey && !e.metaKey) {
     e.preventDefault();
     if (!contextSid) {
       showToast('No session selected');
       return;
     }
+    const text = e.ctrlKey ? `claude -r ${contextSid}` : contextSid;
+    const label = e.ctrlKey ? 'resume command' : 'session id';
     navigator.clipboard
-      .writeText(contextSid)
-      .then(() => showToast(`Copied session id: ${contextSid.slice(0, 8)}`, 'success'))
-      .catch(() => showToast('Failed to copy session id'));
+      .writeText(text)
+      .then(() => showToast(`Copied ${label}: ${contextSid.slice(0, 8)}`, 'success'))
+      .catch(() => showToast(`Failed to copy ${label}`));
     return;
   }
   if (matchKey(e, 'KeyR')) {
@@ -6863,6 +7023,13 @@ function isSessionActive(s) {
   return s.hasRecentLog || s.inProgress > 0 || s.hasActiveAgents || s.hasWaitingForUser;
 }
 
+const SESSION_UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+function sessionDisplayName(session) {
+  const raw = session.name || session.id;
+  return SESSION_UUID_RE.test(raw) ? raw.slice(0, 8) : raw;
+}
+
 function formatDate(dateStr) {
   const date = new Date(dateStr);
   const now = new Date();
@@ -7416,7 +7583,7 @@ document.addEventListener('click', (e) => {
     }
   }
 
-  const header = e.target.closest('.session-group-header, .pinned-sub-header, .project-group-header');
+  const header = e.target.closest(COLLAPSIBLE_HEADER_SELECTOR);
   if (header) {
     setGroupCollapsed(header, !collapsedProjectGroups.has(header.dataset.groupPath));
   }
@@ -8029,6 +8196,112 @@ let _planSessionId = null;
 
 //#endregion
 
+//#region SESSION_PICKER
+// Snapshot of what the sidebar is showing, taken once per open: the picker only ever offers
+// sessions already on screen, and the recency order cannot change while it is up.
+let spSource = [];
+let spRows = [];
+let spIdx = 0;
+
+function openSessionPicker() {
+  const input = document.getElementById('session-picker-input');
+  input.value = '';
+  spSource = getFilteredSessions().sort((a, b) => Date.parse(b.modifiedAt) - Date.parse(a.modifiedAt));
+  document.getElementById('session-picker-modal').classList.add('visible');
+  renderSessionPicker();
+  input.focus();
+}
+
+function closeSessionPicker() {
+  hideModalOverlay('session-picker-modal');
+}
+
+function spMatches(session, query) {
+  return (
+    fuzzyMatch(session.name, query) ||
+    fuzzyMatch(session.id, query) ||
+    fuzzyMatch(session.project, query) ||
+    fuzzyMatch(session.gitBranch, query)
+  );
+}
+
+// Spelled out rather than interpolated so the class never comes from a variable.
+const SP_DOTS = {
+  waiting: '<span class="activity-dot waiting"></span>',
+  live: '<span class="activity-dot live"></span>',
+  active: '<span class="activity-dot active"></span>',
+  idle: '<span class="activity-dot"></span>',
+};
+
+function spDotHtml(session) {
+  if (isWaitingSession(session)) return SP_DOTS.waiting;
+  if (isSessionLive(session)) return SP_DOTS.live;
+  return isActiveSession(session) ? SP_DOTS.active : SP_DOTS.idle;
+}
+
+function renderSessionPicker() {
+  const list = document.getElementById('session-picker-list');
+  const query = document.getElementById('session-picker-input').value.trim();
+  spRows = spSource.filter((s) => spMatches(s, query));
+
+  if (!spRows.length) {
+    spIdx = -1;
+    list.innerHTML = `<div class="sp-empty">${spSource.length ? 'No session matches' : 'No sessions in the current sidebar filter'}</div>`;
+    return;
+  }
+
+  list.innerHTML = spRows
+    .map((s, i) => {
+      const project = s.project ? s.project.split(/[/\\]/).pop() : '';
+      return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}" data-idx="${i}" title="${escapeHtml(s.id)}">
+        ${spDotHtml(s)}
+        <span class="sp-name">${escapeHtml(sessionDisplayName(s))}</span>
+        <span class="sp-project">${escapeHtml(project)}</span>
+        ${s.gitBranch ? `<span class="sp-branch">${escapeHtml(s.gitBranch)}</span>` : ''}
+        <span class="sp-count">${s.completed}/${s.taskCount}</span>
+        <span class="sp-time">${formatDate(s.modifiedAt)}</span>
+      </button>`;
+    })
+    .join('');
+  spSelect(0);
+}
+
+function spSelect(idx) {
+  const list = document.getElementById('session-picker-list');
+  list.children[spIdx]?.classList.remove('selected');
+  spIdx = Math.min(Math.max(idx, 0), spRows.length - 1);
+  const row = list.children[spIdx];
+  row?.classList.add('selected');
+  row?.scrollIntoView({ block: 'nearest' });
+}
+
+async function spOpen(idx) {
+  const session = spRows[idx];
+  if (!session) return;
+  closeSessionPicker();
+  await revealSession(session.id);
+}
+
+function initSessionPicker() {
+  const input = document.getElementById('session-picker-input');
+  input.addEventListener('input', renderSessionPicker);
+  // Bound on the input: the global handler returns early on INPUT targets.
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeSessionPicker();
+    else if (matchKey(e, 'ArrowDown') || (e.ctrlKey && e.key === 'n')) spSelect(spIdx + 1);
+    else if (matchKey(e, 'ArrowUp') || (e.ctrlKey && e.key === 'p')) spSelect(spIdx - 1);
+    else if (e.key === 'Enter') spOpen(spIdx);
+    else return;
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  document.getElementById('session-picker-list').addEventListener('click', (e) => {
+    const row = e.target.closest('.sp-row');
+    if (row) spOpen(Number(row.dataset.idx));
+  });
+}
+//#endregion
+
 //#region PLAN
 function refreshOpenPlan() {
   if (!_planSessionId || !document.getElementById('plan-modal').classList.contains('visible')) return;
@@ -8665,6 +8938,7 @@ try {
 } catch (_) {}
 loadSessionGroups();
 initSessionGroupsDnd();
+initSessionPicker();
 try {
   const af = JSON.parse(localStorage.getItem('activityFilter') || '[]');
   // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect

package/public/index.html

@@ -346,7 +346,7 @@
 
   <!-- Help Modal -->
   <div id="help-modal" class="modal-overlay" onclick="closeHelpModal()">
-    <div class="modal" onclick="event.stopPropagation()">
+    <div class="modal modal-help" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title">Keyboard Shortcuts</h3>
         <button class="modal-close" aria-label="Close dialog" onclick="closeHelpModal()">
@@ -356,136 +356,7 @@
         </button>
       </div>
       <div class="modal-body modal-zoomable">
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;">
-          <div style="display: grid; gap: 16px; align-content: start;">
-            <div>
-              <h4 style="margin: 0 0 8px 0; color: var(--text-primary); font-size: 14px; font-weight: 600;">Global</h4>
-              <table style="width: 100%; font-size: 13px;">
-                <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;">?</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Show keyboard shortcuts</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;">Esc</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Close panels or cancel</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;">Tab</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Toggle sidebar / board focus</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;">[</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Toggle sidebar collapse</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;">R</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Reload page</td>
-                </tr>
-              </table>
-            </div>
-            <div>
-              <h4 style="margin: 0 0 8px 0; color: var(--text-primary); font-size: 14px; font-weight: 600;">Navigation</h4>
-              <table style="width: 100%; font-size: 13px;">
-                <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;">J</kbd> / <kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">&darr;</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Next task in column</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;">K</kbd> / <kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">&uarr;</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Previous task in column</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;">H</kbd> / <kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">&larr;</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Move to left column</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;">L</kbd> / <kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">&rarr;</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Move to right column</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;">Enter</kbd></td>
-                  <td style="padding: 4px 0; color: var(--text-primary);">Toggle task detail panel</td>
-                </tr>
-              </table>
-            </div>
-          </div>
-          <div style="align-content: start;">
-            <h4 style="margin: 0 0 8px 0; color: var(--text-primary); font-size: 14px; font-weight: 600;">Actions</h4>
-            <table style="width: 100%; font-size: 13px;">
-              <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;">P</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Open session plan</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;">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>
-              </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;">N</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Toggle scratchpad</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;">.</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Pin/unpin 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;">&gt;</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Toggle sticky on 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;">T</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Toggle theme</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;">M</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Jump to marketplace</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;">$</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Jump to cost</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;">Shift+L</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Toggle session log</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;">Shift+M</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Open last message detail</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++</kbd> / <kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl+-</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Modal text size</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+0</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Reset text size</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;">Shift+S</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Storage manager</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;">Shift+C</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Copy session id</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;">J/K</kbd></td>
-                <td style="padding: 4px 0; color: var(--text-primary);">Navigate messages in detail modal</td>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-primary" onclick="closeHelpModal()">Got it</button>
+        <dl class="shortcuts" id="help-shortcuts"></dl>
       </div>
     </div>
   </div>
@@ -737,6 +608,14 @@
     </div>
   </div>
 
+  <div id="session-picker-modal" class="modal-overlay top-aligned" onclick="closeSessionPicker()">
+    <div class="modal session-picker" onclick="event.stopPropagation()">
+      <input type="text" id="session-picker-input" class="form-input sp-input" placeholder="Jump to session..." autocomplete="off" spellcheck="false">
+      <div id="session-picker-list" class="sp-list"></div>
+      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> open &middot; <kbd>Esc</kbd> close</div>
+    </div>
+  </div>
+
   <div id="toast" class="toast"></div>
 </body>
 </html>

package/public/style.css

@@ -4264,6 +4264,13 @@ body.light .msg-assistant .msg-text {
   display: flex;
 }
 
+/* For pickers: the dialog sits above the vertical centre so its list grows
+   downward instead of shifting rows under the cursor as it filters. */
+.modal-overlay.top-aligned {
+  align-items: flex-start;
+  padding-top: 12vh;
+}
+
 .plan-modal-overlay {
   z-index: 10001;
   background: rgba(0, 0, 0, 0.6);
@@ -4512,6 +4519,106 @@ body.light .msg-assistant .msg-text {
   max-width: 440px;
 }
 
+.modal-help {
+  max-width: 960px;
+}
+
+/* One shared grid for both halves (key | label | spacer | key | label): each key
+   gutter is sized by its column's widest combo, and left/right rows share row
+   tracks, so paired groups line up — a shorter group just leaves empty rows.
+   Cells opt into a half via sc-l / sc-r; the markup is generated from
+   SHORTCUT_PAIRS in app.js. */
+.shortcuts {
+  margin: 0;
+  display: grid;
+  grid-template-columns: max-content 1fr 28px max-content 1fr;
+  column-gap: 14px;
+}
+
+.shortcuts dt.sc-l {
+  grid-column: 1;
+}
+.shortcuts dd.sc-l {
+  grid-column: 2;
+}
+.shortcuts dt.sc-r {
+  grid-column: 4;
+}
+.shortcuts dd.sc-r {
+  grid-column: 5;
+}
+.shortcuts .sc-group.sc-l {
+  grid-column: 1 / 3;
+}
+.shortcuts .sc-group.sc-r {
+  grid-column: 4 / 6;
+}
+
+.shortcuts dt {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  align-self: center;
+  gap: 4px;
+  padding: 3px 0;
+}
+
+.shortcuts dd {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+  align-self: center;
+  padding: 3px 0;
+}
+
+/* Section headings carry the column: full-width rule + primary ink, so the eye
+   finds the group before it reads any single row. */
+.shortcuts .sc-group {
+  padding: 18px 0 6px;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border);
+}
+
+.shortcuts .sc-group.sc-first {
+  padding-top: 2px;
+}
+
+/* keycap chips: elevated fill + thicker bottom border reads as a key */
+.sp-hint kbd,
+.shortcuts kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+  color: var(--text-primary);
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+}
+
+.shortcuts .sc-plus,
+.shortcuts .sc-or {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* Hub jumps are no-ops outside Claude Code Hub, so the standalone board hides
+   that whole column rather than listing keys that do nothing. */
+.shortcuts.sc-standalone .sc-hub {
+  display: none;
+}
+
 @keyframes live-border-pulse {
   0%,
   100% {
@@ -4721,6 +4828,130 @@ select.form-input option:checked {
 
 /* #endregion */
 
+/* #region SESSION_PICKER */
+.modal.session-picker {
+  max-height: 70vh;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.sp-input {
+  padding: 9px 12px;
+  background: var(--bg-deep);
+  font-size: 13px;
+}
+
+.sp-list {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sp-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  color: var(--text-secondary);
+  font-family: var(--mono);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sp-row:hover {
+  background: var(--bg-hover);
+}
+
+.sp-row.selected {
+  background: var(--bg-elevated);
+  border-color: var(--accent);
+}
+
+.sp-row .activity-dot.live {
+  background: var(--success);
+}
+
+.sp-row .activity-dot.active {
+  background: var(--accent);
+}
+
+.sp-row .activity-dot.waiting {
+  background: var(--warning);
+}
+
+.sp-name,
+.sp-project,
+.sp-branch {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sp-name {
+  flex: none;
+  max-width: 40%;
+  color: var(--text-primary);
+}
+
+.sp-row.current .sp-name {
+  color: var(--accent-text);
+}
+
+.sp-project {
+  flex: 1;
+  min-width: 0;
+  color: var(--text-muted);
+}
+
+.sp-branch {
+  flex: none;
+  max-width: 25%;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bg-hover);
+  color: var(--text-tertiary);
+  font-size: 11px;
+}
+
+.sp-count,
+.sp-time {
+  flex: none;
+  color: var(--text-muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.sp-time {
+  min-width: 62px;
+  text-align: right;
+}
+
+.sp-empty {
+  padding: 20px 8px;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.sp-hint {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* #endregion */
+
 /* #region TOOL_STATS */
 .modal.tool-stats-modal {
   width: 90%;
@@ -5314,21 +5545,24 @@ pre.mermaid svg {
 }
 
 .project-group-header.kb-selected,
-.pinned-sub-header.kb-selected {
+.pinned-sub-header.kb-selected,
+.sg-section-toggle.kb-selected {
   color: var(--text-primary);
   background: var(--bg-hover);
   border-radius: 4px;
 }
 
 .project-group-header .group-chevron,
-.session-group-header .group-chevron {
+.session-group-header .group-chevron,
+.sg-section-toggle .group-chevron {
   transition: transform 0.15s ease;
   flex-shrink: 0;
   display: block;
 }
 
 .project-group-header.collapsed .group-chevron,
-.session-group-header.collapsed .group-chevron {
+.session-group-header.collapsed .group-chevron,
+.sg-section-toggle.collapsed .group-chevron {
   transform: rotate(-90deg);
 }
 
@@ -5522,6 +5756,18 @@ pre.mermaid svg {
   margin-top: 0;
 }
 
+.sg-section-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-bottom: 4px;
+  cursor: pointer;
+}
+
+.sg-section-toggle:hover {
+  color: var(--text-primary);
+}
+
 .session-group-header {
   display: flex;
   align-items: center;
@@ -5584,7 +5830,8 @@ pre.mermaid svg {
   margin-left: 6px;
 }
 
-.session-group-sessions.collapsed {
+.session-group-sessions.collapsed,
+.sg-section-body.collapsed {
   display: none;
 }
 

package/server.js

@@ -2007,16 +2007,16 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     // (same pattern as agentsNeedingModel below). Each field shares the same resolve flow:
     // look up in progressMap by agentId, fall back to per-field extractor, persist only
     // on actual change.
+    // progressMap is keyed by tool_use_id; re-key by agentId, first value per field wins.
     const byAgentId = {};
-    const nameByAgentId = {};
-    const descByAgentId = {};
     if (meta.jsonlPath) {
       try {
         const progressMap = getProgressMap(meta.jsonlPath);
         for (const entry of Object.values(progressMap)) {
-          if (entry.prompt && !byAgentId[entry.agentId]) byAgentId[entry.agentId] = entry.prompt;
-          if (entry.name && !nameByAgentId[entry.agentId]) nameByAgentId[entry.agentId] = entry.name;
-          if (entry.description && !descByAgentId[entry.agentId]) descByAgentId[entry.agentId] = entry.description;
+          const e = (byAgentId[entry.agentId] ||= {});
+          for (const f of ['prompt', 'name', 'description', 'usage']) {
+            if (entry[f] && !e[f]) e[f] = entry[f];
+          }
         }
       } catch (_) {}
     }
@@ -2025,12 +2025,12 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
         field: 'prompt',
         flag: 'promptUnavailable',
         lookup: (a) => {
-          if (byAgentId[a.agentId]) return byAgentId[a.agentId];
+          if (byAgentId[a.agentId]?.prompt) return byAgentId[a.agentId].prompt;
           try { return extractPromptFromTranscript(subagentJsonlForExtraction(meta, a.agentId)); } catch (_) { return null; }
         },
       },
-      { field: 'agentName',   flag: 'agentNameUnavailable',   lookup: (a) => nameByAgentId[a.agentId] || null },
-      { field: 'description', flag: 'descriptionUnavailable', lookup: (a) => descByAgentId[a.agentId] || null },
+      { field: 'agentName',   flag: 'agentNameUnavailable',   lookup: (a) => byAgentId[a.agentId]?.name || null },
+      { field: 'description', flag: 'descriptionUnavailable', lookup: (a) => byAgentId[a.agentId]?.description || null },
     ];
     if (meta.jsonlPath) {
       for (const { field, flag, lookup } of reconcileFields) {
@@ -2133,6 +2133,11 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     }
 
     const waitingForUser = checkWaitingForUser(agentDir, logMtime);
+    // Attached after persistAgent so it stays response-only.
+    for (const agent of visibleAgents) {
+      const usage = byAgentId[agent.agentId]?.usage;
+      if (usage) agent.usage = usage;
+    }
     res.json({ agents: visibleAgents, waitingForUser, teamColors });
   } catch {
     res.json({ agents: [], waitingForUser: null });
@@ -2499,7 +2504,6 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
         msg.agentId = entry.agentId;
         if (entry.description) msg.agentDescription = entry.description;
         if (entry.usageText) msg.agentUsage = entry.usageText;
-        if (entry.usage) msg.agentUsageStats = entry.usage;
         if (entry.prompt && !msg.agentPrompt) msg.agentPrompt = entry.prompt;
         try {
           const agentFile = path.join(agentDir, `${entry.agentId}.jsonl`);