claude-code-kanban 4.25.0 → 4.27.0

package/public/app.js

@@ -30,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;
@@ -144,6 +150,9 @@ function resetState() {
   sessionFilter = FILTER_DEFAULTS.session;
   sessionLimit = FILTER_DEFAULTS.limit;
   filterProject = FILTER_DEFAULTS.project;
+  zenMode = false;
+  store.removeItem(ZEN_KEY);
+  renderZenState();
   ownerFilter = '';
   searchQuery = '';
   viewMode = 'all';
@@ -191,15 +200,16 @@ async function fetchSessions(includeTasks = true) {
     const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
     if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
     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);
     const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
+    // The focused session must come back whatever the filters say: renderSession and the
+    // info modal both look it up in `sessions` and bail when it is absent, so a session
+    // opened from outside the current filter would leave the view on the previous one.
+    const includeParam = currentSessionId ? `&include=${encodeURIComponent(currentSessionId)}` : '';
     const projectParam =
       filterProject && filterProject !== '__recent__' ? `&project=${encodeURIComponent(filterProject)}` : '';
     const filterParam = sessionFilter === 'active' ? '&filter=active' : '';
     const sessionsPromise = fetch(
-      `/api/sessions?limit=${sessionLimit}${pinnedParam}${projectParam}${filterParam}`,
+      `/api/sessions?limit=${sessionLimit}${pinnedParam}${includeParam}${projectParam}${filterParam}`,
     ).then((r) => r.json());
 
     let newSessions, newTasks;
@@ -228,6 +238,16 @@ async function fetchSessions(includeTasks = true) {
   }
 }
 
