claude-code-kanban 7.1.2 → 7.3.0

package/public/app.js

@@ -1932,6 +1932,7 @@ function showPinnedMsgDetail(pinIdx) {
   const pinBtn = document.getElementById('msg-detail-pin-btn');
   if (pinBtn) pinBtn.classList.add('active');
   document.getElementById('msg-detail-modal').classList.add('visible');
+  mountReplyReview(pin, body, pinModal);
 }
 
 function updateMsgDetailPinState() {
@@ -2102,6 +2103,7 @@ function _renderPinToDetail(pin) {
 }
 
 const SESSION_PIN_SVG = PIN_SVG.replace('width="14" height="14"', 'width="12" height="12"');
+const BOOKMARK_SVG = PIN_SVG.replace('width="14" height="14"', 'width="10" height="10"');
 const SESSION_STAR_SVG =
   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>';
 const LINK_SVG_PATHS =
@@ -2311,11 +2313,31 @@ function mountReplyReview(m, body, modal) {
     contentEl: body,
     panelEl: document.getElementById('msg-review-panel'),
     hostEl: modal,
-    source: { kind: 'reply', id: m.timestamp, label: `your reply at ${new Date(m.timestamp).toLocaleTimeString()}` },
+    source: {
+      kind: 'reply',
+      id: m.timestamp,
+      label: replyReviewLabel(m.timestamp),
+      locate: replyLocateHint(m.timestamp),
+    },
     onComment: () => setMsgDetailFollow(false),
   });
 }
 
