claude-code-kanban 4.23.2 → 4.25.0

package/public/app.js

@@ -1,4 +1,23 @@
 //#region STATE
+// Set by the server in index.html: null for the default Claude dir, a per-dir prefix otherwise.
+const STORAGE_NS = window.__STORAGE_NS__ ? `${window.__STORAGE_NS__}:` : '';
+// Theme is hub-wide (echoed to every app via hub:theme), so it stays shared across config dirs.
+const GLOBAL_KEYS = new Set(['theme', 'color-theme']);
+const nsKey = (k) => (GLOBAL_KEYS.has(k) ? k : STORAGE_NS + k);
+const store = {
+  keys() {
+    const out = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (k.startsWith(STORAGE_NS)) out.push(k.slice(STORAGE_NS.length));
+    }
+    return out;
+  },
+  getItem: (k) => localStorage.getItem(nsKey(k)),
+  setItem: (k, v) => localStorage.setItem(nsKey(k), v),
+  removeItem: (k) => localStorage.removeItem(nsKey(k)),
+};
+
 // The baseline "nothing is filtered" state: what resetState() returns to, what updateUrl() omits
 // from the query string, and what decides whether a control tints ember in the header summary.
 const FILTER_DEFAULTS = { project: '__recent__', session: 'active', limit: '20' };
@@ -15,6 +34,9 @@ let filterProject = FILTER_DEFAULTS.project; // null = all, '__recent__' = last
 let recentProjects = new Set();
 let projectsCacheDirty = true;
 const collapsedProjectGroups = new Set();
+const SECTION_GROUPS = '__section_groups__';
+const SECTION_PROJECTS = '__section_projects__';
+const SECTION_SESSIONS = '__section_sessions__';
 let stableGroupOrder = []; // cached project path order to prevent jumping
 let sessionGroups = []; // user-named groups: [{id, name, color, members:[{type,ref}]}]
 let sgDrag = null; // in-flight sidebar drag: {kind:'session'|'project'|'group', ref}
@@ -69,9 +91,7 @@ function getUrlState() {
     project: params.get('project'),
     owner: params.get('owner'),
     search: params.get('search'),
-    messages: params.has('messages')
-      ? params.get('messages') === '1'
-      : localStorage.getItem('message-panel-open') === 'true',
+    messages: params.has('messages') ? params.get('messages') === '1' : store.getItem('message-panel-open') === 'true',
     projectView: params.get('projectView'),
   };
 }
@@ -104,12 +124,12 @@ function persistLastView() {
       // base URL on reload, so the query string alone doesn't survive a hub refresh.
       project: filterProject,
     };
