claude-code-kanban 7.6.1 → 7.8.0

package/public/app.js

@@ -4,7 +4,9 @@ const STORAGE_NS = window.__STORAGE_NS__ ? `${window.__STORAGE_NS__}:` : '';
 // Theme is hub-wide (echoed to every app via hub:theme), so it stays shared across config dirs.
 const THEME_KEY = 'theme';
 const COLOR_THEME_KEY = 'color-theme';
-const GLOBAL_KEYS = new Set([THEME_KEY, COLOR_THEME_KEY]);
+// Shared too, so after a config-dir switch the cursor goes where it was on the board just left.
+const FOCUS_ZONE_KEY = 'focus-zone';
+const GLOBAL_KEYS = new Set([THEME_KEY, COLOR_THEME_KEY, FOCUS_ZONE_KEY]);
 // localStorage names are kept as they are: renaming one drops what users saved under it.
 const MESSAGE_PANEL_OPEN_KEY = 'message-panel-open';
 const MESSAGE_PANEL_FULL_KEY = 'message-panel-full';
@@ -92,6 +94,8 @@ let sessionsHasMore = false;
 // URL, so a query string would not survive a hub reload.
 const ZEN_KEY = 'zenMode';
 let zenMode = store.getItem(ZEN_KEY) === 'true';
+// Group zen: the sidebar shows one group's subtree. A view of the moment, so it is not persisted.
+let zenGroup = null;
 let filterProject = FILTER_DEFAULTS.project; // null = all, '__recent__' = last 24h, or project path
 let recentProjects = new Set();
 let projectsCacheDirty = true;
@@ -107,8 +111,6 @@ const SESSION_ORDER_KEY = 'session-order';
 let stableGroupOrder = readStoredList(PROJECT_ORDER_KEY);
 let sessionOrder = readStoredList(SESSION_ORDER_KEY);
 let sessionGroups = []; // user-named groups: [{id, name, color, members:[{type,ref}]}]
-// Sessions the user pulled out of their dispatch placement; the server's group map is not theirs to edit.
-let sgReleased = new Set();
 let sgDrag = null; // in-flight sidebar drag: {kind:'session'|'project'|'group', ref}
 let searchQuery = ''; // Search query for fuzzy search
 let allTasksCache = []; // Cache all tasks for search
@@ -144,6 +146,8 @@ let taskHighlightDimmed = false;
 let focusZone = 'board'; // 'board' | 'sidebar'
 let appConfig = { marketplaceUrl: null, costUrl: null, memoryUrl: null, scratchAvailable: false };
 let runningTerminals = new Set();
+// Embedded sessions stuck on Claude Code's folder-trust dialog. No hook runs before it, so the server reads it off the screen.
+let trustWaiting = new Set();
 let selectedSessionIdx = -1;
 let selectedSessionKbId = null;
 let sessionJustSelected = false;
