claude-code-kanban 7.24.0 → 7.26.0

package/hub-app.json

@@ -4,12 +4,15 @@
   "name": "Kanban",
   "icon": "columns",
   "run": { "entry": "server.js", "defaultPort": 3541 },
-  "publishes": ["session.changed"],
+  "publishes": ["session.changed", "voice.context"],
   "actions": {
     "handles": {
       "session.open": { "params": { "session": "string" }, "mode": "message" },
       "session.find": { "params": { "name": "string?" }, "mode": "message" },
       "session.paste": { "params": { "text": "string", "submit": "string?", "session": "string?" }, "mode": "message" },
+      "session.approve": { "params": {}, "mode": "message" },
+      "session.deny": { "params": { "message": "string?" }, "mode": "message" },
+      "session.next": { "params": {}, "mode": "message" },
       "task.add": { "params": { "subject": "string?", "description": "string?" }, "mode": "message" },
       "task.live": { "params": { "subject": "string?", "description": "string?", "pending": "string?", "final": "string?", "submit": "string?", "cancel": "string?" }, "mode": "message" },
       "session.live": { "params": { "text": "string", "final": "string?", "submit": "string?", "cancel": "string?", "session": "string?" }, "mode": "message" },
@@ -52,7 +55,7 @@
       "default": "dots"
     }
   ],
