claude-code-kanban 7.3.0 → 7.4.0

package/lib/terminal.js

@@ -23,7 +23,7 @@ const priority = require('./priority');
 
 const WS_PATH = '/api/terminal/ws';
 const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-const MODES = new Set(['auto', 'resume', 'fork', 'shell', 'new', 'pick']);
+const MODES = new Set(['auto', 'resume', 'shell', 'new', 'pick']);
 const PICK_POLL_MS = 1000;
 // How long before the PTY a registry entry may claim to have started (clock skew between the two).
 const PICK_START_SLACK_MS = 2000;
@@ -59,7 +59,6 @@ const RESTORE_GAP_MS = 2000;
 // The hub stops cck with `taskkill /f /t`, which can deliver the PTY exits to cck a moment
 // before cck itself dies. The delay keeps that teardown out of the saved list.
 const SAVE_DELAY_MS = 1000;
-// A fork runs under its parent's id until claude names the new one, so it has no id to resume.
 const RESTORABLE_MODES = new Set(['resume', 'new']);
 // Quitting claude drops the PTY to its shell, so the PTY's exit cannot tell cck that claude is gone.
 const CLAUDE_EXIT_POLL_MS = 5000;
@@ -177,10 +176,11 @@ function shellArgs(shell, claudeArgs) {
 
 function claudeArgsFor(mode, id, spec) {
   if (mode === 'shell') return null;
-  if (mode === 'fork') return ['--resume', id, '--fork-session'];
   if (mode === 'pick') return ['--resume'];
   if (mode === 'new') {
-    const args = ['--session-id', id, ...(spec.extraArgs || [])];
+    // claude takes --session-id with --resume only together with --fork-session.
+    const fork = spec.forkOf ? ['--resume', spec.forkOf, '--fork-session'] : [];
+    const args = [...fork, '--session-id', id, ...(spec.extraArgs || [])];
     if (spec.name) args.push('--name', spec.name);
     if (spec.model) args.push('--model', spec.model);
     // Last, because its value is optional and a following flag must not be taken for it.
@@ -203,7 +203,9 @@ function extraArgsError(args) {
 
 // Returns the new-session options from a hello, or a string naming the bad field.
 function parseNewSpec(msg) {
-  if (typeof msg.cwd !== 'string' || !msg.cwd) return 'folder';
+  const forkOf = msg.forkOf ?? null;
+  if (forkOf !== null && (typeof forkOf !== 'string' || !UUID_RE.test(forkOf))) return 'session to fork';
+  if (!forkOf && (typeof msg.cwd !== 'string' || !msg.cwd)) return 'folder';
   const name = typeof msg.name === 'string' ? msg.name.trim() : '';
   if (name && !NAME_RE.test(name)) return 'name';
   const worktree = msg.worktree ?? false;
@@ -222,7 +224,8 @@ function parseNewSpec(msg) {
   const extraArgs = msg.extraArgs ?? [];
   const bad = extraArgsError(extraArgs);
   if (bad) return bad;
-  return { cwd: msg.cwd, name: name || null, worktree, model, taskList, prompt: prompt || null, extraArgs, edit };
+  if (forkOf && worktree) return 'worktree: a fork runs in its parent session folder';
+  return { cwd: forkOf ? null : msg.cwd, forkOf, name: name || null, worktree, model, taskList, prompt: prompt || null, extraArgs, edit };
 }
 
 function samePath(a, b) {
@@ -489,13 +492,7 @@ function createTerminalService(o) {
     if (s.claudeExitedAt) return null;
     if (s.claudePid || s.mode === 'pick') return s.claudePid;
     const live = registry || o.liveSessions();
-    const own = ownEntry(live, s, s.startedAt);
-    if (own || s.mode !== 'fork') {
-      s.claudePid = own?.pid;
-      return s.claudePid;
-    }
-    const claimed = new Set([...sessions.values()].map((x) => x.claudePid).filter(Boolean));
-    s.claudePid = findPickProcess(live, s, claimed);
+    s.claudePid = ownEntry(live, s, s.startedAt)?.pid;
     return s.claudePid;
   }
 
@@ -578,6 +575,7 @@ function createTerminalService(o) {
     const s = {
       id, mode, cwd, pty: proc, term, serializer, sockets: new Set(), exited: false, ended: false, paused: false, startedAt: Date.now(),
       name: spec?.name || null, worktree: spec?.worktree || false, taskList, onOutput: null, edit: !!spec?.edit,
+      forkOf: spec?.forkOf || null,
     };
     if (s.edit) queueText(s, claudeCommand(shell, claudeArgs, spec.prompt), false);
     else if (spec?.prompt) queueText(s, spec.prompt, true);
@@ -730,14 +728,16 @@ function createTerminalService(o) {
         return { code: 4002, status: 400, error: 'cmd cannot take a typed prompt; clear the prompt or set the terminal shell to pwsh or gitbash' };
       }
     }
-    const known = await o.resolveCwd(id);
+    // `claude --resume` finds a fork's parent only from the parent's own project folder.
+    const [known, forkCwd] = await Promise.all([o.resolveCwd(id), spec?.forkOf ? o.resolveCwd(spec.forkOf) : null]);
     let cwd = known;
     if (mode === 'new' || mode === 'pick') {
       if (known !== null) return { code: 4006, status: 409, error: 'session id already in use' };
-      if (typeof msg.cwd !== 'string' || !(await o.isAllowedFolder(msg.cwd))) {
+      cwd = spec?.forkOf ? forkCwd : msg.cwd;
+      if (spec?.forkOf && cwd === null) return { code: 4004, status: 404, error: 'unknown session to fork' };
+      if (!spec?.forkOf && (typeof cwd !== 'string' || !(await o.isAllowedFolder(cwd)))) {
         return { code: 4004, status: 403, error: 'folder is not a known project or a folder picked in this run' };
       }
-      cwd = msg.cwd;
     } else if (mode !== 'shell' && known === null) {
       return { code: 4004, status: 404, error: 'unknown session' };
     }
@@ -783,7 +783,7 @@ function createTerminalService(o) {
   function list() {
     return [...sessions.values()].filter((s) => !s.ended).map((s) => ({
       id: s.id, mode: s.mode, cwd: s.cwd, pid: s.pty.pid, clients: s.sockets.size, startedAt: s.startedAt,
-      name: s.name, worktree: s.worktree, edit: s.edit,
+      name: s.name, worktree: s.worktree, edit: s.edit, forkOf: s.forkOf,
     }));
   }
 
@@ -827,12 +827,11 @@ function createTerminalService(o) {
   }
 
   // Pastes into claude's input box and stops there: Enter would also submit whatever the
-  // user had half-typed, and over a permission dialog it would answer it. A fork runs under
-  // a new session id, so its terminal id does not name the session the text is for. A
-  // pending queued prompt owns the input box until it is sent.
+  // user had half-typed, and over a permission dialog it would answer it. A pending queued
+  // prompt owns the input box until it is sent.
   function paste(id, text) {
     const s = sessions.get(id);
-    if (!s || s.ended || s.exited || s.claudeExitedAt || s.onOutput || s.mode === 'shell' || s.mode === 'fork') return false;
+    if (!s || s.ended || s.exited || s.claudeExitedAt || s.onOutput || s.mode === 'shell') return false;
     if (onTrustScreen(s)) return false;
     // Until the user runs the typed command, the input box is the shell's command line.
     if (s.edit && !s.claudePid) return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "type": "commonjs",

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;
@@ -3406,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();
@@ -3603,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';
+  const outside = sidebarSearch.rows(zenMode ? '' : searchQuery, filteredSessions);
 
-    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;
-  }
-
-  // Helper to render a single session card
   const renderSessionCard = (session) => {
     if (session.placeholder) return renderPlaceholderCard(session);
     const total = session.taskCount;
@@ -3703,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) {
@@ -3725,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);
@@ -3958,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();
@@ -5022,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>
@@ -5073,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();
@@ -5316,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) {
@@ -11058,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();
@@ -11097,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();
@@ -11220,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>`;
@@ -13420,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();
@@ -13921,6 +13961,7 @@ async function openTerminal(sessionId, mode, attempt = 0) {
         model: spec.model,
         prompt: spec.prompt,
         edit: spec.edit,
+        forkOf: spec.forkOf,
       }),
     },
   });
@@ -14012,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'],
       ],
     );
@@ -14037,7 +14077,6 @@ function onTerminalMessage(sessionId, msg, tail = '') {
           ]
         : [
             ['resume', 'Resume'],
-            ['fork', 'Fork'],
             ['shell', 'Shell'],
           ],
       clean ? '' : tail,
@@ -14220,13 +14259,18 @@ const PLACEHOLDER_HINTS = {
   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,
     edit: !!spec.edit,
-    name: spec.name || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
+    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,
@@ -14325,6 +14369,7 @@ async function restorePendingSessions() {
         worktree: t.worktree,
         mode: t.mode,
         edit: t.edit,
+        forkOf: t.forkOf,
         startedAt: t.startedAt,
       });
     }
@@ -14553,11 +14598,29 @@ function startNewSession() {
   newSpecs.set(id, { ...(ns.resume ? { cwd: v.cwd } : v), mode: ns.resume ? 'pick' : 'new', startedAt: Date.now() });
   setTerminalMode(id, true);
   if (v.stay) return startNewSessionInBackground(id, v);
-  sessions = mergePlaceholders(sessions.filter((s) => !s.placeholder));
   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);

package/public/index.html

@@ -138,6 +138,7 @@
                 class="pf-input"
                 placeholder="Any project"
                 autocomplete="off"
+                data-bwignore data-1p-ignore data-lpignore="true"
                 spellcheck="false"
                 role="combobox"
                 aria-expanded="true"
@@ -169,6 +170,8 @@
               type="text"
               class="search-input"
               placeholder="Search tasks, sessions, projects..."
+              autocomplete="off"
+              data-bwignore data-1p-ignore data-lpignore="true"
               oninput="handleSearch(this.value)"
             />
             <button id="search-clear-btn" class="search-clear" onclick="clearSearch()" title="Clear search" aria-label="Clear search">
@@ -503,7 +506,7 @@
       </div>
       <div class="help-bar">
         <div class="help-tabs" id="help-tabs" role="tablist" aria-label="Shortcut groups"></div>
-        <input type="search" id="help-filter" class="form-input help-filter" placeholder="Filter shortcuts" aria-label="Filter shortcuts" autocomplete="off" spellcheck="false">
+        <input type="search" id="help-filter" class="form-input help-filter" placeholder="Filter shortcuts" aria-label="Filter shortcuts" autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false">
       </div>
       <div class="modal-body">
         <dl class="shortcuts" id="help-shortcuts"></dl>
@@ -802,7 +805,7 @@
           <label class="ns-label" for="ns-folder">Folder</label>
           <div class="ns-field ns-folder-field">
             <div class="ns-inline">
-              <input type="text" id="ns-folder" class="form-input" placeholder="Type to find a project" autocomplete="off" spellcheck="false" role="combobox" aria-expanded="false" aria-controls="ns-folder-list">
+              <input type="text" id="ns-folder" class="form-input" placeholder="Type to find a project" autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false" role="combobox" aria-expanded="false" aria-controls="ns-folder-list">
               <button type="button" id="ns-browse" class="btn btn-secondary ns-browse" onclick="browseNewSessionFolder()">Browse…</button>
             </div>
             <div id="ns-folder-list" class="ns-dropdown" role="listbox" hidden></div>
@@ -811,7 +814,7 @@
         <div class="ns-row ns-extra">
           <label class="ns-label" for="ns-name">Name</label>
           <div class="ns-field">
-            <input type="text" id="ns-name" class="form-input" placeholder="Optional" maxlength="80" autocomplete="off" spellcheck="false">
+            <input type="text" id="ns-name" class="form-input" placeholder="Optional" maxlength="80" autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false">
           </div>
         </div>
         <div class="ns-row ns-extra">
@@ -828,7 +831,7 @@
           <div class="ns-field">
             <div class="ns-inline">
               <label class="ns-check"><input type="checkbox" id="ns-wt"> New worktree</label>
-              <input type="text" id="ns-wt-name" class="form-input" placeholder="Name (optional)" maxlength="64" autocomplete="off" spellcheck="false" disabled aria-label="Worktree name">
+              <input type="text" id="ns-wt-name" class="form-input" placeholder="Name (optional)" maxlength="64" autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false" disabled aria-label="Worktree name">
             </div>
             <div id="ns-wt-hint" class="ns-hint" hidden></div>
           </div>
@@ -864,7 +867,7 @@
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
         </button>
       </div>
-      <input id="pane-pop-input" class="form-input" placeholder="Search linked docs, or paste a URL or a file path" autocomplete="off" spellcheck="false">
+      <input id="pane-pop-input" class="form-input" placeholder="Search linked docs, or paste a URL or a file path" autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false">
       <div id="pane-pop-detect" class="pane-pop-detect"></div>
       <div class="pane-pop-label">Linked docs</div>
       <div id="pane-pop-docs" class="pane-pop-docs"></div>
@@ -874,7 +877,7 @@
 
   <div id="session-picker-modal" class="modal-overlay top-aligned" onclick="closeSessionPicker()">
     <div class="modal session-picker" onclick="event.stopPropagation()">
-      <input type="text" id="session-picker-input" class="form-input sp-input" placeholder="Jump to session..." autocomplete="off" spellcheck="false">
+      <input type="text" id="session-picker-input" class="form-input sp-input" placeholder="Jump to session..." autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false">
       <div class="sp-body">
         <div id="session-picker-list" class="sp-list"></div>
         <div id="session-picker-peek" class="sp-peek"></div>
@@ -885,7 +888,7 @@
 
   <div id="project-picker-modal" class="modal-overlay top-aligned" onclick="closeProjectPicker()">
     <div class="modal session-picker" onclick="event.stopPropagation()">
-      <input type="text" id="project-picker-input" class="form-input sp-input" placeholder="Filter by project..." autocomplete="off" spellcheck="false">
+      <input type="text" id="project-picker-input" class="form-input sp-input" placeholder="Filter by project..." autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false">
       <div class="pp-chips">
         <button type="button" class="pf-recent" id="pp-recent-chip" aria-pressed="false" title="List only projects active in the last 24h" onclick="ppToggleRecentOnly()">Recent</button>
       </div>

package/public/style.css

@@ -7143,7 +7143,8 @@ select.form-input option:checked {
 
 /* #region SESSION_PICKER */
 .modal.session-picker {
-  max-height: 70vh;
+  max-width: 920px;
+  max-height: 74vh;
   padding: 12px;
   display: flex;
   flex-direction: column;
@@ -7152,9 +7153,9 @@ select.form-input option:checked {
 }
 
 .sp-input {
-  padding: 9px 12px;
+  padding: 10px 12px;
   background: var(--bg-deep);
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .modal.session-picker.peeking {
@@ -7197,7 +7198,7 @@ select.form-input option:checked {
   gap: 8px;
   margin-bottom: 6px;
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: 11.5px;
   color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
@@ -7215,13 +7216,13 @@ select.form-input option:checked {
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 6px 8px;
+  padding: 7px 8px;
   background: none;
   border: 1px solid transparent;
   border-radius: 5px;
   color: var(--text-secondary);
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: 13px;
   text-align: left;
   cursor: pointer;
 }
@@ -7330,14 +7331,14 @@ select.form-input option:checked {
   border-radius: 3px;
   background: var(--bg-hover);
   color: var(--text-tertiary);
-  font-size: 11px;
+  font-size: 11.5px;
 }
 
 .sp-count,
 .sp-time {
   flex: none;
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: 11.5px;
   white-space: nowrap;
 }