claude-code-kanban 7.5.0 → 7.6.0

package/public/app.js

@@ -546,6 +546,10 @@ function toggleSection(containerId, chevronId) {
 function isWaitingSession(s) {
   return !!s.hasWaitingForUser;
 }
+function sessionBarClass(s) {
+  if (isWaitingSession(s)) return 'permission-pending';
+  return s.unread ? 'unread' : '';
+}
 function isActiveSession(s) {
   return !s.hasWaitingForUser && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
 }
@@ -691,66 +695,103 @@ function setActivityFilter(kind) {
 }
 
 let lastCurrentTasksHash = '';
+let taskFetchSeq = 0;
+let switchSeq = 0;
+const taskRetry = { timer: null, delay: 0 };
+
+// The board refetches only on an SSE update that names the open session, so a failed refresh
+// must retry by itself: when the session's tasks stop changing, no later event repairs it.
+function retryTaskFetch(sessionId) {
+  clearTimeout(taskRetry.timer);
+  taskRetry.delay = Math.min((taskRetry.delay || 1000) * 2, 30000);
+  taskRetry.timer = setTimeout(() => {
+    if (sessionId === currentSessionId && viewMode === 'session') return fetchTasks(sessionId);
+  }, taskRetry.delay);
+}
 
 async function fetchTasks(sessionId) {
+  const refresh = viewMode === 'session' && sessionId === currentSessionId;
+  const seq = ++taskFetchSeq;
+  const logSeq = refresh ? switchSeq : ++switchSeq;
+  let msgPage = null;
+  if (!refresh) {
+    if (!agentLogMode) msgPage = fetchSessionMessagesPage(sessionId).catch(() => null);
+    if (messagePanelOpen) scheduleLogLoading(logSeq);
+  } else if (logLoading) {
+    endLogLoading();
+    if (messagePanelOpen && !agentLogMode) renderMessages(currentMessages);
+  }
+  // The PTY already runs, so the attach need not wait for the session fetch and the render after it.
+  if (!refresh && termState.sessionId !== sessionId && runningTerminals.has(sessionId) && wantsTerminalFor(sessionId))
+    openTerminal(sessionId, terminalOpenMode(sessionId));
+  viewMode = 'session';
+  document.getElementById('message-toggle')?.style.removeProperty('display');
+  let newTasks;
   try {
-    const refresh = viewMode === 'session' && sessionId === currentSessionId;
-    // The PTY already runs, so the attach need not wait for the session fetch and the render after it.
-    if (!refresh && termState.sessionId !== sessionId && runningTerminals.has(sessionId) && wantsTerminalFor(sessionId))
-      openTerminal(sessionId, terminalOpenMode(sessionId));
-    viewMode = 'session';
-    document.getElementById('message-toggle')?.style.removeProperty('display');
     const res = await api(apiPath`/api/sessions/${sessionId}`);
-
     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) return;
-    lastCurrentTasksHash = hash;
-
-    currentTasks = newTasks;
-    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;
-    }
-    if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
-      revealedStorageSessionId = null;
-    }
-    if (currentSessionId && currentSessionId !== sessionId && deferredPinPlacement.delete(currentSessionId))
-      expandPinnedFor(currentSessionId);
-    if (lastSessionId !== sessionId) setSwapPair(sessionId, lastSessionId);
-    const switched = sessionId !== currentSessionId;
-    currentSessionId = sessionId;
-    markOpenSessionRead();
-    if (switched) autoRevealLog(sessionId);
-    // A task change in the open session must not reset the messages, the agents or the owner
-    // filter: that reset rebuilds the panels and reads as a reload after each card move.
-    if (!refresh) {
-      currentPins = loadPins(sessionId);
-      ownerFilter = '';
-      resetMessageScrollState();
-      for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
-      for (const k of Object.keys(teamColorMap)) delete teamColorMap[k];
-      sessionJustSelected = true;
-      resetAgentState();
-    }
-    updateUrl();
-    renderSession();
-    renderSessions();
-    fetchAgents(sessionId);
-    if (!agentLogMode) fetchMessages(sessionId);
+    newTasks = await res.json();
   } catch (error) {
     console.error('Failed to fetch tasks:', error);
+    if (seq !== taskFetchSeq) return;
+    if (sessionId === currentSessionId) return retryTaskFetch(sessionId);
     currentTasks = [];
     currentSessionId = sessionId;
     lastCurrentTasksHash = '';
     updateUrl();
     renderSession();
+    if (!agentLogMode) {
+      resetMessageScrollState();
+      fetchMessages(sessionId, msgPage);
+    }
+    return;
+  }
+  if (seq !== taskFetchSeq) return;
+  clearTimeout(taskRetry.timer);
+  taskRetry.delay = 0;
+
+  const hash = JSON.stringify(newTasks);
+  if (sessionId === currentSessionId && hash === lastCurrentTasksHash) return;
+  lastCurrentTasksHash = hash;
+
+  currentTasks = newTasks;
+  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;
   }
+  if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
+    revealedStorageSessionId = null;
+  }
+  if (currentSessionId && currentSessionId !== sessionId && deferredPinPlacement.delete(currentSessionId))
+    expandPinnedFor(currentSessionId);
+  if (lastSessionId !== sessionId) setSwapPair(sessionId, lastSessionId);
+  const switched = sessionId !== currentSessionId;
+  currentSessionId = sessionId;
+  markOpenSessionRead();
+  if (switched) autoRevealLog(sessionId);
+  // A task change in the open session must not reset the messages, the agents or the owner
+  // filter: that reset rebuilds the panels and reads as a reload after each card move.
+  if (!refresh) {
+    currentPins = loadPins(sessionId);
+    ownerFilter = '';
+    resetMessageScrollState();
+    for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
+    for (const k of Object.keys(teamColorMap)) delete teamColorMap[k];
+    sessionJustSelected = true;
+    resetAgentState();
+    if (messagePanelOpen && !agentLogMode) {
+      if (logLoading?.seq !== logSeq) scheduleLogLoading(logSeq);
+      showLogLoading(logSeq);
+    }
+  }
+  updateUrl();
+  renderSession();
+  renderSessions();
+  fetchAgents(sessionId);
+  if (!agentLogMode) fetchMessages(sessionId, msgPage);
 }
 //#endregion
 
