claude-code-kanban 4.31.1 → 5.0.0

package/public/app.js

@@ -74,6 +74,8 @@ let agentPollInterval = null;
 // Inside the hub an inactive app is a display:none iframe whose document.hidden stays false,
 // so the hub tells us via hub:active. Standalone, or if that message is lost, cck stays active.
 let hubActive = true;
+// setupEventSource runs before HUB_INTEGRATION connects, so it hands its handler over here.
+let onHubActive = () => {};
 let missedWhileHidden = false;
 const isOnScreen = () => hubActive && !document.hidden;
 function skipOffScreen() {
@@ -182,6 +184,7 @@ function updateUrl() {
   history.replaceState(null, '', url);
   persistLastView();
   syncTerminal();
+  schedulePublishSession();
 }
 
 const LAST_VIEW_KEY = 'lastView';
@@ -286,8 +289,10 @@ async function fetchSessions(includeTasks = true) {
     if (sessionsHash !== lastSessionsHash) {
       lastSessionsHash = sessionsHash;
       sessions = mergePlaceholders(newSessions);
+      markOpenSessionRead();
       renderSessions();
       renderActivityChip();
+      schedulePublishSession();
     }
     // A list too short to scroll gives no scroll event, so fill it until it can scroll.
     if (sessionsHasMore) setTimeout(loadMoreIfNearEnd);
@@ -298,6 +303,21 @@ async function fetchSessions(includeTasks = true) {
   }
 }
 
+// The Stop hook leaves _stop.json when a session ends its turn; deleting it marks the session read.
+function markSessionRead(sessionId) {
+  const session = sessions.find((s) => s.id === sessionId);
+  if (!session?.unread) return;
+  session.unread = false;
+  document.querySelector(`.session-item[data-session-id="${CSS.escape(sessionId)}"]`)?.classList.remove('unread');
+  fetch(`/api/sessions/${encodeURIComponent(sessionId)}/read`, { method: 'POST' }).catch((e) =>
+    console.error('[markSessionRead]', e),
+  );
+}
+
+function markOpenSessionRead() {
+  if (currentSessionId && viewMode === 'session' && isOnScreen()) markSessionRead(currentSessionId);
+}
+
 async function loadSearchTasks() {
   const newTasks = await fetch('/api/tasks/all').then((r) => r.json());
   const tasksHash = JSON.stringify(newTasks);
@@ -430,25 +450,24 @@ function isSessionLive(s) {
 const ACTIVITY_PREDICATES = {
   waiting: isWaitingSession,
   active: isActiveSession,
+  terminal: (s) => runningTerminals.has(s.id),
 };
 
-let lastChipKey = '';
+let lastChipHtml = '';
 
 function renderActivityChip() {
   const container = document.getElementById('activity-chips');
   if (!container) return;
 
-  let waiting = 0;
-  let active = 0;
+  const counts = { waiting: 0, active: 0, terminal: 0 };
   for (const s of sessions) {
     if (dismissedSessionIds.has(s.id)) continue;
-    if (s.hasWaitingForUser) waiting++;
-    else if (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents) active++;
+    for (const kind in counts) if (ACTIVITY_PREDICATES[kind](s)) counts[kind]++;
   }
-
-  const key = `${waiting}|${active}|${dismissedSessionIds.size}|${[...activityFilter].sort().join(',')}`;
-  if (key === lastChipKey) return;
-  lastChipKey = key;
+  const { waiting, active, terminal: terminals } = counts;
+  const showTerminals = terminalAvailable();
+  const maxTerminals = appConfig.terminal?.maxSessions;
+  const nearCap = showTerminals && runningTerminals.size >= maxTerminals * 0.8;
 
   const chips = [
     {
@@ -464,14 +483,27 @@ function renderActivityChip() {
       title: `${active} session${active === 1 ? '' : 's'} with running work or recent activity`,
     },
   ];
+  if (showTerminals) {
+    chips.push({
+      kind: 'terminal',
+      count: terminals,
+      label: nearCap ? `${runningTerminals.size}/${maxTerminals}` : `${terminals}`,
+      title: nearCap
+        ? `${runningTerminals.size} of ${maxTerminals} terminals open; end some to start more`
+        : `${terminals} session${terminals === 1 ? '' : 's'} running in a terminal here`,
+      icon: ICON_TERMINAL,
+      warn: nearCap,
+    });
+  }
 
-  container.innerHTML = chips
+  const html = chips
     .map((c) => {
       const isOn = activityFilter.has(c.kind);
       const classes = [
         'activity-chip',
         `activity-${c.kind}`,
-        c.count === 0 ? 'activity-zero' : '',
+        c.count === 0 && !c.warn ? 'activity-zero' : '',
+        c.warn ? 'activity-warn' : '',
         isOn ? 'activity-filter-on' : '',
       ]
         .filter(Boolean)
@@ -483,12 +515,15 @@ function renderActivityChip() {
           onclick="setActivityFilter('${escAttrJs(c.kind)}')"
           aria-pressed="${isOn ? 'true' : 'false'}"
           title="${escapeHtml(c.title + hint)}">
-          <span class="activity-dot"></span>
+          ${c.icon ? `<span class="activity-icon">${c.icon}</span>` : '<span class="activity-dot"></span>'}
           <span class="activity-label">${escapeHtml(c.label)}</span>
         </button>
       `;
     })
     .join('');
+  if (html === lastChipHtml) return;
+  lastChipHtml = html;
+  container.innerHTML = html;
 }
 
 function toggleActivityKind(kind) {
@@ -524,6 +559,7 @@ let lastCurrentTasksHash = '';
 
 async function fetchTasks(sessionId) {
   try {
+    const refresh = viewMode === 'session' && sessionId === currentSessionId;
     viewMode = 'session';
     document.getElementById('message-toggle')?.style.removeProperty('display');
     const res = await fetch(`/api/sessions/${sessionId}`);
@@ -532,9 +568,7 @@ async function fetchTasks(sessionId) {
     const newTasks = await res.json();
 
     const hash = JSON.stringify(newTasks);
-    if (sessionId === currentSessionId && hash === lastCurrentTasksHash) {
-      return;
-    }
+    if (sessionId === currentSessionId && hash === lastCurrentTasksHash) return;
     lastCurrentTasksHash = hash;
 
     currentTasks = newTasks;
@@ -548,18 +582,24 @@ async function fetchTasks(sessionId) {
     if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
       revealedStorageSessionId = null;
     }
-    if (currentSessionId && currentSessionId !== sessionId) deferredPinPlacement.delete(currentSessionId);
+    if (currentSessionId && currentSessionId !== sessionId && deferredPinPlacement.delete(currentSessionId))
+      expandPinnedFor(currentSessionId);
     if (lastSessionId !== sessionId) setSwapPair(sessionId, lastSessionId);
     const switched = sessionId !== currentSessionId;
     currentSessionId = sessionId;
+    markOpenSessionRead();
     if (switched) autoRevealLog(sessionId, newTasks.length === 0);
-    currentPins = loadPins(sessionId);
-    ownerFilter = '';
-    resetMessageScrollState();
-    for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
-    for (const k of Object.keys(teamColorMap)) delete teamColorMap[k];
-    sessionJustSelected = true;
-    resetAgentState();
+    // A task change in the open session must not reset the messages, the agents or the owner
+    // filter: that reset rebuilds the panels and reads as a reload after each card move.
+    if (!refresh) {
+      currentPins = loadPins(sessionId);
+      ownerFilter = '';
+      resetMessageScrollState();
+      for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
+      for (const k of Object.keys(teamColorMap)) delete teamColorMap[k];
+      sessionJustSelected = true;
+      resetAgentState();
+    }
     updateUrl();
     renderSession();
     renderSessions();
@@ -1913,6 +1953,7 @@ function toggleSessionPin(sessionId) {
   } else {
     pinnedSessionIds.add(sessionId);
     if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
+    expandPinnedFor(sessionId);
   }
   savePinnedSessions();
   offloadSessionPin(sessionId);
@@ -1951,6 +1992,7 @@ function handleSessionPinEvent({ id, state }) {
     pinnedSessionIds.add(id);
     stickySessionIds.add(id);
   }
+  expandPinnedFor(id);
   savePinnedSessions();
   renderSessions();
 }
@@ -2411,6 +2453,10 @@ function showToast(msg, type, action) {
   _toastTimer = setTimeout(hide, action ? 8000 : 2000);
 }
 
+function sendMessageAddress(peerName) {
+  return `SendMessage(${peerName})`;
+}
+
 async function copyWithFeedback(text, btn) {
   if (btn.dataset.copying) return;
   try {
@@ -3296,7 +3342,7 @@ function getFilteredSessions() {
     // Skip pinned sessions — they are prepended separately below (lines ~2180) to preserve stable position.
     const filteredIds = new Set(filteredSessions.map((s) => s.id));
     for (const id of [revealedPlanSessionId, revealedStorageSessionId, currentSessionId]) {
-      if (id && !filteredIds.has(id) && !isAnyPinned(id)) {
+      if (id && !filteredIds.has(id) && !(isAnyPinned(id) && activityFilter.size === 0)) {
         const session = sessions.find((s) => s.id === id);
         if (session) {
           const insertAt = filteredSessions.findIndex((s) => s.modifiedAt < session.modifiedAt);
@@ -3315,7 +3361,9 @@ function getFilteredSessions() {
 
   if (activityFilter.size > 0) {
     const preds = [...activityFilter].map((k) => ACTIVITY_PREDICATES[k]).filter(Boolean);
-    if (preds.length) filteredSessions = filteredSessions.filter((s) => preds.some((p) => p(s)));
+    if (preds.length) {
+      filteredSessions = filteredSessions.filter((s) => s.id === currentSessionId || preds.some((p) => p(s)));
+    }
   }
 
   if (searchQuery) {
@@ -3446,9 +3494,14 @@ function renderSessions() {
     const bookmarksCount = loadPins(session.id).length;
     const hasScratchpad = _hasScratchpad(_sessionScratchpadKey(session.id));
     const tempClass = session.hasRecentLog || session.inProgress || session.hasWaitingForUser ? 'warm' : 'stale';
+    // Open tasks keep an idle session warm, but the green dot is for a session that is working.
+    const idleClass =
+      tempClass === 'warm' && !session.hasWaitingForUser && !session.hasRecentLog && !session.hasRunningAgents
+        ? 'idle'
+        : '';
     const sid = escAttrJs(session.id);
     return `
-          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${tempClass} ${showCtx ? 'has-context' : ''}" title="${escapeHtml(tooltip)}">
+          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${session.unread ? 'unread' : ''} ${tempClass} ${idleClass} ${showCtx ? 'has-context' : ''}" title="${escapeHtml(tooltip)}">
             <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>
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
@@ -3506,12 +3559,13 @@ function renderSessions() {
     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 sectionHtml = (key, text, ungroup, body, empty = false) => {
     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 emptyCls = empty ? ' sg-section-empty' : '';
+    return `<div class="sg-section-label sg-section-toggle${ungroup ? ' sg-ungroup-zone' : ''}${collapsed ? ' collapsed' : ''}${emptyCls}" data-group-path="${escPath}" title="${escapeHtml(title)}">${groupChevronSvg(10)}<span>${text}</span></div>
+      <div class="sg-section-body${collapsed ? ' collapsed' : ''}${emptyCls}" data-group-path="${escPath}">${body}</div>`;
   };
 
   const renderGroupSessions = (sessions, pinKey) => {
@@ -3521,7 +3575,7 @@ function renderSessions() {
     const gIdlePinned = gPinned.filter((s) => !isSessionActive(s));
     const gUnpinned = sessions.filter((s) => !isPlacedPinned(s.id) || isSessionActive(s) || isPlacedSticky(s.id));
     const pinCollapsed = collapsedProjectGroups.has(pinKey);
-    if (gIdlePinned.length === 0 && !pinCollapsed) return gUnpinned.map(renderSessionCard).join('');
+    if (gIdlePinned.length === 0) return gUnpinned.map(renderSessionCard).join('');
     return (
       '<div class="pinned-sub-section">' +
       '<div class="pinned-sub-header' +
@@ -3732,14 +3786,15 @@ function renderSessions() {
       }
     }
 
-    html += sectioned ? sectionHtml(SECTION_PROJECTS, 'Projects', true, projectsHtml) : projectsHtml;
+    const noProjects = sortedGroups.length === 0 && ungrouped.length === 0;
+    html += sectioned ? sectionHtml(SECTION_PROJECTS, 'Projects', true, projectsHtml, noProjects) : projectsHtml;
 
     sessionsList.innerHTML = html;
   } else {
     const sectioned = sessionGroups.length > 0 || transientGroups.size > 0;
     const restHtml =
       sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).join('');
-    const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml) : restHtml;
+    const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
     sessionsList.innerHTML = html + sgSectionHtml(true) + tail;
   }
 
@@ -3788,8 +3843,7 @@ function renderSession() {
   // happened to open the info modal or zen panel.
   loadSessionPads(currentSessionId);
 
-  const displayName =
-    session.customTitle || session.name || session.gitBranch || session.description || currentSessionId;
+  const displayName = session.name || session.description || currentSessionId;
 
   sessionTitle.textContent = displayName;
 
@@ -3842,8 +3896,17 @@ function renderProjectView() {
   renderSessions();
 }
 
+// Claude Code keeps a blocker's id in blockedBy after the blocker completes.
+function openBlockers(task) {
+  const list = (t) => t.sessionId || t._taskDir;
+  return (task.blockedBy || []).filter(
+    (id) => currentTasks.find((t) => t.id === id && list(t) === list(task))?.status !== 'completed',
+  );
+}
+
 function renderTaskCard(task) {
-  const isBlocked = task.blockedBy && task.blockedBy.length > 0;
+  const blockers = openBlockers(task);
+  const isBlocked = blockers.length > 0;
   const useSlug = viewMode === 'project';
   const taskId = useSlug ? `${(task._taskDir || task.sessionId || '')?.slice(0, 4)}-${task.id}` : task.id;
   const statusClass = task.status.replace('_', '-');
@@ -3877,7 +3940,7 @@ function renderTaskCard(task) {
           </div>
           <div class="task-title">${escapeHtml(task.subject)}</div>
           ${task.status === 'in_progress' && task.activeForm ? `<div class="task-active">${escapeHtml(task.activeForm)}</div>` : ''}
-          ${isBlocked ? `<div class="task-blocked">Waiting on ${task.blockedBy.map((id) => `#${id}`).join(', ')}</div>` : ''}
+          ${isBlocked ? `<div class="task-blocked">Waiting on ${blockers.map((id) => `#${id}`).join(', ')}</div>` : ''}
           ${task.description ? `<div class="task-desc">${escapeHtml(task.description.split('\n')[0])}</div>` : ''}
         </div>
       `;
@@ -3960,7 +4023,7 @@ function renderKanban() {
   // 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)">${plusIcon}<span>Add task</span></button>`
+      ? `<button type="button" class="column-add${pending.length ? '' : ' empty'}" onclick="startAddTask(this)" title="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([
       pendingTasks,
@@ -4143,17 +4206,21 @@ async function onColumnDrop(e) {
     (t) => t.id === taskId && (t._taskDir === sessionId || (t.sessionId || currentSessionId) === sessionId),
   );
   if (!task || task.status === newStatus) return;
+  const oldStatus = task.status;
+  task.status = newStatus;
+  renderKanban();
   try {
     const res = await fetch(`/api/tasks/${sessionId}/${taskId}`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ status: newStatus }),
     });
-    if (res.ok) {
-      task.status = newStatus;
-      renderKanban();
-    }
+    if (res.ok) return;
   } catch (_) {}
+  if (task.status === newStatus) {
+    task.status = oldStatus;
+    renderKanban();
+  }
 }
 
 //#endregion
@@ -4899,6 +4966,7 @@ function getNavigableItems() {
   // into the body to reach the blocks inside.
   const walkTopLevel = (children) => {
     for (const el of children) {
+      if (el.classList.contains('sg-section-empty')) continue;
       if (
         el.classList.contains('project-group-header') ||
         el.classList.contains('session-group-header') ||
@@ -5007,14 +5075,11 @@ function expandActiveGroups({ onlyNew = false } = {}) {
 // it (pinned, not sticky, idle — see renderGroupSessions), and — since which section holds it
 // depends on the view — every section header. Returns whether anything changed.
 function uncollapseFor(session) {
-  const project = session.project || '__ungrouped__';
   const group = sgGroupForSession(session);
-  const inPinned = isPlacedPinned(session.id) && !isPlacedSticky(session.id) && !isSessionActive(session);
   const keys = [
-    project,
-    inPinned && pinKey(project),
+    session.project || '__ungrouped__',
+    ...pinnedCollapseKeys(session),
     group && sgKey(group.id),
-    group && inPinned && `__pinned_group_${group.id}__`,
     SECTION_GROUPS,
     SECTION_PROJECTS,
     SECTION_SESSIONS,
@@ -5026,6 +5091,24 @@ function uncollapseFor(session) {
   return changed;
 }
 
+function pinnedCollapseKeys(session) {
+  if (!isPlacedPinned(session.id) || isPlacedSticky(session.id) || isSessionActive(session)) return [];
+  const group = sgGroupForSession(session);
+  const host = sgHostOf(group, session);
+  return [pinKey(session.project || '__ungrouped__'), host && pinKey(host), group && `__pinned_group_${group.id}__`];
+}
+
+// A card that moves into a collapsed Pinned sub-section would vanish from under the click.
+function expandPinnedFor(sessionId) {
+  const session = sessions.find((s) => s.id === sessionId);
+  if (!session) return;
+  let changed = false;
+  for (const key of pinnedCollapseKeys(session)) {
+    if (key && collapsedProjectGroups.delete(key)) changed = true;
+  }
+  if (changed) persistCollapsedGroups();
+}
+
 function isGroupHeader(el) {
   return el.matches(COLLAPSIBLE_HEADER_SELECTOR);
 }
@@ -5088,7 +5171,7 @@ function activateSelectedSession(items) {
   }
 }
 
-function setFocusZone(zone) {
+function setFocusZone(zone, target) {
   clearKbSelection();
   clearTaskSelection();
 
@@ -5097,8 +5180,11 @@ function setFocusZone(zone) {
     expandSidebar();
     const items = getNavigableItems();
     if (items.length > 0) {
+      const targetIdx = target ? items.indexOf(target) : -1;
       const activeIdx = items.findIndex((el) => el.classList.contains('active'));
-      if (activeIdx >= 0) {
+      if (targetIdx >= 0) {
+        selectSessionByIndex(targetIdx, items);
+      } else if (activeIdx >= 0) {
         selectSessionByIndex(activeIdx);
       } else if (selectedSessionKbId) {
         const restoredIdx = items.findIndex((el) => getKbId(el) === selectedSessionKbId);
@@ -5129,6 +5215,18 @@ function setFocusZone(zone) {
   }
 }
 
+// A pointer click puts the keyboard cursor on the row, unless a task card or the terminal holds it.
+// Enter's el.click() arrives with detail 0 and already has the cursor.
+sessionsList.addEventListener('click', (e) => {
+  if (e.detail === 0 || e.target.closest(SG_ACTION_SELECTOR)) return;
+  const el = e.target.closest(
+    '.session-item, .project-group-header, .session-group-header, .pinned-sub-header, .sg-section-toggle',
+  );
+  if (!el) return;
+  const taskInUse = selectedTaskId && selectedSessionId === (el.dataset.sessionId || currentSessionId);
+  if (focusZone === 'sidebar' || (!taskInUse && !terminalPaneFocused())) setFocusZone('sidebar', el);
+});
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function getAvailableTasksOptions(currentTaskId = null) {
   const pending = currentTasks.filter((t) => t.status === 'pending' && t.id !== currentTaskId);
@@ -5198,7 +5296,8 @@ async function showTaskDetail(taskId, sessionId = null) {
     pending: '<span class="detail-status pending"><span class="dot"></span>Pending</span>',
   };
 
-  const isBlocked = task.blockedBy && task.blockedBy.length > 0;
+  const blockers = openBlockers(task);
+  const isBlocked = blockers.length > 0;
   const actualSessionId = task.sessionId || sessionId || currentSessionId;
 
   detailContent.innerHTML = `
@@ -5231,12 +5330,12 @@ async function showTaskDetail(taskId, sessionId = null) {
         }
 
         ${
-          task.blockedBy && task.blockedBy.length > 0
+          isBlocked
             ? `
         <div class="detail-section">
           <div class="detail-label">Blocked By</div>
           <div class="detail-deps">
-            <div class="detail-box blocked"><strong>Blocked by:</strong> ${task.blockedBy.map((id) => `#${id}`).join(', ')}</div>
+            <div class="detail-box blocked"><strong>Blocked by:</strong> ${blockers.map((id) => `#${id}`).join(', ')}</div>
           </div>
         </div>`
             : ''
@@ -5495,147 +5594,219 @@ 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: ['↓'], label: 'Next item' },
-        { keys: ['↑'], label: 'Previous item' },
-        { keys: ['←'], label: 'Left column / collapse group' },
-        { keys: ['→'], 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: ['Ctrl', 'Shift', 'P'], combo: true, label: 'Session picker' },
-        { keys: ['I'], label: 'Session info' },
-        { keys: ['.'], label: 'Pin / unpin' },
-        { keys: ['>'], label: 'Toggle sticky' },
-        { keys: ['Shift', 'F10'], combo: true, label: 'Move to group (or Menu key)' },
-        { 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: ['↑', '↓'], label: 'Previous / next message in detail' },
-        { keys: ['Ctrl', 'Enter'], combo: true, label: 'Allow / approve the waiting prompt' },
-      ],
-    },
-  ],
-  [
-    {
-      title: 'Board',
-      rows: [
-        { keys: ['Enter'], label: 'Toggle task detail panel' },
-        { keys: ['D'], label: 'Delete selected task' },
-        { keys: ['N'], label: 'Toggle scratchpad (in the sidebar: the item under the cursor)' },
-        { 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', 'Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
-        { 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' },
-      ],
-    },
-  ],
-  [
-    {
-      title: 'Terminal',
-      rows: [
-        { keys: ['Ctrl', '`'], combo: true, label: 'Show / hide terminal' },
-        { keys: ['Alt', '`'], combo: true, label: 'Focus terminal / page' },
-        { keys: ['Alt', 'Shift', '`'], combo: true, label: 'End and close terminal' },
-        { keys: ['Ctrl', 'Shift', '`'], combo: true, label: 'All terminals' },
-        { keys: ['Ctrl', '+/−/0'], combo: true, label: 'Terminal text size' },
-      ],
-    },
-    {
-      title: 'Sessions',
-      rows: [
-        { keys: ['Ctrl', 'Alt', 'N'], combo: true, label: 'New session' },
-        { keys: ['Ctrl', 'Alt', 'R'], combo: true, label: 'Resume session (claude -r)' },
-        { keys: ['Ctrl', 'Alt', 'S'], combo: true, label: 'Swap to previous session' },
-      ],
-    },
-  ],
+// Each tab shows its groups two to a row; a pair shares grid rows, so the two headings sit level and
+// the shorter group leaves empty rows. `combo` joins the keys with a plus (a chord) instead of
+// listing them as alternatives. The `hub` tab only works inside Claude Code Hub.
+const SHORTCUT_TABS = [
+  {
+    title: 'Board',
+    groups: [
+      {
+        title: 'Navigate',
+        rows: [
+          { keys: ['↓'], label: 'Next item' },
+          { keys: ['↑'], label: 'Previous item' },
+          { keys: ['←'], label: 'Left column / collapse group' },
+          { keys: ['→'], label: 'Right column / expand group' },
+          { keys: ['Tab'], label: 'Switch sidebar ↔ board' },
+          { keys: ['Enter', 'Space'], label: 'Open selected item' },
+        ],
+      },
+      {
+        title: 'Board',
+        rows: [
+          { keys: ['Enter'], label: 'Toggle task detail panel' },
+          { keys: ['D'], label: 'Delete selected task' },
+          { keys: ['N'], label: 'Toggle scratchpad (in the sidebar: the item under the cursor)' },
+          { 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', 'Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
+          { 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: 'Session name (SendMessage address)' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Session',
+    groups: [
+      {
+        title: 'Session',
+        rows: [
+          { keys: ['P'], label: 'Open plan' },
+          { keys: ['Ctrl', 'Shift', 'P'], combo: true, label: 'Session picker' },
+          { keys: ['Shift', 'P'], combo: true, label: 'Project picker (this board)' },
+          { keys: ['I'], label: 'Session info' },
+          { keys: ['.'], label: 'Pin / unpin' },
+          { keys: ['>'], label: 'Toggle sticky' },
+          { keys: ['Shift', 'F10'], combo: true, label: 'Move to group (or Menu key)' },
+          { 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: ['↑', '↓'], label: 'Previous / next message in detail' },
+          { keys: ['Ctrl', 'Enter'], combo: true, label: 'Allow / approve the waiting prompt' },
+        ],
+      },
+      {
+        title: 'Sessions',
+        rows: [
+          { keys: ['Ctrl', 'Alt', 'N'], combo: true, label: 'New session' },
+          { keys: ['Ctrl', 'Alt', 'R'], combo: true, label: 'Resume session (claude -r)' },
+          { keys: ['Ctrl', 'Alt', 'S'], combo: true, label: 'Swap to previous session' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Terminal',
+    groups: [
+      {
+        title: 'Terminal',
+        rows: [
+          { keys: ['Ctrl', '`'], combo: true, label: 'Show / hide terminal' },
+          { keys: ['Alt', '`'], combo: true, label: 'Focus terminal / page' },
+          { keys: ['Alt', 'Shift', '`'], combo: true, label: 'End and close terminal' },
+          { keys: ['Ctrl', 'Shift', '`'], combo: true, label: 'All terminals' },
+          { keys: ['Ctrl', '+/−/0'], combo: true, label: 'Terminal text size' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Hub',
+    hub: true,
+    groups: [
+      {
+        title: 'Hub',
+        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' },
+          { keys: ['Ctrl', 'Alt', 'W'], combo: true, label: 'Config dir picker' },
+          { keys: ['Ctrl', 'Alt', 'A'], combo: true, label: 'App launcher' },
+        ],
+      },
+    ],
+  },
 ];
 
-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() {
+function buildHelpShortcuts(groups) {
   const cells = [];
-  SHORTCUT_PAIRS.forEach(([left, right = EMPTY_GROUP], pair) => {
+  for (let pair = 0; pair < groups.length; pair += 2) {
     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++) {
+      [groups[pair], 'sc-l'],
+      [groups[pair + 1], 'sc-r'],
+    ].filter(([g]) => g);
+    for (const [g, side] of sides)
+      cells.push(`<div class="${escapeHtml(`sc-group ${side}${first}`)}">${escapeHtml(g.title)}</div>`);
+    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) 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>`,
-        );
+        const label = escapeHtml(row.label);
+        cells.push(`<dt class="${escapeHtml(side)}">${keys}</dt><dd class="${escapeHtml(side)}">${label}</dd>`);
       }
     }
-  });
+  }
   return cells.join('');
 }
 
+let helpTab = 0;
+const helpFilter = document.getElementById('help-filter');
+
+// Hub keys do nothing outside Claude Code Hub, so the standalone board drops that tab.
+const helpTabs = () => SHORTCUT_TABS.filter((t) => hub.inHub || !t.hub);
+
+// The matching rows of every tab, in their groups.
+function filteredShortcutGroups(query) {
+  return helpTabs()
+    .flatMap((t) => t.groups)
+    .map((g) => ({ title: g.title, rows: g.rows.filter((r) => fuzzyMatch(`${r.label} ${r.keys.join(' ')}`, query)) }))
+    .filter((g) => g.rows.length);
+}
+
+function renderHelp() {
+  const tabs = helpTabs();
+  helpTab = Math.min(helpTab, tabs.length - 1);
+  const query = helpFilter.value.trim();
+  document.getElementById('help-tabs').innerHTML = tabs
+    .map((t, i) => {
+      const on = !query && i === helpTab;
+      return `<button type="button" role="tab" class="help-tab${on ? ' active' : ''}" aria-selected="${escapeHtml(String(on))}" data-idx="${i}">${escapeHtml(t.title)}</button>`;
+    })
+    .join('');
+  const groups = query ? filteredShortcutGroups(query) : tabs[helpTab].groups;
+  document.getElementById('help-shortcuts').innerHTML = groups.length
+    ? buildHelpShortcuts(groups)
+    : `<div class="sc-empty">No shortcut matches "${escapeHtml(query)}"</div>`;
+}
+
+function clearHelpFilter() {
+  helpFilter.value = '';
+  renderHelp();
+}
+
+function selectHelpTab(idx) {
+  helpTab = idx;
+  clearHelpFilter();
+}
+
 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');
+  clearHelpFilter();
+  document.getElementById('help-modal').classList.add('visible');
+  helpFilter.focus();
 }
 
+document.getElementById('help-tabs').addEventListener('click', (e) => {
+  const tab = e.target.closest('[data-idx]');
+  if (!tab) return;
+  selectHelpTab(Number(tab.dataset.idx));
+  helpFilter.focus();
+});
+
+helpFilter.addEventListener('input', renderHelp);
+
+// The page's key handler skips text fields, so the filter handles its own Esc and tab keys.
+helpFilter.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    e.stopPropagation();
+    if (helpFilter.value) clearHelpFilter();
+    else closeHelpModal();
+    return;
+  }
+  const step = matchKey(e, 'ArrowLeft') ? -1 : matchKey(e, 'ArrowRight') ? 1 : 0;
+  if (!step || helpFilter.value) return;
+  e.preventDefault();
+  const n = helpTabs().length;
+  selectHelpTab((helpTab + step + n) % n);
+});
+
 function closeHelpModal() {
   const modal = document.getElementById('help-modal');
   modal.classList.remove('visible');
@@ -6275,6 +6446,7 @@ const MODAL_CLOSERS = {
   'agent-modal': () => closeAgentModal(),
   'help-modal': () => closeHelpModal(),
   'session-picker-modal': () => closeSessionPicker(),
+  'project-picker-modal': () => closeProjectPicker(),
   'terminal-manager-modal': () => closeTerminalManager(),
   'new-session-modal': () => closeNewSession(),
 };
@@ -6395,6 +6567,11 @@ document.addEventListener('keydown', (e) => {
     toggleMessagePanel();
     return;
   }
+  if (e.code === 'KeyP' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+    e.preventDefault();
+    openProjectPicker();
+    return;
+  }
   if (e.code === 'KeyM' && e.shiftKey) {
     e.preventDefault();
     const msgDetailModal = document.getElementById('msg-detail-modal');
@@ -6562,19 +6739,19 @@ document.addEventListener('keydown', (e) => {
   }
   if (e.key === '$' && !e.ctrlKey && !e.altKey && !e.metaKey) {
     e.preventDefault();
-    hubNavigate('cost', contextSid ? `?view=detail&session=${encodeURIComponent(contextSid)}` : undefined);
+    openCost(contextSid);
     return;
   }
   if (matchKey(e, 'KeyM')) {
     e.preventDefault();
     const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
-    hubNavigate('marketplace', mSession?.project ? `?project=${encodeURIComponent(mSession.project)}` : undefined);
+    openMarketplace(mSession?.project);
     return;
   }
   if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'm') {
     e.preventDefault();
     const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
-    hubNavigate('memory', mSession?.project ? `?project=${encodeURIComponent(mSession.project)}` : undefined);
+    openMemory(mSession?.project);
     return;
   }
   if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'd') {
@@ -6608,11 +6785,17 @@ document.addEventListener('keydown', (e) => {
       showToast('No session selected');
       return;
     }
-    const text = e.ctrlKey ? `claude -r ${contextSid}` : contextSid;
-    const label = e.ctrlKey ? 'resume command' : 'session id';
+    const peerName = e.ctrlKey ? sessions.find((s) => s.id === contextSid)?.peerName : null;
+    const [text, label] = e.ctrlKey
+      ? [peerName && sendMessageAddress(peerName), 'session name']
+      : [contextSid, 'session id'];
+    if (!text) {
+      showToast('No live session name: the session is not running');
+      return;
+    }
     navigator.clipboard
       .writeText(text)
-      .then(() => showToast(`Copied ${label}: ${contextSid.slice(0, 8)}`, 'success'))
+      .then(() => showToast(`Copied ${label}: ${e.ctrlKey ? text : text.slice(0, 8)}`, 'success'))
       .catch(() => showToast(`Failed to copy ${label}`));
     return;
   }
@@ -6939,6 +7122,7 @@ function handleSessionOpenEvent(data) {
     stickySessionIds.add(id);
   }
   setSessionDismissed(id, false);
+  cliOpenedId = id;
   fetchTasks(id);
 }
 
@@ -6963,7 +7147,7 @@ function handleDocumentLinkEvent(data) {
   setSessionDocLink(sessionId, filePath, unlink);
   const msg = `${unlink ? 'Unlinked' : 'Linked'} ${linkedDocLabel(filePath)}`;
   // Every tab gets the event; only the one on screen offers to open the URL.
-  if (open && isOnScreen()) showToast(msg, 'info', { label: 'Open', onClick: () => openExternal(filePath) });
+  if (open && isOnScreen()) showToast(msg, 'info', { label: 'Open', onClick: () => hub.openExternal(filePath) });
   else showToast(msg);
 }
 
@@ -7090,7 +7274,7 @@ function linkedDocLabel(p) {
 function openLinkedDoc(p, baseDir) {
   const opener = linkedDocOpener(p);
   if (opener === 'url') {
-    openExternal(p);
+    hub.openExternal(p);
     return;
   }
   if (opener === 'preview') {
@@ -7606,7 +7790,7 @@ function setupEventSource() {
       if (data.type === 'dispatch-update') onDispatchUpdate();
 
       if (data.type === 'agent-update') {
-        pendingAgentSessionIds.add(data.sessionId);
+        if (!data.unreadOnly) pendingAgentSessionIds.add(data.sessionId);
         clearTimeout(agentRefreshTimer);
         agentRefreshTimer = setTimeout(() => {
           if (skipOffScreen()) return;
@@ -7658,6 +7842,7 @@ function setupEventSource() {
 
   // When cck comes back on screen (tab visible or hub:active), catch up immediately
   async function catchUp() {
+    markOpenSessionRead();
     if (!isOnScreen() || !missedWhileHidden) return;
     missedWhileHidden = false;
     // The full refresh below covers whatever the pending debounces would have fetched.
@@ -7678,12 +7863,11 @@ function setupEventSource() {
     renderAgentFooter();
   }
   document.addEventListener('visibilitychange', catchUp);
-  window.addEventListener('message', (e) => {
-    if (e.source !== window.parent || e.origin !== hubOrigin() || e.data?.type !== 'hub:active') return;
-    hubActive = !!e.data.active;
+  onHubActive = (active) => {
+    hubActive = active;
     catchUp();
     if (hubActive && wantsTerminal()) onTerminalShown();
-  });
+  };
 
   // Fallback poll every 30s in case SSE silently drops; skip when not on screen
   setInterval(() => {
@@ -8680,12 +8864,10 @@ function renderZenState() {
     : 'Zen mode: current session only (Ctrl+Shift+Z)';
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function filterBySessions(value) {
   if (value === sessionFilter) return;
-  sessionFilter = value;
+  setSessionFilter(value);
   resetSessionPage();
-  if (value !== 'active') activityFilter.clear();
   renderFilterState();
   updateUrl();
   // Instant feedback from cached data, then refetch — the cached list was fetched
@@ -8696,6 +8878,11 @@ function filterBySessions(value) {
   fetchSessions(false);
 }
 
+function setSessionFilter(value) {
+  sessionFilter = value;
+  if (value !== 'active') activityFilter.clear();
+}
+
 function projectFilterText() {
   return filterProject && filterProject !== '__recent__' ? filterProject : '';
 }
@@ -8973,15 +9160,17 @@ const COLOR_THEMES = [
   ['synthwave', "Synthwave '84"],
 ];
 
-function buildThemeMenu() {
+function buildThemeMenu(themes = COLOR_THEMES) {
   const menu = document.getElementById('themeMenu');
-  menu.innerHTML = COLOR_THEMES.map(
-    ([id, label]) =>
-      `<button type="button" class="theme-menu-item theme-swatch-${id}" data-theme-id="${id}"
+  menu.innerHTML = themes
+    .map(
+      ([id, label]) =>
+        `<button type="button" class="theme-menu-item theme-swatch-${id}" data-theme-id="${id}"
          onclick="event.stopPropagation(); setColorTheme('${id}'); toggleThemeMenu()">
-         <span class="theme-swatch theme-swatch-${id}"><i class="sw-bg"></i><i class="sw-accent"></i><i class="sw-ink"></i></span>${label}
+         <span class="theme-swatch theme-swatch-${id}"><i class="sw-bg"></i><i class="sw-accent"></i><i class="sw-ink"></i></span>${escapeHtml(label)}
        </button>`,
-  ).join('');
+    )
+    .join('');
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
@@ -9241,10 +9430,13 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   let html = '';
 
   // Session & project details as compact key-value rows
-  // Each row: [label, value, { openPath?, abbrev? }] — `value` is authoritative
-  // (tooltip + copy); `abbrev` only replaces the rendered text.
+  // Each row: [label, value, { openPath?, abbrev?, copy? }] — `value` is authoritative
+  // (tooltip + copy); `abbrev` only replaces the rendered text, `copy` the copied text.
   const infoRows = [];
   infoRows.push(['Session', session.id, { openClaudeDir: true, openFile: session.jsonlPath }]);
+  if (session.peerName) {
+    infoRows.push(['Peer name', session.peerName, { copy: sendMessageAddress(session.peerName) }]);
+  }
   if (parentInfo?.parentSessionId) {
     infoRows.push([
       parentInfo.relation === 'compact' ? 'Continued from' : 'Forked from',
@@ -9298,7 +9490,7 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
     } else {
       html += `<span style="${plainStyle}" title="${escapeHtml(value)}">${escapeHtml(opts?.abbrev || value)}</span>`;
     }
-    const copyBtn = `<button onclick="copyWithFeedback('${escAttrJs(value)}', this)" title="Copy">${ICON_COPY}</button>`;
+    const copyBtn = `<button onclick="copyWithFeedback('${escAttrJs(opts?.copy || value)}', this)" title="Copy">${ICON_COPY}</button>`;
     let openBtn = '';
     if (opts?.openClaudeDir || opts?.openPath) {
       const folder = opts.openClaudeDir ? '' : escapeHtml(opts.openPath);
@@ -9393,12 +9585,12 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   updateStickyBtnState();
   updateDismissBtnState();
   const costBtn = document.getElementById('session-info-cost-btn');
-  if (costBtn) costBtn.style.display = window.__HUB__?.enabled || appConfig.costUrl ? '' : 'none';
+  if (costBtn) costBtn.style.display = hub.can('session.cost') ? '' : 'none';
   const mkBtn = document.getElementById('session-info-marketplace-btn');
   const memBtn = document.getElementById('session-info-memory-btn');
   const proj = session.project;
-  if (mkBtn) mkBtn.style.display = proj && (window.__HUB__?.enabled || appConfig.marketplaceUrl) ? '' : 'none';
-  if (memBtn) memBtn.style.display = proj && (window.__HUB__?.enabled || appConfig.memoryUrl) ? '' : 'none';
+  if (mkBtn) mkBtn.style.display = proj && hub.can('project.plugins') ? '' : 'none';
+  if (memBtn) memBtn.style.display = proj && hub.can('project.memory') ? '' : 'none';
   modal.classList.add('visible');
 
   if (alreadyVisible) return; // re-render during deferred hydration — key handler already attached
@@ -9593,6 +9785,13 @@ function spDotHtml(session) {
   return isActiveSession(session) ? SP_DOTS.active : SP_DOTS.idle;
 }
 
+function spPinHtml(session) {
+  const state = getSessionPinState(session.id);
+  if (state === 'sticky') return `<span class="sp-pin sticky" title="Sticky">${SESSION_STAR_SVG}</span>`;
+  if (state === 'pinned') return `<span class="sp-pin pinned" title="Pinned">${SESSION_PIN_SVG}</span>`;
+  return '';
+}
+
 function renderSessionPicker() {
   const list = document.getElementById('session-picker-list');
   const query = document.getElementById('session-picker-input').value.trim();
@@ -9622,6 +9821,7 @@ function renderSessionPicker() {
       return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}${outside ? ' outside' : ''}" data-idx="${i}" title="${escapeHtml(s.project ? `${s.id}\n${s.project}` : s.id)}">
         ${spDotHtml(s)}
         <span class="sp-name">${escapeHtml(sessionDisplayName(s))}</span>
+        ${spPinHtml(s)}
         <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>
@@ -9685,6 +9885,122 @@ function initSessionPicker() {
 }
 //#endregion
 
+//#region PROJECT_PICKER
+// Sets only this board's project filter; a later hub project.changed replaces it.
+let ppRows = [];
+let ppIdx = 0;
+let ppSource = null;
+let ppRecentOnly = false;
+
+async function openProjectPicker() {
+  const input = document.getElementById('project-picker-input');
+  input.value = '';
+  renderProjectPicker();
+  document.getElementById('project-picker-modal').classList.add('visible');
+  input.focus();
+  await refreshProjectList();
+  ppSource = (projectsCache || [])
+    .filter((p) => !p.temp)
+    .map((p) => ({ ...p, norm: normalizeProjectPath(p.path) }))
+    .sort((a, b) => (b.modifiedAt || '').localeCompare(a.modifiedAt || ''));
+  renderProjectPicker();
+}
+
+function ppToggleRecentOnly() {
+  ppRecentOnly = !ppRecentOnly;
+  document.getElementById('pp-recent-chip').setAttribute('aria-pressed', String(ppRecentOnly));
+  renderProjectPicker();
+  document.getElementById('project-picker-input').focus();
+}
+
+// One fetch for both filters: two in a row could land out of order.
+function ppSetFilters(project, session) {
+  closeProjectPicker();
+  if (project === filterProject) return filterBySessions(session);
+  setSessionFilter(session);
+  filterByProject(project);
+}
+
+function closeProjectPicker() {
+  hideModalOverlay('project-picker-modal');
+}
+
+function renderProjectPicker() {
+  const list = document.getElementById('project-picker-list');
+  const query = document.getElementById('project-picker-input').value.trim();
+  const source = ppSource || [];
+  const pool = ppRecentOnly ? source.filter((p) => recentProjects.has(p.path)) : source;
+  ppRows = query ? pool.filter((p) => fuzzyMatch(p.path, query)) : pool;
+  if (!ppRows.length) {
+    ppIdx = -1;
+    const empty = ppRecentOnly ? `No project active in the last ${RECENT_PROJECT_HOURS}h` : 'No project matches';
+    list.innerHTML = `<div class="sp-empty">${ppSource ? empty : 'Loading projects…'}</div>`;
+    return;
+  }
+  const current = filterProject && normalizeProjectPath(filterProject);
+  list.innerHTML = ppRows
+    .map((p, i) => {
+      return `<button class="sp-row${p.norm === current ? ' current' : ''}${recentProjects.has(p.path) ? ' recent' : ''}" data-idx="${i}">
+        <span class="sp-name">${escapeHtml(pathBasename(p.path))}</span>
+        <span class="sp-project">${escapeHtml(p.path)}</span>
+        ${p.modifiedAt ? `<span class="sp-time">${formatDate(p.modifiedAt)}</span>` : ''}
+      </button>`;
+    })
+    .join('');
+  const currentIdx = ppRows.findIndex((p) => p.norm === current);
+  ppSelect(query ? 0 : Math.max(0, currentIdx));
+}
+
+function ppSelect(idx) {
+  const list = document.getElementById('project-picker-list');
+  list.children[ppIdx]?.classList.remove('selected');
+  ppIdx = Math.min(Math.max(idx, 0), ppRows.length - 1);
+  const row = list.children[ppIdx];
+  row?.classList.add('selected');
+  row?.scrollIntoView({ block: 'nearest' });
+}
+
+function ppApply(idx) {
+  const row = ppRows[idx];
+  if (!row) return;
+  ppSetFilters(row.path, ppRecentOnly ? 'active' : 'all');
+}
+
+function initProjectPicker() {
+  const input = document.getElementById('project-picker-input');
+  input.addEventListener('input', renderProjectPicker);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeProjectPicker();
+    else if (matchKey(e, 'ArrowDown') || (e.ctrlKey && e.key === 'n')) ppSelect(ppIdx + 1);
+    else if (matchKey(e, 'ArrowUp') || (e.ctrlKey && !e.shiftKey && e.key === 'p')) ppSelect(ppIdx - 1);
+    else if (e.key === 'Enter') ppApply(ppIdx);
+    else if (e.altKey && !e.ctrlKey && !e.metaKey && e.code === 'KeyR') {
+      if (!e.repeat) ppToggleRecentOnly();
+    } else if (e.altKey && !e.ctrlKey && !e.metaKey && e.code === 'KeyC')
+      ppSetFilters(FILTER_DEFAULTS.project, FILTER_DEFAULTS.session);
+    else return;
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  document.getElementById('project-picker-list').addEventListener('click', (e) => {
+    const row = e.target.closest('.sp-row');
+    if (row) ppApply(Number(row.dataset.idx));
+  });
+  // Vimium's Escape only blurs the input; see initSessionPicker.
+  const modal = document.getElementById('project-picker-modal');
+  let pointerDown = false;
+  modal.addEventListener('mousedown', () => {
+    pointerDown = true;
+  });
+  document.addEventListener('mouseup', () => {
+    pointerDown = false;
+  });
+  input.addEventListener('blur', () => {
+    if (!pointerDown && modal.classList.contains('visible') && document.hasFocus()) closeProjectPicker();
+  });
+}
+//#endregion
+
 //#region PLAN
 function refreshOpenPlan() {
   if (!_planSessionId || !document.getElementById('plan-modal').classList.contains('visible')) return;
@@ -10062,35 +10378,16 @@ function openFolderInEditor(folder, file) {
   postAndToast('/api/open-folder', body, 'folder');
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openCost(sessionId) {
-  if (window.__HUB__?.enabled) {
-    hubNavigate('cost', `?view=detail&session=${encodeURIComponent(sessionId)}`);
-  } else if (appConfig.costUrl) {
-    window.open(`${appConfig.costUrl}?view=detail&session=${encodeURIComponent(sessionId)}`, '_blank');
-  }
+  hub.invoke('session.cost', sessionId ? { session: sessionId } : {});
 }
 
 function openMarketplace(projectPath) {
-  const params = new URLSearchParams({ project: projectPath });
-  if (window.__HUB__?.enabled) {
-    hubNavigate('marketplace', `?${params}`);
-  } else if (appConfig.marketplaceUrl) {
-    const url = new URL(appConfig.marketplaceUrl);
-    url.search = params.toString();
-    window.open(url.toString(), '_blank');
-  }
+  hub.invoke('project.plugins', projectPath ? { project: projectPath } : {});
 }
 
 function openMemory(projectPath) {
-  const params = new URLSearchParams({ project: projectPath });
-  if (window.__HUB__?.enabled) {
-    hubNavigate('memory', `?${params}`);
-  } else if (appConfig.memoryUrl) {
-    const url = new URL(appConfig.memoryUrl);
-    url.search = params.toString();
-    window.open(url.toString(), '_blank');
-  }
+  hub.invoke('project.memory', projectPath ? { project: projectPath } : {});
 }
 
 function openForInfoModalProject(open) {
@@ -10262,10 +10559,9 @@ function filterByOwner(value) {
 // leaving the session view or switching sessions drops only the socket; coming back
 // reattaches and the server replays the screen.
 const TERMINAL_TOKEN_KEY = 'terminal-token';
+// Every config dir's board is served on the hub's one kanban origin, so sessionStorage is shared.
+const TERMINAL_FOCUS_KEY = nsKey('terminal-focus');
 const TERMINAL_TOKEN_RE = /^[0-9a-f]{64}$/;
-// Ctrl+Alt letters cck keeps instead of forwarding to the hub: New session, Resume session, and
-// Swap to the previous session.
-const CCK_CTRL_ALT_KEYS = new Set(['KeyN', 'KeyR', 'KeyS']);
 const TERMINAL_MODES_KEY = 'terminal-sessions';
 const TERMINAL_FONT_KEY = 'terminal-font-size';
 const TERMINAL_FONT_MIN = 8;
@@ -10322,32 +10618,18 @@ let tokenRefresh = null;
 // The hub mints a new token each run, and this page can outlive a hub restart. Resolves true only
 // for a token that differs from the one that just failed, so a caller retries at most once.
 function refreshTerminalToken() {
-  if (!window.__HUB__?.enabled) return Promise.resolve(false);
-  tokenRefresh ??= requestTerminalToken().finally(() => {
-    tokenRefresh = null;
-  });
-  return tokenRefresh;
-}
-
-function requestTerminalToken() {
-  return new Promise((resolve) => {
-    const done = (ok) => {
-      window.removeEventListener('message', onMessage);
-      clearTimeout(timer);
-      resolve(ok);
-    };
-    const onMessage = (e) => {
-      if (e.source !== window.parent || e.origin !== hubOrigin() || e.data?.type !== 'hub:terminalToken') return;
-      const token = e.data.token;
-      if (typeof token !== 'string' || !TERMINAL_TOKEN_RE.test(token) || token === terminalToken) return done(false);
+  tokenRefresh ??= hub
+    .terminalToken()
+    .then((token) => {
+      if (!TERMINAL_TOKEN_RE.test(token) || token === terminalToken) return false;
       terminalToken = token;
       storeTerminalToken(token);
-      done(true);
-    };
-    const timer = setTimeout(() => done(false), 3000);
-    window.addEventListener('message', onMessage);
-    hubPost({ type: 'hub:terminalToken' });
-  });
+      return true;
+    })
+    .finally(() => {
+      tokenRefresh = null;
+    });
+  return tokenRefresh;
 }
 
 function terminalAvailable() {
@@ -10384,6 +10666,11 @@ function terminalPaneFocused() {
 
 const TEXT_FIELD_SELECTOR = 'input, textarea, select, [contenteditable]';
 
+function inPageField(e) {
+  const field = e.target?.closest?.(TEXT_FIELD_SELECTOR);
+  return !!field && !document.getElementById('terminal-pane').contains(field);
+}
+
 function terminalShortcut(e) {
   const ctrlAlt = e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey;
   const ctrlShift = e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey;
@@ -10393,13 +10680,11 @@ function terminalShortcut(e) {
     return () => adjustTerminalFontSize(Math.sign(zoom));
   }
   if (ctrlAlt && e.code === 'KeyS') return swapToPreviousSession;
+  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;
   // Ctrl+Shift+Z is redo in a text field, so only the terminal's own textarea gives it up.
-  if (ctrlShift && e.code === 'KeyZ') {
-    const field = e.target?.closest?.(TEXT_FIELD_SELECTOR);
-    return field && !document.getElementById('terminal-pane').contains(field) ? null : toggleZenMode;
-  }
+  if (ctrlShift && e.code === 'KeyZ') return inPageField(e) ? null : toggleZenMode;
   if (ctrlAlt && (e.code === 'KeyN' || e.code === 'KeyR') && terminalAvailable()) {
     return () => openNewSession(null, e.code === 'KeyR');
   }
@@ -10493,6 +10778,7 @@ function openSession(sessionId) {
   const alreadyOpen = sessionId === currentSessionId && viewMode === 'session' && termState.shown;
   if (!alreadyOpen) termState.openedByUser = sessionId;
   else if (termState.attached && promptAwaitsUser(sessionId)) focusTerminalPane();
+  markSessionRead(sessionId);
   return fetchTasks(sessionId);
 }
 
@@ -10595,7 +10881,7 @@ function terminalKeyFilter(e) {
     return false;
   }
   if (ctrlOnly && e.code === 'KeyV') return false;
-  return !isHubKey(e);
+  return !hub.forwards(e);
 }
 
 function oscColor(hex) {
@@ -10765,22 +11051,44 @@ function hideTerminalPrompt() {
 
 const TERMINAL_BOOT_VERBS = ['Waking Claude…', 'Clawding…', 'Warming up the terminal…', 'Summoning the session…'];
 const TERMINAL_BOOT_MAX_MS = 15000;
+// The server answers `ready` as soon as the socket attaches, even before Claude draws, so a wait
+// this long is the connection: under the hub a loopback connect can hang until its timeout.
+const TERMINAL_SLOW_CONNECT_MS = 1500;
 let terminalBootTimer = null;
+let terminalSlowTimer = null;
 
 // A new PTY shows only a blinking cursor until Claude draws its first frame.
 function showTerminalBoot() {
   document.getElementById('terminal-boot-verb').textContent = pickRandom(TERMINAL_BOOT_VERBS);
   document.getElementById('terminal-boot').classList.add('visible');
   clearTimeout(terminalBootTimer);
-  terminalBootTimer = setTimeout(hideTerminalBoot, TERMINAL_BOOT_MAX_MS);
+  terminalBootTimer = setTimeout(() => {
+    if (!terminalConnectSlow()) hideTerminalBoot();
+  }, TERMINAL_BOOT_MAX_MS);
 }
 
 function hideTerminalBoot() {
   clearTimeout(terminalBootTimer);
   terminalBootTimer = null;
+  clearTerminalSlow();
   document.getElementById('terminal-boot').classList.remove('visible');
 }
 
+function clearTerminalSlow() {
+  clearTimeout(terminalSlowTimer);
+  terminalSlowTimer = null;
+  document.getElementById('terminal-boot').classList.remove('slow');
+}
+
+function terminalConnectSlow() {
+  return document.getElementById('terminal-boot').classList.contains('slow');
+}
+
+function reconnectTerminal() {
+  const id = termState.sessionId;
+  if (id) openTerminal(id, terminalOpenMode(id));
+}
+
 function showTerminalPrompt(sessionId, title, detail, choices, output = '') {
   const el = document.getElementById('terminal-prompt');
   const tail = output ? `<pre class="${TINTED_PRE_CLASS} terminal-prompt-output">${escapeHtml(output)}</pre>` : '';
@@ -10821,13 +11129,41 @@ function syncCloseGuard() {
   const on = termState.attached && termState.shown;
   if (termState.closeGuard === on) return;
   termState.closeGuard = on;
-  hubPost({ type: 'hub:closeGuard', on });
+  hub.closeGuard(on);
 }
 
 window.addEventListener('beforeunload', (e) => {
-  if (termState.closeGuard && !window.__HUB__?.enabled) e.preventDefault();
+  if (termState.closeGuard && !hub.inHub) e.preventDefault();
+});
+
+// A config-dir switch in the hub reloads this page, and coming back should put the cursor where it was.
+// The hub's palette takes focus first and clears activeElement here, so the last focus inside this
+// page is tracked instead; focus leaving the frame keeps it.
+let terminalHadFocus = false;
+document.addEventListener('focusin', () => {
+  terminalHadFocus = terminalPaneFocused();
+});
+document.addEventListener('focusout', (e) => {
+  if (e.relatedTarget) return;
+  setTimeout(() => {
+    if (document.hasFocus()) terminalHadFocus = terminalPaneFocused();
+  });
+});
+window.addEventListener('pagehide', () => {
+  try {
+    if (termState.attached && termState.shown && terminalHadFocus) {
+      sessionStorage.setItem(TERMINAL_FOCUS_KEY, currentSessionId);
+    } else sessionStorage.removeItem(TERMINAL_FOCUS_KEY);
+  } catch (_) {}
 });
 
+function restoreTerminalFocus(sessionId) {
+  try {
+    if (sessionStorage.getItem(TERMINAL_FOCUS_KEY) === sessionId) termState.focusNext = true;
+    sessionStorage.removeItem(TERMINAL_FOCUS_KEY);
+  } catch (_) {}
+}
+
 // The terminal stands in for the board, so it takes the board zone however focus arrives
 // (Tab, Alt+`, a click); leaveTerminalPane hands it back to the sidebar.
 document.getElementById('terminal-pane').addEventListener('focusin', () => {
@@ -10876,6 +11212,11 @@ async function openTerminal(sessionId, mode, attempt = 0) {
   const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/api/terminal/ws`);
   ws.binaryType = 'arraybuffer';
   termState.ws = ws;
+  if (!attempt) {
+    terminalSlowTimer = setTimeout(() => {
+      if (termState.ws === ws) document.getElementById('terminal-boot').classList.add('slow');
+    }, TERMINAL_SLOW_CONNECT_MS);
+  }
   const spec = newSpecs.get(sessionId);
   let readyAt = 0;
   let refused = false;
@@ -10978,6 +11319,7 @@ function onTerminalMessage(sessionId, msg) {
     // The server has the prompt now; a later start of the same placeholder must not send it again.
     const spec = newSpecs.get(sessionId);
     if (spec) spec.prompt = null;
+    clearTerminalSlow();
     hideTerminalPrompt();
     setTerminalStatus('');
     setTerminalAttached(true);
@@ -11270,6 +11612,7 @@ async function loadTerminals() {
   const res = await fetch('/api/terminals', { cache: 'no-store' });
   const list = (await res.json()).sessions || [];
   runningTerminals = new Set(list.map((t) => t.id));
+  renderActivityChip();
   return list;
 }
 
@@ -11277,6 +11620,7 @@ function setRunningTerminals(ids) {
   runningTerminals = new Set(ids);
   if (ids.some((id) => !sessions.some((s) => s.id === id))) fetchSessions(false).catch(() => {});
   else renderSessions();
+  renderActivityChip();
 }
 
 function showSessionTerminal(sessionId) {
@@ -11637,6 +11981,7 @@ try {
 loadSessionGroups();
 initSessionGroupsDnd();
 initSessionPicker();
+initProjectPicker();
 try {
   const af = JSON.parse(store.getItem('activityFilter') || '[]');
   // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
@@ -11828,21 +12173,12 @@ if (urlState.search) {
   document.getElementById('boot-verb').textContent = pickRandom(verbs);
 }
 
-Promise.all([
-  fetch('/hub-config')
-    .then((r) => r.json())
-    .then((cfg) => {
-      if (!cfg.enabled) return;
-      window.__HUB__ = cfg;
-    })
-    .catch(() => {}),
-  fetch('/api/config')
-    .then((r) => r.json())
-    .then((c) => {
-      appConfig = c;
-    })
-    .catch(() => {}),
-])
+fetch('/api/config')
+  .then((r) => r.json())
+  .then((c) => {
+    appConfig = c;
+  })
+  .catch(() => {})
   .then(restorePendingSessions)
   .then(() => fetchSessions())
   .then(async () => {
@@ -11853,6 +12189,7 @@ Promise.all([
         showNoSession();
       }
     } else if (urlState.session) {
+      restoreTerminalFocus(urlState.session);
       await fetchTasks(urlState.session);
     } else {
       const last = loadLastView();
@@ -11863,6 +12200,7 @@ Promise.all([
           showNoSession();
         }
       } else if (last?.view === 'session' && last.session && sessions.some((s) => s.id === last.session)) {
+        restoreTerminalFocus(last.session);
         await fetchTasks(last.session);
       } else {
         showNoSession();
@@ -11906,49 +12244,65 @@ window.addEventListener('popstate', () => {
 //#endregion
 
 // #region HUB_INTEGRATION
-// e.code travels with e.key because macOS composes Option+<key> into a character (Option+P is
-// 'π'), so the key alone cannot identify the binding. The hub owns the keymap and normalizes;
-// these tests only decide whether a press is the hub's to handle.
-function isHubKey(e) {
-  if (!window.__HUB__?.enabled) return false;
-  if (hubKeys) return hubKeys.has(hubCombo(e));
-  if (e.ctrlKey && e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) return true;
-  // Own branch: the Alt+digit case below requires !ctrlKey. The hub owns the Ctrl+Alt+letter
-  // keymap and ignores unbound letters.
-  if (
-    e.ctrlKey &&
-    e.altKey &&
-    !e.shiftKey &&
-    !e.metaKey &&
-    !CCK_CTRL_ALT_KEYS.has(e.code) &&
-    (/^[a-z]$/i.test(e.key) || /^Key[A-Z]$/.test(e.code))
-  ) {
-    return true;
-  }
-  return e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && (/^[1-9]$/.test(e.key) || /^Digit[1-9]$/.test(e.code));
-}
-
-// The combos the hub binds, from its hub:keys message. Null until one arrives: a hub from before
-// hub:keys sends none, and the fallback filter above is what such a hub expects.
-let hubKeys = null;
+const costDetail = (session) => `?view=detail&session=${encodeURIComponent(session)}`;
+const projectQuery = (project) => `?${new URLSearchParams({ project })}`;
+const hub = ClaudeHub.connect({
+  // A function, because the --*-url flags arrive with /api/config after connect.
+  standalone: () => ({
+    ...(appConfig.costUrl && {
+      'session.cost': (p) => p.session && new URL(costDetail(p.session), appConfig.costUrl).href,
+    }),
+    ...(appConfig.marketplaceUrl && {
+      'project.plugins': (p) => p.project && new URL(projectQuery(p.project), appConfig.marketplaceUrl).href,
+    }),
+    ...(appConfig.memoryUrl && {
+      'project.memory': (p) => p.project && new URL(projectQuery(p.project), appConfig.memoryUrl).href,
+    }),
+  }),
+});
 
-// A copy of the hub's comboOf(): its names must match the hub:keys list.
-function hubCombo(e) {
-  const lower = (e.key || '').toLowerCase();
-  const m = /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
-  const key = /^[a-z1-9]$/.test(lower) ? lower : m ? m[1].toLowerCase() : e.key;
-  const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'];
-  return [...mods, key].filter(Boolean).join('+');
+hub.onActive((active) => onHubActive(active));
+
+// session.changed goes out once the switch settles, so arrowing through the list sends one event.
+let publishTimer = 0;
+let publishedSessionId;
+let cliOpenedId = null;
+
+function schedulePublishSession() {
+  clearTimeout(publishTimer);
+  publishTimer = setTimeout(publishSession, 150);
+}
+
+function publishSession() {
+  if (currentSessionId === publishedSessionId) return;
+  const s = currentSessionId ? sessions.find((x) => x.id === currentSessionId) : null;
+  // A placeholder publishes once its real row replaces it.
+  if (currentSessionId && (!s || s.placeholder)) return;
+  publishedSessionId = currentSessionId;
+  const source = currentSessionId === cliOpenedId ? 'cli' : 'user';
+  cliOpenedId = null;
+  hub.publish(
+    'session.changed',
+    s && {
+      sessionId: s.id,
+      project: s.project,
+      name: s.name || null,
+      gitBranch: s.gitBranch || null,
+      live: isSessionActive(s),
+      source,
+    },
+  );
 }
 
-document.addEventListener('keydown', (e) => {
-  if (!isHubKey(e)) return;
+// The help modal stops click propagation, so the document handler below never sees this link.
+// The service worker can pair a cached page that lacks the link with this script.
+document.getElementById('help-docs')?.addEventListener('click', (e) => {
   e.preventDefault();
-  hubPost({ type: 'hub:keydown', key: e.key, code: e.code, ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey });
+  hub.openExternal(e.currentTarget.href);
 });
 
 document.addEventListener('click', (e) => {
-  if (!window.__HUB__?.enabled) return;
+  if (!hub.inHub) return;
   const a = e.target.closest?.('a[href]');
   if (!a) return;
   const href = a.getAttribute('href');
@@ -11963,78 +12317,34 @@ document.addEventListener('click', (e) => {
   if (url.protocol !== 'http:' && url.protocol !== 'https:') return;
   e.preventDefault();
   e.stopPropagation();
-  hubPost({ type: 'hub:openExternal', url: url.href });
+  hub.openExternal(url.href);
 });
 
-// The click handler above only catches anchors. A script open goes the same way, because
-// in the hub's installed PWA window a framed app's own `_blank` open does nothing.
-function openExternal(url) {
-  if (window.__HUB__?.enabled) hubPost({ type: 'hub:openExternal', url });
-  else window.open(url, '_blank', 'noopener');
-}
-
-window.hubNavigate = function hubNavigate(app, url) {
-  if (!window.__HUB__?.enabled) return;
-  hubPost({ type: 'hub:navigate', app, url });
-};
-
-// Hoisted out of initHubTheme so initHubProject can share it.
-const hubOrigin = () => (window.__HUB__?.url ? new URL(window.__HUB__.url).origin : null);
-
-// Every send is addressed to the hub explicitly. With targetOrigin '*' any page that
-// framed this app also received the forwarded keystrokes and navigation intents.
-function hubPost(message) {
-  const origin = hubOrigin();
-  if (origin) window.parent?.postMessage(message, origin);
-}
-
 (function initHubTheme() {
   const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');
   const getColorTheme = () => document.body.dataset.colorTheme || 'ember';
-  // lastTheme/lastColorTheme are updated synchronously when applying a hub
-  // message, so the (async) observer sees no diff and doesn't echo it back.
-  let lastTheme = getTheme();
-  let lastColorTheme = getColorTheme();
-  window.addEventListener('message', (e) => {
-    if (e.source !== window.parent || e.origin !== hubOrigin()) return;
-    if (e.data?.type !== 'hub:theme') return;
-    if (typeof e.data.colorTheme === 'string' && e.data.colorTheme !== getColorTheme()) {
-      setColorTheme(e.data.colorTheme);
-      lastColorTheme = getColorTheme();
-    }
-    if (getTheme() !== e.data.theme) {
-      window.toggleTheme();
-      lastTheme = getTheme();
-    }
+  const report = hub.bindTheme({
+    get: () => ({ theme: getTheme(), colorTheme: getColorTheme() }),
+    set: ({ theme, colorTheme }) => {
+      if (colorTheme !== getColorTheme()) setColorTheme(colorTheme);
+      if (theme !== getTheme()) window.toggleTheme();
+    },
   });
-  new MutationObserver(() => {
-    const t = getTheme();
-    const ct = getColorTheme();
-    if (t === lastTheme && ct === lastColorTheme) return;
-    lastTheme = t;
-    lastColorTheme = ct;
-    hubPost({ type: 'hub:theme', theme: t, colorTheme: ct });
-  }).observe(document.body, {
+  new MutationObserver(report).observe(document.body, {
     attributes: true,
     attributeFilter: ['class', 'data-color-theme'],
   });
 })();
 
-(function initHubKeys() {
-  window.addEventListener('message', (e) => {
-    if (e.source !== window.parent || e.origin !== hubOrigin()) return;
-    if (e.data?.type !== 'hub:keys' || !Array.isArray(e.data.keys)) return;
-    hubKeys = new Set(e.data.keys.filter((k) => typeof k === 'string'));
-  });
-})();
+// Under the hub the picker lists the hub's themes, which include the user's own (protocol section 6, rule 5).
+hub.onThemes((themes) => {
+  buildThemeMenu(themes.map((t) => [t.id, t.label]));
+  syncColorThemeSelect(document.body.dataset.colorTheme);
+});
 
-(function initHubProject() {
-  window.addEventListener('message', (e) => {
-    if (e.source !== window.parent || e.origin !== hubOrigin()) return;
-    if (e.data?.type !== 'hub:project') return;
-    const dirPath = e.data.project;
-    if (typeof dirPath !== 'string' || !dirPath || dirPath === filterProject) return;
-    filterByProject(dirPath);
-  });
-})();
+hub.subscribe('project.changed', (p) => {
+  const dirPath = p?.project;
+  if (typeof dirPath !== 'string' || !dirPath || dirPath === filterProject) return;
+  filterByProject(dirPath);
+});
 // #endregion HUB_INTEGRATION