claude-code-kanban 7.20.0 → 7.22.0

package/public/app.js

@@ -1939,6 +1939,8 @@ const ICON_AGENT_ACTIVE =
 const ICON_TERMINAL =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>';
 const TERMINAL_TITLE = 'Running in a terminal here';
+const ICON_FORK =
+  '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>';
 const ICON_DISPATCHED =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>';
 const ICON_CHAT =
@@ -2767,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
@@ -2806,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 };
@@ -3955,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));
@@ -3982,16 +4017,15 @@ function renderSessions() {
     return out;
   };
 
-  const renderSessionCard = (session) => {
-    if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id));
+  const renderSessionCard = (session, hostProject = null) => {
+    if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id), hostProject);
     const total = session.taskCount;
     const pct = (n) => Math.round((n / total) * 100);
     const isActive = session.id === currentSessionId && viewMode === 'session';
     const isLive = isSessionLive(session);
     const sessionName = sessionDisplayName(session);
-    const projectHtml = renderProjectIdentity(session);
+    const projectHtml = renderProjectIdentity(session, hostProject);
 
-    const gitBranch = session.gitBranch ? escapeHtml(session.gitBranch) : null;
     const isTeam = session.isTeam;
     const memberCount = session.memberCount || 0;
 
@@ -4025,8 +4059,7 @@ function renderSessions() {
           <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}${childDepthClass(childDepth.get(session.id))}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${sid}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(sessionName)}</div>
-            ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
-            ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
+            ${renderSessionIdentity(projectHtml, session.gitBranch)}
             ${metricsHtml ? `<div class="session-metrics">${metricsHtml}</div>` : ''}
             <div class="session-footer">
               <div class="session-time">${formatDate(session.modifiedAt)}</div>
@@ -4042,6 +4075,7 @@ function renderSessions() {
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escAttrJs(session.planSourceSessionId)}')">${ICON_PLAN}</span>` : ''}
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
                 ${session.dispatched ? `<span class="dispatched-badge"${session.dispatched.parent ? ` onclick="event.stopPropagation(); revealSession('${escAttrJs(session.dispatched.parent)}')"` : ''} title="${escapeHtml(dispatchedTitle(session.dispatched))}">${ICON_DISPATCHED}</span>` : ''}
+                ${session.forkedFromSessionId ? `<span class="fork-badge" onclick="event.stopPropagation(); revealSession('${escAttrJs(session.forkedFromSessionId)}')" title="Forked from ${escapeHtml(session.forkedFromSessionId)}, click to reveal">${ICON_FORK}</span>` : ''}
                 ${runningTerminals.has(session.id) ? `<span class="terminal-badge" onclick="event.stopPropagation(); showSessionTerminal('${escAttrJs(session.id)}')" title="${TERMINAL_TITLE}">${ICON_TERMINAL}</span>` : ''}
                 ${isWaitingSession(session) ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
                 ${session.hasRunningAgents && !isWaitingSession(session) ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
@@ -4072,7 +4106,7 @@ function renderSessions() {
         SECTION_OUTSIDE,
         `Outside current filters ${countHtml(outside.rows)}`,
         false,
-        collapsedProjectGroups.has(SECTION_OUTSIDE) ? '' : outside.rows.map(renderSessionCard).join(''),
+        collapsedProjectGroups.has(SECTION_OUTSIDE) ? '' : outside.rows.map((s) => renderSessionCard(s)).join(''),
       )
     : '';
 
@@ -4131,13 +4165,18 @@ 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);
-  const renderGroupSessions = (list, pinKey) => {
-    if (!groupPinned || pinnedSessionIds.size === 0) return nestChildren(list).map(renderSessionCard).join('');
+  const renderGroupSessions = (list, pinKey, hostProject = null) => {
+    const card = (s) => renderSessionCard(s, hostProject);
+    if (!groupPinned || pinnedSessionIds.size === 0) return nestChildren(list).map(card).join('');
     const gPinned = nestChildren(list.filter(isInPinnedGroup));
-    if (gPinned.length === 0) return nestChildren(list).map(renderSessionCard).join('');
+    if (gPinned.length === 0) return nestChildren(list).map(card).join('');
     const gUnpinned = nestChildren(list.filter((s) => !isInPinnedGroup(s)));
     const pinCollapsed = collapsedProjectGroups.has(pinKey);
     return (
@@ -4157,10 +4196,10 @@ function renderSessions() {
       '<div class="pinned-sub-items' +
       (pinCollapsed ? ' collapsed' : '') +
       '">' +
-      gPinned.map(renderSessionCard).join('') +
+      gPinned.map(card).join('') +
       '</div>' +
       '</div>' +
-      gUnpinned.map(renderSessionCard).join('')
+      gUnpinned.map(card).join('')
     );
   };
 
@@ -4192,7 +4231,7 @@ function renderSessions() {
             </div>
             <div class="project-group-breadcrumb${nestedCls}" data-full-path="${escapedPath}" title="Click to copy path">${breadcrumbHtml}</div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}${nestedCls}" data-project-path="${escapedPath}">
-              ${renderGroupSessions(projectSessions, pinKey(projectPath))}
+              ${renderGroupSessions(projectSessions, pinKey(projectPath), projectPath)}
             </div>
           `;
   };
@@ -4250,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(renderSessionCard)
-        .join('');
+      body = nestedCards([...bucket].sort(byMemberOrder));
     } else {
       const loose = [];
       const byProject = new Map();
@@ -4310,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);
@@ -4361,7 +4401,7 @@ function renderSessions() {
             </div>
           `;
       } else {
-        projectsHtml += ungrouped.map(renderSessionCard).join('');
+        projectsHtml += nestedCards(ungrouped);
       }
     }
 
@@ -4371,8 +4411,7 @@ function renderSessions() {
     sessionsList.innerHTML = html + outsideHtml;
   } else {
     const sectioned = sessionGroups.length > 0;
-    const restHtml =
-      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).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;
   }
