claude-code-kanban 7.21.0 → 7.23.0

package/public/app.js

@@ -2769,32 +2769,58 @@ function createResizeGrip({ onReset, ...drag }) {
 }
 
 const MODAL_ZOOM_KEY = 'modal-zoom';
-const MODAL_ZOOM_MIN = 0.7;
-const MODAL_ZOOM_MAX = 2.0;
-let modalZoom = clampModalZoom(Number.parseFloat(store.getItem(MODAL_ZOOM_KEY)) || 1);
+const SHOW_ZOOM_KEY = 'show-zoom';
+const ZOOM_MIN = 0.7;
+const ZOOM_MAX = 2.0;
+let modalZoom = readZoom(MODAL_ZOOM_KEY);
+let showZoom = readZoom(SHOW_ZOOM_KEY);
 
-function clampModalZoom(v) {
-  return Math.min(MODAL_ZOOM_MAX, Math.max(MODAL_ZOOM_MIN, v));
+function clampZoom(v) {
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, v));
+}
+
+function readZoom(key) {
+  return clampZoom(Number.parseFloat(store.getItem(key)) || 1);
+}
+
+function zoomLabel(z) {
+  return `${Math.round(z * 100)}%`;
 }
 
 function modalZoomLabel() {
-  return `${Math.round(modalZoom * 100)}%`;
+  return zoomLabel(modalZoom);
+}
+
+// delta 0 resets to 100%. At a limit it returns z as is; else it saves and toasts the new zoom.
+function stepZoom(z, delta, key, label) {
+  const next = delta === 0 ? 1 : clampZoom(Math.round((z + delta) * 10) / 10);
+  if (next === z && delta !== 0) return z;
+  store.setItem(key, String(next));
+  showToast(`${label} ${zoomLabel(next)}`);
+  return next;
 }
 
 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 }));
+  postToShowFrames(() => ({ type: `${SHOW_MSG}zoom`, z: modalZoom }), document.querySelectorAll(PANE_SHOW_FRAMES));
 }
 
-// delta 0 resets to 100%
 function adjustModalZoom(delta) {
-  const next = delta === 0 ? 1 : clampModalZoom(Math.round((modalZoom + delta) * 10) / 10);
-  if (next === modalZoom && delta !== 0) return;
-  modalZoom = next;
-  store.setItem(MODAL_ZOOM_KEY, String(modalZoom));
+  modalZoom = stepZoom(modalZoom, delta, MODAL_ZOOM_KEY, 'Text');
   applyModalZoom();
-  showToast(`Text ${modalZoomLabel()}`);
+}
+
+// The show card above the terminal keeps its own text zoom: it sits beside a pane, so one
+// shared scale would resize both.
+function applyShowZoom() {
+  document.documentElement.style.setProperty('--show-zoom', String(showZoom));
+  postToShowFrames(() => ({ type: `${SHOW_MSG}zoom`, z: showZoom }), [showState.frame]);
+}
+
+function adjustShowZoom(delta) {
+  showZoom = stepZoom(showZoom, delta, SHOW_ZOOM_KEY, 'Card text');
+  applyShowZoom();
 }
 
 // The markup decides what scales: `.modal-zoomable` marks a modal's reading
@@ -2808,9 +2834,12 @@ 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() : isAskOnScreen() || isPaneDocOnScreen() || isShowCardFocused();
+// The zoom the keys change, or null. An open modal owns the keys even when it has nothing to scale.
+function zoomTarget() {
+  if (isAnyModalOpen()) return isZoomableModalOpen() ? adjustModalZoom : null;
+  if (isAskOnScreen()) return adjustModalZoom;
+  if (isShowCardFocused()) return adjustShowZoom;
+  return isPaneDocOnScreen() ? adjustModalZoom : null;
 }
 
 const ZOOM_KEYS = { '+': 0.1, '=': 0.1, NumpadAdd: 0.1, '-': -0.1, _: -0.1, NumpadSubtract: -0.1, 0: 0, Numpad0: 0 };