+function replyReviewLabel(timestamp) {
+  const d = new Date(timestamp);
+  const day =
+    d.toDateString() === new Date().toDateString()
+      ? ''
+      : ` on ${d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`;
+  return `your reply${day} at ${d.toLocaleTimeString()}`;
+}
+
+function replyLocateHint(timestamp) {
+  const transcript = sessions.find((s) => s.id === currentSessionId)?.jsonlPath;
+  if (!transcript) return undefined;
+  return `If that reply is not in your context, it is in ${transcript}, the assistant entry with timestamp ${timestamp}.`;
+}
+
 function closeMsgDetailModal() {
   unmountMsgReview();
   hideModalOverlay('msg-detail-modal');
@@ -2472,8 +2494,13 @@ function clampModalZoom(v) {
   return Math.min(MODAL_ZOOM_MAX, Math.max(MODAL_ZOOM_MIN, v));
 }
 
+function modalZoomLabel() {
+  return `${Math.round(modalZoom * 100)}%`;
+}
+
 function applyModalZoom() {
   document.documentElement.style.setProperty('--modal-zoom', String(modalZoom));
+  for (const el of document.querySelectorAll('.pane-zoom-val')) el.textContent = modalZoomLabel();
 }
 
 // delta 0 resets to 100%
@@ -2483,7 +2510,7 @@ function adjustModalZoom(delta) {
   modalZoom = next;
   store.setItem(MODAL_ZOOM_KEY, String(modalZoom));
   applyModalZoom();
-  showToast(`Text ${Math.round(modalZoom * 100)}%`);
+  showToast(`Text ${modalZoomLabel()}`);
 }
 
 // The markup decides what scales: `.modal-zoomable` marks a modal's reading
@@ -3131,10 +3158,6 @@ function renderAgentFooter() {
   footer.classList.add('visible');
   label.textContent = `Agents Log (${visible.length})`;
 
-  const collapsed = store.getItem('agentFooterCollapsed') === 'true';
-  footer.classList.toggle('collapsed', collapsed);
-  document.getElementById('agent-footer-toggle').innerHTML = collapsed ? '&#x25B4;' : '&#x25BE;';
-
   const permHtml = permFresh
     ? `<button type="button" class="permission-badge" onclick="showWaitingDetail()">${currentWaiting.kind === 'question' ? '❓ Question pending' : currentWaiting.kind === 'plan' ? '📋 Plan pending' : `⏳ Awaiting: ${escapeHtml(currentWaiting.toolName || 'unknown')}`}</button>`
     : '';
@@ -3206,9 +3229,24 @@ function renderAgentFooter() {
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleAgentFooter() {
   const footer = document.getElementById('agent-footer');
-  const collapsed = !footer.classList.contains('collapsed');
-  footer.classList.toggle('collapsed', collapsed);
-  store.setItem('agentFooterCollapsed', collapsed);
+  store.setItem(agentFooterCollapseKey(), !footer.classList.contains('collapsed'));
+  applyAgentFooterCollapsed();
+}
+
+function boardInSplit() {
+  const board = document.getElementById('board-side');
+  return board.classList.contains('side-l') || board.classList.contains('side-r');
+}
+
+// With the board in a split, the agents log keeps its own collapse preference and starts collapsed.
+function agentFooterCollapseKey() {
+  return boardInSplit() ? 'agentFooterCollapsedSplit' : 'agentFooterCollapsed';
+}
+
+function applyAgentFooterCollapsed() {
+  const saved = store.getItem(agentFooterCollapseKey());
+  const collapsed = saved === null ? boardInSplit() : saved === 'true';
+  document.getElementById('agent-footer').classList.toggle('collapsed', collapsed);
   document.getElementById('agent-footer-toggle').innerHTML = collapsed ? '&#x25B4;' : '&#x25BE;';
 }
 
@@ -3649,7 +3687,7 @@ function renderSessions() {
                 ${renderWorkflowBadge(session)}
                 ${renderLoopBadge(session)}
                 ${hasScratchpad ? `<span class="scratchpad-badge${padEmoji ? ' has-emoji' : ''}" onclick="event.stopPropagation(); openSessionScratchpad('${sid}')" title="Open scratchpad">${padEmoji ? escapeHtml(padEmoji) : `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`}</span>` : ''}
-                ${bookmarksCount > 0 ? `<span class="bookmarks-badge" onclick="event.stopPropagation(); openSessionWithBookmarks('${sid}')" title="${bookmarksCount} bookmarked message${bookmarksCount > 1 ? 's' : ''}"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>${bookmarksCount}</span>` : ''}
+                ${bookmarksCount > 0 ? `<span class="bookmarks-badge" onclick="event.stopPropagation(); openSessionWithBookmarks('${sid}')" title="${bookmarksCount} bookmarked message${bookmarksCount > 1 ? 's' : ''}">${BOOKMARK_SVG}${bookmarksCount}</span>` : ''}
                 ${linkedDocsCount > 0 ? `<span class="linked-docs-badge" onclick="event.stopPropagation(); showSessionInfoModal('${sid}')" title="${linkedDocsCount} linked document${linkedDocsCount > 1 ? 's' : ''}">${linkSvg(10)}${linkedDocsCount}</span>` : ''}
                 ${session.hasPlan && !session.planSourceSessionId ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${sid}')" title="View plan">${ICON_PLAN}</span>` : ''}
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escAttrJs(session.planSourceSessionId)}')">${ICON_PLAN}</span>` : ''}
@@ -3674,6 +3712,7 @@ function renderSessions() {
         ${renderScratchpadRow(zenSession)}
         ${renderLinkedDocsHtml(zenSession.id)}
         ${renderArtifactsHtml(zenSession.id)}
+        ${renderZenBookmarksHtml(zenSession.id)}
       </div>
       ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}`;
     bindLinkedDocsHandlers(sessionsList.querySelector('.linked-docs-section'), zenSession.id);
@@ -5387,6 +5426,8 @@ function setFocusZone(zone, target) {
 
   focusZone = zone;
   if (zone === 'sidebar') {
+    const active = document.activeElement;
+    if (active && document.getElementById('main-content').contains(active)) active.blur();
     expandSidebar();
     const items = getNavigableItems();
     if (items.length > 0) {
@@ -5418,6 +5459,7 @@ function setFocusZone(zone, target) {
       if (card) card.classList.add('selected');
     } else {
       navigateVertical(1);
+      if (!selectedTaskId) document.querySelector('.column-add')?.focus();
     }
     if (selectedTaskId && detailPanel.classList.contains('visible')) {
       showTaskDetail(selectedTaskId, selectedSessionId);
@@ -5834,7 +5876,11 @@ const SHORTCUT_TABS = [
         title: 'View',
         rows: [
           { keys: ['\\'], label: 'Toggle sidebar' },
-          { keys: ['[', ']'], label: 'Previous / next tab (Board and panes)' },
+          { keys: ['[', ']'], label: 'Previous / next tab (a split counts as one)' },
+          { keys: ['Alt', '[ / ]'], combo: true, label: 'Change the tab in the focused side of a split' },
+          { keys: ['|'], label: 'Split with the tab before it / unsplit (or drag a tab onto a side)' },
+          { keys: ['{', '}'], label: 'Focus left / right side of a split' },
+          { keys: ['Alt', 'W'], combo: true, label: 'Close the focused tab' },
           { keys: ['T'], label: 'Toggle theme' },
           { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
           { keys: ['Ctrl', 'Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
@@ -5876,9 +5922,9 @@ const SHORTCUT_TABS = [
       {
         title: 'Sessions',
         rows: [
-          { keys: ['Ctrl', 'Alt', 'N'], combo: true, label: 'New session' },
-          { keys: ['Ctrl', 'Alt', 'R'], combo: true, label: 'Resume session (claude -r)' },
-          { keys: ['Ctrl', 'Alt', 'S'], combo: true, label: 'Swap to previous session' },
+          { keys: ['Ctrl', 'Alt', 'N'], combo: true, hubMod: true, label: 'New session' },
+          { keys: ['Ctrl', 'Alt', 'R'], combo: true, hubMod: true, label: 'Resume session (claude -r)' },
+          { keys: ['Ctrl', 'Alt', 'S'], combo: true, hubMod: true, label: 'Swap to previous session' },
         ],
       },
     ],
@@ -5908,17 +5954,57 @@ const SHORTCUT_TABS = [
           { keys: ['M'], label: 'Jump to marketplace' },
           { keys: ['$'], label: 'Jump to cost' },
           { keys: ['Ctrl', 'M'], combo: true, label: 'Jump to memory' },
-          { keys: ['Ctrl', 'Alt', '←/→'], combo: true, label: 'Previous / next hub app' },
-          { keys: ['Alt', '1…9'], combo: true, label: 'Jump to hub app by number' },
-          { keys: ['Ctrl', 'Alt', 'P'], combo: true, label: 'Project picker' },
-          { keys: ['Ctrl', 'Alt', 'W'], combo: true, label: 'Config dir picker' },
-          { keys: ['Ctrl', 'Alt', 'A'], combo: true, label: 'App launcher' },
+          {
+            keys: ['Ctrl', 'Alt', '←/→'],
+            action: ['hub.prevApp', 'hub.nextApp'],
+            combo: true,
+            hubMod: true,
+            label: 'Previous / next hub app',
+          },
+          {
+            keys: ['Alt', '1…9'],
+            action: 'hub.appByNumber',
+            combo: true,
+            hubMod: true,
+            label: 'Jump to hub app by number',
+          },
+          {
+            keys: ['Ctrl', 'Alt', 'P'],
+            action: 'hub.projectPicker',
+            combo: true,
+            hubMod: true,
+            label: 'Project picker',
+          },
+          {
+            keys: ['Ctrl', 'Alt', 'W'],
+            action: 'hub.configDirPicker',
+            combo: true,
+            hubMod: true,
+            label: 'Config dir picker',
+          },
+          { keys: ['Ctrl', 'Alt', 'A'], action: 'hub.appLauncher', combo: true, hubMod: true, label: 'App launcher' },
         ],
       },
     ],
   },
 ];
 
+// macOS names Control, Option and Shift by their symbols.
+const IS_MAC = /^Mac/i.test(navigator.userAgentData?.platform || navigator.platform || '');
+const MAC_KEYS = { Ctrl: '⌃', Alt: '⌥', Shift: '⇧' };
+if (IS_MAC) document.getElementById('new-session-btn')?.setAttribute('title', 'New session (⌃⌥N)');
+
+// The keys of a help row as they read on this system. The hub's modifier is Ctrl+Alt, and on
+// macOS Control+Option for the tab numbers too (Windows and Linux use bare Alt for those). A hub
+// row shows the keys the hub reports, which the user can change; row.keys until it answers.
+function helpKeys(row, mac = IS_MAC, keyLabel = hub.keyLabel) {
+  const live = row.action && keyLabel(row.action);
+  if (live) return live;
+  if (!mac) return row.keys;
+  if (row.hubMod) return ['⌃', '⌥', ...row.keys.filter((k) => k !== 'Ctrl' && k !== 'Alt')];
+  return row.keys.map((k) => MAC_KEYS[k] || k);
+}
+
 // Interleaves each pair's rows left-then-right so CSS grid auto-placement lands
 // them on shared row tracks (see .shortcuts in style.css).
 function buildHelpShortcuts(groups) {
@@ -5934,9 +6020,10 @@ function buildHelpShortcuts(groups) {
     for (let i = 0; i < Math.max(...sides.map(([g]) => g.rows.length)); i++) {
       for (const [group, side] of sides) {
         const row = group.rows[i];
-        if (!row) continue;
+        const parts = row && helpKeys(row);
+        if (!parts?.length) continue;
         const sep = row.combo ? '<span class="sc-plus">+</span>' : '<span class="sc-or">/</span>';
-        const keys = row.keys.map((k) => `<kbd>${escapeHtml(k)}</kbd>`).join(sep);
+        const keys = parts.map((k) => `<kbd>${escapeHtml(k)}</kbd>`).join(sep);
         const label = escapeHtml(row.label);
         cells.push(`<dt class="${escapeHtml(side)}">${keys}</dt><dd class="${escapeHtml(side)}">${label}</dd>`);
       }
@@ -5955,7 +6042,10 @@ const helpTabs = () => SHORTCUT_TABS.filter((t) => hub.inHub || !t.hub);
 function filteredShortcutGroups(query) {
   return helpTabs()
     .flatMap((t) => t.groups)
-    .map((g) => ({ title: g.title, rows: g.rows.filter((r) => fuzzyMatch(`${r.label} ${r.keys.join(' ')}`, query)) }))
+    .map((g) => ({
+      title: g.title,
+      rows: g.rows.filter((r) => fuzzyMatch(`${r.label} ${helpKeys(r).join(' ')}`, query)),
+    }))
     .filter((g) => g.rows.length);
 }
 
@@ -7005,7 +7095,25 @@ document.addEventListener('keydown', (e) => {
     toggleSidebar();
     return;
   }
-  if (matchKey(e, '[', ']') && cyclePane(e.key === ']' ? 1 : -1)) {
+  if (matchKey(e, '[', ']') && cyclePaneStrip(e.key === ']' ? 1 : -1)) {
+    e.preventDefault();
+    return;
+  }
+  const altOnly = e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+  if (altOnly && (e.code === 'BracketLeft' || e.code === 'BracketRight')) {
+    if (cyclePane(e.code === 'BracketRight' ? 1 : -1)) e.preventDefault();
+    return;
+  }
+  if (altOnly && e.code === 'KeyW' && closeFocusedPane()) {
+    e.preventDefault();
+    return;
+  }
+  const plainShift = !e.ctrlKey && !e.altKey && !e.metaKey;
+  if (plainShift && e.key === '|' && togglePaneSplit()) {
+    e.preventDefault();
+    return;
+  }
+  if (plainShift && (e.key === '{' || e.key === '}') && focusPaneSide(e.key === '{' ? 'l' : 'r')) {
     e.preventDefault();
     return;
   }
@@ -7062,10 +7170,7 @@ document.addEventListener('keydown', (e) => {
       else leaveTerminalPane();
       return;
     }
-    if (focusZone === 'sidebar') {
-      const hasCards = document.querySelector('.task-card');
-      if (!hasCards) return;
-    }
+    if (focusZone === 'sidebar' && !document.querySelector('.task-card, .column-add')) return;
     setFocusZone(focusZone === 'board' ? 'sidebar' : 'board');
     return;
   }
@@ -7102,12 +7207,6 @@ document.addEventListener('keydown', (e) => {
       e.preventDefault();
       return;
     }
-    if (e.key === 'Escape') {
-      // Plain unfocus — drop the keyboard cursor without jumping into the board
-      clearKbSelection();
-      focusZone = 'board';
-      return;
-    }
   }
 
   // Board navigation
@@ -7156,7 +7255,11 @@ document.addEventListener('keydown', (e) => {
     if (detailPanel.classList.contains('visible')) closeDetailPanel();
     else if (agentLogMode) exitAgentLogMode();
     else if (messagePanelOpen) toggleMessagePanel();
-    else {
+    else if (focusZone === 'sidebar') {
+      // Plain unfocus — drop the keyboard cursor without jumping into the board
+      clearKbSelection();
+      focusZone = 'board';
+    } else {
       // Nothing open — plain unfocus: drop the task-card selection highlight
       clearTaskSelection();
       selectedTaskId = null;
@@ -7576,9 +7679,10 @@ function reviewBridge(textBefore, headingBefore, rangeAt, comboOf, fieldSelector
     const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta']
       .filter(Boolean)
       .join('+');
-    return [e.code && `${mods}|c:${e.code}`, typeof e.key === 'string' && `${mods}|k:${e.key.toLowerCase()}`].filter(
-      Boolean,
-    );
+    return [
+      e.code && !e.getModifierState?.('AltGraph') && `${mods}|c:${e.code}`,
+      typeof e.key === 'string' && `${mods}|k:${e.key.toLowerCase()}`,
+    ].filter(Boolean);
   };
   let claims = new Set();
   let forward = new Set();
@@ -7588,6 +7692,11 @@ function reviewBridge(textBefore, headingBefore, rangeAt, comboOf, fieldSelector
     e.preventDefault();
     send({ type: 'key', key: e.key, code: e.code, ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey, meta: e.metaKey });
   });
+  let scrollTimer = 0;
+  addEventListener('scroll', () => {
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(() => send({ type: 'scroll', x: scrollX, y: scrollY }), 150);
+  });
   addEventListener('message', (e) => {
     if (e.source !== parent || typeof e.data?.type !== 'string' || !e.data.type.startsWith(P)) return;
     const type = e.data.type.slice(P.length);
@@ -7624,6 +7733,7 @@ const REVIEW_BRIDGE_TAG = `<script>(${reviewBridge})(${reviewTextBefore}, ${revi
 // Frames from createPreviewFrame, which carry the bridge. A URL pane is another site and must
 // not drive the board.
 const bridgedFrames = new WeakSet();
+const paneFrameScroll = new WeakMap();
 
 function bridgedFrameEls() {
   return [...document.querySelectorAll('iframe[srcdoc]')].filter((f) => bridgedFrames.has(f));
@@ -7641,6 +7751,15 @@ const ZOOM_CLAIMS = ['ctrlKey', 'metaKey'].flatMap((mod) =>
   ),
 );
 
+// The sidebar and tab keys, so they work while a previewed page has focus. Matched by key where
+// the board matches by key, so they follow the keyboard layout. A page that handles one first
+// keeps it, and text fields keep every key.
+const PANE_CLAIMS = [
+  ...['\\', '[', ']'].map((key) => ({ key, code: '' })),
+  ...['|', '{', '}'].map((key) => ({ shiftKey: true, key, code: '' })),
+  ...['BracketLeft', 'BracketRight', 'KeyW'].map((code) => ({ altKey: true, key: 'Unidentified', code })),
+];
+
 function sendBridgeClaims(frames, claims) {
   for (const f of frames) f.contentWindow?.postMessage({ type: `${REVIEW_MSG}claims`, ...claims }, '*');
 }
@@ -7648,10 +7767,11 @@ function sendBridgeClaims(frames, claims) {
 window.addEventListener('message', (e) => {
   const type =
     typeof e.data?.type === 'string' && e.data.type.startsWith(REVIEW_MSG) && e.data.type.slice(REVIEW_MSG.length);
-  if (type !== 'link' && type !== 'key') return;
+  if (type !== 'link' && type !== 'key' && type !== 'scroll') return;
   const frame = bridgedFrameEls().find((f) => f.contentWindow === e.source);
   if (!frame) return;
-  if (type === 'key') replayKey(e.data, frame);
+  if (type === 'scroll') paneFrameScroll.set(frame, { x: e.data.x, y: e.data.y });
+  else if (type === 'key') replayKey(e.data, frame);
   else {
     const url = linkUrl(e.data.href);
     if (url) hub.openExternal(url);
@@ -8507,6 +8627,54 @@ function renderArtifactsHtml(sessionId) {
   return `<div class="artifacts-section panel-section" data-artifacts-for="${escapeHtml(sessionId)}">${artifactsInnerHtml(sessionId)}</div>`;
 }
 
+const ZEN_BOOKMARKS_COLLAPSED = 3;
+const zenBookmarksExpanded = new Set();
+
+function zenBookmarkParts(p) {
+  if (p.type === 'tool_use') return { who: p.tool || 'Tool', text: p.description || p.detail || '' };
+  if (p.type === 'agent') return { who: p.agentType || 'Agent', text: stripTeammateWrapper(p.lastMessage || '') };
+  return { who: p.type === 'assistant' ? 'Claude' : 'You', text: p.text || '' };
+}
+
+// Zen shows the open session only, so its pins are currentPins and a row opens through
+// showPinnedMsgDetail by index.
+function renderZenBookmarksHtml(sessionId) {
+  if (sessionId !== currentSessionId || !currentPins.length) return '';
+  const { shown, moreHtml } = showAllToggle(
+    zenBookmarksExpanded,
+    sessionId,
+    currentPins,
+    ZEN_BOOKMARKS_COLLAPSED,
+    `onclick="toggleZenBookmarks('${escAttrJs(sessionId)}')"`,
+  );
+  const items = shown
+    .map((p, i) => {
+      const { who, text } = zenBookmarkParts(p);
+      const label = truncateAtWord(cleanMessageText(text), 200);
+      return `<li class="zen-bookmark-item">
+        <span class="zen-bookmark-who">${escapeHtml(who)}</span>
+        <button type="button" class="zen-bookmark-link" onclick="showPinnedMsgDetail(${i})" title="${escapeHtml(label)}">${escapeHtml(label || '(empty)')}</button>
+        <span class="scratch-file-time">${formatDate(p.timestamp)}</span>
+      </li>`;
+    })
+    .join('');
+  return `<div class="zen-bookmarks-section panel-section">
+    <div class="panel-section-header">
+      ${BOOKMARK_SVG}
+      <span>Bookmarks</span>
+      <span class="panel-section-count">${currentPins.length}</span>
+    </div>
+    <ul class="zen-bookmark-list">${items}</ul>${moreHtml}
+  </div>`;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleZenBookmarks(sessionId) {
+  toggleSetMember(zenBookmarksExpanded, sessionId);
+  const section = document.querySelector('.zen-bookmarks-section');
+  if (section) section.outerHTML = renderZenBookmarksHtml(sessionId);
+}
+
 // No TTL: the server holds the scan until the transcript grows, so a repeat costs one
 // stat, and an artifact published while the panel is open still appears.
 const artifactsSection = makeSectionLoader({
@@ -8954,6 +9122,10 @@ function setupEventSource() {
         applyPaneLayout(data.sessionId, data.layout);
       }
 
+      if (data.type === 'pane:file-changed') {
+        onPaneFileChanged(data.path);
+      }
+
       if (data.type === 'team-update') {
         const teamSession = sessions.find((s) => s.isTeam && s.teamName === data.teamName);
         if (teamSession) {
@@ -11916,14 +12088,31 @@ async function paneRequest(method, path, body) {
   }
 }
 
-// sessionStorage `cck.paneActive`: {[sessionId]: paneId} in recency order.
+// Per-session pane state in sessionStorage, {[sessionId]: value} in recency order.
+const PANE_STATE_CAP = 20;
+
+function loadPaneState(key) {
+  try {
+    const map = JSON.parse(sessionStorage.getItem(key));
+    if (map && typeof map === 'object') return map;
+  } catch {}
+  return {};
+}
+
+// Puts `sid` last, so the cap drops the least recent session. A null value removes it.
+function savePaneState(key, map, sid, value) {
+  delete map[sid];
+  if (value != null) map[sid] = value;
+  const capped = Object.fromEntries(Object.entries(map).slice(-PANE_STATE_CAP));
+  try {
+    sessionStorage.setItem(key, JSON.stringify(capped));
+  } catch {}
+  return capped;
+}
+
+// `cck.paneActive`: {[sessionId]: paneId}.
 const PANE_ACTIVE_KEY = 'cck.paneActive';
-const PANE_ACTIVE_CAP = 20;
-let paneActive = {};
-try {
-  const map = JSON.parse(sessionStorage.getItem(PANE_ACTIVE_KEY));
-  if (map && typeof map === 'object') paneActive = map;
-} catch {}
+let paneActive = loadPaneState(PANE_ACTIVE_KEY);
 
 function getActivePaneId(sid) {
   return paneActive[sid] || 'board';
@@ -11931,12 +12120,141 @@ function getActivePaneId(sid) {
 
 function setActivePaneId(sid, id) {
   if (getActivePaneId(sid) === id) return;
-  delete paneActive[sid];
-  if (id !== 'board') paneActive[sid] = id;
-  paneActive = Object.fromEntries(Object.entries(paneActive).slice(-PANE_ACTIVE_CAP));
-  try {
-    sessionStorage.setItem(PANE_ACTIVE_KEY, JSON.stringify(paneActive));
-  } catch {}
+  paneActive = savePaneState(PANE_ACTIVE_KEY, paneActive, sid, id === 'board' ? null : id);
+  notePairFocus(sid, id);
+}
+
+// `cck.panePairs`: {[sessionId]: [{l, r, f}]}; sides are pane ids or 'board', `f` the side focused
+// last. A tab is in one pair at most, and the pair that holds the active tab is the split on
+// screen. Clicks never change a pair; only the split keys and drags do.
+const PANE_PAIRS_KEY = 'cck.panePairs';
+const PANE_SPLIT_RATIO_KEY = 'pane-split-ratio';
+let panePairs = loadPaneState(PANE_PAIRS_KEY);
+const clampSplitRatio = (r) => Math.min(0.85, Math.max(0.15, r));
+let paneSplitRatio = clampSplitRatio(Number.parseFloat(store.getItem(PANE_SPLIT_RATIO_KEY)) || 0.5);
+
+const paneTabIds = (sid) => ['board', ...paneLayout(sid).panes.map((p) => p.id)];
+const splitSideOf = (split, id) => (split.l === id ? 'l' : split.r === id ? 'r' : null);
+const otherSide = (side) => (side === 'l' ? 'r' : 'l');
+
+// Pairs whose tabs are gone, or taken by an earlier pair, drop out.
+function getPanePairs(sid) {
+  if (!panePairs[sid]) return [];
+  const ids = new Set(paneTabIds(sid));
+  const taken = new Set();
+  return panePairs[sid].filter((p) => {
+    const ok = p.l !== p.r && ids.has(p.l) && ids.has(p.r) && !taken.has(p.l) && !taken.has(p.r);
+    if (ok) taken.add(p.l).add(p.r);
+    return ok;
+  });
+}
+
+function setPanePairs(sid, pairs) {
+  panePairs = savePaneState(PANE_PAIRS_KEY, panePairs, sid, pairs.length ? pairs : null);
+}
+
+const withoutTabs = (pairs, ...ids) => pairs.filter((p) => !ids.some((id) => splitSideOf(p, id)));
+const pairOf = (sid, id) => getPanePairs(sid).find((p) => splitSideOf(p, id)) || null;
+
+function getPaneSplit(sid) {
+  return pairOf(sid, getActivePaneId(sid));
+}
+
+function notePairFocus(sid, id) {
+  const pairs = getPanePairs(sid);
+  const pair = pairs.find((p) => splitSideOf(p, id));
+  const side = pair && splitSideOf(pair, id);
+  if (!side || pair.f === side) return;
+  pair.f = side;
+  setPanePairs(sid, pairs);
+}
+
+// Tabs that are not in a pair, plus `id`.
+function freePaneTabs(sid, id, pairs) {
+  return paneTabIds(sid).filter((t) => t === id || !pairs.some((p) => splitSideOf(p, t)));
+}
+
+// The free tab before it, else the one after it.
+function neighborPair(sid, id, pairs) {
+  const free = freePaneTabs(sid, id, pairs);
+  const i = free.indexOf(id);
+  if (i < 0 || free.length < 2) return null;
+  return i > 0 ? { l: free[i - 1], r: id } : { l: id, r: free[1] };
+}
+
+// The strip in order, as {ids, pair}: a lone tab, or a pair at the place of its first tab.
+function paneStripItems(sid) {
+  const pairs = getPanePairs(sid);
+  const items = [];
+  for (const id of paneTabIds(sid)) {
+    const pair = pairs.find((p) => splitSideOf(p, id)) || null;
+    if (!pair) items.push({ ids: [id], pair });
+    else if (!items.some((it) => it.pair === pair)) items.push({ ids: [pair.l, pair.r], pair });
+  }
+  return items;
+}
+
+function unpairPanes(sid, pair, keep) {
+  setPanePairs(sid, withoutTabs(getPanePairs(sid), pair.l));
+  if (keep) setActivePaneId(sid, keep);
+  syncPanes();
+}
+
+// Returns false when the panes are not on screen, so the key keeps its other meaning.
+function togglePaneSplit() {
+  const sid = paneSessionId();
+  if (!sid || wantsTerminal()) return false;
+  const active = getActivePaneId(sid);
+  const split = getPaneSplit(sid);
+  if (split) {
+    unpairPanes(sid, split, active);
+    return true;
+  }
+  const pairs = getPanePairs(sid);
+  const pair = neighborPair(sid, active, pairs);
+  if (!pair) {
+    showToast(paneLayout(sid).panes.length ? 'No free tab to split with' : 'Add a pane to split the board with');
+    return true;
+  }
+  setPanePairs(sid, [...pairs, { ...pair, f: splitSideOf(pair, active) }]);
+  syncPanes();
+  return true;
+}
+
+function shownPaneSplit() {
+  const sid = paneSessionId();
+  return sid && !wantsTerminal() && getPaneSplit(sid);
+}
+
+function focusPaneSide(side) {
+  const sid = paneSessionId();
+  const split = shownPaneSplit();
+  if (!split) return false;
+  if (getActivePaneId(sid) !== split[side]) {
+    setActivePaneId(sid, split[side]);
+    syncPanes();
+  }
+  return true;
+}
+
+function dropPaneOnSide(id, side) {
+  const sid = paneSessionId();
+  if (!sid) return;
+  const split = getPaneSplit(sid);
+  const other = otherSide(side);
+  const pairs = getPanePairs(sid);
+  const shownId = getActivePaneId(sid);
+  let partner;
+  if (split) partner = split[other] === id ? split[side] : split[other];
+  else if (shownId !== id) partner = shownId;
+  else {
+    const pair = neighborPair(sid, id, pairs);
+    partner = pair && (pair.l === id ? pair.r : pair.l);
+  }
+  if (!partner) return;
+  setPanePairs(sid, [...withoutTabs(pairs, id, partner), { [side]: id, [other]: partner, f: side }]);
+  setActivePaneId(sid, id);
+  syncPanes();
 }
 
 const PANE_FRAME_LIMIT = 3;
@@ -11953,7 +12271,17 @@ const PANE_ICONS = {
 // and the limit spans sessions, so a session switch cannot pile up frames.
 const paneFrames = new Map();
 const paneReviews = new WeakMap();
+// Off-screen views whose file changed; they reload when shown.
+const stalePaneViews = new WeakSet();
+const paneReloads = new Map();
 const paneViews = document.getElementById('pane-views');
+const paneSplitBox = document.getElementById('pane-split');
+const paneDivider = document.getElementById('pane-divider');
+const paneDrop = document.getElementById('pane-drop');
+const paneSplitBtn = document.getElementById('pane-split-btn');
+const paneBoard = document.getElementById('board-side');
+const paneLog = document.getElementById('message-panel');
+const paneLogHome = { parent: paneLog.parentNode, next: paneLog.nextSibling };
 const paneTabs = document.getElementById('pane-tabs');
 const panePin = document.getElementById('pane-pin');
 const paneStrip = document.getElementById('pane-strip');
@@ -11962,6 +12290,8 @@ const panePopInput = document.getElementById('pane-pop-input');
 const panePopDocs = document.getElementById('pane-pop-docs');
 const panePopDetect = document.getElementById('pane-pop-detect');
 let paneTabsHtml = '';
+let paneDragId = null;
+applyAgentFooterCollapsed();
 
 function paneSessionId() {
   return viewMode === 'session' ? currentSessionId : null;
@@ -11980,42 +12310,99 @@ function syncPanes() {
   }
   const layout = sid ? paneLayout(sid) : null;
   const pane = sid ? activePane(sid) : null;
+  const split = sid ? getPaneSplit(sid) : null;
   sessionView.classList.toggle('has-panes', !!layout);
-  sessionView.classList.toggle('pane-mode', !!pane);
+  const boardSide = split ? splitSideOf(split, 'board') : null;
+  sessionView.classList.toggle('pane-mode', split ? !boardSide : !!pane);
+  sessionView.classList.toggle('split-mode', !!split);
   if (!layout || wantsTerminal()) closePanePop();
-  const key = pane ? mountPane(sid, pane) : null;
-  for (const el of paneViews.children) el.classList.toggle('on', el.dataset.key === key);
+  // key → side ('' unsplit). The focused side mounts last, so the frame limit evicts it last.
+  const sides = new Map();
+  if (split) {
+    const focusSide = splitSideOf(split, pane?.id || 'board');
+    for (const side of [otherSide(focusSide), focusSide]) {
+      if (side !== boardSide) sides.set(mountPane(sid, paneById(split[side])), side);
+    }
+    applySplitRatio();
+  } else if (pane) {
+    sides.set(mountPane(sid, pane), '');
+  }
+  const focusKey = pane ? `${sid}/${pane.id}` : null;
+  for (const el of paneViews.children) {
+    const side = sides.get(el.dataset.key);
+    el.classList.toggle('on', side !== undefined);
+    markPaneSide(el, side, el.dataset.key === focusKey);
+  }
+  const boardWasSplit = boardInSplit();
+  markPaneSide(paneBoard, boardSide, !!boardSide && !pane);
+  if (boardWasSplit !== !!boardSide) applyAgentFooterCollapsed();
+  placeSessionLog(wantsTerminal() ? null : boardSide);
   // Off screen, a framed page keeps focus and takes keys the user aims at the board.
   const focused = document.activeElement;
   if (paneViews.contains(focused) && (wantsTerminal() || !focused.closest('.pane-view.on'))) focused.blur();
   syncPaneReview();
   if (!layout) return;
   for (const b of document.querySelectorAll('.pane-tool')) b.disabled = !pane;
-  renderPaneTabs(sid, layout);
+  paneSplitBtn.disabled = !layout.panes.length;
+  paneSplitBtn.classList.toggle('on', !!split);
+  paneSplitBtn.setAttribute('aria-pressed', String(!!split));
+  paneSplitBtn.title = split ? 'Unsplit (|)' : 'Split with the tab before it (|)';
+  renderPaneTabs(sid, layout, split);
+}
+
+// With the board in a split, the session log docks in the board's side instead of the window.
+function placeSessionLog(boardSide) {
+  const parent = boardSide ? paneSplitBox : paneLogHome.parent;
+  if (paneLog.parentNode !== parent) {
+    const content = document.getElementById('message-panel-content');
+    const top = content.scrollTop;
+    parent.insertBefore(paneLog, boardSide ? null : paneLogHome.next);
+    content.scrollTop = top;
+  }
+  paneLog.classList.toggle('log-l', boardSide === 'l');
+  paneLog.classList.toggle('log-r', boardSide === 'r');
+}
+
+function markPaneSide(el, side, focused) {
+  el.classList.toggle('side-l', side === 'l');
+  el.classList.toggle('side-r', side === 'r');
+  el.classList.toggle('pane-focus', focused);
 }
 
-function renderPaneTabs(sid, layout) {
+function renderPaneTabs(sid, layout, split) {
+  // A rebuild mid-drag removes the dragged tab, and then no dragend fires.
+  if (paneDragId) return;
   const active = getActivePaneId(sid);
+  const state = (id) => (active === id ? ' on' : split && splitSideOf(split, id) ? ' shown' : '');
   const tab = (id, cls, inner, tip) =>
-    `<div class="pane-tab ${escapeHtml(cls)}${active === id ? ' on' : ''}" role="tab" data-pane="${escapeHtml(id)}" title="${escapeHtml(tip)}">${inner}</div>`;
-  const board = tab(
-    'board',
-    'pinned',
-    `${PANE_ICONS.board}<span class="pane-title">Board</span><span class="pin-meta">${currentTasks.length}</span>`,
-    'Board',
-  );
-  const panes = layout.panes.map((p) => {
-    const state = !paneFrameable(p) ? 'blocked' : paneFrames.has(`${sid}/${p.id}`) ? 'loaded' : '';
-    const stateTip = state === 'blocked' ? 'Site refuses framing' : state ? 'Loaded' : 'Unloaded (loads on open)';
+    `<div class="pane-tab ${escapeHtml(cls)}${state(id)}" role="tab" draggable="true" data-pane="${escapeHtml(id)}" title="${escapeHtml(tip)}">${inner}</div>`;
+  const byId = new Map(layout.panes.map((p) => [p.id, p]));
+  const tabHtml = (id) => {
+    if (id === 'board') {
+      return tab(
+        'board',
+        'pinned',
+        `${PANE_ICONS.board}<span class="pane-title">Board</span><span class="pin-meta">${currentTasks.length}</span>`,
+        'Board',
+      );
+    }
+    const p = byId.get(id);
+    const frame = !paneFrameable(p) ? 'blocked' : paneFrames.has(`${sid}/${p.id}`) ? 'loaded' : '';
+    const frameTip = frame === 'blocked' ? 'Site refuses framing' : frame ? 'Loaded' : 'Unloaded (loads on open)';
     return tab(
       p.id,
       '',
-      `${p.kind === 'url' ? PANE_ICONS.url : PANE_ICONS.file}<span class="pane-title">${escapeHtml(p.title)}</span><span class="state ${escapeHtml(state)}" title="${escapeHtml(stateTip)}"></span><button class="pane-x" data-close="${escapeHtml(p.id)}" title="Close pane" aria-label="Close pane">×</button>`,
+      `${p.kind === 'url' ? PANE_ICONS.url : PANE_ICONS.file}<span class="pane-title">${escapeHtml(p.title)}</span><span class="state ${escapeHtml(frame)}" title="${escapeHtml(frameTip)}"></span><button class="pane-x" data-close="${escapeHtml(p.id)}" title="Close pane (Alt+W)" aria-label="Close pane">×</button>`,
       p.target,
     );
-  });
-  const pin = board + (panes.length ? '<span class="pane-sep"></span>' : '');
-  const html = panes.join('');
+  };
+  const itemHtml = ({ ids, pair }) =>
+    pair
+      ? `<div class="pane-pair${pair === split ? ' on' : ''}">${ids.map(tabHtml).join('<span class="pane-pair-sep"></span>')}</div>`
+      : tabHtml(ids[0]);
+  const [pinned, ...rest] = paneStripItems(sid).map(itemHtml);
+  const pin = pinned + (rest.length ? '<span class="pane-sep"></span>' : '');
+  const html = rest.join('');
   // syncPanes runs on every task refresh and search keystroke; skip the rebuild and the reflows.
   if (pin + html === paneTabsHtml) return;
   paneTabsHtml = pin + html;
@@ -12031,6 +12418,20 @@ function updatePaneFades() {
   paneTabs.classList.toggle('fade-r', scrollLeft + clientWidth < scrollWidth - 1);
 }
 
+// A URL pane's page is on another origin, so its key presses never reach the board: the zoom
+// keys zoom the whole window and the pane keys do nothing. The bar zooms without keys and
+// says when the page has the keyboard; a click on it gives the keys back.
+function paneUrlBarHtml() {
+  return `<div class="pane-url-bar"><button class="icon-btn pane-keys" title="The page has keyboard focus. Click to turn the board shortcuts back on">Board shortcuts off · click to turn on</button><button class="icon-btn" data-pane-zoom="-0.1" title="Smaller" aria-label="Smaller">−</button><button class="icon-btn pane-zoom-val" data-pane-zoom="0" title="Reset size">${modalZoomLabel()}</button><button class="icon-btn" data-pane-zoom="0.1" title="Larger" aria-label="Larger">+</button></div>`;
+}
+
+function markPaneFrameFocus() {
+  const el = document.activeElement;
+  const view = el?.classList.contains('pane-url-frame') ? el.parentElement : null;
+  for (const v of paneViews.querySelectorAll('.pane-view.frame-focus')) v.classList.remove('frame-focus');
+  view?.classList.add('frame-focus');
+}
+
 function paneCardHtml(title, text, button) {
   return `<div class="pane-card"><div class="pane-card-box">${PANE_ICONS.warning}<h3>${escapeHtml(title)}</h3><p>${escapeHtml(text)}</p><button class="btn btn-primary" data-pane-open>${escapeHtml(button)}</button></div></div>`;
 }
@@ -12042,6 +12443,7 @@ function mountPane(sid, pane) {
   if (existing) {
     paneFrames.delete(key);
     paneFrames.set(key, existing);
+    if (stalePaneViews.delete(existing)) reloadPaneView(sid, pane, existing);
     return key;
   }
   const view = document.createElement('div');
@@ -12058,7 +12460,7 @@ function mountPane(sid, pane) {
   return key;
 }
 
-async function loadPaneView(sid, pane, view) {
+async function loadPaneView(sid, pane, view, scroll) {
   if (paneOwnOrigin(pane)) {
     view.insertAdjacentHTML(
       'beforeend',
@@ -12079,12 +12481,13 @@ async function loadPaneView(sid, pane, view) {
   }
   if (pane.kind === 'url') {
     const frame = document.createElement('iframe');
-    frame.className = 'pane-frame modal-zoomable';
+    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;
     view.appendChild(frame);
+    view.insertAdjacentHTML('beforeend', paneUrlBarHtml());
     // Framed at once; a refusal found by the probe swaps the frame for the card.
     if ((await probePaneFraming(sid, pane)) === false) {
       frame.remove();
@@ -12099,7 +12502,11 @@ async function loadPaneView(sid, pane, view) {
     if (r.ok) data = await r.json();
   } catch {}
   if (data?.kind === 'html') {
-    const frame = createPreviewFrame('pane-frame modal-zoomable', data.content + REVIEW_BRIDGE_TAG);
+    // The frame's origin is opaque, so the page restores its own scroll on load.
+    const restore = scroll
+      ? `<script>addEventListener('load',()=>requestAnimationFrame(()=>scrollTo(${Number(scroll.x) || 0},${Number(scroll.y) || 0})))</script>`
+      : '';
+    const frame = createPreviewFrame('pane-frame modal-zoomable', data.content + REVIEW_BRIDGE_TAG + restore);
     frame.title = pane.title;
     view.appendChild(frame);
     attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, frame, frame));
@@ -12126,6 +12533,58 @@ async function loadPaneView(sid, pane, view) {
   view.insertAdjacentHTML('beforeend', paneCardHtml(title, text, button));
 }
 
+function onPaneFileChanged(filePath) {
+  for (const [key, view] of paneFrames) {
+    const [sid, paneId] = key.split('/');
+    const pane = paneLayout(sid).panes.find((p) => p.id === paneId);
+    if (pane?.target !== filePath) continue;
+    if (view.classList.contains('on')) reloadPaneView(sid, pane, view);
+    else stalePaneViews.add(view);
+  }
+}
+
+// Builds the new view hidden over the old one and swaps them once it has loaded and scrolled,
+// so a reload shows no blank frame and no jump. The newest reload of a view wins.
+async function reloadPaneView(sid, pane, view) {
+  const key = view.dataset.key;
+  const token = {};
+  paneReloads.set(key, token);
+  const live = () => {
+    const ok = paneReloads.get(key) === token && paneFrames.get(key) === view;
+    if (!ok && paneReloads.get(key) === token) paneReloads.delete(key);
+    return ok;
+  };
+  const frame = view.querySelector(':scope > .pane-frame');
+  const fresh = document.createElement('div');
+  fresh.dataset.key = key;
+  await loadPaneView(sid, pane, fresh, frame && paneFrameScroll.get(frame));
+  if (!live()) return;
+  fresh.className = view.className;
+  fresh.style.visibility = 'hidden';
+  view.after(fresh);
+  const newBody = fresh.querySelector('.pane-doc-body');
+  if (newBody) newBody.scrollTop = view.querySelector('.pane-doc-body')?.scrollTop || 0;
+  const newFrame = fresh.querySelector(':scope > .pane-frame');
+  if (newFrame) {
+    await new Promise((resolve) => {
+      newFrame.addEventListener('load', resolve, { once: true });
+      setTimeout(resolve, 3000);
+    });
+    // The page scrolls itself one frame after its load.
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+  }
+  if (!live()) {
+    fresh.remove();
+    return;
+  }
+  paneReloads.delete(key);
+  fresh.className = view.className;
+  fresh.style.visibility = '';
+  view.remove();
+  paneFrames.set(key, fresh);
+  syncPaneReview();
+}
+
 // One reading width for every pane, kept apart from the modals': a modal's saved size
 // includes its padding and review panel.
 const PANE_DOC_W_KEY = 'pane-doc-width';
@@ -12163,7 +12622,7 @@ function paneDocGrip(doc) {
 }
 
 function activePaneView() {
-  return wantsTerminal() ? null : paneViews.querySelector('.pane-view.on');
+  return wantsTerminal() ? null : paneViews.querySelector('.pane-view.on.pane-focus');
 }
 
 function isPaneDocOnScreen() {
@@ -12199,20 +12658,55 @@ function selectPane(id) {
   syncPanes();
 }
 
-// Returns false when the tabs are not on screen, so the key keeps its other meaning.
+// Flips the focused side of the split through the free tabs. Returns false with no split on
+// screen, so the key keeps its other meaning.
 function cyclePane(step) {
+  const sid = paneSessionId();
+  const split = sid && !wantsTerminal() && getPaneSplit(sid);
+  if (!split) return false;
+  const active = getActivePaneId(sid);
+  const pairs = getPanePairs(sid);
+  const ids = freePaneTabs(sid, active, pairs);
+  if (ids.length < 2) return true;
+  const next = ids[(ids.indexOf(active) + step + ids.length) % ids.length];
+  const side = splitSideOf(split, active);
+  setPanePairs(
+    sid,
+    pairs.map((p) => (p === split ? { ...p, [side]: next } : p)),
+  );
+  selectPane(next);
+  return true;
+}
+
+function cyclePaneStrip(step) {
   const sid = paneSessionId();
   if (!sid || wantsTerminal()) return false;
-  const ids = ['board', ...paneLayout(sid).panes.map((p) => p.id)];
-  const i = ids.indexOf(getActivePaneId(sid));
-  selectPane(ids[(i + step + ids.length) % ids.length]);
+  const active = getActivePaneId(sid);
+  const items = paneStripItems(sid);
+  const i = items.findIndex((it) => it.ids.includes(active));
+  const { ids, pair } = items[(i + step + items.length) % items.length];
+  selectPane(pair ? pair[pair.f || 'l'] : ids[0]);
+  return true;
+}
+
+function closeFocusedPane() {
+  const sid = paneSessionId();
+  const id = sid && !wantsTerminal() && getActivePaneId(sid);
+  if (!id || id === 'board') return false;
+  closePane(id);
   return true;
 }
 
 async function closePane(paneId) {
   const sid = paneSessionId();
   if (!sid) return;
-  if (getActivePaneId(sid) === paneId) {
+  const split = getPaneSplit(sid);
+  const side = split && splitSideOf(split, paneId);
+  // The layout keeps the pane until the server answers, so its pair goes now.
+  setPanePairs(sid, withoutTabs(getPanePairs(sid), paneId));
+  if (side) {
+    setActivePaneId(sid, split[otherSide(side)]);
+  } else if (getActivePaneId(sid) === paneId) {
     const panes = paneLayout(sid).panes;
     const i = panes.findIndex((p) => p.id === paneId);
     setActivePaneId(sid, (panes[i + 1] || panes[i - 1])?.id || 'board');
@@ -12235,7 +12729,13 @@ function paneById(id) {
 function reloadPane(id) {
   const pane = paneById(id);
   if (!pane) return;
-  unmountPane(paneSessionId(), pane.id);
+  const sid = paneSessionId();
+  const view = paneFrames.get(`${sid}/${pane.id}`);
+  if (pane.kind !== 'url' && view) {
+    reloadPaneView(sid, pane, view);
+    return;
+  }
+  unmountPane(sid, pane.id);
   paneRefused.delete(pane.target);
   syncPanes();
 }
@@ -12468,10 +12968,168 @@ document.addEventListener('click', (e) => {
   if (act) PANE_MENU_ACTIONS[act](menu.dataset.pane);
   if (act || !menu.contains(e.target)) closePaneMenu();
 });
+function focusSideOf(el) {
+  if (el?.classList.contains('side-l')) focusPaneSide('l');
+  else if (el?.classList.contains('side-r')) focusPaneSide('r');
+}
+
 // A click inside a pane's frame never reaches this document, but it takes focus from the window.
-window.addEventListener('blur', closePaneMenu);
+// That blur is also the only sign that a click in a split moved into a pane's frame.
+window.addEventListener('blur', () => {
+  closePaneMenu();
+  setTimeout(() => {
+    syncPaneFrameFocus();
+    watchPaneFrameFocus();
+  });
+});
+window.addEventListener('focus', () => {
+  clearInterval(paneFrameFocusPoll);
+  markPaneFrameFocus();
+});
+
+function syncPaneFrameFocus() {
+  focusSideOf(document.activeElement?.closest?.('.pane-view.on'));
+  markPaneFrameFocus();
+}
+
+function splitPaneFrameFocused() {
+  const el = document.activeElement;
+  return el?.tagName === 'IFRAME' && paneViews.contains(el) && !!shownPaneSplit();
+}
+
+// A click from one frame into another fires no event in this document, so while a split's frame
+// has focus the board checks which one it is: one pointer compare four times a second.
+let paneFrameFocusPoll = 0;
+function watchPaneFrameFocus() {
+  clearInterval(paneFrameFocusPoll);
+  if (!splitPaneFrameFocused()) return;
+  let last = document.activeElement;
+  paneFrameFocusPoll = setInterval(() => {
+    const el = document.activeElement;
+    if (!splitPaneFrameFocused()) clearInterval(paneFrameFocusPoll);
+    else if (el !== last) {
+      last = el;
+      syncPaneFrameFocus();
+    }
+  }, 250);
+}
+paneSplitBox.addEventListener(
+  'pointerdown',
+  (e) => focusSideOf(paneLog.contains(e.target) ? paneBoard : e.target.closest('.side-l, .side-r')),
+  true,
+);
+
+function endPaneDrag() {
+  if (!paneDragId) return;
+  paneDragId = null;
+  paneSplitBox.classList.remove('dropping');
+  paneStrip.classList.remove('drop-hot');
+  for (const el of paneDrop.children) el.classList.remove('hot');
+  paneStrip.querySelector('.pane-tab.dragging')?.classList.remove('dragging');
+  syncPanes();
+}
+
+function draggedPair() {
+  const sid = paneSessionId();
+  return (sid && paneDragId && pairOf(sid, paneDragId)) || null;
+}
+
+paneStrip.addEventListener('dragstart', (e) => {
+  const tab = e.target.closest('.pane-tab');
+  if (!tab || !paneSessionId() || wantsTerminal()) return;
+  paneDragId = tab.dataset.pane;
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/plain', paneDragId);
+  tab.classList.add('dragging');
+  paneSplitBox.classList.add('dropping');
+});
+paneStrip.addEventListener('dragend', endPaneDrag);
+paneStrip.addEventListener('dragover', (e) => {
+  if (!draggedPair()) return;
+  e.preventDefault();
+  paneStrip.classList.add('drop-hot');
+});
+paneStrip.addEventListener('dragleave', (e) => {
+  if (!paneStrip.contains(e.relatedTarget)) paneStrip.classList.remove('drop-hot');
+});
+paneStrip.addEventListener('drop', (e) => {
+  const pair = draggedPair();
+  if (!pair) return;
+  e.preventDefault();
+  const sid = paneSessionId();
+  const shown = !!splitSideOf(pair, getActivePaneId(sid));
+  const keep = shown ? pair[otherSide(splitSideOf(pair, paneDragId))] : null;
+  endPaneDrag();
+  unpairPanes(sid, pair, keep);
+});
+paneDrop.addEventListener('dragover', (e) => {
+  if (!paneDragId) return;
+  e.preventDefault();
+  const half = e.target.closest('[data-side]');
+  for (const el of paneDrop.children) el.classList.toggle('hot', el === half);
+});
+paneDrop.addEventListener('dragleave', (e) => {
+  if (!paneDrop.contains(e.relatedTarget)) for (const el of paneDrop.children) el.classList.remove('hot');
+});
+paneDrop.addEventListener('drop', (e) => {
+  e.preventDefault();
+  const id = paneDragId;
+  const side = e.target.closest('[data-side]')?.dataset.side;
+  endPaneDrag();
+  if (id && side) dropPaneOnSide(id, side);
+});
+
+// syncPanes calls this on every refresh; an unchanged value is not written again.
+function applySplitRatio() {
+  const value = `${paneSplitRatio * 100}%`;
+  if (paneSplitBox.style.getPropertyValue('--pane-split') !== value)
+    paneSplitBox.style.setProperty('--pane-split', value);
+}
+
+{
+  let start;
+  let width;
+  let collapse = null;
+  _initDragResize(paneDivider, {
+    onStart() {
+      start = paneSplitRatio;
+      width = paneSplitBox.clientWidth;
+      paneSplitBox.classList.add('resizing');
+    },
+    onMove(dx) {
+      const raw = start + dx / width;
+      collapse = raw < 0.1 ? 'l' : raw > 0.9 ? 'r' : null;
+      paneSplitBox.classList.toggle('collapse-l', collapse === 'l');
+      paneSplitBox.classList.toggle('collapse-r', collapse === 'r');
+      paneSplitRatio = clampSplitRatio(raw);
+      applySplitRatio();
+    },
+    onEnd() {
+      paneSplitBox.classList.remove('resizing', 'collapse-l', 'collapse-r');
+      const hidden = collapse;
+      collapse = null;
+      const sid = paneSessionId();
+      const split = hidden && sid && getPaneSplit(sid);
+      if (!split) {
+        store.setItem(PANE_SPLIT_RATIO_KEY, String(paneSplitRatio));
+        return;
+      }
+      paneSplitRatio = start;
+      applySplitRatio();
+      unpairPanes(sid, split, split[otherSide(hidden)]);
+    },
+  });
+  paneDivider.addEventListener('dblclick', () => {
+    paneSplitRatio = 0.5;
+    store.removeItem(PANE_SPLIT_RATIO_KEY);
+    applySplitRatio();
+  });
+}
+
 paneViews.addEventListener('click', (e) => {
   if (e.target.closest('[data-pane-open]')) openPaneExternally();
+  const zoom = e.target.closest('[data-pane-zoom]');
+  if (zoom) adjustModalZoom(Number(zoom.dataset.paneZoom));
 });
 bindPreviewRelativeLinks(paneViews, (a) => a.closest('.pane-doc')?.dataset.path);
 paneTabs.addEventListener('scroll', updatePaneFades, { passive: true });
@@ -12487,6 +13145,7 @@ paneTabs.addEventListener(
 );
 new ResizeObserver(updatePaneFades).observe(paneTabs);
 document.getElementById('pane-add').addEventListener('click', openPanePop);
+paneSplitBtn.addEventListener('click', togglePaneSplit);
 document.getElementById('pane-reload').addEventListener('click', () => reloadPane());
 document.getElementById('pane-open').addEventListener('click', () => openPaneExternally());
 panePopDocs.addEventListener('click', (e) => {
@@ -12640,6 +13299,12 @@ function terminalPaneFocused() {
   return document.getElementById('terminal-pane').contains(document.activeElement);
 }
 
+// Kanban's own session keys (new, resume, swap) use the hub's modifier, so the hub leaves them alone.
+// AltGr reaches the page as Ctrl+Alt; when it types a character (Polish AltGr+S is 'ś'), the press is text.
+function hubModDown(e) {
+  return e.ctrlKey && e.altKey && !e.metaKey && !e.shiftKey && !e.getModifierState?.('AltGraph');
+}
+
 function inPageField(e) {
   const field = e.target?.closest?.(TEXT_FIELD_SELECTOR);
   return !!field && !document.getElementById('terminal-pane').contains(field);
@@ -12647,7 +13312,7 @@ function inPageField(e) {
 
 // `probe` asks which keys the terminal frame hands back, and the frame sees keys only while it has focus.
 function terminalShortcut(e, probe = false) {
-  const ctrlAlt = e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey;
+  const ctrlAlt = hubModDown(e);
   const ctrlShift = e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey;
   // Ctrl+_ is Claude Code's undo, so the zoom keys leave it to the terminal.
   const zoom = e.key === '_' ? undefined : zoomDelta(e);
@@ -12986,7 +13651,7 @@ function keyClaims() {
 }
 
 function bridgeClaims(claims) {
-  return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS] };
+  return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS, ...PANE_CLAIMS] };
 }
 
 function pushTerminalClaims() {
@@ -13255,6 +13920,7 @@ async function openTerminal(sessionId, mode, attempt = 0) {
         worktree: spec.worktree,
         model: spec.model,
         prompt: spec.prompt,
+        edit: spec.edit,
       }),
     },
   });
@@ -13544,12 +14210,14 @@ const newSpecs = new Map();
 const dispatchSpecs = new Map();
 const ns = { projects: [], picked: [], matches: [], idx: -1, folder: '', busy: false, resume: false };
 const NEW_SESSION_STAY_KEY = 'new-session-stay';
+const NEW_SESSION_EDIT_KEY = 'new-session-edit';
 
 const PLACEHOLDER_NAMES = { pick: 'Resume session', dispatch: 'Started session', new: 'New session' };
 const PLACEHOLDER_HINTS = {
   pick: 'pick a session to resume',
   dispatch: 'starting',
   new: 'waiting for your first message',
+  edit: 'press Enter in the terminal to start',
 };
 
 function placeholderSession(id, spec) {
@@ -13557,6 +14225,7 @@ function placeholderSession(id, spec) {
     id,
     placeholder: true,
     mode: spec.mode,
+    edit: !!spec.edit,
     name: spec.name || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
     dispatchGroup: spec.group || undefined,
     dispatched: spec.mode === 'dispatch' ? { parent: spec.parent || null } : undefined,
@@ -13636,7 +14305,7 @@ function renderPlaceholderCard(session) {
           <button onclick="fetchTasks('${escAttrJs(session.id)}')" data-session-id="${escapeHtml(session.id)}" class="session-item session-placeholder ${isActive ? 'active' : ''}" title="${escapeHtml(`${session.id} | ${session.project}`)}">
             <div class="session-name">${escapeHtml(session.name)}</div>
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
-            <div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.mode] || PLACEHOLDER_HINTS.new}</div>
+            <div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.edit ? 'edit' : session.mode] || PLACEHOLDER_HINTS.new}</div>
           </button>
         `;
 }
@@ -13650,7 +14319,14 @@ async function restorePendingSessions() {
   try {
     for (const t of 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, startedAt: t.startedAt });
+      newSpecs.set(t.id, {
+        cwd: t.cwd,
+        name: t.name,
+        worktree: t.worktree,
+        mode: t.mode,
+        edit: t.edit,
+        startedAt: t.startedAt,
+      });
     }
   } catch (_) {}
 }
@@ -13688,6 +14364,7 @@ function openNewSession(folder, resume = false) {
   document.getElementById('ns-wt').checked = false;
   document.getElementById('ns-model').value = '';
   document.getElementById('ns-stay').checked = store.getItem(NEW_SESSION_STAY_KEY) === 'true';
+  document.getElementById('ns-edit').checked = store.getItem(NEW_SESSION_EDIT_KEY) === 'true';
   setNewSessionError('');
   const current = viewMode === 'session' ? sessions.find((s) => s.id === currentSessionId)?.project : null;
   setNewSessionFolder(folder || current || '');
@@ -13787,12 +14464,15 @@ function folderListOpen() {
 function newSessionValues() {
   const wtOn = document.getElementById('ns-wt').checked;
   const wtName = document.getElementById('ns-wt-name').value.trim();
+  const edit = !ns.resume && document.getElementById('ns-edit').checked;
   return {
     cwd: ns.folder,
     name: document.getElementById('ns-name').value.trim() || null,
     worktree: wtOn ? wtName || true : false,
     model: document.getElementById('ns-model').value || null,
     prompt: document.getElementById('ns-prompt').value.trim() || null,
+    edit,
+    stay: !ns.resume && !edit && document.getElementById('ns-stay').checked,
   };
 }
 
@@ -13818,11 +14498,12 @@ function renderNewSessionForm() {
   const hint = document.getElementById('ns-wt-hint');
   hint.hidden = !wtOn;
   hint.textContent = `.claude/worktrees/${typeof v.worktree === 'string' ? v.worktree : '<name chosen by Claude>'}`;
+  document.getElementById('ns-stay').disabled = v.edit;
   const problem = newSessionProblem(v);
   setNewSessionError(problem);
   const start = document.getElementById('ns-start');
   start.disabled = !v.cwd || !!problem || ns.busy;
-  const verb = ns.resume ? 'Resume' : 'Start';
+  const verb = ns.resume ? 'Resume' : v.edit ? 'Open' : 'Start';
   start.textContent = v.cwd ? `${verb} in ${pathBasename(v.cwd)}` : verb;
 }
 
@@ -13871,7 +14552,7 @@ function startNewSession() {
   const id = crypto.randomUUID();
   newSpecs.set(id, { ...(ns.resume ? { cwd: v.cwd } : v), mode: ns.resume ? 'pick' : 'new', startedAt: Date.now() });
   setTerminalMode(id, true);
-  if (!ns.resume && document.getElementById('ns-stay').checked) return startNewSessionInBackground(id, v);
+  if (v.stay) return startNewSessionInBackground(id, v);
   sessions = mergePlaceholders(sessions.filter((s) => !s.placeholder));
   closeNewSession();
   fetchTasks(id).then(() => sessionsList.querySelector('.session-item.active')?.scrollIntoView({ block: 'nearest' }));
@@ -13975,6 +14656,10 @@ function initNewSession() {
   document
     .getElementById('ns-stay')
     .addEventListener('change', (e) => store.setItem(NEW_SESSION_STAY_KEY, String(e.target.checked)));
+  document.getElementById('ns-edit').addEventListener('change', (e) => {
+    store.setItem(NEW_SESSION_EDIT_KEY, String(e.target.checked));
+    renderNewSessionForm();
+  });
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model']) {
     document.getElementById(id).addEventListener('input', renderNewSessionForm);
   }