@@ -186,6 +190,7 @@ function setSessionDismissed(id, dismissed) {
   else dismissedSessionIds.delete(id);
   persistDismissedSessions();
   updateDismissBtnState();
+  if (dismissed) sgSweepTransient();
   renderSessions();
   renderActivityChip();
   return true;
@@ -256,6 +261,7 @@ function resetState() {
   sessionLimit = SESSION_PAGE;
   filterProject = FILTER_DEFAULTS.project;
   zenMode = false;
+  zenGroup = null;
   store.removeItem(ZEN_KEY);
   renderZenState();
   searchQuery = '';
@@ -323,21 +329,30 @@ async function getJson(path, fallback = null, opts) {
 
 async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
   try {
-    const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
-    if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
-    if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
-    const recent = filterProject === '__recent__';
+    // The focused session must come back whatever the filters say: renderSession and the
+    // info modal both look it up in `sessions` and bail when it is absent, so a session
+    // opened from outside the current filter would leave the view on the previous one.
+    // The server adds the pinned sessions itself; the ones `session open` showed are this page's.
+    // Group zen ignores the filters, and its session members come back through `include`.
+    const zenIds = zenGroup ? sgSubtreeIds(zenGroup) : new Set();
+    const zenMembers = sessionGroups
+      .filter((g) => zenIds.has(g.id))
+      .flatMap((g) => g.members.filter((m) => m.type === 'session').map((m) => m.ref));
+    const include = [
+      focusId,
+      revealedPlanSessionId,
+      revealedStorageSessionId,
+      ...openedStickyIds,
+      ...zenMembers,
+    ].filter(Boolean);
+    const recent = !zenGroup && filterProject === '__recent__';
     const res = await api('/api/sessions', {
       query: {
         limit: sessionLimit,
-        pinned: allPinnedIds.size > 0 ? [...allPinnedIds].join(',') : null,
-        // The focused session must come back whatever the filters say: renderSession and the
-        // info modal both look it up in `sessions` and bail when it is absent, so a session
-        // opened from outside the current filter would leave the view on the previous one.
-        include: focusId || null,
+        include: include.length ? include.join(',') : null,
         recentHours: recent ? RECENT_PROJECT_HOURS : null,
-        project: !recent && filterProject ? filterProject : null,
-        filter: sessionFilter === 'active' ? 'active' : null,
+        project: !zenGroup && !recent && filterProject ? filterProject : null,
+        filter: !zenGroup && sessionFilter === 'active' ? 'active' : null,
       },
     });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -348,6 +363,7 @@ async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
       lastSessionsHash = sessionsHash;
       sessions = mergePlaceholders(newSessions);
       markOpenSessionRead();
+      sgSweepTransient();
       renderSessions();
       renderActivityChip();
       schedulePublishSession();
@@ -544,14 +560,14 @@ function toggleSection(containerId, chevronId) {
 }
 
 function isWaitingSession(s) {
-  return !!s.hasWaitingForUser;
+  return !!s.hasWaitingForUser || trustWaiting.has(s.id);
 }
 function sessionBarClass(s) {
   if (isWaitingSession(s)) return 'permission-pending';
   return s.unread ? 'unread' : '';
 }
 function isActiveSession(s) {
-  return !s.hasWaitingForUser && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
+  return !isWaitingSession(s) && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
 }
 // hasRecentLog carries the server's registry-idle correction: an open-but-idle
 // terminal keeps touching its JSONL, so mtime alone is not proof of activity.
@@ -765,8 +781,7 @@ async function fetchTasks(sessionId) {
   if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
     revealedStorageSessionId = null;
   }
-  if (currentSessionId && currentSessionId !== sessionId && deferredPinPlacement.delete(currentSessionId))
-    expandPinnedFor(currentSessionId);
+  if (currentSessionId && currentSessionId !== sessionId) deferredPinPlacement.delete(currentSessionId);
   if (lastSessionId !== sessionId) setSwapPair(sessionId, lastSessionId);
   const switched = sessionId !== currentSessionId;
   currentSessionId = sessionId;
@@ -1655,8 +1670,12 @@ function toggleToolGroup(id) {
 
 // Legacy markers (written before the gate minted kind:"plan") carry no kind
 // for plans — the tool name is the durable signal there.
+function isPlanAsk(kind, tool) {
+  return kind === 'plan' || tool === 'ExitPlanMode';
+}
+
 function getWaitingPill(kind, tool) {
-  if (kind === 'plan' || tool === 'ExitPlanMode') return 'Plan awaiting approval';
+  if (isPlanAsk(kind, tool)) return 'Plan awaiting approval';
   if (kind === 'question') return 'Question pending';
   return 'Awaiting permission';
 }
@@ -1735,27 +1754,34 @@ function waitingDecisionButtons(cls) {
   const plan = currentWaiting.kind === 'plan';
   // Code-authored call argument, not data — hence the constant-style name the
   // escaping check reads as safe.
-  const DENY_ARG = plan ? "{behavior:'deny',message:PLAN_REJECT_MSG}" : "{behavior:'deny'}";
-  return `<button class="${escapeHtml(cls)}-allow" onclick="event.stopPropagation();respondWaiting({behavior:'allow'})">${plan ? 'Approve' : 'Allow'}</button><button class="${escapeHtml(cls)}-deny" onclick="event.stopPropagation();respondWaiting(${DENY_ARG})">${plan ? 'Reject' : 'Deny'}</button>`;
+  const DENY_ARG = plan ? "rejectWaitingPlan('inline-plan-feedback')" : "respondWaiting({behavior:'deny'})";
+  const feedback = plan
+    ? `<input id="inline-plan-feedback" class="msg-waiting-feedback" type="text" placeholder="feedback for reject (optional)…" value="${escapeHtml(inlinePlanFeedback)}" oninput="inlinePlanFeedback=this.value" onclick="event.stopPropagation()" onkeydown="event.stopPropagation()">`
+    : '';
+  return `${feedback}<button class="${escapeHtml(cls)}-allow" onclick="event.stopPropagation();respondWaiting({behavior:'allow'})">${plan ? 'Approve' : 'Allow'}</button><button class="${escapeHtml(cls)}-deny" onclick="event.stopPropagation();${DENY_ARG}">${plan ? 'Reject' : 'Deny'}</button>`;
 }
 
+let inlinePlanFeedback = '';
+
 function renderWaitingEntry() {
   if (!isWaitingFresh()) return '';
   const tool = currentWaiting.toolName || 'unknown';
   const params = parseWaitingInput();
-  const pillText = getWaitingPill(currentWaiting.kind, tool);
+  const plan = isPlanAsk(currentWaiting.kind, tool);
   const detail = deriveWaitingDetail(tool, params);
   const detailHtml = detail ? ` <span style="color:var(--text-secondary)">${escapeHtml(detail)}</span>` : '';
   const bodyHtml = renderWaitingBody(tool, params);
   const bodyWrap = bodyHtml ? `<div class="msg-waiting-body">${bodyHtml}</div>` : '';
-  const pill = `<span class="msg-waiting-pill">${escapeHtml(pillText)}</span>`;
   const discardBtn = `<button class="msg-waiting-discard" title="Discard permission prompt" onclick="event.stopPropagation();discardWaiting()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>`;
   // Questions are answered in the detail modal; plans render there too.
   const buttons = waitingDecisionButtons('msg-waiting');
   const actions = buttons ? `<span class="msg-waiting-actions">${buttons}</span>` : '';
   // Lapsed = gate stopped polling — the ask is only answerable in the terminal
   const lapsed = !!currentWaiting.lapsed;
-  return `<div class="msg-item msg-waiting" onclick="msgDetailFollowLatest=false;showWaitingDetail()">${getToolIcon(tool)}<div class="msg-body"><div class="msg-text">${pill} <span style="font-weight:600">${escapeHtml(tool)}</span>${detailHtml}</div>${bodyWrap}<div class="msg-waiting-footer"><div class="msg-time">${lapsed ? 'answer in the terminal' : 'waiting…'}</div>${actions}</div></div>${discardBtn}</div>`;
+  const keyHint = lapsed ? 'answer in the terminal' : buttons ? `${sendKbd()} ${plan ? 'approve' : 'allow'}` : '';
+  const hintHtml = keyHint ? `<div class="msg-time waiting-key-hint-line">${keyHint}</div>` : '';
+  const footer = hintHtml || actions ? `<div class="msg-waiting-footer">${hintHtml}${actions}</div>` : '';
+  return `<div class="msg-item msg-waiting${plan ? ' msg-waiting-plan' : ''}" onclick="msgDetailFollowLatest=false;showWaitingDetail()">${getToolIcon(tool)}<div class="msg-body"><div class="msg-text"><span style="font-weight:600">${escapeHtml(tool)}</span>${detailHtml}</div>${bodyWrap}${footer}</div>${discardBtn}</div>`;
 }
 
 // Shared approval controls for a fresh plan ask — the waiting-detail footer and
@@ -1804,6 +1830,7 @@ async function respondWaiting(payload) {
 // Drop the answered/discarded ask from every surface it renders on
 function clearWaitingUi() {
   currentWaiting = null;
+  inlinePlanFeedback = '';
   waitingAnswerDraft = {};
   waitingCustomDraft = {};
   if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
@@ -2123,45 +2150,95 @@ let stickySessionIds = new Set();
 // Pinning the currently-selected session keeps it in place until deselected (less UI movement).
 const deferredPinPlacement = new Set();
 
-function loadPinnedSessions() {
-  return new Set(readStoredList(PINNED_SESSIONS_KEY));
+// Sessions that `session open` keeps on screen for this page only; the server never has them.
+const openedStickyIds = new Set();
+
+// The server keeps the pins (`/api/session/pins`, lib/session-pins.js); the two sets are only the
+// page's copy. The localStorage lists are from before that. Each origin has its own (the hub's
+// proxied port, the standalone board), so each one merges its lists into the server's once, then
+// deletes them.
+async function syncSessionPins() {
+  try {
+    const body = { pinned: readStoredList(PINNED_SESSIONS_KEY), sticky: readStoredList(STICKY_SESSIONS_KEY) };
+    const local = body.pinned.length || body.sticky.length;
+    const res = await (local ? api('/api/session/pins/import', { method: 'POST', body }) : api('/api/session/pins'));
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    store.removeItem(PINNED_SESSIONS_KEY);
+    store.removeItem(STICKY_SESSIONS_KEY);
+    applyServerPins(data.pins);
+  } catch (e) {
+    console.warn('[pins] server sync failed:', e.message);
+  }
 }
 
-function loadStickySessions() {
-  return new Set(readStoredList(STICKY_SESSIONS_KEY));
+// The first apply needs no fetch: `/api/sessions` adds the pinned sessions itself.
+let pinsApplied = false;
+
+function applyServerPins(pins) {
+  const before = new Map([...pinnedSessionIds].map((id) => [id, getSessionPinState(id)]));
+  pinnedSessionIds = new Set();
+  stickySessionIds = new Set(openedStickyIds);
+  for (const [id, state] of Object.entries(pins || {})) {
+    pinnedSessionIds.add(id);
+    if (state === 'sticky') {
+      stickySessionIds.add(id);
+      openedStickyIds.delete(id);
+    }
+  }
+  for (const id of deferredPinPlacement) if (!isAnyPinned(id)) deferredPinPlacement.delete(id);
+  const first = !pinsApplied;
+  pinsApplied = true;
+  const unchanged =
+    before.size === pinnedSessionIds.size && [...before].every(([id, s]) => getSessionPinState(id) === s);
+  if (unchanged && !first) return;
+  const added = first ? [] : [...pinnedSessionIds].filter((id) => !before.has(id));
+  showPinnedSessions(added);
 }
 
-function savePinnedSessions() {
-  store.writeJson(PINNED_SESSIONS_KEY, [...pinnedSessionIds]);
-  store.writeJson(STICKY_SESSIONS_KEY, [...stickySessionIds]);
+// A pinned session outside the current filter is only in the list once it is fetched with the pins.
+function showPinnedSessions(added) {
+  const known = new Set(sessions.map((s) => s.id));
+  if (added.some((id) => !known.has(id))) fetchSessions(false);
+  else renderSessions();
 }
 
-// Mirror pin state to server so it can be queried by the CLI. UI remains source of truth for itself.
-function offloadSessionPin(sessionId) {
-  const state = getSessionPinState(sessionId);
-  api('/api/session/pin', { method: 'POST', body: { id: sessionId, state } }).catch(() => {});
+function sendPinChange(sessionId) {
+  return postPins({ ids: [sessionId], state: getSessionPinState(sessionId, { saved: true }) });
+}
+
+// A write names only its sessions, so the last write for a session wins. A failed save re-reads the
+// server so the page shows what is saved.
+async function postPins(body) {
+  let error;
+  try {
+    const res = await api('/api/session/pin', { method: 'POST', body });
+    if (res.ok) return;
+    error = (await res.json().catch(() => null))?.error || `HTTP ${res.status}`;
+  } catch (e) {
+    error = e.message;
+  }
+  showToast(`Pin not saved (${error}); showing the saved pins`, 'error');
+  await syncSessionPins();
 }
 
 function clearSessionPin(sessionId) {
   pinnedSessionIds.delete(sessionId);
   stickySessionIds.delete(sessionId);
+  openedStickyIds.delete(sessionId);
   deferredPinPlacement.delete(sessionId);
 }
 
 function unpinSession(sessionId) {
   clearSessionPin(sessionId);
-  savePinnedSessions();
-  offloadSessionPin(sessionId);
+  sendPinChange(sessionId);
   renderSessions();
 }
 
 function toggleSessionPin(sessionId) {
   if (pinnedSessionIds.has(sessionId)) return unpinSession(sessionId);
   pinnedSessionIds.add(sessionId);
-  if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
-  expandPinnedFor(sessionId);
-  savePinnedSessions();
-  offloadSessionPin(sessionId);
+  sendPinChange(sessionId);
   renderSessions();
 }
 
@@ -2173,33 +2250,32 @@ function toggleSessionSticky(sessionId) {
     stickySessionIds.add(sessionId);
     if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
   }
-  savePinnedSessions();
-  offloadSessionPin(sessionId);
+  sendPinChange(sessionId);
   renderSessions();
 }
 
-function isPlacedPinned(id) {
-  return pinnedSessionIds.has(id) && !deferredPinPlacement.has(id);
-}
-function isPlacedSticky(id) {
-  return stickySessionIds.has(id) && !deferredPinPlacement.has(id);
-}
-
+// The echo of this page's own change is a no-op, so the selected session keeps its deferred place.
 function handleSessionPinEvent({ id, state }) {
-  if (!id) return;
+  if (!id || getSessionPinState(id, { saved: true }) === state) return;
   clearSessionPin(id);
   if (state === 'pinned') pinnedSessionIds.add(id);
   if (state === 'sticky') {
     pinnedSessionIds.add(id);
     stickySessionIds.add(id);
   }
-  expandPinnedFor(id);
-  savePinnedSessions();
-  renderSessions();
+  showPinnedSessions(isAnyPinned(id) ? [id] : []);
 }
 
-function getSessionPinState(sessionId) {
-  if (stickySessionIds.has(sessionId)) return 'sticky';
+function isPlacedPinned(id) {
+  return pinnedSessionIds.has(id) && !deferredPinPlacement.has(id);
+}
+function isPlacedSticky(id) {
+  return stickySessionIds.has(id) && !deferredPinPlacement.has(id);
+}
+
+// `saved` gives the pin the user set: a sticky that `session open` added is only this page's.
+function getSessionPinState(sessionId, { saved = false } = {}) {
+  if (stickySessionIds.has(sessionId) && !(saved && openedStickyIds.has(sessionId))) return 'sticky';
   if (pinnedSessionIds.has(sessionId)) return 'pinned';
   return 'none';
 }
@@ -3674,12 +3750,14 @@ function getFilteredSessions() {
   if (filterProject) {
     // The open session keeps its row even when it belongs to another project, so that
     // revealing one by id has something to scroll to. Same exemption the active branch
-    // above already makes, for the same reason.
+    // above already makes, for the same reason. recentProjects lags behind the session list, so a
+    // session in a new folder counts as recent on its own.
+    const recentCutoff = Date.now() - RECENT_PROJECT_HOURS * 60 * 60 * 1000;
     filteredSessions = filteredSessions.filter(
       (s) =>
         matchesProjectFilter(s.project, s.worktree?.repo) ||
         s.id === currentSessionId ||
-        (filterProject === '__recent__' && isAnyPinned(s.id)),
+        (filterProject === '__recent__' && (isAnyPinned(s.id) || Date.parse(s.modifiedAt) >= recentCutoff)),
     );
   }
 
@@ -3782,16 +3860,55 @@ function renderSessions() {
   if (sgDrag || sgIsEditing() || zenPanelIsEditing()) return;
   scheduleJustFinishedExpiry();
   refreshProjectList();
+  syncPinPeek();
 
+  if (zenGroup && !sgGroupById(zenGroup)) {
+    zenGroup = null;
+    renderZenState();
+  }
   // Zen narrows the rendered list only — the session picker keeps calling getFilteredSessions()
   // and still offers everything, or there would be no way to switch sessions without leaving zen.
+  // Group zen renders only its subtree's buckets, so it takes every session unfiltered.
   const zenSession = zenMode && currentSessionId ? sessions.find((s) => s.id === currentSessionId) : null;
-  const filteredSessions = zenMode ? (zenSession ? [zenSession] : []) : applyStableSessionOrder(getFilteredSessions());
-
-  const outside = sidebarSearch.rows(zenMode ? '' : searchQuery, filteredSessions);
+  let filteredSessions;
+  if (zenGroup) filteredSessions = applyStableSessionOrder(sessions);
+  else if (zenMode) filteredSessions = zenSession ? [zenSession] : [];
+  else filteredSessions = applyStableSessionOrder(getFilteredSessions());
+
+  const outside = sidebarSearch.rows(zenMode || zenGroup ? '' : searchQuery, filteredSessions);
+
+  const childDepth = new Map();
+  const parentOf = new Map();
+  for (const g of sessionGroups) for (const m of g.members) if (m.parent) parentOf.set(m.ref, m.parent);
+  const nestChildren = (list) => {
+    if (parentOf.size === 0) return list;
+    const ids = new Set(list.map((s) => s.id));
+    const kids = new Map();
+    for (const s of list) {
+      const p = parentOf.get(s.id);
+      if (p && ids.has(p)) {
+        if (!kids.has(p)) kids.set(p, []);
+        kids.get(p).push(s);
+      }
+    }
+    if (kids.size === 0) return list;
+    const out = [];
+    const seen = new Set();
+    const add = (s, depth) => {
+      if (seen.has(s.id)) return;
+      seen.add(s.id);
+      out.push(s);
+      if (depth) childDepth.set(s.id, Math.min(depth, 3));
+      for (const k of kids.get(s.id) || []) add(k, depth + 1);
+    };
+    for (const s of list) if (!ids.has(parentOf.get(s.id))) add(s, 0);
+    // Sessions that are each other's parents have no top; show them as they came.
+    for (const s of list) add(s, 0);
+    return out;
+  };
 
   const renderSessionCard = (session) => {
-    if (session.placeholder) return renderPlaceholderCard(session);
+    if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id));
     const total = session.taskCount;
     const percent = total > 0 ? Math.round((session.completed / total) * 100) : 0;
     const isActive = session.id === currentSessionId && viewMode === 'session';
@@ -3814,12 +3931,12 @@ function renderSessions() {
     const padEmoji = store.getItem(_padEmojiKey(session.id));
     const hasScratchpad = !!padEmoji || _hasScratchpad(_sessionScratchpadKey(session.id));
     const tempClass =
-      session.hasRecentLog || session.hasRecentActivity || session.inProgress || session.hasWaitingForUser
+      session.hasRecentLog || session.hasRecentActivity || session.inProgress || isWaitingSession(session)
         ? 'warm'
         : 'stale';
     // Open tasks keep an idle session warm, but the green dot is for a session that is working.
     const idleClass =
-      tempClass === 'warm' && !session.hasWaitingForUser && !session.hasRecentLog && !session.hasRunningAgents
+      tempClass === 'warm' && !isWaitingSession(session) && !session.hasRecentLog && !session.hasRunningAgents
         ? 'idle'
         : '';
     const justFinishedClass = isJustFinished(session) ? 'just-finished' : '';
@@ -3830,7 +3947,7 @@ function renderSessions() {
         : '';
     const metricsHtml = progressHtml + (showCtx ? renderContextBar(session) : '');
     return `
-          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}">
+          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}${childDepthClass(childDepth.get(session.id))}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${sid}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(sessionName)}</div>
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
@@ -3851,8 +3968,8 @@ function renderSessions() {
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
                 ${session.dispatched ? `<span class="dispatched-badge"${session.dispatched.parent ? ` onclick="event.stopPropagation(); revealSession('${escAttrJs(session.dispatched.parent)}')"` : ''} title="${escapeHtml(dispatchedTitle(session.dispatched))}">${ICON_DISPATCHED}</span>` : ''}
                 ${runningTerminals.has(session.id) ? `<span class="terminal-badge" onclick="event.stopPropagation(); showSessionTerminal('${escAttrJs(session.id)}')" title="${TERMINAL_TITLE}">${ICON_TERMINAL}</span>` : ''}
-                ${session.hasWaitingForUser ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
-                ${session.hasRunningAgents && !session.hasWaitingForUser ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
+                ${isWaitingSession(session) ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
+                ${session.hasRunningAgents && !isWaitingSession(session) ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
                 ${isLive || session.hasRunningAgents ? `<span class="pulse" title="${isLive ? 'Live' : 'Active agents'}"></span>` : ''}
               </span>
             </div>
@@ -3884,7 +4001,7 @@ function renderSessions() {
       )
     : '';
 
-  if (filteredSessions.length === 0) {
+  if (filteredSessions.length === 0 && !zenGroup) {
     let emptyMsg = 'No sessions found';
     let emptyHint = 'Tasks appear when you use Claude Code';
 
@@ -3939,11 +4056,11 @@ function renderSessions() {
   const groupPinned = store.getItem(GROUP_PINNED_KEY) !== 'false';
   const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isInPinnedGroup(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
-  const renderGroupSessions = (sessions, pinKey) => {
-    if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
-    const gIdlePinned = sessions.filter(isInPinnedGroup);
-    if (gIdlePinned.length === 0) return sessions.map(renderSessionCard).join('');
-    const gUnpinned = sessions.filter((s) => !isInPinnedGroup(s));
+  const renderGroupSessions = (list, pinKey) => {
+    if (!groupPinned || pinnedSessionIds.size === 0) return nestChildren(list).map(renderSessionCard).join('');
+    const gPinned = nestChildren(list.filter(isInPinnedGroup));
+    if (gPinned.length === 0) return nestChildren(list).map(renderSessionCard).join('');
+    const gUnpinned = nestChildren(list.filter((s) => !isInPinnedGroup(s)));
     const pinCollapsed = collapsedProjectGroups.has(pinKey);
     return (
       '<div class="pinned-sub-section">' +
@@ -3955,14 +4072,14 @@ function renderSessions() {
       groupChevronSvg(10) +
       '<span class="pinned-sub-label">Pinned</span>' +
       '<span class="group-count">' +
-      gIdlePinned.length +
+      gPinned.length +
       '</span>' +
       '<span class="pinned-ungroup-btn" title="Ungroup pinned sessions">&times;</span>' +
       '</div>' +
       '<div class="pinned-sub-items' +
       (pinCollapsed ? ' collapsed' : '') +
       '">' +
-      gIdlePinned.map(renderSessionCard).join('') +
+      gPinned.map(renderSessionCard).join('') +
       '</div>' +
       '</div>' +
       gUnpinned.map(renderSessionCard).join('')
@@ -4015,72 +4132,85 @@ function renderSessions() {
       sgRest.push(session);
     }
   }
-  for (const [name, g] of transientGroups) if (!sgBuckets.has(g.id)) transientGroups.delete(name);
   // A group emptied by a filter hides its header; a group the user just created (no filters)
   // shows its drop-here state instead of vanishing.
-  const sgFiltering = !!searchQuery || activityFilter.size > 0 || (!!filterProject && filterProject !== '__recent__');
+  const sgFiltering = !zenGroup && sgListFiltered();
+
+  // A group whose parent is gone renders at the top.
+  const sgIds = new Set(sessionGroups.map((g) => g.id));
+  const sgChildren = new Map();
+  for (const g of sessionGroups) {
+    const p = g.parent && sgIds.has(g.parent) ? g.parent : null;
+    if (!sgChildren.has(p)) sgChildren.set(p, []);
+    sgChildren.get(p).push(g);
+  }
+  const sgSubtree = new Map();
+  const sgSubtreeOf = (group) => {
+    let all = sgSubtree.get(group.id);
+    if (!all) {
+      all = [...(sgBuckets.get(group.id) || []), ...(sgChildren.get(group.id) || []).flatMap(sgSubtreeOf)];
+      sgSubtree.set(group.id, all);
+    }
+    return all;
+  };
 
   // flat = the "All sessions" view, which has no project sub-blocks.
   const sgSectionHtml = (flat) => {
-    const transient = [...transientGroups.values()];
-    if (sessionGroups.length === 0 && transient.length === 0) return '';
+    if (sessionGroups.length === 0) return '';
     let out = '';
-    for (const group of [...sessionGroups, ...transient]) {
-      const bucket = sgBuckets.get(group.id) || [];
-      if (bucket.length === 0 && sgFiltering) continue;
-      if (!groupPinned) bucket.sort(pinSort);
-      const collapsed = collapsedProjectGroups.has(sgKey(group.id));
-      let body = '';
-      if (flat) {
-        body = bucket.map(renderSessionCard).join('');
-      } else if (group.transient) {
-        // Each session under its own project block, so a worktree session reads as its repo's.
-        const byProject = new Map();
-        for (const s of bucket) {
-          const key = sessionProjectKey(s) || '';
-          if (!byProject.has(key)) byProject.set(key, []);
-          byProject.get(key).push(s);
-        }
-        for (const [p, arr] of byProject) {
-          body += p ? projectBlock(p, arr, true) : renderGroupSessions(arr, `__pinned_group_${group.id}__`);
-        }
-      } else {
-        const loose = [];
-        const byProject = new Map();
-        for (const s of bucket) {
-          const host = sgHostOf(group, s);
-          if (host) {
-            if (!byProject.has(host)) byProject.set(host, []);
-            byProject.get(host).push(s);
-          } else {
-            loose.push(s);
-          }
-        }
-        // Project members first (in the user's member order), then the individually placed
-        // sessions — one Pinned sub-section per group instead of one per interleaved run.
-        for (const m of group.members) {
-          if (m.type !== 'project') continue;
-          const arr = byProject.get(m.ref);
-          // A member project with nothing left in it still renders: it shows the membership, and
-          // it is the drop target for putting a session back under it.
-          if (arr?.length || !sgFiltering) body += projectBlock(m.ref, arr || [], true);
-        }
-        if (loose.length) {
-          // Individually placed sessions follow the order the user dragged them into.
-          const slot = new Map(group.members.map((m, i) => [`${m.type}:${m.ref}`, i]));
-          loose.sort((a, b) => (slot.get(`session:${a.id}`) ?? 0) - (slot.get(`session:${b.id}`) ?? 0));
-          // Label them, else a card sitting under the project blocks reads as stranded.
-          if (body) body += '<div class="sg-sub-label">Sessions</div>';
-          body += renderGroupSessions(loose, `__pinned_group_${group.id}__`);
+    for (const group of sgChildren.get(null) || []) out += sgGroupHtml(group, flat);
+    if (!out) return '';
+    return sectionHtml(SECTION_GROUPS, 'Groups', false, out);
+  };
+
+  const sgGroupHtml = (group, flat) => {
+    const bucket = sgBuckets.get(group.id) || [];
+    const subtree = sgSubtreeOf(group);
+    if (subtree.length === 0 && sgFiltering) return '';
+    if (!groupPinned) bucket.sort(pinSort);
+    const collapsed = collapsedProjectGroups.has(sgKey(group.id));
+    // Placed sessions follow the order the user dragged them into; a session that is here through
+    // its project takes the project's slot.
+    const slot = new Map(group.members.map((m, i) => [`${m.type}:${m.ref}`, i]));
+    const slotOf = (s) => slot.get(`session:${s.id}`) ?? slot.get(`project:${sessionProjectKey(s)}`) ?? 0;
+    const byMemberOrder = (a, b) => (groupPinned ? 0 : pinSort(a, b)) || slotOf(a) - slotOf(b);
+    let body = '';
+    if (flat) {
+      body = nestChildren([...bucket].sort(byMemberOrder))
+        .map(renderSessionCard)
+        .join('');
+    } else {
+      const loose = [];
+      const byProject = new Map();
+      for (const s of bucket) {
+        const host = sgHostOf(group, s);
+        if (host) {
+          if (!byProject.has(host)) byProject.set(host, []);
+          byProject.get(host).push(s);
+        } else {
+          loose.push(s);
         }
       }
-      if (!body) body = '<div class="sg-empty">Drop a session or a project here</div>';
-      const idAttr = group.transient ? '' : ` data-group-id="${escapeHtml(group.id)}"`;
-      out += sgHeaderHtml(group, countHtml(bucket));
-      out += `<div class="session-group-sessions${collapsed ? ' collapsed' : ''}"${idAttr}>${body}</div>`;
+      // Project members first (in the user's member order), then the individually placed
+      // sessions — one Pinned sub-section per group instead of one per interleaved run.
+      for (const m of group.members) {
+        if (m.type !== 'project') continue;
+        const arr = byProject.get(m.ref);
+        // A member project with nothing left in it still renders: it shows the membership, and
+        // it is the drop target for putting a session back under it.
+        if (arr?.length || !sgFiltering) body += projectBlock(m.ref, arr || [], true);
+      }
+      if (loose.length) {
+        loose.sort(byMemberOrder);
+        // Label them, else a card sitting under the project blocks reads as stranded.
+        if (body) body += '<div class="sg-sub-label">Sessions</div>';
+        body += renderGroupSessions(loose, `__pinned_group_${group.id}__`);
+      }
     }
-    if (!out) return '';
-    return sectionHtml(SECTION_GROUPS, 'Groups', false, out);
+    let childHtml = '';
+    for (const child of sgChildren.get(group.id) || []) childHtml += sgGroupHtml(child, flat);
+    if (!body && !childHtml) body = '<div class="sg-empty">Drop a session or a project here</div>';
+    return `${sgHeaderHtml(group, countHtml(subtree))}<div class="session-group-sessions${collapsed ? ' collapsed' : ''}" data-group-id="${escapeHtml(group.id)}">${body}${childHtml}</div>`;
   };
 
   let html = '';
@@ -4091,8 +4221,10 @@ function renderSessions() {
         </div>`;
   }
 
-  // Group active sessions by project
-  if (sessionFilter === 'active') {
+  if (zenGroup) {
+    sessionsList.innerHTML = sgGroupHtml(sgGroupById(zenGroup), sessionFilter !== 'active');
+  } else if (sessionFilter === 'active') {
+    // Group active sessions by project
     // Auto-expand a collapsed section when newly-active work lands in it (live refresh).
     expandActiveGroups({ onlyNew: true });
     html += sgSectionHtml(false);
@@ -4131,7 +4263,7 @@ function renderSessions() {
     // The section header is rendered even when nothing is left under it: it is the drop target
     // for ungrouping. Its body is skipped while collapsed — nothing would be visible, and this is
     // the whole project list, re-parsed on every live refresh.
-    const sectioned = sessionGroups.length > 0 || transientGroups.size > 0;
+    const sectioned = sessionGroups.length > 0;
     let projectsHtml = '';
     if (!sectioned || !collapsedProjectGroups.has(SECTION_PROJECTS)) {
       for (const [projectPath, projectSessions] of sortedGroups) {
@@ -4160,7 +4292,7 @@ function renderSessions() {
 
     sessionsList.innerHTML = html + outsideHtml;
   } else {
-    const sectioned = sessionGroups.length > 0 || transientGroups.size > 0;
+    const sectioned = sessionGroups.length > 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;
@@ -4283,6 +4415,30 @@ function renderOwnerBadge(task) {
   return `<button type="button" class="task-owner-badge task-owner-link" style="${style}" title="Open dispatched session" onclick="event.stopPropagation(); revealSession('${escAttrJs(target)}')">${ICON_DISPATCHED}${escapeHtml(task.owner)}</button>`;
 }
 
+// Card chips that a tool writing the task file adds: metadata.chips = [{label, title?, tone?}], tone one of
+// muted, warn, accent. The writer is outside cck, so the list is capped and every field is checked.
+function taskChips(task) {
+  const chips = task.metadata?.chips;
+  if (!Array.isArray(chips)) return [];
+  return chips
+    .filter((c) => typeof c?.label === 'string' && c.label.trim())
+    .slice(0, 4)
+    .map((c) => ({
+      label: c.label.trim().slice(0, 24),
+      title: typeof c.title === 'string' ? c.title.slice(0, 200) : '',
+      tone: ['muted', 'warn', 'accent'].includes(c.tone) ? c.tone : 'muted',
+    }));
+}
+
+function renderTaskChips(chips) {
+  return chips
+    .map(
+      (c) =>
+        `<span class="task-chip task-chip-${escapeHtml(c.tone)}"${c.title ? ` title="${escapeHtml(c.title)}"` : ''}>${escapeHtml(c.label)}</span>`,
+    )
+    .join('');
+}
+
 function renderTaskCard(task) {
   const blockers = openBlockers(task);
   const isBlocked = blockers.length > 0;
@@ -4290,6 +4446,9 @@ function renderTaskCard(task) {
   const taskId = useSlug ? `${(task._taskDir || task.sessionId || '')?.slice(0, 4)}-${task.id}` : task.id;
   const statusClass = task.status.replace('_', '-');
   const actualSessionId = task._taskDir || task.sessionId || currentSessionId || '';
+  const isDim = task.metadata?.dim === true;
+  const chips = taskChips(task);
+  const state = [task.status.replace('_', ' '), ...chips.map((c) => c.label)].join(', ');
 
   return `
         <div
@@ -4301,10 +4460,11 @@ function renderTaskCard(task) {
           draggable="true"
           ondragstart="onCardDragStart(event)"
           ondragend="onCardDragEnd(event)"
-          class="task-card ${statusClass} ${isBlocked ? 'blocked' : ''}"
-          aria-label="${escapeHtml(task.subject)} — ${task.status.replace('_', ' ')}">
+          class="task-card ${statusClass} ${isBlocked ? 'blocked' : ''} ${isDim ? 'dim' : ''}"
+          aria-label="${escapeHtml(task.subject)} — ${escapeHtml(state)}">
           <div class="task-id">
             <span>#${taskId}</span>
+            ${renderTaskChips(chips)}
             ${isBlocked ? `<span class="task-blocked" title="Blocked">waiting on ${blockers.map((id) => `#${escapeHtml(id)}`).join(' ')}</span>` : ''}
             ${task.owner ? renderOwnerBadge(task) : ''}
           </div>
@@ -4588,9 +4748,10 @@ async function onColumnDrop(e) {
 
 //#region SESSION_GROUPS
 // User-named groups that hold whole projects and individual sessions, dragged in from the
-// sidebar. They render above the project groups. Membership is a workspace preference kept in
-// localStorage; an id missing from `sessions` is NOT proof the session is gone (sessionLimit
-// windows the list), so membership is never garbage-collected on load.
+// sidebar. They render above the project groups. Membership is a workspace preference kept on
+// the server; an id missing from `sessions` is NOT proof the session is gone (sessionLimit
+// windows the list), so membership is never garbage-collected on load. Transient groups go only
+// on a full Active list (sgSweepTransient).
 const SESSION_GROUPS_KEY = 'sessionGroups';
 const SG_ACTION_SELECTOR =
   '.session-pin-btn, .team-info-btn, .plan-indicator, .scratchpad-badge, .bookmarks-badge, .linked-docs-badge, .project-view-btn, .project-new-btn, .header-pad-btn, .group-path-toggle, .pinned-ungroup-btn, .sg-action';
@@ -4611,89 +4772,201 @@ function pinKey(projectPath) {
   return projectPath === '__ungrouped__' ? '__pinned___ungrouped__' : `__pinned_${projectPath}__`;
 }
 
-function loadSessionGroups() {
-  const saved = store.readJson(SESSION_GROUPS_KEY);
+// The server keeps the groups (`/api/groups`, lib/user-groups.js). `sessionGroups` in localStorage
+// is the copy from before that: the board imports it once and never writes it, so it stays as a
+// backup.
+const GROUPS_MIGRATED_AT = 'groupsMigratedAt';
+let sgRev = null;
+let sgSaving = null;
+let sgDirty = false;
+let sgUnsent = false;
+let sgSeenRev = 0;
+
+// Until it succeeds the board shows no groups, and it tries again on the next load or SSE reconnect.
+async function syncSessionGroups() {
+  const migrated = !!store.getItem(GROUPS_MIGRATED_AT);
+  const local = migrated ? null : store.readJson(SESSION_GROUPS_KEY);
+  const hasLocal = local?.groups?.length > 0;
+  try {
+    const res = hasLocal
+      ? await api('/api/groups/import', { method: 'POST', body: { groups: local.groups } })
+      : await api('/api/groups');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    sgTakeServer(await res.json());
+    if (!migrated) store.setItem(GROUPS_MIGRATED_AT, new Date().toISOString());
+    if (sgSeenRev > sgRev) sgRefresh(sgSeenRev);
+  } catch (e) {
+    console.warn('[groups] server sync failed:', e.message);
+  }
+}
+
+// The SSE event for this board's own write often arrives before the write's response.
+async function sgRefresh(rev = Infinity) {
+  await sgSaving;
+  if (sgRev !== null && sgRev >= rev) return;
+  const data = await getJson('/api/groups');
+  if (data) sgTakeServer(data);
+}
+
+function sgTakeServer(data, force = false) {
+  if (!Number.isInteger(data?.rev) || (!force && sgRev !== null && data.rev <= sgRev)) return;
+  sgRev = data.rev;
+  sgApplyState(data);
+  renderSessions();
+}
+
+// An event during the first sync is kept, because the sync's read may be older than it.
+function onGroupChanged(data) {
+  if (!Number.isInteger(data?.rev)) return;
+  sgSeenRev = Math.max(sgSeenRev, data.rev);
+  if (sgRev !== null && data.rev > sgRev) sgRefresh(data.rev);
+}
+
+function sgApplyState(saved) {
   const list = saved?.groups;
   sessionGroups = (Array.isArray(list) ? list : [])
     .filter((g) => g && typeof g.id === 'string')
     .map((g) => ({
       id: g.id,
       name: typeof g.name === 'string' && g.name.trim() ? g.name : 'Group',
+      parent: typeof g.parent === 'string' ? g.parent : null,
+      ...(g.transient === true ? { transient: true } : {}),
       members: (Array.isArray(g.members) ? g.members : [])
         .filter((m) => m && (m.type === 'project' || m.type === 'session') && typeof m.ref === 'string')
         .map((m) => {
           const out = { type: m.type, ref: m.ref };
           if (typeof m.under === 'string' && m.under) out.under = m.under;
           if (m.loose === true) out.loose = true;
+          if (typeof m.parent === 'string' && m.parent) out.parent = m.parent;
           return out;
         }),
     }));
-  const released = saved?.released;
-  sgReleased = new Set(Array.isArray(released) ? released.filter((id) => typeof id === 'string') : []);
 }
 
 function persistSessionGroups() {
-  store.writeJson(SESSION_GROUPS_KEY, { version: 1, groups: sessionGroups, released: [...sgReleased] });
+  if (sgRev === null) {
+    showToast('Groups are not loaded from the server; this change is not saved', 'error');
+    return;
+  }
+  sgDirty = true;
+  sgSaving ??= sgFlush().finally(() => {
+    sgSaving = null;
+  });
+}
+
+// Writes run one at a time; edits made meanwhile go out in the next write. A 409 means another
+// board wrote first: its state wins and this board's unsent edit is dropped. A write that does not
+// reach the server is sent again on SSE reconnect.
+async function sgFlush() {
+  while (sgDirty) {
+    sgDirty = false;
+    let res;
+    try {
+      res = await api('/api/groups', {
+        method: 'PUT',
+        body: { rev: sgRev, groups: sessionGroups },
+      });
+    } catch (e) {
+      console.warn('[groups] save failed:', e.message);
+      sgUnsent = true;
+      showToast('Groups not saved: the server is unreachable. Retrying when it is back', 'error');
+      return;
+    }
+    sgUnsent = false;
+    const data = await res.json().catch(() => null);
+    if (res.ok && Number.isInteger(data?.rev)) {
+      sgRev = data.rev;
+      if (!sgDirty) sgTakeCleaned(data);
+      continue;
+    }
+    showToast(
+      res.status === 409
+        ? 'Groups changed in another window; showing the latest'
+        : `Groups not saved (${data?.error || res.status})`,
+      res.status === 409 ? undefined : 'error',
+    );
+    sgDirty = false;
+    const fresh = res.status === 409 ? data : await getJson('/api/groups');
+    if (fresh) sgTakeServer(fresh, true);
+  }
+}
+
+// The server drops what breaks its rules (a member in two groups, a group past the limit) and
+// trims long names; the board shows what was saved.
+function sgTakeCleaned(data) {
+  if (JSON.stringify(data.groups) === JSON.stringify(sessionGroups)) return;
+  sgApplyState(data);
+  renderSessions();
 }
 
 function sgGroupById(id) {
   return sessionGroups.find((g) => g.id === id) || null;
 }
 
+// Matches MAX_DEPTH in lib/user-groups.js.
+const SG_MAX_DEPTH = 8;
+
+function sgSubtreeIds(rootId) {
+  const ids = new Set([rootId]);
+  for (const id of ids) for (const g of sessionGroups) if (g.parent === id) ids.add(g.id);
+  return ids;
+}
+
+function sgPathOf(group) {
+  const names = [];
+  for (let g = group; g && names.length < SG_MAX_DEPTH; g = sgGroupById(g.parent)) names.unshift(g.name);
+  return names.join('/');
+}
+
 function sgGroupOf(type, ref) {
   return sessionGroups.find((g) => g.members.some((m) => m.type === type && m.ref === ref)) || null;
 }
 
-// An individually placed session wins over the placement of its project.
-function sgGroupForSession(session) {
-  return sgUserGroupFor(session) || sgDispatchGroupFor(session);
+const sgMemberOf = (group, type, ref) => group?.members.find((m) => m.type === type && m.ref === ref);
+
+function sgSessionParent(id) {
+  return sgMemberOf(sgGroupOf('session', id), 'session', id)?.parent || null;
 }
 
-function sgUserGroupFor(session) {
+// An individually placed session wins over the placement of its project.
+function sgGroupForSession(session) {
   const project = sessionProjectKey(session);
   return sgGroupOf('session', session.id) || (project ? sgGroupOf('project', project) : null);
 }
 
-// Transient groups come from the server (`dispatch start --group`) and go when their sessions
-// end. They are never written to localStorage; the objects are cached only so collapse state,
-// keyed by id, survives a re-render.
-const transientGroups = new Map();
-
-function sgTransientGroup(name) {
-  let group = transientGroups.get(name);
-  if (!group) {
-    group = { id: `t_${name}`, name, transient: true, members: [] };
-    transientGroups.set(name, group);
-  }
-  return group;
+function sgListFiltered() {
+  return !!searchQuery || activityFilter.size > 0 || (!!filterProject && filterProject !== '__recent__');
+}
+
+// A transient group (`dispatch start --group` made it) goes once the Active view shows none of its
+// sessions: they ended or were dismissed. A session still starting has no card yet, so its
+// terminal or placeholder counts. Only the full Active list can tell, so other views keep them.
+function sgSweepTransient() {
+  if (sgRev === null || !sessionGroups.some((g) => g.transient)) return;
+  if (zenGroup || zenMode || sessionFilter !== 'active' || sessionsHasMore || sgListFiltered()) return;
+  const shown = new Set(getFilteredSessions().map((s) => s.id));
+  const starting = (id) => !dismissedSessionIds.has(id) && (runningTerminals.has(id) || dispatchSpecs.has(id));
+  const present = (m) => m.type !== 'session' || shown.has(m.ref) || starting(m.ref);
+  const gone = groupTree.cascade(sessionGroups, (g) => !!g.transient && !g.members.some(present));
+  if (!gone.size) return;
+  let collapsed = false;
+  for (const g of gone) collapsed = collapsedProjectGroups.delete(sgKey(g.id)) || collapsed;
+  if (collapsed) persistCollapsedGroups();
+  sessionGroups = sessionGroups.filter((g) => !gone.has(g));
+  persistSessionGroups();
 }
 
+const childDepthClass = (depth) => (depth ? ` sg-child sg-depth-${depth}` : '');
+
 function dispatchedTitle({ parent }) {
   const starter = parent && sessions.find((s) => s.id === parent);
   const by = starter ? sessionDisplayName(starter) : 'another session';
   return `Started by ${by}${parent ? ' — click to reveal it' : ''}`;
 }
 
-// A user group with the same name takes the session in, so Keep does not split a group in two.
-function sgDispatchGroupFor(session) {
-  if (sgReleased.has(session.id)) return null;
-  const name = session.dispatchGroup;
-  if (!name) return null;
-  return sessionGroups.find((g) => g.name.toLowerCase() === name) || sgTransientGroup(name);
-}
-
-function sgKeepTransient(name) {
-  const group = sgTransientGroup(name);
-  const members = sessions.filter((s) => sgGroupForSession(s) === group);
-  const kept = sgCreateGroup(name);
-  for (const s of members) kept.members.push({ type: 'session', ref: s.id });
-  persistSessionGroups();
-}
-
-function sgDeleteTransient(name) {
-  const group = sgTransientGroup(name);
-  for (const s of sessions) if (sgGroupForSession(s) === group) sgReleased.add(s.id);
-  persistSessionGroups();
+// A group the user edits is theirs: Keep, a rename or a placement clears the flag.
+function sgKeep(group) {
+  delete group.transient;
 }
 
 function sgDetach(type, ref) {
@@ -4714,10 +4987,13 @@ function sgHostOf(group, session) {
   return null;
 }
 // `opts.under` places the session under another project block of the group; `opts.loose` lifts it
-// out of its project block onto the group's own level.
+// out of its project block onto the group's own level. `opts.parent` follows the server's place():
+// left out, a move inside the group keeps it; null clears it.
 function sgAssign(groupId, type, ref, opts = {}) {
   const group = sgGroupById(groupId);
   if (!group) return;
+  sgKeep(group);
+  const parent = opts.parent !== undefined ? opts.parent : sgMemberOf(group, type, ref)?.parent;
   sgDetach(type, ref);
   // Pulling a whole project in supersedes the individual placements of its sessions.
   if (type === 'project') {
@@ -4731,10 +5007,11 @@ function sgAssign(groupId, type, ref, opts = {}) {
     type === 'session' && !under && !loose && group.members.some((m) => m.type === 'project' && m.ref === own);
   // The group already holds the session's project — a separate placement would only strand
   // the card at the bottom of the group, away from its project block.
-  if (!covered) {
+  if (!covered || parent) {
     const member = { type, ref };
     if (under) member.under = under;
     if (loose) member.loose = true;
+    if (parent) member.parent = parent;
     group.members.push(member);
   }
   persistSessionGroups();
@@ -4744,6 +5021,7 @@ function sgCreateGroup(name) {
   const group = {
     id: `g_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`,
     name: (name || '').trim() || `Group ${sessionGroups.length + 1}`,
+    parent: null,
     members: [],
   };
   sessionGroups.push(group);
@@ -4752,11 +5030,27 @@ function sgCreateGroup(name) {
 }
 
 function sgDeleteGroup(id) {
+  const parent = sgGroupById(id)?.parent ?? null;
   sessionGroups = sessionGroups.filter((g) => g.id !== id);
+  for (const g of sessionGroups) if (g.parent === id) g.parent = parent;
   if (collapsedProjectGroups.delete(sgKey(id))) persistCollapsedGroups();
   persistSessionGroups();
 }
 
+async function sgConfirmDelete(group) {
+  const ok = await confirmModal({
+    title: 'Delete this group?',
+    message: 'Its sessions and projects go back to Projects.',
+    chip: group.name,
+    okLabel: 'Delete group',
+  });
+  if (ok) {
+    sgDeleteGroup(group.id);
+    renderSessions();
+  }
+  return ok;
+}
+
 // Move one member of a group in front of another — the user's own order inside the group.
 function sgReorderMember(groupId, drag, target) {
   const group = sgGroupById(groupId);
@@ -4778,13 +5072,17 @@ function sgReorderGroup(dragId, targetId) {
   persistSessionGroups();
 }
 
-// Typing a group name should surface the sessions inside it.
+// Typing a group name should surface the sessions inside it and inside its child groups.
 function sgSearchMatchIds(query) {
   const ids = new Set();
   if (!query) return ids;
-  const hits = sessionGroups.filter((g) => fuzzyMatch(g.name, query));
-  if (hits.length === 0) return ids;
-  const hitIds = new Set(hits.map((g) => g.id));
+  const hits = new Set(sessionGroups.filter((g) => fuzzyMatch(g.name, query)).map((g) => g.id));
+  if (hits.size === 0) return ids;
+  const underHit = (g) => {
+    for (let p = g, n = 0; p && n < SG_MAX_DEPTH; p = sgGroupById(p.parent), n++) if (hits.has(p.id)) return true;
+    return false;
+  };
+  const hitIds = new Set(sessionGroups.filter(underHit).map((g) => g.id));
   for (const s of sessions) {
     const group = sgGroupForSession(s);
     if (group && hitIds.has(group.id)) ids.add(s.id);
@@ -4806,13 +5104,10 @@ function sgHeaderHtml(group, countHtml) {
   const nameHtml = editing
     ? `<input class="sg-name-input" type="text" value="${escapeHtml(group.name)}" aria-label="Group name" spellcheck="false">`
     : `<span class="group-name">${escapeHtml(group.name)}</span>`;
-  const attrs = group.transient
-    ? `class="session-group-header sg-transient${collapsed ? ' collapsed' : ''}" data-transient-group="${escapeHtml(group.name)}" title="${escapeHtml(group.name)} — goes when its sessions end"`
-    : `class="session-group-header${collapsed ? ' collapsed' : ''}" draggable="${editing ? 'false' : 'true'}" data-group-id="${escapeHtml(group.id)}" title="${escapeHtml(group.name)} — drop sessions or projects here"`;
-  const actions = group.transient
-    ? `<span class="sg-action sg-keep" title="Keep this group after its sessions end">Keep</span>
-          <span class="sg-action sg-delete" title="Delete group (sessions return to Projects)">&times;</span>`
-    : `<span class="sg-action sg-rename" title="Rename group"><svg width="11" height="11" 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>
+  const hint = group.transient ? 'goes when its sessions leave the Active view' : 'drop sessions or projects here';
+  const attrs = `class="session-group-header${group.transient ? ' sg-transient' : ''}${collapsed ? ' collapsed' : ''}${group.id === zenGroup ? ' sg-zen' : ''}" draggable="${editing ? 'false' : 'true'}" data-group-id="${escapeHtml(group.id)}" title="${escapeHtml(group.name)} — ${hint}"`;
+  const actions = `${group.transient ? '<span class="sg-action sg-keep" title="Keep this group after its sessions end">Keep</span>' : ''}
+          <span class="sg-action sg-rename" title="Rename group"><svg width="11" height="11" 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>
           <span class="sg-action sg-delete" title="Delete group (members return to Projects)">&times;</span>
           ${headerPadBtnHtml(_groupScratchpadKey(group.id), group.name)}`;
   return `
@@ -4847,6 +5142,7 @@ function sgCommitRename(input, save) {
   sgEditingId = null;
   if (save && group && value && value !== group.name) {
     group.name = value;
+    sgKeep(group);
     persistSessionGroups();
   }
   renderSessions();
@@ -4857,7 +5153,7 @@ function sgCommitRename(input, save) {
 // At most one zone is lit, so the reference is enough - dragover fires many times a second.
 let sgLitZone = null;
 let sgDragEl = null;
-const SG_LIT_CLASSES = ['sg-drop-over', 'sg-insert-before', 'sg-insert-after'];
+const SG_LIT_CLASSES = ['sg-drop-over', 'sg-insert-before', 'sg-insert-after', 'sg-insert-parent'];
 const SG_LIT_SELECTOR = SG_LIT_CLASSES.map((c) => `.${c}`).join(', ');
 
 function sgClearDropTargets() {
@@ -4882,15 +5178,43 @@ function sgInsertHit(card, e, share) {
   return { zone: card, cls: after ? 'sg-insert-after' : 'sg-insert-before', insert: { card, after } };
 }
 
+// Outside the Active filter the sidebar sorts ungrouped cards itself, so only a group's members,
+// which keep their own order, take an insert there.
 function sgSiblingCard(target) {
-  if (sgDrag?.kind !== 'session' || sessionFilter !== 'active' || !sgDragEl) return null;
+  if (sgDrag?.kind !== 'session' || !sgDragEl) return null;
   const card = target.closest('.session-item');
-  return card && card !== sgDragEl && card.parentElement === sgDragEl.parentElement ? card : null;
+  if (!card || card === sgDragEl || card.parentElement !== sgDragEl.parentElement) return null;
+  if (sessionFilter === 'active') return card;
+  const group = sgGroupOf('session', sgDrag.ref);
+  return group && sgGroupOf('session', card.dataset.sessionId) === group ? card : null;
+}
+
+function sgDescendsFrom(id, ancestor) {
+  for (let p = sgSessionParent(id), n = 0; p && n < SG_MAX_DEPTH; p = sgSessionParent(p), n++) {
+    if (p === ancestor) return true;
+  }
+  return false;
+}
+
+// A child group's header drops into its parent group on its top edge, and wherever its own group
+// would refuse the drop. Without it a session in the child group has no way up when the parent's
+// header is off screen: the gap above is a few pixels.
+// A child group renders inside its parent's body, so that body is the parent's drop zone.
+function sgParentEdgeHit(target, e, hit) {
+  const header = sgDrag?.kind === 'group' ? null : target.closest('.session-group-header[data-group-id]');
+  const parentBody = header?.parentElement.closest('.session-group-sessions[data-group-id]');
+  if (!parentBody) return null;
+  const rect = header.getBoundingClientRect();
+  if (e.clientY - rect.top > rect.height * 0.4 && hit) return null;
+  const up = sgGroupDropZone(parentBody);
+  return up ? { ...up, zone: header, cls: 'sg-insert-parent' } : null;
 }
 
 function sgDropZone(target, e) {
-  const sibling = sgSiblingCard(target);
   const hit = sgGroupDropZone(target);
+  const edge = sgParentEdgeHit(target, e, hit);
+  if (edge) return edge;
+  const sibling = sgSiblingCard(target);
   // Where the middle of a card does nothing, the whole card is an insert target.
   return (sibling && sgInsertHit(sibling, e, hit ? 0.25 : 0.5)) || hit;
 }
@@ -4900,10 +5224,14 @@ function sgInsertSession(dragId, { card, after }) {
   const group = card.closest('.project-group-sessions') ? null : sgGroupOf('session', ref);
   if (group && sgGroupOf('session', dragId)?.id === group.id) {
     // Loose sessions in a named group follow the group's member order, not the sidebar order.
+    // A card set next to another becomes its sibling: it takes that card's parent.
+    const { parent: _old, ...moved } = sgMemberOf(group, 'session', dragId);
+    const parent = sgMemberOf(group, 'session', ref)?.parent;
+    if (parent && parent !== dragId && !sgDescendsFrom(parent, dragId)) moved.parent = parent;
     const members = insertNear(
       group.members.filter((m) => !(m.type === 'session' && m.ref === dragId)),
       (m) => m.type === 'session' && m.ref === ref,
-      { type: 'session', ref: dragId },
+      moved,
       after,
     );
     if (!members) return;
@@ -4949,8 +5277,7 @@ function sgGroupDropZone(target) {
       : null;
   }
   const dragSession = sgDrag.kind === 'session' ? sessions.find((x) => x.id === sgDrag.ref) : null;
-  const releasable = !!dragSession && !sgUserGroupFor(dragSession) && !!sgDispatchGroupFor(dragSession);
-  if (zone.classList.contains('sg-ungroup-zone')) return dragGroup || releasable ? { zone } : null;
+  if (zone.classList.contains('sg-ungroup-zone')) return dragGroup ? { zone } : null;
   const fromGroup = dragSession ? sgGroupForSession(dragSession) : dragGroup;
   const fromGroupId = fromGroup?.id || null;
   // A drop that lands on the host the session already has changes nothing, and highlighting it
@@ -4960,8 +5287,9 @@ function sgGroupDropZone(target) {
   if (groupId) {
     if (!dragSession) return dragGroup?.id === groupId ? null : { zone, groupId };
     if (fromGroupId !== groupId) return { zone, groupId };
-    // Already in this group: its own level is a move only out of a project block.
-    return fromHost ? { zone, groupId, loose: true } : null;
+    // Already in this group: its own level is a move only out of a project block or from under
+    // a parent session.
+    return fromHost || sgSessionParent(dragSession.id) ? { zone, groupId, loose: true, parent: null } : null;
   }
   const targetSessionId = zone.dataset.sessionId;
   if (targetSessionId) {
@@ -4969,22 +5297,18 @@ function sgGroupDropZone(target) {
     const targetSession = sessions.find((s) => s.id === targetSessionId);
     const targetGroup = targetSession ? sgGroupForSession(targetSession) : null;
     const targetGroupId = targetGroup?.id || null;
-    // A transient group holds no members to reorder or place under; a drop there pairs instead.
-    if (targetGroup && !targetGroup.transient) {
-      // Stacking onto a card adopts that card's placement, project block included.
+    if (targetGroup) {
+      // Stacking onto a card nests the dragged session under it, in that card's placement, project
+      // block included.
+      if (sgSessionParent(sgDrag.ref) === targetSessionId && fromGroupId === targetGroupId) return null;
+      if (sgDescendsFrom(targetSessionId, sgDrag.ref)) return null;
       const targetHost = sgHostOf(targetGroup, targetSession);
-      if (targetHost) {
-        return targetHost === fromHost && fromGroupId === targetGroupId
-          ? null
-          : { zone, groupId: targetGroupId, under: targetHost };
-      }
-      // Both loose in the same group: this is a reorder, and only a member has a slot.
-      if (fromGroupId === targetGroupId && !fromHost) {
-        return sgGroupOf('session', targetSessionId)?.id === targetGroupId
-          ? { zone, groupId: targetGroupId, reorder: { type: 'session', ref: targetSessionId } }
-          : null;
-      }
-      return { zone, groupId: targetGroupId, loose: true };
+      return {
+        zone,
+        groupId: targetGroupId,
+        ...(targetHost ? { under: targetHost } : { loose: true }),
+        parent: targetSessionId,
+      };
     }
     return { zone, pairSession: targetSessionId };
   }
@@ -5070,13 +5394,16 @@ function sgOnDrop(e) {
     if (hit.reorder) sgReorderMember(hit.groupId, drag, hit.reorder);
     else if (drag.kind === 'group') sgReorderGroup(drag.ref, hit.groupId);
     else {
-      sgAssign(hit.groupId, drag.kind, drag.ref, { under: hit.under, loose: hit.loose });
+      sgAssign(hit.groupId, drag.kind, drag.ref, {
+        under: hit.under,
+        loose: hit.loose,
+        parent: hit.parent,
+      });
       // A drop shows where the card landed; a move from the context menu leaves the group as it was.
       if (collapsedProjectGroups.delete(sgKey(hit.groupId))) persistCollapsedGroups();
     }
   } else {
     sgDetach(drag.kind, drag.ref);
-    if (drag.kind === 'session') sgReleased.add(drag.ref);
     persistSessionGroups();
   }
   sgFinishDrag();
@@ -5136,11 +5463,6 @@ function initSessionGroupsDnd() {
   sessionsList.addEventListener('touchstart', sgOnTouchStart, { passive: true });
   sessionsList.addEventListener('touchend', sgCancelLongPress);
   sessionsList.addEventListener('touchmove', sgCancelLongPress, { passive: true });
-  window.addEventListener('storage', (e) => {
-    if (e.key !== SESSION_GROUPS_KEY) return;
-    loadSessionGroups();
-    renderSessions();
-  });
 }
 //#endregion
 
@@ -5218,7 +5540,7 @@ function sgOpenMenu(x, y, kind, ref) {
     .filter((g) => g.id !== current?.id)
     .map(
       (g) =>
-        `<button class="sg-menu-item" role="menuitem" data-sg-move="${escapeHtml(g.id)}">${escapeHtml(g.name)}</button>`,
+        `<button class="sg-menu-item" role="menuitem" data-sg-move="${escapeHtml(g.id)}">${escapeHtml(sgPathOf(g))}</button>`,
     )
     .join('');
   const menu = document.createElement('div');
@@ -5414,7 +5736,7 @@ function getNavigableItems() {
         }
       } else if (child.classList.contains('session-item')) {
         items.push(child);
-      } else if (child.classList.contains('project-group-header')) {
+      } else if (child.classList.contains('project-group-header') || child.classList.contains('session-group-header')) {
         items.push(child);
         if (!collapsedProjectGroups.has(child.dataset.groupPath)) {
           walkGroupContainer(getGroupSessionsContainer(child));
@@ -5494,6 +5816,10 @@ function setGroupCollapsed(header, collapsed) {
   if (!header) return;
   const projectPath = header.dataset.groupPath;
   if (collapsed === collapsedProjectGroups.has(projectPath)) return;
+  if (collapsed && projectPath === pinPeekKey) {
+    pinPeekKey = null;
+    pinPeekClosedFor = currentSessionId;
+  }
   if (collapsed) collapsedProjectGroups.add(projectPath);
   else collapsedProjectGroups.delete(projectPath);
   header.classList.toggle('collapsed', collapsed);
@@ -5503,7 +5829,7 @@ function setGroupCollapsed(header, collapsed) {
 }
 
 function persistCollapsedGroups() {
-  store.writeJson(COLLAPSED_GROUPS_KEY, [...collapsedProjectGroups]);
+  store.writeJson(COLLAPSED_GROUPS_KEY, [...collapsedProjectGroups, ...(pinPeekKey ? [pinPeekKey] : [])]);
 }
 
 let prevActiveSessionIds = null; // null until primed by the first onlyNew pass
@@ -5533,16 +5859,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 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:
+// the project or the session itself and the project block it renders under there, and the section header that holds it
+// (a collapsed Pinned sub-section opens only for the open session, see syncPinPeek):
 // Groups for a grouped session, else Projects or Sessions, which depends on the view. Returns
 // whether anything changed.
 function uncollapseFor(session) {
   const group = sgGroupForSession(session);
   const keys = [
-    sessionProjectKey(session) || '__ungrouped__',
-    ...pinnedCollapseKeys(session),
-    ...(group ? [sgKey(group.id), sgHostOf(group, session), SECTION_GROUPS] : [SECTION_PROJECTS, SECTION_SESSIONS]),
+    ...(group
+      ? [sgKey(group.id), sgHostOf(group, session), SECTION_GROUPS]
+      : [sessionProjectKey(session) || '__ungrouped__', SECTION_PROJECTS, SECTION_SESSIONS]),
   ];
   let changed = false;
   for (const key of keys) {
@@ -5554,23 +5880,25 @@ function uncollapseFor(session) {
 function pinnedCollapseKeys(session) {
   if (!isInPinnedGroup(session)) return [];
   const group = sgGroupForSession(session);
+  if (!group) return [pinKey(sessionProjectKey(session) || '__ungrouped__')];
   const host = sgHostOf(group, session);
-  return [
-    pinKey(sessionProjectKey(session) || '__ungrouped__'),
-    host && pinKey(host),
-    group && `__pinned_group_${group.id}__`,
-  ];
+  return [host ? pinKey(host) : `__pinned_group_${group.id}__`];
 }
 
-// A card that moves into a collapsed Pinned sub-section would vanish from under the click.
-function expandPinnedFor(sessionId) {
-  const session = sessions.find((s) => s.id === sessionId);
-  if (!session) return;
-  let changed = false;
-  for (const key of pinnedCollapseKeys(session)) {
-    if (key && collapsedProjectGroups.delete(key)) changed = true;
-  }
-  if (changed) persistCollapsedGroups();
+// A Pinned sub-section the user collapsed opens while the open session is in it and closes once
+// the user leaves that session. The peek is never saved: persistCollapsedGroups writes the key back.
+let pinPeekKey = null;
+let pinPeekClosedFor = null;
+
+function syncPinPeek() {
+  if (pinPeekClosedFor !== currentSessionId) pinPeekClosedFor = null;
+  const session = currentSessionId && !pinPeekClosedFor ? sessions.find((s) => s.id === currentSessionId) : null;
+  const key = session ? (pinnedCollapseKeys(session)[0] ?? null) : null;
+  const want = key && (key === pinPeekKey || collapsedProjectGroups.has(key)) ? key : null;
+  if (want === pinPeekKey) return;
+  if (pinPeekKey) collapsedProjectGroups.add(pinPeekKey);
+  if (want) collapsedProjectGroups.delete(want);
+  pinPeekKey = want;
 }
 
 function isGroupHeader(el) {
@@ -5636,6 +5964,7 @@ function activateSelectedSession(items) {
 }
 
 function setFocusZone(zone, target) {
+  passTerminalZoneOn = false;
   clearKbSelection();
   clearTaskSelection();
 
@@ -5898,6 +6227,23 @@ async function saveTaskField(taskId, sessionId, field, value) {
   }
 }
 
+const DETAIL_LAYOUT_KEY = 'cck-detail-layout';
+
+function setDetailExpanded(expanded) {
+  detailPanel.classList.toggle('expanded', expanded);
+  const btn = document.getElementById('expand-detail');
+  btn.innerHTML = showIcon(expanded ? 'restore' : 'expand');
+  btn.title = expanded ? 'Restore (E)' : 'Expand (E)';
+  btn.setAttribute('aria-label', expanded ? 'Restore' : 'Expand');
+  store.setItem(DETAIL_LAYOUT_KEY, expanded ? 'expanded' : '');
+}
+
+function initDetailLayout() {
+  document.getElementById('expand-detail').onclick = () =>
+    setDetailExpanded(!detailPanel.classList.contains('expanded'));
+  setDetailExpanded(store.getItem(DETAIL_LAYOUT_KEY) === 'expanded');
+}
+
 function closeDetailPanel() {
   detailPanel.classList.remove('visible');
   document.getElementById('delete-task-btn').style.display = 'none';
@@ -5911,10 +6257,30 @@ function closeDetailPanel() {
 // Set while #confirm-modal is open; settles the open confirmModal() promise.
 let closeConfirmModal = null;
 
-function confirmModal({ title, message, okLabel }) {
+// chip: the object named in one line. items: [{state, label, meta}] rows, state in busy|wait|idle (a dot) or
+// omitted (no dot); steps: plain strings shown as what will happen; warn: a line under the list.
+function confirmModal({ title, message, okLabel, chip, items, steps, warn }) {
   const modal = document.getElementById('confirm-modal');
   document.getElementById('confirm-modal-title').textContent = title;
   document.getElementById('confirm-modal-message').textContent = message;
+  const chipEl = document.getElementById('confirm-modal-chip');
+  chipEl.hidden = !chip;
+  chipEl.textContent = chip || '';
+  const listEl = document.getElementById('confirm-modal-list');
+  const rows = [
+    ...(items || []).map(
+      (it) =>
+        `<div class="confirm-row">${it.state ? `<span class="confirm-dot ${escapeHtml(it.state)}"></span>` : ''}<span class="confirm-row-label">${escapeHtml(it.label)}</span><span class="confirm-row-meta">${escapeHtml(it.meta || '')}</span></div>`,
+    ),
+    ...(steps || []).map(
+      (s) => `<div class="confirm-row confirm-step"><span class="confirm-row-label">${escapeHtml(s)}</span></div>`,
+    ),
+  ];
+  listEl.hidden = !rows.length;
+  listEl.innerHTML = rows.join('');
+  const warnEl = document.getElementById('confirm-modal-warn');
+  warnEl.hidden = !warn;
+  warnEl.textContent = warn || '';
   const buttons = [document.getElementById('confirm-cancel-btn'), document.getElementById('confirm-ok-btn')];
   buttons[1].textContent = okLabel;
   const returnFocus = document.activeElement;
@@ -5946,11 +6312,15 @@ async function deleteTask(taskId, sessionId) {
   const task = currentTasks.find((t) => t.id === taskId);
   if (!task) return;
   const ok = await confirmModal({
-    title: 'Delete Task',
-    message: `Delete task "${task.subject}"? This cannot be undone.`,
-    okLabel: 'Delete',
+    title: 'Delete this task?',
+    message: 'It is removed from the board. This cannot be undone.',
+    chip: task.subject,
+    okLabel: 'Delete task',
   });
   if (!ok) return;
+  const info = taskId === selectedTaskId ? getSelectedCardInfo() : null;
+  const colCards = info ? Array.from(COLUMNS[info.colIndex].el.querySelectorAll('.task-card')) : [];
+  const next = colCards[info?.cardIndex + 1] || colCards[info?.cardIndex - 1];
 
   try {
     const res = await api(apiPath`/api/tasks/${sessionId}/${taskId}`, { method: 'DELETE' });
@@ -5958,6 +6328,14 @@ async function deleteTask(taskId, sessionId) {
     if (res.ok) {
       closeDetailPanel();
       await refreshCurrentView();
+      if (info && focusZone === 'board') {
+        if (next) {
+          selectTask(next.dataset.taskId, next.dataset.sessionId);
+        } else {
+          selectedTaskId = null;
+          navigateVertical(1);
+        }
+      }
     } else {
       const error = await res.json().catch(() => ({}));
       showToast(`Failed to delete task: ${error.error || 'Unknown error'}`, 'error');
@@ -5994,6 +6372,7 @@ const SHORTCUT_TABS = [
         rows: [
           { keys: ['Enter'], label: 'Toggle task detail panel' },
           { keys: ['D'], label: 'Delete selected task' },
+          { keys: ['E'], label: 'Expand / restore task detail panel' },
           { keys: ['N'], label: 'Toggle scratchpad (in the sidebar: the item under the cursor)' },
           { keys: ['Ctrl', 'E'], combo: true, label: 'Set the session scratchpad emoji (in the scratchpad)' },
           { keys: ['R'], label: 'Refresh data' },
@@ -6017,7 +6396,13 @@ const SHORTCUT_TABS = [
           { keys: ['\\'], label: 'Toggle sidebar' },
           { 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)' },
+          { keys: ['←', '→'], label: 'Storage manager: switch tab' },
+          {
+            keys: ['Ctrl', 'Shift', 'Z'],
+            combo: true,
+            label: 'Zen mode (current session, or the group under the cursor)',
+          },
+          { keys: ['Ctrl', 'Shift', 'K'], combo: true, label: 'Show / hide Kanbot' },
           { keys: ['Ctrl', '+'], combo: true, label: 'Larger modal text' },
           { keys: ['Ctrl', '−'], combo: true, label: 'Smaller modal text' },
           { keys: ['Ctrl', '0'], combo: true, label: 'Reset modal text size' },
@@ -6135,6 +6520,14 @@ const IS_MAC = /^Mac/i.test(navigator.userAgentData?.platform || navigator.platf
 const MAC_KEYS = { Ctrl: '⌃', Alt: '⌥', Shift: '⇧' };
 if (IS_MAC) document.getElementById('new-session-btn')?.setAttribute('title', 'New session (⌃⌥N)');
 
+// Ctrl+Enter sends on macOS as Cmd+Enter too (the handlers accept metaKey), so the hints show ⌘ and ⌥ there.
+function sendKbd() {
+  return `<kbd>${IS_MAC ? '⌘' : 'Ctrl'}</kbd>+<kbd>Enter</kbd>`;
+}
+function termKbd() {
+  return `<kbd>${IS_MAC ? '⌥' : 'Alt'}</kbd>+<kbd>\`</kbd>`;
+}
+
 // 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.
@@ -6624,12 +7017,17 @@ function _renderOrphanGroup(count, innerHtml) {
   return _renderProjectGroup('Orphaned', `<span class="storage-item-badge orphan">${count}</span>`, innerHtml);
 }
 
+function _markStorageTab(tab) {
+  document.querySelectorAll('.storage-tab').forEach((t) => {
+    t.classList.toggle('active', t.dataset.tab === tab);
+    t.setAttribute('aria-selected', String(t.dataset.tab === tab));
+  });
+}
+
 async function showStorageManager() {
   _storageKnownSessions = null;
   _updateStorageTotal();
-  document.querySelectorAll('.storage-tab').forEach((t) => {
-    t.classList.toggle('active', t.dataset.tab === 'sessions');
-  });
+  _markStorageTab('sessions');
   const modal = document.getElementById('storage-modal');
   modal.classList.add('visible');
   const known = await _fetchKnownSessions().catch(() => null);
@@ -6644,9 +7042,14 @@ function closeStorageManager() {
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function switchStorageTab(tab) {
-  document.querySelectorAll('.storage-tab').forEach((t) => {
-    t.classList.toggle('active', t.dataset.tab === tab);
-  });
+  _markStorageTab(tab);
+  _renderStorageTab();
+}
+
+function stepStorageTab(step) {
+  const tabs = [...document.querySelectorAll('.storage-tab')];
+  const i = tabs.findIndex((t) => t.classList.contains('active'));
+  _markStorageTab(tabs[(i + step + tabs.length) % tabs.length].dataset.tab);
   _renderStorageTab();
 }
 
@@ -6655,9 +7058,14 @@ function _renderStorageTab() {
   if (!modal?.classList.contains('visible')) return;
   const body = document.getElementById('storage-modal-body');
   const tab = document.querySelector('.storage-tab.active')?.dataset.tab || 'sessions';
+  const groupsClean = document.getElementById('storage-groups-clean-btn');
+  groupsClean.style.display = tab === 'groups' ? '' : 'none';
+  groupsClean.disabled = true;
   if (tab === 'sessions') body.innerHTML = _renderStorageSessions();
+  else if (tab === 'dismissed') body.innerHTML = _renderStorageDismissed();
   else if (tab === 'scratchpads') body.innerHTML = _renderStorageScratchpads();
   else if (tab === 'linked-docs') body.innerHTML = _renderStorageLinkedDocs();
+  else if (tab === 'groups') _renderStorageGroups(body);
 }
 
 function _renderStorageSessions() {
@@ -6733,6 +7141,35 @@ function _renderStorageSessions() {
   return html;
 }
 
+function _renderStorageDismissed() {
+  const ids = [...dismissedSessionIds.keys()];
+  if (!ids.length) return '<div class="storage-empty">No dismissed sessions</div>';
+  const { groups, orphans } = _groupByProject(ids);
+  const renderItem = ({ id, session }) => `<div class="storage-item">
+      <span class="storage-item-id">${_sessionLabel(session, id)}</span>
+      <span class="storage-item-meta">dismissed ${formatDate(dismissedSessionIds.get(id))}</span>
+      <div class="storage-item-actions">
+        <button onclick="_storageViewSession('${escAttrJs(id)}')">View</button>
+        <button onclick="_storageRestoreSession('${escAttrJs(id)}')">Restore</button>
+      </div>
+    </div>`;
+  let html = '';
+  for (const [project, items] of groups) {
+    html += _renderProjectGroup(
+      escapeHtml(_projectLabel(project)),
+      `${items.length} session${items.length > 1 ? 's' : ''}`,
+      items.map(renderItem).join(''),
+    );
+  }
+  if (orphans.length) html += _renderOrphanGroup(orphans.length, orphans.map(renderItem).join(''));
+  return html;
+}
+
+function _storageRestoreSession(id) {
+  setSessionDismissed(id, false);
+  _renderStorageTab();
+}
+
 async function _storageViewSession(id) {
   closeStorageManager();
   revealedStorageSessionId = id;
@@ -6741,7 +7178,7 @@ async function _storageViewSession(id) {
 
 function _storageUnpinSession(id) {
   clearSessionPin(id);
-  savePinnedSessions();
+  sendPinChange(id);
   renderSessions();
   _renderStorageTab();
   _updateStorageTotal();
@@ -6963,6 +7400,76 @@ function _storageClearLinkedDocs(sessionId) {
   afterLinkedDocsChanged(sessionId);
 }
 
+async function _storageGroupsClean(group, dryRun) {
+  const shown = await getJson('/api/sessions', null, { query: { filter: 'active', limit: 'all', lite: '1' } });
+  if (!Array.isArray(shown)) throw new Error('could not list sessions');
+  const res = await api('/api/groups/clean', {
+    method: 'POST',
+    body: { group, dryRun, keep: shown.map((s) => s.id), hide: [...dismissedSessionIds.keys()] },
+  });
+  if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || `HTTP ${res.status}`);
+  return res.json();
+}
+
+async function _renderStorageGroups(body) {
+  body.innerHTML = '<div class="storage-empty">Loading groups…</div>';
+  let out;
+  try {
+    out = await _storageGroupsClean(null, true);
+  } catch (e) {
+    out = { error: e.message };
+  }
+  _showStorageGroups(body, out);
+}
+
+function _showStorageGroups(body, out) {
+  if (document.querySelector('.storage-tab.active')?.dataset.tab !== 'groups') return;
+  document.getElementById('storage-groups-clean-btn').disabled = !out.groups?.some((g) => g.hidden);
+  if (out.error) {
+    body.innerHTML = `<div class="storage-empty">Could not load groups: ${escapeHtml(out.error)}</div>`;
+    return;
+  }
+  if (!out.groups.length) {
+    body.innerHTML = '<div class="storage-empty">No groups</div>';
+    return;
+  }
+  const rows = out.groups
+    .map((g) => {
+      const badge = g.hidden ? ` <span class="storage-item-badge">${g.hidden} hidden</span>` : '';
+      return `<div class="storage-group-header storage-group-row">
+      <span>${escapeHtml(g.path)}${badge}</span>
+      <div class="storage-item-actions">
+        <span class="storage-item-meta">${g.members} member${g.members === 1 ? '' : 's'}</span>
+        <button class="danger" title="Take out the hidden sessions, here and in the groups under it" onclick="_storageCleanGroup('${escAttrJs(g.id)}')">Clean</button>
+        <button class="danger" onclick="_storageDeleteGroup('${escAttrJs(g.id)}')">Delete</button>
+      </div>
+    </div>`;
+    })
+    .join('');
+  const hidden = out.groups.reduce((n, g) => n + g.hidden, 0);
+  body.innerHTML = _renderProjectGroup('Groups', `${hidden} hidden`, rows);
+}
+
+async function _storageCleanGroup(group) {
+  let out;
+  try {
+    out = await _storageGroupsClean(group, false);
+  } catch (e) {
+    showToast(`Clean failed: ${e.message}`, 'error');
+    return;
+  }
+  const n = out.dropped;
+  showToast(n ? `Took ${n} hidden session${n === 1 ? '' : 's'} out of the groups` : 'No hidden sessions');
+  _showStorageGroups(document.getElementById('storage-modal-body'), out);
+}
+
+async function _storageDeleteGroup(id) {
+  const group = sgGroupById(id);
+  if (!group || !(await sgConfirmDelete(group))) return;
+  await sgSaving;
+  _renderStorageTab();
+}
+
 function _findOrphanedKeys(known) {
   if (!known.size) return [];
   const orphaned = [];
@@ -6972,7 +7479,7 @@ function _findOrphanedKeys(known) {
   for (const key of store.keys()) {
     const pad = _parsePadKey(key);
     if (pad?.kind === 'group') {
-      if (!sgGroupById(pad.id)) orphaned.push(key);
+      if (sgRev !== null && !sgGroupById(pad.id)) orphaned.push(key);
       continue;
     }
     const prefix = pad ? null : sessionKeyPrefixes.find((p) => key.startsWith(p));
@@ -7001,13 +7508,10 @@ async function cleanupOrphanedStorage() {
   const orphaned = _findOrphanedKeys(known);
   const unpinned = new Set();
   for (const key of orphaned) {
-    if (key.startsWith('__pinned__')) {
-      const id = key.slice('__pinned__'.length);
-      pinnedSessionIds.delete(id);
-      unpinned.add(id);
-    } else if (key.startsWith('__sticky__')) {
-      const id = key.slice('__sticky__'.length);
-      stickySessionIds.delete(id);
+    const pin = /^__(pinned|sticky)__/.exec(key);
+    if (pin) {
+      const id = key.slice(pin[0].length);
+      clearSessionPin(id);
       unpinned.add(id);
     } else {
       store.removeItem(key);
@@ -7015,8 +7519,7 @@ async function cleanupOrphanedStorage() {
       if (key.startsWith(PREVIEW_STORAGE_PREFIX)) forgetServerLinkedDoc(key.slice(PREVIEW_STORAGE_PREFIX.length));
     }
   }
-  if (unpinned.size) savePinnedSessions();
-  for (const id of unpinned) offloadSessionPin(id);
+  if (unpinned.size) postPins({ ids: [...unpinned], state: 'none' });
   const removed = orphaned.length;
 
   showToast(removed ? `Cleaned ${removed} orphaned item${removed > 1 ? 's' : ''}` : 'No orphaned items found');
@@ -7077,21 +7580,28 @@ function dismissSessionFromList(sid) {
 }
 
 async function confirmDismissBlockers(sid) {
-  const sticky = stickySessionIds.has(sid);
+  const pinState = getSessionPinState(sid);
+  const pinned = pinState !== 'none';
   const terminal = runningTerminals.has(sid);
-  if (!sticky && !terminal) return true;
+  if (!pinned && !terminal) return true;
   const session = sessions.find((s) => s.id === sid);
   const name = session ? sessionDisplayName(session) : sid.slice(0, 8);
-  const has = [sticky && 'a sticky pin', terminal && 'a running terminal'].filter(Boolean).join(' and ');
-  const [title, verb, okLabel] =
-    sticky && terminal
-      ? ['Unpin and End Terminal', 'Unpin, end the terminal', 'Unpin, end and dismiss']
-      : sticky
-        ? ['Remove Sticky Pin', 'Remove the pin', 'Unpin and dismiss']
-        : ['End Terminal', 'End the terminal', 'End and dismiss'];
-  const ok = await confirmModal({ title, message: `"${name}" has ${has}. ${verb} and dismiss the session?`, okLabel });
+  const pinLabel = pinState === 'sticky' ? 'sticky pin' : 'pin';
+  const has = [pinned && `a ${pinLabel}`, terminal && 'a running terminal'].filter(Boolean).join(' and ');
+  const okLabel = pinned && terminal ? 'Unpin, end and dismiss' : pinned ? 'Unpin and dismiss' : 'End and dismiss';
+  const steps = [
+    pinned && `Remove the ${pinLabel}`,
+    terminal && 'End the terminal',
+    'Hide the session from the sidebar',
+  ].filter(Boolean);
+  const ok = await confirmModal({
+    title: `Dismiss “${name}”?`,
+    message: `The session has ${has}.`,
+    steps,
+    okLabel,
+  });
   if (!ok) return false;
-  if (sticky) unpinSession(sid);
+  if (isAnyPinned(sid)) unpinSession(sid);
   if (terminal) closeTerminalSession(sid);
   return true;
 }
@@ -7190,19 +7700,36 @@ document.addEventListener('keydown', (e) => {
     } else if (e.key === '?' && document.getElementById('help-modal').classList.contains('visible')) {
       e.preventDefault();
       closeHelpModal();
+    } else if (
+      matchKey(e, 'ArrowLeft', 'ArrowRight') &&
+      [...document.querySelectorAll('.modal-overlay.visible')].at(-1)?.id === 'storage-modal'
+    ) {
+      e.preventDefault();
+      stepStorageTab(matchKey(e, 'ArrowLeft') ? -1 : 1);
     } else if (shiftOnly(e, 'KeyM') && document.getElementById('msg-detail-modal').classList.contains('visible')) {
       e.preventDefault();
       closeMsgDetailModal();
     } else if (document.getElementById('msg-detail-modal').classList.contains('visible')) {
-      if (
-        e.key === 'Enter' &&
-        (e.ctrlKey || e.metaKey) &&
-        currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX &&
-        isWaitingAnswerable() &&
-        currentWaiting.kind !== 'question'
-      ) {
+      const askOpen = currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX && isWaitingAnswerable();
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && askOpen && currentWaiting.kind !== 'question') {
         e.preventDefault();
         respondWaiting({ behavior: 'allow' });
+      } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && askOpen) {
+        e.preventDefault();
+        submitWaitingAnswers();
+      } else if (
+        askOpen &&
+        currentWaiting.kind === 'question' &&
+        !e.ctrlKey &&
+        !e.metaKey &&
+        !e.altKey &&
+        /^[1-9]$/.test(e.key)
+      ) {
+        e.preventDefault();
+        pickWaitingOptionByNumber(Number(e.key) - 1);
+      } else if (askOpen && currentWaiting.kind === 'question' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+        e.preventDefault();
+        setWaitingTab(waitingTab + (e.key === 'ArrowRight' ? 1 : -1));
       } else if (matchKey(e, 'ArrowDown')) {
         e.preventDefault();
         if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
@@ -7234,6 +7761,20 @@ document.addEventListener('keydown', (e) => {
     return;
   }
 
+  if (
+    e.key === 'Enter' &&
+    (e.ctrlKey || e.metaKey) &&
+    !e.altKey &&
+    !e.shiftKey &&
+    isWaitingFresh() &&
+    isWaitingAnswerable() &&
+    currentWaiting.kind !== 'question'
+  ) {
+    e.preventDefault();
+    respondWaiting({ behavior: 'allow' });
+    return;
+  }
+
   // Global shortcuts
   if (matchKey(e, '\\')) {
     e.preventDefault();
@@ -7242,11 +7783,15 @@ document.addEventListener('keydown', (e) => {
   }
   if (matchKey(e, '[', ']') && cyclePaneStrip(e.key === ']' ? 1 : -1)) {
     e.preventDefault();
+    focusActivePane();
     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();
+    if (cyclePane(e.code === 'BracketRight' ? 1 : -1)) {
+      e.preventDefault();
+      focusActivePane();
+    }
     return;
   }
   if (altOnly && e.code === 'KeyW' && closeFocusedPane()) {
@@ -7264,6 +7809,7 @@ document.addEventListener('keydown', (e) => {
   }
   if (plainShift && (e.key === '{' || e.key === '}') && focusPaneSide(e.key === '{' ? 'l' : 'r')) {
     e.preventDefault();
+    focusActivePane();
     return;
   }
   if (shiftOnly(e, 'KeyL')) {
@@ -7311,8 +7857,12 @@ document.addEventListener('keydown', (e) => {
 
   // Tab toggles focus zone
   if (e.key === 'Tab' && detailPanel.contains(e.target)) return;
+  // A focused pane document keeps the arrow, page and space keys for scrolling.
+  const inPane = paneViews.contains(e.target);
+  if (inPane && e.key !== 'Tab' && e.key !== 'Escape') return;
   if (e.key === 'Tab') {
     e.preventDefault();
+    if (inPane) e.target.blur();
     // The terminal replaces the board, so it takes the board's place in the Tab cycle.
     if (wantsTerminal()) {
       if (focusZone === 'sidebar') focusTerminalPane();
@@ -7393,6 +7943,12 @@ document.addEventListener('keydown', (e) => {
       deleteTask(selectedTaskId, selectedSessionId || currentSessionId);
       return;
     }
+
+    if (matchKey(e, 'KeyE') && detailPanel.classList.contains('visible')) {
+      e.preventDefault();
+      setDetailExpanded(!detailPanel.classList.contains('expanded'));
+      return;
+    }
   }
 
   if (e.key === 'Escape') {
@@ -7739,6 +8295,31 @@ function reviewBridge(textBefore, headingBefore, rangeAt, comboOf, fieldSelector
     (document.head || document.documentElement).append(style);
   }
   const send = (msg) => parent.postMessage({ ...msg, type: P + msg.type }, '*');
+  const fields = (form, submitter) => {
+    const out = {};
+    for (const [k, v] of new FormData(form, submitter)) {
+      if (typeof v !== 'string') continue;
+      out[k] = k in out ? [].concat(out[k], v) : v;
+    }
+    return out;
+  };
+  const labelOf = (el, fallback) => (el?.textContent || el?.value || '').trim().slice(0, 200) || fallback;
+  addEventListener('click', (e) => {
+    const b = e.target.closest?.('[data-cck-action]');
+    if (!b || (b.form?.matches('[data-cck-submit]') && b.type === 'submit')) return;
+    e.preventDefault();
+    const action = b.dataset.cckAction;
+    send({ type: 'action', action, label: labelOf(b, action), data: b.form ? fields(b.form) : {} });
+  });
+  // The sandbox allows forms so validation runs. Every submit stops here, so a page still cannot
+  // navigate its frame with a form: a show card's form-action 'none' does not stop a GET to about:srcdoc.
+  addEventListener('submit', (e) => {
+    e.preventDefault();
+    const f = e.target.closest?.('form[data-cck-submit]');
+    if (!f) return;
+    const action = f.dataset.cckSubmit;
+    send({ type: 'action', action, label: labelOf(e.submitter, action), data: fields(f, e.submitter) });
+  });
   const describe = (node) => {
     const el = node.nodeType === 1 ? node : node.parentElement;
     if (!el) return {};
@@ -7922,10 +8503,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' && type !== 'scroll') return;
+  if (type !== 'link' && type !== 'key' && type !== 'scroll' && type !== 'action') return;
   const frame = bridgedFrameEls().find((f) => f.contentWindow === e.source);
   if (!frame) return;
-  if (type === 'scroll') paneFrameScroll.set(frame, { x: e.data.x, y: e.data.y });
+  if (type === 'action') sendPreviewAction(frame, e.data);
+  else 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);
@@ -8138,6 +8720,24 @@ function renderReviewPanel() {
       .join('')}</ol>`;
 }
 
+async function toastDelivery({ delivered, markdown }, noun) {
+  if (delivered === 'doorbell') return showToast('Queued for the session', 'success');
+  if (delivered === 'terminal') return showToast('Pasted into the terminal: press Enter there to send', 'info');
+  const copy = async () => {
+    const copied = await navigator.clipboard.writeText(markdown).then(
+      () => true,
+      () => false,
+    );
+    showToast(
+      copied ? `Copied the ${noun}. Paste it into the session.` : `Failed to copy the ${noun}`,
+      'info',
+      { label: 'Copy again', onClick: copy },
+      `Sessions get ${noun}s directly when the cck plugin runs there and board events are on.`,
+    );
+  };
+  await copy();
+}
+
 async function sendReview() {
   if (!activeReview) return;
   const { sessionId, source, key, onSent } = activeReview;
@@ -8150,30 +8750,49 @@ async function sendReview() {
     });
     const data = await res.json();
     if (!res.ok) return showToast(data.error || 'Review failed', 'error');
-    if (data.delivered === 'doorbell') showToast('Queued for the session', 'success');
-    else if (data.delivered === 'terminal') showToast('Pasted into the terminal: press Enter there to send', 'info');
-    else {
-      const { markdown } = data;
-      const copy = async () => {
-        const copied = await navigator.clipboard.writeText(markdown).then(
-          () => true,
-          () => false,
-        );
-        showToast(
-          copied ? 'Copied the review. Paste it into the session.' : 'Failed to copy the review',
-          'info',
-          { label: 'Copy again', onClick: copy },
-          'Sessions get reviews directly when the cck plugin runs there and board events are on.',
-        );
-      };
-      await copy();
-    }
+    await toastDelivery(data, 'review');
     clearReviewDrafts(key);
     if (activeReview?.key === key) onSent?.();
   } catch {
     showToast('Failed to send the review', 'error');
   }
 }
+
+// A page script can post an action without a click, so the board sends it only with transient
+// user activation, which a click in the frame gives to the board too.
+const ACTION_REPEAT_MS = 1000;
+let lastAction = null;
+
+function reviewOptsOfFrame(frame) {
+  return (
+    [...reviewStack, reviewBase, showState.review].find((o) => o?.frame === frame) ||
+    paneReviews.get(frame.parentElement) ||
+    null
+  );
+}
+
+async function sendPreviewAction(frame, msg) {
+  if (!navigator.userActivation?.isActive) return;
+  const opts = reviewOptsOfFrame(frame);
+  if (!opts?.sessionId) return;
+  const key = `${msg.action}\n${JSON.stringify(msg.data)}`;
+  const now = Date.now();
+  if (lastAction?.frame === frame && lastAction.key === key && now - lastAction.at < ACTION_REPEAT_MS) return;
+  lastAction = { frame, key, at: now };
+  try {
+    const res = await terminalFetch(apiPath`/api/sessions/${opts.sessionId}/action`, 'POST', {
+      source: opts.source,
+      action: msg.action,
+      label: msg.label,
+      data: msg.data,
+    });
+    const out = await res.json();
+    if (!res.ok) return showToast(out.error || 'Send failed', 'error');
+    await toastDelivery(out, 'answer');
+  } catch {
+    showToast('Failed to send the answer', 'error');
+  }
+}
 //#endregion
 
 //#region MARKDOWN_PREVIEW
@@ -8284,7 +8903,7 @@ function renderFrontmatterBlock(fm) {
 // allow-same-origin puts it on an opaque origin, so it cannot touch this app's
 // storage, DOM or API. srcdoc has no base URL, so the server has already embedded
 // the document's local assets (lib/inline-assets.js); remote refs load normally.
-function createPreviewFrame(className, srcdoc, sandbox = 'allow-scripts allow-popups') {
+function createPreviewFrame(className, srcdoc, sandbox = 'allow-scripts allow-popups allow-forms') {
   const frame = document.createElement('iframe');
   frame.className = className;
   frame.setAttribute('sandbox', sandbox);
@@ -8306,6 +8925,10 @@ function isAbsolutePath(p) {
   return /^([a-zA-Z]:[\\/]|[\\/])/.test(p);
 }
 
+function isUrlRef(s) {
+  return /^[a-z][a-z0-9+.-]*:/i.test(s) || s.startsWith('//');
+}
+
 function bindPreviewRelativeLinks(bodyEl, baseOf = () => currentPreviewPath) {
   if (bodyEl.dataset.relLinkBound) return;
   bodyEl.addEventListener('click', (e) => {
@@ -8313,8 +8936,7 @@ function bindPreviewRelativeLinks(bodyEl, baseOf = () => currentPreviewPath) {
     if (!a) return;
     const href = a.getAttribute('href');
     if (!href || href.startsWith('#')) return;
-    const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//');
-    if (isAbsoluteUrl) return;
+    if (isUrlRef(href)) return;
     const cleanHref = href.replace(/#.*$/, '');
     e.preventDefault();
     openPreviewByPath(cleanHref, isAbsolutePath(href) ? undefined : baseOf(a), openFileInEditor);
@@ -8366,10 +8988,37 @@ function renderPreviewContent(bodyEl, filePath, content, kind) {
     bodyEl.replaceChildren(img);
   } else {
     const { fm, body } = splitFrontmatter(content);
-    bodyEl.innerHTML = (fm ? renderFrontmatterBlock(fm) : '') + renderMarkdown(body);
+    bodyEl.innerHTML = (fm ? renderFrontmatterBlock(fm) : '') + renderMarkdownFile(body, filePath);
+  }
+}
+
+// A relative src would resolve against the board's URL, and DOMPurify drops a drive path (`C:/x`
+// reads as a scheme), so the hook moves a local image to the image route before that check.
+function renderMarkdownFile(text, filePath) {
+  if (!filePath || typeof DOMPurify === 'undefined') return renderMarkdown(text);
+  DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
+    if (node.nodeName === 'IMG' && data.attrName === 'src') data.attrValue = localImageUrl(data.attrValue, filePath);
+  });
+  try {
+    return renderMarkdown(text);
+  } finally {
+    DOMPurify.removeHook('uponSanitizeAttribute');
   }
 }
 
+function localImageUrl(src, base) {
+  const fileUrl = /^file:/i.test(src);
+  if (src.startsWith('//') || (!fileUrl && !isAbsolutePath(src) && isUrlRef(src))) return src;
+  let p = src;
+  if (!fileUrl) {
+    p = src.replace(/[?#].*$/, '');
+    try {
+      p = decodeURI(p);
+    } catch {}
+  }
+  return `/api/preview/image?${new URLSearchParams({ path: p, base })}`;
+}
+
 function openPreviewModal(filePath, content, kind) {
   currentPreviewPath = filePath;
   const fileName = filePath.split(/[\\/]/).pop();
@@ -8521,6 +9170,7 @@ function handleSessionOpenEvent(data) {
   }
   if (!isSessionActive(target)) {
     stickySessionIds.add(id);
+    openedStickyIds.add(id);
   }
   setSessionDismissed(id, false);
   cliOpenedId = id;
@@ -9184,6 +9834,10 @@ function setupEventSource() {
         fetchSessions().catch(() => {});
         if (currentSessionId) fetchTasks(currentSessionId);
         refetchPaneLayout();
+        if (sgRev === null) syncSessionGroups();
+        else if (sgUnsent) persistSessionGroups();
+        else sgRefresh();
+        syncSessionPins();
         if (terminalAvailable())
           loadTerminals()
             .then(renderSessions)
@@ -9247,7 +9901,10 @@ function setupEventSource() {
         if (!skipOffScreen()) refreshOpenPlan();
       }
 
-      if (data.type === 'terminals-update' && Array.isArray(data.ids)) setRunningTerminals(data.ids);
+      if (data.type === 'terminals-update' && Array.isArray(data.ids))
+        setRunningTerminals(data.ids, data.awaitingTrust);
+
+      if (data.type === 'terminal:ended' && typeof data.id === 'string') onTerminalEnded(data.id);
 
       if (data.type === 'dispatch-update') onDispatchUpdate();
 
@@ -9296,6 +9953,10 @@ function setupEventSource() {
         handleSessionPinEvent(data);
       }
 
+      if (data.type === 'group:changed') {
+        onGroupChanged(data);
+      }
+
       if (data.type === 'pane:changed') {
         applyPaneLayout(data.sessionId, data.layout);
       }
@@ -9663,45 +10324,93 @@ function renderWaitingFooter(tool, params) {
   if (currentWaiting?.kind === 'plan') {
     return isWaitingAnswerable() ? planApprovalControlsHtml('plan-reject-feedback') : '';
   }
-  if (currentWaiting?.kind !== 'question') return waitingDecisionButtons('waiting-btn');
+  if (currentWaiting?.kind !== 'question') {
+    const buttons = waitingDecisionButtons('waiting-btn');
+    const hint = `<span class="waiting-footer-hint">${sendKbd()} allow · ${termKbd()} terminal</span>`;
+    return buttons ? hint + buttons : '';
+  }
   if (!isWaitingAnswerable()) return '';
   if (tool !== 'AskUserQuestion') return '';
   const questions = Array.isArray(params?.questions) ? params.questions : [];
   if (!questions.length) return '';
   const picked = questions.filter((q) => waitingAnswerFor(q)).length;
   const partial = picked > 0 && picked < questions.length ? ` (${picked}/${questions.length})` : '';
-  return `<button id="waiting-answer-btn" class="waiting-btn-allow" ${picked > 0 ? '' : 'disabled'} onclick="submitWaitingAnswers()">Answer${partial}</button>`;
+  return `<span class="waiting-footer-hint"><kbd>1</kbd>–<kbd>9</kbd> pick · ${sendKbd()} send</span><button id="waiting-answer-btn" class="waiting-btn-allow" ${picked > 0 ? '' : 'disabled'} onclick="submitWaitingAnswers()">Send answers${partial}</button>`;
 }
 
 function renderWaitingActions(tool, params) {
   if (!isWaitingAnswerable() || currentWaiting.kind !== 'question' || tool !== 'AskUserQuestion') return '';
   waitingQuestions = Array.isArray(params?.questions) ? params.questions : [];
   if (!waitingQuestions.length) return '';
+  const multiQ = waitingQuestions.length > 1;
+  waitingTab = Math.max(0, Math.min(waitingTab, multiQ ? waitingQuestions.length : 0));
+  const onReview = multiQ && waitingTab === waitingQuestions.length;
+  const tabs = multiQ
+    ? `<div class="waiting-qtabs" role="tablist">${waitingQuestions
+        .map((q, idx) => {
+          const done = !!waitingAnswerFor(q);
+          return `<button class="waiting-qtab${idx === waitingTab ? ' active' : ''}${done ? ' done' : ''}" role="tab" onclick="setWaitingTab(${idx})"><span class="waiting-qtab-n">${idx + 1}</span>${escapeHtml(q.header || `Question ${idx + 1}`)}${done ? '<span class="waiting-qtab-check">✓</span>' : ''}</button>`;
+        })
+        .join(
+          '',
+        )}<button class="waiting-qtab${onReview ? ' active' : ''}" role="tab" onclick="setWaitingTab(${escapeHtml(String(waitingQuestions.length))})">Review</button><span class="waiting-qtabs-hint"><kbd>←</kbd><kbd>→</kbd> switch</span></div>`
+    : '';
+  if (onReview) {
+    const rows = waitingQuestions
+      .map((q) => {
+        const a = waitingAnswerFor(q);
+        const text = Array.isArray(a) ? a.join(', ') : a;
+        return `<div class="waiting-review-row"><div class="waiting-review-q">${escapeHtml(q.header || q.question || '')}</div><div class="waiting-review-a${text ? '' : ' empty'}">${text ? escapeHtml(text) : 'Not answered'}</div></div>`;
+      })
+      .join('');
+    return `<div class="waiting-actions">${tabs}<div class="waiting-review">${rows}</div></div>`;
+  }
   const qs = waitingQuestions
     .map((q, idx) => {
+      if (idx !== waitingTab && multiQ) return '';
       const picks = waitingAnswerDraft[q.question] || [];
       const opts = (q.options || [])
-        .map((o) => {
-          const label = typeof o === 'string' ? o : o?.label || '';
+        .map((o, oi) => {
+          const label = waitingOptionLabel(o);
           const desc = typeof o === 'object' ? o?.description || '' : '';
           const descHtml = desc ? `<span class="waiting-option-desc">${renderMarkdown(desc)}</span>` : '';
           // The option `preview` field is the TUI's side-by-side visualization
           // pane (mockups, code snippets, diagrams) — rendered as markdown
           const preview = typeof o === 'object' ? o?.preview || '' : '';
           const previewHtml = preview ? `<span class="waiting-option-preview">${renderMarkdown(preview)}</span>` : '';
-          return `<button class="waiting-option${picks.includes(label) ? ' selected' : ''}" data-label="${escapeHtml(label)}" onclick="selectWaitingAnswer(${idx}, this.dataset.label)"><span class="waiting-option-label">${escapeHtml(label)}</span>${descHtml}${previewHtml}</button>`;
+          return `<button class="waiting-option${picks.includes(label) ? ' selected' : ''}" data-label="${escapeHtml(label)}" onclick="selectWaitingAnswer(${idx}, this.dataset.label)"><kbd class="waiting-option-key">${oi + 1}</kbd><span class="waiting-option-text"><span class="waiting-option-label">${escapeHtml(label)}</span>${descHtml}${previewHtml}</span></button>`;
         })
         .join('');
       const header = q.header ? `<span class="waiting-question-header">${escapeHtml(q.header)}</span>` : '';
       const multi = q.multiSelect ? '<span class="waiting-question-multi">multi-select</span>' : '';
-      const input = `<input type="text" class="waiting-option-input" placeholder="Or type your own answer" value="${escapeHtml(waitingCustomDraft[q.question] || '')}" oninput="setWaitingCustomAnswer(${idx}, this)">`;
-      return `<div class="waiting-question">${header}${multi}<div class="waiting-question-text">${renderMarkdown(q.question || '')}</div><div class="waiting-options">${opts}</div>${input}</div>`;
+      const input = `<input type="text" class="waiting-option-input" placeholder="Or type your own answer" value="${escapeHtml(waitingCustomDraft[q.question] || '')}" oninput="setWaitingCustomAnswer(${idx}, this)" onkeydown="if((event.ctrlKey||event.metaKey)&&event.key==='Enter'){event.preventDefault();submitWaitingAnswers()}">`;
+      return `<div class="waiting-question">${multiQ ? '' : header}${multi}<div class="waiting-question-text">${renderMarkdown(q.question || '')}</div><div class="waiting-options">${opts}</div>${input}</div>`;
     })
     .join('');
-  return `<div class="waiting-actions">${qs}</div>`;
+  return `<div class="waiting-actions">${tabs}${qs}</div>`;
+}
+
+let waitingTab = 0;
+
+function waitingOptionLabel(o) {
+  return typeof o === 'string' ? o : o?.label || '';
+}
+
+function setWaitingTab(i) {
+  const last = waitingQuestions.length > 1 ? waitingQuestions.length : 0;
+  const next = Math.max(0, Math.min(i, last));
+  if (next === waitingTab) return;
+  waitingTab = next;
+  showWaitingDetail();
+}
+
+function pickWaitingOptionByNumber(n) {
+  const qi = waitingQuestions.length > 1 ? waitingTab : 0;
+  const o = waitingQuestions[qi]?.options?.[n];
+  if (!o) return;
+  selectWaitingAnswer(qi, waitingOptionLabel(o));
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
 function selectWaitingAnswer(qi, label) {
   const q = waitingQuestions[qi];
   if (!q) return;
@@ -9714,6 +10423,7 @@ function selectWaitingAnswer(qi, label) {
   } else {
     waitingAnswerDraft[q.question] = [label];
     delete waitingCustomDraft[q.question];
+    if (waitingQuestions.length > 1 && waitingTab < waitingQuestions.length) waitingTab += 1;
   }
   showWaitingDetail();
 }
@@ -9739,11 +10449,12 @@ function setWaitingCustomAnswer(qi, el) {
     const picked = waitingQuestions.filter((qq) => waitingAnswerFor(qq)).length;
     btn.disabled = picked === 0;
     btn.textContent =
-      picked > 0 && picked < waitingQuestions.length ? `Answer (${picked}/${waitingQuestions.length})` : 'Answer';
+      picked > 0 && picked < waitingQuestions.length
+        ? `Send answers (${picked}/${waitingQuestions.length})`
+        : 'Send answers';
   }
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
 function submitWaitingAnswers() {
   // Partial submits are fine — send only the questions actually answered.
   // multiSelect answers go as arrays of labels (the shape the TUI validates).
@@ -9756,6 +10467,38 @@ function submitWaitingAnswers() {
   respondWaiting({ answers });
 }
 
+function renderPermissionDiff(oldText, newText) {
+  const rows = (text, sign, cls) =>
+    String(text)
+      .split('\n')
+      .map(
+        (l) =>
+          `<div class="perm-diff-row ${escapeHtml(cls)}"><span class="perm-diff-sign">${sign}</span>${escapeHtml(l)}</div>`,
+      )
+      .join('');
+  return `<div class="perm-diff">${rows(oldText, '−', 'del')}${rows(newText, '+', 'add')}</div>`;
+}
+
+// The permission card shows what Claude wants to run in full, not a one-line gist:
+// the command or the diff, where it runs, and how long the ask has been waiting.
+function renderPermissionSummary(tool, params) {
+  const waited = formatDuration(Math.max(0, Date.now() - new Date(currentWaiting.timestamp).getTime()));
+  const head = `<div class="perm-head"><span class="perm-tool">${escapeHtml(tool)}</span><span class="perm-wait" title="How long Claude has been waiting">waiting ${escapeHtml(waited)}</span></div>`;
+  let body = '';
+  if (typeof params.command === 'string') {
+    body = `<div class="perm-label">Command</div><pre class="perm-code">${escapeHtml(params.command)}</pre>`;
+    if (params.description) body += `<div class="perm-note">${escapeHtml(params.description)}</div>`;
+  } else if (typeof params.old_string === 'string' && typeof params.new_string === 'string') {
+    body = `<div class="perm-label">${escapeHtml(params.file_path || 'File')}</div>${renderPermissionDiff(params.old_string, params.new_string)}`;
+  } else if (typeof params.file_path === 'string') {
+    body = `<div class="perm-label">File</div><pre class="perm-code">${escapeHtml(params.file_path)}</pre>`;
+  } else if (typeof params.description === 'string') {
+    body = `<pre class="perm-code">${escapeHtml(params.description)}</pre>`;
+  }
+  const cwd = currentWaiting.cwd ? `<div class="perm-cwd">in ${escapeHtml(currentWaiting.cwd)}</div>` : '';
+  return `<div class="perm-card">${head}${body}${cwd}</div>`;
+}
+
 function showWaitingDetail() {
   if (!isWaitingFresh()) return;
   currentMsgDetailIdx = MSG_DETAIL_WAITING_IDX;
@@ -9770,6 +10513,7 @@ function showWaitingDetail() {
     waitingDraftId = currentWaiting.id || null;
     waitingAnswerDraft = {};
     waitingCustomDraft = {};
+    waitingTab = 0;
   }
   const tool = currentWaiting.toolName || 'unknown';
   const label = getWaitingLabel(currentWaiting.kind, tool);
@@ -9791,17 +10535,9 @@ function showWaitingDetail() {
       // A plan ask IS the plan — render it in full so it can be reviewed and
       // approved right here (follow mode included) instead of a JSON dump. The
       // raw tool input is dropped entirely to match the saved-plan modal.
-      inputHtml = `<div class="detail-desc rendered-md">${renderMarkdown(params.plan)}</div>`;
+      inputHtml = `<div class="detail-desc rendered-md waiting-plan">${renderMarkdown(params.plan)}</div>`;
     } else {
-      if (currentWaiting.kind !== 'question' && params) {
-        const gist =
-          typeof params.command === 'string'
-            ? params.command
-            : typeof params.description === 'string'
-              ? params.description
-              : '';
-        if (gist) summaryHtml = `<pre class="${TINTED_PRE_CLASS}">${escapeHtml(gist)}</pre>`;
-      }
+      if (currentWaiting.kind !== 'question' && params) summaryHtml = renderPermissionSummary(tool, params);
       inputHtml = `${summaryHtml}<details class="waiting-raw-input"><summary>Raw tool input</summary>${inputHtml}</details>`;
     }
   }
@@ -9829,9 +10565,8 @@ function isSessionActive(s) {
   return s.hasRecentLog || s.inProgress > 0 || s.hasActiveAgents || s.hasWaitingForUser;
 }
 
-// An active pinned session renders outside the Pinned group until the user dismisses it.
 function isInPinnedGroup(s) {
-  return isPlacedPinned(s.id) && !isPlacedSticky(s.id) && (!isSessionActive(s) || dismissedSessionIds.has(s.id));
+  return isPlacedPinned(s.id) && !isPlacedSticky(s.id);
 }
 
 const SESSION_UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
@@ -10102,7 +10837,6 @@ const MERMAID_VARS = {
   pieOuterStrokeColor: '--border',
   pieTitleTextColor: '--text-primary',
   pieLegendTextColor: '--text-primary',
-  fontFamily: '--mono',
 };
 // --bg-elevated sits too close to the dark page for a node, and the base theme derives near-black ER
 // rows from a dark primaryColor.
@@ -10111,15 +10845,39 @@ const MERMAID_MODE_VARS = {
   light: { primaryColor: '--bg-elevated', rowOdd: '--bg-elevated', rowEven: '--bg-elevated' },
 };
 let mermaidThemeKey = '';
+let colorProbe = null;
+const probedColors = new Map();
+
+// Mermaid's color parser knows only plain hex, rgb() and hsl(), and a hub theme may set oklch() or
+// relative color syntax; its initialize throws on one, and no diagram renders.
+function mermaidColor(value) {
+  if (!value || value.startsWith('#')) return value;
+  let rgb = probedColors.get(value);
+  if (rgb) return rgb;
+  colorProbe ??= document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+  colorProbe.clearRect(0, 0, 1, 1);
+  colorProbe.fillStyle = 'transparent';
+  colorProbe.fillStyle = value;
+  colorProbe.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = colorProbe.getImageData(0, 0, 1, 1).data;
+  rgb = a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${+(a / 255).toFixed(3)})`;
+  probedColors.set(value, rgb);
+  return rgb;
+}
 
 // The base theme derives its other colors from these, and it parses colors itself, so it takes
 // resolved values rather than var() references.
 function mermaidConfig() {
   const css = getComputedStyle(document.body);
   const mode = isLightTheme() ? 'light' : 'dark';
-  const themeVariables = { darkMode: mode === 'dark', pieOpacity: '1', pieSectionTextColor: '#fff' };
+  const themeVariables = {
+    darkMode: mode === 'dark',
+    pieOpacity: '1',
+    pieSectionTextColor: '#fff',
+    fontFamily: css.getPropertyValue('--mono').trim(),
+  };
   for (const [k, name] of Object.entries({ ...MERMAID_VARS, ...MERMAID_MODE_VARS[mode] })) {
-    themeVariables[k] = css.getPropertyValue(name).trim();
+    themeVariables[k] = mermaidColor(css.getPropertyValue(name).trim());
   }
   SHOW_PALETTE[mode].series.forEach((c, i) => {
     themeVariables[`pie${i + 1}`] = c;
@@ -10145,10 +10903,14 @@ function loadMermaid() {
     script.integrity = MERMAID_SCRIPT.integrity;
     script.crossOrigin = 'anonymous';
     script.onload = () => {
-      const config = mermaidConfig();
-      mermaidThemeKey = JSON.stringify(config);
-      mermaid.initialize(config);
-      resolve();
+      try {
+        const config = mermaidConfig();
+        mermaidThemeKey = JSON.stringify(config);
+        mermaid.initialize(config);
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
     };
     script.onerror = () => {
       script.remove();
@@ -10167,24 +10929,45 @@ function queueMermaid(work) {
   mermaidQueue = mermaidQueue.then(work).catch((err) => console.warn(err.message));
 }
 
+const MERMAID_PENDING = 'pre.mermaid:not([data-processed])';
+
 function initMermaidBlocks(container) {
   const root = container || document;
-  if (!root.querySelector('pre.mermaid:not([data-processed])')) return;
+  if (!root.querySelector(MERMAID_PENDING)) return;
+  // Stamped here, after DOMPurify: it drops an attribute whose value holds `-->`, as most diagrams do.
+  const stampPending = () =>
+    [...root.querySelectorAll(MERMAID_PENDING)].map((b) => {
+      if (!b.hasAttribute('data-original')) b.setAttribute('data-original', b.textContent);
+      return b;
+    });
   if (typeof mermaid === 'undefined') {
     loadMermaid().then(
       () => initMermaidBlocks(container),
-      (err) => console.warn(err.message),
+      (err) => {
+        console.warn(err.message);
+        for (const b of stampPending()) showMermaidError(b, err);
+      },
     );
     return;
   }
-  queueMermaid(() => {
-    const blocks = [...root.querySelectorAll('pre.mermaid:not([data-processed])')];
-    // Set here, after DOMPurify: it drops an attribute whose value holds `-->`, as most diagrams do.
-    for (const b of blocks) if (!b.hasAttribute('data-original')) b.setAttribute('data-original', b.textContent);
-    return blocks.length ? mermaid.run({ nodes: blocks }) : undefined;
+  queueMermaid(async () => {
+    // One block per run, so a bad diagram shows its own error and the others still render.
+    for (const b of stampPending()) {
+      try {
+        await mermaid.run({ nodes: [b] });
+      } catch (err) {
+        showMermaidError(b, err);
+      }
+    }
   });
 }
 
+function showMermaidError(block, err) {
+  block.setAttribute('data-processed', 'true');
+  block.setAttribute('data-mermaid-error', '');
+  block.textContent = err?.message || String(err);
+}
+
 function reinitMermaidTheme() {
   if (typeof mermaid === 'undefined') return;
   queueMermaid(() => {
@@ -10195,6 +10978,7 @@ function reinitMermaidTheme() {
     mermaid.initialize(config);
     document.querySelectorAll('pre.mermaid[data-processed]').forEach((el) => {
       el.removeAttribute('data-processed');
+      el.removeAttribute('data-mermaid-error');
       el.innerHTML = escapeHtml(el.getAttribute('data-original') || '');
     });
     initMermaidBlocks();
@@ -10479,24 +11263,32 @@ function renderFilterState() {
   document.getElementById('filter-menu-btn')?.classList.toggle('has-filters', short.length > 0);
 }
 
+// With the sidebar cursor on a group header, zen shows that group instead of the open session.
 function toggleZenMode() {
-  zenMode = !zenMode;
+  const leavingSessionZen = zenMode;
+  if (zenMode) zenMode = false;
+  else if (zenGroup) zenGroup = null;
+  else {
+    const header = focusZone === 'sidebar' ? sessionsList.querySelector('.session-group-header.kb-selected') : null;
+    zenGroup = header?.dataset.groupId || null;
+    zenMode = !zenGroup;
+  }
   store.setItem(ZEN_KEY, String(zenMode));
   renderZenState();
-  if (zenMode) closeFilterMenu();
+  if (zenMode || zenGroup) closeFilterMenu();
   renderSessions();
-  // The open session may be outside the current server page/filter; refetch pins it in.
-  if (zenMode) fetchSessions(false);
+  // The open session or the group's members may be outside the current server page/filter,
+  // and leaving group zen needs the filtered page back.
+  if (!leavingSessionZen) fetchSessions(false);
 }
 
 function renderZenState() {
   const btn = document.getElementById('zen-mode-btn');
   if (!btn) return;
-  btn.classList.toggle('active', zenMode);
-  btn.setAttribute('aria-pressed', String(zenMode));
-  btn.title = zenMode
-    ? 'Zen mode on — show all sessions (Ctrl+Shift+Z)'
-    : 'Zen mode: current session only (Ctrl+Shift+Z)';
+  const on = zenMode || !!zenGroup;
+  btn.classList.toggle('active', on);
+  btn.setAttribute('aria-pressed', String(on));
+  btn.title = on ? 'Zen mode on — show all sessions (Ctrl+Shift+Z)' : 'Zen mode: current session only (Ctrl+Shift+Z)';
 }
 
 function filterBySessions(value) {
@@ -10611,44 +11403,23 @@ document.addEventListener('click', (e) => {
   if (sgHeader) {
     if (e.target.closest('.sg-name-input')) return;
     e.stopPropagation();
+    const groupId = sgHeader.dataset.groupId;
+    const group = sgGroupById(groupId);
+    if (!group) return;
     if (e.target.closest('.sg-keep')) {
-      sgKeepTransient(sgHeader.dataset.transientGroup);
+      sgKeep(group);
+      persistSessionGroups();
       renderSessions();
       return;
     }
-    if (sgHeader.dataset.transientGroup && e.target.closest('.sg-delete')) {
-      const name = sgHeader.dataset.transientGroup;
-      confirmModal({
-        title: 'Delete Group',
-        message: `Delete group “${name}”? Its sessions go back to Projects.`,
-        okLabel: 'Delete',
-      }).then((ok) => {
-        if (!ok) return;
-        sgDeleteTransient(name);
-        renderSessions();
-      });
+    if (e.target.closest('.sg-rename')) {
+      sgBeginRename(groupId);
+      return;
+    }
+    if (e.target.closest('.sg-delete')) {
+      sgConfirmDelete(group);
       return;
     }
-    const groupId = sgHeader.dataset.groupId;
-    const group = sgGroupById(groupId);
-    if (group) {
-      if (e.target.closest('.sg-rename')) {
-        sgBeginRename(groupId);
-        return;
-      }
-      if (e.target.closest('.sg-delete')) {
-        confirmModal({
-          title: 'Delete Group',
-          message: `Delete group “${group.name}”? Its sessions and projects go back to Projects.`,
-          okLabel: 'Delete',
-        }).then((ok) => {
-          if (!ok) return;
-          sgDeleteGroup(groupId);
-          renderSessions();
-        });
-        return;
-      }
-    } else if (!sgHeader.dataset.transientGroup) return;
   }
 
   const header = e.target.closest(COLLAPSIBLE_HEADER_SELECTOR);
@@ -10914,22 +11685,22 @@ function initSidebarResize() {
 }
 
 function initPanelResize(panelId, handleId, cssVar) {
-  const panel = document.getElementById(panelId);
-  const handle = document.getElementById(handleId);
-  let startWidth;
+  initResize(document.getElementById(panelId), document.getElementById(handleId), cssVar, panelWidthKey(panelId), 200);
+}
 
+function initResize(panel, handle, cssVar, key, min) {
+  let startWidth;
   _initDragResize(handle, {
     onStart() {
       startWidth = panel.offsetWidth;
       panel.classList.add('resizing');
     },
     onMove(dx) {
-      const w = Math.max(200, startWidth - dx);
-      panel.style.setProperty(cssVar, `${w}px`);
+      panel.style.setProperty(cssVar, `${Math.max(min, startWidth - dx)}px`);
     },
     onEnd() {
       panel.classList.remove('resizing');
-      store.setItem(panelWidthKey(panelId), panel.style.getPropertyValue(cssVar));
+      store.setItem(key, panel.style.getPropertyValue(cssVar));
     },
   });
 }
@@ -11003,7 +11774,7 @@ function updateStickyBtnState() {
   const isSticky = stickySessionIds.has(_infoModalSessionId);
   stickyBtn.style.display = '';
   stickyBtn.classList.toggle('active', isSticky);
-  stickyBtn.title = isSticky ? 'Remove sticky pin' : 'Sticky pin — always show at top';
+  stickyBtn.title = isSticky ? 'Remove sticky pin' : 'Sticky pin — always show in the list';
   const svg = stickyBtn.querySelector('svg');
   if (svg) svg.setAttribute('fill', isSticky ? 'currentColor' : 'none');
 }
@@ -12504,6 +13275,15 @@ function markPaneSide(el, side, focused) {
 
 const paneLabel = (p) => (p.kind === 'message' ? p.title : p.target);
 
+function paneMenuLabel(pane, label) {
+  const cut =
+    pane.kind !== 'url' && pane.kind !== 'message' ? Math.max(label.lastIndexOf('/'), label.lastIndexOf('\\')) + 1 : 0;
+  if (!cut || cut === label.length) {
+    return `<div class="pane-menu-label" title="${escapeHtml(label)}">${escapeHtml(label)}</div>`;
+  }
+  return `<div class="pane-menu-label pane-menu-path" title="${escapeHtml(label)}"><span class="pane-menu-dir">&lrm;${escapeHtml(label.slice(0, cut))}&lrm;</span><span class="pane-menu-name">${escapeHtml(label.slice(cut))}</span></div>`;
+}
+
 function renderPaneTabs(sid, layout, split) {
   // A rebuild mid-drag removes the dragged tab, and then no dragend fires. Mid-rename it drops the input.
   if (paneDragId || paneRenameId) return;
@@ -12587,7 +13367,9 @@ function mountPane(sid, pane) {
   view.dataset.key = key;
   paneViews.appendChild(view);
   paneFrames.set(key, view);
-  loadPaneView(sid, pane, view);
+  loadPaneView(sid, pane, view).then(() => {
+    if (paneFocusWanted === key && activePaneView() === view) focusActivePane();
+  });
   while (paneFrames.size > PANE_FRAME_LIMIT) {
     const [oldKey, oldView] = paneFrames.entries().next().value;
     paneFrames.delete(oldKey);
@@ -12648,6 +13430,10 @@ async function loadPaneView(sid, pane, view, scroll) {
       : ['pane-frame modal-zoomable', data.content + REVIEW_BRIDGE_TAG + restore];
     const frame = createPreviewFrame(cls, doc);
     frame.title = pane.title;
+    // Focus given before the document loads stays on the frame element, out of the document's keys.
+    frame.addEventListener('load', () => {
+      if (document.activeElement === frame) frame.contentWindow?.focus();
+    });
     view.appendChild(frame);
     attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, frame, frame));
     return;
@@ -12694,6 +13480,7 @@ function appendPaneDoc(view) {
   doc.className = 'pane-doc';
   const body = document.createElement('div');
   body.className = 'pane-doc-body rendered-md modal-zoomable';
+  body.tabIndex = -1;
   doc.append(body, paneDocGrip(doc));
   view.appendChild(doc);
   return body;
@@ -12769,8 +13556,11 @@ async function reloadPaneView(sid, pane, view) {
   paneReloads.delete(key);
   fresh.className = view.className;
   fresh.style.visibility = '';
+  const hadFocus = view.contains(document.activeElement);
   view.remove();
   paneFrames.set(key, fresh);
+  const target = hadFocus && paneFocusTarget(fresh);
+  if (target) focusPaneTarget(target);
   syncPaneReview();
   return true;
 }
@@ -12815,6 +13605,27 @@ function activePaneView() {
   return wantsTerminal() ? null : paneViews.querySelector('.pane-view.on.pane-focus');
 }
 
+// A URL page is on another origin and would keep every key from the board, so it gets no focus.
+function paneFocusTarget(view) {
+  return view?.querySelector(':scope > .pane-doc > .pane-doc-body, :scope > .pane-frame:not(.pane-url-frame)');
+}
+
+let paneFocusWanted = null;
+
+// The key that switches panes also moves focus into the pane, so its content takes the scroll keys.
+function focusActivePane() {
+  const view = activePaneView();
+  const target = paneFocusTarget(view);
+  paneFocusWanted = view && !view.firstElementChild ? view.dataset.key : null;
+  if (target) focusPaneTarget(target);
+  else if (paneViews.contains(document.activeElement)) document.activeElement.blur();
+}
+
+function focusPaneTarget(target) {
+  target.focus({ preventScroll: true });
+  target.contentWindow?.focus();
+}
+
 function isPaneDocOnScreen() {
   return !!activePaneView()?.querySelector('.modal-zoomable');
 }
@@ -12994,16 +13805,22 @@ function paneMenuKeydown(e) {
 async function deleteBoardTasks(onlyCompleted) {
   const sid = paneSessionId();
   if (!sid) return;
-  const count = currentTasks.filter((t) => !onlyCompleted || t.status === 'completed').length;
+  const doomed = currentTasks.filter((t) => !onlyCompleted || t.status === 'completed');
+  const count = doomed.length;
   if (!count) {
     showToast(onlyCompleted ? 'No completed tasks' : 'No tasks', 'info');
     return;
   }
   const noun = `${count} ${onlyCompleted ? 'completed ' : ''}task${count === 1 ? '' : 's'}`;
+  const shown = doomed.slice(0, 3).map((t) => ({ label: t.subject, meta: t.status.replace('_', ' ') }));
+  if (doomed.length > shown.length) shown.push({ label: `+ ${doomed.length - shown.length} more`, meta: '' });
   const ok = await confirmModal({
-    title: onlyCompleted ? 'Delete Completed Tasks' : 'Delete All Tasks',
-    message: `Delete ${noun}? This cannot be undone.`,
-    okLabel: 'Delete',
+    title: `Delete ${noun}?`,
+    message: onlyCompleted
+      ? 'Every completed task in this session. This cannot be undone.'
+      : 'Every task in this session. This cannot be undone.',
+    items: shown,
+    okLabel: `Delete ${noun}`,
   });
   if (!ok) return;
   const q = onlyCompleted ? '?status=completed' : '';
@@ -13079,9 +13896,12 @@ function openPaneMenu(x, y, id) {
     y,
     pane.id,
     'Pane actions',
-    `<div class="pane-menu-label" title="${escapeHtml(label)}">${escapeHtml(label)}</div>` +
+    paneMenuLabel(pane, label) +
       (message ? '' : paneMenuItem('copy', url ? 'Copy URL' : 'Copy path')) +
       paneMenuItem('open', url ? 'Open in new tab' : message ? 'Open in message dialog' : 'Open in preview') +
+      (message
+        ? ''
+        : paneMenuItem('link', paneIsLinked(pane) ? 'Remove from linked documents' : 'Add to linked documents')) +
       paneMenuItem('rename', 'Rename') +
       paneMenuItem('reload', 'Reload') +
       paneMenuItem('close', 'Close pane'),
@@ -13089,6 +13909,21 @@ function openPaneMenu(x, y, id) {
   return true;
 }
 
+function paneIsLinked(pane) {
+  const key = canonicalPath(pane.target);
+  return getSessionPreviewPaths(paneSessionId()).some((p) => canonicalPath(p) === key);
+}
+
+function togglePaneLink(id) {
+  const pane = paneById(id);
+  const sid = paneSessionId();
+  if (!pane || !sid) return;
+  const unlink = paneIsLinked(pane);
+  setSessionDocLink(sid, pane.target, unlink);
+  if (unlink) forgetServerLinkedDoc(sid, pane.target);
+  showToast(unlink ? 'Unlinked from session' : 'Linked to session', 'success');
+}
+
 function showPaneMenu(x, y, id, ariaLabel, html) {
   closePaneMenu();
   sgCloseMenu();
@@ -13107,6 +13942,7 @@ function showPaneMenu(x, y, id, ariaLabel, html) {
 const PANE_MENU_ACTIONS = {
   copy: copyPaneTarget,
   open: openPaneExternally,
+  link: togglePaneLink,
   rename: beginPaneRename,
   reload: reloadPane,
   close: closePane,
@@ -13315,7 +14151,9 @@ paneStrip.addEventListener('click', (e) => {
     return;
   }
   const tab = e.target.closest('.pane-tab');
-  if (tab) selectPane(tab.dataset.pane);
+  if (!tab) return;
+  selectPane(tab.dataset.pane);
+  focusActivePane();
 });
 paneStrip.addEventListener('auxclick', (e) => {
   const tab = e.target.closest('.pane-tab');
@@ -13579,7 +14417,6 @@ panePop.addEventListener('keydown', (e) => {
 // leaving the session view or switching sessions drops only the socket; coming back
 // reattaches and the server replays the screen.
 const TERMINAL_TOKEN_KEY = 'terminal-token';
-const TERMINAL_FOCUS_KEY = 'terminal-focus';
 const TERMINAL_TOKEN_RE = /^[0-9a-f]{64}$/;
 const TERMINAL_MODES_KEY = 'terminal-sessions';
 const TERMINAL_FONT_KEY = 'terminal-font-size';
@@ -13686,6 +14523,7 @@ function toggleTerminal() {
   setTerminalMode(currentSessionId, !terminalModes().has(currentSessionId));
   termState.focusNext = true;
   syncTerminal();
+  if (!wantsTerminal()) focusActivePane();
 }
 
 // The show card sits in the pane but is not the terminal, so Alt+` from it goes to the terminal.
@@ -13720,6 +14558,7 @@ function terminalShortcut(e, probe = false) {
   if (ctrlShift && e.code === 'KeyP') return toggleSessionPicker;
   // Ctrl+Shift+Z is redo in a text field, so only the terminal's own textarea gives it up.
   if (ctrlShift && e.code === 'KeyZ') return inPageField(e) ? null : toggleZenMode;
+  if (ctrlShift && e.code === 'KeyK') return kanbotAvailable() ? () => toggleKanbot() : null;
   if (ctrlAlt && (e.code === 'KeyN' || e.code === 'KeyR') && terminalAvailable()) {
     return () => openNewSession(null, e.code === 'KeyR');
   }
@@ -13749,7 +14588,7 @@ function setSwapPair(last, previous) {
 async function swapToPreviousSession() {
   const target = currentSessionId === lastSessionId ? previousSessionId : lastSessionId;
   if (!target || target === currentSessionId) return;
-  if (terminalPaneFocused()) termState.focusNext = true;
+  if (terminalPaneFocused() || isShowCardFocused()) termState.focusNext = true;
   await revealSession(target);
 }
 
@@ -13848,9 +14687,12 @@ function takeTerminalFocus(sessionId) {
 }
 
 // The terminal attaches asynchronously; by then the user may be typing elsewhere or reading a modal.
+// A session on the trust dialog has no transcript yet, so it may not be in `sessions`.
 function promptAwaitsUser(sessionId) {
-  if (!sessions.find((s) => s.id === sessionId)?.hasWaitingForUser || isAnyModalOpen()) return false;
-  return !document.activeElement?.matches(TEXT_FIELD_SELECTOR);
+  if (isAnyModalOpen() || document.activeElement?.matches(TEXT_FIELD_SELECTOR)) return false;
+  if (trustWaiting.has(sessionId)) return true;
+  const session = sessions.find((s) => s.id === sessionId);
+  return !!session && isWaitingSession(session);
 }
 
 function onTerminalShown(focus = true) {
@@ -13867,6 +14709,8 @@ function focusTerminalPane() {
     termFrame.el.focus();
     terminalFrameSend('focus');
   }
+  // After a page load the frame may still be loading; its socket's ready takes the focus then.
+  else termState.focusNext = true;
 }
 
 function leaveTerminalPane() {
@@ -13927,12 +14771,16 @@ function loadTerminalFrame(origin, timeoutMs) {
 }
 
 function sendTerminalTheme() {
-  if (!termFrame.inited) return;
   const options = terminalThemeOptions();
   const key = JSON.stringify(options);
-  if (key === termFrame.theme) return;
-  termFrame.theme = key;
-  postToTerminalFrame('theme', { options });
+  for (const [frame, post] of [
+    [termFrame, postToTerminalFrame],
+    [kanbotState, postToKanbotFrame],
+  ]) {
+    if (!frame.inited || key === frame.theme) continue;
+    frame.theme = key;
+    post('theme', { options });
+  }
 }
 
 // Keyed on the colors, and style is watched, because under the hub a theme change lands in two
@@ -13957,6 +14805,18 @@ window.addEventListener('message', (e) => {
     onTerminalFrameMessage(m.type.slice(TERMINAL_MSG.length), m);
 });
 
+function terminalInitOptions(themeOptions) {
+  return {
+    fontFamily:
+      appConfig.terminal.fontFamily ||
+      getComputedStyle(document.body).getPropertyValue('--font-mono').trim() ||
+      'monospace',
+    fontSize: currentTerminalFontSize(),
+    scrollback: appConfig.terminal.scrollback,
+    themeOptions,
+  };
+}
+
 function onTerminalFrameMessage(t, m) {
   const socket = termState.socket;
   const current = socket && m.socketId === socket.id;
@@ -13964,15 +14824,7 @@ function onTerminalFrameMessage(t, m) {
     // A second load is the frame reloaded (its context menu), with no terminal and no socket.
     const themeOptions = terminalThemeOptions();
     resetTerminalFrame({ reload: termFrame.reload || termFrame.inited, theme: JSON.stringify(themeOptions) });
-    postToTerminalFrame('init', {
-      fontFamily:
-        appConfig.terminal.fontFamily ||
-        getComputedStyle(document.body).getPropertyValue('--font-mono').trim() ||
-        'monospace',
-      fontSize: currentTerminalFontSize(),
-      scrollback: appConfig.terminal.scrollback,
-      themeOptions,
-    });
+    postToTerminalFrame('init', terminalInitOptions(themeOptions));
   } else if (t === 'term') {
     termFrame.inited = true;
     pushTerminalClaims();
@@ -14077,17 +14929,21 @@ function pushTerminalClaims() {
   queueMicrotask(() => {
     terminalClaimsQueued = false;
     const bridged = bridgedFrameEls();
-    if (!termFrame.inited && !bridged.length) return;
+    if (!termFrame.inited && !kanbotState.inited && !bridged.length) return;
     const claims = keyClaims();
     sendBridgeClaimsAll(bridged, claims);
-    if (!termFrame.inited) return;
     const sig = JSON.stringify(claims);
-    if (sig === termFrame.claims) return;
-    termFrame.claims = sig;
-    terminalFrameSend('claims', claims);
+    sendFrameClaims(kanbotState, claims, sig, postToKanbotFrame);
+    sendFrameClaims(termFrame, claims, sig, terminalFrameSend);
   });
 }
 
+function sendFrameClaims(frameState, claims, sig, send) {
+  if (!frameState.inited || sig === frameState.claims) return;
+  frameState.claims = sig;
+  send('claims', claims);
+}
+
 function terminalTheme() {
   const css = getComputedStyle(document.body);
   const v = (name) => css.getPropertyValue(name).trim();
@@ -14217,7 +15073,7 @@ function setTerminalAttached(on) {
 
 // A hidden pane stays attached, but Ctrl+W can only be meant for a terminal on screen.
 function syncCloseGuard() {
-  const on = termState.attached && termState.shown;
+  const on = (termState.attached && termState.shown) || kanbotOnScreen();
   if (termState.closeGuard === on) return;
   termState.closeGuard = on;
   hub.closeGuard(on);
@@ -14231,6 +15087,7 @@ window.addEventListener('beforeunload', (e) => {
 // The hub's palette takes focus first and clears activeElement here, so the last focus inside this
 // page is tracked instead; focus leaving the frame keeps it.
 let terminalHadFocus = false;
+let passTerminalZoneOn = false;
 document.addEventListener('focusin', () => {
   terminalHadFocus = terminalPaneFocused();
 });
@@ -14247,7 +15104,14 @@ document.addEventListener('focusout', (e) => {
 // Chrome fires this before focusin when a click or a focus() call in this page takes focus from the
 // frame, so it waits a task and gives way to whatever took focus.
 let boardPointerDown = false;
-document.addEventListener('pointerdown', () => (boardPointerDown = true), true);
+document.addEventListener(
+  'pointerdown',
+  () => {
+    boardPointerDown = true;
+    passTerminalZoneOn = false;
+  },
+  true,
+);
 for (const type of ['pointerup', 'pointercancel']) {
   document.addEventListener(type, () => (boardPointerDown = false), true);
 }
@@ -14260,14 +15124,24 @@ window.addEventListener('focus', () => {
     }
   });
 });
+// A board with no session open passes the zone on, so a stop at an empty config dir keeps it. So does a
+// board whose session has no terminal for an inherited terminal zone, until the user picks a zone here.
 window.addEventListener('pagehide', () => {
-  if (termState.attached && termState.shown && terminalHadFocus) tabStore.setItem(TERMINAL_FOCUS_KEY, currentSessionId);
-  else tabStore.removeItem(TERMINAL_FOCUS_KEY);
+  if (termState.attached && termState.shown && terminalHadFocus) tabStore.setItem(FOCUS_ZONE_KEY, 'terminal');
+  else if (passTerminalZoneOn) return;
+  else if (currentSessionId || focusZone === 'sidebar') tabStore.setItem(FOCUS_ZONE_KEY, focusZone);
 });
 
-function restoreTerminalFocus(sessionId) {
-  if (tabStore.getItem(TERMINAL_FOCUS_KEY) === sessionId) termState.focusNext = true;
-  tabStore.removeItem(TERMINAL_FOCUS_KEY);
+// While the hub shows another app this frame cannot take focus, so terminalHadFocus lets the
+// window focus handler finish the restore when the hub focuses this frame.
+function restoreTerminalFocus(zone, sessionId) {
+  if (zone !== 'terminal') return;
+  if (!wantsTerminalFor(sessionId)) {
+    passTerminalZoneOn = true;
+    return;
+  }
+  termState.focusNext = true;
+  terminalHadFocus = true;
 }
 
 // The terminal stands in for the board, so it takes the board zone however focus arrives
@@ -14328,6 +15202,7 @@ async function openTerminal(sessionId, mode, attempt = 0) {
         name: spec.name,
         worktree: spec.worktree,
         model: spec.model,
+        effort: spec.effort,
         prompt: spec.prompt,
         edit: spec.edit,
         forkOf: spec.forkOf,
@@ -14459,13 +15334,25 @@ function onTerminalMessage(sessionId, msg, tail = '') {
 // Detaching first means no exit message reaches the pane, so no Resume prompt shows before the board.
 // Terminal mode must go too: left on, opening the session again reconnects in 'auto' and resumes claude.
 async function closeTerminalSession(id = termState.sessionId) {
+  exitTerminalMode(id);
+  await terminalFetch(apiPath`/api/terminals/${id}`, 'DELETE').catch(() => {});
+  dropPlaceholder(id);
+}
+
+function exitTerminalMode(id) {
   if (id === termState.sessionId) {
     if (terminalPaneFocused()) leaveTerminalPane();
     detachTerminal();
   }
   setTerminalMode(id, false);
   syncTerminal();
-  await terminalFetch(apiPath`/api/terminals/${id}`, 'DELETE').catch(() => {});
+}
+
+// An end from another tab or `dispatch end` must clear terminal mode here too, or focusing the
+// session reconnects in 'auto' and resumes claude. The mode set is shared by same-origin tabs, so the
+// tab that ended it may have cleared it already while this tab still shows its pane.
+function onTerminalEnded(id) {
+  if (id === termState.sessionId || terminalModes().has(id)) exitTerminalMode(id);
   dropPlaceholder(id);
 }
 
@@ -14531,7 +15418,7 @@ async function renderTerminalManager() {
   body.innerHTML = list
     .map((t) => {
       const session = sessions.find((s) => s.id === t.id);
-      const name = session ? sessionDisplayName(session) : t.id.slice(0, 8);
+      const name = t.kanbot ? 'Kanbot' : session ? sessionDisplayName(session) : t.id.slice(0, 8);
       const here = t.id === termState.sessionId ? '<span class="terminal-manager-here">this tab</span>' : '';
       const attached = t.clients ? `${t.clients} attached` : 'detached';
       return `<div class="terminal-manager-row${t.clients ? ' attached' : ''}">
@@ -14547,8 +15434,8 @@ async function renderTerminalManager() {
           </div>
         </div>
         <div class="terminal-manager-actions">
-          <button type="button" class="btn btn-secondary" data-open="${escapeHtml(t.id)}">Open</button>
-          <button type="button" class="btn btn-secondary terminal-manager-end" data-end="${escapeHtml(t.id)}">End</button>
+          <button type="button" class="btn btn-secondary" data-open="${escapeHtml(t.id)}"${t.kanbot ? ' data-kanbot' : ''}>Open</button>
+          <button type="button" class="btn btn-secondary terminal-manager-end" data-end="${escapeHtml(t.id)}" data-started="${escapeHtml(String(Number(t.startedAt) || 0))}">End</button>
         </div>
       </div>`;
     })
@@ -14556,7 +15443,8 @@ async function renderTerminalManager() {
   body.querySelectorAll('[data-open]').forEach((b) => {
     b.onclick = () => {
       closeTerminalManager();
-      showSessionTerminal(b.dataset.open);
+      if ('kanbot' in b.dataset) toggleKanbot(true);
+      else showSessionTerminal(b.dataset.open);
     };
   });
   body.querySelectorAll('[data-end]').forEach((b) => {
@@ -14574,15 +15462,254 @@ async function terminalFetch(url, method, body) {
   return res.status === 401 && (await refreshTerminalToken()) ? send() : res;
 }
 
+const TERMINAL_STATE_LABEL = { busy: 'working', wait: 'waiting', idle: 'idle' };
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function endAllTerminals() {
-  const buttons = document.querySelectorAll('#terminal-manager-body [data-end]');
-  await Promise.all([...buttons].map((b) => closeTerminalSession(b.dataset.end)));
+  const items = [...document.querySelectorAll('#terminal-manager-body [data-end]')].map((b) => {
+    const id = b.dataset.end;
+    const session = sessions.find((s) => s.id === id);
+    const state = !session ? 'idle' : isWaitingSession(session) ? 'wait' : isActiveSession(session) ? 'busy' : 'idle';
+    const started = Number(b.dataset.started);
+    const meta = [
+      TERMINAL_STATE_LABEL[state],
+      started && `up ${formatDuration(Date.now() - started)}`,
+      formatTerminalProc(terminalProcStats[id]),
+    ]
+      .filter(Boolean)
+      .join(' · ');
+    return { id, state, label: session ? sessionDisplayName(session) : id.slice(0, 8), meta };
+  });
+  const ids = items.map((i) => i.id);
+  const notIdle = items.filter((i) => i.state !== 'idle').length;
+  if (notIdle) {
+    const ok = await confirmModal({
+      title: `End ${ids.length} terminals?`,
+      message: 'The Claude Code processes stop. Sessions stay on the board and can be resumed.',
+      items,
+      warn: `${notIdle} ${notIdle === 1 ? 'is' : 'are'} not idle. Work in progress is cut off.`,
+      okLabel: `End ${ids.length} terminals`,
+    });
+    if (!ok) return;
+  }
+  await Promise.all(ids.map((id) => closeTerminalSession(id)));
   renderTerminalManager();
 }
 
 //#endregion
 
+//#region KANBOT
+// The board's own assistant (docs/kanbot.md): a claude session the server keeps hidden from the list,
+// shown in a popover through a second terminal frame on the board terminal's frame origin.
+const KANBOT_SVG =
+  '<svg viewBox="0 0 16 13" width="16" height="13" shape-rendering="crispEdges" aria-hidden="true">' +
+  '<path fill="#d97757" d="M3 0h10v4h3v3h-3v3H3V7H0V4h3z"/>' +
+  '<path fill="#d97757" d="M4 10h1v3H4zM6 10h1v3H6zM9 10h1v3H9zM11 10h1v3h-1z"/>' +
+  '<path fill="#1f1e1d" d="M5 2h1v2H5zM10 2h1v2h-1z"/></svg>';
+const KANBOT_LAYOUT_KEY = 'cck-kanbot-layout';
+const KANBOT_WIDTH_KEY = 'cck-kanbot-width';
+const kanbotState = {
+  el: null,
+  frame: null,
+  origin: null,
+  ptyId: null,
+  inited: false,
+  attached: false,
+  ended: false,
+  socketId: 0,
+  theme: null,
+  claims: null,
+  returnFocus: null,
+};
+
+function kanbotFocused() {
+  return !!kanbotState.el?.contains(document.activeElement);
+}
+
+function kanbotAvailable() {
+  return !!appConfig.kanbot && terminalAvailable();
+}
+
+function kanbotButton() {
+  const b = document.createElement('button');
+  b.type = 'button';
+  b.className = 'footer-kanbot';
+  b.title = 'Kanbot, the board assistant';
+  b.setAttribute('aria-label', b.title);
+  b.innerHTML = KANBOT_SVG;
+  b.onclick = toggleKanbot;
+  return b;
+}
+
+function ensureKanbotPopover() {
+  if (kanbotState.el) return kanbotState.el;
+  const el = document.createElement('div');
+  el.className = 'kanbot-popover';
+  el.innerHTML = `<div class="kanbot-head">${KANBOT_SVG}<strong>Kanbot</strong><span class="kanbot-status"></span><button type="button" class="kanbot-collapse" aria-label="Hide" title="Hide, Kanbot keeps running">–</button><button type="button" class="kanbot-dock">${showIcon('dock')}</button><button type="button" class="kanbot-expand"></button><button type="button" class="kanbot-close" aria-label="End" title="End the session, the next open resumes the chat">×</button></div><div class="kanbot-body"></div><div class="panel-resize-handle kanbot-resize"></div>`;
+  el.querySelector('.kanbot-dock').onclick = () => setKanbotLayout(el.classList.contains('docked') ? '' : 'docked');
+  el.querySelector('.kanbot-expand').onclick = () =>
+    setKanbotLayout(el.classList.contains('expanded') ? '' : 'expanded');
+  el.querySelector('.kanbot-collapse').onclick = () => toggleKanbot(false);
+  el.querySelector('.kanbot-close').onclick = endKanbot;
+  const width = store.getItem(KANBOT_WIDTH_KEY);
+  if (width) el.style.setProperty('--kanbot-width', width);
+  initResize(el, el.querySelector('.kanbot-resize'), '--kanbot-width', KANBOT_WIDTH_KEY, 320);
+  document.body.appendChild(el);
+  kanbotState.el = el;
+  setKanbotLayout(store.getItem(KANBOT_LAYOUT_KEY) || '');
+  return el;
+}
+
+function setKanbotLayout(layout) {
+  const el = kanbotState.el;
+  const docked = layout === 'docked';
+  const expanded = layout === 'expanded';
+  el.classList.toggle('docked', docked);
+  el.classList.toggle('expanded', expanded);
+  const dock = el.querySelector('.kanbot-dock');
+  dock.classList.toggle('active', docked);
+  dock.title = docked ? 'Undock' : 'Dock to the right';
+  dock.setAttribute('aria-label', dock.title);
+  dock.setAttribute('aria-pressed', String(docked));
+  const expand = el.querySelector('.kanbot-expand');
+  expand.innerHTML = showIcon(expanded ? 'restore' : 'expand');
+  expand.title = expanded ? 'Restore' : 'Expand';
+  expand.setAttribute('aria-label', expand.title);
+  store.setItem(KANBOT_LAYOUT_KEY, layout);
+  postToKanbotFrame('focus');
+}
+
+function setKanbotStatus(text) {
+  kanbotState.el.querySelector('.kanbot-status').textContent = text;
+}
+
+function postToKanbotFrame(t, data) {
+  kanbotState.frame?.contentWindow?.postMessage({ ...data, type: TERMINAL_MSG + t }, kanbotState.origin);
+}
+
+function kanbotOnScreen() {
+  return kanbotState.attached && !!kanbotState.el?.classList.contains('visible');
+}
+
+function endKanbot() {
+  const id = kanbotState.ptyId;
+  toggleKanbot(false);
+  kanbotState.ptyId = null;
+  if (id) terminalFetch(apiPath`/api/terminals/${id}`, 'DELETE').catch(() => {});
+}
+
+function setKanbotAttached(on) {
+  kanbotState.attached = on;
+  syncCloseGuard();
+}
+
+function toggleKanbot(force) {
+  const el = ensureKanbotPopover();
+  const show = typeof force === 'boolean' ? force : !el.classList.contains('visible');
+  const wasShown = el.classList.contains('visible');
+  el.classList.toggle('visible', show);
+  if (!show) {
+    const hadFocus = kanbotFocused();
+    postToKanbotFrame('detach');
+    setKanbotAttached(false);
+    const back = kanbotState.returnFocus;
+    kanbotState.returnFocus = null;
+    if (hadFocus) {
+      document.activeElement.blur();
+      if (back === 'terminal') focusTerminalPane();
+      else if (back?.isConnected) back.focus();
+    }
+    return;
+  }
+  if (!wasShown && !kanbotFocused()) {
+    kanbotState.returnFocus = terminalPaneFocused() ? 'terminal' : document.activeElement;
+  }
+  kanbotState.frame?.focus();
+  if (!kanbotState.frame) {
+    const frame = document.createElement('iframe');
+    frame.className = 'kanbot-frame';
+    frame.title = 'Kanbot';
+    frame.allow = 'clipboard-read; clipboard-write';
+    kanbotState.origin = termFrame.sameOrigin ? location.origin : terminalFrameOrigin();
+    frame.src = `${kanbotState.origin}/terminal.html#p=${encodeURIComponent(location.origin)}`;
+    kanbotState.frame = frame;
+    el.querySelector('.kanbot-body').appendChild(frame);
+    return;
+  }
+  if (kanbotState.inited) {
+    postToKanbotFrame('refresh');
+    postToKanbotFrame('focus');
+    if (!kanbotState.attached) openKanbot();
+  }
+}
+
+async function openKanbot() {
+  setKanbotStatus('starting…');
+  let res;
+  try {
+    res = await terminalFetch('/api/kanbot/start', 'POST', {});
+  } catch {
+    setKanbotStatus('board unreachable, retrying…');
+    setTimeout(() => {
+      if (kanbotState.el.classList.contains('visible') && !kanbotState.attached) openKanbot();
+    }, 3000);
+    return;
+  }
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) return setKanbotStatus(data.error || `error ${res.status}`);
+  kanbotState.ended = false;
+  kanbotState.ptyId = data.ptyId;
+  setKanbotStatus(data.sessionId ? data.sessionId.slice(0, 8) : '');
+  postToKanbotFrame('open', {
+    socketId: ++kanbotState.socketId,
+    reset: true,
+    hello: { token: terminalToken, id: data.ptyId, mode: 'auto' },
+  });
+  postToKanbotFrame('focus');
+}
+
+window.addEventListener('message', (e) => {
+  if (!kanbotState.frame || e.source !== kanbotState.frame.contentWindow || e.origin !== kanbotState.origin) return;
+  const m = e.data;
+  if (typeof m?.type !== 'string' || !m.type.startsWith(TERMINAL_MSG)) return;
+  const t = m.type.slice(TERMINAL_MSG.length);
+  if (t === 'loaded') {
+    const themeOptions = terminalThemeOptions();
+    kanbotState.inited = false;
+    kanbotState.claims = null;
+    kanbotState.theme = JSON.stringify(themeOptions);
+    postToKanbotFrame('init', terminalInitOptions(themeOptions));
+    return;
+  }
+  if (t === 'term') {
+    kanbotState.inited = true;
+    const claims = keyClaims();
+    sendFrameClaims(kanbotState, claims, JSON.stringify(claims), postToKanbotFrame);
+    // The first show created the frame after its focus call, so the frame takes focus once it is up.
+    if (kanbotState.el.classList.contains('visible')) kanbotState.frame.focus();
+    openKanbot();
+    return;
+  }
+  if (t === 'key') {
+    replayKey(m, document.getElementById('terminal-key-proxy'));
+    return;
+  }
+  if (m.socketId !== kanbotState.socketId) return;
+  if (t === 'ws') {
+    if (m.msg?.t === 'ready') setKanbotAttached(true);
+    else if (m.msg?.t === 'exit') {
+      setKanbotAttached(false);
+      kanbotState.ended = true;
+      setKanbotStatus('ended, reopen to resume');
+    } else if (m.msg?.t === 'error') setKanbotStatus(m.msg.msg || 'error');
+  } else if (t === 'close') {
+    setKanbotAttached(false);
+    if (!kanbotState.ended && kanbotState.el.classList.contains('visible')) setTimeout(openKanbot, 1000);
+  }
+});
+
+//#endregion
+
 //#region SHOW
 // The card the session in the embedded terminal posts to with the show tool. It belongs to the
 // terminal, not the session: /clear and the --resume picker change the session id, the terminal id
@@ -14593,6 +15720,7 @@ const SHOW_VIEW_KEY = 'cck-show-view-v1';
 const SHOW_MIN_W = 280;
 const SHOW_MIN_H = 120;
 const SHOW_INSET = 8;
+const SHOW_SANDBOX = 'allow-scripts allow-forms';
 const SHOW_CSP =
   "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; font-src data:; media-src data:; frame-src 'none'; connect-src 'none'; form-action 'none'";
 // The card's token contract (the show skill lists these names) mapped to the board's theme vars.
@@ -14641,6 +15769,7 @@ const SHOW_ICONS = {
   uncollapse: '<path d="M6 9l6 6 6-6"/>',
   expand: '<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>',
   restore: '<path d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"/>',
+  dock: '<path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM15 3v18"/>',
   clear: '<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>',
   close: '<path d="M18 6L6 18M6 6l12 12"/>',
   pane: '<use href="#icon-pane"/>',
@@ -14698,7 +15827,7 @@ function syncShowFocus() {
 // An HTML card's own keys and scroll keys reach it only inside its frame.
 function focusShowBody() {
   const frame = showState.frame;
-  if (frame?.isConnected) frame.focus();
+  if (frame?.isConnected && frame.loaded) frame.focus();
   else showCardEl()?.querySelector('.show-body')?.focus();
 }
 
@@ -14721,8 +15850,12 @@ function showCardKey(e) {
   }
   const p = showState.posts[showState.idx];
   if (combo !== 'ctrl+d' || !p) return false;
-  const message = `Remove "${p.title}" from the card?`;
-  confirmModal({ title: 'Remove post', message, okLabel: 'Remove' }).then((ok) => {
+  confirmModal({
+    title: 'Remove this post?',
+    message: 'It is taken off the card.',
+    chip: p.title,
+    okLabel: 'Remove post',
+  }).then((ok) => {
     if (!ok || showState.posts[showState.idx]?.id !== p.id) return;
     showCommand('remove');
     focusAfterShowRemove();
@@ -14995,11 +16128,15 @@ function setShowReview(opts) {
 // No allow-popups: it opens window.open as a way out. The CSP blocks fetch and remote sub-resources,
 // but not navigation or WebRTC; the real guard is that only the terminal's own agent can post.
 function createShowFrame(title, srcdoc) {
-  const frame = createPreviewFrame('show-frame', srcdoc, 'allow-scripts');
+  const frame = createPreviewFrame('show-frame', srcdoc, SHOW_SANDBOX);
   frame.title = title;
-  // Focus given before a document loads stays on the frame element, out of the document's keys.
+  // Focus given before the first document loads stays on the frame element, out of the document's
+  // keys, and the document never reports focus or blur, so the body holds focus until then.
   frame.addEventListener('load', () => {
-    if (frame === document.activeElement) frame.contentWindow?.focus();
+    const waited = !frame.loaded && document.activeElement === frame.parentElement;
+    frame.loaded = true;
+    if (waited) frame.focus();
+    else if (frame === document.activeElement) frame.contentWindow?.focus();
   });
   showState.frame = frame;
   showState.frameFocused = false;
@@ -15313,7 +16450,6 @@ function placeholderSession(id, spec) {
     mode: spec.mode,
     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,
     worktree: spec.worktree ? { repo: spec.cwd, name: spec.worktree === true ? 'new' : spec.worktree } : null,
@@ -15332,7 +16468,22 @@ function mergePlaceholders(list) {
     for (const id of [...specs.keys()]) if (ids.has(id)) specs.delete(id);
   }
   const pending = [...newSpecs, ...dispatchSpecs].sort((a, b) => b[1].startedAt - a[1].startedAt);
-  return [...pending.map(([id, spec]) => placeholderSession(id, spec)), ...list];
+  const placeholders = pending.map(([id, spec]) => placeholderSession(id, spec));
+  revealNewPlaceholders(placeholders);
+  return [...placeholders, ...list];
+}
+
+// Ids whose sections were expanded once; a section the user collapses again stays collapsed.
+const revealedPlaceholderIds = new Set();
+
+function revealNewPlaceholders(placeholders) {
+  let changed = false;
+  for (const p of placeholders) {
+    if (revealedPlaceholderIds.has(p.id)) continue;
+    revealedPlaceholderIds.add(p.id);
+    if (uncollapseFor(p)) changed = true;
+  }
+  if (changed) persistCollapsedGroups();
 }
 
 async function loadDispatches() {
@@ -15382,14 +16533,18 @@ function forgetPlaceholder(id) {
   return true;
 }
 
-function renderPlaceholderCard(session) {
+function renderPlaceholderCard(session, depth) {
   const isActive = session.id === currentSessionId && viewMode === 'session';
   const projectHtml = renderProjectIdentity(session);
   return `
-          <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}`)}">
+          <button onclick="openSession('${escAttrJs(session.id)}')" data-session-id="${escapeHtml(session.id)}" class="session-item session-placeholder ${isActive ? 'active' : ''}${childDepthClass(depth)}" title="${escapeHtml(`${session.id} | ${session.project}`)}">
             <div class="session-name">${escapeHtml(session.name)}</div>
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
-            <div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.edit ? 'edit' : session.mode] || PLACEHOLDER_HINTS.new}</div>
+            ${
+              trustWaiting.has(session.id)
+                ? `<div class="session-waiting"><span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>trust this folder?</div>`
+                : `<div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.edit ? 'edit' : session.mode] || PLACEHOLDER_HINTS.new}</div>`
+            }
           </button>
         `;
 }
@@ -15399,9 +16554,8 @@ async function restorePendingSessions() {
   document.getElementById('new-session-btn').hidden = !terminalAvailable();
   const terminals = terminalAvailable() ? loadTerminals() : null;
   await loadDispatches();
-  if (!terminals) return;
   try {
-    for (const t of await terminals) {
+    for (const t of terminals ? await terminals : []) {
       if ((t.mode !== 'new' && t.mode !== 'pick') || newSpecs.has(t.id) || dispatchSpecs.has(t.id)) continue;
       newSpecs.set(t.id, {
         cwd: t.cwd,
@@ -15414,6 +16568,8 @@ async function restorePendingSessions() {
       });
     }
   } catch (_) {}
+  // Sessions that were already running keep the collapse state saved before the reload.
+  for (const id of [...newSpecs.keys(), ...dispatchSpecs.keys()]) revealedPlaceholderIds.add(id);
 }
 
 async function loadTerminals() {
@@ -15422,6 +16578,7 @@ async function loadTerminals() {
   if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
   const list = data.sessions || [];
   runningTerminals = new Set(list.map((t) => t.id));
+  setTrustWaiting(list.filter((t) => t.awaitingTrust).map((t) => t.id));
   rememberTerminalIds(list);
   syncShowCard();
   pushTerminalClaims();
@@ -15429,8 +16586,26 @@ async function loadTerminals() {
   return list;
 }
 
-function setRunningTerminals(ids) {
+// A dispatched session never had its terminal toggled on, so the dialog would stay out of sight.
+function setTrustWaiting(ids) {
+  const before = trustWaiting;
+  trustWaiting = new Set(ids);
+  for (const id of trustWaiting) {
+    if (before.has(id)) continue;
+    setTerminalMode(id, true);
+    if (id !== currentSessionId || viewMode !== 'session') continue;
+    if (termState.shown && termState.attached) {
+      if (promptAwaitsUser(id)) focusTerminalPane();
+    } else {
+      termState.openedByUser = id;
+      syncTerminal();
+    }
+  }
+}
+
+function setRunningTerminals(ids, awaitingTrust = []) {
   runningTerminals = new Set(ids);
+  setTrustWaiting(awaitingTrust);
   forgetEndedTerminals();
   syncShowCard();
   pushTerminalClaims();
@@ -15454,10 +16629,12 @@ function openNewSession(folder, resume = false) {
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt']) document.getElementById(id).value = '';
   document.getElementById('ns-wt').checked = false;
   document.getElementById('ns-model').value = '';
+  document.getElementById('ns-effort').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;
+  const session = viewMode === 'session' ? sessions.find((s) => s.id === currentSessionId) : null;
+  const current = session?.worktree?.repo || session?.project;
   setNewSessionFolder(folder || current || '');
   document.getElementById('new-session-modal').classList.add('visible');
   const input = document.getElementById('ns-folder');
@@ -15561,6 +16738,7 @@ function newSessionValues() {
     name: document.getElementById('ns-name').value.trim() || null,
     worktree: wtOn ? wtName || true : false,
     model: document.getElementById('ns-model').value || null,
+    effort: document.getElementById('ns-effort').value || null,
     prompt: document.getElementById('ns-prompt').value.trim() || null,
     edit,
     stay: !ns.resume && !edit && document.getElementById('ns-stay').checked,
@@ -15769,7 +16947,7 @@ function initNewSession() {
     store.setItem(NEW_SESSION_EDIT_KEY, String(e.target.checked));
     renderNewSessionForm();
   });
-  for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model']) {
+  for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model', 'ns-effort']) {
     document.getElementById(id).addEventListener('input', renderNewSessionForm);
   }
   if (SpeechRecognitionApi) {
@@ -15884,7 +17062,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 loadSidebarState();
 for (const p of readStoredList(COLLAPSED_GROUPS_KEY)) collapsedProjectGroups.add(p);
-loadSessionGroups();
+syncSessionGroups();
 initSessionGroupsDnd();
 initSessionPicker();
 initProjectPicker();
@@ -15896,6 +17074,7 @@ loadModalFullscreen();
 initModalResize();
 loadPanelWidths();
 initPanelResize('detail-panel', 'detail-panel-resize', '--detail-panel-width');
+initDetailLayout();
 initPanelResize('message-panel', 'message-panel-resize', '--message-panel-width');
 initMessagePanelFull();
 
@@ -15975,13 +17154,15 @@ function makeLimitSpan(rl) {
 function renderSidebarFooter(rateLimits) {
   const el = document.getElementById('sidebar-footer');
   if (!el) return;
+  footerState.rl = rateLimits;
   const fh = rateLimits?.five_hour?.used_percentage ?? null;
   const sd = rateLimits?.seven_day?.used_percentage ?? null;
   const children = [];
   if (footerState.version) {
     const v = document.createElement('span');
     v.className = 'footer-version';
-    v.textContent = `v${footerState.version}`;
+    if (kanbotAvailable()) v.append(kanbotButton());
+    v.append(`v${footerState.version}`);
     const warn = pluginWarning(footerState.plugin);
     if (warn) v.append(warn);
     children.push(v);
@@ -16061,8 +17242,7 @@ searchQuery = urlState.search || '';
 
 renderFilterState();
 renderZenState();
-pinnedSessionIds = loadPinnedSessions();
-stickySessionIds = loadStickySessions();
+syncSessionPins();
 setupEventSource();
 
 if (urlState.search) {
@@ -16078,6 +17258,7 @@ if (urlState.search) {
 getJson('/api/config')
   .then((c) => {
     if (c) appConfig = c;
+    if (appConfig.kanbot && footerState.version) renderSidebarFooter(footerState.rl);
   })
   .then(restorePendingSessions)
   .then(() =>
@@ -16087,6 +17268,7 @@ getJson('/api/config')
     ),
   )
   .then(async () => {
+    const focusZoneBeforeReload = tabStore.getItem(FOCUS_ZONE_KEY);
     if (urlState.projectView) {
       try {
         await fetchProjectView(atob(urlState.projectView));
@@ -16094,7 +17276,7 @@ getJson('/api/config')
         showNoSession();
       }
     } else if (urlState.session) {
-      restoreTerminalFocus(urlState.session);
+      restoreTerminalFocus(focusZoneBeforeReload, urlState.session);
       await fetchTasks(urlState.session);
     } else {
       const last = loadLastView();
@@ -16105,12 +17287,13 @@ getJson('/api/config')
           showNoSession();
         }
       } else if (last?.view === 'session' && last.session && sessions.some((s) => s.id === last.session)) {
-        restoreTerminalFocus(last.session);
+        restoreTerminalFocus(focusZoneBeforeReload, last.session);
         await fetchTasks(last.session);
       } else {
         showNoSession();
       }
     }
+    if (focusZoneBeforeReload === 'sidebar') setFocusZone('sidebar');
     if (urlState.messages && currentSessionId) {
       if (logAutoOpened) setMessagePanelVisible(false);
       toggleMessagePanel();