+// One session by id, ignoring every sidebar filter — that is what `include` means.
+async function fetchSessionById(id) {
+  try {
+    const r = await fetch(`/api/sessions?limit=1&include=${encodeURIComponent(id)}`);
+    return r.ok ? (await r.json()).find((s) => s.id === id) || null : null;
+  } catch (_) {
+    return null;
+  }
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function handleSearch(query) {
   searchQuery = query.toLowerCase().trim();
@@ -407,14 +427,8 @@ async function fetchTasks(sessionId) {
     document.getElementById('message-toggle')?.style.removeProperty('display');
     const res = await fetch(`/api/sessions/${sessionId}`);
 
-    let newTasks;
-    if (res.ok) {
-      newTasks = await res.json();
-    } else if (res.status === 404) {
-      newTasks = [];
-    } else {
-      throw new Error(`Failed to fetch tasks: ${res.status}`);
-    }
+    if (!res.ok) throw new Error(`Failed to fetch tasks: ${res.status}`);
+    const newTasks = await res.json();
 
     const hash = JSON.stringify(newTasks);
     if (sessionId === currentSessionId && hash === lastCurrentTasksHash) {
@@ -426,6 +440,7 @@ async function fetchTasks(sessionId) {
     if (agentLogMode && sessionId !== currentSessionId) exitAgentLogMode();
     if (sessionId !== currentSessionId && document.getElementById('scratchpad-modal').classList.contains('visible'))
       closeScratchpad();
+    if (sessionId !== currentSessionId && detailPanel.classList.contains('visible')) closeDetailPanel();
     if (revealedPlanSessionId && sessionId !== revealedPlanSessionId) {
       revealedPlanSessionId = null;
     }
@@ -493,6 +508,7 @@ async function fetchAgents(sessionId) {
       lastWaitingHash = waitHash;
       if (messagePanelOpen && currentMessages.length) renderMessages(currentMessages);
       maybeFollowLatest();
+      maybeAutoOpenWaiting();
     }
   } catch (e) {
     console.error('[fetchAgents]', e);
@@ -1144,11 +1160,22 @@ function renderMessageListBody(messages) {
 
     const clickable = `data-msg-idx="${i}" onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
     const pinBtn = renderMsgPinBtn(m, i);
+
     if (m.type === 'user') {
       if (m.systemLabel) {
+        // A message another agent sent into this session (subagent hand-back, peer
+        // session) is agent output: the agent icon, a sender label, and a markdown
+        // preview of the report — never the person icon.
+        const preview = m.agentMessage ? buildAssistantPreview(m.fullText || m.text) : null;
+        const bodyHtml = preview?.md
+          ? `<div class="msg-text msg-text-md">
+              <div class="msg-md-content rendered-md${preview.remainder ? ' is-truncated' : ''}">${renderMarkdown(preview.md)}</div>${preview.remainder ? `<div class="msg-md-more">${escapeHtml(preview.remainder)}</div>` : ''}
+            </div>`
+          : '';
+        const queuedTag = m.queued ? '<span class="msg-queued-tag">queued</span>' : '';
         parts.push(`<div class="msg-item msg-system" ${clickable}>
-            ${MSG_ICON_SYSTEM}
-            <div class="msg-body"><div class="msg-text"><code>${escapeHtml(m.systemLabel)}</code></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${pinBtn}
+            ${m.agentMessage ? ICON_AGENT : MSG_ICON_SYSTEM}
+            <div class="msg-body"><div class="msg-text"><code>${escapeHtml(m.systemLabel)}</code></div>${bodyHtml}<div class="msg-time">${formatDate(m.timestamp)}${queuedTag}</div></div>${pinBtn}
           </div>`);
       } else {
         const cmd = parseCommandMessage(m.text);
@@ -1382,9 +1409,13 @@ function clearWaitingUi() {
   waitingCustomDraft = {};
   if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
     // In follow mode stay in the modal and swap to the latest message —
-    // closing it would silently drop the user out of following.
-    if (msgDetailFollowLatest && currentMessages.length) showMsgDetail(currentMessages.length - 1);
-    else closeMsgDetailModal();
+    // closing it would silently drop the user out of following. An ask that
+    // opened its own window is the exception: there was no following to drop.
+    if (msgDetailFollowLatest && !waitingDetailAutoOpened && currentMessages.length) {
+      showMsgDetail(currentMessages.length - 1);
+    } else {
+      closeMsgDetailModal();
+    }
   }
   // The saved-plan modal stays open after a decision — only its approval row goes
   document.getElementById('plan-approval-footer')?.remove();
@@ -1975,7 +2006,7 @@ function showMsgDetail(idx) {
     const rawText = stripAnsi(m.fullText || m.text || '');
     const cmd = m.type === 'user' ? parseCommandMessage(rawText) : null;
     document.getElementById('msg-detail-title').textContent =
-      m.type === 'assistant' ? 'Claude' : m.systemLabel ? 'System' : 'User';
+      m.type === 'assistant' ? 'Claude' : m.agentMessage ? m.systemLabel : m.systemLabel ? 'System' : 'User';
     document.getElementById('msg-detail-agent-btn').style.display = 'none';
     const userExtras = m.type === 'user' ? renderUserAttachments(m) : '';
     if (m.compactSummary) {
@@ -2013,6 +2044,7 @@ function showMsgDetail(idx) {
 function closeMsgDetailModal() {
   hideModalOverlay('msg-detail-modal');
   msgDetailFollowLatest = false;
+  waitingDetailAutoOpened = false;
   // Drop the message highlight on close, mirroring task-card behavior.
   msgHighlightDimmed = true;
   const container = document.getElementById('message-panel-content');
@@ -2181,6 +2213,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;
@@ -3007,6 +3043,13 @@ async function revealSession(id) {
     await fetchSessions();
     session = sessions.find((s) => s.id === id);
   }
+  if (!session) {
+    // The id is outside the list the filters asked for. renderSession bails on a session
+    // missing from `sessions`, so pull that one row in before opening it; later polls
+    // keep it, because fetchSessions pins currentSessionId.
+    session = await fetchSessionById(id);
+    if (session) sessions.push(session);
+  }
   const uncollapsed = session ? uncollapseFor(session) : false;
   if (uncollapsed) persistCollapsedGroups();
   expandSidebar();
@@ -3110,7 +3153,10 @@ function getFilteredSessions() {
     }
   }
   if (filterProject) {
-    filteredSessions = filteredSessions.filter((s) => matchesProjectFilter(s.project));
+    // The open session keeps its row even when it belongs to another project, so that
+    // revealing one by id has something to scroll to. Same exemption the active branch
+    // above already makes, for the same reason.
+    filteredSessions = filteredSessions.filter((s) => matchesProjectFilter(s.project) || s.id === currentSessionId);
   }
 
   if (activityFilter.size > 0) {
@@ -3167,20 +3213,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') {
@@ -3209,9 +3267,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) : '';
@@ -3220,7 +3276,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;
 
@@ -3228,7 +3286,8 @@ 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 = !!(store.getItem(_sessionScratchpadKey(session.id)) || '').trim();
@@ -3237,8 +3296,8 @@ function renderSessions() {
     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)}
@@ -3267,6 +3326,24 @@ function renderSessions() {
         `;
   };
 
+  // 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>
+      ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}`;
+    bindLinkedDocsHandlers(sessionsList.querySelector('.linked-docs-section'), zenSession.id);
+    artifactsSection.load(zenSession.id);
+    scratchFilesSection.load(zenSession.id);
+    if (zenSession.hasWorkflow) pollWorkflowLive(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);
@@ -3539,13 +3616,18 @@ function renderSession() {
   const session = sessions.find((s) => s.id === currentSessionId);
   if (!session) return;
 
+  // Opening the session, not opening a linked-docs surface: the card badge is the
+  // first place a pad shows up, and it would otherwise stay at zero until the user
+  // happened to open the info modal or zen panel.
+  loadSessionPads(currentSessionId);
+
   const displayName =
     session.customTitle || session.name || session.gitBranch || session.description || currentSessionId;
 
   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);
@@ -4649,16 +4731,18 @@ function expandActiveGroups({ onlyNew = false } = {}) {
 }
 
 // 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.
+// 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,
-    pinKey(project),
+    inPinned && pinKey(project),
     group && sgKey(group.id),
-    group && `__pinned_group_${group.id}__`,
+    group && inPinned && `__pinned_group_${group.id}__`,
     SECTION_GROUPS,
     SECTION_PROJECTS,
     SECTION_SESSIONS,
@@ -5194,6 +5278,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' },
@@ -5407,7 +5492,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) {
@@ -5672,12 +5757,8 @@ function _renderStorageLinkedDocs() {
   const entries = [];
   for (const key of store.keys()) {
     if (!key.startsWith(PREVIEW_STORAGE_PREFIX)) continue;
-    try {
-      const arr = JSON.parse(store.getItem(key)) || [];
-      if (Array.isArray(arr) && arr.length) {
-        entries.push({ sessionId: key.slice(PREVIEW_STORAGE_PREFIX.length), paths: arr });
-      }
-    } catch {}
+    const paths = readStoredList(key);
+    if (paths.length) entries.push({ sessionId: key.slice(PREVIEW_STORAGE_PREFIX.length), paths });
   }
   if (!entries.length) return '<div class="storage-empty">No linked documents</div>';
 
@@ -5738,6 +5819,8 @@ function _storageUnlinkDoc(sessionId, path) {
 
 function _storageClearLinkedDocs(sessionId) {
   store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+  // The auto-link record deliberately survives: clearing is unlinking every row at
+  // once, and an unlinked pad must not come back on the next read of the transcript.
   afterLinkedDocsChanged(sessionId);
 }
 
@@ -5754,6 +5837,8 @@ function _findOrphanedKeys() {
       if (!known.has(key.slice('scratchpad-'.length))) orphaned.push(key);
     } else if (key.startsWith(PREVIEW_STORAGE_PREFIX)) {
       if (!known.has(key.slice(PREVIEW_STORAGE_PREFIX.length))) orphaned.push(key);
+    } else if (key.startsWith(PAD_LINKED_PREFIX)) {
+      if (!known.has(key.slice(PAD_LINKED_PREFIX.length))) orphaned.push(key);
     }
   }
   return orphaned;
@@ -5844,7 +5929,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();
@@ -5929,6 +6014,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();
@@ -6156,27 +6246,40 @@ document.addEventListener('keydown', (e) => {
 const PREVIEW_STORAGE_PREFIX = 'preview-paths-';
 let currentPreviewPath = null;
 
-function getSessionPreviewPaths(sessionId) {
-  if (!sessionId) return [];
+function readStoredList(key) {
   try {
-    const raw = store.getItem(PREVIEW_STORAGE_PREFIX + sessionId);
-    const arr = raw ? JSON.parse(raw) : [];
+    const arr = JSON.parse(store.getItem(key) || '[]');
     return Array.isArray(arr) ? arr : [];
   } catch {
     return [];
   }
 }
 
+function getSessionPreviewPaths(sessionId) {
+  return sessionId ? readStoredList(PREVIEW_STORAGE_PREFIX + sessionId) : [];
+}
+
+// Windows reaches one file as both `C:\a\b` and `C:/a/b`, and the two sides of a link
+// disagree by construction: a pad path is built with `path.join`, a hand-typed one is
+// stored as it was typed. Rows are compared through here so the same file cannot be
+// listed twice — and lists written before this existed heal on the next link.
+function canonicalPath(filePath) {
+  const slashed = String(filePath).replace(/\\/g, '/');
+  return /^[A-Za-z]:/.test(slashed) ? slashed.toLowerCase() : slashed;
+}
+
 function addSessionPreviewPath(sessionId, filePath) {
   if (!sessionId || !filePath) return;
-  const paths = getSessionPreviewPaths(sessionId).filter((p) => p !== filePath);
+  const key = canonicalPath(filePath);
+  const paths = getSessionPreviewPaths(sessionId).filter((p) => canonicalPath(p) !== key);
   paths.unshift(filePath);
   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);
+  const key = canonicalPath(filePath);
+  const paths = getSessionPreviewPaths(sessionId).filter((p) => canonicalPath(p) !== key);
   if (paths.length) store.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths));
   else store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
 }
@@ -6246,23 +6349,48 @@ function bindPreviewRelativeLinks(bodyEl) {
     const isAbsolutePath = href.startsWith('/') || /^[a-zA-Z]:[\\/]/.test(href);
     if (isAbsoluteUrl) return;
     const cleanHref = href.replace(/#.*$/, '');
-    if (!isPreviewablePath(cleanHref)) return;
     e.preventDefault();
-    openPreviewByPath(cleanHref, isAbsolutePath ? undefined : currentPreviewPath);
+    openPreviewByPath(cleanHref, isAbsolutePath ? undefined : currentPreviewPath, openFileInEditor);
   });
   bodyEl.dataset.relLinkBound = '1';
 }
 
 // `kind` comes from the server, which is the only place that decides what is previewable.
+// hljs gets the extension as the language hint and `highlightAuto` is deliberately not
+// the fallback: on a config or data file it guesses wildly, and wrong colors read as a
+// broken file. Above the size cap it is skipped outright — it is O(size) with heavy
+// backtracking on the main thread, and .jsonl/.log files in a scratchpad reach megabytes.
+const HLJS_MAX_CHARS = 256 * 1024;
+
+function renderSourcePreview(filePath, content) {
+  const ext = (filePath.split('.').pop() || '').toLowerCase();
+  if (typeof hljs !== 'undefined' && content.length <= HLJS_MAX_CHARS && hljs.getLanguage(ext)) {
+    try {
+      const value = hljs.highlight(content, { language: ext, ignoreIllegals: true }).value;
+      return `<pre class="preview-source"><code class="hljs language-${escapeHtml(ext)}">${value}</code></pre>`;
+    } catch (_) {}
+  }
+  return `<pre class="preview-source"><code class="hljs">${escapeHtml(content)}</code></pre>`;
+}
+
 function openPreviewModal(filePath, content, kind) {
   currentPreviewPath = filePath;
-  document.getElementById('preview-modal-title').textContent = filePath.split(/[\\/]/).pop();
+  const fileName = filePath.split(/[\\/]/).pop();
+  document.getElementById('preview-modal-title').textContent = fileName;
   const bodyEl = document.getElementById('preview-modal-body');
   const isHtml = kind === 'html';
   document.querySelector('#preview-modal .modal').classList.toggle('preview-html', isHtml);
   bindPreviewRelativeLinks(bodyEl);
   if (isHtml) {
     renderHtmlPreview(bodyEl, content);
+  } else if (kind === 'text') {
+    bodyEl.innerHTML = renderSourcePreview(filePath, content);
+  } else if (kind === 'image') {
+    const img = document.createElement('img');
+    img.className = 'preview-image';
+    img.src = `/api/preview/image?${new URLSearchParams({ path: filePath })}`;
+    img.alt = fileName;
+    bodyEl.replaceChildren(img);
   } else {
     const { fm, body } = splitFrontmatter(content);
     bodyEl.innerHTML = (fm ? renderFrontmatterBlock(fm) : '') + renderMarkdown(body);
@@ -6274,7 +6402,8 @@ function openPreviewModal(filePath, content, kind) {
 
 function isPreviewLinkedToCurrentSession() {
   if (!currentPreviewPath || !currentSessionId) return false;
-  return getSessionPreviewPaths(currentSessionId).includes(currentPreviewPath);
+  const key = canonicalPath(currentPreviewPath);
+  return getSessionPreviewPaths(currentSessionId).some((p) => canonicalPath(p) === key);
 }
 
 function updatePreviewLinkBtn() {
@@ -6325,13 +6454,20 @@ function closePreviewModal() {
   currentPreviewPath = null;
 }
 
+function openFileInEditor(filePath) {
+  postAndToast('/api/open-in-editor', { file: filePath }, 'in editor');
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openPreviewInEditor() {
   if (!currentPreviewPath) return;
-  postAndToast('/api/open-in-editor', { file: currentPreviewPath }, 'in editor');
+  openFileInEditor(currentPreviewPath);
 }
 
-async function openPreviewByPath(filePath, base) {
+// The server is the only place that knows what it can render, so a null `kind` is its
+// answer to "not previewable" rather than a failure: callers that have a fallback
+// destination pass `onUnsupported` instead of keeping a copy of the extension list here.
+async function openPreviewByPath(filePath, base, onUnsupported) {
   if (!filePath) return;
   try {
     const qs = new URLSearchParams({ path: filePath });
@@ -6342,6 +6478,15 @@ async function openPreviewByPath(filePath, base) {
       return;
     }
     const data = await r.json();
+    if (data.exists === false) {
+      showToast('File not found');
+      return;
+    }
+    if (data.kind === null) {
+      if (onUnsupported) onUnsupported(data.path);
+      else showToast('Nothing to preview in this file');
+      return;
+    }
     openPreviewModal(data.path, data.content, data.kind);
   } catch {
     showToast('Failed to load preview');
@@ -6395,10 +6540,69 @@ function getSessionBaseDir(sessionId) {
   return s?.cwd || s?.project || '';
 }
 
-// Linked paths are stored as bare strings, so previewability is re-derived from the
-// extension on every render instead of being remembered alongside the path.
-function isPreviewablePath(p) {
-  return /\.(md|markdown|html?)$/i.test(p);
+// Linked paths are stored as bare strings, so the row has to ask what each one is. The
+// server owns that answer — /api/file/resolve reports `kind` for any file, previewable
+// or not — and it is cached for the tab because a path's kind does not change under it.
+// A resolve that fails is cached as unpreviewable: the editor is the right destination
+// for a file the server cannot read either, and re-asking on every render of a panel the
+// SSE tick repaints would be a poll.
+const previewKindByPath = new Map();
+const kindResolveInFlight = new Set();
+
+async function loadPreviewKinds(sessionId, paths) {
+  const pending = paths.filter((p) => !previewKindByPath.has(p) && !kindResolveInFlight.has(p));
+  if (!pending.length) return;
+  for (const p of pending) kindResolveInFlight.add(p);
+  try {
+    await Promise.all(
+      pending.map(async (p) => {
+        let kind = null;
+        try {
+          const r = await fetch(`/api/file/resolve?path=${encodeURIComponent(p)}`);
+          if (r.ok) kind = (await r.json()).kind;
+        } catch (_) {}
+        previewKindByPath.set(p, kind);
+      }),
+    );
+  } finally {
+    for (const p of pending) kindResolveInFlight.delete(p);
+  }
+  afterLinkedDocsChanged(sessionId);
+}
+
+// A pad the session made with `scratch new` becomes an ordinary linked document.
+// The server derives the pads on every read, so this record of the ones already
+// linked is what stops the next read undoing an unlink.
+const PAD_LINKED_PREFIX = 'autolinked-pads-';
+const padsFetched = new Set();
+
+function getOfferedPadPaths(sessionId) {
+  return readStoredList(PAD_LINKED_PREFIX + sessionId);
+}
+
+function setOfferedPadPaths(sessionId, paths) {
+  store.setItem(PAD_LINKED_PREFIX + sessionId, JSON.stringify(paths));
+}
+
+async function loadSessionPads(sessionId) {
+  if (!sessionId || padsFetched.has(sessionId)) return;
+  padsFetched.add(sessionId);
+  let pads;
+  try {
+    const r = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/pads`);
+    if (!r.ok) throw new Error(r.status);
+    pads = (await r.json()).pads || [];
+  } catch (_) {
+    padsFetched.delete(sessionId);
+    return;
+  }
+  const offered = new Set(getOfferedPadPaths(sessionId).map(canonicalPath));
+  const fresh = pads.map((p) => p.path).filter((p) => !offered.has(canonicalPath(p)));
+  if (!fresh.length) return;
+  // Recorded before the link, so a render triggered by the link already sees a pad
+  // that will not be offered again.
+  setOfferedPadPaths(sessionId, [...offered, ...fresh]);
+  for (const p of fresh) setSessionDocLink(sessionId, p, false);
 }
 
 // A scratchpad manifest opens in the external `scratch` viewer, not the editor —
@@ -6427,11 +6631,14 @@ const LINKED_DOC_OPENERS = {
   },
 };
 
