claude-code-kanban 6.1.2 → 7.0.1

package/public/app.js

@@ -624,7 +624,7 @@ async function fetchTasks(sessionId) {
     const switched = sessionId !== currentSessionId;
     currentSessionId = sessionId;
     markOpenSessionRead();
-    if (switched) autoRevealLog(sessionId, newTasks.length === 0);
+    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) {
@@ -799,8 +799,11 @@ function setMessagePanelVisible(open) {
 }
 
 // An empty board has nothing to show, so the log opens in its place. It is not the user's choice,
-// so it is not stored, it closes again on a session with tasks, and a manual close sticks for that session.
-function autoRevealLog(sessionId, empty) {
+// so it is not stored, it closes again on a session with tasks or panes, and a manual close sticks for that session.
+// The pane layout loads after the switch, and applyPaneLayout asks again once it is in.
+function autoRevealLog(sessionId) {
+  if (!paneLayouts.has(sessionId)) return;
+  const empty = !currentTasks.length && !paneLayout(sessionId).panes.length;
   if (empty && !messagePanelOpen && !logDismissed.has(sessionId) && !wantsTerminal()) {
     setMessagePanelVisible(true);
     logAutoOpened = true;
@@ -2414,13 +2417,8 @@ function initModalResize() {
       modal.classList.add('user-sized');
     }
 
-    const handle = document.createElement('div');
-    handle.className = 'modal-resize-handle';
-    handle.title = 'Drag to resize · double-click to reset';
-    modal.appendChild(handle);
-
     let startW, startH, w, h;
-    _initDragResize(handle, {
+    const handle = createResizeGrip({
       onStart() {
         startW = modal.offsetWidth;
         startH = modal.offsetHeight;
@@ -2446,16 +2444,25 @@ function initModalResize() {
           store.setItem(hKey, `${h}px`);
         }
       },
+      onReset() {
+        modal.classList.remove('user-sized');
+        store.removeItem(wKey);
+        store.removeItem(hKey);
+      },
     });
-
-    handle.addEventListener('dblclick', () => {
-      modal.classList.remove('user-sized');
-      store.removeItem(wKey);
-      store.removeItem(hKey);
-    });
+    modal.appendChild(handle);
   });
 }
 
+function createResizeGrip({ onReset, ...drag }) {
+  const handle = document.createElement('div');
+  handle.className = 'modal-resize-handle';
+  handle.title = 'Drag to resize · double-click to reset';
+  _initDragResize(handle, drag);
+  handle.addEventListener('dblclick', onReset);
+  return handle;
+}
+
 const MODAL_ZOOM_KEY = 'modal-zoom';
 const MODAL_ZOOM_MIN = 0.7;
 const MODAL_ZOOM_MAX = 2.0;
@@ -2490,6 +2497,11 @@ function isAnyModalOpen() {
   return document.querySelector('.modal-overlay.visible') !== null;
 }
 
+// An open modal owns the zoom keys even when it has nothing to scale.
+function isZoomableOnScreen() {
+  return isAnyModalOpen() ? isZoomableModalOpen() : isPaneDocOnScreen();
+}
+
 const ZOOM_KEYS = { '+': 0.1, '=': 0.1, NumpadAdd: 0.1, '-': -0.1, _: -0.1, NumpadSubtract: -0.1, 0: 0, Numpad0: 0 };
 
 function zoomDelta(e) {
@@ -4877,7 +4889,7 @@ function initSessionGroupsDnd() {
   sessionsList.addEventListener('contextmenu', sgOnContextMenu);
   // The Menu key fires contextmenu at the focused element, which by then is our menu.
   document.addEventListener('contextmenu', (e) => {
-    if (e.target.closest?.('.sg-menu')) e.preventDefault();
+    if (e.target.closest?.('.sg-menu, .pane-menu')) e.preventDefault();
   });
   sessionsList.addEventListener('keydown', (e) => {
     const input = e.target.closest?.('.sg-name-input');
@@ -4918,11 +4930,8 @@ function sgCloseMenu() {
   if (menu) menu.remove();
 }
 
-// Capture phase: the global handler would otherwise read these keys as sidebar shortcuts.
-function sgMenuKeydown(e) {
-  const menu = document.getElementById('sg-menu');
-  if (!menu || e.ctrlKey || e.altKey || e.metaKey) return;
-  const items = [...menu.querySelectorAll('.sg-menu-item')];
+// Run in the capture phase: the global handler would otherwise read these keys as sidebar shortcuts.
+function menuKeydown(e, items, close) {
   const i = items.indexOf(document.activeElement);
   e.stopPropagation();
   if (e.key === 'Enter' || e.key === ' ') return;
@@ -4932,10 +4941,23 @@ function sgMenuKeydown(e) {
   else if (matchKey(e, 'ArrowUp')) next = i < 0 ? items.length - 1 : (i - 1 + items.length) % items.length;
   else if (e.key === 'Home') next = 0;
   else if (e.key === 'End') next = items.length - 1;
-  else if (e.key === 'Escape' || e.key === 'Tab') sgCloseMenu();
+  else if (e.key === 'Escape' || e.key === 'Tab') close();
   if (next !== null) items[next]?.focus();
 }
 
+function placeMenu(menu, x, y) {
+  document.body.appendChild(menu);
+  const rect = menu.getBoundingClientRect();
+  menu.style.left = `${Math.min(x, window.innerWidth - rect.width - 8)}px`;
+  menu.style.top = `${Math.min(y, window.innerHeight - rect.height - 8)}px`;
+}
+
+function sgMenuKeydown(e) {
+  const menu = document.getElementById('sg-menu');
+  if (!menu || e.ctrlKey || e.altKey || e.metaKey) return;
+  menuKeydown(e, [...menu.querySelectorAll('.sg-menu-item')], sgCloseMenu);
+}
+
 function sgOpenMenuForKbSelection() {
   const el = sessionsList.querySelector('.kb-selected');
   if (!el?.matches('.session-item, .project-group-header')) return false;
@@ -4948,6 +4970,7 @@ function sgOpenMenuForKbSelection() {
 
 function sgOpenMenu(x, y, kind, ref) {
   sgCloseMenu();
+  closePaneMenu();
   const current = sgGroupOf(kind, ref);
   const label = kind === 'project' ? 'project' : 'session';
   const rows = sessionGroups
@@ -4969,10 +4992,7 @@ function sgOpenMenu(x, y, kind, ref) {
         ${rows}
         <button class="sg-menu-item" role="menuitem" data-sg-move="__new__">+ New group…</button>
         ${current ? `<button class="sg-menu-item sg-menu-remove" role="menuitem" data-sg-move="__none__">Remove from “${escapeHtml(current.name)}”</button>` : ''}`;
-  document.body.appendChild(menu);
-  const rect = menu.getBoundingClientRect();
-  menu.style.left = `${Math.min(x, window.innerWidth - rect.width - 8)}px`;
-  menu.style.top = `${Math.min(y, window.innerHeight - rect.height - 8)}px`;
+  placeMenu(menu, x, y);
   document.addEventListener('keydown', sgMenuKeydown, true);
   menu.querySelector('.sg-menu-item')?.focus();
 }
@@ -5814,7 +5834,8 @@ const SHORTCUT_TABS = [
       {
         title: 'View',
         rows: [
-          { keys: ['['], label: 'Toggle sidebar' },
+          { keys: ['\\'], label: 'Toggle sidebar' },
+          { keys: ['[', ']'], label: 'Previous / next tab (Board and panes)' },
           { keys: ['T'], label: 'Toggle theme' },
           { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
           { keys: ['Ctrl', 'Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
@@ -6871,14 +6892,15 @@ const MODAL_CLOSERS = {
   'terminal-manager-modal': () => closeTerminalManager(),
   'new-session-modal': () => closeNewSession(),
   'confirm-modal': () => closeConfirmModal?.(false),
+  'pane-pop': () => closePanePop(),
 };
 
 document.addEventListener('keydown', (e) => {
-  // Scale the open modal's reading surface instead of letting the browser zoom
+  // Scale the open modal's reading surface, or the file pane's, instead of letting the browser zoom
   // the whole page. Sits above the text-field guard so it still works with the
   // caret in a field inside the modal.
   const zoom = zoomDelta(e);
-  if (zoom !== undefined && isZoomableModalOpen()) {
+  if (zoom !== undefined && isZoomableOnScreen()) {
     e.preventDefault();
     adjustModalZoom(zoom);
     return;
@@ -6979,11 +7001,15 @@ document.addEventListener('keydown', (e) => {
   }
 
   // Global shortcuts
-  if (e.key === '[') {
+  if (matchKey(e, '\\')) {
     e.preventDefault();
     toggleSidebar();
     return;
   }
+  if (matchKey(e, '[', ']') && cyclePane(e.key === ']' ? 1 : -1)) {
+    e.preventDefault();
+    return;
+  }
   if (e.code === 'KeyL' && e.shiftKey) {
     e.preventDefault();
     toggleMessagePanel();
@@ -7266,25 +7292,52 @@ function reviewItems() {
   return (activeReview && reviewDrafts.get(activeReview.key)) || [];
 }
 
+// Only one review is live. Each modal mounts on top of the stack, keyed by its panel, and
+// closing it brings back the review beneath. `reviewBase` (the pane on screen) is live only
+// when the stack is empty.
+const reviewStack = [];
+let reviewBase = null;
+
 // `context(range)` adds view-specific citation fields to a comment on the host DOM;
 // `onComment()` runs after a comment is added; `onSent()` runs after a batch is delivered.
-function mountReview({
-  contentEl,
-  panelEl,
-  hostEl,
-  source,
-  frame,
-  context,
-  onComment,
-  onSent,
-  sessionId = currentSessionId,
-}) {
-  unmountReview();
+function mountReview(opts) {
+  dropReviewEntry(opts.panelEl);
+  reviewStack.push({ sessionId: currentSessionId, ...opts });
+  showTopReview();
+}
+
+// Unmounts only the review that panel holds, so a modal under another one keeps it.
+function unmountReview(panelEl) {
+  dropReviewEntry(panelEl);
+  showTopReview();
+}
+
+function setBaseReview(opts) {
+  if (reviewBase === opts) return;
+  reviewBase = opts;
+  showTopReview();
+}
+
+function dropReviewEntry(panelEl) {
+  const i = reviewStack.findIndex((o) => o.panelEl === panelEl);
+  if (i >= 0) reviewStack.splice(i, 1);
+}
+
+function showTopReview() {
+  const opts = reviewStack.at(-1) || reviewBase;
+  if (activeReview && activeReview.opts === opts) return;
+  stopReview();
+  if (opts) startReview(opts);
+}
+
+function startReview(opts) {
+  const { contentEl, panelEl, hostEl, source, frame, context, onComment, onSent, sessionId } = opts;
   if (!sessionId) return;
   const ctl = new AbortController();
   const { signal } = ctl;
   const key = reviewKey(sessionId, source);
   activeReview = {
+    opts,
     contentEl,
     panelEl,
     hostEl,
@@ -7312,9 +7365,7 @@ function mountReview({
   renderReviewPanel();
 }
 
-// With `ownPanel`, unmounts only the review that panel holds, so a modal under another one keeps it.
-function unmountReview(ownPanel) {
-  if (ownPanel && activeReview?.panelEl !== ownPanel) return;
+function stopReview() {
   closeReviewPop();
   if (!activeReview) return;
   const { ctl, panelEl, hostEl } = activeReview;
@@ -7424,7 +7475,7 @@ function postToReviewFrame(type, id) {
 
 // Runs inside the preview iframe as source text, so it must not close over anything outside
 // its own body and arguments.
-function reviewBridge(textBefore, headingBefore, rangeAt) {
+function reviewBridge(textBefore, headingBefore, rangeAt, comboOf, fieldSelector) {
   const P = 'cck-review:';
   const marks = new Map();
   let pending = null;
@@ -7501,11 +7552,51 @@ function reviewBridge(textBefore, headingBefore, rangeAt) {
   };
   document.addEventListener('mousedown', clear);
   document.addEventListener('scroll', clear, true);
+  // The sandbox has no allow-top-navigation and the board never sees events in here, so web links
+  // and the keys the board claims go up as messages. A srcdoc document resolves relative hrefs,
+  // `#id` too, against the board's URL, and loading that here ends on an error page because the
+  // board refuses framing; a hash goes to location.hash instead, which stays on about:srcdoc.
+  const openLink = (e) => {
+    if (e.defaultPrevented || (e.type === 'auxclick' && e.button !== 1)) return;
+    const a = e.target.closest?.('a[href]');
+    const href = a?.getAttribute('href');
+    if (!href) return;
+    if (/^https?:\/\//i.test(href)) {
+      e.preventDefault();
+      send({ type: 'link', href: a.href });
+      return;
+    }
+    if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return;
+    e.preventDefault();
+    if (href.startsWith('#') && e.type === 'click') location.hash = href;
+  };
+  document.addEventListener('click', openLink);
+  document.addEventListener('auxclick', openLink);
+  // The terminal frame's claim format (terminal-frame.js keySigs).
+  const keySigs = (e) => {
+    const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta']
+      .filter(Boolean)
+      .join('+');
+    return [e.code && `${mods}|c:${e.code}`, typeof e.key === 'string' && `${mods}|k:${e.key.toLowerCase()}`].filter(
+      Boolean,
+    );
+  };
+  let claims = new Set();
+  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;
+    e.preventDefault();
+    send({ type: 'key', key: e.key, code: e.code, ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey, meta: e.metaKey });
+  });
   addEventListener('message', (e) => {
     if (e.source !== parent || typeof e.data?.type !== 'string' || !e.data.type.startsWith(P)) return;
     const type = e.data.type.slice(P.length);
     const range = marks.get(e.data.id);
-    if (type === 'mark' && pending) {
+    if (type === 'claims') {
+      claims = new Set(e.data.keys.map((c) => keySigs(c)[0]));
+      forward = new Set(e.data.forward);
+    } else if (type === 'mark' && pending) {
       marks.set(e.data.id, pending);
       hl?.add(pending);
       pending = null;
@@ -7527,7 +7618,34 @@ function reviewBridge(textBefore, headingBefore, rangeAt) {
   });
 }
 
-const REVIEW_BRIDGE_TAG = `<script>(${reviewBridge})(${reviewTextBefore}, ${reviewHeadingBefore}, ${reviewRangeAt});</script>`;
+const TEXT_FIELD_SELECTOR = 'input, textarea, select, [contenteditable]';
+
+const REVIEW_BRIDGE_TAG = `<script>(${reviewBridge})(${reviewTextBefore}, ${reviewHeadingBefore}, ${reviewRangeAt}, ${ClaudeHub.comboOf}, ${JSON.stringify(TEXT_FIELD_SELECTOR)});</script>`;
+
+// Frames from createPreviewFrame, which carry the bridge. A URL pane is another site and must
+// not drive the board.
+const bridgedFrames = new WeakSet();
+
+function bridgedFrameEls() {
+  return [...document.querySelectorAll('iframe[srcdoc]')].filter((f) => bridgedFrames.has(f));
+}
+
+function sendBridgeClaims(frames, claims) {
+  for (const f of frames) f.contentWindow?.postMessage({ type: `${REVIEW_MSG}claims`, ...claims }, '*');
+}
+
+window.addEventListener('message', (e) => {
+  const type =
+    typeof e.data?.type === 'string' && e.data.type.startsWith(REVIEW_MSG) && e.data.type.slice(REVIEW_MSG.length);
+  if (type !== 'link' && type !== 'key') return;
+  const frame = bridgedFrameEls().find((f) => f.contentWindow === e.source);
+  if (!frame) return;
+  if (type === 'key') replayKey(e.data, frame);
+  else {
+    const url = linkUrl(e.data.href);
+    if (url) hub.openExternal(url);
+  }
+});
 
 function reviewPopEl() {
   let el = document.getElementById('review-pop');
@@ -7774,14 +7892,20 @@ function addSessionPreviewPath(sessionId, 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)));
+  saveSessionPreviewPaths(sessionId, paths);
 }
 
 function removeSessionPreviewPath(sessionId, filePath) {
   if (!sessionId) return;
   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));
+  saveSessionPreviewPaths(
+    sessionId,
+    getSessionPreviewPaths(sessionId).filter((p) => canonicalPath(p) !== key),
+  );
+}
+
+function saveSessionPreviewPaths(sessionId, paths) {
+  if (paths.length) store.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths.slice(0, MAX_LINKED_DOCS)));
   else store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
 }
 
@@ -7811,7 +7935,7 @@ async function mergeServerLinkedDocs() {
     const known = new Set(local.map(canonicalPath));
     const missing = (paths || []).filter((p) => !known.has(canonicalPath(p)));
     if (!missing.length) continue;
-    store.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify([...missing, ...local].slice(0, 20)));
+    saveSessionPreviewPaths(sessionId, [...missing, ...local]);
     afterLinkedDocsChanged(sessionId);
   }
 }
@@ -7854,19 +7978,29 @@ 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 renderHtmlPreview(bodyEl, content) {
-  bodyEl.innerHTML = '';
+function createPreviewFrame(className, srcdoc) {
   const frame = document.createElement('iframe');
-  frame.className = 'preview-html-frame';
+  frame.className = className;
   frame.setAttribute('sandbox', 'allow-scripts allow-popups');
   frame.setAttribute('referrerpolicy', 'no-referrer');
+  frame.srcdoc = srcdoc;
+  bridgedFrames.add(frame);
+  frame.addEventListener('load', () => sendBridgeClaims([frame], keyClaims()));
+  return frame;
+}
+
+function renderHtmlPreview(bodyEl, content) {
+  bodyEl.innerHTML = '';
   // After the document's end the parser still adds the script to <body>, and it runs after
   // the page's own scripts.
-  frame.srcdoc = content + REVIEW_BRIDGE_TAG;
-  bodyEl.appendChild(frame);
+  bodyEl.appendChild(createPreviewFrame('preview-html-frame', content + REVIEW_BRIDGE_TAG));
 }
 
-function bindPreviewRelativeLinks(bodyEl) {
+function isAbsolutePath(p) {
+  return /^([a-zA-Z]:[\\/]|[\\/])/.test(p);
+}
+
+function bindPreviewRelativeLinks(bodyEl, baseOf = () => currentPreviewPath) {
   if (bodyEl.dataset.relLinkBound) return;
   bodyEl.addEventListener('click', (e) => {
     const a = e.target.closest('a[href]');
@@ -7874,11 +8008,10 @@ function bindPreviewRelativeLinks(bodyEl) {
     const href = a.getAttribute('href');
     if (!href || href.startsWith('#')) return;
     const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//');
-    const isAbsolutePath = href.startsWith('/') || /^[a-zA-Z]:[\\/]/.test(href);
     if (isAbsoluteUrl) return;
     const cleanHref = href.replace(/#.*$/, '');
     e.preventDefault();
-    openPreviewByPath(cleanHref, isAbsolutePath ? undefined : currentPreviewPath, openFileInEditor);
+    openPreviewByPath(cleanHref, isAbsolutePath(href) ? undefined : baseOf(a), openFileInEditor);
   });
   bodyEl.dataset.relLinkBound = '1';
 }
@@ -7901,41 +8034,50 @@ function renderSourcePreview(filePath, content) {
   return `<pre class="preview-source"><code class="hljs">${escapeHtml(content)}</code></pre>`;
 }
 
-function openPreviewModal(filePath, content, kind) {
-  currentPreviewPath = filePath;
-  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') {
+// Every kind but html, which needs a frame.
+function renderPreviewContent(bodyEl, filePath, content, kind) {
+  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;
+    img.alt = filePath.split(/[\\/]/).pop();
     bodyEl.replaceChildren(img);
   } else {
     const { fm, body } = splitFrontmatter(content);
     bodyEl.innerHTML = (fm ? renderFrontmatterBlock(fm) : '') + renderMarkdown(body);
   }
+}
+
+function openPreviewModal(filePath, content, kind) {
+  currentPreviewPath = filePath;
+  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 renderPreviewContent(bodyEl, filePath, content, kind);
   document.getElementById('preview-modal-meta').textContent = filePath;
   document.getElementById('preview-modal').classList.add('visible');
   updatePreviewLinkBtn();
-  if (kind === 'image') return unmountReview();
-  mountReview({
-    contentEl: bodyEl,
-    panelEl: document.getElementById('preview-review-panel'),
-    hostEl: document.querySelector('#preview-modal .modal'),
-    source: { kind: 'file', label: fileName, path: filePath },
-    frame: isHtml ? bodyEl.querySelector('iframe') : null,
-    context: kind === 'text' ? (range) => ({ line: sourceLineOf(bodyEl, range) }) : null,
-    onSent: closePreviewModal,
-  });
+  const panelEl = document.getElementById('preview-review-panel');
+  const opts = fileReviewOpts(filePath, kind, bodyEl, isHtml ? bodyEl.querySelector('iframe') : null);
+  if (!opts) return unmountReview(panelEl);
+  mountReview({ ...opts, panelEl, hostEl: document.querySelector('#preview-modal .modal'), onSent: closePreviewModal });
+}
+
+// Null for an image, which takes no comments.
+function fileReviewOpts(filePath, kind, contentEl, frame) {
+  if (kind === 'image') return null;
+  return {
+    contentEl,
+    frame,
+    source: { kind: 'file', label: pathBasename(filePath), path: filePath },
+    context: kind === 'text' ? (range) => ({ line: sourceLineOf(contentEl, range) }) : null,
+  };
 }
 
 function sourceLineOf(bodyEl, range) {
@@ -7951,6 +8093,8 @@ function isPreviewLinkedToCurrentSession() {
 }
 
 function updatePreviewLinkBtn() {
+  const paneBtn = document.getElementById('preview-pane-btn');
+  if (paneBtn) paneBtn.style.display = paneSessionId() ? '' : 'none';
   const btn = document.getElementById('preview-link-btn');
   if (!btn) return;
   if (!currentSessionId) {
@@ -8219,11 +8363,35 @@ function openLinkedDoc(p, baseDir) {
   postAndToast(url, body(p), toast);
 }
 
+const LINKED_DOCS_COLLAPSED = 10;
+const linkedDocsExpanded = new Set();
+
+function showAllToggle(expandedSet, key, list, limit, btnAttrs) {
+  const expanded = expandedSet.has(key);
+  const shown = expanded ? list : list.slice(0, limit);
+  const moreHtml =
+    list.length > limit
+      ? `<button type="button" class="expand-toggle-btn list-more" ${btnAttrs}>${expanded ? 'Show less' : `Show all ${list.length}`}</button>`
+      : '';
+  return { shown, moreHtml };
+}
+
+function toggleSetMember(set, key) {
+  if (!set.delete(key)) set.add(key);
+}
+
 function renderLinkedDocsHtml(sessionId) {
   const paths = getSessionPreviewPaths(sessionId);
+  const { shown, moreHtml } = showAllToggle(
+    linkedDocsExpanded,
+    sessionId,
+    paths,
+    LINKED_DOCS_COLLAPSED,
+    'data-linked-docs-more',
+  );
   // 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.
-  const rows = paths.map((p) => ({ p, opener: linkedDocOpener(p) }));
+  const rows = shown.map((p) => ({ p, opener: linkedDocOpener(p) }));
   const filePaths = rows.filter((r) => r.opener !== 'url').map((r) => r.p);
   loadPreviewKinds(sessionId, filePaths);
   const baseDir = getSessionBaseDir(sessionId);
@@ -8248,7 +8416,7 @@ function renderLinkedDocsHtml(sessionId) {
     .join('');
   // Rendered even when empty — the add button has to stay reachable.
   const body = paths.length
-    ? `<ul class="linked-doc-list">${items}</ul>`
+    ? `<ul class="linked-doc-list">${items}</ul>${moreHtml}`
     : '<div class="linked-docs-empty">No linked documents yet</div>';
   return `<div class="linked-docs-section panel-section">
     <div class="panel-section-header">
@@ -8467,13 +8635,14 @@ function scratchRowsHtml(rows) {
 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}`;
+  const { shown, moreHtml } = showAllToggle(
+    scratchFilesExpanded,
+    sessionId,
+    list,
+    SCRATCH_FILES_COLLAPSED,
+    `onclick="toggleScratchFiles('${escAttrJs(sessionId)}')"`,
+  );
+  return `${scratchRowsHtml(shown)}${moreHtml}`;
 }
 
 // Delegated at the document because the whole zen panel is re-rendered on every SSE tick,
@@ -8513,8 +8682,7 @@ function renderScratchFilesHtml(sessionId) {
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleScratchFiles(sessionId) {
-  if (scratchFilesExpanded.has(sessionId)) scratchFilesExpanded.delete(sessionId);
-  else scratchFilesExpanded.add(sessionId);
+  toggleSetMember(scratchFilesExpanded, sessionId);
   scratchFilesSection.repaint(sessionId);
 }
 
@@ -8523,10 +8691,17 @@ function toggleScratchFiles(sessionId) {
 function bindLinkedDocsHandlers(container, sessionId) {
   if (!container) return;
   container.addEventListener('click', (e) => {
-    const hit = e.target.closest('.linked-doc-link, .linked-doc-copy, .linked-doc-remove, .linked-docs-add-btn');
+    const hit = e.target.closest(
+      '.linked-doc-link, .linked-doc-copy, .linked-doc-remove, .linked-docs-add-btn, [data-linked-docs-more]',
+    );
     if (!hit || hit.target === '_blank') return;
     e.preventDefault();
-    if (hit.classList.contains('linked-docs-add-btn')) {
+    if (hit.hasAttribute('data-linked-docs-more')) {
+      toggleSetMember(linkedDocsExpanded, sessionId);
+      const wrap = document.createElement('div');
+      wrap.innerHTML = renderLinkedDocsHtml(sessionId);
+      container.replaceChildren(...wrap.firstElementChild.childNodes);
+    } else if (hit.classList.contains('linked-docs-add-btn')) {
       startLinkedDocInput(container, sessionId);
     } else if (hit.classList.contains('linked-doc-copy')) {
       copyWithFeedback(hit.dataset.path, hit);
@@ -8656,6 +8831,7 @@ function setupEventSource() {
         console.warn('[SSE] Reconnected after drop — forcing full refresh');
         fetchSessions().catch(() => {});
         if (currentSessionId) fetchTasks(currentSessionId);
+        refetchPaneLayout();
         if (terminalAvailable())
           loadTerminals()
             .then(renderSessions)
@@ -8763,6 +8939,10 @@ function setupEventSource() {
         handleSessionPinEvent(data);
       }
 
+      if (data.type === 'pane:changed') {
+        applyPaneLayout(data.sessionId, data.layout);
+      }
+
       if (data.type === 'team-update') {
         const teamSession = sessions.find((s) => s.isTeam && s.teamName === data.teamName);
         if (teamSession) {
@@ -11633,6 +11813,644 @@ function filterByOwner(value) {
 
 //#endregion
 
+//#region PANES
+// Layouts come from /api/panes and `pane:changed` (the pane contract, lib/panes.js). Every write
+// bumps the layout's rev and the event carries the whole layout, so a copy is replaced only by
+// a higher rev: the echo of this tab's own write and a late GET both lose to what it holds.
+// Which tab is on screen is this browser tab's own state, never the server's.
+const PANE_EMPTY_LAYOUT = { panes: [] };
+const paneLayouts = new Map();
+let paneLayoutSid = null;
+
+// Targets the server's probe found refusing framing, kept for the page's life; a reload asks again.
+const paneRefused = new Set();
+
+// Every origin above a pane's frame. Firefox has no ancestorOrigins, so under the hub there it
+// names the board only; a refused frame then shows the browser's own error.
+function paneAncestors() {
+  return [location.origin, ...(location.ancestorOrigins || [])];
+}
+
+function paneFrameable(pane) {
+  return pane.kind !== 'url' || !paneRefused.has(pane.target);
+}
+
+// allow-scripts with allow-same-origin on the board's or the hub's origin would lift the sandbox.
+// The server refuses the board's own names, but under the hub the page is served from the
+// hub's proxy port, which only the page knows. Any loopback name reaches the same port.
+const PANE_LOOPBACK = new Set(['localhost', '127.0.0.1', '[::1]']);
+
+function paneOwnOrigin(pane) {
+  if (pane.kind !== 'url') return false;
+  const u = new URL(pane.target);
+  const loopback = PANE_LOOPBACK.has(u.hostname);
+  return paneAncestors().some((origin) => {
+    const a = new URL(origin);
+    const host = a.hostname === u.hostname || (loopback && PANE_LOOPBACK.has(a.hostname));
+    return a.protocol === u.protocol && a.port === u.port && host;
+  });
+}
+
+async function probePaneFraming(sid, pane) {
+  const q = new URLSearchParams({ ancestors: paneAncestors().join(',') });
+  const { frameable } = await paneRequest(
+    'GET',
+    `/api/panes/${encodeURIComponent(sid)}/${encodeURIComponent(pane.id)}/framing?${q}`,
+  );
+  if (frameable === false) paneRefused.add(pane.target);
+  return frameable;
+}
+
+function paneLayout(sid) {
+  return paneLayouts.get(sid) || PANE_EMPTY_LAYOUT;
+}
+
+function applyPaneLayout(sid, layout) {
+  const held = paneLayouts.get(sid);
+  if (!layout || (held && layout.rev <= held.rev)) return;
+  paneLayouts.set(sid, layout);
+  const targets = new Map(layout.panes.map((p) => [p.id, p.target]));
+  for (const p of held?.panes || []) {
+    if (targets.get(p.id) !== p.target) unmountPane(sid, p.id);
+  }
+  if (!targets.has(getActivePaneId(sid))) setActivePaneId(sid, 'board');
+  if (sid !== paneSessionId()) return;
+  syncPanes();
+  autoRevealLog(sid);
+}
+
+async function fetchPaneLayout(sid) {
+  try {
+    const r = await fetch(`/api/panes/${encodeURIComponent(sid)}`);
+    if (r.ok) applyPaneLayout(sid, await r.json());
+  } catch {}
+}
+
+function refetchPaneLayout() {
+  const sid = paneSessionId();
+  if (sid) fetchPaneLayout(sid);
+}
+
+async function paneRequest(method, path, body) {
+  try {
+    const r = await fetch(path, {
+      method,
+      headers: body ? { 'Content-Type': 'application/json' } : undefined,
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    const data = await r.json().catch(() => ({}));
+    return r.ok ? data : { error: data.error || `${method} failed (${r.status})`, code: data.code };
+  } catch {
+    return { error: 'The board is not reachable', code: 'network' };
+  }
+}
+
+// sessionStorage `cck.paneActive`: {[sessionId]: paneId} in recency order.
+const PANE_ACTIVE_KEY = 'cck.paneActive';
+const PANE_ACTIVE_CAP = 20;
+let paneActive = {};
+try {
+  const map = JSON.parse(sessionStorage.getItem(PANE_ACTIVE_KEY));
+  if (map && typeof map === 'object') paneActive = map;
+} catch {}
+
+function getActivePaneId(sid) {
+  return paneActive[sid] || 'board';
+}
+
+function setActivePaneId(sid, id) {
+  if (getActivePaneId(sid) === id) return;
+  delete paneActive[sid];
+  if (id !== 'board') paneActive[sid] = id;
+  paneActive = Object.fromEntries(Object.entries(paneActive).slice(-PANE_ACTIVE_CAP));
+  try {
+    sessionStorage.setItem(PANE_ACTIVE_KEY, JSON.stringify(paneActive));
+  } catch {}
+}
+
+const PANE_FRAME_LIMIT = 3;
+const PANE_URL_SANDBOX = 'allow-scripts allow-same-origin allow-forms allow-popups allow-downloads';
+const PANE_ICONS = {
+  board:
+    '<svg class="kind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="10" rx="1"/><rect x="17" y="4" width="4" height="13" rx="1"/></svg>',
+  url: '<svg class="kind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>',
+  file: '<svg class="kind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
+  warning:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12" y2="17"/></svg>',
+};
+// Map order is recency: the first entry is the one evicted. Keys are `${sessionId}/${paneId}`,
+// and the limit spans sessions, so a session switch cannot pile up frames.
+const paneFrames = new Map();
+const paneReviews = new WeakMap();
+const paneViews = document.getElementById('pane-views');
+const paneTabs = document.getElementById('pane-tabs');
+const panePin = document.getElementById('pane-pin');
+const paneStrip = document.getElementById('pane-strip');
+const panePop = document.getElementById('pane-pop');
+const panePopInput = document.getElementById('pane-pop-input');
+const panePopDocs = document.getElementById('pane-pop-docs');
+const panePopDetect = document.getElementById('pane-pop-detect');
+let paneTabsHtml = '';
+
+function paneSessionId() {
+  return viewMode === 'session' ? currentSessionId : null;
+}
+
+function activePane(sid) {
+  const id = getActivePaneId(sid);
+  return paneLayout(sid).panes.find((p) => p.id === id) || null;
+}
+
+function syncPanes() {
+  const sid = paneSessionId();
+  if (sid !== paneLayoutSid) {
+    paneLayoutSid = sid;
+    if (sid) fetchPaneLayout(sid);
+  }
+  const layout = sid ? paneLayout(sid) : null;
+  const pane = sid ? activePane(sid) : null;
+  sessionView.classList.toggle('has-panes', !!layout);
+  sessionView.classList.toggle('pane-mode', !!pane);
+  if (!layout || wantsTerminal()) closePanePop();
+  const key = pane ? mountPane(sid, pane) : null;
+  for (const el of paneViews.children) el.classList.toggle('on', el.dataset.key === key);
+  // Off screen, a framed page keeps focus and takes keys the user aims at the board.
+  const focused = document.activeElement;
+  if (paneViews.contains(focused) && (wantsTerminal() || !focused.closest('.pane-view.on'))) focused.blur();
+  syncPaneReview();
+  if (!layout) return;
+  for (const b of document.querySelectorAll('.pane-tool')) b.disabled = !pane;
+  renderPaneTabs(sid, layout);
+}
+
+function renderPaneTabs(sid, layout) {
+  const active = getActivePaneId(sid);
+  const tab = (id, cls, inner, tip) =>
+    `<div class="pane-tab ${escapeHtml(cls)}${active === id ? ' on' : ''}" role="tab" data-pane="${escapeHtml(id)}" title="${escapeHtml(tip)}">${inner}</div>`;
+  const board = tab(
+    'board',
+    'pinned',
+    `${PANE_ICONS.board}<span class="pane-title">Board</span><span class="pin-meta">${currentTasks.length}</span>`,
+    'Board',
+  );
+  const panes = layout.panes.map((p) => {
+    const state = !paneFrameable(p) ? 'blocked' : paneFrames.has(`${sid}/${p.id}`) ? 'loaded' : '';
+    const stateTip = state === 'blocked' ? 'Site refuses framing' : state ? 'Loaded' : 'Unloaded (loads on open)';
+    return tab(
+      p.id,
+      '',
+      `${p.kind === 'url' ? PANE_ICONS.url : PANE_ICONS.file}<span class="pane-title">${escapeHtml(p.title)}</span><span class="state ${escapeHtml(state)}" title="${escapeHtml(stateTip)}"></span><button class="pane-x" data-close="${escapeHtml(p.id)}" title="Close pane" aria-label="Close pane">×</button>`,
+      p.target,
+    );
+  });
+  const pin = board + (panes.length ? '<span class="pane-sep"></span>' : '');
+  const html = panes.join('');
+  // syncPanes runs on every task refresh and search keystroke; skip the rebuild and the reflows.
+  if (pin + html === paneTabsHtml) return;
+  paneTabsHtml = pin + html;
+  panePin.innerHTML = pin;
+  paneTabs.innerHTML = html;
+  paneTabs.querySelector('.pane-tab.on')?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  updatePaneFades();
+}
+
+function updatePaneFades() {
+  const { scrollLeft, scrollWidth, clientWidth } = paneTabs;
+  paneTabs.classList.toggle('fade-l', scrollLeft > 1);
+  paneTabs.classList.toggle('fade-r', scrollLeft + clientWidth < scrollWidth - 1);
+}
+
+function paneCardHtml(title, text, button) {
+  return `<div class="pane-card"><div class="pane-card-box">${PANE_ICONS.warning}<h3>${escapeHtml(title)}</h3><p>${escapeHtml(text)}</p><button class="btn btn-primary" data-pane-open>${escapeHtml(button)}</button></div></div>`;
+}
+
+// Returns the key of the view to show.
+function mountPane(sid, pane) {
+  const key = `${sid}/${pane.id}`;
+  const existing = paneFrames.get(key);
+  if (existing) {
+    paneFrames.delete(key);
+    paneFrames.set(key, existing);
+    return key;
+  }
+  const view = document.createElement('div');
+  view.className = 'pane-view';
+  view.dataset.key = key;
+  paneViews.appendChild(view);
+  paneFrames.set(key, view);
+  loadPaneView(sid, pane, view);
+  while (paneFrames.size > PANE_FRAME_LIMIT) {
+    const [oldKey, oldView] = paneFrames.entries().next().value;
+    paneFrames.delete(oldKey);
+    oldView.remove();
+  }
+  return key;
+}
+
+async function loadPaneView(sid, pane, view) {
+  if (paneOwnOrigin(pane)) {
+    view.insertAdjacentHTML(
+      'beforeend',
+      paneCardHtml('A pane cannot show the board or the hub', pane.target, 'Open in new tab'),
+    );
+    return;
+  }
+  if (!paneFrameable(pane)) {
+    view.insertAdjacentHTML(
+      'beforeend',
+      paneCardHtml(
+        `${new URL(pane.target).host} does not allow framing`,
+        'The site sends X-Frame-Options or a frame-ancestors policy. The pane keeps the link with the session.',
+        'Open in new tab',
+      ),
+    );
+    return;
+  }
+  if (pane.kind === 'url') {
+    const frame = document.createElement('iframe');
+    frame.className = 'pane-frame';
+    frame.setAttribute('sandbox', PANE_URL_SANDBOX);
+    frame.setAttribute('referrerpolicy', 'no-referrer');
+    frame.title = pane.title;
+    frame.src = pane.target;
+    view.appendChild(frame);
+    // Framed at once; a refusal found by the probe swaps the frame for the card.
+    if ((await probePaneFraming(sid, pane)) === false) {
+      frame.remove();
+      loadPaneView(sid, pane, view);
+      if (sid === paneSessionId()) syncPanes();
+    }
+    return;
+  }
+  let data = null;
+  try {
+    const r = await fetch(`/api/preview?${new URLSearchParams({ path: pane.target })}`);
+    if (r.ok) data = await r.json();
+  } catch {}
+  if (data?.kind === 'html') {
+    const frame = createPreviewFrame('pane-frame', data.content + REVIEW_BRIDGE_TAG);
+    frame.title = pane.title;
+    view.appendChild(frame);
+    attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, frame, frame));
+    return;
+  }
+  if (data?.kind) {
+    const doc = document.createElement('div');
+    doc.className = 'pane-doc';
+    doc.dataset.path = data.path;
+    const body = document.createElement('div');
+    body.className = 'pane-doc-body rendered-md modal-zoomable';
+    renderPreviewContent(body, data.path, data.content, data.kind);
+    doc.append(body, paneDocGrip(doc));
+    view.appendChild(doc);
+    attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, body, null));
+    return;
+  }
+  const [title, text] = !data
+    ? ['Preview unavailable', 'The server could not read this file.']
+    : data.exists === false
+      ? ['File not found', pane.target]
+      : ['Nothing to preview', 'cck cannot render this file.'];
+  const button = data && data.exists !== false ? 'Open in editor' : 'Try in preview';
+  view.insertAdjacentHTML('beforeend', paneCardHtml(title, text, button));
+}
+
+// One reading width for every pane, kept apart from the modals': a modal's saved size
+// includes its padding and review panel.
+const PANE_DOC_W_KEY = 'pane-doc-width';
+
+function applyPaneDocWidth(w) {
+  if (w) document.documentElement.style.setProperty('--pane-doc-w', w);
+  else document.documentElement.style.removeProperty('--pane-doc-w');
+}
+applyPaneDocWidth(store.getItem(PANE_DOC_W_KEY));
+
+// The drag sizes only this sheet; the shared width lands once on release, so a
+// drag does not restyle the whole page on every move.
+function paneDocGrip(doc) {
+  let startW;
+  return createResizeGrip({
+    onStart() {
+      startW = doc.offsetWidth;
+    },
+    // The sheet is centered, so both edges move: double the delta to keep the grip under the cursor.
+    onMove(dx) {
+      doc.style.maxWidth = `${Math.max(MODAL_MIN_W, startW + dx * 2)}px`;
+    },
+    onEnd() {
+      const w = doc.style.maxWidth;
+      if (!w) return;
+      doc.style.maxWidth = '';
+      store.setItem(PANE_DOC_W_KEY, w);
+      applyPaneDocWidth(w);
+    },
+    onReset() {
+      store.removeItem(PANE_DOC_W_KEY);
+      applyPaneDocWidth(null);
+    },
+  });
+}
+
+function activePaneView() {
+  return wantsTerminal() ? null : paneViews.querySelector('.pane-view.on');
+}
+
+function isPaneDocOnScreen() {
+  return !!activePaneView()?.querySelector('.modal-zoomable');
+}
+
+function attachPaneReview(view, sessionId, opts) {
+  if (!opts) return;
+  const panelEl = document.createElement('aside');
+  panelEl.className = 'review-panel';
+  panelEl.hidden = true;
+  view.appendChild(panelEl);
+  paneReviews.set(view, { ...opts, panelEl, hostEl: view, sessionId });
+  syncPaneReview();
+}
+
+function syncPaneReview() {
+  const view = activePaneView();
+  setBaseReview((view && paneReviews.get(view)) || null);
+}
+
+function unmountPane(sid, paneId) {
+  const key = `${sid}/${paneId}`;
+  paneFrames.get(key)?.remove();
+  paneFrames.delete(key);
+}
+
+function selectPane(id) {
+  const sid = paneSessionId();
+  if (!sid) return;
+  setActivePaneId(sid, id);
+  closePanePop();
+  syncPanes();
+}
+
+// Returns false when the tabs are not on screen, so the key keeps its other meaning.
+function cyclePane(step) {
+  const sid = paneSessionId();
+  if (!sid || wantsTerminal()) return false;
+  const ids = ['board', ...paneLayout(sid).panes.map((p) => p.id)];
+  const i = ids.indexOf(getActivePaneId(sid));
+  selectPane(ids[(i + step + ids.length) % ids.length]);
+  return true;
+}
+
+async function closePane(paneId) {
+  const sid = paneSessionId();
+  if (!sid) return;
+  if (getActivePaneId(sid) === paneId) {
+    const panes = paneLayout(sid).panes;
+    const i = panes.findIndex((p) => p.id === paneId);
+    setActivePaneId(sid, (panes[i + 1] || panes[i - 1])?.id || 'board');
+  }
+  unmountPane(sid, paneId);
+  syncPanes();
+  const res = await paneRequest('DELETE', `/api/panes/${encodeURIComponent(sid)}/${encodeURIComponent(paneId)}`);
+  if (res.layout) applyPaneLayout(sid, res.layout);
+  else if (res.code === 'no_pane') fetchPaneLayout(sid);
+  else showToast(res.error, 'error');
+}
+
+// With no id, the active pane.
+function paneById(id) {
+  const sid = paneSessionId();
+  if (!sid) return null;
+  return id == null ? activePane(sid) : paneLayout(sid).panes.find((p) => p.id === id) || null;
+}
+
+function reloadPane(id) {
+  const pane = paneById(id);
+  if (!pane) return;
+  unmountPane(paneSessionId(), pane.id);
+  paneRefused.delete(pane.target);
+  syncPanes();
+}
+
+function openPaneExternally(id) {
+  const pane = paneById(id);
+  if (!pane) return;
+  openLinkedDoc(pane.target, getSessionBaseDir(paneSessionId()));
+}
+
+function copyPaneTarget(id) {
+  const pane = paneById(id);
+  if (!pane) return;
+  navigator.clipboard.writeText(pane.target).then(
+    () => showToast(pane.kind === 'url' ? 'URL copied' : 'Path copied', 'success'),
+    () => showToast('Copy failed', 'error'),
+  );
+}
+
+function closePaneMenu() {
+  document.removeEventListener('keydown', paneMenuKeydown, true);
+  document.getElementById('pane-menu')?.remove();
+}
+
+function paneMenuKeydown(e) {
+  const menu = document.getElementById('pane-menu');
+  if (!menu || e.ctrlKey || e.altKey || e.metaKey) return;
+  menuKeydown(e, [...menu.querySelectorAll('.pane-menu-item')], closePaneMenu);
+}
+
+function openPaneMenu(x, y, id) {
+  const pane = paneById(id);
+  if (!pane) return;
+  closePaneMenu();
+  sgCloseMenu();
+  const url = pane.kind === 'url';
+  const item = (act, label) =>
+    `<button class="pane-menu-item" role="menuitem" data-pane-act="${escapeHtml(act)}">${label}</button>`;
+  const menu = document.createElement('div');
+  menu.id = 'pane-menu';
+  menu.className = 'pane-menu';
+  menu.setAttribute('role', 'menu');
+  menu.setAttribute('aria-label', 'Pane actions');
+  menu.dataset.pane = pane.id;
+  menu.innerHTML =
+    `<div class="pane-menu-label" title="${escapeHtml(pane.target)}">${escapeHtml(pane.target)}</div>` +
+    item('copy', url ? 'Copy URL' : 'Copy path') +
+    item('open', url ? 'Open in new tab' : 'Open in preview') +
+    item('reload', 'Reload') +
+    item('close', 'Close pane');
+  placeMenu(menu, x, y);
+  document.addEventListener('keydown', paneMenuKeydown, true);
+  menu.querySelector('.pane-menu-item').focus();
+}
+
+const PANE_MENU_ACTIONS = {
+  copy: copyPaneTarget,
+  open: openPaneExternally,
+  reload: reloadPane,
+  close: closePane,
+};
+
+// The server takes only absolute paths, and linked docs can be relative to the session's folder.
+function paneTargetFrom(raw) {
+  const value = raw.trim().replace(/^(["'])(.*)\1$/, '$2');
+  if (!value) return null;
+  const url = linkUrl(value);
+  if (!url) return { kind: 'file', target: value };
+  if (paneOwnOrigin({ kind: 'url', target: url })) return { error: 'A pane cannot show the board or the hub' };
+  return { kind: 'url', target: url };
+}
+
+// The same target again answers the existing pane, so this also switches to it.
+async function addPane(raw) {
+  const sid = paneSessionId();
+  const t = sid && paneTargetFrom(raw);
+  if (!t) return;
+  if (t.error) {
+    showToast(t.error);
+    return;
+  }
+  const res = await paneRequest('POST', `/api/panes/${encodeURIComponent(sid)}`, {
+    target: t.target,
+    base: getSessionBaseDir(sid) || undefined,
+  });
+  if (!res.pane) {
+    showToast(res.error, 'error');
+    return;
+  }
+  setActivePaneId(sid, res.pane.id);
+  applyPaneLayout(sid, res.layout);
+  if (sid !== paneSessionId()) return;
+  closePanePop();
+  syncPanes();
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openPreviewInPane() {
+  const filePath = currentPreviewPath;
+  if (!filePath || !paneSessionId()) return;
+  closePreviewModal();
+  addPane(filePath);
+}
+
+let panePopMatches = [];
+// -1 means Enter adds the typed value.
+let panePopIdx = -1;
+
+function describePaneInput() {
+  const doc = panePopMatches[panePopIdx];
+  const t = doc ? null : paneTargetFrom(panePopInput.value);
+  panePopDetect.classList.toggle('error', !!t?.error);
+  panePopDetect.textContent = doc
+    ? `Enter opens ${linkedDocLabel(doc)}`
+    : !t
+      ? 'Search linked docs · http(s) → url pane · a file path → file pane'
+      : t.error || (t.kind === 'url' ? 'Kind: url · framed live' : 'Kind: file · rendered like the preview');
+}
+
+function renderPanePopDocs() {
+  const docs = getSessionPreviewPaths(paneSessionId());
+  const query = panePopInput.value.trim();
+  panePopMatches = query ? rankFolders(docs, query) : docs;
+  panePopIdx = query && panePopMatches.length ? 0 : -1;
+  panePopDocs.innerHTML = panePopMatches.length
+    ? panePopMatches
+        .map(
+          (d, i) =>
+            `<button class="pane-pop-row${i === panePopIdx ? ' active' : ''}" data-doc="${escapeHtml(d)}" title="${escapeHtml(d)}">${linkUrl(d) ? PANE_ICONS.url : PANE_ICONS.file}<span>${escapeHtml(linkedDocLabel(d))}</span></button>`,
+        )
+        .join('')
+    : `<div class="pane-pop-empty">${docs.length ? 'No linked doc matches. Enter adds what you typed.' : 'This session has no linked docs.'}</div>`;
+  describePaneInput();
+}
+
+function movePanePopHighlight(step) {
+  panePopIdx = Math.max(-1, Math.min(panePopMatches.length - 1, panePopIdx + step));
+  panePopDocs.querySelectorAll('.pane-pop-row').forEach((row, i) => {
+    row.classList.toggle('active', i === panePopIdx);
+    if (i === panePopIdx) row.scrollIntoView({ block: 'nearest' });
+  });
+  describePaneInput();
+}
+
+function openPanePop() {
+  if (!paneSessionId()) return;
+  panePopInput.value = '';
+  renderPanePopDocs();
+  panePop.classList.add('visible');
+  panePopInput.focus();
+}
+
+function closePanePop() {
+  panePop.classList.remove('visible');
+}
+
+paneStrip.addEventListener('click', (e) => {
+  const close = e.target.closest('[data-close]');
+  if (close) {
+    closePane(close.dataset.close);
+    return;
+  }
+  const tab = e.target.closest('.pane-tab');
+  if (tab) selectPane(tab.dataset.pane);
+});
+paneStrip.addEventListener('auxclick', (e) => {
+  const tab = e.target.closest('.pane-tab');
+  if (e.button === 1 && tab && tab.dataset.pane !== 'board') closePane(tab.dataset.pane);
+});
+paneStrip.addEventListener('contextmenu', (e) => {
+  const tab = e.target.closest('.pane-tab');
+  if (!tab || tab.dataset.pane === 'board') return;
+  e.preventDefault();
+  openPaneMenu(e.clientX, e.clientY, tab.dataset.pane);
+});
+document.addEventListener('click', (e) => {
+  const menu = document.getElementById('pane-menu');
+  if (!menu) return;
+  const act = e.target.closest('.pane-menu-item')?.dataset.paneAct;
+  if (act) PANE_MENU_ACTIONS[act](menu.dataset.pane);
+  if (act || !menu.contains(e.target)) closePaneMenu();
+});
+// A click inside a pane's frame never reaches this document, but it takes focus from the window.
+window.addEventListener('blur', closePaneMenu);
+paneViews.addEventListener('click', (e) => {
+  if (e.target.closest('[data-pane-open]')) openPaneExternally();
+});
+bindPreviewRelativeLinks(paneViews, (a) => a.closest('.pane-doc')?.dataset.path);
+paneTabs.addEventListener('scroll', updatePaneFades, { passive: true });
+paneTabs.addEventListener(
+  'wheel',
+  (e) => {
+    if (!e.deltaY || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+    if (paneTabs.scrollWidth <= paneTabs.clientWidth) return;
+    e.preventDefault();
+    paneTabs.scrollLeft += e.deltaY;
+  },
+  { passive: false },
+);
+new ResizeObserver(updatePaneFades).observe(paneTabs);
+document.getElementById('pane-add').addEventListener('click', openPanePop);
+document.getElementById('pane-reload').addEventListener('click', () => reloadPane());
+document.getElementById('pane-open').addEventListener('click', () => openPaneExternally());
+panePopDocs.addEventListener('click', (e) => {
+  const row = e.target.closest('[data-doc]');
+  if (row) addPane(row.dataset.doc);
+});
+panePopInput.addEventListener('input', renderPanePopDocs);
+panePop.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    e.stopPropagation();
+    closePanePop();
+    return;
+  }
+  if (e.target !== panePopInput) return;
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    addPane(panePopMatches[panePopIdx] ?? panePopInput.value);
+  } else if (matchKey(e, 'ArrowDown', 'ArrowUp')) {
+    e.preventDefault();
+    movePanePopHighlight(e.key === 'ArrowDown' ? 1 : -1);
+  }
+});
+//#endregion
+
 //#region TERMINAL
 // The kanban and the terminal share one slot: terminal mode hides #main-content and shows
 // the pane. The PTY lives on the server (lib/terminal.js) and outlives the pane, so
@@ -11761,8 +12579,6 @@ function terminalPaneFocused() {
   return document.getElementById('terminal-pane').contains(document.activeElement);
 }
 
-const TEXT_FIELD_SELECTOR = 'input, textarea, select, [contenteditable]';
-
 function inPageField(e) {
   const field = e.target?.closest?.(TEXT_FIELD_SELECTOR);
   return !!field && !document.getElementById('terminal-pane').contains(field);
@@ -11853,6 +12669,7 @@ function syncTerminal() {
     btn.classList.toggle('active', on);
   }
   sessionView.classList.toggle('terminal-mode', on);
+  syncPanes();
   pushTerminalClaims();
   if (!on) {
     // A hidden xterm textarea drops focus, but a display:none iframe keeps it and would take keys unseen.
@@ -12032,7 +12849,7 @@ function onTerminalFrameMessage(t, m) {
       termFrame.reload = false;
       reconnectTerminal();
     }
-  } else if (t === 'key') replayTerminalKey(m);
+  } else if (t === 'key') replayKey(m, document.getElementById('terminal-key-proxy'));
   // Chrome does not always fire focusin on the iframe element when its content takes focus.
   else if (t === 'focused') terminalHadFocus = terminalPaneFocused();
   else if (t === 'opening') {
@@ -12052,8 +12869,7 @@ function onTerminalFrameMessage(t, m) {
 // The frame hands back the keys the board acts on. Replaying them on a textarea inside the pane gives
 // the document listeners the target they saw when xterm lived here: the shortcut runs, the SDK
 // forwards a hub key, and the text-field guard keeps the board's own keys out.
-function replayTerminalKey(m) {
-  const target = document.getElementById('terminal-key-proxy');
+function replayKey(m, target) {
   target.dispatchEvent(
     new KeyboardEvent('keydown', {
       key: m.key,
@@ -12104,13 +12920,20 @@ let terminalClaimsQueued = false;
 
 // The claims depend on state (the hub's welcome, a slow connect, the session), so every change re-sends
 // them. One state change calls this several times, and the probe is about 1,500 shortcut checks.
+function keyClaims() {
+  return { keys: terminalClaims(), forward: hub.forwardCombos() };
+}
+
 function pushTerminalClaims() {
-  if (!termFrame.inited || terminalClaimsQueued) return;
+  if (terminalClaimsQueued) return;
   terminalClaimsQueued = true;
   queueMicrotask(() => {
     terminalClaimsQueued = false;
+    const bridged = bridgedFrameEls();
+    if (!termFrame.inited && !bridged.length) return;
+    const claims = keyClaims();
+    sendBridgeClaims(bridged, claims);
     if (!termFrame.inited) return;
-    const claims = { keys: terminalClaims(), forward: hub.forwardCombos() };
     const sig = JSON.stringify(claims);
     if (sig === termFrame.claims) return;
     termFrame.claims = sig;
@@ -13143,6 +13966,9 @@ document.addEventListener('DOMContentLoaded', () => {
       if (lang === 'mermaid') {
         return `<pre class="mermaid" data-original="${escapeHtml(text)}">${escapeHtml(text)}</pre>`;
       }
+      if (treeHighlight.wantsTree(lang, text)) {
+        return `<pre><code class="hljs language-tree">${treeHighlight.highlightTree(text)}</code></pre>`;
+      }
       let highlighted;
       if (lang && hljs.getLanguage(lang)) {
         highlighted = hljs.highlight(text, { language: lang }).value;
@@ -13512,20 +14338,23 @@ document.getElementById('help-docs')?.addEventListener('click', (e) => {
   hub.openExternal(e.currentTarget.href);
 });
 
-document.addEventListener('click', (e) => {
-  if (!hub.inHub) return;
-  const a = e.target.closest?.('a[href]');
-  if (!a) return;
-  const href = a.getAttribute('href');
-  if (!href) return;
+function webUrl(href) {
   let url;
   try {
     url = new URL(href, window.location.href);
   } catch (_) {
-    return;
+    return null;
   }
-  if (url.origin === window.location.origin) return;
-  if (url.protocol !== 'http:' && url.protocol !== 'https:') return;
+  return url.protocol === 'http:' || url.protocol === 'https:' ? url : null;
+}
+
+document.addEventListener('click', (e) => {
+  const a = e.target.closest?.('a[href]');
+  if (!a) return;
+  const href = a.getAttribute('href');
+  if (!href) return;
+  const url = webUrl(href);
+  if (!url || url.origin === window.location.origin) return;
   e.preventDefault();
   e.stopPropagation();
   hub.openExternal(url.href);