claude-code-kanban 7.1.2 → 7.2.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');
@@ -3131,10 +3153,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 +3224,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 +3682,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 +3707,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 +5421,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 +5454,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 +5871,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)' },
@@ -7005,7 +7046,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 +7121,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 +7158,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 +7206,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;
@@ -7588,6 +7642,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 +7683,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 +7701,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 +7717,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 +8577,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 +9072,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 +12038,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 +12070,136 @@ 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 focusPaneSide(side) {
+  const sid = paneSessionId();
+  const split = sid && !wantsTerminal() && getPaneSplit(sid);
+  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 +12216,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 +12235,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 +12255,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;
@@ -12042,6 +12374,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 +12391,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',
@@ -12099,7 +12432,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 +12463,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 +12552,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 +12588,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 +12659,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,8 +12898,130 @@ 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(() => focusSideOf(document.activeElement?.closest?.('.pane-view.on')));
+});
+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();
 });
@@ -12487,6 +13039,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) => {
@@ -12986,7 +13539,7 @@ function keyClaims() {
 }
 
 function bridgeClaims(claims) {
-  return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS] };
+  return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS, ...PANE_CLAIMS] };
 }
 
 function pushTerminalClaims() {