-    localStorage.setItem(LAST_VIEW_KEY, JSON.stringify(data));
+    store.setItem(LAST_VIEW_KEY, JSON.stringify(data));
   } catch (_) {}
 }
 function loadLastView() {
   try {
-    return JSON.parse(localStorage.getItem(LAST_VIEW_KEY)) || null;
+    return JSON.parse(store.getItem(LAST_VIEW_KEY)) || null;
   } catch (_) {
     return null;
   }
@@ -119,7 +139,7 @@ function loadLastView() {
 function resetState() {
   history.replaceState(null, '', window.location.pathname);
   try {
-    localStorage.removeItem(LAST_VIEW_KEY);
+    store.removeItem(LAST_VIEW_KEY);
   } catch (_) {}
   sessionFilter = FILTER_DEFAULTS.session;
   sessionLimit = FILTER_DEFAULTS.limit;
@@ -271,7 +291,7 @@ function toggleSection(containerId, chevronId) {
   const chevron = document.getElementById(chevronId);
   const collapsed = container.classList.toggle('collapsed');
   chevron.classList.toggle('rotated', collapsed);
-  localStorage.setItem(`${containerId}Collapsed`, collapsed);
+  store.setItem(`${containerId}Collapsed`, collapsed);
 }
 
 function isWaitingSession(s) {
@@ -280,6 +300,11 @@ function isWaitingSession(s) {
 function isActiveSession(s) {
   return !s.hasWaitingForUser && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
 }
+// hasRecentLog carries the server's registry-idle correction: an open-but-idle
+// terminal keeps touching its JSONL, so mtime alone is not proof of activity.
+function isSessionLive(s) {
+  return !!s.hasRecentLog && Date.now() - Date.parse(s.modifiedAt) <= LIVE_INDICATOR_MS;
+}
 
 const ACTIVITY_PREDICATES = {
   waiting: isWaitingSession,
@@ -361,7 +386,7 @@ function setActivityFilter(kind) {
   } else {
     toggleActivityKind(kind);
   }
-  localStorage.setItem('activityFilter', JSON.stringify([...activityFilter]));
+  store.setItem('activityFilter', JSON.stringify([...activityFilter]));
   // active/waiting only make sense with the active session filter on
   const targetFilter = activityFilter.size > 0 ? 'active' : sessionFilter;
   if (targetFilter !== sessionFilter) {
@@ -573,7 +598,7 @@ async function refreshProjectAgents() {
 function toggleMessagePanel() {
   const panel = document.getElementById('message-panel');
   messagePanelOpen = !messagePanelOpen;
-  localStorage.setItem('message-panel-open', messagePanelOpen);
+  store.setItem('message-panel-open', messagePanelOpen);
   panel.classList.toggle('visible', messagePanelOpen);
   document.getElementById('message-toggle')?.classList.toggle('active', messagePanelOpen);
   if (messagePanelOpen && currentSessionId) {
@@ -588,7 +613,7 @@ async function openSessionWithBookmarks(sessionId) {
   if (!messagePanelOpen) {
     const panel = document.getElementById('message-panel');
     messagePanelOpen = true;
-    localStorage.setItem('message-panel-open', 'true');
+    store.setItem('message-panel-open', 'true');
     panel.classList.add('visible');
     document.getElementById('message-toggle')?.classList.add('active');
   }
@@ -679,11 +704,19 @@ function openLiveLatestMessage() {
   }
 }
 
+const MSG_PAGE_LIMIT = 15;
+
+async function fetchSessionMessagesPage(sessionId, { before } = {}) {
+  const qs = new URLSearchParams({ limit: MSG_PAGE_LIMIT });
+  if (before) qs.set('before', before);
+  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/messages?${qs}`);
+  return res.ok ? res.json() : null;
+}
+
 async function fetchMessages(sessionId) {
   try {
-    const res = await fetch(`/api/sessions/${sessionId}/messages?limit=15`);
-    if (!res.ok) return;
-    const data = await res.json();
+    const data = await fetchSessionMessagesPage(sessionId);
+    if (!data) return;
     let agentEnriched = false;
     for (const m of data.messages) {
       if (m.agentId && m.agentPrompt) {
@@ -734,10 +767,8 @@ async function loadOlderMessages() {
   loader.textContent = 'Loading...';
   container.prepend(loader);
   try {
-    const before = currentMessages[0].timestamp;
-    const res = await fetch(`/api/sessions/${currentSessionId}/messages?limit=15&before=${encodeURIComponent(before)}`);
-    if (!res.ok) return;
-    const data = await res.json();
+    const data = await fetchSessionMessagesPage(currentSessionId, { before: currentMessages[0].timestamp });
+    if (!data) return;
     msgHasMore = data.hasMore && data.messages.length > 0;
     if (data.messages.length) {
       loader.remove();
@@ -912,7 +943,12 @@ function buildAssistantPreview(text) {
   return { md: out.join('\n').trim(), remainder };
 }
 
+// Set for the duration of a read-only renderMessageList call: the pin, agent-link and
+// agent-log controls act on the live panel's state, so a display-only list omits them.
+let msgRenderReadOnly = false;
+
 function renderMsgPinBtn(m, i) {
+  if (msgRenderReadOnly) return '';
   const pinned = isPinned(m);
   return `<button class="msg-pin-btn${pinned ? ' pinned' : ''}" onclick="event.stopPropagation();togglePin(${i})" title="${pinned ? 'Unpin' : 'Pin'} message">${PIN_SVG}</button>`;
 }
@@ -972,6 +1008,7 @@ function renderPinnedSection() {
 }
 
 function resolveAgentLogBtn(m) {
+  if (msgRenderReadOnly) return '';
   if (m.tool === 'Agent' && m.agentId) return agentLogButton(m.agentId);
   if (m.tool === 'SendMessage' && m.params?.to) {
     const recipient = currentAgents.find((a) => (a.type || a.name) === m.params.to);
@@ -990,7 +1027,7 @@ function renderToolItem(m, i, compact) {
   // from the live agent-activity files), so the ⇗ link, agent-log button, and modal
   // click all light up DURING the run, identical to post-completion.
   const agentLink =
-    m.tool === 'Agent' && m.agentId
+    m.tool === 'Agent' && m.agentId && !msgRenderReadOnly
       ? ` <span class="msg-agent-link" title="View agent" onclick="event.stopPropagation();showAgentModal('${escAttrJs(m.agentId)}')">⇗</span>`
       : '';
   // Usage chip (tokens · tools · duration) on completed Agent rows — same stats a
@@ -1013,7 +1050,16 @@ function renderToolItem(m, i, compact) {
     </div>`;
 }
 
-function renderMessageList(messages) {
+function renderMessageList(messages, { readOnly = false } = {}) {
+  msgRenderReadOnly = readOnly;
+  try {
+    return renderMessageListBody(messages);
+  } finally {
+    msgRenderReadOnly = false;
+  }
+}
+
+function renderMessageListBody(messages) {
   const parts = [];
   let i = 0;
   while (i < messages.length) {
@@ -1471,14 +1517,14 @@ function getPinId(m) {
 
 function loadPins(sessionId) {
   try {
-    return JSON.parse(localStorage.getItem(`pinned-messages-${sessionId}`)) || [];
+    return JSON.parse(store.getItem(`pinned-messages-${sessionId}`)) || [];
   } catch {
     return [];
   }
 }
 
 function savePins(sessionId, pins) {
-  localStorage.setItem(`pinned-messages-${sessionId}`, JSON.stringify(pins));
+  store.setItem(`pinned-messages-${sessionId}`, JSON.stringify(pins));
 }
 
 function isPinned(m) {
@@ -1644,7 +1690,7 @@ const deferredPinPlacement = new Set();
 
 function loadPinnedSessions() {
   try {
-    return new Set(JSON.parse(localStorage.getItem('pinned-sessions')) || []);
+    return new Set(JSON.parse(store.getItem('pinned-sessions')) || []);
   } catch {
     return new Set();
   }
@@ -1652,15 +1698,15 @@ function loadPinnedSessions() {
 
 function loadStickySessions() {
   try {
-    return new Set(JSON.parse(localStorage.getItem('sticky-sessions')) || []);
+    return new Set(JSON.parse(store.getItem('sticky-sessions')) || []);
   } catch {
     return new Set();
   }
 }
 
 function savePinnedSessions() {
-  localStorage.setItem('pinned-sessions', JSON.stringify([...pinnedSessionIds]));
-  localStorage.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
+  store.setItem('pinned-sessions', JSON.stringify([...pinnedSessionIds]));
+  store.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
 }
 
 // Mirror pin state to server so it can be queried by the CLI. UI remains source of truth for itself.
@@ -2014,12 +2060,12 @@ function _applyModalFullscreen(modalId, on) {
 function toggleModalFullscreen(modalId) {
   const on = !_modalEl(modalId).classList.contains('fullscreen');
   _applyModalFullscreen(modalId, on);
-  localStorage.setItem(`modal-fullscreen-${modalId}`, String(on));
+  store.setItem(`modal-fullscreen-${modalId}`, String(on));
 }
 
 function loadModalFullscreen() {
   _forEachFullscreenModal((modalId) => {
-    if (localStorage.getItem(`modal-fullscreen-${modalId}`) === 'true') _applyModalFullscreen(modalId, true);
+    if (store.getItem(`modal-fullscreen-${modalId}`) === 'true') _applyModalFullscreen(modalId, true);
   });
 }
 
@@ -2056,8 +2102,8 @@ function initModalResize() {
   _forEachFullscreenModal((modalId, modal) => {
     const wKey = `modal-width-${modalId}`;
     const hKey = `modal-height-${modalId}`;
-    const savedW = localStorage.getItem(wKey);
-    const savedH = localStorage.getItem(hKey);
+    const savedW = store.getItem(wKey);
+    const savedH = store.getItem(hKey);
     if (savedW && savedH) {
       _setModalUserSize(modal, savedW, savedH);
       modal.classList.add('user-sized');
@@ -2091,16 +2137,16 @@ function initModalResize() {
       },
       onEnd() {
         if (w && h) {
-          localStorage.setItem(wKey, `${w}px`);
-          localStorage.setItem(hKey, `${h}px`);
+          store.setItem(wKey, `${w}px`);
+          store.setItem(hKey, `${h}px`);
         }
       },
     });
 
     handle.addEventListener('dblclick', () => {
       modal.classList.remove('user-sized');
-      localStorage.removeItem(wKey);
-      localStorage.removeItem(hKey);
+      store.removeItem(wKey);
+      store.removeItem(hKey);
     });
   });
 }
@@ -2108,7 +2154,7 @@ function initModalResize() {
 const MODAL_ZOOM_KEY = 'modal-zoom';
 const MODAL_ZOOM_MIN = 0.7;
 const MODAL_ZOOM_MAX = 2.0;
-let modalZoom = clampModalZoom(Number.parseFloat(localStorage.getItem(MODAL_ZOOM_KEY)) || 1);
+let modalZoom = clampModalZoom(Number.parseFloat(store.getItem(MODAL_ZOOM_KEY)) || 1);
 
 function clampModalZoom(v) {
   return Math.min(MODAL_ZOOM_MAX, Math.max(MODAL_ZOOM_MIN, v));
@@ -2123,7 +2169,7 @@ function adjustModalZoom(delta) {
   const next = delta === 0 ? 1 : clampModalZoom(Math.round((modalZoom + delta) * 10) / 10);
   if (next === modalZoom && delta !== 0) return;
   modalZoom = next;
-  localStorage.setItem(MODAL_ZOOM_KEY, String(modalZoom));
+  store.setItem(MODAL_ZOOM_KEY, String(modalZoom));
   applyModalZoom();
   showToast(`Text ${Math.round(modalZoom * 100)}%`);
 }
@@ -2722,7 +2768,7 @@ function renderAgentFooter() {
   footer.classList.add('visible');
   label.textContent = `Agents Log (${visible.length})`;
 
-  const collapsed = localStorage.getItem('agentFooterCollapsed') === 'true';
+  const collapsed = store.getItem('agentFooterCollapsed') === 'true';
   footer.classList.toggle('collapsed', collapsed);
   document.getElementById('agent-footer-toggle').innerHTML = collapsed ? '&#x25B4;' : '&#x25BE;';
 
@@ -2800,7 +2846,7 @@ function toggleAgentFooter() {
   const footer = document.getElementById('agent-footer');
   const collapsed = !footer.classList.contains('collapsed');
   footer.classList.toggle('collapsed', collapsed);
-  localStorage.setItem('agentFooterCollapsed', collapsed);
+  store.setItem('agentFooterCollapsed', collapsed);
   document.getElementById('agent-footer-toggle').innerHTML = collapsed ? '&#x25B4;' : '&#x25BE;';
 }
 
@@ -2951,6 +2997,26 @@ function highlightSelectedAgent() {
 //#region RENDERING
 let revealedPlanSessionId = null;
 let revealedStorageSessionId = null;
+
+// Opens a session and scrolls the sidebar to it, refetching first when the id
+// fell outside the session list the current filters asked for.
+async function revealSession(id) {
+  let session = sessions.find((s) => s.id === id);
+  if (!session) {
+    lastSessionsHash = '';
+    await fetchSessions();
+    session = sessions.find((s) => s.id === id);
+  }
+  const uncollapsed = session ? uncollapseFor(session) : false;
+  if (uncollapsed) persistCollapsedGroups();
+  expandSidebar();
+  await fetchTasks(id);
+  // fetchTasks skips its render when the session and task hash are unchanged.
+  if (uncollapsed) renderSessions();
+  const el = document.querySelector(`.session-item[data-session-id="${escSel(id)}"]`);
+  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function revealPlanSession(planSessionId) {
   if (revealedPlanSessionId === planSessionId) {
@@ -2959,13 +3025,7 @@ async function revealPlanSession(planSessionId) {
     return;
   }
   revealedPlanSessionId = planSessionId;
-  if (!sessions.some((s) => s.id === planSessionId)) {
-    lastSessionsHash = '';
-    await fetchSessions();
-  }
-  await fetchTasks(planSessionId);
-  const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(planSessionId)}"]`);
-  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  await revealSession(planSessionId);
 }
 
 async function showAllTasks() {
@@ -3017,15 +3077,10 @@ function renderAllTasks() {
   renderKanban();
 }
 
-function renderSessions() {
-  // Rebuilding the list under the pointer cancels an in-flight drop and would swallow a
-  // half-typed group name, and the SSE path can fire at any moment — defer instead.
-  if (sgDrag || sgIsEditing()) return;
-  // Update project dropdown
-  updateProjectDropdown();
-
-  // Filter pipeline: active filter → force-include revealed/current (non-pinned) sessions →
-  // project filter → search filter → ensure pinned/sticky sessions are always included
+// Filter pipeline: active filter → force-include revealed/current (non-pinned) sessions →
+// project filter → search filter → ensure pinned/sticky sessions are always included.
+// Pure over module state, so the session picker can ask for the same list without a render.
+function getFilteredSessions() {
   let filteredSessions = sessions;
   if (sessionFilter === 'active') {
     const activeSessionIds = new Set();
@@ -3109,6 +3164,18 @@ function renderSessions() {
     if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
   }
 
+  return filteredSessions;
+}
+
+function renderSessions() {
+  // Rebuilding the list under the pointer cancels an in-flight drop and would swallow a
+  // half-typed group name, and the SSE path can fire at any moment — defer instead.
+  if (sgDrag || sgIsEditing()) return;
+  // Update project dropdown
+  updateProjectDropdown();
+
+  const filteredSessions = getFilteredSessions();
+
   if (filteredSessions.length === 0) {
     let emptyMsg = 'No sessions found';
     let emptyHint = 'Tasks appear when you use Claude Code';
@@ -3140,13 +3207,8 @@ function renderSessions() {
     const total = session.taskCount;
     const percent = total > 0 ? Math.round((session.completed / total) * 100) : 0;
     const isActive = session.id === currentSessionId && viewMode === 'session';
-    // hasRecentLog carries the server's registry-idle correction: an open-but-idle
-    // terminal keeps touching its JSONL, so mtime alone is not proof of activity.
-    const isLive = session.hasRecentLog && Date.now() - Date.parse(session.modifiedAt) <= LIVE_INDICATOR_MS;
-    const rawName = session.name || session.id;
-    const sessionName = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(rawName)
-      ? rawName.slice(0, 8)
-      : rawName;
+    const isLive = isSessionLive(session);
+    const sessionName = sessionDisplayName(session);
     const useGrouped = sessionFilter === 'active' && session.project;
     const primaryName = useGrouped ? sessionName : session.project ? session.project.split('/').pop() : sessionName;
     const secondaryName = useGrouped ? null : session.project ? sessionName : null;
@@ -3169,7 +3231,7 @@ function renderSessions() {
     const showCtx = !!session.contextStatus;
     const linkedDocsCount = getSessionPreviewPaths(session.id).length;
     const bookmarksCount = loadPins(session.id).length;
-    const hasScratchpad = !!(localStorage.getItem(_sessionScratchpadKey(session.id)) || '').trim();
+    const hasScratchpad = !!(store.getItem(_sessionScratchpadKey(session.id)) || '').trim();
     const tempClass = session.hasRecentLog || session.inProgress || session.hasWaitingForUser ? 'warm' : 'stale';
     const sid = escAttrJs(session.id);
     return `
@@ -3205,13 +3267,22 @@ function renderSessions() {
         `;
   };
 
-  const groupPinned = localStorage.getItem('groupPinnedSessions') !== 'false';
+  const groupPinned = store.getItem('groupPinnedSessions') !== 'false';
   const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isPlacedPinned(s.id) && !isSessionActive(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
   const countHtml = (arr) => {
     const active = arr.reduce((n, s) => n + (isSessionActive(s) ? 1 : 0), 0);
     return `<span class="group-count" title="${active} active / ${arr.length} total">${active > 0 ? `<span class="group-count-active">${active}</span><span class="group-count-sep">/</span>` : ''}${arr.length}</span>`;
   };
+  // `ungroup` marks the label as the drop target for pulling an item out of a named group.
+  const sectionHtml = (key, text, ungroup, body) => {
+    const collapsed = collapsedProjectGroups.has(key);
+    const escPath = escapeHtml(key);
+    const title = ungroup ? 'Click to collapse — drop here to remove from a group' : 'Click to collapse';
+    return `<div class="sg-section-label sg-section-toggle${ungroup ? ' sg-ungroup-zone' : ''}${collapsed ? ' collapsed' : ''}" data-group-path="${escPath}" title="${escapeHtml(title)}">${groupChevronSvg(10)}<span>${text}</span></div>
+      <div class="sg-section-body${collapsed ? ' collapsed' : ''}" data-group-path="${escPath}">${body}</div>`;
+  };
+
   const renderGroupSessions = (sessions, pinKey) => {
     if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
     const gPinned = sessions.filter((s) => isPlacedPinned(s.id) && !isPlacedSticky(s.id));
@@ -3270,7 +3341,7 @@ function renderSessions() {
             </div>
             <div class="project-group-breadcrumb${nestedCls}" data-full-path="${escapedPath}" title="Click to copy path">${breadcrumbHtml}</div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}${nestedCls}" data-project-path="${escapedPath}">
-              ${renderGroupSessions(projectSessions, `__pinned_${projectPath}__`)}
+              ${renderGroupSessions(projectSessions, pinKey(projectPath))}
             </div>
           `;
   };
@@ -3298,7 +3369,7 @@ function renderSessions() {
   // flat = the "All sessions" view, which has no project sub-blocks.
   const sgSectionHtml = (flat) => {
     if (sessionGroups.length === 0) return '';
-    let out = '<div class="sg-section-label">Groups</div>';
+    let out = '';
     for (const group of sessionGroups) {
       const bucket = sgBuckets.get(group.id) || [];
       if (bucket.length === 0 && sgFiltering) continue;
@@ -3341,7 +3412,8 @@ function renderSessions() {
       out += sgHeaderHtml(group, countHtml(bucket));
       out += `<div class="session-group-sessions${collapsed ? ' collapsed' : ''}" data-group-id="${escapeHtml(group.id)}">${body}</div>`;
     }
-    return out;
+    if (!out) return '';
+    return sectionHtml(SECTION_GROUPS, 'Groups', false, out);
   };
 
   let html = '';
@@ -3389,37 +3461,42 @@ function renderSessions() {
     stableGroupOrder = [...keptOrder, ...newPaths];
     const sortedGroups = stableGroupOrder.filter((p) => groups.has(p)).map((p) => [p, groups.get(p)]);
 
-    // Rendered even when nothing is left under it: it is the drop target for ungrouping.
-    if (sessionGroups.length > 0) {
-      html += '<div class="sg-section-label sg-ungroup-zone" title="Drop here to remove from a group">Projects</div>';
-    }
-    for (const [projectPath, projectSessions] of sortedGroups) {
-      html += projectBlock(projectPath, projectSessions, false);
-    }
+    // The section header is rendered even when nothing is left under it: it is the drop target
+    // for ungrouping. Its body is skipped while collapsed — nothing would be visible, and this is
+    // the whole project list, re-parsed on every live refresh.
+    const sectioned = sessionGroups.length > 0;
+    let projectsHtml = '';
+    if (!sectioned || !collapsedProjectGroups.has(SECTION_PROJECTS)) {
+      for (const [projectPath, projectSessions] of sortedGroups) {
+        projectsHtml += projectBlock(projectPath, projectSessions, false);
+      }
 
-    if (ungrouped.length > 0 && sortedGroups.length > 0) {
-      const isCollapsed = collapsedProjectGroups.has('__ungrouped__');
-      html += `
+      if (ungrouped.length > 0 && sortedGroups.length > 0) {
+        const isCollapsed = collapsedProjectGroups.has('__ungrouped__');
+        projectsHtml += `
             <div class="project-group-header${isCollapsed ? ' collapsed' : ''}" data-group-path="__ungrouped__">
               ${groupChevronSvg()}
               <span class="group-name">Ungrouped</span>
               ${countHtml(ungrouped)}
             </div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
-              ${renderGroupSessions(ungrouped, '__pinned___ungrouped__')}
+              ${renderGroupSessions(ungrouped, pinKey('__ungrouped__'))}
             </div>
           `;
-    } else {
-      html += ungrouped.map(renderSessionCard).join('');
+      } else {
+        projectsHtml += ungrouped.map(renderSessionCard).join('');
+      }
     }
 
+    html += sectioned ? sectionHtml(SECTION_PROJECTS, 'Projects', true, projectsHtml) : projectsHtml;
+
     sessionsList.innerHTML = html;
   } else {
-    const ungroupZone =
-      sessionGroups.length > 0
-        ? '<div class="sg-section-label sg-ungroup-zone" title="Drop here to remove from a group">Sessions</div>'
-        : '';
-    sessionsList.innerHTML = html + sgSectionHtml(true) + ungroupZone + sgRest.map(renderSessionCard).join('');
+    const sectioned = sessionGroups.length > 0;
+    const restHtml =
+      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).join('');
+    const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml) : restHtml;
+    sessionsList.innerHTML = html + sgSectionHtml(true) + tail;
   }
 
   const navItems = getNavigableItems();
@@ -3853,9 +3930,15 @@ function sgKey(id) {
   return `__group_${id}__`;
 }
 
+// Collapse key of a project's pinned sub-section. The ungrouped spelling predates this helper
+// and is kept so saved collapse state still matches.
+function pinKey(projectPath) {
+  return projectPath === '__ungrouped__' ? '__pinned___ungrouped__' : `__pinned_${projectPath}__`;
+}
+
 function loadSessionGroups() {
   try {
-    const list = JSON.parse(localStorage.getItem(SESSION_GROUPS_KEY) || 'null')?.groups;
+    const list = JSON.parse(store.getItem(SESSION_GROUPS_KEY) || 'null')?.groups;
     sessionGroups = (Array.isArray(list) ? list : [])
       .filter((g) => g && typeof g.id === 'string')
       .map((g) => ({
@@ -3877,7 +3960,7 @@ function loadSessionGroups() {
 
 function persistSessionGroups() {
   try {
-    localStorage.setItem(SESSION_GROUPS_KEY, JSON.stringify({ version: 1, groups: sessionGroups }));
+    store.setItem(SESSION_GROUPS_KEY, JSON.stringify({ version: 1, groups: sessionGroups }));
   } catch (_) {}
 }
 
@@ -4414,14 +4497,24 @@ function getKbId(el) {
   return el.dataset.sessionId || el.dataset.groupPath || null;
 }
 
+// Every collapsible header class and the body class it opens. Order matters only in that a
+// header carries exactly one of these.
+const COLLAPSIBLE_BODY_CLASS = {
+  'pinned-sub-header': 'pinned-sub-items',
+  'session-group-header': 'session-group-sessions',
+  'sg-section-toggle': 'sg-section-body',
+  'project-group-header': 'project-group-sessions',
+};
+const COLLAPSIBLE_HEADER_SELECTOR = Object.keys(COLLAPSIBLE_BODY_CLASS)
+  .map((c) => `.${c}`)
+  .join(', ');
+
 function getGroupSessionsContainer(header) {
-  const cls = header.classList.contains('pinned-sub-header')
-    ? 'pinned-sub-items'
-    : header.classList.contains('session-group-header')
-      ? 'session-group-sessions'
-      : 'project-group-sessions';
+  const cls = Object.keys(COLLAPSIBLE_BODY_CLASS).find((c) => header.classList.contains(c));
+  if (!cls) return null;
   let el = header.nextElementSibling;
-  while (el && !el.classList.contains(cls)) el = el.nextElementSibling;
+  const bodyCls = COLLAPSIBLE_BODY_CLASS[cls];
+  while (el && !el.classList.contains(bodyCls)) el = el.nextElementSibling;
   return el;
 }
 
@@ -4448,16 +4541,27 @@ function getNavigableItems() {
       }
     }
   };
-  for (const el of sessionsList.children) {
-    if (el.classList.contains('project-group-header') || el.classList.contains('session-group-header')) {
-      items.push(el);
-      if (!collapsedProjectGroups.has(el.dataset.groupPath)) {
-        walkGroupContainer(getGroupSessionsContainer(el));
+  // A section label sits next to its body div rather than wrapping it, so the top level walks
+  // into the body to reach the blocks inside.
+  const walkTopLevel = (children) => {
+    for (const el of children) {
+      if (
+        el.classList.contains('project-group-header') ||
+        el.classList.contains('session-group-header') ||
+        el.classList.contains('sg-section-toggle')
+      ) {
+        items.push(el);
+        if (!el.classList.contains('sg-section-toggle') && !collapsedProjectGroups.has(el.dataset.groupPath)) {
+          walkGroupContainer(getGroupSessionsContainer(el));
+        }
+      } else if (el.classList.contains('session-item')) {
+        items.push(el);
+      } else if (el.classList.contains('sg-section-body') && !el.classList.contains('collapsed')) {
+        walkTopLevel(el.children);
       }
-    } else if (el.classList.contains('session-item')) {
-      items.push(el);
     }
-  }
+  };
+  walkTopLevel(sessionsList.children);
   return items;
 }
 
@@ -4518,7 +4622,7 @@ function setGroupCollapsed(header, collapsed) {
 
 function persistCollapsedGroups() {
   try {
-    localStorage.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
+    store.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
   } catch (_) {}
 }
 
@@ -4537,22 +4641,37 @@ function expandActiveGroups({ onlyNew = false } = {}) {
     if (!isSessionActive(s)) continue;
     activeIds.add(s.id);
     if (onlyNew && (!primed || prevActiveSessionIds.has(s.id))) continue;
-    if (collapsedProjectGroups.delete(s.project || '__ungrouped__')) changed = true;
-    // A named group wrapping that project (or the session itself) would keep it hidden.
-    const group = sgGroupForSession(s);
-    if (group && collapsedProjectGroups.delete(sgKey(group.id))) changed = true;
+    if (uncollapseFor(s)) changed = true;
   }
   prevActiveSessionIds = activeIds;
   if (changed) persistCollapsedGroups();
   // renderSessions() re-renders headers/containers from the updated set
 }
 
+// Drops every collapse key that could hide this session: its project, a named group wrapping
+// the project or the session itself, the pinned sub-sections of both, 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 keys = [
+    project,
+    pinKey(project),
+    group && sgKey(group.id),
+    group && `__pinned_group_${group.id}__`,
+    SECTION_GROUPS,
+    SECTION_PROJECTS,
+    SECTION_SESSIONS,
+  ];
+  let changed = false;
+  for (const key of keys) {
+    if (key && collapsedProjectGroups.delete(key)) changed = true;
+  }
+  return changed;
+}
+
 function isGroupHeader(el) {
-  return (
-    el.classList.contains('project-group-header') ||
-    el.classList.contains('pinned-sub-header') ||
-    el.classList.contains('session-group-header')
-  );
+  return el.matches(COLLAPSIBLE_HEADER_SELECTOR);
 }
 
 function findParentHeader(el) {
@@ -4614,16 +4733,12 @@ function activateSelectedSession(items) {
 }
 
 function setFocusZone(zone) {
-  const sidebar = document.querySelector('.sidebar');
   clearKbSelection();
   clearTaskSelection();
 
   focusZone = zone;
   if (zone === 'sidebar') {
-    if (sidebar.classList.contains('collapsed')) {
-      sidebar.classList.remove('collapsed');
-      localStorage.setItem('sidebar-collapsed', false);
-    }
+    expandSidebar();
     const items = getNavigableItems();
     if (items.length > 0) {
       const activeIdx = items.findIndex((el) => el.classList.contains('active'));
@@ -5030,19 +5145,122 @@ async function confirmDelete() {
 //#endregion
 
 //#region HELP
+// Each entry pairs a left and a right group onto the same grid rows, so their
+// headings sit level and the shorter group just leaves empty rows.
+// `combo` joins the keys with a plus (a chord) instead of listing them as
+// alternatives; `hub` marks rows that only work inside Claude Code Hub.
+const SHORTCUT_PAIRS = [
+  [
+    {
+      title: 'Navigate',
+      rows: [
+        { keys: ['J', '↓'], label: 'Next item' },
+        { keys: ['K', '↑'], label: 'Previous item' },
+        { keys: ['H', '←'], label: 'Left column / collapse group' },
+        { keys: ['L', '→'], label: 'Right column / expand group' },
+        { keys: ['Tab'], label: 'Switch sidebar ↔ board' },
+        { keys: ['Enter', 'Space'], label: 'Open selected item' },
+      ],
+    },
+    {
+      title: 'Session',
+      rows: [
+        { keys: ['P'], label: 'Open plan' },
+        { keys: ['Shift', 'P'], combo: true, label: 'Session picker' },
+        { keys: ['I'], label: 'Session info' },
+        { keys: ['.'], label: 'Pin / unpin' },
+        { keys: ['>'], label: 'Toggle sticky' },
+        { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session' },
+        { keys: ['Shift', 'L'], combo: true, label: 'Toggle session log' },
+        { keys: ['Shift', 'M'], combo: true, label: 'Open last message' },
+        { keys: ['J', 'K'], label: 'Previous / next message in detail' },
+      ],
+    },
+  ],
+  [
+    {
+      title: 'Board',
+      rows: [
+        { keys: ['Enter'], label: 'Toggle task detail panel' },
+        { keys: ['D'], label: 'Delete selected task' },
+        { keys: ['N'], label: 'Toggle scratchpad' },
+        { keys: ['R'], label: 'Refresh data' },
+        { keys: ['Esc'], label: 'Close panel / clear selection' },
+      ],
+    },
+    {
+      title: 'View',
+      rows: [
+        { keys: ['['], label: 'Toggle sidebar' },
+        { keys: ['T'], label: 'Toggle theme' },
+        { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
+        { keys: ['Ctrl', '+'], combo: true, label: 'Larger modal text' },
+        { keys: ['Ctrl', '−'], combo: true, label: 'Smaller modal text' },
+        { keys: ['Ctrl', '0'], combo: true, label: 'Reset modal text size' },
+        { keys: ['?'], label: 'Show this help' },
+      ],
+    },
+  ],
+  [
+    {
+      title: 'Copy',
+      rows: [
+        { keys: ['Shift', 'C'], combo: true, label: 'Session id' },
+        { keys: ['Ctrl', 'Shift', 'C'], combo: true, label: 'Resume command (claude -r <id>)' },
+      ],
+    },
+    {
+      title: 'Hub',
+      hub: true,
+      rows: [
+        { keys: ['M'], label: 'Jump to marketplace' },
+        { keys: ['$'], label: 'Jump to cost' },
+        { keys: ['Ctrl', 'M'], combo: true, label: 'Jump to memory' },
+        { keys: ['Ctrl', 'Alt', '←/→'], combo: true, label: 'Previous / next hub app' },
+        { keys: ['Alt', '1…9'], combo: true, label: 'Jump to hub app by number' },
+        { keys: ['Ctrl', 'Alt', 'P'], combo: true, label: 'Project picker' },
+      ],
+    },
+  ],
+];
+
+const EMPTY_GROUP = { title: '', rows: [] };
+
+// Interleaves each pair's rows left-then-right so CSS grid auto-placement lands
+// them on shared row tracks (see .shortcuts in style.css).
+function buildHelpShortcuts() {
+  const cells = [];
+  SHORTCUT_PAIRS.forEach(([left, right = EMPTY_GROUP], pair) => {
+    const first = pair === 0 ? ' sc-first' : '';
+    const sides = [
+      [left, 'sc-l'],
+      [right, 'sc-r'],
+    ];
+    const head = (g, side) =>
+      g.title ? `<div class="${escapeHtml(`sc-group ${side}${first}${g.hub ? ' sc-hub' : ''}`)}">${g.title}</div>` : '';
+    cells.push(sides.map(([g, side]) => head(g, side)).join(''));
+    for (let i = 0; i < Math.max(left.rows.length, right.rows.length); i++) {
+      for (const [group, side] of sides) {
+        const row = group.rows[i];
+        if (!row) continue;
+        const sep = row.combo ? '<span class="sc-plus">+</span>' : '<span class="sc-or">/</span>';
+        const keys = row.keys.map((k) => `<kbd>${escapeHtml(k)}</kbd>`).join(sep);
+        const cls = side + (group.hub ? ' sc-hub' : '');
+        cells.push(
+          `<dt class="${escapeHtml(cls)}">${keys}</dt><dd class="${escapeHtml(cls)}">${escapeHtml(row.label)}</dd>`,
+        );
+      }
+    }
+  });
+  return cells.join('');
+}
+
 function showHelpModal() {
   const modal = document.getElementById('help-modal');
+  const list = document.getElementById('help-shortcuts');
+  if (!list.childElementCount) list.innerHTML = buildHelpShortcuts();
+  list.classList.toggle('sc-standalone', !window.__HUB__?.enabled);
   modal.classList.add('visible');
-
-  // Handle keyboard shortcuts
-  const keyHandler = (e) => {
-    if (e.key === 'Escape' || e.key === '?') {
-      e.preventDefault();
-      closeHelpModal();
-      document.removeEventListener('keydown', keyHandler);
-    }
-  };
-  document.addEventListener('keydown', keyHandler);
 }
 
 function closeHelpModal() {
@@ -5104,7 +5322,7 @@ function showScratchpad(keyOverride) {
   _scratchpadKeyOverride = keyOverride || null;
   const key = _scratchpadKey();
   if (!key) return;
-  _scratchpadTextarea.value = localStorage.getItem(key) || '';
+  _scratchpadTextarea.value = store.getItem(key) || '';
   _scratchpadCharcount.textContent = `${_scratchpadTextarea.value.length} chars`;
   _scratchpadModal.classList.add('visible');
   _scratchpadTextarea.focus();
@@ -5124,12 +5342,12 @@ function saveScratchpad() {
   const key = _scratchpadKey();
   if (!key) return;
   const val = _scratchpadTextarea.value;
-  const had = !!(localStorage.getItem(key) || '').trim();
+  const had = !!(store.getItem(key) || '').trim();
   const has = !!val.trim();
   if (has) {
-    localStorage.setItem(key, val);
+    store.setItem(key, val);
   } else {
-    localStorage.removeItem(key);
+    store.removeItem(key);
   }
   if (had !== has && _isSessionScratchpadKey(key)) {
     renderSessions();
@@ -5151,9 +5369,8 @@ _scratchpadTextarea.addEventListener('input', () => {
 
 function _getStorageTotalSize() {
   let bytes = 0;
-  for (let i = 0; i < localStorage.length; i++) {
-    const k = localStorage.key(i);
-    bytes += k.length + localStorage.getItem(k).length;
+  for (const k of store.keys()) {
+    bytes += k.length + store.getItem(k).length;
   }
   return bytes * 2; // UTF-16
 }
@@ -5243,12 +5460,11 @@ function _renderStorageSessions() {
   const pinnedIds = [...new Set([...pinnedSessionIds, ...stickySessionIds])];
 
   const msgMap = new Map();
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
+  for (const key of store.keys()) {
     if (!key.startsWith('pinned-messages-')) continue;
     const sid = key.slice('pinned-messages-'.length);
     try {
-      const pins = JSON.parse(localStorage.getItem(key)) || [];
+      const pins = JSON.parse(store.getItem(key)) || [];
       if (pins.length) msgMap.set(sid, { pins, key });
     } catch {}
   }
@@ -5318,13 +5534,7 @@ function _renderStorageSessions() {
 async function _storageViewSession(id) {
   closeStorageManager();
   revealedStorageSessionId = id;
-  if (!sessions.some((s) => s.id === id)) {
-    lastSessionsHash = '';
-    await fetchSessions();
-  }
-  await fetchTasks(id);
-  const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(id)}"]`);
-  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  await revealSession(id);
 }
 
 function _storageUnpinSession(id) {
@@ -5337,7 +5547,7 @@ function _storageUnpinSession(id) {
 }
 
 function _storageClearSessionPins(sessionId) {
-  localStorage.removeItem(`pinned-messages-${sessionId}`);
+  store.removeItem(`pinned-messages-${sessionId}`);
   if (currentSessionId === sessionId) {
     currentPins = [];
     const el = document.getElementById('message-panel-pinned');
@@ -5350,12 +5560,12 @@ function _storageClearSessionPins(sessionId) {
 function _storageUnpinMessage(sessionId, pinId) {
   const key = `pinned-messages-${sessionId}`;
   try {
-    const pins = JSON.parse(localStorage.getItem(key)) || [];
+    const pins = JSON.parse(store.getItem(key)) || [];
     const idx = pins.findIndex((p) => p.id === pinId);
     if (idx < 0) return;
     pins.splice(idx, 1);
-    if (pins.length) localStorage.setItem(key, JSON.stringify(pins));
-    else localStorage.removeItem(key);
+    if (pins.length) store.setItem(key, JSON.stringify(pins));
+    else store.removeItem(key);
     if (currentSessionId === sessionId) {
       currentPins = pins;
       const el = document.getElementById('message-panel-pinned');
@@ -5368,10 +5578,9 @@ function _storageUnpinMessage(sessionId, pinId) {
 
 function _renderStorageScratchpads() {
   const allItems = [];
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
+  for (const key of store.keys()) {
     if (!key.startsWith('scratchpad-')) continue;
-    const val = localStorage.getItem(key) || '';
+    const val = store.getItem(key) || '';
     const isProject = key.startsWith('scratchpad-project:');
     const id = isProject ? key.slice('scratchpad-project:'.length) : key.slice('scratchpad-'.length);
     allItems.push({ key, id, isProject, chars: val.length });
@@ -5440,7 +5649,7 @@ function _storagePreviewPin(sessionId, pinId) {
   closeStorageManager();
   const key = `pinned-messages-${sessionId}`;
   try {
-    const pins = JSON.parse(localStorage.getItem(key)) || [];
+    const pins = JSON.parse(store.getItem(key)) || [];
     const pin = pins.find((p) => p.id === pinId);
     if (!pin) return;
     document.getElementById('msg-detail-pin-btn').style.display = 'none';
@@ -5454,18 +5663,17 @@ function _storagePreviewPin(sessionId, pinId) {
 }
 
 function _storageDeleteScratchpad(key) {
-  localStorage.removeItem(key);
+  store.removeItem(key);
   _renderStorageTab();
   _updateStorageTotal();
 }
 
 function _renderStorageLinkedDocs() {
   const entries = [];
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
+  for (const key of store.keys()) {
     if (!key.startsWith(PREVIEW_STORAGE_PREFIX)) continue;
     try {
-      const arr = JSON.parse(localStorage.getItem(key)) || [];
+      const arr = JSON.parse(store.getItem(key)) || [];
       if (Array.isArray(arr) && arr.length) {
         entries.push({ sessionId: key.slice(PREVIEW_STORAGE_PREFIX.length), paths: arr });
       }
@@ -5529,7 +5737,7 @@ function _storageUnlinkDoc(sessionId, path) {
 }
 
 function _storageClearLinkedDocs(sessionId) {
-  localStorage.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+  store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
   afterLinkedDocsChanged(sessionId);
 }
 
@@ -5539,8 +5747,7 @@ function _findOrphanedKeys() {
   const orphaned = [];
   for (const id of pinnedSessionIds) if (!known.has(id)) orphaned.push(`__pinned__${id}`);
   for (const id of stickySessionIds) if (!known.has(id)) orphaned.push(`__sticky__${id}`);
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
+  for (const key of store.keys()) {
     if (key.startsWith('pinned-messages-')) {
       if (!known.has(key.slice('pinned-messages-'.length))) orphaned.push(key);
     } else if (_isSessionScratchpadKey(key)) {
@@ -5575,7 +5782,7 @@ function cleanupOrphanedStorage() {
       stickySessionIds.delete(key.slice('__sticky__'.length));
       pinsChanged = true;
     } else {
-      localStorage.removeItem(key);
+      store.removeItem(key);
     }
   }
   if (pinsChanged) savePinnedSessions();
@@ -5616,6 +5823,7 @@ const MODAL_CLOSERS = {
   'team-modal': () => closeTeamModal(),
   'agent-modal': () => closeAgentModal(),
   'help-modal': () => closeHelpModal(),
+  'session-picker-modal': () => closeSessionPicker(),
 };
 
 document.addEventListener('keydown', (e) => {
@@ -5649,6 +5857,9 @@ document.addEventListener('keydown', (e) => {
       if (close) close();
       else document.getElementById(topId).classList.remove('visible');
       e.stopImmediatePropagation();
+    } else if (e.key === '?' && document.getElementById('help-modal').classList.contains('visible')) {
+      e.preventDefault();
+      closeHelpModal();
     } else if (
       e.code === 'KeyM' &&
       e.shiftKey &&
@@ -5718,6 +5929,12 @@ document.addEventListener('keydown', (e) => {
     showStorageManager();
     return;
   }
+  // Ctrl+Shift+P is the browser's own; only the bare chord opens the picker.
+  if (e.code === 'KeyP' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+    e.preventDefault();
+    openSessionPicker();
+    return;
+  }
   if (e.key === '.' || e.key === '>') {
     const sid = sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId;
     if (sid) {
@@ -5892,16 +6109,18 @@ document.addEventListener('keydown', (e) => {
     }
     return;
   }
-  if (e.code === 'KeyC' && e.shiftKey) {
+  if (e.code === 'KeyC' && e.shiftKey && !e.altKey && !e.metaKey) {
     e.preventDefault();
     if (!contextSid) {
       showToast('No session selected');
       return;
     }
+    const text = e.ctrlKey ? `claude -r ${contextSid}` : contextSid;
+    const label = e.ctrlKey ? 'resume command' : 'session id';
     navigator.clipboard
-      .writeText(contextSid)
-      .then(() => showToast(`Copied session id: ${contextSid.slice(0, 8)}`, 'success'))
-      .catch(() => showToast('Failed to copy session id'));
+      .writeText(text)
+      .then(() => showToast(`Copied ${label}: ${contextSid.slice(0, 8)}`, 'success'))
+      .catch(() => showToast(`Failed to copy ${label}`));
     return;
   }
   if (matchKey(e, 'KeyR')) {
@@ -5940,7 +6159,7 @@ let currentPreviewPath = null;
 function getSessionPreviewPaths(sessionId) {
   if (!sessionId) return [];
   try {
-    const raw = localStorage.getItem(PREVIEW_STORAGE_PREFIX + sessionId);
+    const raw = store.getItem(PREVIEW_STORAGE_PREFIX + sessionId);
     const arr = raw ? JSON.parse(raw) : [];
     return Array.isArray(arr) ? arr : [];
   } catch {
@@ -5952,14 +6171,14 @@ function addSessionPreviewPath(sessionId, filePath) {
   if (!sessionId || !filePath) return;
   const paths = getSessionPreviewPaths(sessionId).filter((p) => p !== filePath);
   paths.unshift(filePath);
-  localStorage.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths.slice(0, 20)));
+  store.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths.slice(0, 20)));
 }
 
 function removeSessionPreviewPath(sessionId, filePath) {
   if (!sessionId) return;
   const paths = getSessionPreviewPaths(sessionId).filter((p) => p !== filePath);
-  if (paths.length) localStorage.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths));
-  else localStorage.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+  if (paths.length) store.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths));
+  else store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
 }
 
 // Every surface that shows linked docs — info modal, session card badge, preview
@@ -6861,6 +7080,13 @@ function isSessionActive(s) {
   return s.hasRecentLog || s.inProgress > 0 || s.hasActiveAgents || s.hasWaitingForUser;
 }
 
+const SESSION_UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+function sessionDisplayName(session) {
+  const raw = session.name || session.id;
+  return SESSION_UUID_RE.test(raw) ? raw.slice(0, 8) : raw;
+}
+
 function formatDate(dateStr) {
   const date = new Date(dateStr);
   const now = new Date();
@@ -7077,7 +7303,7 @@ function renderMarkdown(text) {
 }
 
 function isLightTheme() {
-  const saved = localStorage.getItem('theme');
+  const saved = store.getItem('theme');
   return (
     document.body.classList.contains('light') || (!saved && window.matchMedia('(prefers-color-scheme: light)').matches)
   );
@@ -7383,13 +7609,13 @@ document.addEventListener('click', (e) => {
 
   if (e.target.closest('.pinned-ungroup-btn')) {
     e.stopPropagation();
-    localStorage.setItem('groupPinnedSessions', 'false');
+    store.setItem('groupPinnedSessions', 'false');
     renderSessions();
     return;
   }
 
   if (e.target.closest('.pinned-regroup-banner')) {
-    localStorage.setItem('groupPinnedSessions', 'true');
+    store.setItem('groupPinnedSessions', 'true');
     renderSessions();
     return;
   }
@@ -7414,7 +7640,7 @@ document.addEventListener('click', (e) => {
     }
   }
 
-  const header = e.target.closest('.session-group-header, .pinned-sub-header, .project-group-header');
+  const header = e.target.closest(COLLAPSIBLE_HEADER_SELECTOR);
   if (header) {
     setGroupCollapsed(header, !collapsedProjectGroups.has(header.dataset.groupPath));
   }
@@ -7503,11 +7729,11 @@ function toggleTheme() {
   if (isCurrentlyLight) {
     document.body.classList.remove('light');
     document.body.classList.add('dark-forced');
-    localStorage.setItem('theme', 'dark');
+    store.setItem('theme', 'dark');
   } else {
     document.body.classList.add('light');
     document.body.classList.remove('dark-forced');
-    localStorage.setItem('theme', 'light');
+    store.setItem('theme', 'light');
   }
   updateThemeIcon();
   updateThemeColor(!isCurrentlyLight);
@@ -7530,7 +7756,7 @@ function updateThemeIcon() {
 }
 
 function loadTheme() {
-  const saved = localStorage.getItem('theme');
+  const saved = store.getItem('theme');
   if (saved === 'light') {
     document.body.classList.add('light');
     document.body.classList.remove('dark-forced');
@@ -7543,7 +7769,7 @@ function loadTheme() {
   updateThemeColor(document.body.classList.contains('light'));
   syncHljsTheme();
   buildThemeMenu();
-  const colorTheme = localStorage.getItem('color-theme');
+  const colorTheme = store.getItem('color-theme');
   if (colorTheme) document.body.dataset.colorTheme = colorTheme;
   syncColorThemeSelect(colorTheme || 'ember');
 }
@@ -7599,10 +7825,10 @@ function syncColorThemeSelect(id) {
 function setColorTheme(id) {
   if (!id || id === 'ember') {
     delete document.body.dataset.colorTheme;
-    localStorage.removeItem('color-theme');
+    store.removeItem('color-theme');
   } else {
     document.body.dataset.colorTheme = id;
-    localStorage.setItem('color-theme', id);
+    store.setItem('color-theme', id);
   }
   syncColorThemeSelect(id);
 }
@@ -7610,10 +7836,17 @@ function setColorTheme(id) {
 //#endregion
 
 //#region SIDEBAR_LAYOUT
+function expandSidebar() {
+  const sidebar = document.querySelector('.sidebar');
+  if (!sidebar.classList.contains('collapsed')) return;
+  sidebar.classList.remove('collapsed');
+  store.setItem('sidebar-collapsed', false);
+}
+
 function toggleSidebar() {
   const sidebar = document.querySelector('.sidebar');
   const collapsed = sidebar.classList.toggle('collapsed');
-  localStorage.setItem('sidebar-collapsed', collapsed);
+  store.setItem('sidebar-collapsed', collapsed);
   if (collapsed) {
     sidebar.style.width = '';
     if (focusZone === 'sidebar') setFocusZone('board');
@@ -7625,10 +7858,10 @@ function toggleSidebar() {
 
 function loadSidebarState() {
   const sidebar = document.querySelector('.sidebar');
-  if (localStorage.getItem('sidebar-collapsed') === 'true') {
+  if (store.getItem('sidebar-collapsed') === 'true') {
     sidebar.classList.add('collapsed');
   }
-  const w = localStorage.getItem('sidebar-width');
+  const w = store.getItem('sidebar-width');
   if (w) {
     sidebar.style.setProperty('--sidebar-width', w);
   }
@@ -7683,7 +7916,7 @@ function initSidebarResize() {
     },
     onEnd() {
       sidebar.classList.remove('resizing');
-      localStorage.setItem('sidebar-width', sidebar.style.getPropertyValue('--sidebar-width'));
+      store.setItem('sidebar-width', sidebar.style.getPropertyValue('--sidebar-width'));
     },
   });
 }
@@ -7704,7 +7937,7 @@ function initPanelResize(panelId, handleId, cssVar, storageKey) {
     },
     onEnd() {
       panel.classList.remove('resizing');
-      localStorage.setItem(storageKey, panel.style.getPropertyValue(cssVar));
+      store.setItem(storageKey, panel.style.getPropertyValue(cssVar));
     },
   });
 }
@@ -7714,7 +7947,7 @@ function loadPanelWidths() {
     ['detail-panel', '--detail-panel-width'],
     ['message-panel', '--message-panel-width'],
   ].forEach(([id, cssVar]) => {
-    const w = localStorage.getItem(`${id}-width`);
+    const w = store.getItem(`${id}-width`);
     if (w) document.getElementById(id).style.setProperty(cssVar, w);
   });
 }
@@ -8027,6 +8260,174 @@ let _planSessionId = null;
 
 //#endregion
 
+//#region SESSION_PICKER
+// Snapshot of what the sidebar is showing, taken once per open: the picker only ever offers
+// sessions already on screen, and the recency order cannot change while it is up.
+let spSource = [];
+let spRows = [];
+let spIdx = 0;
+let spPeekTimer = null;
+let spPeekToken = 0;
+let spPeekedId = null;
+// Per-open cache: spSource is frozen while the picker is up, so a fetched log stays valid.
+const spPeekCache = new Map();
+
+function openSessionPicker() {
+  const input = document.getElementById('session-picker-input');
+  input.value = '';
+  spSource = getFilteredSessions().sort((a, b) => Date.parse(b.modifiedAt) - Date.parse(a.modifiedAt));
+  spPeekCache.clear();
+  document.getElementById('session-picker-modal').classList.add('visible');
+  renderSessionPicker();
+  input.focus();
+}
+
+function closeSessionPicker() {
+  spSetPeeking(false);
+  hideModalOverlay('session-picker-modal');
+}
+
+function spIsPeeking() {
+  return _modalEl('session-picker-modal').classList.contains('peeking');
+}
+
+function spSetPeeking(on) {
+  clearTimeout(spPeekTimer);
+  spPeekToken++;
+  spPeekedId = null;
+  _modalEl('session-picker-modal').classList.toggle('peeking', on);
+  if (on) spSchedulePeek();
+  else document.getElementById('session-picker-peek').innerHTML = '';
+}
+
+function spSchedulePeek() {
+  if (!spIsPeeking() || spRows[spIdx]?.id === spPeekedId) return;
+  clearTimeout(spPeekTimer);
+  spPeekTimer = setTimeout(spLoadPeek, 120);
+}
+
+function spRenderPeek(session, messages, note) {
+  const pane = document.getElementById('session-picker-peek');
+  const body =
+    messages === null
+      ? ''
+      : messages.length
+        ? `<div class="sp-peek-items">${renderMessageList(messages, { readOnly: true })}</div>`
+        : '<div class="msg-empty">No messages in this session</div>';
+  pane.innerHTML = `<div class="sp-peek-title"><span>${escapeHtml(sessionDisplayName(session))}</span><span>${note}</span></div>${body}`;
+  pane.scrollTop = pane.scrollHeight;
+}
+
+async function spLoadPeek() {
+  const session = spRows[spIdx];
+  if (!session) {
+    document.getElementById('session-picker-peek').innerHTML = '<div class="msg-empty">No session selected</div>';
+    return;
+  }
+  spPeekedId = session.id;
+  let messages = spPeekCache.get(session.id);
+  if (!messages) {
+    const token = ++spPeekToken;
+    spRenderPeek(session, null, 'loading…');
+    try {
+      messages = (await fetchSessionMessagesPage(session.id))?.messages || [];
+    } catch (_) {
+      messages = [];
+    }
+    if (token !== spPeekToken) return;
+    spPeekCache.set(session.id, messages);
+  }
+  spRenderPeek(session, messages, `last ${messages.length} entries`);
+}
+
+function spMatches(session, query) {
+  return (
+    fuzzyMatch(session.name, query) ||
+    fuzzyMatch(session.id, query) ||
+    fuzzyMatch(session.project, query) ||
+    fuzzyMatch(session.gitBranch, query)
+  );
+}
+
+// Spelled out rather than interpolated so the class never comes from a variable.
+const SP_DOTS = {
+  waiting: '<span class="activity-dot waiting"></span>',
+  live: '<span class="activity-dot live"></span>',
+  active: '<span class="activity-dot active"></span>',
+  idle: '<span class="activity-dot"></span>',
+};
+
+function spDotHtml(session) {
+  if (isWaitingSession(session)) return SP_DOTS.waiting;
+  if (isSessionLive(session)) return SP_DOTS.live;
+  return isActiveSession(session) ? SP_DOTS.active : SP_DOTS.idle;
+}
+
+function renderSessionPicker() {
+  const list = document.getElementById('session-picker-list');
+  const query = document.getElementById('session-picker-input').value.trim();
+  spRows = spSource.filter((s) => spMatches(s, query));
+
+  if (!spRows.length) {
+    spIdx = -1;
+    list.innerHTML = `<div class="sp-empty">${spSource.length ? 'No session matches' : 'No sessions in the current sidebar filter'}</div>`;
+    return;
+  }
+
+  list.innerHTML = spRows
+    .map((s, i) => {
+      const project = s.project ? s.project.split(/[/\\]/).pop() : '';
+      return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}" data-idx="${i}" title="${escapeHtml(s.id)}">
+        ${spDotHtml(s)}
+        <span class="sp-name">${escapeHtml(sessionDisplayName(s))}</span>
+        <span class="sp-project">${escapeHtml(project)}</span>
+        ${s.gitBranch ? `<span class="sp-branch">${escapeHtml(s.gitBranch)}</span>` : ''}
+        <span class="sp-count">${s.completed}/${s.taskCount}</span>
+        <span class="sp-time">${formatDate(s.modifiedAt)}</span>
+      </button>`;
+    })
+    .join('');
+  spSelect(0);
+}
+
+function spSelect(idx) {
+  const list = document.getElementById('session-picker-list');
+  list.children[spIdx]?.classList.remove('selected');
+  spIdx = Math.min(Math.max(idx, 0), spRows.length - 1);
+  const row = list.children[spIdx];
+  row?.classList.add('selected');
+  row?.scrollIntoView({ block: 'nearest' });
+  spSchedulePeek();
+}
+
+async function spOpen(idx) {
+  const session = spRows[idx];
+  if (!session) return;
+  closeSessionPicker();
+  await revealSession(session.id);
+}
+
+function initSessionPicker() {
+  const input = document.getElementById('session-picker-input');
+  input.addEventListener('input', renderSessionPicker);
+  // Bound on the input: the global handler returns early on INPUT targets.
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeSessionPicker();
+    else if (matchKey(e, 'ArrowDown') || (e.ctrlKey && e.key === 'n')) spSelect(spIdx + 1);
+    else if (matchKey(e, 'ArrowUp') || (e.ctrlKey && e.key === 'p')) spSelect(spIdx - 1);
+    else if (e.key === 'Enter') spOpen(spIdx);
+    else if (e.ctrlKey && e.code === 'Space') spSetPeeking(!spIsPeeking());
+    else return;
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  document.getElementById('session-picker-list').addEventListener('click', (e) => {
+    const row = e.target.closest('.sp-row');
+    if (row) spOpen(Number(row.dataset.idx));
+  });
+}
+//#endregion
+
 //#region PLAN
 function refreshOpenPlan() {
   if (!_planSessionId || !document.getElementById('plan-modal').classList.contains('visible')) return;
@@ -8617,7 +9018,7 @@ if ('serviceWorker' in navigator) {
 
 //#region INIT
 loadTheme();
-if (localStorage.getItem('sessions-filtersCollapsed') === 'true') {
+if (store.getItem('sessions-filtersCollapsed') === 'true') {
   document.getElementById('sessions-filters').classList.add('collapsed');
   document.getElementById('sessions-chevron').classList.add('rotated');
 }
@@ -8657,14 +9058,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
 loadSidebarState();
 try {
-  const cg = JSON.parse(localStorage.getItem('collapsedGroups') || '[]');
+  const cg = JSON.parse(store.getItem('collapsedGroups') || '[]');
   // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
   cg.forEach((p) => collapsedProjectGroups.add(p));
 } catch (_) {}
 loadSessionGroups();
 initSessionGroupsDnd();
+initSessionPicker();
 try {
-  const af = JSON.parse(localStorage.getItem('activityFilter') || '[]');
+  const af = JSON.parse(store.getItem('activityFilter') || '[]');
   // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
   af.forEach((k) => activityFilter.add(k));
 } catch (_) {}
@@ -8897,8 +9299,9 @@ document.addEventListener('keydown', (e) => {
   if (e.ctrlKey && e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
     fwd(e.key);
   }
-  // Its own branch: the Alt+digit case below requires !ctrlKey.
-  if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey && e.key.toLowerCase() === 'p') {
+  // 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 && /^[a-z]$/i.test(e.key)) {
     fwd(e.key);
   }
   if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && /^[1-9]$/.test(e.key)) {