-  "keys": { "keeps": ["ctrl+alt+1", "ctrl+alt+2", "ctrl+alt+3", "ctrl+alt+4", "ctrl+alt+5", "ctrl+alt+6", "ctrl+alt+7", "ctrl+alt+8", "ctrl+alt+9", "ctrl+alt+n", "ctrl+alt+r", "ctrl+alt+s", "ctrl+shift+d", "ctrl+shift+k", "ctrl+shift+l", "ctrl+shift+m", "ctrl+shift+p", "ctrl+shift+z"] },
+  "keys": { "keeps": ["ctrl+alt+1", "ctrl+alt+2", "ctrl+alt+3", "ctrl+alt+4", "ctrl+alt+5", "ctrl+alt+6", "ctrl+alt+7", "ctrl+alt+8", "ctrl+alt+9", "ctrl+alt+n", "ctrl+alt+r", "ctrl+alt+s", "ctrl+alt+shift+s","ctrl+shift+d", "ctrl+shift+k", "ctrl+shift+l", "ctrl+shift+m", "ctrl+shift+p", "ctrl+shift+z"] },
   "plugin": {
     "marketplace": "plugin",
     "name": "claude-code-kanban",

package/mod-surface.json

@@ -0,0 +1,38 @@
+{
+  "surface": 1,
+  "functions": {
+    "renderTaskCard": "(task) -> the HTML string of one board card. Return the same string for the same task: the board rewrites a column only when its HTML changes.",
+    "renderSessions": "() -> rebuilds the session list in the sidebar. It returns early while the user drags or types in the list.",
+    "renderKanban": "() -> rebuilds the three board columns from currentTasks.",
+    "renderActivityChip": "() -> {waiting, active, terminal}: counts the sessions in each state and redraws the chips above the session list when the counts change. It runs on every session poll."
+  },
+  "events": {
+    "sessions.rendered": "After each renderSessions call, also one that returned early.",
+    "board.rendered": "After each renderKanban call.",
+    "activity.rendered": "After each renderActivityChip call, with its {waiting, active, terminal} counts as the detail. A waiting session also counts as active."
+  },
+  "parts": {
+    "sidebar": "The sidebar: header, session list, footer.",
+    "sessions": "The session list.",
+    "board": "The board with its three columns.",
+    "session-card": "One session in the session list, with data-session-id.",
+    "sidebar-footer": "The footer under the session list. Its children are rebuilt on each poll; the element stays.",
+    "progress": "The track of the progress bar in the session header.",
+    "progress-fill": "The fill inside progress, whose width is the share of the session's tasks done.",
+    "kanbot": "The Kanbot mascot, a 16x13 svg whose head is x 3-13 at the top row. It sits in the sidebar footer's button and in the Kanbot panel's head.",
+    "idle-mascot": "The mascot over the empty state, an svg.clawd that floats up and down.",
+    "task-card": "One card on the board, with data-task-id and data-session-id.",
+    "task-number": "The #id label at the top left of a task card.",
+    "done-title": "The title of the Completed column."
+  },
+  "states": {
+    "session-card": {
+      "active": "While it is the open session."
+    },
+    "task-card": {
+      "pending": "Not started.",
+      "in-progress": "Being worked on.",
+      "completed": "Done."
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.24.0",
+  "version": "7.26.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "type": "commonjs",
@@ -55,6 +55,7 @@
   "files": [
     "server.js",
     "hub-app.json",
+    "mod-surface.json",
     "cli.js",
     "install.js",
     "plugin/**/*",

package/public/app.js

@@ -95,8 +95,10 @@ let sessionsHasMore = false;
 // URL, so a query string would not survive a hub reload.
 const ZEN_KEY = 'zenMode';
 let zenMode = store.getItem(ZEN_KEY) === 'true';
-// Group zen: the sidebar shows one group's subtree. A view of the moment, so it is not persisted.
+// Group and project zen: the sidebar shows one group's subtree or one project. A view of the
+// moment, so neither is persisted.
 let zenGroup = null;
+let zenProject = null;
 let filterProject = FILTER_DEFAULTS.project; // null = all, '__recent__' = last 24h, or project path
 let recentProjects = new Set();
 let projectsCacheDirty = true;
@@ -236,7 +238,7 @@ function updateUrl() {
   history.replaceState(null, '', url);
   persistLastView();
   syncTerminal();
-  schedulePublishSession();
+  schedulePublish();
 }
 
 const LAST_VIEW_KEY = 'lastView';
@@ -263,6 +265,8 @@ function resetState() {
   filterProject = FILTER_DEFAULTS.project;
   zenMode = false;
   zenGroup = null;
+  zenProject = null;
+  setZenPeek(null);
   store.removeItem(ZEN_KEY);
   renderZenState();
   searchQuery = '';
@@ -335,8 +339,10 @@ async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
     // info modal both look it up in `sessions` and bail when it is absent, so a session
     // opened from outside the current filter would leave the view on the previous one.
     // The server adds the pinned sessions itself; the ones `session open` showed are this page's.
-    // Group zen ignores the filters, and its session members come back through `include`.
-    const zenIds = zenGroup ? sgSubtreeIds(zenGroup) : new Set();
+    // Group and project zen keep the Active/All filter and drop the others. Under All, a group's
+    // session members come back through `include`, as they may be past the page limit.
+    const zenScope = !!(zenGroup || zenProject);
+    const zenIds = zenGroup && sessionFilter !== 'active' ? sgSubtreeIds(zenGroup) : new Set();
     const zenMembers = sessionGroups
       .filter((g) => zenIds.has(g.id))
       .flatMap((g) => g.members.filter((m) => m.type === 'session').map((m) => m.ref));
@@ -347,19 +353,24 @@ async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
       ...openedStickyIds,
       ...zenMembers,
     ].filter(Boolean);
-    const recent = !zenGroup && filterProject === '__recent__';
+    const recent = !zenScope && filterProject === '__recent__';
+    const project = zenProject || (!zenScope && !recent && filterProject) || null;
+    const listScope = `${project}|${recent}|${sessionFilter}|${sessionLimit}`;
     const res = await api('/api/sessions', {
       query: {
         limit: sessionLimit,
         include: include.length ? include.join(',') : null,
         recentHours: recent ? RECENT_PROJECT_HOURS : null,
-        project: !zenGroup && !recent && filterProject ? filterProject : null,
-        filter: !zenGroup && sessionFilter === 'active' ? 'active' : null,
+        project,
+        filter: sessionFilter === 'active' ? 'active' : null,
       },
     });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     sessionsHasMore = res.headers.get('X-Has-More') === 'true';
     const newSessions = await res.json();
+    // A list from another server scope would make every session it adds look newly active.
+    if (listScope !== lastListScope) prevActiveSessionIds = null;
+    lastListScope = listScope;
     const sessionsHash = JSON.stringify(newSessions);
     if (sessionsHash !== lastSessionsHash) {
       lastSessionsHash = sessionsHash;
@@ -368,7 +379,7 @@ async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
       sgSweepTransient();
       renderSessions();
       renderActivityChip();
-      schedulePublishSession();
+      schedulePublish();
     }
     // A list too short to scroll gives no scroll event, so fill it until it can scroll.
     if (sessionsHasMore) setTimeout(() => loadMoreIfNearEnd());
@@ -490,7 +501,8 @@ function sessionSearch(onFound) {
   };
 }
 
-const sidebarSearch = sessionSearch(renderSessions);
+// A lambda, not the function: a hub mod replaces window.renderSessions after this line runs.
+const sidebarSearch = sessionSearch(() => renderSessions());
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function handleSearch(query) {
@@ -681,9 +693,11 @@ function renderActivityChip() {
       `;
     })
     .join('');
-  if (html === lastChipHtml) return;
-  lastChipHtml = html;
-  container.innerHTML = html;
+  if (html !== lastChipHtml) {
+    lastChipHtml = html;
+    container.innerHTML = html;
+  }
+  return counts;
 }
 
 function toggleActivityKind(kind) {
@@ -1799,8 +1813,12 @@ function planApprovalControlsHtml(inputId) {
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
 function rejectWaitingPlan(inputId) {
-  const feedback = document.getElementById(inputId)?.value?.trim();
-  respondWaiting({ behavior: 'deny', message: feedback || PLAN_REJECT_MSG });
+  denyWaiting(document.getElementById(inputId)?.value);
+}
+
+function denyWaiting(feedback) {
+  const message = feedback?.trim() || (currentWaiting?.kind === 'plan' ? PLAN_REJECT_MSG : '');
+  respondWaiting({ behavior: 'deny', ...(message && { message }) });
 }
 
 // UI-driven approvals: POST the decision the plugin's mod is polling for.
@@ -3530,6 +3548,7 @@ function visibleAgents() {
 }
 
 function renderAgentFooter() {
+  schedulePublish();
   const footer = document.getElementById('agent-footer');
   const content = document.getElementById('agent-footer-content');
   const label = document.getElementById('agent-footer-label');
@@ -3821,7 +3840,10 @@ function showNoSession() {
 // 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() {
+// Zen on a group or project drops the project filter and the search: its scope replaces both.
+function getFilteredSessions({ zen = false } = {}) {
+  const project = zen ? null : filterProject;
+  const search = zen ? '' : searchQuery;
   let filteredSessions = sessions;
   if (sessionFilter === 'active') {
     const activeSessionIds = new Set();
@@ -3851,7 +3873,7 @@ function getFilteredSessions() {
       }
     }
   }
-  if (filterProject) {
+  if (project) {
     // The open session keeps its row even when it belongs to another project, so that
     // revealing one by id has something to scroll to. Same exemption the active branch
     // above already makes, for the same reason. recentProjects lags behind the session list, so a
@@ -3861,7 +3883,7 @@ function getFilteredSessions() {
       (s) =>
         matchesProjectFilter(s.project, s.worktree?.repo) ||
         s.id === currentSessionId ||
-        (filterProject === '__recent__' && (isAnyPinned(s.id) || Date.parse(s.modifiedAt) >= recentCutoff)),
+        (project === '__recent__' && (isAnyPinned(s.id) || Date.parse(s.modifiedAt) >= recentCutoff)),
     );
   }
 
@@ -3872,22 +3894,22 @@ function getFilteredSessions() {
     }
   }
 
-  if (searchQuery) {
+  if (search) {
     const taskMatchIds = new Set();
     for (const t of allTasksCache) {
       if (
-        (t.subject && fuzzyMatch(t.subject, searchQuery)) ||
-        (t.description && fuzzyMatch(t.description, searchQuery)) ||
-        (t.activeForm && fuzzyMatch(t.activeForm, searchQuery))
+        (t.subject && fuzzyMatch(t.subject, search)) ||
+        (t.description && fuzzyMatch(t.description, search)) ||
+        (t.activeForm && fuzzyMatch(t.activeForm, search))
       )
         taskMatchIds.add(t.sessionId);
     }
-    const groupMatchIds = sgSearchMatchIds(searchQuery);
+    const groupMatchIds = sgSearchMatchIds(search);
     const matchesSearch = (s) =>
-      (s.name && fuzzyMatch(s.name, searchQuery)) ||
-      (s.id && fuzzyMatch(s.id, searchQuery)) ||
-      (s.project && fuzzyMatch(s.project, searchQuery)) ||
-      (s.description && fuzzyMatch(s.description, searchQuery)) ||
+      (s.name && fuzzyMatch(s.name, search)) ||
+      (s.id && fuzzyMatch(s.id, search)) ||
+      (s.project && fuzzyMatch(s.project, search)) ||
+      (s.description && fuzzyMatch(s.description, search)) ||
       taskMatchIds.has(s.id) ||
       groupMatchIds.has(s.id);
 
@@ -3910,7 +3932,7 @@ function getFilteredSessions() {
   if (
     sessionFilter === 'active' &&
     activityFilter.size === 0 &&
-    !searchQuery &&
+    !search &&
     (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)
   ) {
     const filteredIds = new Set(filteredSessions.map((s) => s.id));
@@ -3961,6 +3983,7 @@ function zenPanelIsEditing() {
 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.
+  schedulePublish();
   if (sgDrag || sgIsEditing() || zenPanelIsEditing()) return;
   scheduleJustFinishedExpiry();
   refreshProjectList();
@@ -3968,20 +3991,25 @@ function renderSessions() {
 
   if (zenGroup && !sgGroupById(zenGroup)) {
     zenGroup = null;
+    zenPeekKey = null;
     renderZenState();
   }
   // Zen narrows the rendered list only — the session picker keeps calling getFilteredSessions()
   // and still offers everything, or there would be no way to switch sessions without leaving zen.
-  // Group zen renders only its subtree's buckets, so it takes every session unfiltered.
   const zenSession = zenMode && currentSessionId ? sessions.find((s) => s.id === currentSessionId) : null;
   sessionsList.classList.toggle('zen', !!zenSession);
   sessionsList.dataset.zenState = zenSession ? sessionState(zenSession) : '';
+  const zenScope = !!(zenGroup || zenProject);
   let filteredSessions;
-  if (zenGroup) filteredSessions = applyStableSessionOrder(sessions);
-  else if (zenMode) filteredSessions = zenSession ? [zenSession] : [];
+  if (zenScope) {
+    const scoped = getFilteredSessions({ zen: true });
+    filteredSessions = applyStableSessionOrder(
+      zenProject ? scoped.filter((s) => sessionProjectKey(s) === zenProject) : scoped,
+    );
+  } else if (zenMode) filteredSessions = zenSession ? [zenSession] : [];
   else filteredSessions = applyStableSessionOrder(getFilteredSessions());
 
-  const outside = sidebarSearch.rows(zenMode || zenGroup ? '' : searchQuery, filteredSessions);
+  const outside = sidebarSearch.rows(zenMode || zenScope ? '' : searchQuery, filteredSessions);
 
   const childDepth = new Map();
   const parentOf = new Map();
@@ -4056,7 +4084,7 @@ function renderSessions() {
         : '';
     const metricsHtml = progressHtml + (showCtx ? renderContextBar(session) : '');
     return `
-          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}${childDepthClass(childDepth.get(session.id))}">
+          <button onclick="openSession('${sid}')" draggable="true" data-hub-part="session-card" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}${childDepthClass(childDepth.get(session.id))}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${sid}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(sessionName)}</div>
             ${renderSessionIdentity(projectHtml, session.gitBranch)}
@@ -4110,7 +4138,7 @@ function renderSessions() {
       )
     : '';
 
-  if (filteredSessions.length === 0 && !zenGroup) {
+  if (filteredSessions.length === 0 && !zenScope) {
     let emptyMsg = 'No sessions found';
     let emptyHint = 'Tasks appear when you use Claude Code';
 
@@ -4219,7 +4247,7 @@ function renderSessions() {
       .join('');
 
     return `
-            <div class="project-group-header${isCollapsed ? ' collapsed' : ''}${nestedCls}" draggable="true" data-group-path="${escapedPath}" data-project-path="${escapedPath}">
+            <div class="project-group-header${isCollapsed ? ' collapsed' : ''}${nestedCls}${projectPath === zenProject ? ' sg-zen' : ''}" draggable="true" data-group-path="${escapedPath}" data-project-path="${escapedPath}">
               ${groupChevronSvg()}
               <span class="group-name">${escapeHtml(folderName)}</span>
               ${terminalAvailable() ? `<span class="project-new-btn" data-project-path="${escapedPath}" title="New session in ${escapeHtml(folderName)}">${PLUS_SVG}</span>` : ''}
@@ -4251,7 +4279,7 @@ function renderSessions() {
   }
   // A group emptied by a filter hides its header; a group the user just created (no filters)
   // shows its drop-here state instead of vanishing.
-  const sgFiltering = !zenGroup && sgListFiltered();
+  const sgFiltering = zenGroup ? activityFilter.size > 0 : sgListFiltered();
 
   // A group whose parent is gone renders at the top.
   const sgIds = new Set(sessionGroups.map((g) => g.id));
@@ -4340,7 +4368,16 @@ function renderSessions() {
   }
 
   if (zenGroup) {
-    sessionsList.innerHTML = sgGroupHtml(sgGroupById(zenGroup), sessionFilter !== 'active');
+    const group = sgGroupById(zenGroup);
+    sessionsList.innerHTML =
+      sgGroupHtml(group, sessionFilter !== 'active') ||
+      `${sgHeaderHtml(group, countHtml([]))}<div class="sg-empty">No sessions match the filters</div>`;
+  } else if (zenProject) {
+    sessionsList.innerHTML =
+      projectBlock(zenProject, filteredSessions, false) +
+      (filteredSessions.length || sessionFilter !== 'active'
+        ? ''
+        : '<div class="sg-empty">No active sessions. Select "All Sessions" to see all</div>');
   } else if (sessionFilter === 'active') {
     // Group active sessions by project
     // Auto-expand a collapsed section when newly-active work lands in it (live refresh).
@@ -4574,6 +4611,7 @@ function renderTaskCard(task) {
         <div
           role="listitem"
           tabindex="0"
+          data-hub-part="task-card"
           data-task-id="${escapeHtml(task.id)}"
           data-session-id="${escapeHtml(actualSessionId)}"
           onclick="showTaskDetail('${escAttrJs(task.id)}', '${escAttrJs(actualSessionId)}')"
@@ -4583,7 +4621,7 @@ function renderTaskCard(task) {
           class="task-card ${statusClass} ${isBlocked ? 'blocked' : ''} ${isDim ? 'dim' : ''}"
           aria-label="${escapeHtml(task.subject)} — ${escapeHtml(state)}">
           <div class="task-id">
-            <span>#${taskId}</span>
+            <span data-hub-part="task-number">#${taskId}</span>
             ${renderTaskChips(chips)}
             ${isBlocked ? `<span class="task-blocked" title="Blocked">waiting on ${blockers.map((id) => `#${escapeHtml(id)}`).join(' ')}</span>` : ''}
             ${task.owner ? renderOwnerBadge(task) : ''}
@@ -4598,50 +4636,6 @@ function renderTaskCard(task) {
 //#endregion
 
 //#region KANBAN
-// FLIP pass around renderKanban's innerHTML rebuild (#41): the rebuild lands cards at
-// their final spot instantly, so a status change reads as a full-board reload. Recording
-// where each card was and animating from there makes a move glide instead.
-const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-
-function cardFlipKey(el) {
-  return `${el.dataset.sessionId}|${el.dataset.taskId}`;
-}
-
-function captureCardRects() {
-  const rects = new Map();
-  for (const el of document.querySelectorAll('.column-tasks .task-card')) {
-    rects.set(cardFlipKey(el), el.getBoundingClientRect());
-  }
-  return rects;
-}
-
-function playCardFlip(before) {
-  // An empty board before the render means a view switch, not a move — nothing to glide.
-  if (reducedMotion.matches || before.size === 0) return;
-  for (const el of document.querySelectorAll('.column-tasks .task-card')) {
-    const prev = before.get(cardFlipKey(el));
-    if (!prev) {
-      el.animate(
-        [
-          { opacity: 0, transform: 'scale(0.97)' },
-          { opacity: 1, transform: 'none' },
-        ],
-        { duration: 150, easing: 'ease-out' },
-      );
-      continue;
-    }
-    const now = el.getBoundingClientRect();
-    const dx = prev.left - now.left;
-    const dy = prev.top - now.top;
-    if (dx || dy) {
-      el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], {
-        duration: 220,
-        easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)',
-      });
-    }
-  }
-}
-
 // Rewrite a column only when its markup actually changed: SSE ticks fire on any task-file
 // write (updatedAt bumps, agent refreshes), and an unconditional innerHTML rebuild makes
 // the whole board blink for updates with nothing visible in them (#41).
@@ -4667,41 +4661,33 @@ function renderKanban() {
   const emptyIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>`;
   const plusIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>`;
 
-  const writes = [];
   // Adding is a live text input inside the column, so a background refresh would blow it
   // away mid-typing -- leave the column alone until the input is gone.
   if (!addingTask) {
     const addTile = canAddTask()
       ? `<button type="button" class="column-add${pending.length ? '' : ' empty'}" onclick="startAddTask(this, event)" title="Ctrl+Click opens the dialog with a description. You can also ask the agent to add tasks with its TaskCreate tool. Make sure CLAUDE_CODE_ENABLE_TASKS is set in its environment.">${plusIcon}<span>Add task</span></button>`
       : '';
-    writes.push([
+    setColumnHtml(
       pendingTasks,
       pending.length > 0
         ? pending.map(renderTaskCard).join('') + addTile
         : addTile || `<div class="column-empty">${emptyIcon}<div>No pending tasks</div></div>`,
-    ]);
+    );
   }
 
-  writes.push([
+  setColumnHtml(
     inProgressTasks,
     inProgress.length > 0
       ? inProgress.map(renderTaskCard).join('')
       : `<div class="column-empty">${emptyIcon}<div>No active tasks</div></div>`,
-  ]);
+  );
 
-  writes.push([
+  setColumnHtml(
     completedTasks,
     completed.length > 0
       ? completed.map(renderTaskCard).join('')
       : `<div class="column-empty">${emptyIcon}<div>No completed tasks</div></div>`,
-  ]);
-
-  // Capture rects (a forced layout read per card) only when a column will
-  // actually be rewritten — most SSE ticks change nothing and skip the FLIP.
-  const willChange = writes.some(([el, html]) => el._lastHtml !== html);
-  const flipRects = willChange ? captureCardRects() : null;
-  for (const [el, html] of writes) setColumnHtml(el, html);
-  if (flipRects) playCardFlip(flipRects);
+  );
 
   if (selectedTaskId) {
     const card =
@@ -5277,7 +5263,7 @@ function sgListFiltered() {
 // terminal or placeholder counts. Only the full Active list can tell, so other views keep them.
 function sgSweepTransient() {
   if (sgRev === null || !sessionGroups.some((g) => g.transient)) return;
-  if (zenGroup || zenMode || sessionFilter !== 'active' || sessionsHasMore || sgListFiltered()) return;
+  if (zenGroup || zenProject || zenMode || sessionFilter !== 'active' || sessionsHasMore || sgListFiltered()) return;
   const shown = new Set(getFilteredSessions().map((s) => s.id));
   const starting = (id) => !dismissedSessionIds.has(id) && (runningTerminals.has(id) || dispatchSpecs.has(id));
   const present = (m) => m.type !== 'session' || shown.has(m.ref) || starting(m.ref);
@@ -5660,7 +5646,7 @@ function sgGroupDropZone(target) {
     return fromHost === path && fromGroupId === pathGroup.id ? null : { zone, groupId: pathGroup.id, under: path };
   }
   // Stacking a session onto its own project block would only fold it back where it sits today.
-  if (dragSession && sessionProjectKey(dragSession) === path) return releasable ? { zone } : null;
+  if (dragSession && sessionProjectKey(dragSession) === path) return null;
   return { zone, pairWith: path };
 }
 
@@ -6155,6 +6141,7 @@ function setGroupCollapsed(header, collapsed) {
     pinPeekKey = null;
     pinPeekClosedFor = currentSessionId;
   }
+  if (projectPath === zenPeekKey) zenPeekKey = null;
   if (collapsed) collapsedProjectGroups.add(projectPath);
   else collapsedProjectGroups.delete(projectPath);
   header.classList.toggle('collapsed', collapsed);
@@ -6164,10 +6151,11 @@ function setGroupCollapsed(header, collapsed) {
 }
 
 function persistCollapsedGroups() {
-  store.writeJson(COLLAPSED_GROUPS_KEY, [...collapsedProjectGroups, ...(pinPeekKey ? [pinPeekKey] : [])]);
+  store.writeJson(COLLAPSED_GROUPS_KEY, [...collapsedProjectGroups, ...[pinPeekKey, zenPeekKey].filter(Boolean)]);
 }
 
 let prevActiveSessionIds = null; // null until primed by the first onlyNew pass
+let lastListScope = null;
 
 // Expand collapsed project sections that contain active sessions; leave the rest collapsed.
 // onlyNew: expand only for sessions that became active since the last call, so a section the
@@ -6224,6 +6212,14 @@ function pinnedCollapseKeys(session) {
 // A Pinned sub-section the user collapsed opens while the open session is in it and closes once
 // the user leaves that session. The peek is never saved: persistCollapsedGroups writes the key back.
 let pinPeekKey = null;
+// The collapsed group or project that zen opened; leaving zen collapses it again, unless the user
+// toggled it meanwhile.
+let zenPeekKey = null;
+
+function setZenPeek(key) {
+  if (zenPeekKey) collapsedProjectGroups.add(zenPeekKey);
+  zenPeekKey = key && collapsedProjectGroups.delete(key) ? key : null;
+}
 let pinPeekClosedFor = null;
 
 function syncPinPeek() {
@@ -6742,7 +6738,7 @@ const SHORTCUT_TABS = [
           {
             keys: ['Ctrl', 'Shift', 'Z'],
             combo: true,
-            label: 'Zen mode (current session, or the group under the cursor)',
+            label: 'Zen mode (current session, or the group or project under the cursor)',
           },
           { keys: ['Ctrl', 'Shift', 'K'], combo: true, label: 'Show / hide Kanbot' },
           { keys: ['Ctrl', '+'], combo: true, label: 'Larger modal text' },
@@ -6780,6 +6776,7 @@ const SHORTCUT_TABS = [
           { keys: ['Ctrl', 'Alt', 'N'], combo: true, hubMod: true, label: 'New session' },
           { keys: ['Ctrl', 'Alt', 'R'], combo: true, hubMod: true, label: 'Resume session (claude -r)' },
           { keys: ['Ctrl', 'Alt', 'S'], combo: true, hubMod: true, label: 'Swap to previous session' },
+          { keys: ['Ctrl', 'Alt', 'Shift', 'S'], combo: true, hubMod: true, label: 'Next session that needs you' },
           { keys: ['Shift', 'C'], combo: true, label: 'Copy session id' },
           { keys: ['Ctrl', 'Shift', 'C'], combo: true, label: 'Copy session name (SendMessage address)' },
         ],
@@ -6900,6 +6897,12 @@ function buildHelpShortcuts(groups) {
     for (let i = 0; i < Math.max(...sides.map(([g]) => g.rows.length)); i++) {
       for (const [group, side] of sides) {
         const row = group.rows[i];
+        if (row?.say) {
+          cells.push(
+            `<dt class="${escapeHtml(side)}"><span class="sc-say">${escapeHtml(row.say)}</span></dt><dd class="${escapeHtml(side)}">${escapeHtml(row.label)}</dd>`,
+          );
+          continue;
+        }
         const parts = row && helpKeys(row);
         if (!parts?.length) continue;
         const sep = row.combo ? '<span class="sc-plus">+</span>' : '<span class="sc-or">/</span>';
@@ -6917,10 +6920,28 @@ const helpFilter = document.getElementById('help-filter');
 
 // Hub keys do nothing outside Claude Code Hub, except the app links that the --*-url flags set.
 const hubRowWorks = (r) => (r.opens ? hub.can(r.opens) : hub.inHub);
+// With voice on, the hub lists the commands this app handles. A hub before SDK 1.11 has no voiceCommands.
+function voiceHelpGroup() {
+  const commands = hub.voiceCommands?.() ?? [];
+  if (!commands.length) return [];
+  const hold = {
+    keys: ['Ctrl', 'Shift', 'Space'],
+    action: 'hub.voice',
+    combo: true,
+    label: 'Hold and say "hub", then a command',
+  };
+  return [{ title: 'Voice', rows: [hold, ...commands.map((c) => ({ say: `hub, ${c.say}`, label: c.help }))] }];
+}
+
 const helpTabs = () =>
   SHORTCUT_TABS.map((t) =>
     t.hub
-      ? { ...t, groups: t.groups.map((g) => ({ ...g, rows: g.rows.filter(hubRowWorks) })).filter((g) => g.rows.length) }
+      ? {
+          ...t,
+          groups: [...t.groups, ...voiceHelpGroup()]
+            .map((g) => ({ ...g, rows: g.rows.filter(hubRowWorks) }))
+            .filter((g) => g.rows.length),
+        }
       : t,
   ).filter((t) => t.groups.length);
 
@@ -6930,7 +6951,9 @@ function filteredShortcutGroups(query) {
     .flatMap((t) => t.groups)
     .map((g) => ({
       title: g.title,
-      rows: g.rows.filter((r) => fuzzyMatch(`${r.label} ${helpKeys(r).join(' ')}`.replaceAll('−', '-'), query)),
+      rows: g.rows.filter((r) =>
+        fuzzyMatch(`${r.label} ${r.say ?? helpKeys(r).join(' ')}`.replaceAll('−', '-'), query),
+      ),
     }))
     .filter((g) => g.rows.length);
 }
@@ -8559,6 +8582,7 @@ function stopReview() {
   if (!activeReview) return;
   const { ctl, panelEl, hostEl } = activeReview;
   ctl.abort();
+  cancelDictationIn(panelEl);
   for (const c of reviewItems()) {
     c.range = null;
     c.frameId = 0;
@@ -9049,6 +9073,7 @@ function closeReviewPop() {
   }
   reviewPopMode = null;
   const el = reviewPopEl();
+  cancelDictationIn(el);
   el.className = '';
   el.replaceChildren();
 }
@@ -9102,10 +9127,11 @@ function openReviewEditor(picked, text = '') {
     reviewPendingHighlight?.add(picked.range);
   } else if (picked.inFrame) postToReviewFrame('pend');
   activeReview.picked = picked;
-  el.innerHTML = `<textarea rows="3" placeholder="Comment (Ctrl+Enter to add)"></textarea>
+  el.innerHTML = `<div class="mic-field"><textarea class="review-pop-input" rows="3" placeholder="Comment (Ctrl+Enter to add)"></textarea></div>
     <div class="review-pop-actions"><button type="button" data-act="cancel">Cancel</button><button type="button" data-act="add" class="primary">Add</button></div>`;
   const ta = el.querySelector('textarea');
   ta.value = text;
+  addMic(ta);
   const add = (comment) => addReviewComment(picked, comment);
   ta.addEventListener('keydown', (e) => onReviewEditorKey(e, add, closeReviewPop));
   el.querySelector('[data-act="cancel"]').addEventListener('click', closeReviewPop);
@@ -9261,6 +9287,7 @@ function renderReviewPanel() {
   syncReviewSendClaims();
   if (!activeReview) return;
   const { panelEl, hostEl } = activeReview;
+  cancelDictationIn(panelEl);
   const items = reviewItems();
   panelEl.hidden = !items.length;
   hostEl?.classList.toggle('has-review', items.length > 0);
@@ -9274,7 +9301,7 @@ function renderReviewPanel() {
       .map((c, i) => {
         const body =
           c === activeReview.editing?.c
-            ? `<textarea class="review-card-edit" rows="3" aria-label="Edit comment" placeholder="Ctrl+Enter to save, Esc to cancel">${escapeHtml(activeReview.editing.draft)}</textarea>`
+            ? `<div class="mic-field"><textarea class="review-card-edit" rows="3" aria-label="Edit comment" placeholder="Ctrl+Enter to save, Esc to cancel">${escapeHtml(activeReview.editing.draft)}</textarea></div>`
             : `<div class="review-card-comment" title="Double-click to edit">${escapeHtml(c.comment)}</div>`;
         return `<li class="review-card${c === activeReview.hot ? ' hot' : ''}" data-i="${i}" title="Show in the document">
         <button type="button" class="review-edit" title="Edit" aria-label="Edit">${DETAIL_EDIT_SVG}</button>
@@ -9283,6 +9310,8 @@ function renderReviewPanel() {
         ${body}</li>`;
       })
       .join('')}</ol>`;
+  const edit = panelEl.querySelector('.review-card-edit');
+  if (edit) addMic(edit);
 }
 
 async function toastDelivery({ delivered, markdown }, noun) {
@@ -11946,21 +11975,26 @@ function renderFilterState() {
   document.getElementById('filter-menu-btn')?.classList.toggle('has-filters', short.length > 0);
 }
 
-// With the sidebar cursor on a group header, zen shows that group instead of the open session.
+// With the sidebar cursor on a group or project header, zen shows that group or project instead
+// of the open session.
 function toggleZenMode() {
   const leavingSessionZen = zenMode;
   if (zenMode) zenMode = false;
-  else if (zenGroup) zenGroup = null;
+  else if (zenGroup || zenProject) zenGroup = zenProject = null;
   else {
-    zenGroup = kbSelectedGroup()?.id || null;
-    zenMode = !zenGroup;
+    const el = focusZone === 'sidebar' && sessionsList.querySelector('.kb-selected');
+    const sel = el && sgDragPayload(el);
+    zenGroup = sel?.kind === 'group' ? sgGroupById(sel.ref)?.id || null : null;
+    zenProject = sel?.kind === 'project' ? sel.ref : null;
+    zenMode = !zenGroup && !zenProject;
   }
+  setZenPeek(zenGroup ? sgKey(zenGroup) : zenProject);
   store.setItem(ZEN_KEY, String(zenMode));
   renderZenState();
-  if (zenMode || zenGroup) closeFilterMenu();
+  if (zenMode) closeFilterMenu();
   renderSessions();
-  // The open session or the group's members may be outside the current server page/filter,
-  // and leaving group zen needs the filtered page back.
+  // The open session or the scope's sessions may be outside the current server page/filter,
+  // and leaving a scope needs the filtered page back.
   if (!leavingSessionZen) fetchSessions(false);
 }
 
@@ -11973,7 +12007,7 @@ function applyHubSettings(s) {
 function renderZenState() {
   const btn = document.getElementById('zen-mode-btn');
   if (!btn) return;
-  const on = zenMode || !!zenGroup;
+  const on = zenMode || !!zenGroup || !!zenProject;
   btn.classList.toggle('active', on);
   btn.setAttribute('aria-pressed', String(on));
   btn.title = on ? 'Zen mode on — show all sessions (Ctrl+Shift+Z)' : 'Zen mode: current session only (Ctrl+Shift+Z)';
@@ -15591,6 +15625,7 @@ function inPageField(e) {
 function terminalShortcut(e, probe = false) {
   const ctrlAlt = hubModDown(e);
   const ctrlShift = e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey;
+  const ctrlAltShift = e.ctrlKey && e.altKey && e.shiftKey && !e.metaKey && !e.getModifierState?.('AltGraph');
   // Ctrl+_ is Claude Code's undo, so the zoom keys leave it to the terminal. An open ask card,
   // which sits in the terminal pane, takes them for its own text zoom.
   const zoom = e.key === '_' ? undefined : zoomDelta(e);
@@ -15598,6 +15633,7 @@ function terminalShortcut(e, probe = false) {
     return () => adjustTerminalFontSize(Math.sign(zoom));
   }
   if (ctrlAlt && e.code === 'KeyS') return swapToPreviousSession;
+  if (ctrlAltShift && e.code === 'KeyS') return nextNeedsYou;
   if (matchKey(e, 'KeyR') && terminalConnectSlow() && wantsTerminal() && !inPageField(e)) return reconnectTerminal;
   // Cancelling the default also stops Chrome's system print dialog, which this page has no use for.
   if (ctrlShift && e.code === 'KeyP') return toggleSessionPicker;
@@ -16622,7 +16658,7 @@ async function endAllTerminals() {
 // The board's own assistant (docs/kanbot.md): a claude session the server keeps hidden from the list,
 // shown in a popover through a second terminal frame on the board terminal's frame origin.
 const KANBOT_SVG =
-  '<svg viewBox="0 0 16 13" width="16" height="13" shape-rendering="crispEdges" aria-hidden="true">' +
+  '<svg data-hub-part="kanbot" viewBox="0 0 16 13" width="16" height="13" shape-rendering="crispEdges" aria-hidden="true">' +
   '<path fill="#d97757" d="M3 0h10v4h3v3h-3v3H3V7H0V4h3z"/>' +
   '<path fill="#d97757" d="M4 10h1v3H4zM6 10h1v3H6zM9 10h1v3H9zM11 10h1v3h-1z"/>' +
   '<path fill="#1f1e1d" d="M5 2h1v2H5zM10 2h1v2h-1z"/></svg>';
@@ -18538,12 +18574,7 @@ function closeNewSession() {
   closeFolderList();
   closeImagePreview();
   clearNewSessionImages();
-  promptVoice.rec?.abort();
-  if (promptVoice.hub) {
-    promptVoice.hub = null;
-    document.getElementById('ns-mic').setAttribute('aria-pressed', 'false');
-    hub.invoke(HUB_DICTATE, { op: 'cancel' });
-  }
+  cancelDictationIn(document.getElementById('new-session-modal'));
 }
 
 function addNewSessionImages(files) {
@@ -18836,13 +18867,27 @@ async function startNewSessionInBackground(id, v) {
 }
 
 const SpeechRecognitionApi = window.SpeechRecognition || window.webkitSpeechRecognition;
-const promptVoice = { rec: null, hub: null };
+// One dictation at a time: { btn, rec } in the browser, { btn, insert } under the hub.
+let dictation = null;
 const HUB_DICTATE = 'voice.dictate';
+const MIC_HTML = `<button type="button" class="mic-btn" title="Dictate" aria-label="Dictate" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg></button>`;
+
+// Puts a mic after a textarea that sits in a `.mic-field`. No browser speech input, no mic.
+function addMic(field, onError = (msg) => showToast(msg, 'error')) {
+  if (!SpeechRecognitionApi) return;
+  field.insertAdjacentHTML('afterend', MIC_HTML);
+  const btn = field.nextElementSibling;
+  // mousedown would blur the textarea and lose the caret the dictation inserts at.
+  btn.addEventListener('mousedown', (e) => e.preventDefault());
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleDictation(field, btn, onError);
+  });
+}
 
 // Replaces the selection the field had when dictation began, so interim results rewrite
-// themselves in place instead of piling up.
-function promptInserter() {
-  const field = document.getElementById('ns-prompt');
+// themselves in place instead of piling up. Fires `input`, as typing would.
+function fieldInserter(field) {
   const before = field.value.slice(0, field.selectionStart);
   const after = field.value.slice(field.selectionEnd);
   const lead = before && !/\s$/.test(before) ? ' ' : '';
@@ -18850,50 +18895,63 @@ function promptInserter() {
     field.value = before + lead + text + after;
     const caret = before.length + lead.length + text.length;
     field.setSelectionRange(caret, caret);
-    renderNewSessionForm();
+    field.dispatchEvent(new Event('input', { bubbles: true }));
   };
 }
 
-function togglePromptVoice() {
-  if (hub.can(HUB_DICTATE)) return toggleHubDictation();
-  if (promptVoice.rec) return promptVoice.rec.stop();
-  const field = document.getElementById('ns-prompt');
-  const btn = document.getElementById('ns-mic');
-  const insert = promptInserter();
+function toggleDictation(field, btn, onError) {
+  if (dictation?.btn !== btn) cancelDictation();
+  if (hub.can(HUB_DICTATE)) return toggleHubDictation(field, btn, onError);
+  if (dictation) return dictation.rec.stop();
+  const insert = fieldInserter(field);
   const rec = new SpeechRecognitionApi();
   rec.lang = navigator.language;
   rec.interimResults = true;
   rec.onresult = (e) => insert(Array.from(e.results, (r) => r[0].transcript).join(''));
   rec.onerror = (e) => {
     if (e.error === 'not-allowed' || e.error === 'service-not-allowed')
-      setNewSessionError('Microphone access is blocked for this page.');
-    else if (e.error !== 'no-speech' && e.error !== 'aborted') setNewSessionError(`Dictation failed: ${e.error}`);
+      onError('Microphone access is blocked for this page.');
+    else if (e.error !== 'no-speech' && e.error !== 'aborted') onError(`Dictation failed: ${e.error}`);
   };
   rec.onend = () => {
-    promptVoice.rec = null;
     btn.setAttribute('aria-pressed', 'false');
+    if (dictation?.rec === rec) dictation = null;
   };
-  promptVoice.rec = rec;
+  dictation = { btn, rec };
   btn.setAttribute('aria-pressed', 'true');
   field.focus();
   rec.start();
 }
 
 // Under a hub with voice on, the mic uses the hub's speech provider: the text arrives once, on the second click.
-async function toggleHubDictation() {
-  const btn = document.getElementById('ns-mic');
-  const op = promptVoice.hub ? 'stop' : 'start';
-  const insert = promptVoice.hub ?? promptInserter();
-  promptVoice.hub = op === 'start' ? insert : null;
-  btn.setAttribute('aria-pressed', String(op === 'start'));
-  document.getElementById('ns-prompt').focus();
-  const r = await hub.invoke(HUB_DICTATE, { op });
+async function toggleHubDictation(field, btn, onError) {
+  const running = dictation?.insert;
+  const insert = running ?? fieldInserter(field);
+  dictation = running ? null : { btn, insert };
+  btn.setAttribute('aria-pressed', String(!running));
+  field.focus();
+  const r = await hub.invoke(HUB_DICTATE, { op: running ? 'stop' : 'start' });
   if (!r.ok) {
-    promptVoice.hub = null;
+    if (dictation?.insert === insert) dictation = null;
     btn.setAttribute('aria-pressed', 'false');
-    return setNewSessionError(`Dictation failed: ${r.reason}`);
+    return onError(`Dictation failed: ${r.reason}`);
   }
-  if (op === 'stop' && r.text) insert(r.text);
+  if (running && r.text && field.isConnected) insert(r.text);
+}
+
+// Drops the running dictation without inserting text.
+function cancelDictation() {
+  if (!dictation) return;
+  const { btn, rec } = dictation;
+  dictation = null;
+  btn.setAttribute('aria-pressed', 'false');
+  if (rec) rec.abort();
+  else hub.invoke(HUB_DICTATE, { op: 'cancel' });
+}
+
+// For a field about to close or render again.
+function cancelDictationIn(root) {
+  if (dictation && root.contains(dictation.btn)) cancelDictation();
 }
 
 function pickFolderOption(i) {
@@ -18945,14 +19003,8 @@ function initNewSession() {
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model', 'ns-effort']) {
     document.getElementById(id).addEventListener('input', renderNewSessionForm);
   }
-  if (SpeechRecognitionApi) {
-    const mic = document.getElementById('ns-mic');
-    mic.hidden = false;
-    // mousedown would blur the textarea and lose the caret the dictation inserts at.
-    mic.addEventListener('mousedown', (e) => e.preventDefault());
-    mic.addEventListener('click', togglePromptVoice);
-  }
   const prompt = document.getElementById('ns-prompt');
+  addMic(prompt, setNewSessionError);
   const promptField = prompt.closest('.ns-prompt-field');
   prompt.addEventListener('paste', (e) => {
     const files = [...(e.clipboardData?.files || [])].filter((f) => f.type.startsWith('image/'));
@@ -19390,13 +19442,16 @@ hub.handle('session.open', (p) => p.session && openSessionFromOutside(p.session)
 hub.handle('session.find', (p) => findSessionFromHub(p));
 hub.handle('session.paste', (p) => pasteFromHub(p));
 hub.handle('task.add', (p) => addTaskFromHub(p));
+hub.handle('session.approve', () => answerWaitingFromHub('allow'));
+hub.handle('session.deny', (p) => answerWaitingFromHub('deny', p.message));
+hub.handle('session.next', () => nextNeedsYou());
 hub.handle('task.live', (p) => liveTaskFromHub(p));
 // After pending session.live calls, so the hub's clear of words typed into the terminal lands there, not in the dialog.
 hub.handle('session.new', (p) => {
-  hubNewSession = liveChain.then(() => newSessionFromHub(p)).catch(() => {});
+  hubNewSession = liveChain.then(() => newSessionFromHub(p)).catch((e) => console.error('[hub] session.new', e));
 });
 hub.handle('session.live', (p) => {
-  liveChain = liveChain.then(() => liveFromHub(p)).catch(() => {});
+  liveChain = liveChain.then(() => liveFromHub(p)).catch((e) => console.error('[hub] session.live', e));
 });
 
 // Action params are strings, so flags come as "true" and `args` as claude args split on spaces
@@ -19490,17 +19545,88 @@ function findSessionFromHub({ name }) {
   openSessionPicker({ query: name?.trim() ?? '', ranked: ranked.length ? ranked.map((r) => r.s) : null });
 }
 
+function answerWaitingFromHub(behavior, message) {
+  if (!isWaitingAnswerable()) return showToast('Nothing to answer on this session', 'info');
+  if (currentWaiting.kind === 'question') {
+    showWaitingDetail();
+    return showToast('Pick the answer on the card', 'info');
+  }
+  if (behavior === 'deny') return denyWaiting(message);
+  return respondWaiting({ behavior });
+}
+
+function needsYouQueue() {
+  const live = sessions.filter((s) => (!s.placeholder || trustWaiting.has(s.id)) && !dismissedSessionIds.has(s.id));
+  return [...live.filter(isWaitingSession), ...live.filter((s) => !isWaitingSession(s) && s.unread)];
+}
+
+function nextNeedsYou() {
+  const queue = needsYouQueue();
+  const next = queue[(queue.findIndex((s) => s.id === currentSessionId) + 1) % queue.length];
+  if (!next || next.id === currentSessionId) return showToast('No other session needs you', 'info');
+  if (terminalPaneFocused() || isShowCardFocused()) termState.focusNext = true;
+  return revealSession(next.id);
+}
+
+// voice.context tells the hub's voice help what fits now: the open session's ask as the title, and per
+// action false to hide its row or a help text. The agent footer renders every second, so the ask is
+// parsed once per marker.
+let publishedVoiceContext = '';
+let askTitle = { id: null, title: null };
+
+function waitingTitle() {
+  if (!isWaitingAnswerable() || currentWaiting.kind === 'question') return null;
+  if (askTitle.id === currentWaiting.id) return askTitle.title;
+  const tool = currentWaiting.toolName || 'unknown';
+  const detail = deriveWaitingDetail(tool, parseWaitingInput());
+  const title = isPlanAsk(currentWaiting.kind, tool)
+    ? detail || getWaitingPill(currentWaiting.kind, tool)
+    : `${tool} ${detail}`.trim();
+  askTitle = { id: currentWaiting.id, title };
+  return title;
+}
+
+function publishVoiceContext() {
+  const title = waitingTitle();
+  const answerable = !!title;
+  const others = needsYouQueue().filter((s) => s.id !== currentSessionId).length;
+  const payload = {
+    title,
+    rows: {
+      'session.approve': answerable,
+      'session.deny': answerable,
+      'session.next': others > 0 && `${others} more ${others === 1 ? 'needs' : 'need'} you`,
+    },
+  };
+  const json = JSON.stringify(payload);
+  if (json === publishedVoiceContext) return;
+  publishedVoiceContext = json;
+  hub.publish('voice.context', payload);
+}
+
 // Voice while the New session dialog is open is dictation into its prompt; Enter on Start sends it.
 function voiceIntoNewSession(text) {
-  promptInserter()(text.trim());
+  fieldInserter(document.getElementById('ns-prompt'))(text.trim());
   if (ns.folder) document.getElementById('ns-start').focus();
 }
 
-// The hub's voice control sends dictated text here; with no session named, it goes to the one on screen.
+// The hub's voice control sends dictated text here; with no session named, it goes to the one on screen,
+// else to the open session when its terminal runs behind the board or a pane.
 const newSessionOpen = () => document.getElementById('new-session-modal').classList.contains('visible');
-const hubTargetSession = (session) => session || (viewMode === 'session' && termState.shown && termState.sessionId);
+const hubTargetSession = (session) =>
+  session ||
+  (viewMode === 'session' &&
+    (termState.shown ? termState.sessionId : runningTerminals.has(currentSessionId) && currentSessionId));
 const noSessionToast = (text) =>
   showToast('No session on screen', 'info', { label: 'Copy', onClick: () => copyText(text, 'text') }, text);
+function typedInBackgroundToast(id) {
+  if (termState.shown && termState.sessionId === id) return;
+  const s = sessions.find((x) => x.id === id);
+  showToast(`Typed into ${s ? sessionDisplayName(s) : id.slice(0, 8)}`, 'success', {
+    label: 'Show',
+    onClick: () => showSessionTerminal(id),
+  });
+}
 
 async function pasteFromHub({ session, text, submit }) {
   if (!text) return;
@@ -19511,7 +19637,8 @@ async function pasteFromHub({ session, text, submit }) {
     text,
     submit: submit === 'true',
   });
-  if (!res.ok) showToast((await res.json().catch(() => ({}))).error || `Paste failed (${res.status})`, 'error');
+  if (res.ok) typedInBackgroundToast(id);
+  else showToast((await res.json().catch(() => ({}))).error || `Paste failed (${res.status})`, 'error');
 }
 
 // session.live: one key hold sends the words so far many times, then once with final. Calls run in
@@ -19538,9 +19665,9 @@ async function liveFromHub({ session, text, final, submit, cancel }) {
   const hold = liveText;
   if (done) liveText = { insert: null, typed: '', at: 0 };
   if (!session && newSessionOpen()) {
-    hold.insert ??= promptInserter();
-    hold.insert(text.trim());
     const prompt = document.getElementById('ns-prompt');
+    hold.insert ??= fieldInserter(prompt);
+    hold.insert(text.trim());
     prompt.scrollTop = prompt.scrollHeight;
     setNewSessionVoice(!done);
     if (cancel === 'close') closeNewSession();
@@ -19557,18 +19684,24 @@ async function liveFromHub({ session, text, final, submit, cancel }) {
     text,
     submit: done && submit === 'true',
   });
-  if (res.ok) hold.typed = text;
-  else if (done) showToast((await res.json().catch(() => ({}))).error || `Typing failed (${res.status})`, 'error');
+  if (res.ok) {
+    hold.typed = text;
+    if (done && text) typedInBackgroundToast(id);
+  } else if (done) showToast((await res.json().catch(() => ({}))).error || `Typing failed (${res.status})`, 'error');
 }
 
 // session.changed goes out once the switch settles, so arrowing through the list sends one event.
+// voice.context shares the timer; each publisher skips a payload it already sent.
 let publishTimer = 0;
 let publishedSessionId;
 let cliOpenedId = null;
 
-function schedulePublishSession() {
+function schedulePublish() {
   clearTimeout(publishTimer);
-  publishTimer = setTimeout(publishSession, 150);
+  publishTimer = setTimeout(() => {
+    publishSession();
+    publishVoiceContext();
+  }, 150);
 }
 
 function publishSession() {
@@ -19663,3 +19796,22 @@ hub.subscribe('project.changed', (p) => {
   filterByProject(dirPath);
 });
 // #endregion HUB_INTEGRATION
+
+// #region MOD_SURFACE
+// Hub mods change the board through the names in mod-surface.json (docs/hub-contract.md, Mods).
+// With no mod installed, or an older hub's SDK that has no ClaudeHub.mod, the renders stay unwrapped.
+if (ClaudeHub.mod?.list.length) {
+  for (const [name, event] of [
+    ['renderSessions', 'sessions.rendered'],
+    ['renderKanban', 'board.rendered'],
+    ['renderActivityChip', 'activity.rendered'],
+  ]) {
+    const render = window[name];
+    window[name] = function emitAfterRender(...args) {
+      const out = render.apply(this, args);
+      ClaudeHub.mod.emit(event, out);
+      return out;
+    };
+  }
+}
+// #endregion MOD_SURFACE

package/public/index.html

@@ -65,7 +65,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
   <div class="app">
     <!-- Sidebar -->
-    <aside class="sidebar">
+    <aside class="sidebar" data-hub-part="sidebar">
       <header class="sidebar-header">
         <div id="activity-chips" class="activity-chips"></div>
         <button id="new-session-btn" class="new-session-pill" onclick="openNewSession()" title="New session (Ctrl+Alt+N)" hidden>+ New</button>
@@ -185,7 +185,7 @@
             </button>
           </div>
         </div>
-        <div id="sessions-list" class="sessions-list" aria-busy="true">
+        <div id="sessions-list" class="sessions-list" data-hub-part="sessions" aria-busy="true">
           <div class="session-skeleton"><span></span><span></span></div>
           <div class="session-skeleton"><span></span><span></span></div>
           <div class="session-skeleton"><span></span><span></span></div>
@@ -193,7 +193,7 @@
         </div>
       </div>
 
-      <div class="sidebar-footer" id="sidebar-footer"></div>
+      <div class="sidebar-footer" id="sidebar-footer" data-hub-part="sidebar-footer"></div>
       <div class="sidebar-resize-handle" id="sidebar-resize"></div>
     </aside>
 
@@ -224,7 +224,7 @@
         </div>
         <div class="idle-glow" aria-hidden="true"><span></span><span></span></div>
         <div class="idle-content">
-          <div class="idle-clawd" aria-hidden="true">
+          <div class="idle-clawd" data-hub-part="idle-mascot" aria-hidden="true">
             <svg class="clawd" viewBox="1 0 16 10" shape-rendering="crispEdges"><use href="#clawd-shape"/></svg>
           </div>
           <p class="idle-title">Select a session to view tasks</p>
@@ -240,8 +240,8 @@
           </div>
           <div class="view-actions">
             <div class="view-progress">
-              <div class="progress-bar">
-                <div id="progress-bar" class="progress-fill" style="width: 0%"></div>
+              <div class="progress-bar" data-hub-part="progress">
+                <div id="progress-bar" class="progress-fill" data-hub-part="progress-fill" style="width: 0%"></div>
               </div>
               <span id="progress-percent" class="progress-text">0% done</span>
             </div>
@@ -314,7 +314,7 @@
 
         <div id="pane-split" class="pane-split">
         <div id="board-side" class="board-side">
-        <div class="kanban" id="main-content">
+        <div class="kanban" id="main-content" data-hub-part="board">
           <div id="owner-filter-bar" class="owner-filter-bar">
             <select id="owner-filter" class="filter-dropdown" onchange="filterByOwner(this.value)" aria-label="Filter by team member">
               <option value="">All Members</option>
@@ -341,7 +341,7 @@
           <div class="kanban-column" aria-label="Completed tasks">
             <div class="column-header">
               <span class="column-dot completed"></span>
-              <span class="column-title completed">Completed</span>
+              <span class="column-title completed" data-hub-part="done-title">Completed</span>
               <span id="completed-count" class="column-count completed">0</span>
             </div>
             <div id="completed-tasks" class="column-tasks" role="list" data-status="completed" ondragover="onColumnDragOver(event)" ondragleave="onColumnDragLeave(event)" ondrop="onColumnDrop(event)"></div>
@@ -841,11 +841,8 @@
         </div>
         <div class="ns-row ns-extra">
           <label class="ns-label" for="ns-prompt">Prompt</label>
-          <div class="ns-field ns-prompt-field">
+          <div class="ns-field ns-prompt-field mic-field">
             <textarea id="ns-prompt" class="form-input" rows="4" placeholder="Optional. Sent as the first message. Paste or drop images to attach."></textarea>
-            <button type="button" id="ns-mic" class="ns-mic" title="Dictate" aria-label="Dictate" aria-pressed="false" hidden>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg>
-            </button>
             <div id="ns-images" class="ns-images" hidden></div>
           </div>
         </div>

package/public/style.css

@@ -8829,6 +8829,12 @@ body.light .msg-assistant .msg-text {
   border-radius: 5px;
 }
 
+.shortcuts .sc-say {
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
 .shortcuts .sc-plus,
 .shortcuts .sc-or {
   color: var(--text-muted);
@@ -9108,7 +9114,7 @@ select.form-input option:checked {
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }
 
-#review-pop textarea,
+.review-pop-input,
 .review-card-edit {
   width: 100%;
   box-sizing: border-box;
@@ -9183,8 +9189,9 @@ select.form-input option:checked {
   gap: 6px;
 }
 
-#review-pop button,
-.review-panel button {
+/* :where() keeps the specificity as it was, so the button.review-* rules above still win. */
+#review-pop button:not(:where(.mic-btn)),
+.review-panel button:not(:where(.mic-btn)) {
   padding: 3px 10px;
   font: inherit;
   color: var(--text-primary);
@@ -9807,15 +9814,15 @@ select.form-input option:checked {
   max-height: 50vh;
 }
 
-.ns-prompt-field {
+.mic-field {
   position: relative;
 }
 
-.ns-prompt-field:has(.ns-mic:not([hidden])) textarea {
+.mic-field:has(.mic-btn) textarea {
   padding-right: 36px;
 }
 
-.ns-mic {
+.mic-btn {
   position: absolute;
   top: 6px;
   right: 6px;
@@ -9832,33 +9839,29 @@ select.form-input option:checked {
   cursor: pointer;
 }
 
-.ns-mic[hidden] {
-  display: none;
-}
-
-.ns-mic svg {
+.mic-btn svg {
   width: 15px;
   height: 15px;
 }
 
-.ns-mic:hover {
+.mic-btn:hover {
   color: var(--text-primary);
   background: var(--bg-hover);
 }
 
-.ns-mic[aria-pressed='true'] {
+.mic-btn[aria-pressed='true'] {
   color: var(--danger);
-  animation: ns-mic-pulse 1.2s ease-in-out infinite;
+  animation: mic-pulse 1.2s ease-in-out infinite;
 }
 
-@keyframes ns-mic-pulse {
+@keyframes mic-pulse {
   50% {
     opacity: 0.45;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ns-mic[aria-pressed='true'] {
+  .mic-btn[aria-pressed='true'] {
     animation: none;
   }
 }
@@ -10754,49 +10757,6 @@ pre.mermaid[data-mermaid-error]::before {
 /* #endregion */
 
 /* #region ANIMATIONS */
-/* No `to` and fill backwards: the card ends on its own opacity (.completed, .dim), not on 1. */
-@keyframes fadeSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-}
-
-.column-tasks .task-card {
-  animation: fadeSlideIn 150ms ease-out backwards;
-}
-
-.column-tasks .task-card:nth-child(1) {
-  animation-delay: 0ms;
-}
-.column-tasks .task-card:nth-child(2) {
-  animation-delay: 30ms;
-}
-.column-tasks .task-card:nth-child(3) {
-  animation-delay: 60ms;
-}
-.column-tasks .task-card:nth-child(4) {
-  animation-delay: 90ms;
-}
-.column-tasks .task-card:nth-child(5) {
-  animation-delay: 120ms;
-}
-.column-tasks .task-card:nth-child(6) {
-  animation-delay: 150ms;
-}
-.column-tasks .task-card:nth-child(7) {
-  animation-delay: 180ms;
-}
-.column-tasks .task-card:nth-child(8) {
-  animation-delay: 210ms;
-}
-.column-tasks .task-card:nth-child(9) {
-  animation-delay: 240ms;
-}
-.column-tasks .task-card:nth-child(10) {
-  animation-delay: 270ms;
-}
-
 /* Connection status breathing */
 @keyframes breathe {
   0%,
@@ -11135,7 +11095,8 @@ pre.mermaid[data-mermaid-error]::before {
   outline-offset: -1px;
 }
 
-.session-group-header.sg-zen {
+.session-group-header.sg-zen,
+.project-group-header.sg-zen {
   color: var(--accent-text);
 }
 

package/public/vendor/claude-hub-sdk.js

@@ -1,4 +1,4 @@
-// claude-hub-sdk 1.9.0 (sha256 537745aa3415). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
+// claude-hub-sdk 1.11.0 (sha256 841f6c771631). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
 // Claude Code Hub SDK: the one rule that names a key press, shared by the hub page, client.js and
 // stub.js. The hub serves it to its page as /sdk/keys.js; mount() and sdk:sync put it in front of
 // client.js and stub.js, so an app still loads one file.
@@ -94,6 +94,7 @@ if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys
         forwards: () => false,
         forwardCombos: () => [],
         keyLabel: () => null,
+        voiceCommands: () => [],
         closeGuard() {},
         openExternal(url) {
           win.open(url, '_blank', 'noopener');
@@ -103,7 +104,8 @@ if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys
       return hub;
     }
 
-    return { connect, comboOf };
+    const mod = { list: [], wrap: () => false, on: () => off, emit() {}, send: () => false };
+    return { connect, comboOf, mod };
   }
 
   if (typeof module === 'object' && module.exports) module.exports = { createClaudeHub, comboOf };