@@ -3957,6 +3986,10 @@ function renderSessions() {
   const childDepth = new Map();
   const parentOf = new Map();
   for (const g of sessionGroups) for (const m of g.members) if (m.parent) parentOf.set(m.ref, m.parent);
+  childAnchors = computeChildAnchors(filteredSessions);
+  for (const s of filteredSessions) {
+    if (childAnchors.has(s.id) && !parentOf.has(s.id)) parentOf.set(s.id, s.dispatched.parent);
+  }
   const nestChildren = (list) => {
     if (parentOf.size === 0) return list;
     const ids = new Set(list.map((s) => s.id));
@@ -4132,6 +4165,10 @@ function renderSessions() {
     return;
   }
 
+  const nestedCards = (list) =>
+    nestChildren(list)
+      .map((s) => renderSessionCard(s))
+      .join('');
   const groupPinned = store.getItem(GROUP_PINNED_KEY) !== 'false';
   const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isInPinnedGroup(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
@@ -4252,13 +4289,14 @@ function renderSessions() {
     // Placed sessions follow the order the user dragged them into; a session that is here through
     // its project takes the project's slot.
     const slot = new Map(group.members.map((m, i) => [`${m.type}:${m.ref}`, i]));
-    const slotOf = (s) => slot.get(`session:${s.id}`) ?? slot.get(`project:${sessionProjectKey(s)}`) ?? 0;
+    const slotOf = (placed) => {
+      const s = placementOf(placed);
+      return slot.get(`session:${s.id}`) ?? slot.get(`project:${sessionProjectKey(s)}`) ?? 0;
+    };
     const byMemberOrder = (a, b) => (groupPinned ? 0 : pinSort(a, b)) || slotOf(a) - slotOf(b);
     let body = '';
     if (flat) {
-      body = nestChildren([...bucket].sort(byMemberOrder))
-        .map((s) => renderSessionCard(s))
-        .join('');
+      body = nestedCards([...bucket].sort(byMemberOrder));
     } else {
       const loose = [];
       const byProject = new Map();
@@ -4312,7 +4350,7 @@ function renderSessions() {
     const groups = new Map();
     const ungrouped = [];
     for (const session of sgRest) {
-      const key = sessionProjectKey(session);
+      const key = sessionProjectKey(placementOf(session));
       if (key) {
         if (!groups.has(key)) groups.set(key, []);
         groups.get(key).push(session);
@@ -4363,7 +4401,7 @@ function renderSessions() {
             </div>
           `;
       } else {
-        projectsHtml += ungrouped.map((s) => renderSessionCard(s)).join('');
+        projectsHtml += nestedCards(ungrouped);
       }
     }
 
@@ -4373,8 +4411,7 @@ function renderSessions() {
     sessionsList.innerHTML = html + outsideHtml;
   } else {
     const sectioned = sessionGroups.length > 0;
-    const restHtml =
-      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map((s) => renderSessionCard(s)).join('');
+    const restHtml = sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : nestedCards(sgRest);
     const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
     sessionsList.innerHTML = html + sgSectionHtml(true) + tail + outsideHtml;
   }
@@ -4989,6 +5026,12 @@ function sgGroupById(id) {
 // Matches MAX_DEPTH in lib/user-groups.js.
 const SG_MAX_DEPTH = 8;
 
+function kbSelectedGroup() {
+  if (focusZone !== 'sidebar') return null;
+  const header = sessionsList.querySelector('.session-group-header.kb-selected');
+  return header ? sgGroupById(header.dataset.groupId) : null;
+}
+
 function sgSubtreeIds(rootId) {
   const ids = new Set([rootId]);
   for (const id of ids) for (const g of sessionGroups) if (g.parent === id) ids.add(g.id);
@@ -5013,8 +5056,35 @@ function sgSessionParent(id) {
 
 // An individually placed session wins over the placement of its project.
 function sgGroupForSession(session) {
-  const project = sessionProjectKey(session);
-  return sgGroupOf('session', session.id) || (project ? sgGroupOf('project', project) : null);
+  const s = placementOf(session);
+  const project = sessionProjectKey(s);
+  return sgGroupOf('session', s.id) || (project ? sgGroupOf('project', project) : null);
+}
+
+// A `dispatch start --child` session renders in its starter's place, unless the user placed it or
+// the starter is not in the rendered list. Set by renderSessions, so every other placement lookup
+// (drag, pins, search, reveal) agrees with what the sidebar shows.
+let childAnchors = new Map();
+const placementOf = (session) => childAnchors.get(session.id) ?? session;
+
+function computeChildAnchors(list) {
+  const out = new Map();
+  if (!list.some((s) => s.dispatched?.child)) return out;
+  const byId = new Map(list.map((s) => [s.id, s]));
+  const placed = new Set();
+  for (const g of sessionGroups) for (const m of g.members) if (m.type === 'session') placed.add(m.ref);
+  const up = (s) => (s.dispatched?.child && !placed.has(s.id) ? byId.get(s.dispatched.parent) : null);
+  for (const s of list) {
+    let anchor = up(s);
+    if (!anchor) continue;
+    for (let hop = 1; hop < 4; hop++) {
+      const next = up(anchor);
+      if (!next || next === s) break;
+      anchor = next;
+    }
+    out.set(s.id, anchor);
+  }
+  return out;
 }
 
 function sgListFiltered() {
@@ -5060,8 +5130,9 @@ function sgDetach(type, ref) {
 
 // Where a session renders inside a group: the project block it was moved under, its own
 // project's block, or - when the user lifted it out - the group's own loose list.
-function sgHostOf(group, session) {
-  if (!group || !session) return null;
+function sgHostOf(group, placed) {
+  if (!group || !placed) return null;
+  const session = placementOf(placed);
   const m = group.members.find((x) => x.type === 'session' && x.ref === session.id);
   const isMemberProject = (path) => !!path && group.members.some((x) => x.type === 'project' && x.ref === path);
   if (m?.under && isMemberProject(m.under)) return m.under;
@@ -5946,7 +6017,8 @@ function expandActiveGroups({ onlyNew = false } = {}) {
 // (a collapsed Pinned sub-section opens only for the open session, see syncPinPeek):
 // Groups for a grouped session, else Projects or Sessions, which depends on the view. Returns
 // whether anything changed.
-function uncollapseFor(session) {
+function uncollapseFor(placed) {
+  const session = placementOf(placed);
   const group = sgGroupForSession(session);
   const keys = [
     ...(group
@@ -5963,7 +6035,7 @@ function uncollapseFor(session) {
 function pinnedCollapseKeys(session) {
   if (!isInPinnedGroup(session)) return [];
   const group = sgGroupForSession(session);
-  if (!group) return [pinKey(sessionProjectKey(session) || '__ungrouped__')];
+  if (!group) return [pinKey(sessionProjectKey(placementOf(session)) || '__ungrouped__')];
   const host = sgHostOf(group, session);
   return [host ? pinKey(host) : `__pinned_group_${group.id}__`];
 }
@@ -6514,7 +6586,7 @@ const SHORTCUT_TABS = [
           { keys: ['>'], label: 'Toggle sticky' },
           { keys: ['Ctrl', 'Shift', '.'], combo: true, label: 'Toggle sticky (from the terminal)' },
           { keys: ['Shift', 'F10'], combo: true, label: 'Session menu: move to group, fork (or Menu key)' },
-          { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session (pinned: to Pinned group)' },
+          { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session, or delete the group under the cursor' },
           { keys: ['Ctrl', 'Shift', 'L'], combo: true, label: 'Toggle session log' },
           { keys: ['Ctrl', 'Shift', 'M'], combo: true, label: 'Open last message' },
           { keys: ['↑', '↓'], label: 'Previous / next message in detail' },
@@ -6552,6 +6624,7 @@ const SHORTCUT_TABS = [
         rows: [
           { keys: ['[', ']'], label: 'Previous / next post' },
           { keys: ['Alt', 'Enter'], combo: true, label: 'Fill the terminal / back to the card' },
+          { keys: ['Alt', 'Shift', 'Enter'], combo: true, label: 'Dock beside the terminal / back to the overlay' },
           { 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' },
@@ -7767,15 +7840,20 @@ document.addEventListener('keydown', (e) => {
   // 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 && isZoomableOnScreen()) {
+  const zoomTo = zoom !== undefined && zoomTarget();
+  if (zoomTo) {
     e.preventDefault();
-    adjustModalZoom(zoom);
+    zoomTo(zoom);
     return;
   }
   if (isShowCardFocused() && !isAnyModalOpen() && showCardKey(e)) {
     e.preventDefault();
     return;
   }
+  if (isDockFocused() && !isAnyModalOpen() && dockHeadKey(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');
@@ -8123,7 +8201,9 @@ document.addEventListener('keydown', (e) => {
   }
   if (ClaudeHub.comboOf(e) === 'ctrl+d') {
     e.preventDefault();
-    dismissContextSession();
+    const group = kbSelectedGroup();
+    if (group) sgConfirmDelete(group);
+    else dismissContextSession();
     return;
   }
   if (e.code === 'KeyC' && e.shiftKey && !e.altKey && !e.metaKey) {
@@ -8732,10 +8812,11 @@ const PANE_CLAIMS = [
   ...'123456789'.split('').map((n) => ({ ctrlKey: true, altKey: true, key: 'Unidentified', code: `Digit${n}` })),
 ];
 
-// Ctrl+D and Alt+Enter act on the show card (showCardKey); other pages keep them. Alt+W and Esc are in PANE_CLAIMS.
+// Ctrl+D, Alt+Enter and Alt+Shift+Enter act on the show card (showCardKey); other pages keep them. Alt+W and Esc are in PANE_CLAIMS.
 const SHOW_CLAIMS = [
   ...['ctrlKey', 'metaKey'].map((mod) => ({ [mod]: true, key: 'd', code: '' })),
   { altKey: true, key: 'Enter', code: '' },
+  { altKey: true, shiftKey: true, key: 'Enter', code: '' },
 ];
 
 // Claimed only while comments wait, so a previewed page keeps Ctrl+Enter otherwise.
@@ -9434,6 +9515,13 @@ function openFileInEditor(filePath) {
   postAndToast('/api/open-in-editor', { file: filePath }, 'in editor');
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+async function copyPreviewPath(el) {
+  if (currentPreviewPath && (await copyText(currentPreviewPath, 'path'))) {
+    el.animate([{ color: 'var(--success)' }, {}], { duration: 800, easing: 'ease-out' });
+  }
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openPreviewInEditor() {
   if (!currentPreviewPath) return;
@@ -9491,6 +9579,25 @@ function handleSessionOpenEvent(data) {
   fetchTasks(id);
 }
 
+// `claude-code-kanban new` started the PTY; this tab shows it as if its New session dialog had.
+// Under the hub the action round trip brings this tab on screen first.
+async function handleSessionLaunchedEvent(t) {
+  const { id } = t;
+  if (!id || !terminalAvailable()) return;
+  const claim = await terminalFetch(apiPath`/api/terminal/launched/${id}`, 'POST').catch(() => null);
+  if (!claim?.ok) return;
+  if (!newSpecs.has(id)) newSpecs.set(id, specFromTerminal({ mode: 'new', startedAt: Date.now(), ...t }));
+  setTerminalMode(id, true);
+  termState.focusNext = true;
+  if (hub.can('session.open')) hub.invoke('session.open', { session: id });
+  else openSessionFromOutside(id);
+}
+
+function openSessionFromOutside(id) {
+  if (newSpecs.has(id)) openPlaceholder(id);
+  else handleSessionOpenEvent({ id });
+}
+
 async function handlePreviewOpenEvent(data) {
   const { path: filePath, sessionId } = data;
   if (sessionId && sessionId !== currentSessionId) {
@@ -10292,6 +10399,10 @@ function setupEventSource() {
         handleSessionOpenEvent(data);
       }
 
+      if (data.type === 'session:launched') {
+        handleSessionLaunchedEvent(data);
+      }
+
       // Alone, the page would open a tab without a user gesture, which the browser blocks; the
       // CLI prints the link instead.
       if (data.type === 'session:cost' && hub.inHub) {
@@ -10310,6 +10421,15 @@ function setupEventSource() {
         applyPaneLayout(data.sessionId, data.layout);
       }
 
+      if (data.type === 'addon:changed' && dockSid) {
+        fetchDockAddons(dockSid);
+      }
+
+      if (data.type === 'addon:restarted' && dockFrames.has(data.id)) {
+        dropDockView(data.id);
+        renderShow();
+      }
+
       if (data.type === 'pane:file-changed') {
         onPaneFileChanged(data.path);
       }
@@ -11650,8 +11770,7 @@ function toggleZenMode() {
   if (zenMode) zenMode = false;
   else if (zenGroup) zenGroup = null;
   else {
-    const header = focusZone === 'sidebar' ? sessionsList.querySelector('.session-group-header.kb-selected') : null;
-    zenGroup = header?.dataset.groupId || null;
+    zenGroup = kbSelectedGroup()?.id || null;
     zenMode = !zenGroup;
   }
   store.setItem(ZEN_KEY, String(zenMode));
@@ -13380,8 +13499,10 @@ 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();
+// Target → whether the server's probe found it frameable, kept for the page's life; a reload asks again.
+const paneFraming = new Map();
+// Run add-ons whose port answered once while this page lives.
+const dockAddonUp = 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.
@@ -13390,7 +13511,7 @@ function paneAncestors() {
 }
 
 function paneFrameable(pane) {
-  return pane.kind !== 'url' || !paneRefused.has(pane.target);
+  return pane.kind !== 'url' || paneFraming.get(pane.target) !== false;
 }
 
 // allow-scripts with allow-same-origin on the board's or the hub's origin would lift the sandbox.
@@ -13412,7 +13533,7 @@ function paneOwnOrigin(pane) {
 async function probePaneFraming(sid, pane) {
   const q = new URLSearchParams({ ancestors: paneAncestors().join(',') });
   const { frameable } = await paneRequest('GET', `${apiPath`/api/panes/${sid}/${pane.id}/framing`}?${q}`);
-  if (frameable === false) paneRefused.add(pane.target);
+  if (typeof frameable === 'boolean') paneFraming.set(pane.target, frameable);
   return frameable;
 }
 
@@ -13429,6 +13550,7 @@ function applyPaneLayout(sid, layout) {
     if (targets.get(p.id) !== p.target) unmountPane(sid, p.id);
   }
   if (!targets.has(getActivePaneId(sid))) setActivePaneId(sid, 'board');
+  if (sid === dockSid) renderDockRail();
   if (sid !== paneSessionId()) return;
   syncPanes();
   autoRevealLog(sid);
@@ -13454,20 +13576,20 @@ async function paneRequest(method, path, body) {
   }
 }
 
-// Per-session pane state in sessionStorage, {[sessionId]: value} in recency order.
+// Per-session pane state, {[sessionId]: value} in recency order; sessionStorage unless the caller passes `store`.
 const PANE_STATE_CAP = 20;
 
-function loadPaneState(key) {
-  const map = tabStore.readJson(key);
+function loadPaneState(key, area = tabStore) {
+  const map = area.readJson(key);
   return map && typeof map === 'object' ? map : {};
 }
 
 // Puts `sid` last, so the cap drops the least recent session. A null value removes it.
-function savePaneState(key, map, sid, value) {
+function savePaneState(key, map, sid, value, area = tabStore) {
   delete map[sid];
   if (value != null) map[sid] = value;
   const capped = Object.fromEntries(Object.entries(map).slice(-PANE_STATE_CAP));
-  tabStore.writeJson(key, capped);
+  area.writeJson(key, capped);
   return capped;
 }
 
@@ -13549,7 +13671,8 @@ function neighborPair(sid, id, pairs) {
 // tab, so grouping leaves the server's order alone; a drag saves the order on screen.
 const PANE_GROUPS_KEY = 'pane-groups';
 const PANE_GROUP_COLORS = ['blue', 'purple', 'teal', 'orange', 'yellow', 'pink', 'green', 'red'];
-let paneGroups = loadPaneState(PANE_GROUPS_KEY);
+// Groups outlive the window; a save re-reads the map, so other windows' groups stay.
+let paneGroups = loadPaneState(PANE_GROUPS_KEY, store);
 
 // Tabs that are gone, or in an earlier group, drop out, and so do groups left empty.
 function getPaneGroups(sid) {
@@ -13567,7 +13690,8 @@ function getPaneGroups(sid) {
 }
 
 function setPaneGroups(sid, groups) {
-  paneGroups = savePaneState(PANE_GROUPS_KEY, paneGroups, sid, groups.length ? groups : null);
+  const map = loadPaneState(PANE_GROUPS_KEY, store);
+  paneGroups = savePaneState(PANE_GROUPS_KEY, map, sid, groups.length ? groups : null, store);
 }
 
 // A pair is in the group of either side, and the board is in none.
@@ -13875,9 +13999,10 @@ function markPaneFrameFocus() {
   view?.classList.add('frame-focus');
 }
 
-function paneCardHtml(title, text, button) {
-  const btn = button ? `<button class="btn btn-primary" data-pane-open>${escapeHtml(button)}</button>` : '';
-  return `<div class="pane-card"><div class="pane-card-box">${PANE_ICONS.warning}<h3>${escapeHtml(title)}</h3><p>${escapeHtml(text)}</p>${btn}</div></div>`;
+// `extra` is trusted HTML put above the button.
+function paneCardHtml(title, text, button, { attr = 'data-pane-open', extra = '' } = {}) {
+  const btn = button ? `<button class="btn btn-primary" ${attr}>${escapeHtml(button)}</button>` : '';
+  return `<div class="pane-card"><div class="pane-card-box">${PANE_ICONS.warning}<h3>${escapeHtml(title)}</h3><p>${escapeHtml(text)}</p>${extra}${btn}</div></div>`;
 }
 
 // Returns the key of the view to show.
@@ -13906,32 +14031,37 @@ function mountPane(sid, pane) {
   return key;
 }
 
-async function loadPaneView(sid, pane, view, scroll) {
+// The card in place of a URL pane that cannot be framed, or '' when it can.
+function paneBlockedHtml(pane) {
   if (paneOwnOrigin(pane)) {
-    view.insertAdjacentHTML(
-      'beforeend',
-      paneCardHtml('A pane cannot show the board or the hub', pane.target, 'Open in new tab'),
-    );
-    return;
+    return paneCardHtml('A pane cannot show the board or the hub', pane.target, 'Open in new tab');
   }
-  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',
-      ),
-    );
+  if (paneFrameable(pane)) return '';
+  return 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',
+  );
+}
+
+function paneUrlFrame(pane, className) {
+  const frame = document.createElement('iframe');
+  frame.className = className;
+  frame.setAttribute('sandbox', PANE_URL_SANDBOX);
+  frame.setAttribute('referrerpolicy', 'no-referrer');
+  frame.title = pane.title;
+  frame.src = pane.target;
+  return frame;
+}
+
+async function loadPaneView(sid, pane, view, scroll) {
+  const blocked = paneBlockedHtml(pane);
+  if (blocked) {
+    view.insertAdjacentHTML('beforeend', blocked);
     return;
   }
   if (pane.kind === 'url') {
-    const frame = document.createElement('iframe');
-    frame.className = 'pane-frame pane-url-frame modal-zoomable';
-    frame.setAttribute('sandbox', PANE_URL_SANDBOX);
-    frame.setAttribute('referrerpolicy', 'no-referrer');
-    frame.title = pane.title;
-    frame.src = pane.target;
+    const frame = paneUrlFrame(pane, 'pane-frame pane-url-frame modal-zoomable');
     frame.addEventListener('load', () => {
       view.classList.remove('keys-bridged');
       frame.hostKeysSig = null;
@@ -13955,7 +14085,7 @@ async function loadPaneView(sid, pane, view, scroll) {
   if (data?.kind === 'html') {
     // 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 show-pane-frame', showSrcdoc(data.content, scroll?.y, modalZoom)]
       : ['pane-frame modal-zoomable themed-frame', themedSrcdoc(data.content)];
     const frame = createPreviewFrame(cls, doc);
     frame.title = pane.title;
@@ -14365,7 +14495,7 @@ async function reloadPane(id) {
     await reloadPaneView(sid, pane, view);
   } else {
     unmountPane(sid, pane.id);
-    paneRefused.delete(pane.target);
+    paneFraming.delete(pane.target);
     syncPanes();
   }
   showToast('Pane reloaded', 'success');
@@ -14578,6 +14708,7 @@ function openPaneMenu(x, y, id) {
         : paneMenuItem('link', paneIsLinked(pane) ? 'Remove from linked documents' : 'Add to linked documents')) +
       paneMenuItem('rename', 'Rename') +
       paneMenuItem('reload', 'Reload') +
+      (url ? paneMenuItem('dock', pane.dock ? 'Remove from the dock' : 'Dock beside the terminal') : '') +
       paneGroupMenuItems(pane.id) +
       paneMenuItem('close', 'Close pane'),
   );
@@ -14589,6 +14720,20 @@ function paneIsLinked(pane) {
   return getSessionPreviewPaths(paneSessionId()).some((p) => canonicalPath(p) === key);
 }
 
+function togglePaneDock(id) {
+  const pane = paneById(id);
+  const sid = paneSessionId();
+  if (pane && sid) setPaneDock(sid, id, !pane.dock);
+}
+
+async function setPaneDock(sid, id, on) {
+  const res = await paneRequest('PATCH', apiPath`/api/panes/${sid}/${id}`, { dock: on });
+  if (res.error) return showToast(res.error, 'error');
+  applyPaneLayout(sid, res.layout);
+  if (on) showToast('Docked: click its icon in the rail beside the terminal', 'success');
+  else showToast('Removed from the dock. It stays a pane of the session', 'success');
+}
+
 function togglePaneLink(id) {
   const pane = paneById(id);
   const sid = paneSessionId();
@@ -14620,6 +14765,7 @@ const PANE_MENU_ACTIONS = {
   link: togglePaneLink,
   rename: beginPaneRename,
   reload: reloadPane,
+  dock: togglePaneDock,
   close: closePane,
   group: (id, to) => groupPaneTab(id, to || null),
   groupRename: beginPaneGroupRename,
@@ -15266,6 +15412,11 @@ function terminalShortcut(e, probe = false) {
   if (ctrlAlt && (e.code === 'KeyN' || e.code === 'KeyR') && terminalAvailable()) {
     return () => openNewSession(null, e.code === 'KeyR');
   }
+  if ((e.code === 'ArrowUp' || e.code === 'ArrowDown') && e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
+    if (!(probe || terminalPaneFocused() || isShowCardFocused() || isDockFocused()) || dockRailItems().length < 2)
+      return null;
+    return () => stepDockRail(e.code === 'ArrowDown' ? 1 : -1);
+  }
   if (e.code !== 'Backquote' || e.metaKey) return null;
   if (ctrlAlt) return toggleShowFocus;
   if (e.ctrlKey && !e.altKey) return e.shiftKey ? openTerminalManager : toggleTerminal;
@@ -15309,14 +15460,29 @@ function toggleTerminalFocus() {
 }
 
 function toggleShowFocus() {
-  if (isShowCardFocused()) {
+  if (isShowCardFocused() || isDockFocused()) {
     focusTerminalPane();
     return;
   }
-  if (!wantsTerminal() || !showState.posts.length) return;
-  if (showState.closed || showState.collapsed) {
-    showState.closed = false;
-    showState.collapsed = false;
+  if (!wantsTerminal()) return;
+  const items = dockItems();
+  const ids = items.map((p) => p.id);
+  const rail = showState.posts.length ? ['show', ...ids] : ids;
+  const last = showState.terminalId && dockLast[showState.terminalId];
+  const pick = rail.includes(last) ? last : rail[0];
+  if (!pick) return;
+  if (pick !== 'show') {
+    if (dockActivePane(items)?.id !== pick) {
+      setDockAddon(pick);
+      renderShow();
+    }
+    focusDockHead();
+    return;
+  }
+  const addon = dockActivePane(items);
+  if (addon) setDockAddon(null);
+  if (addon || showState.closed || showState.collapsed) {
+    Object.assign(showState, { closed: false, collapsed: false, ...(addon && { docked: true }) });
     renderShow();
   }
   focusShowBody();
@@ -15326,6 +15492,8 @@ function toggleShowFocus() {
 function syncTerminal() {
   const btn = document.getElementById('terminal-toggle');
   const on = wantsTerminal();
+  // A focused frame keeps the keys after its pane hides, and then the board never sees them.
+  if (!on && document.getElementById('terminal-pane').contains(document.activeElement)) document.activeElement.blur();
   const arrived = viewMode === 'session' ? currentSessionId : null;
   const view = `${arrived}:${on}`;
   // Only on a change of session or terminal state, so a panel opened by hand over the terminal stays.
@@ -15654,10 +15822,16 @@ const urlPaneFrames = () => [...paneViews.querySelectorAll('.pane-url-frame')];
 window.addEventListener('message', (e) => {
   const type = e.data?.type;
   if (type !== 'hub:hostKey' && type !== 'hub:hostReady') return;
-  const frame = urlPaneFrames().find((f) => f.contentWindow === e.source);
+  const dock = dockFrameEls().find((f) => f.contentWindow === e.source);
+  const frame = dock || urlPaneFrames().find((f) => f.contentWindow === e.source);
   if (!frame || URL.parse(frame.src)?.origin !== e.origin) return;
-  if (type === 'hub:hostReady') frame.parentElement.classList.add('keys-bridged');
-  else replayKey(e.data, frame);
+  if (type === 'hub:hostReady') {
+    if (!dock) frame.parentElement.classList.add('keys-bridged');
+    return;
+  }
+  // A page has focus when it gets a keydown, even one that never posts its focus.
+  if (dock) setDockFrameFocused(dock, true);
+  replayKey(e.data, frame);
 });
 
 function pushTerminalClaims() {
@@ -15667,11 +15841,13 @@ function pushTerminalClaims() {
     terminalClaimsQueued = false;
     const bridged = bridgedFrameEls();
     const urlFrames = urlPaneFrames();
-    if (!termFrame.inited && !kanbotState.inited && !bridged.length && !urlFrames.length) return;
+    const dockEls = dockFrameEls();
+    if (!termFrame.inited && !kanbotState.inited && !bridged.length && !urlFrames.length && !dockEls.length) return;
     const claims = keyClaims();
     const base = bridgeClaims(claims);
     sendBridgeClaimsAll(bridged, base);
     sendHostKeys(urlFrames, base);
+    sendHostKeys(dockEls, { keys: [...base.keys, ...DOCK_CLAIMS, ...claims.forward.flatMap(comboClaims)] });
     const sig = JSON.stringify(claims);
     sendFrameClaims(kanbotState, claims, sig, postToKanbotFrame);
     sendFrameClaims(termFrame, claims, sig, terminalFrameSend);
@@ -16018,7 +16194,10 @@ function onTerminalMessage(sessionId, msg, tail = '') {
   if (msg.t === 'ready') {
     // The server has the prompt now; a later start of the same placeholder must not send it again.
     const spec = newSpecs.get(sessionId);
-    if (spec) spec.prompt = null;
+    if (spec) {
+      spec.prompted ||= !!spec.prompt;
+      spec.prompt = null;
+    }
     clearTerminalSlow();
     hideTerminalPrompt();
     setTerminalStatus('');
@@ -16501,7 +16680,7 @@ function setAsk(a) {
     if (a.content == null) {
       body.innerHTML = '<p class="ask-missing">The card file is gone. Skip, so the agent stops waiting.</p>';
     } else {
-      const frame = createPreviewFrame('ask-frame', showSrcdoc(a.content, 0, ASK_BRIDGE_TAG), SHOW_SANDBOX);
+      const frame = createPreviewFrame('ask-frame', showSrcdoc(a.content, 0, modalZoom, ASK_BRIDGE_TAG), SHOW_SANDBOX);
       frame.addEventListener('load', () => {
         if (askState.frame === frame && !askState.hidden) frame.focus();
       });
@@ -16631,6 +16810,11 @@ const SHOW_VIEW_KEY = 'cck-show-view-v1';
 const SHOW_MIN_W = 280;
 const SHOW_MIN_H = 120;
 const SHOW_INSET = 8;
+const SHOW_DOCK_KEY = 'cck-show-dock-w';
+const SHOW_DOCK_TERM_MIN = 320;
+const DOCK_ADDON_KEY = 'cck-dock-addon-v1';
+const DOCK_LAST_KEY = 'cck-dock-last-v1';
+const DOCK_EXPANDED_KEY = 'cck-dock-expanded-v1';
 const SHOW_SANDBOX = 'allow-scripts allow-forms';
 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'";
@@ -16684,6 +16868,9 @@ const SHOW_ICONS = {
   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"/>',
+  card: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M13 4v7h8"/>',
+  external: '<path d="M15 3h6v6M10 14L21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  reload: '<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>',
 };
 
 // PTY id → terminal id, from the terminal list. A terminal started after the last list read is
@@ -16697,6 +16884,7 @@ const showState = {
   closed: false,
   expanded: false,
   collapsed: false,
+  docked: false,
   marked: new Set(),
   rendered: null,
   frame: null,
@@ -16710,12 +16898,31 @@ const showState = {
   path: null,
 };
 let showSize = store.readJson(SHOW_SIZE_KEY);
-// Terminal id → { closed?, collapsed?, expanded? }; a terminal with no entry yet starts collapsed. Ids gone from the terminal list are pruned.
+let showDockW = store.readJson(SHOW_DOCK_KEY);
+// Terminal id → { closed?, collapsed?, expanded?, docked? }; a terminal with no entry yet starts collapsed. 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'];
+const SHOW_VIEW_FLAGS = ['closed', 'collapsed', 'expanded', 'docked'];
 let showHostObserver = null;
+// Terminal id → the id of the add-on pane in the dock. Ids gone from the terminal list are pruned.
+const dockAddons = store.readJson(DOCK_ADDON_KEY, {});
+// Terminal id → the rail item last on screen ('show' or an add-on id), kept while the dock is hidden,
+// so Ctrl+Alt+` goes back to it.
+const dockLast = store.readJson(DOCK_LAST_KEY, {});
+let dockExpanded = store.getItem(DOCK_EXPANDED_KEY) === '1';
+// Dock item id → its view, kept while its filled URL stays the same. A view hidden for
+// DOCK_UNLOAD_MS goes, so a page that polls stops until it is opened again.
+const dockFrames = new Map();
+const dockHideTimers = new Map();
+const DOCK_UNLOAD_MS = 60_000;
+let dockSid = null;
+// The add-ons from /api/addons for `sid`, refetched on `addon:changed`.
+let dockAddonList = null;
+let dockRailHtml = '';
+let dockRailClaimed = false;
+let dockShowDot = false;
+let dockObserver = null;
 
 function showCardEl() {
   return document.getElementById('show-card');
@@ -16742,7 +16949,12 @@ function focusShowBody() {
   else showCardEl()?.querySelector('.show-body')?.focus();
 }
 
-const SHOW_KEY_COMMANDS = { 'alt+Enter': 'expand', 'alt+w': 'close' };
+const SHOW_KEY_COMMANDS = { 'alt+Enter': 'expand', 'alt+shift+Enter': 'dock', 'alt+w': 'close' };
+
+// Docked, the card is a dock item, so it shares the dock's expand with the add-ons.
+const showExpanded = () => (showState.docked ? dockExpanded : showState.expanded);
+
+const expandTitle = (on, home) => (on ? `Back to the ${home} · Alt+Enter or Esc` : 'Fill the terminal · Alt+Enter');
 
 // The body keeps focus, because a render replaces an HTML card's frame.
 function showCardKey(e) {
@@ -16752,10 +16964,11 @@ function showCardKey(e) {
     return true;
   }
   const combo = ClaudeHub.comboOf(e);
-  const cmd = combo === 'Escape' ? (showState.expanded ? 'expand' : 'collapse') : SHOW_KEY_COMMANDS[combo];
+  let cmd = SHOW_KEY_COMMANDS[combo];
+  if (combo === 'Escape') cmd = showExpanded() ? 'expand' : 'collapse';
   if (cmd) {
     showCommand(cmd);
-    if (cmd === 'expand') focusShowBody();
+    if (cmd === 'expand' || cmd === 'dock') focusShowBody();
     else focusTerminalPane();
     return true;
   }
@@ -16790,10 +17003,16 @@ function rememberTerminalIds(list) {
   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));
+  pruneTerminalMap(showViews, SHOW_VIEW_KEY, live);
+  pruneTerminalMap(dockAddons, DOCK_ADDON_KEY, live);
+  pruneTerminalMap(dockLast, DOCK_LAST_KEY, live);
+}
+
+function pruneTerminalMap(map, key, live) {
+  const gone = Object.keys(map).filter((tid) => !live.has(tid));
   if (!gone.length) return;
-  for (const tid of gone) delete showViews[tid];
-  store.writeJson(SHOW_VIEW_KEY, showViews);
+  for (const tid of gone) delete map[tid];
+  store.writeJson(key, map);
 }
 
 // A session resumed after its terminal ended runs under the same PTY id in a new terminal, with a
@@ -16901,16 +17120,24 @@ function onShowRemoved(d) {
   if (dropShowPost(d.id)) renderShow();
 }
 
+// `attr` names the data attribute that the header's click handler reads: show or dock.
+function showBtnHtml(attr, cmd, icon, title, disabled = false, pressed = null) {
+  return `<button type="button" class="show-btn${cmd === 'remove' ? ' remove' : ''}${pressed ? ' active' : ''}" data-${attr}="${escapeHtml(cmd)}" title="${escapeHtml(title)}" aria-label="${escapeHtml(title)}"${pressed === null ? '' : pressed ? ' aria-pressed="true"' : ' aria-pressed="false"'}${disabled ? ' disabled' : ''}>${showIcon(icon)}</button>`;
+}
+
 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;
+  const btn = (...args) => showBtnHtml('show', ...args);
+  const { collapsed, docked } = showState;
+  const expanded = showExpanded();
+  const dockTitle = docked ? 'Back to the overlay · Alt+Shift+Enter' : 'Dock beside the terminal · Alt+Shift+Enter';
+  const dock = btn('dock', 'dock', dockTitle, false, docked);
+  const expand = btn('expand', expanded ? 'restore' : 'expand', expandTitle(expanded, docked ? 'dock' : 'card'));
   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>`;
+    <span class="show-actions">${btn('pane', 'pane', 'Open in a pane of the session')}${dock}${btn('collapse', collapsed ? 'uncollapse' : 'collapse', collapsed ? 'Show the post' : 'Collapse to the header · Esc')}${expand}${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() {
@@ -16933,6 +17160,10 @@ function renderShow({ flash = false } = {}) {
   chip.hidden = !n || open;
   chip.querySelector('.show-reopen-n').textContent = `show · ${n}`;
   card.classList.toggle('open', open);
+  const docked = open && showState.docked && !showState.collapsed;
+  card.classList.toggle('docked', docked);
+  if (flash && dockActivePane()) dockShowDot = true;
+  renderDockRail();
   if (!open) {
     showState.rendered = null;
     showState.frame = null;
@@ -16944,12 +17175,13 @@ function renderShow({ flash = false } = {}) {
   }
   const p = showState.posts[showState.idx];
   showState.marked.delete(p.id);
-  card.classList.toggle('expanded', showState.expanded && !showState.collapsed);
+  card.classList.toggle('expanded', showExpanded() && !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>`;
+      <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>
+      <div class="show-dock-edge" title="Resize · double-click to reset"></div>`;
   }
   card.querySelector('.show-head').innerHTML = showHeaderHtml(p);
   card.querySelector('.show-ticks').innerHTML = showTicksHtml();
@@ -16987,10 +17219,10 @@ async function renderShowBody(p, samePost) {
     const restoreY = samePost && showState.frame ? showState.frameY : 0;
     showState.frameY = restoreY;
     if (samePost && showState.frame?.isConnected) {
-      showState.frame.srcdoc = showSrcdoc(data.content, restoreY);
+      showState.frame.srcdoc = showSrcdoc(data.content, restoreY, showZoom);
     } else {
       showState.frameH = 0;
-      body.replaceChildren(createShowFrame(p.title, showSrcdoc(data.content, 0)));
+      body.replaceChildren(createShowFrame(p.title, showSrcdoc(data.content, 0, showZoom)));
     }
     refocus();
     setShowReview(showReviewOpts(p, data, body, showState.frame));
@@ -17000,7 +17232,7 @@ async function renderShowBody(p, samePost) {
   showState.frame = null;
   const keepScroll = samePost ? body.scrollTop : 0;
   const md = document.createElement('div');
-  md.className = 'show-md modal-zoomable';
+  md.className = 'show-md';
   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);
@@ -17087,9 +17319,9 @@ function withHeadFirst(content, head) {
 const FRAME_SCROLLBAR_CSS = ':where(html){scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.45) transparent}';
 
 // A whole document gets the tokens and base styles first in its head, so its own styles win.
-function showSrcdoc(content, restoreY, extraHead = '') {
+function showSrcdoc(content, restoreY, textZoom, extraHead = '') {
   const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${showTokenCss()}}${SHOW_FRAME_BASE}${FRAME_SCROLLBAR_CSS}</style>${extraHead}`;
-  const bridge = `<script>(${showBridge})(${Math.max(0, Math.round(restoreY) || 0)}, ${modalZoom});</script>${REVIEW_BRIDGE_TAG}`;
+  const bridge = `<script>(${showBridge})(${Math.max(0, Math.round(restoreY) || 0)}, ${textZoom});</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>`;
   }
@@ -17192,11 +17424,11 @@ new MutationObserver(() => {
   });
 }).observe(document.body, { attributes: true, attributeFilter: ['class', 'data-color-theme', 'style'] });
 
+const PANE_SHOW_FRAMES = '.show-pane-frame, .themed-frame, .ask-frame, .dock-addon-frame';
+
 // 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, .themed-frame, .ask-frame')].filter(
-    (f) => f?.contentWindow,
-  );
+function postToShowFrames(makeMsg, frames = [showState.frame, ...document.querySelectorAll(PANE_SHOW_FRAMES)]) {
+  frames = [...frames].filter((f) => f?.contentWindow);
   if (!frames.length) return;
   const msg = makeMsg();
   if (!msg) return;
@@ -17214,16 +17446,16 @@ function showClampSize(size, w, h) {
 
 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;
+  if (!card.classList.contains('open') || card.classList.contains('under-addon')) return;
+  const w = dockHostWidth();
+  const h = document.getElementById('terminal-host').clientHeight;
+  if (w <= 0 || !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;
+  const docked = card.classList.contains('docked');
+  const sized = !!showSize && !showState.expanded && !showState.collapsed && !docked;
   card.classList.toggle('sized', sized);
   if (sized) {
     const s = showClampSize(showSize, w, h);
@@ -17232,7 +17464,7 @@ function layoutShow() {
   }
   const frame = showState.frame;
   if (!frame) return;
-  const peek = !showState.expanded && !sized;
+  const peek = !card.classList.contains('expanded') && !sized && !docked;
   const chrome =
     card.querySelector('.show-head').offsetHeight +
     card.querySelector('.show-ticks').offsetHeight +
@@ -17242,6 +17474,460 @@ function layoutShow() {
   frame.style.height = peek ? `${Math.min(showState.frameH || SHOW_MIN_H, fit.h - chrome)}px` : '';
 }
 
+// A docked card gets 40% of the host until dragged, and always leaves the terminal SHOW_DOCK_TERM_MIN.
+function showDockWidth(want, w) {
+  return Math.max(SHOW_MIN_W, Math.min(want ?? Math.round(w * 0.4), w - SHOW_DOCK_TERM_MIN));
+}
+
+// The terminal pane holds the width, because the terminal frame and the terminal bar read it too.
+// Each change refits the terminal and resizes its PTY, so a drag sets it only at the end.
+function setShowDockWidth(px) {
+  const pane = document.getElementById('terminal-pane');
+  const value = `${px}px`;
+  if (pane.style.getPropertyValue('--show-dock-w') !== value) pane.style.setProperty('--show-dock-w', value);
+}
+
+// The host's width less the rail, which is 0 wide while hidden.
+function dockHostWidth() {
+  return document.getElementById('terminal-host').clientWidth - document.getElementById('dock-rail').offsetWidth;
+}
+
+function fitDockWidth() {
+  if (!document.getElementById('terminal-pane').classList.contains('show-docked')) return;
+  const w = dockHostWidth();
+  if (w > 0) setShowDockWidth(showDockWidth(showDockW, w));
+}
+
+// A terminal with no posts has no session from the show list yet, so its PTY id stands in,
+// which is the session it started.
+function dockSessionId() {
+  return showState.terminalId ? (showState.sessionId ?? currentSessionId) : null;
+}
+
+function dockPanes(sid) {
+  return sid ? paneLayout(sid).panes.filter((p) => p.dock) : [];
+}
+
+function fillAddonUrl(url, values) {
+  return url.replace(/\{([^{}]*)\}/g, (m, k) => (values[k] == null ? m : encodeURIComponent(values[k])));
+}
+
+function addonValues(sid) {
+  const s = sessions.find((x) => x.id === sid);
+  const cwd = s?.cwd || s?.project || newSpecs.get(sid)?.cwd || '';
+  return { sessionId: sid, cwd, project: s?.project || cwd };
+}
+
+// The rail's items after the card: global add-ons, the session's, then its docked URL panes.
+// The same filled URL shows once. Until the list for a new session arrives, the global
+// entries of the last one stand, so their frames are kept when the URL stays the same.
+function dockItems(sid = dockSid) {
+  if (!sid) return [];
+  const list = dockAddonList;
+  const own = list?.sid === sid ? list : null;
+  const items = [];
+  const seen = new Set();
+  const push = (item) => {
+    if (seen.has(item.target)) return;
+    seen.add(item.target);
+    items.push(item);
+  };
+  if (list && (list.global.length || own?.session.length)) {
+    const values = addonValues(sid);
+    const entries = [...list.global.map((a) => [a, true]), ...(own ? own.session.map((a) => [a, false]) : [])];
+    for (const [a, global] of entries) {
+      const target = fillAddonUrl(a.url, { ...a.params, ...own?.params[a.id], ...values });
+      push({ id: a.id, kind: 'url', title: a.title, icon: a.icon, target, addon: true, global, run: !!a.run });
+    }
+  }
+  for (const p of dockPanes(sid)) push(p);
+  return items;
+}
+
+async function fetchDockAddons(sid) {
+  const list = await getJson(`${apiPath`/api/addons`}?session=${encodeURIComponent(sid)}`);
+  if (!list || sid !== dockSid) return;
+  dockAddonList = { sid, ...list };
+  renderDockRail();
+}
+
+function dockActivePane(items = dockItems()) {
+  const id = showState.terminalId && dockAddons[showState.terminalId];
+  return (id && items.find((p) => p.id === id)) || null;
+}
+
+function dropDockView(id) {
+  dockFrames.get(id)?.remove();
+  dockFrames.delete(id);
+  clearTimeout(dockHideTimers.get(id));
+  dockHideTimers.delete(id);
+}
+
+function dockShowOn(active) {
+  return !active && showState.posts.length > 0 && !showState.closed;
+}
+
+function dockOnScreen(active = dockActivePane()) {
+  return active ? active.id : dockShowOn(active) ? 'show' : null;
+}
+
+function setDockAddon(id) {
+  const tid = showState.terminalId;
+  if (!tid || (dockAddons[tid] ?? null) === id) return;
+  if (id) dockAddons[tid] = id;
+  else delete dockAddons[tid];
+  store.writeJson(DOCK_ADDON_KEY, dockAddons);
+}
+
+function dockRailButton(id, label, title, on, dot) {
+  return `<button type="button" class="dock-rail-btn${on ? ' on' : ''}${dot ? ' dot' : ''}" data-rail="${escapeHtml(id)}" title="${escapeHtml(title)}" aria-label="${escapeHtml(title)}" aria-pressed="${on ? 'true' : 'false'}">${label}</button>`;
+}
+
+// Runs from every renderShow, so it does no work past a class toggle until a session has add-ons.
+function renderDockRail() {
+  const sid = dockSessionId();
+  if (sid !== dockSid) {
+    dockSid = sid;
+    if (sid && !paneLayouts.has(sid)) fetchPaneLayout(sid);
+    if (sid) fetchDockAddons(sid);
+  }
+  const addons = dockItems(sid);
+  for (const [id, view] of dockFrames) {
+    if (!addons.some((p) => p.id === id && p.target === view.dataset.target)) dropDockView(id);
+  }
+  const on = addons.length > 0;
+  const termPane = document.getElementById('terminal-pane');
+  const rail = document.getElementById('dock-rail');
+  const card = showCardEl();
+  const active = dockActivePane(addons);
+  const onScreen = dockOnScreen(active);
+  const tid = showState.terminalId;
+  if (tid && onScreen && dockLast[tid] !== onScreen) {
+    dockLast[tid] = onScreen;
+    store.writeJson(DOCK_LAST_KEY, dockLast);
+  }
+  termPane.classList.toggle('dock-rail-on', on);
+  rail.hidden = !on;
+  card.classList.toggle('under-addon', !!active);
+  const docked = !!active || card.classList.contains('docked');
+  termPane.classList.toggle('show-docked', docked);
+  if (on) document.getElementById('show-reopen').hidden = true;
+  if (!active) dockShowDot = false;
+  let html = '';
+  if (on) {
+    const n = showState.posts.length;
+    if (n) html += dockRailButton('show', showIcon('card'), `Show · ${n}`, onScreen === 'show', dockShowDot);
+    for (const p of addons) {
+      html += dockRailButton(
+        p.id,
+        escapeHtml(p.icon || [...p.title][0]?.toUpperCase() || '?'),
+        p.title,
+        p === active,
+        false,
+      );
+    }
+  }
+  if (html !== dockRailHtml) {
+    dockRailHtml = html;
+    rail.innerHTML = html;
+  }
+  const claimed = dockRailItems(addons).length > 1;
+  if (claimed !== dockRailClaimed) {
+    dockRailClaimed = claimed;
+    pushTerminalClaims();
+  }
+  renderDockAddon(active);
+  if (docked && !dockObserver) {
+    dockObserver = new ResizeObserver(fitDockWidth);
+    dockObserver.observe(document.getElementById('terminal-host'));
+  } else if (!docked) {
+    dockObserver?.disconnect();
+    dockObserver = null;
+  }
+  fitDockWidth();
+}
+
+function renderDockAddon(pane) {
+  const panel = document.getElementById('dock-addon');
+  panel.hidden = !pane;
+  if (pane) {
+    if (!panel.firstChild) {
+      panel.innerHTML = `<header class="show-head dock-addon-head" tabindex="-1"><span class="show-nav"><span class="show-title"></span></span>
+      <span class="show-actions">${showBtnHtml('dock', 'open', 'external', 'Open in a new tab')}
+      ${showBtnHtml('dock', 'expand', 'expand', 'Fill the terminal · Alt+Enter')}
+      ${showBtnHtml('dock', 'reload', 'reload', 'Reload')}
+      ${showBtnHtml('dock', 'remove', 'clear', 'Remove from the rail')}
+      ${showBtnHtml('dock', 'close', 'close', 'Hide the dock · Alt+W')}</span></header>
+      <div class="dock-addon-body"></div><div class="show-dock-edge" title="Resize · double-click to reset"></div>`;
+    }
+    const title = panel.querySelector('.show-title');
+    title.textContent = pane.title;
+    title.title = pane.global ? `${pane.title} · every session` : pane.title;
+    const open = panel.querySelector('[data-dock="open"]');
+    open.title = `Open ${pane.target} in a new tab`;
+    open.setAttribute('aria-label', open.title);
+    panel.classList.toggle('expanded', dockExpanded);
+    panel.style.setProperty('--show-term-font', `${currentTerminalFontSize()}px`);
+    const expand = panel.querySelector('[data-dock="expand"]');
+    const label = expandTitle(dockExpanded, 'dock');
+    if (expand.title !== label) {
+      expand.innerHTML = showIcon(dockExpanded ? 'restore' : 'expand');
+      expand.title = label;
+      expand.setAttribute('aria-label', label);
+    }
+    if (!dockFrames.has(pane.id)) {
+      const view = createDockView(pane);
+      panel.querySelector('.dock-addon-body').appendChild(view);
+      dockFrames.set(pane.id, view);
+    }
+  }
+  for (const [id, view] of dockFrames) {
+    view.hidden = id !== pane?.id;
+    if (!view.hidden) {
+      clearTimeout(dockHideTimers.get(id));
+      dockHideTimers.delete(id);
+    } else if (!dockHideTimers.has(id))
+      dockHideTimers.set(
+        id,
+        setTimeout(() => dropDockView(id), DOCK_UNLOAD_MS),
+      );
+  }
+  syncDockFocus();
+}
+
+function dockCardView(pane, html) {
+  const view = document.createElement('div');
+  view.className = 'dock-addon-view';
+  view.dataset.target = pane.target;
+  view.innerHTML = html;
+  return view;
+}
+
+function createDockView(pane) {
+  const blocked = paneBlockedHtml(pane);
+  if (blocked) return dockCardView(pane, blocked);
+  if (pane.run && !dockAddonUp.has(pane.id)) return startDockAddon(pane);
+  const frame = paneUrlFrame(pane, 'dock-addon-frame');
+  frame.dataset.target = pane.target;
+  frame.addEventListener('load', () => {
+    postToShowFrames(() => ({ type: `${SHOW_MSG}tokens`, tokens: showTokens() }), [frame]);
+    frame.hostKeysSig = null;
+    pushTerminalClaims();
+  });
+  if (pane.addon || paneFraming.get(pane.target)) return frame;
+  const sid = dockSid;
+  probePaneFraming(sid, pane).then((frameable) => {
+    if (frameable !== false || dockFrames.get(pane.id) !== frame) return;
+    dropDockView(pane.id);
+    if (sid === dockSid) renderDockRail();
+  });
+  return frame;
+}
+
+// The board starts the page's server when its port does not answer (lib/addon-runner.js);
+// the frame comes once it does. Reload asks again.
+function startDockAddon(pane) {
+  const view = dockCardView(
+    pane,
+    `<div class="pane-card"><div class="pane-card-box"><p>Starting ${escapeHtml(pane.title)}…</p></div></div>`,
+  );
+  paneRequest('POST', apiPath`/api/addons/${pane.id}/start`).then((r) => {
+    if (dockFrames.get(pane.id) !== view) return;
+    if (r.state === 'up' || r.state === 'none') {
+      dockAddonUp.add(pane.id);
+      dropDockView(pane.id);
+      renderDockRail();
+      return;
+    }
+    const log = r.log ? `<p>Log: <code>${escapeHtml(r.log)}</code></p>` : '';
+    view.innerHTML = paneCardHtml(`${pane.title} did not start`, r.error || 'No answer', 'Retry', {
+      attr: 'data-dock="reload"',
+      extra: log,
+    });
+  });
+  return view;
+}
+
+async function removeDockItem(item) {
+  if (!item.addon) return setPaneDock(dockSid, item.id, false);
+  if (item.global) {
+    const ok = await confirmModal({
+      title: 'Remove this add-on from every session?',
+      message: 'It was added with --global, so it is on the rail of each session.',
+      chip: item.title,
+      okLabel: 'Remove',
+    });
+    if (!ok) return;
+  }
+  const r = await paneRequest('DELETE', `${apiPath`/api/addons/${item.id}`}?session=${encodeURIComponent(dockSid)}`);
+  if (r.error) showToast(r.error, 'error');
+}
+
+// Page-wide, like the session log's full width. The panel covers the terminal above its prompt
+// rows, so the PTY keeps its size.
+function setDockExpanded(on) {
+  dockExpanded = on;
+  store.setItem(DOCK_EXPANDED_KEY, on ? '1' : '');
+  renderShow();
+}
+
+// Alt+Enter toggles the full width and Esc goes back; Esc in the dock focuses the terminal.
+function dockHeadKey(e) {
+  const combo = ClaudeHub.comboOf(e);
+  if (combo !== 'alt+w' && combo !== 'alt+Enter' && combo !== 'Escape') return false;
+  const pane = dockActivePane();
+  if (!pane) return false;
+  if (combo === 'alt+w') {
+    dockRailCommand(pane.id);
+    focusTerminalPane();
+  } else if (combo === 'alt+Enter') setDockExpanded(!dockExpanded);
+  else if (combo === 'Escape' && dockExpanded) setDockExpanded(false);
+  else if (combo === 'Escape') focusTerminalPane();
+  else return false;
+  return true;
+}
+
+// Focus moving from the terminal's frame into a dock page leaves this document's activeElement on the
+// terminal frame and fires no event here, so the page posts its own focus (skills/addon/references/build.md).
+let dockFocusFrame = null;
+
+const dockFrameFocused = () => !!dockFocusFrame?.isConnected && !dockFocusFrame.hidden;
+
+function isDockFocused() {
+  return dockFrameFocused() || !!document.activeElement?.closest('#dock-addon');
+}
+
+function setDockFrameFocused(frame, on) {
+  if (on) dockFocusFrame = frame;
+  else if (dockFocusFrame === frame) dockFocusFrame = null;
+  syncDockFocus();
+}
+
+function syncDockFocus() {
+  document.getElementById('dock-addon').classList.toggle('focused', dockFrameFocused());
+}
+
+const dockFrameEls = () => [...dockFrames.values()].filter((v) => v.tagName === 'IFRAME');
+
+window.addEventListener('message', (e) => {
+  if (e.data?.type !== `${SHOW_MSG}focus`) return;
+  const frame = dockFrameEls().find((f) => f.contentWindow === e.source);
+  if (frame) setDockFrameFocused(frame, e.data.on === true);
+});
+
+// A dock page gets the pane keys plus these (hub protocol §5.2). A page with no hub SDK cannot
+// forward the hub's own combos, so they go as claims too.
+const DOCK_CLAIMS = [{ altKey: true, key: 'Enter', code: '' }];
+
+function comboClaims(combo) {
+  const parts = combo.split('+');
+  const key = parts.pop() || '+';
+  const mods = Object.fromEntries(parts.filter(Boolean).map((m) => [`${m}Key`, true]));
+  const code = /^[a-z]$/.test(key) ? `Key${key.toUpperCase()}` : /^[1-9]$/.test(key) ? `Digit${key}` : '';
+  return [{ ...mods, key, code: '' }, ...(code ? [{ ...mods, key: 'Unidentified', code }] : [])];
+}
+
+// Focus goes to the header, not the page: a frame on another origin would keep the keys.
+function focusDockHead() {
+  document.querySelector('#dock-addon .dock-addon-head')?.focus();
+}
+
+// Show and each add-on take the dock in turn; the one on screen hides it.
+function dockRailCommand(id) {
+  const active = dockActivePane();
+  if (id === 'show') {
+    const showOn = dockShowOn(active);
+    setDockAddon(null);
+    if (showOn) showState.closed = true;
+    else Object.assign(showState, { closed: false, collapsed: false });
+  } else if (active?.id === id) {
+    setDockAddon(null);
+    if (showState.docked) showState.closed = true;
+  } else setDockAddon(id);
+  renderShow();
+}
+
+function dockRailItems(items = dockItems()) {
+  const ids = items.map((p) => p.id);
+  return ids.length && showState.posts.length ? ['show', ...ids] : ids;
+}
+
+// With nothing in the dock, Down starts at the first item and Up at the last.
+function stepDockRail(dir) {
+  const items = dockRailItems();
+  const cur = dockOnScreen();
+  const i = items.indexOf(cur);
+  const next = items[i < 0 ? (dir > 0 ? 0 : items.length - 1) : (i + dir + items.length) % items.length];
+  if (!next || next === cur) return;
+  dockRailCommand(next);
+  if (next === 'show') focusShowBody();
+  else focusDockHead();
+}
+
+// The panel follows the pointer over the terminal; the terminal takes the new width on release.
+function startDockDrag(e, panel) {
+  const edge = e.target.closest('.show-dock-edge');
+  if (!edge || e.button !== 0) return;
+  e.preventDefault();
+  edge.setPointerCapture(e.pointerId);
+  const hostW = dockHostWidth();
+  const start = { x: e.clientX, w: panel.offsetWidth };
+  let w = start.w;
+  let raf = 0;
+  document.body.classList.add('show-resizing');
+  const move = (ev) => {
+    w = showDockWidth(Math.round(start.w + start.x - ev.clientX), hostW);
+    raf ||= requestAnimationFrame(() => {
+      raf = 0;
+      panel.style.setProperty('--show-dock-drag', `${w}px`);
+    });
+  };
+  const up = () => {
+    cancelAnimationFrame(raf);
+    edge.removeEventListener('pointermove', move);
+    edge.removeEventListener('pointerup', up);
+    edge.removeEventListener('pointercancel', up);
+    document.body.classList.remove('show-resizing');
+    panel.style.removeProperty('--show-dock-drag');
+    showDockW = w;
+    store.writeJson(SHOW_DOCK_KEY, showDockW);
+    fitDockWidth();
+  };
+  edge.addEventListener('pointermove', move);
+  edge.addEventListener('pointerup', up);
+  edge.addEventListener('pointercancel', up);
+}
+
+function resetDockWidth() {
+  showDockW = null;
+  store.removeItem(SHOW_DOCK_KEY);
+  fitDockWidth();
+}
+
+function initDockRail() {
+  document.getElementById('dock-rail').addEventListener('click', (e) => {
+    const b = e.target.closest('[data-rail]');
+    if (b) dockRailCommand(b.dataset.rail);
+  });
+  const panel = document.getElementById('dock-addon');
+  panel.addEventListener('click', (e) => {
+    const pane = dockActivePane();
+    if (!pane) return;
+    if (e.target.closest('[data-dock="close"]')) dockRailCommand(pane.id);
+    else if (e.target.closest('[data-dock="expand"]')) setDockExpanded(!dockExpanded);
+    else if (e.target.closest('[data-dock="remove"]')) removeDockItem(pane);
+    else if (e.target.closest('[data-dock="reload"]')) {
+      dockAddonUp.delete(pane.id);
+      dropDockView(pane.id);
+      renderDockRail();
+    } else if (e.target.closest('[data-dock="open"], [data-pane-open]')) hub.openExternal(pane.target);
+  });
+  panel.addEventListener('pointerdown', (e) => startDockDrag(e, panel));
+  panel.addEventListener('dblclick', (e) => {
+    if (e.target.closest('.show-dock-edge')) resetDockWidth();
+  });
+}
+
 async function openShowInPane() {
   const sid = showState.sessionId;
   const target = showState.path;
@@ -17275,9 +17961,13 @@ function showCommand(cmd) {
     showState.idx = i;
     showState.collapsed = false;
   } else if (cmd === 'collapse') showState.collapsed = !showState.collapsed;
-  else if (cmd === 'expand') {
-    showState.expanded = !showState.expanded;
+  else if (cmd === 'dock') {
+    showState.docked = !showState.docked;
     showState.collapsed = false;
+  } else if (cmd === 'expand') {
+    showState.collapsed = false;
+    if (showState.docked) return setDockExpanded(!dockExpanded);
+    showState.expanded = !showState.expanded;
   } else if (cmd === 'close') showState.closed = true;
   else if (cmd === 'remove') {
     const id = showState.posts[showState.idx]?.id;
@@ -17361,7 +18051,12 @@ function initShowCard() {
     grip.addEventListener('pointerup', up);
     grip.addEventListener('pointercancel', up);
   });
+  card.addEventListener('pointerdown', (e) => startDockDrag(e, card));
   card.addEventListener('dblclick', (e) => {
+    if (e.target.closest('.show-dock-edge')) {
+      resetDockWidth();
+      return;
+    }
     if (!e.target.closest('.show-grip')) return;
     showSize = null;
     store.removeItem(SHOW_SIZE_KEY);
@@ -17400,6 +18095,7 @@ const PLACEHOLDER_HINTS = {
   pick: 'pick a session to resume',
   dispatch: 'starting',
   new: 'waiting for your first message',
+  prompted: 'starting',
   edit: 'press Enter in the terminal to start',
 };
 
@@ -17414,8 +18110,9 @@ function placeholderSession(id, spec) {
     placeholder: true,
     mode: spec.mode,
     edit: !!spec.edit,
+    prompted: !!(spec.prompted || spec.prompt),
     name: spec.name || (spec.forkOf && forkLabel(spec.forkOf)) || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
-    dispatched: spec.mode === 'dispatch' ? { parent: spec.parent || null } : undefined,
+    dispatched: spec.mode === 'dispatch' ? { parent: spec.parent || null, child: !!spec.child } : undefined,
     project: spec.cwd,
     worktree: spec.worktree ? { repo: spec.cwd, name: spec.worktree === true ? 'new' : spec.worktree } : null,
     modifiedAt: new Date(spec.startedAt).toISOString(),
@@ -17464,6 +18161,7 @@ async function loadDispatches() {
       worktree: r.worktree,
       group: r.group,
       parent: r.parent,
+      child: r.child,
       startedAt: r.startedAt,
     });
   }
@@ -17507,13 +18205,26 @@ function renderPlaceholderCard(session, depth, hostProject) {
             ${
               trustWaiting.has(session.id)
                 ? `<div class="session-waiting"><span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>trust this folder?</div>`
-                : `<div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.edit ? 'edit' : session.mode] || PLACEHOLDER_HINTS.new}</div>`
+                : `<div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.edit ? 'edit' : session.prompted ? 'prompted' : session.mode] || PLACEHOLDER_HINTS.new}</div>`
             }
           </button>
         `;
 }
 
 // After a reload the form is gone, but the PTY still runs; its hello options come back from the server.
+function specFromTerminal(t) {
+  return {
+    cwd: t.cwd,
+    name: t.name,
+    worktree: t.worktree,
+    mode: t.mode,
+    edit: t.edit,
+    forkOf: t.forkOf,
+    prompted: t.prompted,
+    startedAt: t.startedAt,
+  };
+}
+
 async function restorePendingSessions() {
   document.getElementById('new-session-btn').hidden = !terminalAvailable();
   const terminals = terminalAvailable() ? loadTerminals() : null;
@@ -17521,15 +18232,7 @@ async function restorePendingSessions() {
   try {
     for (const t of terminals ? await terminals : []) {
       if ((t.mode !== 'new' && t.mode !== 'pick') || newSpecs.has(t.id) || dispatchSpecs.has(t.id)) continue;
-      newSpecs.set(t.id, {
-        cwd: t.cwd,
-        name: t.name,
-        worktree: t.worktree,
-        mode: t.mode,
-        edit: t.edit,
-        forkOf: t.forkOf,
-        startedAt: t.startedAt,
-      });
+      newSpecs.set(t.id, specFromTerminal(t));
     }
   } catch (_) {}
   // Sessions that were already running keep the collapse state saved before the reload.
@@ -18134,10 +18837,12 @@ initSessionGroupsDnd();
 initSessionPicker();
 initProjectPicker();
 initShowCard();
+initDockRail();
 initAsk();
 for (const k of readStoredList(ACTIVITY_FILTER_KEY)) activityFilter.add(k);
 initSidebarResize();
 applyModalZoom();
+applyShowZoom();
 loadModalFullscreen();
 initModalResize();
 loadPanelWidths();
@@ -18429,6 +19134,7 @@ hub.onActive((active) => {
 });
 hub.onStatus(pushTerminalClaims);
 hub.onSettings(applyHubSettings);
+hub.handle('session.open', (p) => p.session && openSessionFromOutside(p.session));
 
 // session.changed goes out once the switch settles, so arrowing through the list sends one event.
 let publishTimer = 0;