+// The manifest is checked before previewability, not after: its `.json` is previewable
+// text, but the pad is what the user linked, so the viewer wins over the raw file.
+// Without the CLI there is nothing to launch, so it falls back to the editor.
 function linkedDocOpener(p) {
-  if (isPreviewablePath(p)) return 'preview';
-  // Without the CLI there is nothing to launch, so the manifest falls back to the editor.
-  if (isScratchpadPath(p) && appConfig.scratchAvailable) return 'scratch';
-  return 'editor';
+  if (isScratchpadPath(p)) return appConfig.scratchAvailable ? 'scratch' : 'editor';
+  // A path whose kind has not arrived yet renders as previewable, which is what the
+  // click does anyway — openPreviewByPath falls back to the editor on a null kind.
+  return previewKindByPath.get(p) === null ? 'editor' : 'preview';
 }
 
 // Every manifest is called scratchpad.json, so the pad's folder names it. Kept
@@ -6444,7 +6651,7 @@ function linkedDocLabel(p) {
 function openLinkedDoc(p, baseDir) {
   const opener = linkedDocOpener(p);
   if (opener === 'preview') {
-    openPreviewByPath(p, baseDir);
+    openPreviewByPath(p, baseDir, openFileInEditor);
     return;
   }
   const { url, body, toast } = LINKED_DOC_OPENERS[opener];
@@ -6453,6 +6660,9 @@ function openLinkedDoc(p, baseDir) {
 
 function renderLinkedDocsHtml(sessionId) {
   const paths = getSessionPreviewPaths(sessionId);
+  // Kicked off from the render rather than the three call sites, so a new surface that
+  // shows linked docs cannot forget it. Returns at once once every path is cached.
+  loadPreviewKinds(sessionId, paths);
   const baseDir = getSessionBaseDir(sessionId);
   const items = paths
     .map((p) => {
@@ -6476,11 +6686,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>
@@ -6488,6 +6698,262 @@ function renderLinkedDocsHtml(sessionId) {
   </div>`;
 }
 
+function paintSectionSlots(attr, sessionId, html) {
+  for (const slot of document.querySelectorAll(`[${attr}="${CSS.escape(sessionId)}"]`)) {
+    slot.innerHTML = html;
+  }
+}
+
+// A panel section whose data is not part of the session object arrives after the panel
+// is already on screen, so every one of them needs the same lifecycle: one fetch per
+// session at a time, and a patch of the slot — always rendered, empty or not — once the
+// data lands. `ttlMs` is for the sections the server does not cache itself; at 0 the
+// section re-asks on every render, which is right when the server holds the answer.
+function makeSectionLoader({ attr, endpoint, pick, innerHtml, ttlMs = 0 }) {
+  const store = new Map();
+  const inFlight = new Set();
+  return {
+    get: (sessionId) => store.get(sessionId)?.data || [],
+    repaint: (sessionId) => paintSectionSlots(attr, sessionId, innerHtml(sessionId)),
+    async load(sessionId) {
+      if (!sessionId || inFlight.has(sessionId)) return;
+      const cached = store.get(sessionId);
+      if (cached && Date.now() - cached.at < ttlMs) return;
+      inFlight.add(sessionId);
+      try {
+        const res = await fetch(`/api/sessions/${sessionId}/${endpoint}`);
+        if (!res.ok) return;
+        store.set(sessionId, { at: Date.now(), data: pick(await res.json()) });
+      } catch (_) {
+        return;
+      } finally {
+        inFlight.delete(sessionId);
+      }
+      paintSectionSlots(attr, sessionId, innerHtml(sessionId));
+    },
+  };
+}
+
+function artifactLabel(a) {
+  if (a.title) return a.title;
+  return a.path ? pathBasename(a.path).replace(/\.html?$/i, '') : 'Artifact';
+}
+
+function artifactsInnerHtml(sessionId) {
+  const list = artifactsSection.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>`;
+}
+
+// No TTL: 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.
+const artifactsSection = makeSectionLoader({
+  attr: 'data-artifacts-for',
+  endpoint: 'artifacts',
+  pick: (data) => data.artifacts || [],
+  innerHtml: (sessionId) => artifactsInnerHtml(sessionId),
+});
+
+// The server decides liveness (a run has no terminal journal entry) and answers with
+// nothing once the workflow finishes, so the section empties itself and disappears.
+const workflowLiveSection = makeSectionLoader({
+  attr: 'data-workflow-live-for',
+  endpoint: 'workflow-live',
+  pick: (data) => (data.workflow ? [data.workflow] : []),
+  innerHtml: (sessionId) => workflowLiveInnerHtml(sessionId),
+  // The agent hooks re-render the sidebar on every subagent start and stop, so the TTL is
+  // what keeps that burst down to one ask per run step.
+  ttlMs: 4000,
+});
+
+function workflowLiveInnerHtml(sessionId) {
+  const run = workflowLiveSection.get(sessionId)[0];
+  if (!run) return '';
+  const pct = run.startedCount ? Math.round((run.doneCount / run.startedCount) * 100) : 0;
+  const phases = (run.phases || [])
+    .map((p) => {
+      const state = p.started === 0 ? 'pending' : p.done >= p.started ? 'done' : 'running';
+      const count = p.started ? `${p.done}/${p.started}` : '';
+      return `<span class="wf-live-phase ${escapeHtml(state)}">
+        <span class="wf-live-phase-title">${escapeHtml(p.title)}</span>
+        <span class="wf-live-phase-count">${count}</span>
+      </span>`;
+    })
+    .join('');
+  const running = run.running?.length
+    ? `<div class="wf-live-running" title="${escapeHtml(run.running.join(', '))}">${escapeHtml(run.running.join(' · '))}</div>`
+    : '';
+  return `<div class="panel-section-header">
+      ${WORKFLOW_GEAR_SVG}
+      <span>Workflow</span>
+      <span class="panel-section-count">${run.doneCount}/${run.startedCount} agents</span>
+    </div>
+    <div class="wf-live" onclick="showWorkflowModal('${escAttrJs(sessionId)}')" title="Open workflow run">
+      <div class="wf-live-name"><span class="pulse"></span>${escapeHtml(run.name || run.id)}</div>
+      <div class="progress-bar wf-live-bar"><div class="progress-fill" style="width: ${pct}%"></div></div>
+      ${phases ? `<div class="wf-live-phases">${phases}</div>` : ''}
+      ${running}
+    </div>`;
+}
+
+function renderWorkflowLiveHtml(sessionId) {
+  return `<div class="workflow-live-section" data-workflow-live-for="${escapeHtml(sessionId)}">${workflowLiveInnerHtml(sessionId)}</div>`;
+}
+
+// Every agent start and stop already re-renders the sidebar through the agent-activity
+// feed, which is what keeps the card current. The timer is the fallback for a config dir
+// with no cck hooks installed: there the last agent's result reaches nobody, and the card
+// would sit on a finished run until the next render. Slow on purpose — the hooked case
+// never waits for it. The generation guard drops a chain left mid-fetch by an earlier
+// render, so renders can't stack up chains.
+const WORKFLOW_LIVE_POLL_MS = 30000;
+let workflowLivePoll = null;
+let workflowLivePollFor = null;
+
+function pollWorkflowLive(sessionId) {
+  workflowLiveSection.load(sessionId);
+  // A render must not restart the timer: renders arrive far faster than the interval, and
+  // each restart would push the fallback tick back out of reach, leaving a finished run on
+  // screen forever in a config dir with no hooks.
+  if (workflowLivePoll && workflowLivePollFor === sessionId) return;
+  clearTimeout(workflowLivePoll);
+  workflowLivePollFor = sessionId;
+  const tick = async () => {
+    workflowLivePoll = null;
+    if (workflowLivePollFor !== sessionId) return;
+    if (!document.querySelector(`[data-workflow-live-for="${CSS.escape(sessionId)}"]`)) return;
+    await workflowLiveSection.load(sessionId);
+    if (workflowLivePollFor !== sessionId || !workflowLiveSection.get(sessionId).length) return;
+    workflowLivePoll = setTimeout(tick, WORKFLOW_LIVE_POLL_MS);
+  };
+  workflowLivePoll = setTimeout(tick, WORKFLOW_LIVE_POLL_MS);
+}
+
+const SCRATCH_FILES_COLLAPSED = 3;
+// Unlike the artifacts scan the server caches nothing here, so a TTL is what stops the
+// zen panel — re-rendered on every SSE tick — from turning a readdir plus a stat per
+// file into a 2 s poll.
+const scratchFilesSection = makeSectionLoader({
+  attr: 'data-scratch-files-for',
+  endpoint: 'scratchpad-files',
+  pick: (data) => data.files || [],
+  innerHtml: (sessionId) => scratchFilesInnerHtml(sessionId),
+  ttlMs: 10000,
+});
+// Outlives the cache entries on purpose: a refetch on the TTL must not collapse a list
+// the user opened.
+const scratchFilesExpanded = new Set();
+// Open folders only, keyed by absolute path: path -> { status: 'loading' | 'ready' |
+// 'error', children }. Closing a folder drops its entry, so the cache is bounded by
+// what is on screen and a reopen shows fresh contents for one readdir.
+const scratchFolders = new Map();
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openScratchFile(filePath) {
+  openPreviewByPath(filePath, undefined, openFileInEditor);
+}
+
+function scratchRowHtml(f) {
+  const escPath = escapeHtml(f.path);
+  const isDir = f.kind === 'dir';
+  const folder = isDir ? scratchFolders.get(f.path) : null;
+  const name = escapeHtml(f.name);
+  const link = isDir
+    ? `<button type="button" class="scratch-file-link scratch-folder-toggle${folder ? '' : ' collapsed'}" title="${escPath}" ${folder ? 'aria-expanded="true"' : 'aria-expanded="false"'}>${groupChevronSvg(10)}${name}/</button>`
+    : `<button type="button" class="scratch-file-link" onclick="openScratchFile(this.closest('li').dataset.file)" title="${escPath}">${name}</button>`;
+  let body = '';
+  if (folder?.status === 'loading') body = '<div class="scratch-folder-empty">Loading…</div>';
+  else if (folder?.status === 'error') body = '<div class="scratch-folder-empty">Failed to load</div>';
+  else if (folder && !folder.children.length) body = '<div class="scratch-folder-empty">Empty</div>';
+  else if (folder) body = scratchRowsHtml(folder.children);
+  return `<li class="scratch-file-item${isDir ? ' scratch-folder-item' : ''}" data-file="${escPath}">
+    ${link}
+    <span class="scratch-file-time">${formatDate(f.modifiedAt)}</span>
+    <span class="row-actions scratch-file-actions">
+      <button type="button" onclick="copyWithFeedback(this.closest('li').dataset.file, this)" title="Copy path" aria-label="Copy path">${ICON_COPY}</button>
+      <button type="button" onclick="${isDir ? 'openFolderInEditor' : 'openFileInEditor'}(this.closest('li').dataset.file)" title="Open in editor" aria-label="Open in editor">${ICON_OPEN_EXTERNAL}</button>
+    </span>
+    ${body}
+  </li>`;
+}
+
+function scratchRowsHtml(rows) {
+  return `<ul class="scratch-file-list">${rows.map(scratchRowHtml).join('')}</ul>`;
+}
+
+function scratchFilesInnerHtml(sessionId) {
+  const list = scratchFilesSection.get(sessionId);
+  if (!list.length) return '';
+  const expanded = scratchFilesExpanded.has(sessionId);
+  const shown = expanded ? list : list.slice(0, SCRATCH_FILES_COLLAPSED);
+  const more =
+    list.length > SCRATCH_FILES_COLLAPSED
+      ? `<button type="button" class="expand-toggle-btn scratch-files-more" onclick="toggleScratchFiles('${escAttrJs(sessionId)}')">${expanded ? 'Show less' : `Show all ${list.length}`}</button>`
+      : '';
+  return `${scratchRowsHtml(shown)}${more}`;
+}
+
+// Delegated at the document because the whole zen panel is re-rendered on every SSE tick,
+// which would drop a listener bound on the section.
+document.addEventListener('click', (e) => {
+  const toggle = e.target.closest('.scratch-folder-toggle');
+  if (!toggle) return;
+  const section = toggle.closest('[data-scratch-files-for]');
+  if (section) toggleScratchFolder(section.dataset.scratchFilesFor, toggle.closest('li').dataset.file);
+});
+
+async function toggleScratchFolder(sessionId, dirPath) {
+  if (scratchFolders.has(dirPath)) {
+    scratchFolders.delete(dirPath);
+    scratchFilesSection.repaint(sessionId);
+    return;
+  }
+  scratchFolders.set(dirPath, { status: 'loading', children: [] });
+  scratchFilesSection.repaint(sessionId);
+  let entry = { status: 'error', children: [] };
+  try {
+    const res = await fetch(`/api/sessions/${sessionId}/scratchpad-files?path=${encodeURIComponent(dirPath)}`);
+    if (res.ok) entry = { status: 'ready', children: (await res.json()).files || [] };
+  } catch (_) {
+    // Reads "Failed to load"; closing and reopening the folder retries.
+  }
+  // The user may have closed the folder while the request was in flight.
+  if (scratchFolders.has(dirPath)) {
+    scratchFolders.set(dirPath, entry);
+    scratchFilesSection.repaint(sessionId);
+  }
+}
+
+function renderScratchFilesHtml(sessionId) {
+  return `<div class="scratch-files-section" data-scratch-files-for="${escapeHtml(sessionId)}">${scratchFilesInnerHtml(sessionId)}</div>`;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleScratchFiles(sessionId) {
+  if (scratchFilesExpanded.has(sessionId)) scratchFilesExpanded.delete(sessionId);
+  else scratchFilesExpanded.add(sessionId);
+  scratchFilesSection.repaint(sessionId);
+}
+
 // 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) {
@@ -6557,10 +7023,13 @@ async function linkFileByPath(sessionId, raw, slot) {
     if (base) qs.set('base', base);
     const r = await fetch(`/api/file/resolve?${qs}`);
     const data = await r.json().catch(() => ({}));
-    if (!r.ok) {
+    if (!r.ok || !data.exists) {
       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 {
@@ -6884,6 +7353,24 @@ 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;
+// Set only on that self-opening path: answering an ask the user never asked to see
+// should put the screen back the way it was, where answering one they navigated to
+// keeps them following. Cleared with the modal, so a manual reopen is not "auto".
+let waitingDetailAutoOpened = false;
+function maybeAutoOpenWaiting() {
+  if (!isWaitingAnswerable() || !isWaitingFresh()) return;
+  if (currentWaiting.id === lastAutoOpenedWaitingId || isAnyModalOpen()) return;
+  lastAutoOpenedWaitingId = currentWaiting.id;
+  msgDetailFollowLatest = true;
+  waitingDetailAutoOpened = true;
+  maybeFollowLatest();
+}
+
 function isWaitingFresh() {
   if (!currentWaiting?.timestamp) return false;
   return Date.now() - new Date(currentWaiting.timestamp).getTime() < WAITING_TTL_MS;
@@ -7087,6 +7574,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();
@@ -7524,6 +8029,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;
@@ -7965,6 +8488,11 @@ async function showSessionInfoModal(sessionId) {
   _planSessionId = sessionId;
   const cachedTasks = currentSessionId === sessionId ? currentTasks : [];
   showInfoModal(session, null, cachedTasks, null, null);
+  artifactsSection.load(sessionId);
+  // The modal reaches any card's session, not just the open one, so this is the second
+  // place a pad can first be seen. Linking belongs on the two open events rather than
+  // in renderLinkedDocsHtml, which only builds a string and runs on every repaint.
+  loadSessionPads(sessionId);
 
   const rerender = (teamConfig, tasks, planContent, parentInfo) => {
     if (_planSessionId !== sessionId) return; // user opened a different modal
@@ -8023,7 +8551,21 @@ 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>
+  ${renderScratchFilesHtml(session.id)}`;
 }
 
 function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
@@ -8138,6 +8680,7 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   }
 
   html += renderLinkedDocsHtml(session.id);
+  html += renderArtifactsHtml(session.id);
 
   // Team info section
   if (teamConfig) {
@@ -8272,11 +8815,36 @@ let spPeekedId = null;
 // Per-open cache: spSource is frozen while the picker is up, so a fetched log stays valid.
 const spPeekCache = new Map();
 
+// A session outside the sidebar filter has no name to fuzzy-match against, so a full id
+// is read as a request for that exact session and resolved against the server instead.
+// Values: 'pending' while the request is out, then the session or null.
+const spGlobal = new Map();
+
+async function spResolveGlobal(id) {
+  spGlobal.set(id, 'pending');
+  spGlobal.set(id, await fetchSessionById(id));
+  if (document.getElementById('session-picker-input').value.trim().toLowerCase() === id) renderSessionPicker();
+}
+
+// The row to show for a query nothing in the list matched, as `{ hit, empty }` — one of
+// the two is always null. Starts the lookup when the query is an id not asked about yet.
+function spResolveMiss(query) {
+  if (!SESSION_UUID_RE.test(query)) {
+    return { hit: null, empty: spSource.length ? 'No session matches' : 'No sessions in the current sidebar filter' };
+  }
+  const id = query.toLowerCase();
+  if (!spGlobal.has(id)) spResolveGlobal(id);
+  const found = spGlobal.get(id);
+  if (found === 'pending') return { hit: null, empty: 'Looking up session…' };
+  return found ? { hit: found, empty: null } : { hit: null, empty: 'No session with that id' };
+}
+
 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();
+  spGlobal.clear();
   document.getElementById('session-picker-modal').classList.add('visible');
   renderSessionPicker();
   input.focus();
@@ -8367,11 +8935,14 @@ 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;
+    const { hit, empty } = spResolveMiss(query);
+    if (hit) spRows = [hit];
+    else {
+      spIdx = -1;
+      list.innerHTML = `<div class="sp-empty">${empty}</div>`;
+      return;
+    }
   }
 
   list.innerHTML = spRows
@@ -8425,6 +8996,19 @@ function initSessionPicker() {
     const row = e.target.closest('.sp-row');
     if (row) spOpen(Number(row.dataset.idx));
   });
+  // Vimium eats Escape inside a text input and only blurs it, so the page never sees the key.
+  // A blur that no click in the picker caused, while the window keeps focus, is that Escape.
+  const modal = document.getElementById('session-picker-modal');
+  let pointerDown = false;
+  modal.addEventListener('mousedown', () => {
+    pointerDown = true;
+  });
+  document.addEventListener('mouseup', () => {
+    pointerDown = false;
+  });
+  input.addEventListener('blur', () => {
+    if (!pointerDown && modal.classList.contains('visible') && document.hasFocus()) closeSessionPicker();
+  });
 }
 //#endregion
 
@@ -9207,6 +9791,7 @@ ownerFilter = urlState.owner || '';
 searchQuery = urlState.search || '';
 
 renderFilterState();
+renderZenState();
 pinnedSessionIds = loadPinnedSessions();
 stickySessionIds = loadStickySessions();
 setupEventSource();
@@ -9290,22 +9875,25 @@ window.addEventListener('popstate', () => {
 //#endregion
 
 // #region HUB_INTEGRATION
+// e.code travels with e.key because macOS composes Option+<key> into a character (Option+P is
+// 'π'), so the key alone cannot identify the binding. The hub owns the keymap and normalizes;
+// these tests only decide whether a press is the hub's to handle.
 document.addEventListener('keydown', (e) => {
   if (!window.__HUB__?.enabled) return;
-  const fwd = (key) => {
+  const fwd = () => {
     e.preventDefault();
-    hubPost({ type: 'hub:keydown', key, ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey });
+    hubPost({ type: 'hub:keydown', key: e.key, code: e.code, ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey });
   };
   if (e.ctrlKey && e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-    fwd(e.key);
+    fwd();
   }
   // 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.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey && (/^[a-z]$/i.test(e.key) || /^Key[A-Z]$/.test(e.code))) {
+    fwd();
   }
-  if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && /^[1-9]$/.test(e.key)) {
-    fwd(e.key);
+  if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && (/^[1-9]$/.test(e.key) || /^Digit[1-9]$/.test(e.code))) {
+    fwd();
   }
 });