claude-code-kanban 4.24.0 → 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' };
@@ -72,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'),
   };
 }
@@ -107,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;
   }
@@ -122,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;
@@ -274,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) {
@@ -369,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) {
@@ -581,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) {
@@ -596,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');
   }
@@ -687,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) {
@@ -742,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();
@@ -920,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>`;
 }
@@ -980,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);
@@ -998,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
@@ -1021,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) {
@@ -1479,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) {
@@ -1652,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();
   }
@@ -1660,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.
@@ -2022,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);
   });
 }
 
@@ -2064,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');
@@ -2099,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);
     });
   });
 }
@@ -2116,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));
@@ -2131,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)}%`);
 }
@@ -2730,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;';
 
@@ -2808,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;';
 }
 
@@ -2963,11 +3001,18 @@ let revealedStorageSessionId = null;
 // Opens a session and scrolls the sidebar to it, refetching first when the id
 // fell outside the session list the current filters asked for.
 async function revealSession(id) {
-  if (!sessions.some((s) => s.id === id)) {
+  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' });
 }
@@ -3186,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 `
@@ -3222,7 +3267,7 @@ 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) => {
@@ -3296,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>
           `;
   };
@@ -3435,7 +3480,7 @@ function renderSessions() {
               ${countHtml(ungrouped)}
             </div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
-              ${renderGroupSessions(ungrouped, '__pinned___ungrouped__')}
+              ${renderGroupSessions(ungrouped, pinKey('__ungrouped__'))}
             </div>
           `;
       } else {
@@ -3885,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) => ({
@@ -3909,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 (_) {}
 }
 
@@ -4571,7 +4622,7 @@ function setGroupCollapsed(header, collapsed) {
 
 function persistCollapsedGroups() {
   try {
-    localStorage.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
+    store.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
   } catch (_) {}
 }
 
@@ -4590,20 +4641,35 @@ 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;
-    // Which section holds it depends on the view, so open every one rather than re-deriving it.
-    for (const key of [SECTION_GROUPS, SECTION_PROJECTS, SECTION_SESSIONS]) {
-      if (collapsedProjectGroups.delete(key)) changed = true;
-    }
+    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.matches(COLLAPSIBLE_HEADER_SELECTOR);
 }
@@ -4667,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'));
@@ -5260,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();
@@ -5280,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();
@@ -5307,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
 }
@@ -5399,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 {}
   }
@@ -5487,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');
@@ -5500,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');
@@ -5518,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 });
@@ -5590,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';
@@ -5604,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 });
       }
@@ -5679,7 +5737,7 @@ function _storageUnlinkDoc(sessionId, path) {
 }
 
 function _storageClearLinkedDocs(sessionId) {
-  localStorage.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+  store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
   afterLinkedDocsChanged(sessionId);
 }
 
@@ -5689,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)) {
@@ -5725,7 +5782,7 @@ function cleanupOrphanedStorage() {
       stickySessionIds.delete(key.slice('__sticky__'.length));
       pinsChanged = true;
     } else {
-      localStorage.removeItem(key);
+      store.removeItem(key);
     }
   }
   if (pinsChanged) savePinnedSessions();
@@ -6102,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 {
@@ -6114,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
@@ -7246,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)
   );
@@ -7552,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;
   }
@@ -7672,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);
@@ -7699,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');
@@ -7712,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');
 }
@@ -7768,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);
 }
@@ -7779,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');
@@ -7794,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);
   }
@@ -7852,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'));
     },
   });
 }
@@ -7873,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));
     },
   });
 }
@@ -7883,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);
   });
 }
@@ -8202,20 +8266,80 @@ let _planSessionId = null;
 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) ||
@@ -8273,6 +8397,7 @@ function spSelect(idx) {
   const row = list.children[spIdx];
   row?.classList.add('selected');
   row?.scrollIntoView({ block: 'nearest' });
+  spSchedulePeek();
 }
 
 async function spOpen(idx) {
@@ -8291,6 +8416,7 @@ function initSessionPicker() {
     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();
@@ -8892,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');
 }
@@ -8932,7 +9058,7 @@ 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 (_) {}
@@ -8940,7 +9066,7 @@ 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 (_) {}
@@ -9173,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)) {