@@ -804,6 +845,8 @@ async function fetchProjectView(projectPath) {
   viewMode = 'project';
   currentProjectPath = projectPath;
   currentSessionId = null;
+  switchSeq++;
+  endLogLoading();
   setCurrentMessages([]);
   lastMessagesHash = '';
   if (messagePanelOpen) toggleMessagePanel();
@@ -913,7 +956,7 @@ function toggleMessagePanel() {
   panel.classList.toggle('visible', messagePanelOpen);
   document.getElementById('message-toggle')?.classList.toggle('active', messagePanelOpen);
   if (messagePanelOpen && currentSessionId) {
-    if (currentMessages.length) renderMessages(currentMessages);
+    if (currentMessages.length || lastMessagesHash) renderMessages(currentMessages);
     fetchMessages(currentSessionId);
   }
   updateUrl();
@@ -1055,10 +1098,46 @@ async function fetchSessionMessagesPage(sessionId, { before, limit = MSG_PAGE_LI
   return res.ok ? res.json() : null;
 }
 
-async function fetchMessages(sessionId) {
+const LOG_LOADING_DELAY_MS = 150;
+let logLoading = null;
+
+function scheduleLogLoading(seq) {
+  clearTimeout(logLoading?.timer);
+  logLoading = { seq, startedAt: performance.now(), shown: false };
+  logLoading.timer = setTimeout(() => showLogLoading(seq), LOG_LOADING_DELAY_MS);
+}
+
+// Called again when the new session's header lands, so the old log never sits under it;
+// the delay keeps a fast switch from flashing the skeleton.
+function showLogLoading(seq) {
+  if (!logLoading || logLoading.seq !== seq || logLoading.shown) return;
+  logLoading.shown = true;
+  const delay = Math.max(0, Math.round(LOG_LOADING_DELAY_MS - (performance.now() - logLoading.startedAt)));
+  const rows = '<div class="msg-log-loading-row"><span></span><span></span></div>'.repeat(4);
+  document.getElementById('message-panel-pinned').innerHTML = '';
+  document.getElementById('message-panel-content').innerHTML =
+    `<div class="msg-log-loading" style="--log-loading-delay:${delay}ms" role="status" aria-live="polite">${rows}<div class="msg-log-loading-label">Loading session log…</div></div>`;
+}
+
+function endLogLoading() {
+  if (!logLoading) return;
+  clearTimeout(logLoading.timer);
+  logLoading = null;
+}
+
+async function fetchMessages(sessionId, page) {
+  const seq = switchSeq;
   try {
-    const data = await fetchSessionMessagesPage(sessionId);
-    if (!data) return;
+    const data = await (page || fetchSessionMessagesPage(sessionId));
+    if (seq !== switchSeq || sessionId !== currentSessionId) return;
+    if (!data) {
+      if (logLoading?.seq === seq && messagePanelOpen && !agentLogMode) {
+        endLogLoading();
+        document.getElementById('message-panel-content').innerHTML =
+          '<div class="msg-empty">Could not load the session log</div>';
+      }
+      return;
+    }
     let agentEnriched = false;
     for (const m of data.messages) {
       if (m.agentId && m.agentPrompt) {
@@ -1755,6 +1834,7 @@ async function discardWaiting() {
 }
 
 function renderMessages(messages) {
+  endLogLoading();
   const container = document.getElementById('message-panel-content');
   const pinnedContainer = document.getElementById('message-panel-pinned');
   pinnedContainer.innerHTML = agentLogMode ? '' : renderPinnedSection();
@@ -2421,6 +2501,7 @@ function mountReplyReview(m, body, modal) {
       locate: replyLocateHint(m.timestamp),
     },
     onComment: () => setMsgDetailFollow(false),
+    onSent: closeMsgDetailModal,
   });
 }
 
@@ -2602,6 +2683,7 @@ function modalZoomLabel() {
 function applyModalZoom() {
   document.documentElement.style.setProperty('--modal-zoom', String(modalZoom));
   for (const el of document.querySelectorAll('.pane-zoom-val')) el.textContent = modalZoomLabel();
+  postToShowFrames(() => ({ type: `${SHOW_MSG}zoom`, z: modalZoom }));
 }
 
 // delta 0 resets to 100%
@@ -2627,7 +2709,7 @@ function isAnyModalOpen() {
 
 // An open modal owns the zoom keys even when it has nothing to scale.
 function isZoomableOnScreen() {
-  return isAnyModalOpen() ? isZoomableModalOpen() : isPaneDocOnScreen();
+  return isAnyModalOpen() ? isZoomableModalOpen() : isPaneDocOnScreen() || isShowCardFocused();
 }
 
 const ZOOM_KEYS = { '+': 0.1, '=': 0.1, NumpadAdd: 0.1, '-': -0.1, _: -0.1, NumpadSubtract: -0.1, 0: 0, Numpad0: 0 };
@@ -3544,6 +3626,8 @@ function showNoSession() {
   viewMode = 'none';
   if (agentLogMode) exitAgentLogMode();
   currentSessionId = null;
+  switchSeq++;
+  endLogLoading();
   ownerFilter = '';
   resetAgentState();
   currentTasks = [];
@@ -3746,7 +3830,7 @@ function renderSessions() {
         : '';
     const metricsHtml = progressHtml + (showCtx ? renderContextBar(session) : '');
     return `
-          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${session.unread ? 'unread' : ''} ${tempClass} ${idleClass} ${justFinishedClass}">
+          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}">
             <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(sessionName)}</div>
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
@@ -4578,7 +4662,7 @@ const transientGroups = new Map();
 function sgTransientGroup(name) {
   let group = transientGroups.get(name);
   if (!group) {
-    group = { id: `t_${name}`, name, transient: true };
+    group = { id: `t_${name}`, name, transient: true, members: [] };
     transientGroups.set(name, group);
   }
   return group;
@@ -5142,11 +5226,19 @@ function sgOpenMenu(x, y, kind, ref) {
   menu.className = 'sg-menu';
   menu.setAttribute('role', 'menu');
   const canFork = kind === 'session' && !!forkableSession(ref);
-  menu.setAttribute('aria-label', canFork ? 'Session actions' : `Move ${label} to group`);
+  const canEnd = kind === 'session' && runningTerminals.has(ref);
+  const actions =
+    (canFork
+      ? '<button class="sg-menu-item" role="menuitem" data-sg-action="fork" title="claude --resume --fork-session">Fork</button>'
+      : '') +
+    (canEnd
+      ? '<button class="sg-menu-item" role="menuitem" data-sg-action="end" title="Alt+Shift+`">End terminal</button>'
+      : '');
+  menu.setAttribute('aria-label', actions ? 'Session actions' : `Move ${label} to group`);
   menu.dataset.sgKind = kind;
   menu.dataset.sgRef = ref;
   menu.innerHTML = `
-        ${canFork ? '<div class="sg-menu-label" aria-hidden="true">Session</div><button class="sg-menu-item" role="menuitem" data-sg-action="fork" title="claude --resume --fork-session">Fork</button>' : ''}
+        ${actions ? `<div class="sg-menu-label" aria-hidden="true">Session</div>${actions}` : ''}
         <div class="sg-menu-label" aria-hidden="true">Move ${label} to group</div>
         ${rows}
         <button class="sg-menu-item" role="menuitem" data-sg-move="__new__">+ New group…</button>
@@ -5195,6 +5287,7 @@ document.addEventListener('click', (e) => {
   const move = item.dataset.sgMove;
   sgCloseMenu();
   if (item.dataset.sgAction === 'fork') return forkSession(sgRef);
+  if (item.dataset.sgAction === 'end') return closeTerminalSession(sgRef);
   if (move === '__none__') {
     sgDetach(sgKind, sgRef);
     persistSessionGroups();
@@ -5428,7 +5521,11 @@ function expandActiveGroups({ onlyNew = false } = {}) {
     if (!isSessionActive(s)) continue;
     activeIds.add(s.id);
     if (onlyNew && (!primed || prevActiveSessionIds.has(s.id))) continue;
-    if (uncollapseFor(s)) changed = true;
+    try {
+      if (uncollapseFor(s)) changed = true;
+    } catch (err) {
+      console.error('uncollapseFor failed for session', s.id, err);
+    }
   }
   prevActiveSessionIds = activeIds;
   if (changed) persistCollapsedGroups();
@@ -5946,7 +6043,7 @@ const SHORTCUT_TABS = [
           { keys: ['Shift', 'L'], combo: true, label: 'Toggle session log' },
           { keys: ['Shift', 'M'], combo: true, label: 'Open last message' },
           { keys: ['↑', '↓'], label: 'Previous / next message in detail' },
-          { keys: ['Ctrl', 'Enter'], combo: true, label: 'Allow / approve the waiting prompt' },
+          { keys: ['Ctrl', 'Enter'], combo: true, label: 'Allow / approve the waiting prompt; send review comments' },
         ],
       },
       {
@@ -5969,11 +6066,23 @@ const SHORTCUT_TABS = [
         rows: [
           { keys: ['Ctrl', '`'], combo: true, label: 'Show / hide terminal' },
           { keys: ['Alt', '`'], combo: true, label: 'Focus terminal / page' },
+          { keys: ['Ctrl', 'Alt', '`'], combo: true, hubMod: true, label: 'Focus terminal / show card' },
           { keys: ['Alt', 'Shift', '`'], combo: true, label: 'End terminal' },
           { keys: ['Ctrl', 'Shift', '`'], combo: true, label: 'All terminals' },
           { keys: ['Ctrl', '+/−/0'], combo: true, label: 'Terminal text size' },
         ],
       },
+      {
+        title: 'Show card (focused)',
+        rows: [
+          { keys: ['[', ']'], label: 'Previous / next post' },
+          { keys: ['Alt', 'Enter'], combo: true, label: 'Fill the terminal / back to the card' },
+          { keys: ['Esc'], label: 'Back to the card, else collapse to the header' },
+          { keys: ['Alt', 'W'], combo: true, label: 'Close until the next post' },
+          { keys: ['Ctrl', 'D'], combo: true, label: 'Remove the post' },
+          { keys: ['Ctrl', '+/−/0'], combo: true, label: 'Card text size' },
+        ],
+      },
     ],
   },
   {
@@ -7030,6 +7139,10 @@ document.addEventListener('keydown', (e) => {
     adjustModalZoom(zoom);
     return;
   }
+  if (isShowCardFocused() && !isAnyModalOpen() && showCardKey(e)) {
+    e.preventDefault();
+    return;
+  }
 
   // Above the text-field guard: xterm's input is a textarea, and the toggle must work from it.
   const terminalPrompt = document.getElementById('terminal-prompt');
@@ -7510,6 +7623,7 @@ function stopReview() {
   activeReview = null;
   reviewHighlight?.clear();
   reviewHotHighlight?.clear();
+  syncReviewSendClaims();
 }
 
 // The three helpers below are also handed to `reviewBridge` as source text, so each must use
@@ -7716,7 +7830,9 @@ function reviewBridge(textBefore, headingBefore, rangeAt, comboOf, fieldSelector
   let forward = new Set();
   document.addEventListener('keydown', (e) => {
     if (e.defaultPrevented || e.target.closest?.(fieldSelector)) return;
-    if (!forward.has(comboOf(e)) && !keySigs(e).some((s) => claims.has(s))) return;
+    const sigs = keySigs(e);
+    const offerKey = pending && sigs.includes('|k:c');
+    if (!offerKey && !forward.has(comboOf(e)) && !sigs.some((s) => claims.has(s))) return;
     e.preventDefault();
     send({ type: 'key', key: e.key, code: e.code, ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey, meta: e.metaKey });
   });
@@ -7754,7 +7870,8 @@ function reviewBridge(textBefore, headingBefore, rangeAt, comboOf, fieldSelector
   });
 }
 
-const TEXT_FIELD_SELECTOR = 'input, textarea, select, [contenteditable]';
+const TEXT_FIELD_SELECTOR =
+  'input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=color], [type=file], [type=image]), textarea, select, [contenteditable]';
 
 const REVIEW_BRIDGE_TAG = `<script>(${reviewBridge})(${reviewTextBefore}, ${reviewHeadingBefore}, ${reviewRangeAt}, ${ClaudeHub.comboOf}, ${JSON.stringify(TEXT_FIELD_SELECTOR)});</script>`;
 
@@ -7788,6 +7905,16 @@ const PANE_CLAIMS = [
   ...['BracketLeft', 'BracketRight', 'KeyW'].map((code) => ({ altKey: true, key: 'Unidentified', code })),
 ];
 
+// Ctrl+D, Alt+Enter and Esc act on the show card (showCardKey); other pages keep them. Alt+W is in PANE_CLAIMS.
+const SHOW_CLAIMS = [
+  ...['ctrlKey', 'metaKey'].map((mod) => ({ [mod]: true, key: 'd', code: '' })),
+  { altKey: true, key: 'Enter', code: '' },
+  { key: 'Escape', code: '' },
+];
+
+// Claimed only while comments wait, so a previewed page keeps Ctrl+Enter otherwise.
+const REVIEW_SEND_CLAIMS = ['ctrlKey', 'metaKey'].map((mod) => ({ [mod]: true, key: 'Enter', code: '' }));
+
 function sendBridgeClaims(frames, claims) {
   for (const f of frames) f.contentWindow?.postMessage({ type: `${REVIEW_MSG}claims`, ...claims }, '*');
 }
@@ -7856,12 +7983,26 @@ function showReviewOffer(picked) {
 }
 
 function onReviewOfferKey(e) {
+  if (isReviewSendKey(e)) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    sendReview();
+    return;
+  }
   if (reviewPopMode !== 'offer' || !matchKey(e, 'c', 'C')) return;
   e.preventDefault();
   e.stopImmediatePropagation();
   reviewPopEl().querySelector('.review-offer-btn').click();
 }
 
+function isReviewSendKey(e) {
+  if (e.key !== 'Enter' || !(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey) return false;
+  if (reviewPopMode === 'editor' || !reviewItems().length) return false;
+  // A pane's review stays live under a modal, where Ctrl+Enter belongs to the modal.
+  if (activeReview.opts === reviewBase && document.querySelector('.modal-overlay.visible')) return false;
+  return !e.target.closest?.(TEXT_FIELD_SELECTOR);
+}
+
 function openReviewEditor(picked) {
   const el = reviewPopEl();
   reviewPopMode = 'editor';
@@ -7965,7 +8106,17 @@ function onReviewPanelHover(e) {
   setReviewHot((card && reviewItems()[Number(card.dataset.i)]) || null);
 }
 
+let reviewSendClaimed = false;
+
+function syncReviewSendClaims() {
+  const want = reviewItems().length > 0;
+  if (want === reviewSendClaimed) return;
+  reviewSendClaimed = want;
+  pushTerminalClaims();
+}
+
 function renderReviewPanel() {
+  syncReviewSendClaims();
   if (!activeReview) return;
   const { panelEl, hostEl } = activeReview;
   const items = reviewItems();
@@ -7999,7 +8150,7 @@ async function sendReview() {
     });
     const data = await res.json();
     if (!res.ok) return showToast(data.error || 'Review failed', 'error');
-    if (data.delivered === 'doorbell') showToast('Sent to session', 'success');
+    if (data.delivered === 'doorbell') showToast('Queued for the session', 'success');
     else if (data.delivered === 'terminal') showToast('Pasted into the terminal: press Enter there to send', 'info');
     else {
       const { markdown } = data;
@@ -8028,6 +8179,7 @@ async function sendReview() {
 //#region MARKDOWN_PREVIEW
 const PREVIEW_STORAGE_PREFIX = 'preview-paths-';
 let currentPreviewPath = null;
+let previewFromTerminal = false;
 
 function readStoredList(key) {
   const arr = store.readJson(key);
@@ -8132,14 +8284,14 @@ function renderFrontmatterBlock(fm) {
 // allow-same-origin puts it on an opaque origin, so it cannot touch this app's
 // storage, DOM or API. srcdoc has no base URL, so the server has already embedded
 // the document's local assets (lib/inline-assets.js); remote refs load normally.
-function createPreviewFrame(className, srcdoc) {
+function createPreviewFrame(className, srcdoc, sandbox = 'allow-scripts allow-popups') {
   const frame = document.createElement('iframe');
   frame.className = className;
-  frame.setAttribute('sandbox', 'allow-scripts allow-popups');
+  frame.setAttribute('sandbox', sandbox);
   frame.setAttribute('referrerpolicy', 'no-referrer');
   frame.srcdoc = srcdoc;
   bridgedFrames.add(frame);
-  frame.addEventListener('load', () => sendBridgeClaims([frame], bridgeClaims(keyClaims())));
+  frame.addEventListener('load', () => sendBridgeClaimsAll([frame], keyClaims()));
   return frame;
 }
 
@@ -8193,10 +8345,13 @@ function highlightCode(text, lang) {
 function renderSourcePreview(filePath, content) {
   const ext = langOfPath(filePath);
   const value = highlightCode(content, ext);
-  if (value != null) {
-    return `<pre class="preview-source"><code class="hljs language-${escapeHtml(ext)}">${value}</code></pre>`;
-  }
-  return `<pre class="preview-source"><code class="hljs">${escapeHtml(content)}</code></pre>`;
+  const n = treeHighlight.lineCount(content);
+  const gutter = `<span class="src-gutter" aria-hidden="true">${Array.from({ length: n }, (_, i) => i + 1).join('\n')}</span>`;
+  const code =
+    value != null
+      ? `<code class="hljs language-${escapeHtml(ext)}">${value}</code>`
+      : `<code class="hljs">${escapeHtml(content)}</code>`;
+  return `<pre class="preview-source" data-lines="${n}">${gutter}${code}</pre>`;
 }
 
 // Every kind but html, which needs a frame.
@@ -8227,6 +8382,9 @@ function openPreviewModal(filePath, content, kind) {
   else renderPreviewContent(bodyEl, filePath, content, kind);
   document.getElementById('preview-modal-meta').textContent = filePath;
   document.getElementById('preview-modal').classList.add('visible');
+  // A preview the CLI opens finds focus in the terminal frame, whose keys never reach the board's Esc.
+  previewFromTerminal ||= terminalPaneFocused();
+  document.querySelector('#preview-modal .modal').focus();
   updatePreviewLinkBtn();
   const panelEl = document.getElementById('preview-review-panel');
   const opts = fileReviewOpts(filePath, kind, bodyEl, isHtml ? bodyEl.querySelector('iframe') : null);
@@ -8306,6 +8464,8 @@ function closePreviewModal() {
   // Empty the body so an iframe preview is destroyed and its scripts/timers stop.
   document.getElementById('preview-modal-body').innerHTML = '';
   currentPreviewPath = null;
+  if (previewFromTerminal) focusTerminalPane();
+  previewFromTerminal = false;
 }
 
 function openFileInEditor(filePath) {
@@ -9091,6 +9251,11 @@ function setupEventSource() {
 
       if (data.type === 'dispatch-update') onDispatchUpdate();
 
+      if (data.type === 'show:posted') onShowPosted(data);
+
+      if (data.type === 'show:cleared') onShowCleared(data);
+      if (data.type === 'show:removed') onShowRemoved(data);
+
       if (data.type === 'agent-update') {
         if (!data.unreadOnly) pendingAgentSessionIds.add(data.sessionId);
         clearTimeout(agentRefreshTimer);
@@ -9917,8 +10082,53 @@ function isLightTheme() {
   return document.body.classList.contains('light');
 }
 
-function getMermaidTheme() {
-  return isLightTheme() ? 'default' : 'dark';
+const MERMAID_VARS = {
+  background: '--bg-surface',
+  primaryTextColor: '--text-primary',
+  primaryBorderColor: '--accent',
+  secondaryColor: '--bg-hover',
+  tertiaryColor: '--bg-surface',
+  lineColor: '--text-tertiary',
+  textColor: '--text-primary',
+  titleColor: '--text-primary',
+  clusterBkg: '--bg-surface',
+  clusterBorder: '--border',
+  edgeLabelBackground: '--bg-surface',
+  actorLineColor: '--text-tertiary',
+  noteBkgColor: '--bg-deep',
+  noteBorderColor: '--border',
+  noteTextColor: '--text-primary',
+  pieStrokeColor: '--bg-surface',
+  pieOuterStrokeColor: '--border',
+  pieTitleTextColor: '--text-primary',
+  pieLegendTextColor: '--text-primary',
+  fontFamily: '--mono',
+};
+// --bg-elevated sits too close to the dark page for a node, and the base theme derives near-black ER
+// rows from a dark primaryColor.
+const MERMAID_MODE_VARS = {
+  dark: { primaryColor: '--bg-hover', rowOdd: '--bg-hover', rowEven: '--bg-elevated' },
+  light: { primaryColor: '--bg-elevated', rowOdd: '--bg-elevated', rowEven: '--bg-elevated' },
+};
+let mermaidThemeKey = '';
+
+// The base theme derives its other colors from these, and it parses colors itself, so it takes
+// resolved values rather than var() references.
+function mermaidConfig() {
+  const css = getComputedStyle(document.body);
+  const mode = isLightTheme() ? 'light' : 'dark';
+  const themeVariables = { darkMode: mode === 'dark', pieOpacity: '1', pieSectionTextColor: '#fff' };
+  for (const [k, name] of Object.entries({ ...MERMAID_VARS, ...MERMAID_MODE_VARS[mode] })) {
+    themeVariables[k] = css.getPropertyValue(name).trim();
+  }
+  SHOW_PALETTE[mode].series.forEach((c, i) => {
+    themeVariables[`pie${i + 1}`] = c;
+    themeVariables[`cScale${i}`] = c;
+  });
+  // ER labels are half see-through, so lines cross their text, and ER circles have a fixed white fill.
+  const themeCSS = `.relationshipLabelBox, .relationshipLabelBox rect { opacity: 1; } marker circle { fill: ${themeVariables.background}; }`;
+  // The default neo look draws borders as an accent-to-gray gradient with a drop shadow.
+  return { startOnLoad: false, theme: 'base', look: 'classic', themeVariables, themeCSS };
 }
 
 // Mermaid is about 3 MB, so it loads on the first diagram instead of on the page's critical path.
@@ -9935,7 +10145,9 @@ function loadMermaid() {
     script.integrity = MERMAID_SCRIPT.integrity;
     script.crossOrigin = 'anonymous';
     script.onload = () => {
-      mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
+      const config = mermaidConfig();
+      mermaidThemeKey = JSON.stringify(config);
+      mermaid.initialize(config);
       resolve();
     };
     script.onerror = () => {
@@ -9948,9 +10160,16 @@ function loadMermaid() {
   return mermaidLoading;
 }
 
+let mermaidQueue = Promise.resolve();
+
+// mermaid.run is async, and two runs that overlap draw diagrams over each other.
+function queueMermaid(work) {
+  mermaidQueue = mermaidQueue.then(work).catch((err) => console.warn(err.message));
+}
+
 function initMermaidBlocks(container) {
-  const blocks = (container || document).querySelectorAll('pre.mermaid:not([data-processed])');
-  if (!blocks.length) return;
+  const root = container || document;
+  if (!root.querySelector('pre.mermaid:not([data-processed])')) return;
   if (typeof mermaid === 'undefined') {
     loadMermaid().then(
       () => initMermaidBlocks(container),
@@ -9958,19 +10177,37 @@ function initMermaidBlocks(container) {
     );
     return;
   }
-  mermaid.run({ nodes: [...blocks] });
+  queueMermaid(() => {
+    const blocks = [...root.querySelectorAll('pre.mermaid:not([data-processed])')];
+    // Set here, after DOMPurify: it drops an attribute whose value holds `-->`, as most diagrams do.
+    for (const b of blocks) if (!b.hasAttribute('data-original')) b.setAttribute('data-original', b.textContent);
+    return blocks.length ? mermaid.run({ nodes: blocks }) : undefined;
+  });
 }
 
 function reinitMermaidTheme() {
   if (typeof mermaid === 'undefined') return;
-  mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
-  document.querySelectorAll('pre.mermaid[data-processed]').forEach((el) => {
-    el.removeAttribute('data-processed');
-    el.innerHTML = escapeHtml(el.getAttribute('data-original') || '');
+  queueMermaid(() => {
+    const config = mermaidConfig();
+    const key = JSON.stringify(config);
+    if (key === mermaidThemeKey) return;
+    mermaidThemeKey = key;
+    mermaid.initialize(config);
+    document.querySelectorAll('pre.mermaid[data-processed]').forEach((el) => {
+      el.removeAttribute('data-processed');
+      el.innerHTML = escapeHtml(el.getAttribute('data-original') || '');
+    });
+    initMermaidBlocks();
   });
-  initMermaidBlocks();
 }
 
+// Keyed on the colors for the same reason as the terminal theme: under the hub a theme change
+// lands in two steps.
+new MutationObserver(reinitMermaidTheme).observe(document.body, {
+  attributes: true,
+  attributeFilter: ['class', 'data-color-theme', 'style'],
+});
+
 const _agentTabTexts = {};
 
 function renderAgentTabs(promptHtml, responseHtml, promptText, responseText) {
@@ -10504,7 +10741,6 @@ function applyTheme(light) {
   const light$ = document.getElementById('hljs-theme-light');
   if (dark$) dark$.disabled = light;
   if (light$) light$.disabled = !light;
-  reinitMermaidTheme();
 }
 
 function toggleTheme() {
@@ -11171,7 +11407,7 @@ function renderSessionPicker() {
     .map((s, i) => {
       const outside = i >= local.length;
       const project = s.project ? (outside ? s.project : pathBasename(s.project)) : '';
-      return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}${outside ? ' outside' : ''}" data-idx="${i}" title="${escapeHtml(s.project ? `${s.id}\n${s.project}` : s.id)}">
+      return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}${outside ? ' outside' : ''} ${sessionBarClass(s)}" data-idx="${i}" title="${escapeHtml(s.project ? `${s.id}\n${s.project}` : s.id)}">
         ${spDotHtml(s)}
         <span class="sp-name">${escapeHtml(sessionDisplayName(s))}</span>
         <span class="sp-project">${escapeHtml(project)}</span>
@@ -12228,6 +12464,7 @@ function syncPanes() {
     const side = sides.get(el.dataset.key);
     el.classList.toggle('on', side !== undefined);
     markPaneSide(el, side, el.dataset.key === focusKey);
+    if (paneLineWanted.size && side !== undefined) applyPaneLine(el);
   }
   const boardWasSplit = boardInSplit();
   markPaneSide(paneBoard, boardSide, !!boardSide && !pane);
@@ -12342,7 +12579,7 @@ function mountPane(sid, pane) {
   if (existing) {
     paneFrames.delete(key);
     paneFrames.set(key, existing);
-    if (stalePaneViews.delete(existing)) reloadPaneView(sid, pane, existing);
+    if (stalePaneViews.delete(existing)) autoReloadPaneView(sid, pane, existing);
     return key;
   }
   const view = document.createElement('div');
@@ -12405,7 +12642,11 @@ async function loadPaneView(sid, pane, view, scroll) {
     const restore = scroll
       ? `<script>addEventListener('load',()=>requestAnimationFrame(()=>scrollTo(${Number(scroll.x) || 0},${Number(scroll.y) || 0})))</script>`
       : '';
-    const frame = createPreviewFrame('pane-frame modal-zoomable', data.content + REVIEW_BRIDGE_TAG + restore);
+    // A show card's own zoom follows the text zoom (showBridge), so its frame is not .modal-zoomable.
+    const [cls, doc] = pane.show
+      ? ['pane-frame show-pane-frame', showSrcdoc(data.content, scroll?.y)]
+      : ['pane-frame modal-zoomable', data.content + REVIEW_BRIDGE_TAG + restore];
+    const frame = createPreviewFrame(cls, doc);
     frame.title = pane.title;
     view.appendChild(frame);
     attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, frame, frame));
@@ -12416,6 +12657,7 @@ async function loadPaneView(sid, pane, view, scroll) {
     body.parentElement.dataset.path = data.path;
     renderPreviewContent(body, data.path, data.content, data.kind);
     attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, body, null));
+    applyPaneLine(view);
     return;
   }
   const [title, text] = !data
@@ -12475,13 +12717,23 @@ function onPaneFileChanged(filePath) {
     const [sid, paneId] = key.split('/');
     const pane = paneLayout(sid).panes.find((p) => p.id === paneId);
     if (pane?.target !== filePath) continue;
-    if (view.classList.contains('on')) reloadPaneView(sid, pane, view);
+    if (view.classList.contains('on')) autoReloadPaneView(sid, pane, view);
     else stalePaneViews.add(view);
   }
 }
 
+let paneUpdatedToastTimer = 0;
+
+// An editor save can fire several change events, so one toast follows the last reload.
+async function autoReloadPaneView(sid, pane, view) {
+  if (!(await reloadPaneView(sid, pane, view))) return;
+  clearTimeout(paneUpdatedToastTimer);
+  paneUpdatedToastTimer = setTimeout(() => showToast('Pane updated', 'info'), 1000);
+}
+
 // Builds the new view hidden over the old one and swaps them once it has loaded and scrolled,
-// so a reload shows no blank frame and no jump. The newest reload of a view wins.
+// so a reload shows no blank frame and no jump. The newest reload of a view wins; the others
+// resolve false.
 async function reloadPaneView(sid, pane, view) {
   const key = view.dataset.key;
   const token = {};
@@ -12495,7 +12747,7 @@ async function reloadPaneView(sid, pane, view) {
   const fresh = document.createElement('div');
   fresh.dataset.key = key;
   await loadPaneView(sid, pane, fresh, frame && paneFrameScroll.get(frame));
-  if (!live()) return;
+  if (!live()) return false;
   fresh.className = view.className;
   fresh.style.visibility = 'hidden';
   view.after(fresh);
@@ -12512,7 +12764,7 @@ async function reloadPaneView(sid, pane, view) {
   }
   if (!live()) {
     fresh.remove();
-    return;
+    return false;
   }
   paneReloads.delete(key);
   fresh.className = view.className;
@@ -12520,6 +12772,7 @@ async function reloadPaneView(sid, pane, view) {
   view.remove();
   paneFrames.set(key, fresh);
   syncPaneReview();
+  return true;
 }
 
 // One reading width for every pane, kept apart from the modals': a modal's saved size
@@ -12578,7 +12831,7 @@ function attachPaneReview(view, sessionId, opts) {
 
 function syncPaneReview() {
   const view = activePaneView();
-  setBaseReview((view && paneReviews.get(view)) || null);
+  setBaseReview((view && paneReviews.get(view)) || (wantsTerminal() && showState.review) || null);
 }
 
 function unmountPane(sid, paneId) {
@@ -12679,18 +12932,19 @@ function paneById(id) {
   return id == null ? activePane(sid) : paneLayout(sid).panes.find((p) => p.id === id) || null;
 }
 
-function reloadPane(id) {
+async function reloadPane(id) {
   const pane = paneById(id);
   if (!pane) return;
   const sid = paneSessionId();
   const view = paneFrames.get(`${sid}/${pane.id}`);
   if (pane.kind !== 'url' && view) {
-    reloadPaneView(sid, pane, view);
-    return;
+    await reloadPaneView(sid, pane, view);
+  } else {
+    unmountPane(sid, pane.id);
+    paneRefused.delete(pane.target);
+    syncPanes();
   }
-  unmountPane(sid, pane.id);
-  paneRefused.delete(pane.target);
-  syncPanes();
+  showToast('Pane reloaded', 'success');
 }
 
 function openPaneExternally(id) {
@@ -12896,6 +13150,45 @@ async function postPane(sid, body) {
   return sid === paneSessionId();
 }
 
+// Pane key → line to show once the pane's source is rendered and on screen. Not stored with the pane.
+const paneLineWanted = new Map();
+
+function applyPaneLine(view) {
+  const line = paneLineWanted.get(view.dataset.key);
+  const body = view.querySelector('.pane-doc-body');
+  if (!line || !body || !view.offsetParent) return;
+  paneLineWanted.delete(view.dataset.key);
+  markSourceLine(body, line);
+}
+
+async function openPaneAtLine(sid, { path, line }, base) {
+  const onScreen = await postPane(sid, { target: path, base });
+  if (onScreen === null) return;
+  paneLineWanted.set(`${sid}/${getActivePaneId(sid)}`, line);
+  if (onScreen) syncPanes();
+  toastPaneAdded(sid, onScreen, pathBasename(path));
+}
+
+async function openPreviewAtLine({ path, line }, base) {
+  await openPreviewByPath(path, base, openFileInEditor);
+  if (currentPreviewPath) markSourceLine(document.getElementById('preview-modal-body'), line);
+}
+
+// A band under the line, so the text stays as it is; past the end it marks the last line.
+function markSourceLine(bodyEl, line) {
+  const pre = bodyEl.querySelector('.preview-source');
+  if (!pre) return;
+  let band = pre.querySelector('.src-line');
+  if (!band) {
+    band = document.createElement('div');
+    band.className = 'src-line';
+    band.setAttribute('aria-hidden', 'true');
+    pre.prepend(band);
+  }
+  band.style.setProperty('--line', Math.min(line, Number(pre.dataset.lines) || 1) - 1);
+  band.scrollIntoView({ block: 'center', inline: 'nearest' });
+}
+
 function openFileInPane(filePath, closeModal) {
   if (!filePath || !paneSessionId()) return;
   closeModal();
@@ -13395,8 +13688,10 @@ function toggleTerminal() {
   syncTerminal();
 }
 
+// The show card sits in the pane but is not the terminal, so Alt+` from it goes to the terminal.
 function terminalPaneFocused() {
-  return document.getElementById('terminal-pane').contains(document.activeElement);
+  const active = document.activeElement;
+  return document.getElementById('terminal-pane').contains(active) && !showCardEl().contains(active);
 }
 
 // Kanban's own session keys (new, resume, swap) use the hub's modifier, so the hub leaves them alone.
@@ -13429,6 +13724,7 @@ function terminalShortcut(e, probe = false) {
     return () => openNewSession(null, e.code === 'KeyR');
   }
   if (e.code !== 'Backquote' || e.metaKey) return null;
+  if (ctrlAlt) return toggleShowFocus;
   if (e.ctrlKey && !e.altKey) return e.shiftKey ? openTerminalManager : toggleTerminal;
   if (e.altKey && !e.ctrlKey && !e.shiftKey) return toggleTerminalFocus;
   if (!e.altKey || !e.shiftKey || e.ctrlKey) return null;
@@ -13467,6 +13763,20 @@ function toggleTerminalFocus() {
   else focusTerminalPane();
 }
 
+function toggleShowFocus() {
+  if (isShowCardFocused()) {
+    focusTerminalPane();
+    return;
+  }
+  if (!wantsTerminal() || !showState.posts.length) return;
+  if (showState.closed || showState.collapsed) {
+    showState.closed = false;
+    showState.collapsed = false;
+    renderShow();
+  }
+  focusShowBody();
+}
+
 // Idempotent: runs on every view change, so whichever path changed the view lands here.
 function syncTerminal() {
   const btn = document.getElementById('terminal-toggle');
@@ -13491,6 +13801,7 @@ function syncTerminal() {
   }
   sessionView.classList.toggle('terminal-mode', on);
   syncPanes();
+  syncShowCard();
   pushTerminalClaims();
   if (!on) {
     // A hidden xterm textarea drops focus, but a display:none iframe keeps it and would take keys unseen.
@@ -13748,7 +14059,16 @@ function keyClaims() {
 }
 
 function bridgeClaims(claims) {
-  return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS, ...PANE_CLAIMS] };
+  const review = reviewItems().length ? REVIEW_SEND_CLAIMS : [];
+  return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS, ...PANE_CLAIMS, ...review] };
+}
+
+function sendBridgeClaimsAll(frames, claims) {
+  const base = bridgeClaims(claims);
+  const rest = frames.filter((f) => f !== showState.frame);
+  sendBridgeClaims(rest, base);
+  if (rest.length < frames.length)
+    sendBridgeClaims([showState.frame], { ...base, keys: [...base.keys, ...SHOW_CLAIMS] });
 }
 
 function pushTerminalClaims() {
@@ -13759,7 +14079,7 @@ function pushTerminalClaims() {
     const bridged = bridgedFrameEls();
     if (!termFrame.inited && !bridged.length) return;
     const claims = keyClaims();
-    sendBridgeClaims(bridged, bridgeClaims(claims));
+    sendBridgeClaimsAll(bridged, claims);
     if (!termFrame.inited) return;
     const sig = JSON.stringify(claims);
     if (sig === termFrame.claims) return;
@@ -13816,14 +14136,11 @@ function adjustTerminalFontSize(step) {
     else store.setItem(TERMINAL_FONT_KEY, String(size));
     termState.fontSize = size;
     terminalFrameSend('font', { size });
+    layoutShow();
   }
   showToast(`Terminal ${size}px`);
 }
 
-function terminalSend(msg) {
-  if (termState.socket) terminalFrameSend('send', { msg });
-}
-
 function setTerminalStatus(text) {
   document.getElementById('terminal-status').textContent = text;
 }
@@ -14139,11 +14456,6 @@ function onTerminalMessage(sessionId, msg, tail = '') {
   }
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function endTerminalSession() {
-  terminalSend({ t: 'kill' });
-}
-
 // Detaching first means no exit message reaches the pane, so no Resume prompt shows before the board.
 // Terminal mode must go too: left on, opening the session again reconnects in 'auto' and resumes claude.
 async function closeTerminalSession(id = termState.sessionId) {
@@ -14271,6 +14583,685 @@ async function endAllTerminals() {
 
 //#endregion
 
+//#region SHOW
+// The card the session in the embedded terminal posts to with the show tool. It belongs to the
+// terminal, not the session: /clear and the --resume picker change the session id, the terminal id
+// stays. Nothing here runs until the terminal view shows a terminal that has posts.
+const SHOW_MSG = 'cck-show:';
+const SHOW_SIZE_KEY = 'cck-show-size-v2';
+const SHOW_VIEW_KEY = 'cck-show-view-v1';
+const SHOW_MIN_W = 280;
+const SHOW_MIN_H = 120;
+const SHOW_INSET = 8;
+const SHOW_CSP =
+  "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; font-src data:; media-src data:; frame-src 'none'; connect-src 'none'; form-action 'none'";
+// The card's token contract (the show skill lists these names) mapped to the board's theme vars.
+const SHOW_TOKENS = {
+  '--color-bg': '--bg-surface',
+  '--color-bg-subtle': '--bg-deep',
+  '--color-text': '--text-primary',
+  // --text-muted is too faint for body text on the card.
+  '--color-text-muted': '--text-tertiary',
+  '--color-border': '--border',
+  '--color-accent': '--accent',
+  '--color-info': '--info',
+  '--color-success': '--success',
+  '--color-warning': '--warning',
+  '--color-danger': '--danger',
+};
+// One chart palette for every color theme, checked against each theme in show-card.test.js.
+const SHOW_PALETTE = {
+  light: {
+    series: ['#2a78d6', '#c4511c', '#008a72', '#ad6f00', '#c4467a', '#008300', '#4a3aa7', '#d03a3a'],
+    ramp: ['#5598e7', '#2a78d6', '#1c5cab', '#104281', '#0a2b57'],
+  },
+  dark: {
+    series: ['#3987e5', '#d95926', '#199e70', '#c98500', '#d55181', '#2a9a2a', '#9085e9', '#e66767'],
+    ramp: ['#256abf', '#3987e5', '#6da7ec', '#9ec5f4', '#cde2fb'],
+  },
+};
+// Bundled fonts do not load in the opaque-origin srcdoc.
+const SHOW_FONTS = {
+  '--font-sans': "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+  '--font-mono': "ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace",
+};
+const SHOW_FRAME_BASE =
+  `html{color-scheme:var(--color-scheme);font-size:13px}body{margin:0;padding:.9rem 1.1rem;background:var(--color-bg);color:var(--color-text);font:1rem/1.5 var(--font-sans)}` +
+  'h1,h2,h3,h4{margin:0 0 .5em;font-weight:600;line-height:1.3}h1{font-size:1.25rem}h2{font-size:1.1rem}h3,h4{font-size:1rem}p{margin:0 0 .6em}a{color:var(--color-accent)}' +
+  'code,pre,kbd{font-family:var(--font-mono);font-size:.92rem}pre{padding:.6rem .8rem;border-radius:6px;background:var(--color-bg-subtle);border:1px solid var(--color-border);overflow:auto}' +
+  'table{border-collapse:collapse;font-size:.92rem}th,td{border:1px solid var(--color-border);padding:.3rem .6rem;text-align:left}th{background:var(--color-bg-subtle)}hr{border:0;border-top:1px solid var(--color-border)}' +
+  'button{font:inherit;font-size:.92rem;padding:.4rem .9rem;border-radius:6px;border:1px solid var(--color-border);background:transparent;color:var(--color-text);cursor:pointer}' +
+  'button.primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}input,select,textarea{font:inherit;color:var(--color-text)}';
+const SHOW_MERMAID_INIT =
+  '%%{init: {"themeVariables": {"fontSize": "12px"}, "flowchart": {"nodeSpacing": 28, "rankSpacing": 28, "padding": 6}}}%%\n';
+const SHOW_ICONS = {
+  prev: '<path d="M15 18l-6-6 6-6"/>',
+  next: '<path d="M9 18l6-6-6-6"/>',
+  collapse: '<path d="M18 15l-6-6-6 6"/>',
+  uncollapse: '<path d="M6 9l6 6 6-6"/>',
+  expand: '<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>',
+  restore: '<path d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"/>',
+  clear: '<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>',
+  close: '<path d="M18 6L6 18M6 6l12 12"/>',
+  pane: '<use href="#icon-pane"/>',
+};
+
+// PTY id → terminal id, from the terminal list. A terminal started after the last list read is
+// missing until a post asks for it.
+const terminalIds = new Map();
+const showState = {
+  terminalId: null,
+  sessionId: null,
+  posts: [],
+  idx: 0,
+  closed: false,
+  expanded: false,
+  collapsed: false,
+  marked: new Set(),
+  rendered: null,
+  frame: null,
+  frameH: 0,
+  frameY: 0,
+  frameFocused: false,
+  listSeq: 0,
+  bodySeq: 0,
+  lookup: null,
+  review: null,
+  path: null,
+};
+let showSize = store.readJson(SHOW_SIZE_KEY);
+// Terminal id → { closed?, collapsed?, expanded? }; no entry when no flag is set. Ids gone from the terminal list are pruned.
+const showViews = store.readJson(SHOW_VIEW_KEY, {});
+// Older boards stored the string 'collapsed' or 'expanded'.
+for (const [tid, v] of Object.entries(showViews)) if (typeof v === 'string') showViews[tid] = { [v]: true };
+const SHOW_VIEW_FLAGS = ['closed', 'collapsed', 'expanded'];
+let showHostObserver = null;
+
+function showCardEl() {
+  return document.getElementById('show-card');
+}
+
+// Focus that moves from the terminal's frame (another process) into the card's frame leaves the
+// board's activeElement on the terminal frame and fires no event here, so the card's frame
+// reports its own focus and blur (showBridge).
+function isShowCardFocused() {
+  if (showState.frameFocused && showState.frame?.isConnected) return true;
+  const el = document.activeElement;
+  return el?.tagName !== 'IFRAME' && !!el?.closest('#show-card .show-body');
+}
+
+// Deferred, because a blur in the board comes before activeElement changes.
+function syncShowFocus() {
+  setTimeout(() => showCardEl()?.classList.toggle('focused', isShowCardFocused()));
+}
+
+function focusShowBody() {
+  showCardEl()?.querySelector('.show-body')?.focus();
+}
+
+const SHOW_KEY_COMMANDS = { 'alt+Enter': 'expand', 'alt+w': 'close' };
+
+// The body keeps focus, because a render replaces an HTML card's frame.
+function showCardKey(e) {
+  if (matchKey(e, '[', ']')) {
+    showCommand(e.key === ']' ? 'next' : 'prev');
+    focusShowBody();
+    return true;
+  }
+  const combo = ClaudeHub.comboOf(e);
+  const cmd = combo === 'Escape' ? (showState.expanded ? 'expand' : 'collapse') : SHOW_KEY_COMMANDS[combo];
+  if (cmd) {
+    showCommand(cmd);
+    if (cmd === 'expand') focusShowBody();
+    else focusTerminalPane();
+    return true;
+  }
+  const p = showState.posts[showState.idx];
+  if (combo !== 'ctrl+d' || !p) return false;
+  const message = `Remove "${p.title}" from the card?`;
+  confirmModal({ title: 'Remove post', message, okLabel: 'Remove' }).then((ok) => {
+    if (!ok || showState.posts[showState.idx]?.id !== p.id) return;
+    showCommand('remove');
+    focusAfterShowRemove();
+  });
+  return true;
+}
+
+// The removed post took the focused body or button with it.
+function focusAfterShowRemove() {
+  if (showState.posts.length) focusShowBody();
+  else focusTerminalPane();
+}
+
+function showIcon(name) {
+  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${SHOW_ICONS[name]}</svg>`;
+}
+
+// An empty list can be a host that has not restored its terminals yet, so it prunes nothing.
+function rememberTerminalIds(list) {
+  terminalIds.clear();
+  for (const t of list) if (t.terminalId) terminalIds.set(t.id, t.terminalId);
+  if (!terminalIds.size) return;
+  const live = new Set(terminalIds.values());
+  const gone = Object.keys(showViews).filter((tid) => !live.has(tid));
+  if (!gone.length) return;
+  for (const tid of gone) delete showViews[tid];
+  store.writeJson(SHOW_VIEW_KEY, showViews);
+}
+
+function setShowView(tid, view) {
+  const set = SHOW_VIEW_FLAGS.filter((f) => view[f]);
+  const old = showViews[tid] || {};
+  if (SHOW_VIEW_FLAGS.every((f) => !!old[f] === set.includes(f))) return;
+  if (set.length) showViews[tid] = Object.fromEntries(set.map((f) => [f, true]));
+  else delete showViews[tid];
+  store.writeJson(SHOW_VIEW_KEY, showViews);
+}
+
+function saveShowView() {
+  if (showState.terminalId) setShowView(showState.terminalId, showState);
+}
+
+function resetShowPosts() {
+  showState.posts = [];
+  showState.marked.clear();
+  showState.rendered = null;
+}
+
+// Runs on every view change, so it returns at once unless the shown terminal changed.
+function syncShowCard() {
+  const pty = wantsTerminal() ? currentSessionId : null;
+  if (pty && runningTerminals.has(pty) && !terminalIds.has(pty) && showState.lookup !== pty) {
+    showState.lookup = pty;
+    loadTerminals().catch(() => {});
+  }
+  const tid = pty ? (terminalIds.get(pty) ?? null) : null;
+  if (tid === showState.terminalId) return;
+  const view = (tid && showViews[tid]) || {};
+  Object.assign(showState, { terminalId: tid, sessionId: null, idx: 0 });
+  for (const f of SHOW_VIEW_FLAGS) showState[f] = !!view[f];
+  resetShowPosts();
+  renderShow();
+  if (tid) loadShowPosts(tid, { newest: true }).then((ok) => ok && renderShow());
+}
+
+async function loadShowPosts(tid, { newest = false } = {}) {
+  const seq = ++showState.listSeq;
+  const data = await getJson(apiPath`/api/terminals/${tid}/show`, null, { cache: 'no-store' });
+  if (seq !== showState.listSeq || tid !== showState.terminalId) return false;
+  const shownId = showState.posts[showState.idx]?.id;
+  showState.sessionId = data?.sessionId ?? null;
+  showState.posts = Array.isArray(data?.posts) ? data.posts : [];
+  const at = showState.posts.findIndex((p) => p.id === shownId);
+  showState.idx = newest || at < 0 ? Math.max(0, showState.posts.length - 1) : at;
+  return true;
+}
+
+async function onShowPosted(d) {
+  if (typeof d.terminalId !== 'string') return;
+  const view = showViews[d.terminalId];
+  if (!d.replaced && view?.closed && d.terminalId !== showState.terminalId)
+    setShowView(d.terminalId, { ...view, closed: false });
+  if (!showState.terminalId) {
+    if (!wantsTerminal()) return;
+    if (!terminalIds.has(currentSessionId)) showState.lookup = null;
+    syncShowCard();
+    return;
+  }
+  if (d.terminalId !== showState.terminalId) return;
+  if (d.sessionId !== showState.sessionId) resetShowPosts();
+  if (!(await loadShowPosts(d.terminalId))) return;
+  const i = showState.posts.findIndex((p) => p.id === d.id);
+  if (i < 0) return renderShow();
+  if (d.replaced) {
+    if (i !== showState.idx) showState.marked.add(d.id);
+    else if (showState.rendered) showState.rendered.stale = true;
+    return renderShow();
+  }
+  showState.idx = i;
+  showState.closed = false;
+  renderShow({ flash: true });
+}
+
+function onShowCleared(d) {
+  if (d.terminalId !== showState.terminalId) return;
+  resetShowPosts();
+  renderShow();
+}
+
+function dropShowPost(id) {
+  const i = showState.posts.findIndex((p) => p.id === id);
+  if (i < 0) return false;
+  showState.posts.splice(i, 1);
+  showState.marked.delete(id);
+  if (i < showState.idx || showState.idx >= showState.posts.length) showState.idx--;
+  return true;
+}
+
+function onShowRemoved(d) {
+  if (d.terminalId !== showState.terminalId || d.sessionId !== showState.sessionId) return;
+  if (dropShowPost(d.id)) renderShow();
+}
+
+function showHeaderHtml(p) {
+  const n = showState.posts.length;
+  const i = showState.idx;
+  const key = p.key ? `<span class="show-sep">·</span><span class="show-key">${escapeHtml(p.key)}</span>` : '';
+  const btn = (cmd, icon, title, disabled = false) =>
+    `<button type="button" class="show-btn${cmd === 'remove' ? ' remove' : ''}" data-show="${escapeHtml(cmd)}" title="${escapeHtml(title)}" aria-label="${escapeHtml(title)}"${disabled ? ' disabled' : ''}>${showIcon(icon)}</button>`;
+  const { collapsed, expanded } = showState;
+  return `<span class="show-nav"><span class="show-title" title="${escapeHtml(p.title)}">${escapeHtml(p.title)}</span>${key}</span>
+    <span class="show-pager">${btn('prev', 'prev', 'Previous post', i === 0)}<span class="show-pos">${i + 1}/${n}</span>${btn('next', 'next', 'Next post', i === n - 1)}</span>
+    <span class="show-actions">${btn('pane', 'pane', 'Open in a pane of the session')}${btn('collapse', collapsed ? 'uncollapse' : 'collapse', collapsed ? 'Show the post' : 'Collapse to the header · Esc')}${btn('expand', expanded ? 'restore' : 'expand', expanded ? 'Back to the card · Alt+Enter or Esc' : 'Fill the terminal · Alt+Enter')}${btn('remove', 'clear', 'Remove this post · Ctrl+D · Shift+click clears every post')}${btn('close', 'close', 'Close until the next post · Alt+W')}</span>`;
+}
+
+function showTicksHtml() {
+  return showState.posts
+    .map((p, i) => {
+      const marked = showState.marked.has(p.id);
+      const title = marked ? `${p.title} · updated` : p.title;
+      return `<button type="button" class="show-tick${i === showState.idx ? ' on' : ''}${marked ? ' dot' : ''}" data-go="${i}" title="${escapeHtml(title)}" aria-label="${escapeHtml(title)}"></button>`;
+    })
+    .join('');
+}
+
+function renderShow({ flash = false } = {}) {
+  saveShowView();
+  const card = showCardEl();
+  const chip = document.getElementById('show-reopen');
+  const n = showState.posts.length;
+  const open = n > 0 && !showState.closed;
+  chip.hidden = !n || open;
+  chip.querySelector('.show-reopen-n').textContent = `show · ${n}`;
+  card.classList.toggle('open', open);
+  if (!open) {
+    showState.rendered = null;
+    showState.frame = null;
+    setShowReview(null);
+    showHostObserver?.disconnect();
+    showHostObserver = null;
+    card.replaceChildren();
+    return;
+  }
+  showState.idx = Math.min(Math.max(0, showState.idx), n - 1);
+  const p = showState.posts[showState.idx];
+  showState.marked.delete(p.id);
+  card.classList.toggle('expanded', showState.expanded && !showState.collapsed);
+  card.classList.toggle('collapsed', showState.collapsed);
+  if (!card.firstChild) {
+    card.innerHTML = `<header class="show-head"></header><div class="show-ticks"></div><div class="show-body" tabindex="-1"></div>
+      <aside class="review-panel show-review" hidden></aside>
+      <div class="show-grip" title="Resize · double-click to fit"><svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M1 1v8h8M1 5l4 4"/></svg></div>`;
+  }
+  card.querySelector('.show-head').innerHTML = showHeaderHtml(p);
+  card.querySelector('.show-ticks').innerHTML = showTicksHtml();
+  const r = showState.rendered;
+  if (!showState.collapsed && (!r || r.stale || r.id !== p.id || r.updatedAt !== p.updatedAt)) {
+    renderShowBody(p, r?.id === p.id);
+  }
+  if (flash) {
+    card.classList.remove('flash');
+    void card.offsetWidth;
+    card.classList.add('flash');
+  }
+  if (!showHostObserver) {
+    showHostObserver = new ResizeObserver(() => layoutShow());
+    showHostObserver.observe(document.getElementById('terminal-host'));
+    showHostObserver.observe(card.querySelector('.show-review'));
+  }
+  layoutShow();
+}
+
+async function renderShowBody(p, samePost) {
+  const seq = ++showState.bodySeq;
+  const tid = showState.terminalId;
+  showState.rendered = { id: p.id, updatedAt: p.updatedAt };
+  const data = await getJson(apiPath`/api/terminals/${tid}/show/${p.id}`, null, { cache: 'no-store' });
+  const card = showCardEl();
+  const body = card.querySelector('.show-body');
+  if (seq !== showState.bodySeq || !body) return;
+  showState.path = data && !data.waiting ? data.path : null;
+  const html = data?.kind === 'html' && !data.waiting;
+  // A new frame or document drops focus to the page, and Ctrl +/- then zooms the terminal.
+  const refocus = isShowCardFocused() ? () => body.focus() : () => {};
+  card.classList.toggle('html', html);
+  if (html) {
+    const restoreY = samePost && showState.frame ? showState.frameY : 0;
+    showState.frameY = restoreY;
+    if (samePost && showState.frame?.isConnected) {
+      showState.frame.srcdoc = showSrcdoc(data.content, restoreY);
+    } else {
+      showState.frameH = 0;
+      body.replaceChildren(createShowFrame(p.title, showSrcdoc(data.content, 0)));
+    }
+    refocus();
+    setShowReview(showReviewOpts(p, data, body, showState.frame));
+    layoutShow();
+    return;
+  }
+  showState.frame = null;
+  const keepScroll = samePost ? body.scrollTop : 0;
+  const md = document.createElement('div');
+  md.className = 'show-md modal-zoomable';
+  if (!data) md.innerHTML = '<p class="show-gone">This post is gone.</p>';
+  else if (data.waiting) md.innerHTML = '<p class="show-gone">Waiting for content.</p>';
+  else renderPreviewContent(md, data.file || p.file || '', data.content ?? '', data.kind);
+  for (const pre of md.querySelectorAll('pre.mermaid')) {
+    if (/^\s*(---|%%\{)/.test(pre.textContent)) continue;
+    pre.textContent = SHOW_MERMAID_INIT + pre.textContent;
+  }
+  body.replaceChildren(md);
+  refocus();
+  body.scrollTop = keepScroll;
+  setShowReview(data && !data.waiting ? showReviewOpts(p, data, md, null) : null);
+  layoutShow();
+}
+
+function showReviewOpts(p, data, contentEl, frame) {
+  const opts = fileReviewOpts(data.path ?? '', data.kind, contentEl, frame);
+  if (!opts) return null;
+  const card = showCardEl();
+  return {
+    ...opts,
+    panelEl: card.querySelector('.show-review'),
+    hostEl: card,
+    sessionId: showState.sessionId,
+    source: {
+      kind: 'show',
+      id: p.id,
+      label: `the show card "${p.title}"`,
+      locate: data.path ? `The card shows ${data.path}.` : null,
+    },
+  };
+}
+
+// The card's review is the base review in the terminal view, like a pane's elsewhere.
+function setShowReview(opts) {
+  if (showState.review === opts) return;
+  showState.review = opts;
+  syncPaneReview();
+}
+
+// No allow-popups: it opens window.open as a way out. The CSP blocks fetch and remote sub-resources,
+// but not navigation or WebRTC; the real guard is that only the terminal's own agent can post.
+function createShowFrame(title, srcdoc) {
+  const frame = createPreviewFrame('show-frame', srcdoc, 'allow-scripts');
+  frame.title = title;
+  showState.frame = frame;
+  showState.frameFocused = false;
+  return frame;
+}
+
+function showTokens() {
+  const css = getComputedStyle(document.body);
+  const mode = isLightTheme() ? 'light' : 'dark';
+  const out = { ...SHOW_FONTS, '--color-scheme': mode };
+  for (const [token, v] of Object.entries(SHOW_TOKENS)) out[token] = css.getPropertyValue(v).trim();
+  for (const [kind, colors] of Object.entries(SHOW_PALETTE[mode])) {
+    for (const [i, c] of colors.entries()) out[`--color-${kind}-${i + 1}`] = c;
+  }
+  return out;
+}
+
+// A whole document gets the tokens and base styles first in its head, so its own styles win.
+function showSrcdoc(content, restoreY) {
+  const tokens = Object.entries(showTokens())
+    .map(([k, v]) => `${k}:${v}`)
+    .join(';');
+  const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${tokens}}${SHOW_FRAME_BASE}</style>`;
+  const bridge = `<script>(${showBridge})(${Math.max(0, Math.round(restoreY) || 0)}, ${modalZoom});</script>${REVIEW_BRIDGE_TAG}`;
+  if (!/^\s*(<!doctype|<html)/i.test(content)) {
+    return `<!doctype html><html><head><meta charset="utf-8">${head}</head><body>${content}${bridge}</body></html>`;
+  }
+  const at = /<head[^>]*>/i.exec(content) || /<html[^>]*>/i.exec(content);
+  const inject = at?.[0].toLowerCase().startsWith('<head') ? head : `<head>${head}</head>`;
+  const cut = at ? at.index + at[0].length : 0;
+  return content.slice(0, cut) + inject + content.slice(cut) + bridge;
+}
+
+// Runs inside the card as source text, so it must not close over anything outside its own body.
+// Keys and links go through reviewBridge, which the card loads next to this.
+function showBridge(restoreY, textZoom) {
+  const P = 'cck-show:';
+  const send = (msg) => parent.postMessage({ ...msg, type: P + msg.type }, '*');
+  const restore = () => {
+    if (restoreY) scrollTo(0, restoreY);
+  };
+  restore();
+  addEventListener('load', restore);
+  // Zoom, not a root font size, because most cards are sized in px: 1 up to a 480px card, 16/13 at 1000px, at most 18/13.
+  // The board's text zoom (Ctrl +/-) multiplies it; the zoom shrinks innerWidth, so the fit reads the unzoomed width.
+  const fit = () => {
+    const width = innerWidth * (Number.parseFloat(document.documentElement.style.zoom) || 1);
+    const z = Math.min(Math.max((10.2 + width * 0.0058) / 13, 1), 18 / 13) * textZoom;
+    document.documentElement.style.zoom = z !== 1 ? z.toFixed(3) : '';
+  };
+  fit();
+  addEventListener('resize', fit);
+  let lastH = -1;
+  const measure = () => {
+    const b = document.body;
+    const cs = getComputedStyle(b);
+    const h = Math.ceil(b.getBoundingClientRect().height + parseFloat(cs.marginTop) + parseFloat(cs.marginBottom));
+    if (h === lastH) return;
+    lastH = h;
+    send({ type: 'height', h });
+  };
+  new ResizeObserver(measure).observe(document.body);
+  addEventListener('focus', () => send({ type: 'focus', on: true }));
+  addEventListener('blur', () => send({ type: 'focus', on: false }));
+  let raf = 0;
+  addEventListener('scroll', () => {
+    if (raf) return;
+    raf = requestAnimationFrame(() => {
+      raf = 0;
+      send({ type: 'scroll', y: scrollY });
+    });
+  });
+  addEventListener('message', (e) => {
+    if (e.source !== parent) return;
+    if (e.data?.type === `${P}zoom`) {
+      textZoom = Number(e.data.z) || 1;
+      fit();
+    } else if (e.data?.type === `${P}tokens`) {
+      for (const [k, v] of Object.entries(e.data.tokens)) document.documentElement.style.setProperty(k, v);
+    }
+  });
+}
+
+window.addEventListener('message', (e) => {
+  const frame = showState.frame;
+  if (!frame || e.source !== frame.contentWindow || typeof e.data?.type !== 'string') return;
+  if (e.data.type === `${SHOW_MSG}scroll`) showState.frameY = Number(e.data.y) || 0;
+  else if (e.data.type === `${SHOW_MSG}focus`) {
+    showState.frameFocused = e.data.on === true;
+    syncShowFocus();
+  } else if (e.data.type === `${SHOW_MSG}height`) {
+    showState.frameH = Number(e.data.h) || 0;
+    layoutShow();
+  }
+});
+
+// The same body attributes the terminal theme watches; a markdown card follows the board's CSS.
+new MutationObserver(() => {
+  postToShowFrames(() => ({ type: `${SHOW_MSG}tokens`, tokens: showTokens() }));
+}).observe(document.body, { attributes: true, attributeFilter: ['class', 'data-color-theme', 'style'] });
+
+// Builds the message only when a frame is there, because showTokens forces a style recalc.
+function postToShowFrames(makeMsg) {
+  const frames = [showState.frame, ...document.querySelectorAll('.show-pane-frame')].filter((f) => f?.contentWindow);
+  if (!frames.length) return;
+  const msg = makeMsg();
+  for (const f of frames) f.contentWindow.postMessage(msg, '*');
+}
+
+function showFitSize(w, h) {
+  return { w: Math.min(Math.max(360, Math.round(w * 0.4)), 640, w - 2 * SHOW_INSET), h: Math.round(h * 0.6) };
+}
+
+function showClampSize(size, w, h) {
+  const clamp = (v, lo, hi) => Math.max(lo, Math.min(v, hi));
+  return { w: clamp(size.w, SHOW_MIN_W, w - 2 * SHOW_INSET), h: clamp(size.h, SHOW_MIN_H, h - 2 * SHOW_INSET) };
+}
+
+function layoutShow() {
+  const card = showCardEl();
+  if (!card.classList.contains('open')) return;
+  const host = document.getElementById('terminal-host');
+  const w = host.clientWidth;
+  const h = host.clientHeight;
+  if (!w || !h) return;
+  const fit = showFitSize(w, h);
+  card.style.setProperty('--show-fit-w', `${fit.w}px`);
+  card.style.setProperty('--show-fit-h', `${fit.h}px`);
+  card.style.setProperty('--show-term-font', `${currentTerminalFontSize()}px`);
+  const sized = !!showSize && !showState.expanded && !showState.collapsed;
+  card.classList.toggle('sized', sized);
+  if (sized) {
+    const s = showClampSize(showSize, w, h);
+    card.style.setProperty('--show-w', `${s.w}px`);
+    card.style.setProperty('--show-h', `${s.h}px`);
+  }
+  const frame = showState.frame;
+  if (!frame) return;
+  const peek = !showState.expanded && !sized;
+  const chrome =
+    card.querySelector('.show-head').offsetHeight +
+    card.querySelector('.show-ticks').offsetHeight +
+    card.querySelector('.show-review').offsetHeight +
+    2;
+  frame.style.flex = peek ? 'none' : '1';
+  frame.style.height = peek ? `${Math.min(showState.frameH || SHOW_MIN_H, fit.h - chrome)}px` : '';
+}
+
+async function openShowInPane() {
+  const sid = showState.sessionId;
+  const target = showState.path;
+  if (!sid || !target) return showToast('The post has no file yet');
+  const title = showState.posts[showState.idx]?.title;
+  const onScreen = await postPane(sid, { target, title, show: true, base: getSessionBaseDir(sid) || undefined });
+  toastPaneAdded(sid, onScreen, 'Card');
+}
+
+// `onScreen` is postPane's result: null failed, true is already in view unless the terminal covers it.
+function toastPaneAdded(sid, onScreen, label) {
+  if (onScreen === null || (onScreen && !wantsTerminal())) return;
+  const open = () => (sid === currentSessionId && wantsTerminal() ? toggleTerminal() : openSession(sid));
+  showToast(`${label} added as a pane`, 'success', { label: 'Open', onClick: open });
+}
+
+function showCommand(cmd) {
+  const tid = showState.terminalId;
+  if (cmd === 'pane') {
+    openShowInPane();
+    return;
+  }
+  if (cmd === 'prev' || cmd === 'next') {
+    const i = showState.idx + (cmd === 'prev' ? -1 : 1);
+    if (i < 0 || i >= showState.posts.length) return;
+    showState.idx = i;
+    showState.collapsed = false;
+  } else if (cmd === 'collapse') showState.collapsed = !showState.collapsed;
+  else if (cmd === 'expand') {
+    showState.expanded = !showState.expanded;
+    showState.collapsed = false;
+  } else if (cmd === 'close') showState.closed = true;
+  else if (cmd === 'remove') {
+    const id = showState.posts[showState.idx]?.id;
+    if (!id) return;
+    dropShowPost(id);
+    terminalFetch(apiPath`/api/terminals/${tid}/show/${id}`, 'DELETE')
+      .then((res) => {
+        if (res.ok || res.status === 404) return;
+        showToast(`Could not remove the post (HTTP ${res.status})`, 'error');
+        loadShowPosts(tid).then((ok) => ok && renderShow());
+      })
+      .catch((e) => showToast(e.message, 'error'));
+  } else if (cmd === 'clear') {
+    resetShowPosts();
+    terminalFetch(apiPath`/api/terminals/${tid}/show`, 'DELETE')
+      .then((res) => {
+        if (!res.ok && res.status !== 404) showToast(`Could not clear the posts (HTTP ${res.status})`, 'error');
+      })
+      .catch((e) => showToast(e.message, 'error'));
+  }
+  renderShow();
+}
+
+function initShowCard() {
+  const card = showCardEl();
+  card.addEventListener('focusin', syncShowFocus);
+  card.addEventListener('focusout', syncShowFocus);
+  // A click on the header gives the card focus, so its keys and zoom apply next. Close and
+  // collapse hide the body and leave focus where it was.
+  card.addEventListener('mousedown', (e) => {
+    if (!e.target.closest('.show-head, .show-ticks')) return;
+    e.preventDefault();
+    if (showState.collapsed || e.target.closest('[data-show="close"], [data-show="collapse"]')) return;
+    focusShowBody();
+  });
+  card.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-show]');
+    if (b) {
+      if (!b.disabled) showCommand(b.dataset.show === 'remove' && e.shiftKey ? 'clear' : b.dataset.show);
+      if (b.dataset.show === 'collapse' && !showState.collapsed) focusShowBody();
+      if (b.dataset.show === 'remove') focusAfterShowRemove();
+      return;
+    }
+    const t = e.target.closest('[data-go]');
+    if (!t) return;
+    showState.idx = Number(t.dataset.go);
+    showState.collapsed = false;
+    renderShow();
+  });
+  // Pointer capture keeps the drag when the pointer crosses the card's frame or the terminal's.
+  card.addEventListener('pointerdown', (e) => {
+    const grip = e.target.closest('.show-grip');
+    if (!grip || e.button !== 0) return;
+    e.preventDefault();
+    grip.setPointerCapture(e.pointerId);
+    const r = card.getBoundingClientRect();
+    const start = { x: e.clientX, y: e.clientY, w: r.width, h: r.height };
+    let last = e;
+    let raf = 0;
+    document.body.classList.add('show-resizing');
+    const move = (ev) => {
+      last = ev;
+      raf ||= requestAnimationFrame(() => {
+        raf = 0;
+        showSize = { w: Math.round(start.w + start.x - last.clientX), h: Math.round(start.h + last.clientY - start.y) };
+        layoutShow();
+      });
+    };
+    const up = () => {
+      cancelAnimationFrame(raf);
+      grip.removeEventListener('pointermove', move);
+      grip.removeEventListener('pointerup', up);
+      grip.removeEventListener('pointercancel', up);
+      document.body.classList.remove('show-resizing');
+      const host = document.getElementById('terminal-host');
+      if (showSize) showSize = showClampSize(showSize, host.clientWidth, host.clientHeight);
+      store.writeJson(SHOW_SIZE_KEY, showSize);
+      layoutShow();
+    };
+    grip.addEventListener('pointermove', move);
+    grip.addEventListener('pointerup', up);
+    grip.addEventListener('pointercancel', up);
+  });
+  card.addEventListener('dblclick', (e) => {
+    if (!e.target.closest('.show-grip')) return;
+    showSize = null;
+    store.removeItem(SHOW_SIZE_KEY);
+    layoutShow();
+  });
+  document.getElementById('show-reopen').addEventListener('click', () => {
+    showState.closed = false;
+    renderShow({ flash: true });
+  });
+}
+
+//#endregion
+
 //#region NEW_SESSION
 // claude writes no transcript until the first message, so until then the sidebar shows a
 // placeholder built from the form. newSpecs holds one entry per such session; the entry
@@ -14417,6 +15408,8 @@ async function loadTerminals() {
   if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
   const list = data.sessions || [];
   runningTerminals = new Set(list.map((t) => t.id));
+  rememberTerminalIds(list);
+  syncShowCard();
   pushTerminalClaims();
   renderActivityChip();
   return list;
@@ -14809,15 +15802,46 @@ if (store.getItem(sectionCollapsedKey('sessions-filters')) === 'true') {
   document.getElementById('sessions-chevron').classList.add('rotated');
 }
 
+// Capture phase: a message preview opens its detail on any click, so a fold stops the click first.
+function onCallstackFold(e) {
+  if (e.type === 'keydown' && e.key !== 'Enter' && e.key !== ' ') return;
+  const fold = e.target.closest?.('code.ct .ct-has');
+  if (!fold) return;
+  // A drag that selects text ends in a click, and a review comment needs the selection.
+  if (e.type === 'click' && (e.target.closest('.ct-loc') || !window.getSelection().isCollapsed)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  treeHighlight.toggleFold(fold);
+}
+document.addEventListener('click', onCallstackFold, true);
+document.addEventListener('keydown', onCallstackFold, true);
+
+// A path:line note opens its file at that line: as a pane of the session, or in the preview with
+// Shift, from a modal, or with no session.
+function onCallstackLoc(e) {
+  const el = e.target.closest?.('code.ct .ct-loc');
+  const loc = el && treeHighlight.parseLoc(el.textContent);
+  // Shift+click extends the selection to the link, so a selection there is the click's own.
+  if (!loc || (!e.shiftKey && !window.getSelection().isCollapsed)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  if (e.shiftKey) window.getSelection().collapseToEnd();
+  const sid = el.closest('#show-card') ? showState.sessionId : currentSessionId;
+  const base = (sid && getSessionBaseDir(sid)) || undefined;
+  if (e.shiftKey || !sid || el.closest('.modal-overlay')) openPreviewAtLine(loc, base);
+  else openPaneAtLine(sid, loc, base);
+}
+document.addEventListener('click', onCallstackLoc, true);
+
 document.addEventListener('DOMContentLoaded', () => {
   if (typeof marked !== 'undefined' && typeof hljs !== 'undefined') {
     const renderer = new marked.Renderer();
     renderer.code = ({ text, lang }) => {
       if (lang === 'mermaid') {
-        return `<pre class="mermaid" data-original="${escapeHtml(text)}">${escapeHtml(text)}</pre>`;
+        return `<pre class="mermaid">${escapeHtml(text)}</pre>`;
       }
       if (treeHighlight.wantsTree(lang, text)) {
-        return `<pre><code class="hljs language-tree">${treeHighlight.highlightTree(text)}</code></pre>`;
+        return treeHighlight.renderTree(text);
       }
       let highlighted;
       if (lang && hljs.getLanguage(lang)) {
@@ -14848,6 +15872,7 @@ loadSessionGroups();
 initSessionGroupsDnd();
 initSessionPicker();
 initProjectPicker();
+initShowCard();
 for (const k of readStoredList(ACTIVITY_FILTER_KEY)) activityFilter.add(k);
 initSidebarResize();
 applyModalZoom();