claude-code-kanban 7.6.1 → 7.7.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';
@@ -323,18 +325,16 @@ 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);
+    // 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.
+    const include = [focusId, revealedPlanSessionId, revealedStorageSessionId, ...openedStickyIds].filter(Boolean);
     const recent = 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,
@@ -1655,8 +1655,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 +1739,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 +1815,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,35 +2135,89 @@ 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));
+  for (const id of added) expandPinnedFor(id);
+  showPinnedSessions(added);
+}
+
+// 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();
 }
 
-function savePinnedSessions() {
-  store.writeJson(PINNED_SESSIONS_KEY, [...pinnedSessionIds]);
-  store.writeJson(STICKY_SESSIONS_KEY, [...stickySessionIds]);
+function sendPinChange(sessionId) {
+  return postPins({ ids: [sessionId], state: getSessionPinState(sessionId, { saved: true }) });
 }
 
-// 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(() => {});
+// 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();
 }
 
@@ -2160,8 +2226,7 @@ function toggleSessionPin(sessionId) {
   pinnedSessionIds.add(sessionId);
   if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
   expandPinnedFor(sessionId);
-  savePinnedSessions();
-  offloadSessionPin(sessionId);
+  sendPinChange(sessionId);
   renderSessions();
 }
 
@@ -2173,20 +2238,13 @@ 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') {
@@ -2194,12 +2252,19 @@ function handleSessionPinEvent({ id, state }) {
     stickySessionIds.add(id);
   }
   expandPinnedFor(id);
-  savePinnedSessions();
-  renderSessions();
+  showPinnedSessions(isAnyPinned(id) ? [id] : []);
+}
+
+function isPlacedPinned(id) {
+  return pinnedSessionIds.has(id) && !deferredPinPlacement.has(id);
+}
+function isPlacedSticky(id) {
+  return stickySessionIds.has(id) && !deferredPinPlacement.has(id);
 }
 
-function getSessionPinState(sessionId) {
-  if (stickySessionIds.has(sessionId)) return 'sticky';
+// `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';
 }
@@ -3790,8 +3855,38 @@ function renderSessions() {
 
   const outside = sidebarSearch.rows(zenMode ? '' : 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';
@@ -3830,7 +3925,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>` : ''}
@@ -3939,11 +4034,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 gIdlePinned = nestChildren(list.filter(isInPinnedGroup));
+    if (gIdlePinned.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">' +
@@ -4020,67 +4115,94 @@ function renderSessions() {
   // shows its drop-here state instead of vanishing.
   const sgFiltering = !!searchQuery || activityFilter.size > 0 || (!!filterProject && filterProject !== '__recent__');
 
+  // 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 '';
     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) || []), ...transient]) 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 = group.transient ? bucket : 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 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);
         }
       }
-      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 = '';
+    if (!group.transient) 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>';
+    const idAttr = group.transient ? '' : ` data-group-id="${escapeHtml(group.id)}"`;
+    return `${sgHeaderHtml(group, countHtml(subtree))}<div class="session-group-sessions${collapsed ? ' collapsed' : ''}"${idAttr}>${body}${childHtml}</div>`;
   };
 
   let html = '';
@@ -4588,8 +4710,8 @@ 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
+// 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.
 const SESSION_GROUPS_KEY = 'sessionGroups';
 const SG_ACTION_SELECTOR =
@@ -4611,20 +4733,71 @@ 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 || local?.released?.length > 0;
+  try {
+    const res = hasLocal
+      ? await api('/api/groups/import', { method: 'POST', body: { groups: local.groups, released: local.released } })
+      : 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,
       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;
         }),
     }));
@@ -4633,17 +4806,85 @@ function loadSessionGroups() {
 }
 
 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, released: [...sgReleased] },
+      });
+    } 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) {
+  const saved = JSON.stringify({ groups: data.groups, released: data.released });
+  if (saved === JSON.stringify({ groups: sessionGroups, released: [...sgReleased] })) 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 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;
 }
 
+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;
+}
+
 // An individually placed session wins over the placement of its project.
 function sgGroupForSession(session) {
   return sgUserGroupFor(session) || sgDispatchGroupFor(session);
@@ -4668,6 +4909,8 @@ function sgTransientGroup(name) {
   return group;
 }
 
+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';
@@ -4714,10 +4957,12 @@ 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;
+  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 +4976,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 +4990,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,7 +4999,9 @@ 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();
 }
@@ -4778,13 +5027,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);
@@ -4857,7 +5110,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 +5135,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 +5181,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;
@@ -4960,8 +5245,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) {
@@ -4971,20 +5257,17 @@ function sgGroupDropZone(target) {
     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.
+      // 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,7 +5353,11 @@ 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();
     }
@@ -5136,11 +5423,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 +5500,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 +5696,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));
@@ -5636,6 +5918,7 @@ function activateSelectedSession(items) {
 }
 
 function setFocusZone(zone, target) {
+  passTerminalZoneOn = false;
   clearKbSelection();
   clearTaskSelection();
 
@@ -5911,10 +6194,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,9 +6249,10 @@ 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;
 
@@ -6018,6 +6322,7 @@ const SHORTCUT_TABS = [
           { 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: ['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 +6440,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.
@@ -6741,7 +7054,7 @@ async function _storageViewSession(id) {
 
 function _storageUnpinSession(id) {
   clearSessionPin(id);
-  savePinnedSessions();
+  sendPinChange(id);
   renderSessions();
   _renderStorageTab();
   _updateStorageTotal();
@@ -6972,7 +7285,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 +7314,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 +7325,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');
@@ -7083,13 +7392,18 @@ async function confirmDismissBlockers(sid) {
   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 okLabel = sticky && terminal ? 'Unpin, end and dismiss' : sticky ? 'Unpin and dismiss' : 'End and dismiss';
+  const steps = [
+    sticky && 'Remove the sticky pin',
+    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 (terminal) closeTerminalSession(sid);
@@ -7194,15 +7508,26 @@ document.addEventListener('keydown', (e) => {
       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 +7559,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();
@@ -7739,6 +8078,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 +8286,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 +8503,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 +8533,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 +8686,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 +8708,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 +8719,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 +8771,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 +8953,7 @@ function handleSessionOpenEvent(data) {
   }
   if (!isSessionActive(target)) {
     stickySessionIds.add(id);
+    openedStickyIds.add(id);
   }
   setSessionDismissed(id, false);
   cliOpenedId = id;
@@ -9184,6 +9617,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)
@@ -9249,6 +9686,8 @@ function setupEventSource() {
 
       if (data.type === 'terminals-update' && Array.isArray(data.ids)) setRunningTerminals(data.ids);
 
+      if (data.type === 'terminal:ended' && typeof data.id === 'string') onTerminalEnded(data.id);
+
       if (data.type === 'dispatch-update') onDispatchUpdate();
 
       if (data.type === 'show:posted') onShowPosted(data);
@@ -9296,6 +9735,10 @@ function setupEventSource() {
         handleSessionPinEvent(data);
       }
 
+      if (data.type === 'group:changed') {
+        onGroupChanged(data);
+      }
+
       if (data.type === 'pane:changed') {
         applyPaneLayout(data.sessionId, data.layout);
       }
@@ -9663,45 +10106,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 +10205,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 +10231,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 +10249,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 +10295,7 @@ function showWaitingDetail() {
     waitingDraftId = currentWaiting.id || null;
     waitingAnswerDraft = {};
     waitingCustomDraft = {};
+    waitingTab = 0;
   }
   const tool = currentWaiting.toolName || 'unknown';
   const label = getWaitingLabel(currentWaiting.kind, tool);
@@ -9791,17 +10317,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>`;
     }
   }