@@ -4444,7 +4483,7 @@ function renderSession() {
   const completed = currentTasks.filter((t) => t.status === 'completed').length;
   const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
 
-  progressPercent.textContent = `${percent}%`;
+  progressPercent.textContent = `${percent}% done`;
   progressBar.style.width = `${percent}%`;
   const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
@@ -4468,7 +4507,7 @@ function renderProjectView() {
   const completed = currentTasks.filter((t) => t.status === 'completed').length;
   const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
 
-  progressPercent.textContent = `${percent}%`;
+  progressPercent.textContent = `${percent}% done`;
   progressBar.style.width = `${percent}%`;
   const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
@@ -4987,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);
@@ -5011,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() {
@@ -5058,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;
@@ -5944,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
@@ -5961,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}__`];
 }
@@ -6512,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' },
@@ -6550,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' },
@@ -7765,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');
@@ -8121,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) {
@@ -8730,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.
@@ -9432,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;
@@ -9447,7 +9537,7 @@ async function openPreviewByPath(filePath, base, onUnsupported, sessionId = prev
   try {
     const r = await api('/api/preview', { query: { path: filePath, base: base || null } });
     if (!r.ok) {
-      showToast('Preview file unavailable', 'error');
+      showToast('Preview file unavailable', 'error', { label: 'Copy path', onClick: () => copyText(filePath, 'path') });
       return;
     }
     const data = await r.json();
@@ -9489,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) {
@@ -10290,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) {
@@ -10308,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);
       }
@@ -10371,6 +10493,8 @@ const CONTEXT_COLORS = {
   red: 'var(--danger)',
 };
 const COST_THRESHOLDS = { green: 0.5, yellow: 2, orange: 5 };
+// Status colors as small text measure 3.7–3.9:1 on light surfaces; bars and dots keep the pure color.
+const textTone = (color) => `color-mix(in srgb, ${color} 70%, var(--text-primary))`;
 const MODEL_THRESHOLDS = [
   { match: /sonnet/i, yellow: 120000, orange: 200000, red: 300000 },
   { match: /haiku/i, yellow: 100000, orange: 130000, red: 150000 },
@@ -10477,7 +10601,7 @@ function renderContextBar(session) {
             ${renderMarkers(ctx.markers)}
           </div>
           <div class="context-bar-labels">
-            <span style="color:${color}">${Math.round(ctx.pct)}% (${used})</span>
+            <span>ctx <span style="color:${textTone(color)}">${Math.round(ctx.pct)}% (${used})</span></span>
             <span>${Math.round(ctx.remaining)}% free</span>
           </div>
         </div>`;
@@ -10518,7 +10642,7 @@ function formatCacheLeft(expiresAt, expiredText) {
   if (left === 0) return { text: expiredText, color: 'var(--text-muted)' };
   const text = `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`;
   const color = left < 120 ? CONTEXT_COLORS.red : left < 300 ? CONTEXT_COLORS.orange : CONTEXT_COLORS.green;
-  return { text, color };
+  return { text, color: textTone(color) };
 }
 
 let cacheTimerInterval = null;
@@ -10587,7 +10711,7 @@ function renderContextDetail(session, { tokens = true } = {}) {
             </div>
           </div>
           <div class="detail-context-summary">
-            <span style="color:${color}">${Math.round(ctx.pct)}% used</span>
+            <span style="color:${textTone(color)}">${Math.round(ctx.pct)}% used</span>
             <span${ctx.compacts ? ` title="Auto-compact window · model window ${escapeHtml(formatTokens(ctx.modelSize / 1000))}"` : ''}>${formatTokens(ctx.usedTokens / 1000)} / ${formatTokens(ctx.size / 1000)}</span>
           </div>`
     : '';
@@ -10599,11 +10723,11 @@ function renderContextDetail(session, { tokens = true } = {}) {
           <div class="detail-context-stats">
             ${usageRows}
             ${totalRows}
-            ${ctx ? `<div class="stat-item"><span class="stat-label">Cost</span><span class="stat-value" style="color:${getCostColor(cost.total_cost_usd)}">${formatCost(cost.total_cost_usd)}</span></div>` : ''}
+            ${ctx ? `<div class="stat-item"><span class="stat-label">Cost</span><span class="stat-value" style="color:${textTone(getCostColor(cost.total_cost_usd))}">${formatCost(cost.total_cost_usd)}</span></div>` : ''}
             ${reply ? renderCacheTimer(reply) : ''}
             ${cost.total_duration_ms != null ? `<div class="stat-item"><span class="stat-label">Duration</span><span class="stat-value">${formatDuration(cost.total_duration_ms)}</span></div>` : ''}
             ${cost.total_api_duration_ms != null ? `<div class="stat-item"><span class="stat-label">API time</span><span class="stat-value">${formatDuration(cost.total_api_duration_ms)}</span></div>` : ''}
-            ${cost.total_lines_added != null ? `<div class="stat-item"><span class="stat-label">Lines</span><span class="stat-value"><span style="color:${CONTEXT_COLORS.green}">+${(cost.total_lines_added || 0).toLocaleString()}</span> / <span style="color:${CONTEXT_COLORS.red}">-${(cost.total_lines_removed || 0).toLocaleString()}</span></span></div>` : ''}
+            ${cost.total_lines_added != null ? `<div class="stat-item"><span class="stat-label">Lines</span><span class="stat-value"><span style="color:${textTone(CONTEXT_COLORS.green)}">+${(cost.total_lines_added || 0).toLocaleString()}</span> / <span style="color:${textTone(CONTEXT_COLORS.red)}">-${(cost.total_lines_removed || 0).toLocaleString()}</span></span></div>` : ''}
           </div>
         </div>`;
 }
@@ -10876,8 +11000,8 @@ function showWaitingDetail() {
   // With actions on screen the form/buttons are the content — tuck the raw
   // JSON behind a toggle, but keep what the user is approving visible: for a
   // permission ask surface the command (or description) as a one-line summary
+  let summaryHtml = '';
   if ((actionsHtml || footerHtml) && inputHtml) {
-    let summaryHtml = '';
     if (currentWaiting.kind === 'plan' && typeof params?.plan === 'string' && params.plan) {
       // A plan ask IS the plan — render it in full so it can be reviewed and
       // approved right here (follow mode included) instead of a JSON dump. The
@@ -10900,7 +11024,8 @@ function showWaitingDetail() {
   autoSizeModal(modal, body);
   setMsgDetailFollow(msgDetailFollowLatest);
   const overlay = document.getElementById('msg-detail-modal');
-  const meta = [formatDate(currentWaiting.timestamp), 'waiting'];
+  // The permission card's header already shows how long the ask has waited.
+  const meta = summaryHtml ? [] : [formatDate(currentWaiting.timestamp), 'waiting'];
   document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
   currentPinDetailId = null;
   updateMsgDetailPinState();
@@ -10930,17 +11055,34 @@ function pathBasename(p) {
 
 // `session.worktree` is resolved server-side from the `.git` pointer file, so it holds for a
 // worktree parked beside its repo as well as one under <repo>/.claude/worktrees/.
-function renderProjectIdentity(session) {
+// Under its own project group the card leaves the repo name out: the group header shows it.
+function renderProjectIdentity(session, hostProject) {
   if (!session.project) return null;
+  const underHost = !!hostProject && sessionProjectKey(session) === hostProject;
   const wt = session.worktree;
-  if (!wt) return escapeHtml(pathBasename(session.project));
+  if (!wt) {
+    return underHost ? null : `<span class="session-project">${escapeHtml(pathBasename(session.project))}</span>`;
+  }
   const repo = pathBasename(wt.repo);
   // Worktrees beside the repo are conventionally named `<repo>-<branch>`, and repeating the
   // repo inside a chip that already sits next to it wastes the whole width of the card.
   const name = wt.name.startsWith(repo) ? wt.name.slice(repo.length).replace(/^[-._]/, '') || wt.name : wt.name;
-  return `${escapeHtml(repo)}<span class="wt-chip" title="Worktree of ${escapeHtml(wt.repo)}">⑂ ${escapeHtml(name)}</span>`;
+  const chip = `<span class="wt-chip" title="Worktree of ${escapeHtml(wt.repo)}">⑂ ${escapeHtml(name)}</span>`;
+  return underHost ? chip : `<span class="session-project">${escapeHtml(repo)}</span>${chip}`;
+}
+
+function renderSessionIdentity(projectHtml, gitBranch) {
+  if (!projectHtml && !gitBranch) return '';
+  const branch = gitBranch
+    ? `<span class="session-branch" title="${escapeHtml(gitBranch)}">${escapeHtml(gitBranch)}</span>`
+    : '';
+  const sep = projectHtml && branch ? '<span class="agent-ident-sep">·</span>' : '';
+  return `<div class="session-secondary">${projectHtml || ''}${sep}${branch}</div>`;
 }
 
+const SHORT_DATE = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
+const SHORT_DATE_YEAR = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+
 function formatDate(dateStr) {
   const date = new Date(dateStr);
   const now = new Date();
@@ -10949,7 +11091,8 @@ function formatDate(dateStr) {
   if (diff < JUST_NOW_MS) return 'just now';
   if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
   if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  return date.toLocaleDateString();
+  if (diff < 7 * 86400000) return `${Math.floor(diff / 86400000)}d ago`;
+  return (date.getFullYear() === now.getFullYear() ? SHORT_DATE : SHORT_DATE_YEAR).format(date);
 }
 
 // Terminal output reaches the transcript raw. A CSI-only pattern left OSC
@@ -11275,8 +11418,9 @@ function loadMermaid() {
 }
 
 let mermaidQueue = Promise.resolve();
+let mermaidSeq = 0;
 
-// mermaid.run is async, and two runs that overlap draw diagrams over each other.
+// mermaid.render is async, and two renders that overlap draw diagrams over each other.
 function queueMermaid(work) {
   mermaidQueue = mermaidQueue.then(work).catch((err) => console.warn(err.message));
 }
@@ -11303,10 +11447,15 @@ function initMermaidBlocks(container) {
     return;
   }
   queueMermaid(async () => {
-    // One block per run, so a bad diagram shows its own error and the others still render.
+    // One block per render, so a bad diagram shows its own error and the others still render.
+    // render, not run: run measures labels in place, and under a modal's CSS zoom the measured
+    // widths are off, so node boxes clip their text.
     for (const b of stampPending()) {
       try {
-        await mermaid.run({ nodes: [b] });
+        const { svg, bindFunctions } = await mermaid.render(`mermaid-${++mermaidSeq}`, b.textContent.trim());
+        b.innerHTML = svg;
+        b.setAttribute('data-processed', 'true');
+        bindFunctions?.(b);
       } catch (err) {
         showMermaidError(b, err);
       }
@@ -11621,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));
@@ -12363,8 +12511,8 @@ function updateDismissBtnState() {
   const btn = document.getElementById('session-info-dismiss-btn');
   if (!btn || !_infoModalSessionId) return;
   const isDismissed = dismissedSessionIds.has(_infoModalSessionId);
-  btn.textContent = isDismissed ? 'Restore' : 'Dismiss';
-  btn.title = isDismissed ? 'Restore — show in active list again' : 'Dismiss — hide from active list';
+  btn.textContent = isDismissed ? 'Show session' : 'Hide session';
+  btn.title = isDismissed ? 'Show in the active list again' : 'Hide from the active list';
 }
 
 let _planSessionId = null;
@@ -13351,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.
@@ -13361,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.
@@ -13383,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;
 }
 
@@ -13400,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);
@@ -13425,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;
 }
 
@@ -13520,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) {
@@ -13538,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.
@@ -13846,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.
@@ -13877,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;
@@ -13926,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;
@@ -14336,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');
@@ -14549,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'),
   );
@@ -14560,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();
@@ -14591,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,
@@ -15237,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;
@@ -15280,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();
@@ -15297,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.
@@ -15625,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() {
@@ -15638,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);
@@ -15989,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('');
@@ -16472,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();
       });
@@ -16602,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'";
@@ -16655,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
@@ -16668,6 +16884,7 @@ const showState = {
   closed: false,
   expanded: false,
   collapsed: false,
+  docked: false,
   marked: new Set(),
   rendered: null,
   frame: null,
@@ -16681,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');
@@ -16713,7 +16949,7 @@ 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' };
 
 // The body keeps focus, because a render replaces an HTML card's frame.
 function showCardKey(e) {
@@ -16723,10 +16959,12 @@ 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 = showState.expanded && !showState.docked ? 'expand' : 'collapse';
+  else if (cmd === 'expand' && showState.docked) cmd = null;
   if (cmd) {
     showCommand(cmd);
-    if (cmd === 'expand') focusShowBody();
+    if (cmd === 'expand' || cmd === 'dock') focusShowBody();
     else focusTerminalPane();
     return true;
   }
@@ -16761,10 +16999,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
@@ -16872,16 +17116,29 @@ 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, expanded, docked } = showState;
+  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 = docked
+    ? ''
+    : btn(
+        'expand',
+        expanded ? 'restore' : 'expand',
+        expanded ? 'Back to the card · Alt+Enter or Esc' : 'Fill the terminal · Alt+Enter',
+      );
   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() {
@@ -16904,6 +17161,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;
@@ -16915,12 +17176,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', showState.expanded && !showState.collapsed && !showState.docked);
   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();
@@ -16958,10 +17220,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));
@@ -16971,7 +17233,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);
@@ -17058,9 +17320,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>`;
   }
@@ -17163,11 +17425,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;
@@ -17185,16 +17447,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);
@@ -17203,7 +17465,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 +
@@ -17213,6 +17475,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 expandTitle = dockExpanded ? 'Back to the dock · Alt+Enter or Esc' : 'Fill the terminal · Alt+Enter';
+    if (expand.title !== expandTitle) {
+      expand.innerHTML = showIcon(dockExpanded ? 'restore' : 'expand');
+      expand.title = expandTitle;
+      expand.setAttribute('aria-label', expandTitle);
+    }
+    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' : '');
+  renderDockAddon(dockActivePane());
+}
+
+// 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;
@@ -17246,7 +17962,10 @@ function showCommand(cmd) {
     showState.idx = i;
     showState.collapsed = false;
   } else if (cmd === 'collapse') showState.collapsed = !showState.collapsed;
-  else if (cmd === 'expand') {
+  else if (cmd === 'dock') {
+    showState.docked = !showState.docked;
+    showState.collapsed = false;
+  } else if (cmd === 'expand') {
     showState.expanded = !showState.expanded;
     showState.collapsed = false;
   } else if (cmd === 'close') showState.closed = true;
@@ -17332,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);
@@ -17371,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',
 };
 
@@ -17385,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(),
@@ -17435,6 +18161,7 @@ async function loadDispatches() {
       worktree: r.worktree,
       group: r.group,
       parent: r.parent,
+      child: r.child,
       startedAt: r.startedAt,
     });
   }
@@ -17468,23 +18195,36 @@ function forgetPlaceholder(id) {
   return true;
 }
 
-function renderPlaceholderCard(session, depth) {
+function renderPlaceholderCard(session, depth, hostProject) {
   const isActive = session.id === currentSessionId && viewMode === 'session';
-  const projectHtml = renderProjectIdentity(session);
+  const projectHtml = renderProjectIdentity(session, hostProject);
   return `
           <button onclick="openSession('${escAttrJs(session.id)}')" data-session-id="${escapeHtml(session.id)}" class="session-item session-placeholder ${isActive ? 'active' : ''}${childDepthClass(depth)}" title="${escapeHtml(`${session.id} | ${session.project}`)}">
             <div class="session-name">${escapeHtml(session.name)}</div>
-            ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
+            ${renderSessionIdentity(projectHtml, null)}
             ${
               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;
@@ -17492,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.
@@ -18105,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();
@@ -18187,7 +18921,13 @@ function makeLimitCell(label, bucket) {
 function makeLimitSpan(rl) {
   const span = document.createElement('span');
   span.className = 'footer-limits';
-  span.append(makeLimitCell('5h', rl?.five_hour), document.createTextNode(' · '), makeLimitCell('7d', rl?.seven_day));
+  span.title = 'Plan usage: 5-hour and 7-day limits, used % (time until reset)';
+  span.append(
+    'Usage ',
+    makeLimitCell('5h', rl?.five_hour),
+    document.createTextNode(' · '),
+    makeLimitCell('7d', rl?.seven_day),
+  );
   return span;
 }
 function renderSidebarFooter(rateLimits) {
@@ -18394,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;