claude-code-kanban 7.2.0 → 7.4.0

package/public/app.js

@@ -53,6 +53,7 @@ const collapsedProjectGroups = new Set();
 const SECTION_GROUPS = '__section_groups__';
 const SECTION_PROJECTS = '__section_projects__';
 const SECTION_SESSIONS = '__section_sessions__';
+const SECTION_OUTSIDE = '__section_outside__';
 // Project paths and session ids in Active-view sidebar order, kept across reloads so live
 // activity does not reshuffle the list. Each holds only what the loaded list still has.
 const PROJECT_ORDER_KEY = 'project-order';
@@ -373,6 +374,65 @@ async function fetchSessionById(id) {
   return (await fetchSessionsByIds([id]))[0] || null;
 }
 
+// The id may be outside the list the filters asked for. renderSession bails on a session
+// missing from `sessions`, so pull that one row in before opening it; later polls
+// keep it, because fetchSessions pins currentSessionId.
+async function ensureSessionLoaded(id) {
+  const loaded = sessions.find((s) => s.id === id);
+  if (loaded) return loaded;
+  const session = await fetchSessionById(id);
+  if (!session) return null;
+  const raced = sessions.find((s) => s.id === id);
+  if (raced) return raced;
+  sessions.push(session);
+  return session;
+}
+
+// Matches SESSION_SEARCH_MIN in server.js, which answers [] below it.
+const SESSION_SEARCH_MIN = 3;
+const SESSION_SEARCH_DEBOUNCE_MS = 100;
+
+// Searches session ids and names in every transcript on the server, so a session outside the
+// sidebar filter is found too. `rows` answers the server rows not in `localRows`, and whether
+// the search for that query is still out; `onFound()` runs when the current query's rows arrive.
+// Only the current query is kept, and a short query drops it, so a later identical query fetches again.
+function sessionSearch(onFound) {
+  let current = null;
+  let found = null;
+  let timer = null;
+  const run = async (key) => {
+    let ids = [];
+    try {
+      const r = await fetch(`/api/sessions/search?q=${encodeURIComponent(key)}`);
+      if (r.ok) ids = await r.json();
+    } catch (_) {}
+    if (key !== current) return;
+    const rows = ids.length ? await fetchSessionsByIds(ids) : [];
+    if (key !== current) return;
+    found = rows;
+    onFound();
+  };
+  return {
+    rows(query, localRows) {
+      const key = query.length < SESSION_SEARCH_MIN ? null : query.toLowerCase();
+      // Set once per query: the sidebar re-renders on every live update, and resetting the
+      // timer each time would starve the search.
+      if (key !== current) {
+        clearTimeout(timer);
+        current = key;
+        found = null;
+        if (key) timer = setTimeout(() => run(key), SESSION_SEARCH_DEBOUNCE_MS);
+      }
+      if (!key) return { rows: [], pending: false };
+      if (!found) return { rows: [], pending: true };
+      const seen = new Set(localRows.map((s) => s.id));
+      return { rows: found.filter((s) => !seen.has(s.id)), pending: false };
+    },
+  };
+}
+
+const sidebarSearch = sessionSearch(renderSessions);
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function handleSearch(query) {
   const wasSearching = !!searchQuery;
@@ -2494,8 +2554,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%
@@ -2505,7 +2570,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
@@ -3401,15 +3466,8 @@ async function revealSession(id) {
   let session = sessions.find((s) => s.id === id);
   if (!session) {
     lastSessionsHash = '';
-    await fetchSessions();
-    session = sessions.find((s) => s.id === id);
-  }
-  if (!session) {
-    // The id is outside the list the filters asked for. renderSession bails on a session
-    // missing from `sessions`, so pull that one row in before opening it; later polls
-    // keep it, because fetchSessions pins currentSessionId.
-    session = await fetchSessionById(id);
-    if (session) sessions.push(session);
+    await fetchSessions(true, id);
+    session = await ensureSessionLoaded(id);
   }
   const uncollapsed = session ? uncollapseFor(session) : false;
   if (uncollapsed) persistCollapsedGroups();
@@ -3598,36 +3656,8 @@ function renderSessions() {
   const zenSession = zenMode && currentSessionId ? sessions.find((s) => s.id === currentSessionId) : null;
   const filteredSessions = zenMode ? (zenSession ? [zenSession] : []) : applyStableSessionOrder(getFilteredSessions());
 
-  if (filteredSessions.length === 0) {
-    let emptyMsg = 'No sessions found';
-    let emptyHint = 'Tasks appear when you use Claude Code';
-
-    if (zenMode) {
-      emptyMsg = 'Zen mode: no session open';
-      emptyHint = 'Press Ctrl+Shift+Z to leave zen mode, then open a session';
-    } else if (searchQuery) {
-      emptyMsg = `No results for "${searchQuery}"`;
-      emptyHint = 'Try a different search term or clear the search';
-    } else if (filterProject && sessionFilter === 'active') {
-      emptyMsg = 'No active sessions for this project filter';
-      emptyHint = 'Try "All Sessions" or clear the project filter';
-    } else if (filterProject) {
-      emptyMsg = 'No sessions for this project filter';
-      emptyHint = 'Clear the project filter to see all';
-    } else if (sessionFilter === 'active') {
-      emptyMsg = 'No active sessions';
-      emptyHint = 'Select "All Sessions" to see all';
-    }
-    sessionsList.innerHTML = `
-          <div style="padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 12px;">
-            <p>${emptyMsg}</p>
-            <p style="margin-top: 8px; font-size: 11px;">${emptyHint}</p>
-          </div>
-        `;
-    return;
-  }
+  const outside = sidebarSearch.rows(zenMode ? '' : searchQuery, filteredSessions);
 
-  // Helper to render a single session card
   const renderSessionCard = (session) => {
     if (session.placeholder) return renderPlaceholderCard(session);
     const total = session.taskCount;
@@ -3698,6 +3728,63 @@ function renderSessions() {
         `;
   };
 
+  // `ungroup` marks the label as the drop target for pulling an item out of a named group.
+  const sectionHtml = (key, text, ungroup, body, empty = false) => {
+    const collapsed = collapsedProjectGroups.has(key);
+    const escPath = escapeHtml(key);
+    const title = ungroup ? 'Click to collapse — drop here to remove from a group' : 'Click to collapse';
+    const emptyCls = empty ? ' sg-section-empty' : '';
+    return `<div class="sg-section-label sg-section-toggle${ungroup ? ' sg-ungroup-zone' : ''}${collapsed ? ' collapsed' : ''}${emptyCls}" data-group-path="${escPath}" title="${escapeHtml(title)}">${groupChevronSvg(10)}<span>${text}</span></div>
+      <div class="sg-section-body${collapsed ? ' collapsed' : ''}${emptyCls}" data-group-path="${escPath}">${body}</div>`;
+  };
+
+  const countHtml = (arr) => {
+    const active = arr.reduce((n, s) => n + (isSessionActive(s) ? 1 : 0), 0);
+    return `<span class="group-count" title="${active} active / ${arr.length} total">${active > 0 ? `<span class="group-count-active">${active}</span><span class="group-count-sep">/</span>` : ''}${arr.length}</span>`;
+  };
+
+  const outsideHtml = outside.rows.length
+    ? sectionHtml(
+        SECTION_OUTSIDE,
+        `Outside current filters ${countHtml(outside.rows)}`,
+        false,
+        collapsedProjectGroups.has(SECTION_OUTSIDE) ? '' : outside.rows.map(renderSessionCard).join(''),
+      )
+    : '';
+
+  if (filteredSessions.length === 0) {
+    let emptyMsg = 'No sessions found';
+    let emptyHint = 'Tasks appear when you use Claude Code';
+
+    if (zenMode) {
+      emptyMsg = 'Zen mode: no session open';
+      emptyHint = 'Press Ctrl+Shift+Z to leave zen mode, then open a session';
+    } else if (searchQuery) {
+      emptyMsg = `No results for "${escapeHtml(searchQuery)}"`;
+      emptyHint = outside.rows.length
+        ? 'Matches outside the current filters are below'
+        : outside.pending
+          ? 'Searching all sessions…'
+          : 'Try a different search term or clear the search';
+    } else if (filterProject && sessionFilter === 'active') {
+      emptyMsg = 'No active sessions for this project filter';
+      emptyHint = 'Try "All Sessions" or clear the project filter';
+    } else if (filterProject) {
+      emptyMsg = 'No sessions for this project filter';
+      emptyHint = 'Clear the project filter to see all';
+    } else if (sessionFilter === 'active') {
+      emptyMsg = 'No active sessions';
+      emptyHint = 'Select "All Sessions" to see all';
+    }
+    sessionsList.innerHTML = `
+          <div style="padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 12px;">
+            <p>${emptyMsg}</p>
+            <p style="margin-top: 8px; font-size: 11px;">${emptyHint}</p>
+          </div>
+        ${outsideHtml}`;
+    return;
+  }
+
   // Zen draws one card and its panel, so it returns before the grouping below — leaving it in
   // that chain would build the whole list only to discard it.
   if (zenMode) {
@@ -3720,20 +3807,6 @@ function renderSessions() {
   const groupPinned = store.getItem('groupPinnedSessions') !== 'false';
   const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isInPinnedGroup(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
-  const countHtml = (arr) => {
-    const active = arr.reduce((n, s) => n + (isSessionActive(s) ? 1 : 0), 0);
-    return `<span class="group-count" title="${active} active / ${arr.length} total">${active > 0 ? `<span class="group-count-active">${active}</span><span class="group-count-sep">/</span>` : ''}${arr.length}</span>`;
-  };
-  // `ungroup` marks the label as the drop target for pulling an item out of a named group.
-  const sectionHtml = (key, text, ungroup, body, empty = false) => {
-    const collapsed = collapsedProjectGroups.has(key);
-    const escPath = escapeHtml(key);
-    const title = ungroup ? 'Click to collapse — drop here to remove from a group' : 'Click to collapse';
-    const emptyCls = empty ? ' sg-section-empty' : '';
-    return `<div class="sg-section-label sg-section-toggle${ungroup ? ' sg-ungroup-zone' : ''}${collapsed ? ' collapsed' : ''}${emptyCls}" data-group-path="${escPath}" title="${escapeHtml(title)}">${groupChevronSvg(10)}<span>${text}</span></div>
-      <div class="sg-section-body${collapsed ? ' collapsed' : ''}${emptyCls}" data-group-path="${escPath}">${body}</div>`;
-  };
-
   const renderGroupSessions = (sessions, pinKey) => {
     if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
     const gIdlePinned = sessions.filter(isInPinnedGroup);
@@ -3953,13 +4026,13 @@ function renderSessions() {
     const noProjects = sortedGroups.length === 0 && ungrouped.length === 0;
     html += sectioned ? sectionHtml(SECTION_PROJECTS, 'Projects', true, projectsHtml, noProjects) : projectsHtml;
 
-    sessionsList.innerHTML = html;
+    sessionsList.innerHTML = html + outsideHtml;
   } else {
     const sectioned = sessionGroups.length > 0 || transientGroups.size > 0;
     const restHtml =
       sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).join('');
     const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
-    sessionsList.innerHTML = html + sgSectionHtml(true) + tail;
+    sessionsList.innerHTML = html + sgSectionHtml(true) + tail + outsideHtml;
   }
 
   const navItems = getNavigableItems();
@@ -5017,10 +5090,12 @@ function sgOpenMenu(x, y, kind, ref) {
   menu.id = 'sg-menu';
   menu.className = 'sg-menu';
   menu.setAttribute('role', 'menu');
-  menu.setAttribute('aria-label', `Move ${label} to group`);
+  const canFork = kind === 'session' && !!forkableSession(ref);
+  menu.setAttribute('aria-label', canFork ? 'Session actions' : `Move ${label} to group`);
   menu.dataset.sgKind = kind;
   menu.dataset.sgRef = ref;
   menu.innerHTML = `
+        ${canFork ? '<div class="sg-menu-label" aria-hidden="true">Session</div><button class="sg-menu-item" role="menuitem" data-sg-action="fork" title="claude --resume --fork-session">Fork</button>' : ''}
         <div class="sg-menu-label" aria-hidden="true">Move ${label} to group</div>
         ${rows}
         <button class="sg-menu-item" role="menuitem" data-sg-move="__new__">+ New group…</button>
@@ -5068,6 +5143,7 @@ document.addEventListener('click', (e) => {
   const { sgKind, sgRef } = menu.dataset;
   const move = item.dataset.sgMove;
   sgCloseMenu();
+  if (item.dataset.sgAction === 'fork') return forkSession(sgRef);
   if (move === '__none__') {
     sgDetach(sgKind, sgRef);
     persistSessionGroups();
@@ -5311,18 +5387,16 @@ function expandActiveGroups({ onlyNew = false } = {}) {
 }
 
 // Drops every collapse key that could hide this session: its project, a named group wrapping
-// the project or the session itself, the pinned sub-section only when the card renders inside
-// it (pinned, not sticky, idle — see renderGroupSessions), and — since which section holds it
-// depends on the view — every section header. Returns whether anything changed.
+// the project or the session itself and the project block it renders under there, the pinned sub-section only when the card renders inside
+// it (pinned, not sticky, idle — see renderGroupSessions), and the section header that holds it:
+// Groups for a grouped session, else Projects or Sessions, which depends on the view. Returns
+// whether anything changed.
 function uncollapseFor(session) {
   const group = sgGroupForSession(session);
   const keys = [
     sessionProjectKey(session) || '__ungrouped__',
     ...pinnedCollapseKeys(session),
-    group && sgKey(group.id),
-    SECTION_GROUPS,
-    SECTION_PROJECTS,
-    SECTION_SESSIONS,
+    ...(group ? [sgKey(group.id), sgHostOf(group, session), SECTION_GROUPS] : [SECTION_PROJECTS, SECTION_SESSIONS]),
   ];
   let changed = false;
   for (const key of keys) {
@@ -5917,9 +5991,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' },
         ],
       },
     ],
@@ -5949,17 +6023,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) {
@@ -5975,9 +6089,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>`);
       }
@@ -5996,7 +6111,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);
 }
 
@@ -7630,9 +7748,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();
@@ -11008,38 +11127,9 @@ let spRenderedQuery = null;
 // Per-open cache: spSource is frozen while the picker is up, so a fetched log stays valid.
 const spPeekCache = new Map();
 
-// A query also searches session ids and names in every transcript on the server, so a
-// session outside the sidebar filter is found too. Values: 'pending', then the rows.
-const spSearch = new Map();
-let spSearchTimer = null;
-
-function spSearchKey(query) {
-  return query.length >= 3 ? query.toLowerCase() : null;
-}
-
-function spScheduleSearch(key) {
-  clearTimeout(spSearchTimer);
-  spSearchTimer = setTimeout(async () => {
-    spSearch.set(key, 'pending');
-    let ids = [];
-    try {
-      const r = await fetch(`/api/sessions/search?q=${encodeURIComponent(key)}`);
-      if (r.ok) ids = await r.json();
-    } catch (_) {}
-    spSearch.set(key, ids.length ? await fetchSessionsByIds(ids) : []);
-    renderSessionPicker();
-  }, 100);
-}
-
-// The server rows not already matched in the sidebar list, and whether a search is still out.
-function spSearchRows(key, localRows) {
-  if (!key) return { rows: [], pending: false };
-  const found = spSearch.get(key);
-  if (!found) spScheduleSearch(key);
-  if (!Array.isArray(found)) return { rows: [], pending: true };
-  const seen = new Set(localRows.map((s) => s.id));
-  return { rows: found.filter((s) => !seen.has(s.id)), pending: false };
-}
+const spSearch = sessionSearch(() => {
+  if (document.getElementById('session-picker-modal').classList.contains('visible')) renderSessionPicker();
+});
 
 function openSessionPicker() {
   spFromTerminal = terminalPaneFocused();
@@ -11047,7 +11137,6 @@ function openSessionPicker() {
   input.value = '';
   spSource = getFilteredSessions().sort((a, b) => Date.parse(b.modifiedAt) - Date.parse(a.modifiedAt));
   spPeekCache.clear();
-  spSearch.clear();
   spRenderedQuery = null;
   document.getElementById('session-picker-modal').classList.add('visible');
   renderSessionPicker();
@@ -11170,15 +11259,14 @@ function renderSessionPicker() {
   // Search rows that arrive for the same query append below, so the cursor stays on its row.
   const selectedId = query === spRenderedQuery ? spRows[spIdx]?.id : null;
   spRenderedQuery = query;
-  const key = spSearchKey(query);
   const local = spSource.filter((s) => spMatches(s, query));
-  const found = spSearchRows(key, local);
+  const found = spSearch.rows(query, local);
   spRows = [...local, ...found.rows];
   if (!spRows.length) {
     spIdx = -1;
     const empty = found.pending
       ? 'Searching all sessions…'
-      : spSource.length || key
+      : spSource.length || query.length >= SESSION_SEARCH_MIN
         ? 'No session matches'
         : 'No sessions in the current sidebar filter';
     list.innerHTML = `<div class="sp-empty">${empty}</div>`;
@@ -12171,9 +12259,14 @@ function togglePaneSplit() {
   return true;
 }
 
+function shownPaneSplit() {
+  const sid = paneSessionId();
+  return sid && !wantsTerminal() && getPaneSplit(sid);
+}
+
 function focusPaneSide(side) {
   const sid = paneSessionId();
-  const split = sid && !wantsTerminal() && getPaneSplit(sid);
+  const split = shownPaneSplit();
   if (!split) return false;
   if (getActivePaneId(sid) !== split[side]) {
     setActivePaneId(sid, split[side]);
@@ -12363,6 +12456,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>`;
 }
@@ -12412,12 +12519,13 @@ async function loadPaneView(sid, pane, view, scroll) {
   }
   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();
@@ -12907,8 +13015,42 @@ function focusSideOf(el) {
 // 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')));
+  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')),
@@ -13024,6 +13166,8 @@ function 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 });
@@ -13193,6 +13337,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);
@@ -13200,7 +13350,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);
@@ -13308,8 +13458,10 @@ function syncTerminal() {
 }
 
 // Only paths the user drives call this; restores, deep links and refreshes call fetchTasks, so they never take focus.
-function openSession(sessionId) {
+async function openSession(sessionId) {
   setSessionDismissed(sessionId, false);
+  // Awaited only when missing, so opening a loaded session stays synchronous up to fetchTasks.
+  if (!sessions.some((s) => s.id === sessionId)) await ensureSessionLoaded(sessionId);
   const alreadyOpen = sessionId === currentSessionId && viewMode === 'session' && termState.shown;
   if (!alreadyOpen) termState.openedByUser = sessionId;
   else if (termState.attached && promptAwaitsUser(sessionId)) focusTerminalPane();
@@ -13808,6 +13960,8 @@ async function openTerminal(sessionId, mode, attempt = 0) {
         worktree: spec.worktree,
         model: spec.model,
         prompt: spec.prompt,
+        edit: spec.edit,
+        forkOf: spec.forkOf,
       }),
     },
   });
@@ -13899,7 +14053,6 @@ function onTerminalMessage(sessionId, msg, tail = '') {
       'Resuming it here too makes both processes write to the same transcript.',
       [
         ['resume', 'Resume anyway'],
-        ['fork', 'Fork'],
         ['shell', 'Shell only'],
       ],
     );
@@ -13924,7 +14077,6 @@ function onTerminalMessage(sessionId, msg, tail = '') {
           ]
         : [
             ['resume', 'Resume'],
-            ['fork', 'Fork'],
             ['shell', 'Shell'],
           ],
       clean ? '' : tail,
@@ -14097,20 +14249,28 @@ 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',
 };
 