@@ -10102,7 +10620,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 +10628,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 +10686,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 +10712,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 +10761,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();
@@ -10619,9 +11186,10 @@ document.addEventListener('click', (e) => {
     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',
+        title: 'Delete this group?',
+        message: 'Its sessions go back to Projects.',
+        chip: name,
+        okLabel: 'Delete group',
       }).then((ok) => {
         if (!ok) return;
         sgDeleteTransient(name);
@@ -10638,9 +11206,10 @@ document.addEventListener('click', (e) => {
       }
       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',
+          title: 'Delete this group?',
+          message: 'Its sessions and projects go back to Projects.',
+          chip: group.name,
+          okLabel: 'Delete group',
         }).then((ok) => {
           if (!ok) return;
           sgDeleteGroup(groupId);
@@ -10914,22 +11483,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));
     },
   });
 }
@@ -12504,6 +13073,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;
@@ -12994,16 +13572,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 +13663,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 +13676,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 +13709,7 @@ function showPaneMenu(x, y, id, ariaLabel, html) {
 const PANE_MENU_ACTIONS = {
   copy: copyPaneTarget,
   open: openPaneExternally,
+  link: togglePaneLink,
   rename: beginPaneRename,
   reload: reloadPane,
   close: closePane,
@@ -13579,7 +14182,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';
@@ -13720,6 +14322,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');
   }
@@ -13867,6 +14470,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 +14532,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 +14566,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 +14585,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 +14690,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 +14834,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 +14848,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 +14865,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 +14885,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
@@ -14459,13 +15094,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 +15178,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 +15194,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 +15203,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 +15222,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 +15480,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 +15529,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 +15587,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 +15610,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 +15888,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;
@@ -15382,11 +16279,11 @@ 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="fetchTasks('${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>
@@ -15884,7 +16781,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 loadSidebarState();
 for (const p of readStoredList(COLLAPSED_GROUPS_KEY)) collapsedProjectGroups.add(p);
-loadSessionGroups();
+syncSessionGroups();
 initSessionGroupsDnd();
 initSessionPicker();
 initProjectPicker();
@@ -15975,13 +16872,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 +16960,7 @@ searchQuery = urlState.search || '';
 
 renderFilterState();
 renderZenState();
-pinnedSessionIds = loadPinnedSessions();
-stickySessionIds = loadStickySessions();
+syncSessionPins();
 setupEventSource();
 
 if (urlState.search) {
@@ -16078,6 +16976,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 +16986,7 @@ getJson('/api/config')
     ),
   )
   .then(async () => {
+    const focusZoneBeforeReload = tabStore.getItem(FOCUS_ZONE_KEY);
     if (urlState.projectView) {
       try {
         await fetchProjectView(atob(urlState.projectView));
@@ -16094,7 +16994,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 +17005,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();