claude-code-kanban 4.24.0 → 4.26.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' };
@@ -11,6 +30,12 @@ let sessionFilter = FILTER_DEFAULTS.session;
 // Only meaningful while sessionFilter === 'active' (filterBySessions clears it otherwise)
 const activityFilter = new Set(); // kinds: 'waiting' | 'active'
 let sessionLimit = FILTER_DEFAULTS.limit;
+// Narrows the sidebar to the open session only. Kept out of FILTER_DEFAULTS/updateUrl because it
+// is not a filter — it has no select, no summary token, and never reaches the session picker.
+// Persisted in localStorage rather than the URL: the hub recreates each iframe at the app's base
+// URL, so a query string would not survive a hub reload.
+const ZEN_KEY = 'zenMode';
+let zenMode = store.getItem(ZEN_KEY) === 'true';
 let filterProject = FILTER_DEFAULTS.project; // null = all, '__recent__' = last 24h, or project path
 let recentProjects = new Set();
 let projectsCacheDirty = true;
@@ -72,9 +97,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 +130,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,11 +145,14 @@ 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;
   filterProject = FILTER_DEFAULTS.project;
+  zenMode = false;
+  store.removeItem(ZEN_KEY);
+  renderZenState();
   ownerFilter = '';
   searchQuery = '';
   viewMode = 'all';
@@ -176,7 +202,7 @@ async function fetchSessions(includeTasks = true) {
     if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
     // When server filters by activity, the focused session may not be active —
     // include it in pinned so the server still returns it.
-    if (sessionFilter === 'active' && currentSessionId) allPinnedIds.add(currentSessionId);
+    if ((sessionFilter === 'active' || zenMode) && currentSessionId) allPinnedIds.add(currentSessionId);
     const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
     const projectParam =
       filterProject && filterProject !== '__recent__' ? `&project=${encodeURIComponent(filterProject)}` : '';
@@ -274,7 +300,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 +395,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) {
@@ -476,6 +502,7 @@ async function fetchAgents(sessionId) {
       lastWaitingHash = waitHash;
       if (messagePanelOpen && currentMessages.length) renderMessages(currentMessages);
       maybeFollowLatest();
+      maybeAutoOpenWaiting();
     }
   } catch (e) {
     console.error('[fetchAgents]', e);
@@ -581,7 +608,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 +623,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 +714,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 +777,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 +953,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 +1018,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 +1037,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 +1060,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 +1527,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 +1700,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 +1708,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 +2070,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 +2112,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 +2147,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 +2164,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 +2179,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)}%`);
 }
@@ -2143,6 +2191,10 @@ function isZoomableModalOpen() {
   return document.querySelector('.modal-overlay.visible .modal-zoomable') !== null;
 }
 
+function isAnyModalOpen() {
+  return document.querySelector('.modal-overlay.visible') !== null;
+}
+
 const ZOOM_KEYS = { '+': 0.1, '=': 0.1, NumpadAdd: 0.1, '-': -0.1, _: -0.1, NumpadSubtract: -0.1, 0: 0, Numpad0: 0 };
 
 let _toastTimer = null;
@@ -2730,7 +2782,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 +2860,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 +3015,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' });
 }
@@ -3122,20 +3181,32 @@ function getFilteredSessions() {
   return filteredSessions;
 }
 
+// A live refresh would replace the zen panel's link-a-file input mid-type, the same way it
+// would swallow a half-typed group name. Off zen there is no panel, so skip the DOM probe.
+function zenPanelIsEditing() {
+  return zenMode && !!sessionsList.querySelector('.linked-doc-input');
+}
+
 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;
+  if (sgDrag || sgIsEditing() || zenPanelIsEditing()) return;
   // Update project dropdown
   updateProjectDropdown();
 
-  const filteredSessions = getFilteredSessions();
+  // Zen narrows the rendered list only — the session picker keeps calling getFilteredSessions()
+  // and still offers everything, or there would be no way to switch sessions without leaving zen.
+  const zenSession = zenMode && currentSessionId ? sessions.find((s) => s.id === currentSessionId) : null;
+  const filteredSessions = zenMode ? (zenSession ? [zenSession] : []) : getFilteredSessions();
 
   if (filteredSessions.length === 0) {
     let emptyMsg = 'No sessions found';
     let emptyHint = 'Tasks appear when you use Claude Code';
 
-    if (searchQuery) {
+    if (zenMode) {
+      emptyMsg = 'Zen mode: no session open';
+      emptyHint = 'Press Shift+Z to leave zen mode, then open a session';
+    } else if (searchQuery) {
       emptyMsg = `No results for "${searchQuery}"`;
       emptyHint = 'Try a different search term or clear the search';
     } else if (filterProject && sessionFilter === 'active') {
@@ -3164,9 +3235,7 @@ function renderSessions() {
     const isActive = session.id === currentSessionId && viewMode === 'session';
     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;
+    const projectHtml = renderProjectIdentity(session);
 
     const gitBranch = session.gitBranch ? escapeHtml(session.gitBranch) : null;
     const createdDisplay = session.createdAt ? formatDate(session.createdAt) : '';
@@ -3175,7 +3244,9 @@ function renderSessions() {
       session.createdAt && createdDisplay !== modifiedDisplay
         ? `Created ${createdDisplay} · Modified ${modifiedDisplay}`
         : modifiedDisplay;
-    const tooltip = [session.id, timeDisplay, gitBranch ? `Branch: ${gitBranch}` : ''].filter(Boolean).join(' | ');
+    const tooltip = [session.id, session.project, timeDisplay, gitBranch ? `Branch: ${gitBranch}` : '']
+      .filter(Boolean)
+      .join(' | ');
     const isTeam = session.isTeam;
     const memberCount = session.memberCount || 0;
 
@@ -3183,17 +3254,18 @@ function renderSessions() {
     const pinClass = pinState === 'sticky' ? ' sticky' : pinState === 'pinned' ? ' pinned' : '';
     const pinTitle =
       pinState === 'pinned' || pinState === 'sticky' ? 'Unpin session (.)' : 'Pin session (. · > sticky)';
-    const showCtx = !!session.contextStatus;
+    // Zen renders the full context detail below the card, so the compact bar would just repeat it.
+    const showCtx = !!session.contextStatus && !zenMode;
     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 `
           <button onclick="fetchTasks('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${tempClass} ${showCtx ? 'has-context' : ''}" title="${escapeHtml(tooltip)}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${sid}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
