claude-code-kanban 4.26.0 → 4.27.0

package/public/app.js

@@ -200,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' || zenMode) && 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;
@@ -237,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();
@@ -416,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) {
@@ -435,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;
     }
@@ -1154,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);
@@ -1392,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();
@@ -1985,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) {
@@ -2023,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');
@@ -3021,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();
@@ -3124,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) {
@@ -3303,9 +3335,12 @@ function renderSessions() {
         ${renderScratchpadRow(zenSession)}
         ${renderLinkedDocsHtml(zenSession.id)}
         ${renderArtifactsHtml(zenSession.id)}
-      </div>`;
+      </div>
+      ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}`;
     bindLinkedDocsHandlers(sessionsList.querySelector('.linked-docs-section'), zenSession.id);
-    ensureSessionArtifacts(zenSession.id);
+    artifactsSection.load(zenSession.id);
+    scratchFilesSection.load(zenSession.id);
+    if (zenSession.hasWorkflow) pollWorkflowLive(zenSession.id);
     return;
   }
 
@@ -3581,6 +3616,11 @@ 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;
 
@@ -5717,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>';
 
@@ -5783,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);
 }
 
@@ -5799,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;
@@ -6206,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);
 }
@@ -6296,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);
@@ -6324,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() {
@@ -6375,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 });
@@ -6392,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');
@@ -6445,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 —
@@ -6477,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
@@ -6494,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];
@@ -6503,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) => {
@@ -6538,11 +6698,41 @@ 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 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;
@@ -6550,7 +6740,7 @@ function artifactLabel(a) {
 }
 
 function artifactsInnerHtml(sessionId) {
-  const list = artifactsBySession.get(sessionId) || [];
+  const list = artifactsSection.get(sessionId);
   if (!list.length) return '';
   const items = list
     .map(
@@ -6574,27 +6764,196 @@ 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);
+// 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}/artifacts`);
-    if (!res.ok) return;
-    const data = await res.json();
-    artifactsBySession.set(sessionId, data.artifacts || []);
+    const res = await fetch(`/api/sessions/${sessionId}/scratchpad-files?path=${encodeURIComponent(dirPath)}`);
+    if (res.ok) entry = { status: 'ready', children: (await res.json()).files || [] };
   } catch (_) {
-    return;
-  } finally {
-    artifactsInFlight.delete(sessionId);
+    // Reads "Failed to load"; closing and reopening the folder retries.
   }
-  const html = artifactsInnerHtml(sessionId);
-  for (const slot of document.querySelectorAll(`[data-artifacts-for="${CSS.escape(sessionId)}"]`)) {
-    slot.innerHTML = html;
+  // 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) {
@@ -6664,7 +7023,7 @@ 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;
     }
@@ -6999,11 +7358,16 @@ function maybeFollowLatest() {
 // 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();
 }
 
@@ -8124,7 +8488,11 @@ async function showSessionInfoModal(sessionId) {
   _planSessionId = sessionId;
   const cachedTasks = currentSessionId === sessionId ? currentTasks : [];
   showInfoModal(session, null, cachedTasks, null, null);
-  ensureSessionArtifacts(sessionId);
+  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
@@ -8196,7 +8564,8 @@ function renderScratchpadRow(session) {
       <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>`;
+  </div>
+  ${renderScratchFilesHtml(session.id)}`;
 }
 
 function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
@@ -8446,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();
@@ -8541,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
@@ -8599,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
 
@@ -9465,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();
   }
 });