+// The parent may be outside the loaded list, so its short id stands in for its name.
+function forkLabel(parentId) {
+  return `Fork of ${sessionDisplayName(sessions.find((s) => s.id === parentId) || { id: parentId })}`;
+}
+
 function placeholderSession(id, spec) {
   return {
     id,
     placeholder: true,
     mode: spec.mode,
-    name: spec.name || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
+    edit: !!spec.edit,
+    name: spec.name || (spec.forkOf && forkLabel(spec.forkOf)) || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
     dispatchGroup: spec.group || undefined,
     dispatched: spec.mode === 'dispatch' ? { parent: spec.parent || null } : undefined,
     project: spec.cwd,
@@ -14189,7 +14349,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>
         `;
 }
@@ -14203,7 +14363,15 @@ 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,
+        forkOf: t.forkOf,
+        startedAt: t.startedAt,
+      });
     }
   } catch (_) {}
 }
@@ -14241,6 +14409,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 || '');
@@ -14340,12 +14509,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,
   };
 }
 
@@ -14371,11 +14543,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;
 }
 
@@ -14424,12 +14597,30 @@ 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);
-  sessions = mergePlaceholders(sessions.filter((s) => !s.placeholder));
+  if (v.stay) return startNewSessionInBackground(id, v);
   closeNewSession();
+  openPlaceholder(id);
+}
+
+function openPlaceholder(id) {
+  sessions = mergePlaceholders(sessions.filter((s) => !s.placeholder));
   fetchTasks(id).then(() => sessionsList.querySelector('.session-item.active')?.scrollIntoView({ block: 'nearest' }));
 }
 
+function forkableSession(id) {
+  return terminalAvailable() ? sessions.find((s) => s.id === id && !s.placeholder) : undefined;
+}
+
+// The fork gets its own id up front, so it runs as a new session and needs no rekey.
+function forkSession(parentId) {
+  const parent = forkableSession(parentId);
+  if (!parent) return;
+  const id = crypto.randomUUID();
+  newSpecs.set(id, { cwd: parent.project, forkOf: parentId, mode: 'new', startedAt: Date.now() });
+  setTerminalMode(id, true);
+  openPlaceholder(id);
+}
+
 async function startNewSessionInBackground(id, v) {
   refreshPlaceholders();
   setNewSessionBusy(true);
@@ -14528,6 +14719,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);
   }