-            <div class="session-name">${escapeHtml(primaryName)}</div>
-            ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
+            <div class="session-name">${escapeHtml(sessionName)}</div>
+            ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
             ${session.planTitle ? `<div class="session-plan">${escapeHtml(session.planTitle)}</div>` : ''}
             ${renderGoalSubtitle(session)}
@@ -3222,7 +3294,22 @@ function renderSessions() {
         `;
   };
 
-  const groupPinned = localStorage.getItem('groupPinnedSessions') !== 'false';
+  // Zen draws one card and its panel, so it returns before the grouping below — leaving it in
+  // that chain would build the whole list only to discard it.
+  if (zenMode) {
+    sessionsList.innerHTML = `${renderSessionCard(zenSession)}
+      <div class="zen-panel">
+        ${renderContextDetail(zenSession.contextStatus) || '<div class="zen-panel-empty">No context data for this session</div>'}
+        ${renderScratchpadRow(zenSession)}
+        ${renderLinkedDocsHtml(zenSession.id)}
+        ${renderArtifactsHtml(zenSession.id)}
+      </div>`;
+    bindLinkedDocsHandlers(sessionsList.querySelector('.linked-docs-section'), zenSession.id);
+    ensureSessionArtifacts(zenSession.id);
+    return;
+  }
+
+  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 +3383,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 +3522,7 @@ function renderSessions() {
               ${countHtml(ungrouped)}
             </div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
-              ${renderGroupSessions(ungrouped, '__pinned___ungrouped__')}
+              ${renderGroupSessions(ungrouped, pinKey('__ungrouped__'))}
             </div>
           `;
       } else {
@@ -3500,7 +3587,7 @@ function renderSession() {
   sessionTitle.textContent = displayName;
 
   // Build meta text with project path and description
-  const projectName = session.project ? session.project.split('/').pop() : null;
+  const projectName = session.project ? pathBasename(session.project) : null;
   const metaParts = [`${currentTasks.length} tasks`];
   if (projectName) {
     metaParts.push(projectName);
@@ -3885,9 +3972,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 +4002,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 +4664,7 @@ function setGroupCollapsed(header, collapsed) {
 
 function persistCollapsedGroups() {
   try {
-    localStorage.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
+    store.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
   } catch (_) {}
 }
 
@@ -4590,20 +4683,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;
-    // 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-section only when the card renders inside
+// it (pinned, not sticky, idle — see renderGroupSessions), and — since which section holds it
+// depends on the view — every section header. Returns whether anything changed.
+function uncollapseFor(session) {
+  const project = session.project || '__ungrouped__';
+  const group = sgGroupForSession(session);
+  const inPinned = isPlacedPinned(session.id) && !isPlacedSticky(session.id) && !isSessionActive(session);
+  const keys = [
+    project,
+    inPinned && pinKey(project),
+    group && sgKey(group.id),
+    group && inPinned && `__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 +4777,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'));
@@ -5132,6 +5238,7 @@ const SHORTCUT_PAIRS = [
         { keys: ['['], label: 'Toggle sidebar' },
         { keys: ['T'], label: 'Toggle theme' },
         { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
+        { keys: ['Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
         { keys: ['Ctrl', '+'], combo: true, label: 'Larger modal text' },
         { keys: ['Ctrl', '−'], combo: true, label: 'Smaller modal text' },
         { keys: ['Ctrl', '0'], combo: true, label: 'Reset modal text size' },
@@ -5260,7 +5367,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 +5387,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 +5414,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
 }
@@ -5346,7 +5452,7 @@ function _groupByProject(sessionIds) {
 
 function _projectLabel(project) {
   if (project === '(no project)') return '(no project)';
-  return project.split(/[/\\]/).pop() || project;
+  return pathBasename(project);
 }
 
 function _renderProjectGroup(label, meta, innerHtml) {
@@ -5399,12 +5505,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 +5592,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 +5605,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 +5623,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 +5694,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 +5708,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 +5782,7 @@ function _storageUnlinkDoc(sessionId, path) {
 }
 
 function _storageClearLinkedDocs(sessionId) {
-  localStorage.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+  store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
   afterLinkedDocsChanged(sessionId);
 }
 
@@ -5689,8 +5792,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 +5827,7 @@ function cleanupOrphanedStorage() {
       stickySessionIds.delete(key.slice('__sticky__'.length));
       pinsChanged = true;
     } else {
-      localStorage.removeItem(key);
+      store.removeItem(key);
     }
   }
   if (pinsChanged) savePinnedSessions();
@@ -5787,7 +5889,7 @@ document.addEventListener('keydown', (e) => {
   }
 
   // Modal guard — only Escape, Shift+M, and msg-detail J/K navigation pass through
-  if (document.querySelector('.modal-overlay.visible')) {
+  if (isAnyModalOpen()) {
     if (e.key === 'Escape') {
       if (_scratchpadModal.classList.contains('visible')) {
         closeScratchpad();
@@ -5872,6 +5974,11 @@ document.addEventListener('keydown', (e) => {
     showStorageManager();
     return;
   }
+  if (e.code === 'KeyZ' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+    e.preventDefault();
+    toggleZenMode();
+    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();
@@ -6102,7 +6209,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 +6221,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
@@ -6419,11 +6526,11 @@ function renderLinkedDocsHtml(sessionId) {
   const body = paths.length
     ? `<ul class="linked-doc-list">${items}</ul>`
     : '<div class="linked-docs-empty">No linked files yet</div>';
-  return `<div class="linked-docs-section" style="margin-bottom:16px;font-size:12px;">
-    <div style="font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px;">
+  return `<div class="linked-docs-section panel-section">
+    <div class="panel-section-header">
       ${linkSvg(12)}
       <span>Linked documents</span>
-      <span style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:0 6px;font-size:10px;color:var(--text-secondary);">${paths.length}</span>
+      <span class="panel-section-count">${paths.length}</span>
       <button type="button" class="linked-docs-add-btn" title="Link a file" aria-label="Link a file">+</button>
     </div>
     <div class="linked-doc-editor-slot"></div>
@@ -6431,6 +6538,63 @@ function renderLinkedDocsHtml(sessionId) {
   </div>`;
 }
 
+// Artifacts are read out of the transcript rather than stored with the session, so
+// the list arrives after the panel is already on screen and the slot — always
+// rendered, empty or not — is patched in place once it does.
+const artifactsBySession = new Map();
+const artifactsInFlight = new Set();
+
+function artifactLabel(a) {
+  if (a.title) return a.title;
+  return a.path ? pathBasename(a.path).replace(/\.html?$/i, '') : 'Artifact';
+}
+
+function artifactsInnerHtml(sessionId) {
+  const list = artifactsBySession.get(sessionId) || [];
+  if (!list.length) return '';
+  const items = list
+    .map(
+      (a) => `<li class="artifact-item">
+        <a class="artifact-link" href="${escapeHtml(a.url)}" target="_blank" rel="noopener" title="${escapeHtml(a.url)}">${escapeHtml(artifactLabel(a))}</a>
+        <span class="row-actions artifact-actions">
+          <button type="button" onclick="copyWithFeedback('${escAttrJs(a.url)}', this)" title="Copy link" aria-label="Copy artifact link">${ICON_COPY}</button>
+        </span>
+      </li>`,
+    )
+    .join('');
+  return `<div class="panel-section-header">
+      ${ICON_OPEN_EXTERNAL}
+      <span>Artifacts</span>
+      <span class="panel-section-count">${list.length}</span>
+    </div>
+    <ul class="artifact-list">${items}</ul>`;
+}
+
+function renderArtifactsHtml(sessionId) {
+  return `<div class="artifacts-section panel-section" data-artifacts-for="${escapeHtml(sessionId)}">${artifactsInnerHtml(sessionId)}</div>`;
+}
+
+// Always asks: the server holds the scan until the transcript grows, so a repeat
+// costs one stat, and an artifact published while the panel is open still appears.
+async function ensureSessionArtifacts(sessionId) {
+  if (!sessionId || artifactsInFlight.has(sessionId)) return;
+  artifactsInFlight.add(sessionId);
+  try {
+    const res = await fetch(`/api/sessions/${sessionId}/artifacts`);
+    if (!res.ok) return;
+    const data = await res.json();
+    artifactsBySession.set(sessionId, data.artifacts || []);
+  } catch (_) {
+    return;
+  } finally {
+    artifactsInFlight.delete(sessionId);
+  }
+  const html = artifactsInnerHtml(sessionId);
+  for (const slot of document.querySelectorAll(`[data-artifacts-for="${CSS.escape(sessionId)}"]`)) {
+    slot.innerHTML = html;
+  }
+}
+
 // One delegated listener per section: the list is re-rendered on every change, so
 // per-row handlers would only be rebound each time anyway.
 function bindLinkedDocsHandlers(container, sessionId) {
@@ -6504,6 +6668,9 @@ async function linkFileByPath(sessionId, raw, slot) {
       fail(data.error || 'File not found');
       return;
     }
+    // Close the editor before the refresh: a sidebar panel defers its re-render while an
+    // input is open, so leaving it up would hide the file that was just linked.
+    if (slot) slot.innerHTML = '';
     setSessionDocLink(sessionId, data.path, false);
     showToast('Linked to session', 'success');
   } catch {
@@ -6827,6 +6994,19 @@ function maybeFollowLatest() {
   }
 }
 
+// A new answerable ask opens its modal on its own, but only onto an empty
+// screen: an open modal means the user is reading something, so the ask stays
+// on the card and the badge until they get to it. Each ask id is offered once,
+// so closing the modal does not bring it back on the next poll.
+let lastAutoOpenedWaitingId = null;
+function maybeAutoOpenWaiting() {
+  if (!isWaitingAnswerable() || !isWaitingFresh()) return;
+  if (currentWaiting.id === lastAutoOpenedWaitingId || isAnyModalOpen()) return;
+  lastAutoOpenedWaitingId = currentWaiting.id;
+  msgDetailFollowLatest = true;
+  maybeFollowLatest();
+}
+
 function isWaitingFresh() {
   if (!currentWaiting?.timestamp) return false;
   return Date.now() - new Date(currentWaiting.timestamp).getTime() < WAITING_TTL_MS;
@@ -7030,6 +7210,24 @@ function sessionDisplayName(session) {
   return SESSION_UUID_RE.test(raw) ? raw.slice(0, 8) : raw;
 }
 
+// Project paths arrive in the OS spelling, so a Windows path is backslash-separated.
+function pathBasename(p) {
+  return p.split(/[/\\]/).filter(Boolean).pop() || p;
+}
+
+// `session.worktree` is resolved server-side from the `.git` pointer file, so it holds for a
+// worktree parked beside its repo as well as one under <repo>/.claude/worktrees/.
+function renderProjectIdentity(session) {
+  if (!session.project) return null;
+  const wt = session.worktree;
+  if (!wt) return escapeHtml(pathBasename(session.project));
+  const repo = pathBasename(wt.repo);
+  // Worktrees beside the repo are conventionally named `<repo>-<branch>`, and repeating the
+  // repo inside a chip that already sits next to it wastes the whole width of the card.
+  const name = wt.name.startsWith(repo) ? wt.name.slice(repo.length).replace(/^[-._]/, '') || wt.name : wt.name;
+  return `${escapeHtml(repo)}<span class="wt-chip" title="Worktree of ${escapeHtml(wt.repo)}">⑂ ${escapeHtml(name)}</span>`;
+}
+
 function formatDate(dateStr) {
   const date = new Date(dateStr);
   const now = new Date();
@@ -7246,7 +7444,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)
   );
@@ -7467,6 +7665,24 @@ function renderFilterState() {
   document.getElementById('filter-menu-btn')?.classList.toggle('has-filters', short.length > 0);
 }
 
+function toggleZenMode() {
+  zenMode = !zenMode;
+  store.setItem(ZEN_KEY, String(zenMode));
+  renderZenState();
+  if (zenMode) closeFilterMenu();
+  renderSessions();
+  // The open session may be outside the current server page/filter; refetch pins it in.
+  if (zenMode) fetchSessions(false);
+}
+
+function renderZenState() {
+  const btn = document.getElementById('zen-mode-btn');
+  if (!btn) return;
+  btn.classList.toggle('active', zenMode);
+  btn.setAttribute('aria-pressed', String(zenMode));
+  btn.title = zenMode ? 'Zen mode on — show all sessions (Shift+Z)' : 'Zen mode: current session only (Shift+Z)';
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function filterBySessions(value) {
   sessionFilter = value;
@@ -7552,13 +7768,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 +7888,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 +7915,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 +7928,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 +7984,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 +7995,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 +8017,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 +8075,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 +8096,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 +8106,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);
   });
 }
@@ -7901,6 +8124,7 @@ async function showSessionInfoModal(sessionId) {
   _planSessionId = sessionId;
   const cachedTasks = currentSessionId === sessionId ? currentTasks : [];
   showInfoModal(session, null, cachedTasks, null, null);
+  ensureSessionArtifacts(sessionId);
 
   const rerender = (teamConfig, tasks, planContent, parentInfo) => {
     if (_planSessionId !== sessionId) return; // user opened a different modal
@@ -7959,7 +8183,20 @@ function updateStickyBtnState() {
 // carry information. The full path stays in the tooltip and the copy button.
 function abbreviateScratchpadDir(dir) {
   const sep = dir.includes('\\') ? '\\' : '/';
-  return ['$tmp', '…', ...dir.split(/[/\\]/).slice(-2)].join(sep);
+  return dir.split(/[/\\]/).slice(-2).join(sep);
+}
+
+function renderScratchpadRow(session) {
+  const dir = session?.scratchpadDir;
+  if (!dir) return '';
+  return `<div class="zen-scratchpad">
+    <span class="zen-scratchpad-label">Scratchpad</span>
+    <span class="zen-scratchpad-path" title="${escapeHtml(dir)}">${escapeHtml(abbreviateScratchpadDir(dir))}</span>
+    <span class="row-actions">
+      <button onclick="copyWithFeedback('${escAttrJs(dir)}', this)" title="Copy">${ICON_COPY}</button>
+      <button data-folder="${escapeHtml(dir)}" onclick="openFolderInEditor(this.dataset.folder)" title="Open in editor">${ICON_OPEN_EXTERNAL}</button>
+    </span>
+  </div>`;
 }
 
 function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
@@ -8074,6 +8311,7 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   }
 
   html += renderLinkedDocsHtml(session.id);
+  html += renderArtifactsHtml(session.id);
 
   // Team info section
   if (teamConfig) {
@@ -8202,20 +8440,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 +8571,7 @@ function spSelect(idx) {
   const row = list.children[spIdx];
   row?.classList.add('selected');
   row?.scrollIntoView({ block: 'nearest' });
+  spSchedulePeek();
 }
 
 async function spOpen(idx) {
@@ -8291,6 +8590,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 +9192,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 +9232,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 +9240,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 (_) {}
@@ -9081,6 +9381,7 @@ ownerFilter = urlState.owner || '';
 searchQuery = urlState.search || '';
 
 renderFilterState();
+renderZenState();
 pinnedSessionIds = loadPinnedSessions();
 stickySessionIds = loadStickySessions();
 setupEventSource();
@@ -9173,8 +9474,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)) {