claude-code-kanban 7.7.0 → 7.8.0

package/public/app.js

@@ -94,6 +94,8 @@ let sessionsHasMore = false;
 // URL, so a query string would not survive a hub reload.
 const ZEN_KEY = 'zenMode';
 let zenMode = store.getItem(ZEN_KEY) === 'true';
+// Group zen: the sidebar shows one group's subtree. A view of the moment, so it is not persisted.
+let zenGroup = null;
 let filterProject = FILTER_DEFAULTS.project; // null = all, '__recent__' = last 24h, or project path
 let recentProjects = new Set();
 let projectsCacheDirty = true;
@@ -109,8 +111,6 @@ const SESSION_ORDER_KEY = 'session-order';
 let stableGroupOrder = readStoredList(PROJECT_ORDER_KEY);
 let sessionOrder = readStoredList(SESSION_ORDER_KEY);
 let sessionGroups = []; // user-named groups: [{id, name, color, members:[{type,ref}]}]
-// Sessions the user pulled out of their dispatch placement; the server's group map is not theirs to edit.
-let sgReleased = new Set();
 let sgDrag = null; // in-flight sidebar drag: {kind:'session'|'project'|'group', ref}
 let searchQuery = ''; // Search query for fuzzy search
 let allTasksCache = []; // Cache all tasks for search
@@ -146,6 +146,8 @@ let taskHighlightDimmed = false;
 let focusZone = 'board'; // 'board' | 'sidebar'
 let appConfig = { marketplaceUrl: null, costUrl: null, memoryUrl: null, scratchAvailable: false };
 let runningTerminals = new Set();
+// Embedded sessions stuck on Claude Code's folder-trust dialog. No hook runs before it, so the server reads it off the screen.
+let trustWaiting = new Set();
 let selectedSessionIdx = -1;
 let selectedSessionKbId = null;
 let sessionJustSelected = false;
@@ -188,6 +190,7 @@ function setSessionDismissed(id, dismissed) {
   else dismissedSessionIds.delete(id);
   persistDismissedSessions();
   updateDismissBtnState();
+  if (dismissed) sgSweepTransient();
   renderSessions();
   renderActivityChip();
   return true;
@@ -258,6 +261,7 @@ function resetState() {
   sessionLimit = SESSION_PAGE;
   filterProject = FILTER_DEFAULTS.project;
   zenMode = false;
+  zenGroup = null;
   store.removeItem(ZEN_KEY);
   renderZenState();
   searchQuery = '';
@@ -329,15 +333,26 @@ async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
     // 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__';
+    // Group zen ignores the filters, and its session members come back through `include`.
+    const zenIds = zenGroup ? sgSubtreeIds(zenGroup) : new Set();
+    const zenMembers = sessionGroups
+      .filter((g) => zenIds.has(g.id))
+      .flatMap((g) => g.members.filter((m) => m.type === 'session').map((m) => m.ref));
+    const include = [
+      focusId,
+      revealedPlanSessionId,
+      revealedStorageSessionId,
+      ...openedStickyIds,
+      ...zenMembers,
+    ].filter(Boolean);
+    const recent = !zenGroup && filterProject === '__recent__';
     const res = await api('/api/sessions', {
       query: {
         limit: sessionLimit,
         include: include.length ? include.join(',') : null,
         recentHours: recent ? RECENT_PROJECT_HOURS : null,
-        project: !recent && filterProject ? filterProject : null,
-        filter: sessionFilter === 'active' ? 'active' : null,
+        project: !zenGroup && !recent && filterProject ? filterProject : null,
+        filter: !zenGroup && sessionFilter === 'active' ? 'active' : null,
       },
     });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -348,6 +363,7 @@ async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
       lastSessionsHash = sessionsHash;
       sessions = mergePlaceholders(newSessions);
       markOpenSessionRead();
+      sgSweepTransient();
       renderSessions();
       renderActivityChip();
       schedulePublishSession();
@@ -544,14 +560,14 @@ function toggleSection(containerId, chevronId) {
 }
 
 function isWaitingSession(s) {
-  return !!s.hasWaitingForUser;
+  return !!s.hasWaitingForUser || trustWaiting.has(s.id);
 }
 function sessionBarClass(s) {
   if (isWaitingSession(s)) return 'permission-pending';
   return s.unread ? 'unread' : '';
 }
 function isActiveSession(s) {
-  return !s.hasWaitingForUser && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
+  return !isWaitingSession(s) && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
 }
 // hasRecentLog carries the server's registry-idle correction: an open-but-idle
 // terminal keeps touching its JSONL, so mtime alone is not proof of activity.
@@ -765,8 +781,7 @@ async function fetchTasks(sessionId) {
   if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
     revealedStorageSessionId = null;
   }
-  if (currentSessionId && currentSessionId !== sessionId && deferredPinPlacement.delete(currentSessionId))
-    expandPinnedFor(currentSessionId);
+  if (currentSessionId && currentSessionId !== sessionId) deferredPinPlacement.delete(currentSessionId);
   if (lastSessionId !== sessionId) setSwapPair(sessionId, lastSessionId);
   const switched = sessionId !== currentSessionId;
   currentSessionId = sessionId;
@@ -2178,7 +2193,6 @@ function applyServerPins(pins) {
     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);
 }
 
@@ -2224,8 +2238,6 @@ function unpinSession(sessionId) {
 function toggleSessionPin(sessionId) {
   if (pinnedSessionIds.has(sessionId)) return unpinSession(sessionId);
   pinnedSessionIds.add(sessionId);
-  if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
-  expandPinnedFor(sessionId);
   sendPinChange(sessionId);
   renderSessions();
 }
@@ -2251,7 +2263,6 @@ function handleSessionPinEvent({ id, state }) {
     pinnedSessionIds.add(id);
     stickySessionIds.add(id);
   }
-  expandPinnedFor(id);
   showPinnedSessions(isAnyPinned(id) ? [id] : []);
 }
 
@@ -3739,12 +3750,14 @@ function getFilteredSessions() {
   if (filterProject) {
     // The open session keeps its row even when it belongs to another project, so that
     // revealing one by id has something to scroll to. Same exemption the active branch
-    // above already makes, for the same reason.
+    // above already makes, for the same reason. recentProjects lags behind the session list, so a
+    // session in a new folder counts as recent on its own.
+    const recentCutoff = Date.now() - RECENT_PROJECT_HOURS * 60 * 60 * 1000;
     filteredSessions = filteredSessions.filter(
       (s) =>
         matchesProjectFilter(s.project, s.worktree?.repo) ||
         s.id === currentSessionId ||
-        (filterProject === '__recent__' && isAnyPinned(s.id)),
+        (filterProject === '__recent__' && (isAnyPinned(s.id) || Date.parse(s.modifiedAt) >= recentCutoff)),
     );
   }
 
@@ -3847,13 +3860,22 @@ function renderSessions() {
   if (sgDrag || sgIsEditing() || zenPanelIsEditing()) return;
   scheduleJustFinishedExpiry();
   refreshProjectList();
+  syncPinPeek();
 
+  if (zenGroup && !sgGroupById(zenGroup)) {
+    zenGroup = null;
+    renderZenState();
+  }
   // Zen narrows the rendered list only — the session picker keeps calling getFilteredSessions()
   // and still offers everything, or there would be no way to switch sessions without leaving zen.
+  // Group zen renders only its subtree's buckets, so it takes every session unfiltered.
   const zenSession = zenMode && currentSessionId ? sessions.find((s) => s.id === currentSessionId) : null;
-  const filteredSessions = zenMode ? (zenSession ? [zenSession] : []) : applyStableSessionOrder(getFilteredSessions());
+  let filteredSessions;
+  if (zenGroup) filteredSessions = applyStableSessionOrder(sessions);
+  else if (zenMode) filteredSessions = zenSession ? [zenSession] : [];
+  else filteredSessions = applyStableSessionOrder(getFilteredSessions());
 
-  const outside = sidebarSearch.rows(zenMode ? '' : searchQuery, filteredSessions);
+  const outside = sidebarSearch.rows(zenMode || zenGroup ? '' : searchQuery, filteredSessions);
 
   const childDepth = new Map();
   const parentOf = new Map();
@@ -3909,12 +3931,12 @@ function renderSessions() {
     const padEmoji = store.getItem(_padEmojiKey(session.id));
     const hasScratchpad = !!padEmoji || _hasScratchpad(_sessionScratchpadKey(session.id));
     const tempClass =
-      session.hasRecentLog || session.hasRecentActivity || session.inProgress || session.hasWaitingForUser
+      session.hasRecentLog || session.hasRecentActivity || session.inProgress || isWaitingSession(session)
         ? 'warm'
         : 'stale';
     // Open tasks keep an idle session warm, but the green dot is for a session that is working.
     const idleClass =
-      tempClass === 'warm' && !session.hasWaitingForUser && !session.hasRecentLog && !session.hasRunningAgents
+      tempClass === 'warm' && !isWaitingSession(session) && !session.hasRecentLog && !session.hasRunningAgents
         ? 'idle'
         : '';
     const justFinishedClass = isJustFinished(session) ? 'just-finished' : '';
@@ -3946,8 +3968,8 @@ function renderSessions() {
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
                 ${session.dispatched ? `<span class="dispatched-badge"${session.dispatched.parent ? ` onclick="event.stopPropagation(); revealSession('${escAttrJs(session.dispatched.parent)}')"` : ''} title="${escapeHtml(dispatchedTitle(session.dispatched))}">${ICON_DISPATCHED}</span>` : ''}
                 ${runningTerminals.has(session.id) ? `<span class="terminal-badge" onclick="event.stopPropagation(); showSessionTerminal('${escAttrJs(session.id)}')" title="${TERMINAL_TITLE}">${ICON_TERMINAL}</span>` : ''}
-                ${session.hasWaitingForUser ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
-                ${session.hasRunningAgents && !session.hasWaitingForUser ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
+                ${isWaitingSession(session) ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
+                ${session.hasRunningAgents && !isWaitingSession(session) ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
                 ${isLive || session.hasRunningAgents ? `<span class="pulse" title="${isLive ? 'Live' : 'Active agents'}"></span>` : ''}
               </span>
             </div>
@@ -3979,7 +4001,7 @@ function renderSessions() {
       )
     : '';
 
-  if (filteredSessions.length === 0) {
+  if (filteredSessions.length === 0 && !zenGroup) {
     let emptyMsg = 'No sessions found';
     let emptyHint = 'Tasks appear when you use Claude Code';
 
@@ -4036,8 +4058,8 @@ function renderSessions() {
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
   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 gPinned = nestChildren(list.filter(isInPinnedGroup));
+    if (gPinned.length === 0) return nestChildren(list).map(renderSessionCard).join('');
     const gUnpinned = nestChildren(list.filter((s) => !isInPinnedGroup(s)));
     const pinCollapsed = collapsedProjectGroups.has(pinKey);
     return (
@@ -4050,14 +4072,14 @@ function renderSessions() {
       groupChevronSvg(10) +
       '<span class="pinned-sub-label">Pinned</span>' +
       '<span class="group-count">' +
-      gIdlePinned.length +
+      gPinned.length +
       '</span>' +
       '<span class="pinned-ungroup-btn" title="Ungroup pinned sessions">&times;</span>' +
       '</div>' +
       '<div class="pinned-sub-items' +
       (pinCollapsed ? ' collapsed' : '') +
       '">' +
-      gIdlePinned.map(renderSessionCard).join('') +
+      gPinned.map(renderSessionCard).join('') +
       '</div>' +
       '</div>' +
       gUnpinned.map(renderSessionCard).join('')
@@ -4110,10 +4132,9 @@ function renderSessions() {
       sgRest.push(session);
     }
   }
-  for (const [name, g] of transientGroups) if (!sgBuckets.has(g.id)) transientGroups.delete(name);
   // A group emptied by a filter hides its header; a group the user just created (no filters)
   // shows its drop-here state instead of vanishing.
-  const sgFiltering = !!searchQuery || activityFilter.size > 0 || (!!filterProject && filterProject !== '__recent__');
+  const sgFiltering = !zenGroup && sgListFiltered();
 
   // A group whose parent is gone renders at the top.
   const sgIds = new Set(sessionGroups.map((g) => g.id));
@@ -4135,17 +4156,16 @@ function renderSessions() {
 
   // flat = the "All sessions" view, which has no project sub-blocks.
   const sgSectionHtml = (flat) => {
-    const transient = [...transientGroups.values()];
-    if (sessionGroups.length === 0 && transient.length === 0) return '';
+    if (sessionGroups.length === 0) return '';
     let out = '';
-    for (const group of [...(sgChildren.get(null) || []), ...transient]) out += sgGroupHtml(group, flat);
+    for (const group of sgChildren.get(null) || []) out += sgGroupHtml(group, flat);
     if (!out) return '';
     return sectionHtml(SECTION_GROUPS, 'Groups', false, out);
   };
 
   const sgGroupHtml = (group, flat) => {
     const bucket = sgBuckets.get(group.id) || [];
-    const subtree = group.transient ? bucket : sgSubtreeOf(group);
+    const subtree = sgSubtreeOf(group);
     if (subtree.length === 0 && sgFiltering) return '';
     if (!groupPinned) bucket.sort(pinSort);
     const collapsed = collapsedProjectGroups.has(sgKey(group.id));
@@ -4159,17 +4179,6 @@ function renderSessions() {
       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();
@@ -4199,10 +4208,9 @@ function renderSessions() {
       }
     }
     let childHtml = '';
-    if (!group.transient) for (const child of sgChildren.get(group.id) || []) childHtml += sgGroupHtml(child, flat);
+    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>`;
+    return `${sgHeaderHtml(group, countHtml(subtree))}<div class="session-group-sessions${collapsed ? ' collapsed' : ''}" data-group-id="${escapeHtml(group.id)}">${body}${childHtml}</div>`;
   };
 
   let html = '';
@@ -4213,8 +4221,10 @@ function renderSessions() {
         </div>`;
   }
 
-  // Group active sessions by project
-  if (sessionFilter === 'active') {
+  if (zenGroup) {
+    sessionsList.innerHTML = sgGroupHtml(sgGroupById(zenGroup), sessionFilter !== 'active');
+  } else if (sessionFilter === 'active') {
+    // Group active sessions by project
     // Auto-expand a collapsed section when newly-active work lands in it (live refresh).
     expandActiveGroups({ onlyNew: true });
     html += sgSectionHtml(false);
@@ -4253,7 +4263,7 @@ function renderSessions() {
     // The section header is rendered even when nothing is left under it: it is the drop target
     // for ungrouping. Its body is skipped while collapsed — nothing would be visible, and this is
     // the whole project list, re-parsed on every live refresh.
-    const sectioned = sessionGroups.length > 0 || transientGroups.size > 0;
+    const sectioned = sessionGroups.length > 0;
     let projectsHtml = '';
     if (!sectioned || !collapsedProjectGroups.has(SECTION_PROJECTS)) {
       for (const [projectPath, projectSessions] of sortedGroups) {
@@ -4282,7 +4292,7 @@ function renderSessions() {
 
     sessionsList.innerHTML = html + outsideHtml;
   } else {
-    const sectioned = sessionGroups.length > 0 || transientGroups.size > 0;
+    const sectioned = sessionGroups.length > 0;
     const restHtml =
       sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).join('');
     const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
@@ -4405,6 +4415,30 @@ function renderOwnerBadge(task) {
   return `<button type="button" class="task-owner-badge task-owner-link" style="${style}" title="Open dispatched session" onclick="event.stopPropagation(); revealSession('${escAttrJs(target)}')">${ICON_DISPATCHED}${escapeHtml(task.owner)}</button>`;
 }
 
+// Card chips that a tool writing the task file adds: metadata.chips = [{label, title?, tone?}], tone one of
+// muted, warn, accent. The writer is outside cck, so the list is capped and every field is checked.
+function taskChips(task) {
+  const chips = task.metadata?.chips;
+  if (!Array.isArray(chips)) return [];
+  return chips
+    .filter((c) => typeof c?.label === 'string' && c.label.trim())
+    .slice(0, 4)
+    .map((c) => ({
+      label: c.label.trim().slice(0, 24),
+      title: typeof c.title === 'string' ? c.title.slice(0, 200) : '',
+      tone: ['muted', 'warn', 'accent'].includes(c.tone) ? c.tone : 'muted',
+    }));
+}
+
+function renderTaskChips(chips) {
+  return chips
+    .map(
+      (c) =>
+        `<span class="task-chip task-chip-${escapeHtml(c.tone)}"${c.title ? ` title="${escapeHtml(c.title)}"` : ''}>${escapeHtml(c.label)}</span>`,
+    )
+    .join('');
+}
+
 function renderTaskCard(task) {
   const blockers = openBlockers(task);
   const isBlocked = blockers.length > 0;
@@ -4412,6 +4446,9 @@ function renderTaskCard(task) {
   const taskId = useSlug ? `${(task._taskDir || task.sessionId || '')?.slice(0, 4)}-${task.id}` : task.id;
   const statusClass = task.status.replace('_', '-');
   const actualSessionId = task._taskDir || task.sessionId || currentSessionId || '';
+  const isDim = task.metadata?.dim === true;
+  const chips = taskChips(task);
+  const state = [task.status.replace('_', ' '), ...chips.map((c) => c.label)].join(', ');
 
   return `
         <div
@@ -4423,10 +4460,11 @@ function renderTaskCard(task) {
           draggable="true"
           ondragstart="onCardDragStart(event)"
           ondragend="onCardDragEnd(event)"
-          class="task-card ${statusClass} ${isBlocked ? 'blocked' : ''}"
-          aria-label="${escapeHtml(task.subject)} — ${task.status.replace('_', ' ')}">
+          class="task-card ${statusClass} ${isBlocked ? 'blocked' : ''} ${isDim ? 'dim' : ''}"
+          aria-label="${escapeHtml(task.subject)} — ${escapeHtml(state)}">
           <div class="task-id">
             <span>#${taskId}</span>
+            ${renderTaskChips(chips)}
             ${isBlocked ? `<span class="task-blocked" title="Blocked">waiting on ${blockers.map((id) => `#${escapeHtml(id)}`).join(' ')}</span>` : ''}
             ${task.owner ? renderOwnerBadge(task) : ''}
           </div>
@@ -4712,7 +4750,8 @@ async function onColumnDrop(e) {
 // 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 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.
+// windows the list), so membership is never garbage-collected on load. Transient groups go only
+// on a full Active list (sgSweepTransient).
 const SESSION_GROUPS_KEY = 'sessionGroups';
 const SG_ACTION_SELECTOR =
   '.session-pin-btn, .team-info-btn, .plan-indicator, .scratchpad-badge, .bookmarks-badge, .linked-docs-badge, .project-view-btn, .project-new-btn, .header-pad-btn, .group-path-toggle, .pinned-ungroup-btn, .sg-action';
@@ -4747,10 +4786,10 @@ let sgSeenRev = 0;
 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;
+  const hasLocal = local?.groups?.length > 0;
   try {
     const res = hasLocal
-      ? await api('/api/groups/import', { method: 'POST', body: { groups: local.groups, released: local.released } })
+      ? await api('/api/groups/import', { method: 'POST', body: { groups: local.groups } })
       : await api('/api/groups');
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     sgTakeServer(await res.json());
@@ -4791,6 +4830,7 @@ function sgApplyState(saved) {
       id: g.id,
       name: typeof g.name === 'string' && g.name.trim() ? g.name : 'Group',
       parent: typeof g.parent === 'string' ? g.parent : null,
+      ...(g.transient === true ? { transient: true } : {}),
       members: (Array.isArray(g.members) ? g.members : [])
         .filter((m) => m && (m.type === 'project' || m.type === 'session') && typeof m.ref === 'string')
         .map((m) => {
@@ -4801,8 +4841,6 @@ function sgApplyState(saved) {
           return out;
         }),
     }));
-  const released = saved?.released;
-  sgReleased = new Set(Array.isArray(released) ? released.filter((id) => typeof id === 'string') : []);
 }
 
 function persistSessionGroups() {
@@ -4826,7 +4864,7 @@ async function sgFlush() {
     try {
       res = await api('/api/groups', {
         method: 'PUT',
-        body: { rev: sgRev, groups: sessionGroups, released: [...sgReleased] },
+        body: { rev: sgRev, groups: sessionGroups },
       });
     } catch (e) {
       console.warn('[groups] save failed:', e.message);
@@ -4856,8 +4894,7 @@ async function sgFlush() {
 // 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;
+  if (JSON.stringify(data.groups) === JSON.stringify(sessionGroups)) return;
   sgApplyState(data);
   renderSessions();
 }
@@ -4869,6 +4906,12 @@ function sgGroupById(id) {
 // Matches MAX_DEPTH in lib/user-groups.js.
 const SG_MAX_DEPTH = 8;
 
+function sgSubtreeIds(rootId) {
+  const ids = new Set([rootId]);
+  for (const id of ids) for (const g of sessionGroups) if (g.parent === id) ids.add(g.id);
+  return ids;
+}
+
 function sgPathOf(group) {
   const names = [];
   for (let g = group; g && names.length < SG_MAX_DEPTH; g = sgGroupById(g.parent)) names.unshift(g.name);
@@ -4887,26 +4930,30 @@ function sgSessionParent(id) {
 
 // An individually placed session wins over the placement of its project.
 function sgGroupForSession(session) {
-  return sgUserGroupFor(session) || sgDispatchGroupFor(session);
-}
-
-function sgUserGroupFor(session) {
   const project = sessionProjectKey(session);
   return sgGroupOf('session', session.id) || (project ? sgGroupOf('project', project) : null);
 }
 
-// Transient groups come from the server (`dispatch start --group`) and go when their sessions
-// end. They are never written to localStorage; the objects are cached only so collapse state,
-// keyed by id, survives a re-render.
-const transientGroups = new Map();
-
-function sgTransientGroup(name) {
-  let group = transientGroups.get(name);
-  if (!group) {
-    group = { id: `t_${name}`, name, transient: true, members: [] };
-    transientGroups.set(name, group);
-  }
-  return group;
+function sgListFiltered() {
+  return !!searchQuery || activityFilter.size > 0 || (!!filterProject && filterProject !== '__recent__');
+}
+
+// A transient group (`dispatch start --group` made it) goes once the Active view shows none of its
+// sessions: they ended or were dismissed. A session still starting has no card yet, so its
+// terminal or placeholder counts. Only the full Active list can tell, so other views keep them.
+function sgSweepTransient() {
+  if (sgRev === null || !sessionGroups.some((g) => g.transient)) return;
+  if (zenGroup || zenMode || sessionFilter !== 'active' || sessionsHasMore || sgListFiltered()) return;
+  const shown = new Set(getFilteredSessions().map((s) => s.id));
+  const starting = (id) => !dismissedSessionIds.has(id) && (runningTerminals.has(id) || dispatchSpecs.has(id));
+  const present = (m) => m.type !== 'session' || shown.has(m.ref) || starting(m.ref);
+  const gone = groupTree.cascade(sessionGroups, (g) => !!g.transient && !g.members.some(present));
+  if (!gone.size) return;
+  let collapsed = false;
+  for (const g of gone) collapsed = collapsedProjectGroups.delete(sgKey(g.id)) || collapsed;
+  if (collapsed) persistCollapsedGroups();
+  sessionGroups = sessionGroups.filter((g) => !gone.has(g));
+  persistSessionGroups();
 }
 
 const childDepthClass = (depth) => (depth ? ` sg-child sg-depth-${depth}` : '');
@@ -4917,26 +4964,9 @@ function dispatchedTitle({ parent }) {
   return `Started by ${by}${parent ? ' — click to reveal it' : ''}`;
 }
 
-// A user group with the same name takes the session in, so Keep does not split a group in two.
-function sgDispatchGroupFor(session) {
-  if (sgReleased.has(session.id)) return null;
-  const name = session.dispatchGroup;
-  if (!name) return null;
-  return sessionGroups.find((g) => g.name.toLowerCase() === name) || sgTransientGroup(name);
-}
-
-function sgKeepTransient(name) {
-  const group = sgTransientGroup(name);
-  const members = sessions.filter((s) => sgGroupForSession(s) === group);
-  const kept = sgCreateGroup(name);
-  for (const s of members) kept.members.push({ type: 'session', ref: s.id });
-  persistSessionGroups();
-}
-
-function sgDeleteTransient(name) {
-  const group = sgTransientGroup(name);
-  for (const s of sessions) if (sgGroupForSession(s) === group) sgReleased.add(s.id);
-  persistSessionGroups();
+// A group the user edits is theirs: Keep, a rename or a placement clears the flag.
+function sgKeep(group) {
+  delete group.transient;
 }
 
 function sgDetach(type, ref) {
@@ -4962,6 +4992,7 @@ function sgHostOf(group, session) {
 function sgAssign(groupId, type, ref, opts = {}) {
   const group = sgGroupById(groupId);
   if (!group) return;
+  sgKeep(group);
   const parent = opts.parent !== undefined ? opts.parent : sgMemberOf(group, type, ref)?.parent;
   sgDetach(type, ref);
   // Pulling a whole project in supersedes the individual placements of its sessions.
@@ -5006,6 +5037,20 @@ function sgDeleteGroup(id) {
   persistSessionGroups();
 }
 
+async function sgConfirmDelete(group) {
+  const ok = await confirmModal({
+    title: 'Delete this group?',
+    message: 'Its sessions and projects go back to Projects.',
+    chip: group.name,
+    okLabel: 'Delete group',
+  });
+  if (ok) {
+    sgDeleteGroup(group.id);
+    renderSessions();
+  }
+  return ok;
+}
+
 // Move one member of a group in front of another — the user's own order inside the group.
 function sgReorderMember(groupId, drag, target) {
   const group = sgGroupById(groupId);
@@ -5059,13 +5104,10 @@ function sgHeaderHtml(group, countHtml) {
   const nameHtml = editing
     ? `<input class="sg-name-input" type="text" value="${escapeHtml(group.name)}" aria-label="Group name" spellcheck="false">`
     : `<span class="group-name">${escapeHtml(group.name)}</span>`;
-  const attrs = group.transient
-    ? `class="session-group-header sg-transient${collapsed ? ' collapsed' : ''}" data-transient-group="${escapeHtml(group.name)}" title="${escapeHtml(group.name)} — goes when its sessions end"`
-    : `class="session-group-header${collapsed ? ' collapsed' : ''}" draggable="${editing ? 'false' : 'true'}" data-group-id="${escapeHtml(group.id)}" title="${escapeHtml(group.name)} — drop sessions or projects here"`;
-  const actions = group.transient
-    ? `<span class="sg-action sg-keep" title="Keep this group after its sessions end">Keep</span>
-          <span class="sg-action sg-delete" title="Delete group (sessions return to Projects)">&times;</span>`
-    : `<span class="sg-action sg-rename" title="Rename group"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>
+  const hint = group.transient ? 'goes when its sessions leave the Active view' : 'drop sessions or projects here';
+  const attrs = `class="session-group-header${group.transient ? ' sg-transient' : ''}${collapsed ? ' collapsed' : ''}${group.id === zenGroup ? ' sg-zen' : ''}" draggable="${editing ? 'false' : 'true'}" data-group-id="${escapeHtml(group.id)}" title="${escapeHtml(group.name)} — ${hint}"`;
+  const actions = `${group.transient ? '<span class="sg-action sg-keep" title="Keep this group after its sessions end">Keep</span>' : ''}
+          <span class="sg-action sg-rename" title="Rename group"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>
           <span class="sg-action sg-delete" title="Delete group (members return to Projects)">&times;</span>
           ${headerPadBtnHtml(_groupScratchpadKey(group.id), group.name)}`;
   return `
@@ -5100,6 +5142,7 @@ function sgCommitRename(input, save) {
   sgEditingId = null;
   if (save && group && value && value !== group.name) {
     group.name = value;
+    sgKeep(group);
     persistSessionGroups();
   }
   renderSessions();
@@ -5234,8 +5277,7 @@ function sgGroupDropZone(target) {
       : null;
   }
   const dragSession = sgDrag.kind === 'session' ? sessions.find((x) => x.id === sgDrag.ref) : null;
-  const releasable = !!dragSession && !sgUserGroupFor(dragSession) && !!sgDispatchGroupFor(dragSession);
-  if (zone.classList.contains('sg-ungroup-zone')) return dragGroup || releasable ? { zone } : null;
+  if (zone.classList.contains('sg-ungroup-zone')) return dragGroup ? { zone } : null;
   const fromGroup = dragSession ? sgGroupForSession(dragSession) : dragGroup;
   const fromGroupId = fromGroup?.id || null;
   // A drop that lands on the host the session already has changes nothing, and highlighting it
@@ -5255,8 +5297,7 @@ function sgGroupDropZone(target) {
     const targetSession = sessions.find((s) => s.id === targetSessionId);
     const targetGroup = targetSession ? sgGroupForSession(targetSession) : null;
     const targetGroupId = targetGroup?.id || null;
-    // A transient group holds no members to reorder or place under; a drop there pairs instead.
-    if (targetGroup && !targetGroup.transient) {
+    if (targetGroup) {
       // Stacking onto a card nests the dragged session under it, in that card's placement, project
       // block included.
       if (sgSessionParent(sgDrag.ref) === targetSessionId && fromGroupId === targetGroupId) return null;
@@ -5363,7 +5404,6 @@ function sgOnDrop(e) {
     }
   } else {
     sgDetach(drag.kind, drag.ref);
-    if (drag.kind === 'session') sgReleased.add(drag.ref);
     persistSessionGroups();
   }
   sgFinishDrag();
@@ -5776,6 +5816,10 @@ function setGroupCollapsed(header, collapsed) {
   if (!header) return;
   const projectPath = header.dataset.groupPath;
   if (collapsed === collapsedProjectGroups.has(projectPath)) return;
+  if (collapsed && projectPath === pinPeekKey) {
+    pinPeekKey = null;
+    pinPeekClosedFor = currentSessionId;
+  }
   if (collapsed) collapsedProjectGroups.add(projectPath);
   else collapsedProjectGroups.delete(projectPath);
   header.classList.toggle('collapsed', collapsed);
@@ -5785,7 +5829,7 @@ function setGroupCollapsed(header, collapsed) {
 }
 
 function persistCollapsedGroups() {
-  store.writeJson(COLLAPSED_GROUPS_KEY, [...collapsedProjectGroups]);
+  store.writeJson(COLLAPSED_GROUPS_KEY, [...collapsedProjectGroups, ...(pinPeekKey ? [pinPeekKey] : [])]);
 }
 
 let prevActiveSessionIds = null; // null until primed by the first onlyNew pass
@@ -5815,16 +5859,16 @@ function expandActiveGroups({ onlyNew = false } = {}) {
 }
 
 // Drops every collapse key that could hide this session: its project, a named group wrapping
-// the project or the session itself and the project block it renders under there, the pinned sub-section only when the card renders inside
-// it (pinned, not sticky, idle — see renderGroupSessions), and the section header that holds it:
+// the project or the session itself and the project block it renders under there, and the section header that holds it
+// (a collapsed Pinned sub-section opens only for the open session, see syncPinPeek):
 // Groups for a grouped session, else Projects or Sessions, which depends on the view. Returns
 // whether anything changed.
 function uncollapseFor(session) {
   const group = sgGroupForSession(session);
   const keys = [
-    sessionProjectKey(session) || '__ungrouped__',
-    ...pinnedCollapseKeys(session),
-    ...(group ? [sgKey(group.id), sgHostOf(group, session), SECTION_GROUPS] : [SECTION_PROJECTS, SECTION_SESSIONS]),
+    ...(group
+      ? [sgKey(group.id), sgHostOf(group, session), SECTION_GROUPS]
+      : [sessionProjectKey(session) || '__ungrouped__', SECTION_PROJECTS, SECTION_SESSIONS]),
   ];
   let changed = false;
   for (const key of keys) {
@@ -5836,23 +5880,25 @@ function uncollapseFor(session) {
 function pinnedCollapseKeys(session) {
   if (!isInPinnedGroup(session)) return [];
   const group = sgGroupForSession(session);
+  if (!group) return [pinKey(sessionProjectKey(session) || '__ungrouped__')];
   const host = sgHostOf(group, session);
-  return [
-    pinKey(sessionProjectKey(session) || '__ungrouped__'),
-    host && pinKey(host),
-    group && `__pinned_group_${group.id}__`,
-  ];
+  return [host ? pinKey(host) : `__pinned_group_${group.id}__`];
 }
 
-// A card that moves into a collapsed Pinned sub-section would vanish from under the click.
-function expandPinnedFor(sessionId) {
-  const session = sessions.find((s) => s.id === sessionId);
-  if (!session) return;
-  let changed = false;
-  for (const key of pinnedCollapseKeys(session)) {
-    if (key && collapsedProjectGroups.delete(key)) changed = true;
-  }
-  if (changed) persistCollapsedGroups();
+// A Pinned sub-section the user collapsed opens while the open session is in it and closes once
+// the user leaves that session. The peek is never saved: persistCollapsedGroups writes the key back.
+let pinPeekKey = null;
+let pinPeekClosedFor = null;
+
+function syncPinPeek() {
+  if (pinPeekClosedFor !== currentSessionId) pinPeekClosedFor = null;
+  const session = currentSessionId && !pinPeekClosedFor ? sessions.find((s) => s.id === currentSessionId) : null;
+  const key = session ? (pinnedCollapseKeys(session)[0] ?? null) : null;
+  const want = key && (key === pinPeekKey || collapsedProjectGroups.has(key)) ? key : null;
+  if (want === pinPeekKey) return;
+  if (pinPeekKey) collapsedProjectGroups.add(pinPeekKey);
+  if (want) collapsedProjectGroups.delete(want);
+  pinPeekKey = want;
 }
 
 function isGroupHeader(el) {
@@ -6181,6 +6227,23 @@ async function saveTaskField(taskId, sessionId, field, value) {
   }
 }
 
+const DETAIL_LAYOUT_KEY = 'cck-detail-layout';
+
+function setDetailExpanded(expanded) {
+  detailPanel.classList.toggle('expanded', expanded);
+  const btn = document.getElementById('expand-detail');
+  btn.innerHTML = showIcon(expanded ? 'restore' : 'expand');
+  btn.title = expanded ? 'Restore (E)' : 'Expand (E)';
+  btn.setAttribute('aria-label', expanded ? 'Restore' : 'Expand');
+  store.setItem(DETAIL_LAYOUT_KEY, expanded ? 'expanded' : '');
+}
+
+function initDetailLayout() {
+  document.getElementById('expand-detail').onclick = () =>
+    setDetailExpanded(!detailPanel.classList.contains('expanded'));
+  setDetailExpanded(store.getItem(DETAIL_LAYOUT_KEY) === 'expanded');
+}
+
 function closeDetailPanel() {
   detailPanel.classList.remove('visible');
   document.getElementById('delete-task-btn').style.display = 'none';
@@ -6255,6 +6318,9 @@ async function deleteTask(taskId, sessionId) {
     okLabel: 'Delete task',
   });
   if (!ok) return;
+  const info = taskId === selectedTaskId ? getSelectedCardInfo() : null;
+  const colCards = info ? Array.from(COLUMNS[info.colIndex].el.querySelectorAll('.task-card')) : [];
+  const next = colCards[info?.cardIndex + 1] || colCards[info?.cardIndex - 1];
 
   try {
     const res = await api(apiPath`/api/tasks/${sessionId}/${taskId}`, { method: 'DELETE' });
@@ -6262,6 +6328,14 @@ async function deleteTask(taskId, sessionId) {
     if (res.ok) {
       closeDetailPanel();
       await refreshCurrentView();
+      if (info && focusZone === 'board') {
+        if (next) {
+          selectTask(next.dataset.taskId, next.dataset.sessionId);
+        } else {
+          selectedTaskId = null;
+          navigateVertical(1);
+        }
+      }
     } else {
       const error = await res.json().catch(() => ({}));
       showToast(`Failed to delete task: ${error.error || 'Unknown error'}`, 'error');
@@ -6298,6 +6372,7 @@ const SHORTCUT_TABS = [
         rows: [
           { keys: ['Enter'], label: 'Toggle task detail panel' },
           { keys: ['D'], label: 'Delete selected task' },
+          { keys: ['E'], label: 'Expand / restore task detail panel' },
           { keys: ['N'], label: 'Toggle scratchpad (in the sidebar: the item under the cursor)' },
           { keys: ['Ctrl', 'E'], combo: true, label: 'Set the session scratchpad emoji (in the scratchpad)' },
           { keys: ['R'], label: 'Refresh data' },
@@ -6321,7 +6396,12 @@ const SHORTCUT_TABS = [
           { keys: ['\\'], label: 'Toggle sidebar' },
           { keys: ['T'], label: 'Toggle theme' },
           { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
-          { keys: ['Ctrl', 'Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
+          { keys: ['←', '→'], label: 'Storage manager: switch tab' },
+          {
+            keys: ['Ctrl', 'Shift', 'Z'],
+            combo: true,
+            label: 'Zen mode (current session, or the group under the cursor)',
+          },
           { keys: ['Ctrl', 'Shift', 'K'], combo: true, label: 'Show / hide Kanbot' },
           { keys: ['Ctrl', '+'], combo: true, label: 'Larger modal text' },
           { keys: ['Ctrl', '−'], combo: true, label: 'Smaller modal text' },
@@ -6937,12 +7017,17 @@ function _renderOrphanGroup(count, innerHtml) {
   return _renderProjectGroup('Orphaned', `<span class="storage-item-badge orphan">${count}</span>`, innerHtml);
 }
 
+function _markStorageTab(tab) {
+  document.querySelectorAll('.storage-tab').forEach((t) => {
+    t.classList.toggle('active', t.dataset.tab === tab);
+    t.setAttribute('aria-selected', String(t.dataset.tab === tab));
+  });
+}
+
 async function showStorageManager() {
   _storageKnownSessions = null;
   _updateStorageTotal();
-  document.querySelectorAll('.storage-tab').forEach((t) => {
-    t.classList.toggle('active', t.dataset.tab === 'sessions');
-  });
+  _markStorageTab('sessions');
   const modal = document.getElementById('storage-modal');
   modal.classList.add('visible');
   const known = await _fetchKnownSessions().catch(() => null);
@@ -6957,9 +7042,14 @@ function closeStorageManager() {
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function switchStorageTab(tab) {
-  document.querySelectorAll('.storage-tab').forEach((t) => {
-    t.classList.toggle('active', t.dataset.tab === tab);
-  });
+  _markStorageTab(tab);
+  _renderStorageTab();
+}
+
+function stepStorageTab(step) {
+  const tabs = [...document.querySelectorAll('.storage-tab')];
+  const i = tabs.findIndex((t) => t.classList.contains('active'));
+  _markStorageTab(tabs[(i + step + tabs.length) % tabs.length].dataset.tab);
   _renderStorageTab();
 }
 
@@ -6968,9 +7058,14 @@ function _renderStorageTab() {
   if (!modal?.classList.contains('visible')) return;
   const body = document.getElementById('storage-modal-body');
   const tab = document.querySelector('.storage-tab.active')?.dataset.tab || 'sessions';
+  const groupsClean = document.getElementById('storage-groups-clean-btn');
+  groupsClean.style.display = tab === 'groups' ? '' : 'none';
+  groupsClean.disabled = true;
   if (tab === 'sessions') body.innerHTML = _renderStorageSessions();
+  else if (tab === 'dismissed') body.innerHTML = _renderStorageDismissed();
   else if (tab === 'scratchpads') body.innerHTML = _renderStorageScratchpads();
   else if (tab === 'linked-docs') body.innerHTML = _renderStorageLinkedDocs();
+  else if (tab === 'groups') _renderStorageGroups(body);
 }
 
 function _renderStorageSessions() {
@@ -7046,6 +7141,35 @@ function _renderStorageSessions() {
   return html;
 }
 
+function _renderStorageDismissed() {
+  const ids = [...dismissedSessionIds.keys()];
+  if (!ids.length) return '<div class="storage-empty">No dismissed sessions</div>';
+  const { groups, orphans } = _groupByProject(ids);
+  const renderItem = ({ id, session }) => `<div class="storage-item">
+      <span class="storage-item-id">${_sessionLabel(session, id)}</span>
+      <span class="storage-item-meta">dismissed ${formatDate(dismissedSessionIds.get(id))}</span>
+      <div class="storage-item-actions">
+        <button onclick="_storageViewSession('${escAttrJs(id)}')">View</button>
+        <button onclick="_storageRestoreSession('${escAttrJs(id)}')">Restore</button>
+      </div>
+    </div>`;
+  let html = '';
+  for (const [project, items] of groups) {
+    html += _renderProjectGroup(
+      escapeHtml(_projectLabel(project)),
+      `${items.length} session${items.length > 1 ? 's' : ''}`,
+      items.map(renderItem).join(''),
+    );
+  }
+  if (orphans.length) html += _renderOrphanGroup(orphans.length, orphans.map(renderItem).join(''));
+  return html;
+}
+
+function _storageRestoreSession(id) {
+  setSessionDismissed(id, false);
+  _renderStorageTab();
+}
+
 async function _storageViewSession(id) {
   closeStorageManager();
   revealedStorageSessionId = id;
@@ -7276,6 +7400,76 @@ function _storageClearLinkedDocs(sessionId) {
   afterLinkedDocsChanged(sessionId);
 }
 
+async function _storageGroupsClean(group, dryRun) {
+  const shown = await getJson('/api/sessions', null, { query: { filter: 'active', limit: 'all', lite: '1' } });
+  if (!Array.isArray(shown)) throw new Error('could not list sessions');
+  const res = await api('/api/groups/clean', {
+    method: 'POST',
+    body: { group, dryRun, keep: shown.map((s) => s.id), hide: [...dismissedSessionIds.keys()] },
+  });
+  if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || `HTTP ${res.status}`);
+  return res.json();
+}
+
+async function _renderStorageGroups(body) {
+  body.innerHTML = '<div class="storage-empty">Loading groups…</div>';
+  let out;
+  try {
+    out = await _storageGroupsClean(null, true);
+  } catch (e) {
+    out = { error: e.message };
+  }
+  _showStorageGroups(body, out);
+}
+
+function _showStorageGroups(body, out) {
+  if (document.querySelector('.storage-tab.active')?.dataset.tab !== 'groups') return;
+  document.getElementById('storage-groups-clean-btn').disabled = !out.groups?.some((g) => g.hidden);
+  if (out.error) {
+    body.innerHTML = `<div class="storage-empty">Could not load groups: ${escapeHtml(out.error)}</div>`;
+    return;
+  }
+  if (!out.groups.length) {
+    body.innerHTML = '<div class="storage-empty">No groups</div>';
+    return;
+  }
+  const rows = out.groups
+    .map((g) => {
+      const badge = g.hidden ? ` <span class="storage-item-badge">${g.hidden} hidden</span>` : '';
+      return `<div class="storage-group-header storage-group-row">
+      <span>${escapeHtml(g.path)}${badge}</span>
+      <div class="storage-item-actions">
+        <span class="storage-item-meta">${g.members} member${g.members === 1 ? '' : 's'}</span>
+        <button class="danger" title="Take out the hidden sessions, here and in the groups under it" onclick="_storageCleanGroup('${escAttrJs(g.id)}')">Clean</button>
+        <button class="danger" onclick="_storageDeleteGroup('${escAttrJs(g.id)}')">Delete</button>
+      </div>
+    </div>`;
+    })
+    .join('');
+  const hidden = out.groups.reduce((n, g) => n + g.hidden, 0);
+  body.innerHTML = _renderProjectGroup('Groups', `${hidden} hidden`, rows);
+}
+
+async function _storageCleanGroup(group) {
+  let out;
+  try {
+    out = await _storageGroupsClean(group, false);
+  } catch (e) {
+    showToast(`Clean failed: ${e.message}`, 'error');
+    return;
+  }
+  const n = out.dropped;
+  showToast(n ? `Took ${n} hidden session${n === 1 ? '' : 's'} out of the groups` : 'No hidden sessions');
+  _showStorageGroups(document.getElementById('storage-modal-body'), out);
+}
+
+async function _storageDeleteGroup(id) {
+  const group = sgGroupById(id);
+  if (!group || !(await sgConfirmDelete(group))) return;
+  await sgSaving;
+  _renderStorageTab();
+}
+
 function _findOrphanedKeys(known) {
   if (!known.size) return [];
   const orphaned = [];
@@ -7386,15 +7580,17 @@ function dismissSessionFromList(sid) {
 }
 
 async function confirmDismissBlockers(sid) {
-  const sticky = stickySessionIds.has(sid);
+  const pinState = getSessionPinState(sid);
+  const pinned = pinState !== 'none';
   const terminal = runningTerminals.has(sid);
-  if (!sticky && !terminal) return true;
+  if (!pinned && !terminal) return true;
   const session = sessions.find((s) => s.id === sid);
   const name = session ? sessionDisplayName(session) : sid.slice(0, 8);
-  const has = [sticky && 'a sticky pin', terminal && 'a running terminal'].filter(Boolean).join(' and ');
-  const okLabel = sticky && terminal ? 'Unpin, end and dismiss' : sticky ? 'Unpin and dismiss' : 'End and dismiss';
+  const pinLabel = pinState === 'sticky' ? 'sticky pin' : 'pin';
+  const has = [pinned && `a ${pinLabel}`, terminal && 'a running terminal'].filter(Boolean).join(' and ');
+  const okLabel = pinned && terminal ? 'Unpin, end and dismiss' : pinned ? 'Unpin and dismiss' : 'End and dismiss';
   const steps = [
-    sticky && 'Remove the sticky pin',
+    pinned && `Remove the ${pinLabel}`,
     terminal && 'End the terminal',
     'Hide the session from the sidebar',
   ].filter(Boolean);
@@ -7405,7 +7601,7 @@ async function confirmDismissBlockers(sid) {
     okLabel,
   });
   if (!ok) return false;
-  if (sticky) unpinSession(sid);
+  if (isAnyPinned(sid)) unpinSession(sid);
   if (terminal) closeTerminalSession(sid);
   return true;
 }
@@ -7504,6 +7700,12 @@ document.addEventListener('keydown', (e) => {
     } else if (e.key === '?' && document.getElementById('help-modal').classList.contains('visible')) {
       e.preventDefault();
       closeHelpModal();
+    } else if (
+      matchKey(e, 'ArrowLeft', 'ArrowRight') &&
+      [...document.querySelectorAll('.modal-overlay.visible')].at(-1)?.id === 'storage-modal'
+    ) {
+      e.preventDefault();
+      stepStorageTab(matchKey(e, 'ArrowLeft') ? -1 : 1);
     } else if (shiftOnly(e, 'KeyM') && document.getElementById('msg-detail-modal').classList.contains('visible')) {
       e.preventDefault();
       closeMsgDetailModal();
@@ -7581,11 +7783,15 @@ document.addEventListener('keydown', (e) => {
   }
   if (matchKey(e, '[', ']') && cyclePaneStrip(e.key === ']' ? 1 : -1)) {
     e.preventDefault();
+    focusActivePane();
     return;
   }
   const altOnly = e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
   if (altOnly && (e.code === 'BracketLeft' || e.code === 'BracketRight')) {
-    if (cyclePane(e.code === 'BracketRight' ? 1 : -1)) e.preventDefault();
+    if (cyclePane(e.code === 'BracketRight' ? 1 : -1)) {
+      e.preventDefault();
+      focusActivePane();
+    }
     return;
   }
   if (altOnly && e.code === 'KeyW' && closeFocusedPane()) {
@@ -7603,6 +7809,7 @@ document.addEventListener('keydown', (e) => {
   }
   if (plainShift && (e.key === '{' || e.key === '}') && focusPaneSide(e.key === '{' ? 'l' : 'r')) {
     e.preventDefault();
+    focusActivePane();
     return;
   }
   if (shiftOnly(e, 'KeyL')) {
@@ -7650,8 +7857,12 @@ document.addEventListener('keydown', (e) => {
 
   // Tab toggles focus zone
   if (e.key === 'Tab' && detailPanel.contains(e.target)) return;
+  // A focused pane document keeps the arrow, page and space keys for scrolling.
+  const inPane = paneViews.contains(e.target);
+  if (inPane && e.key !== 'Tab' && e.key !== 'Escape') return;
   if (e.key === 'Tab') {
     e.preventDefault();
+    if (inPane) e.target.blur();
     // The terminal replaces the board, so it takes the board's place in the Tab cycle.
     if (wantsTerminal()) {
       if (focusZone === 'sidebar') focusTerminalPane();
@@ -7732,6 +7943,12 @@ document.addEventListener('keydown', (e) => {
       deleteTask(selectedTaskId, selectedSessionId || currentSessionId);
       return;
     }
+
+    if (matchKey(e, 'KeyE') && detailPanel.classList.contains('visible')) {
+      e.preventDefault();
+      setDetailExpanded(!detailPanel.classList.contains('expanded'));
+      return;
+    }
   }
 
   if (e.key === 'Escape') {
@@ -9684,7 +9901,8 @@ function setupEventSource() {
         if (!skipOffScreen()) refreshOpenPlan();
       }
 
-      if (data.type === 'terminals-update' && Array.isArray(data.ids)) setRunningTerminals(data.ids);
+      if (data.type === 'terminals-update' && Array.isArray(data.ids))
+        setRunningTerminals(data.ids, data.awaitingTrust);
 
       if (data.type === 'terminal:ended' && typeof data.id === 'string') onTerminalEnded(data.id);
 
@@ -10347,9 +10565,8 @@ function isSessionActive(s) {
   return s.hasRecentLog || s.inProgress > 0 || s.hasActiveAgents || s.hasWaitingForUser;
 }
 
-// An active pinned session renders outside the Pinned group until the user dismisses it.
 function isInPinnedGroup(s) {
-  return isPlacedPinned(s.id) && !isPlacedSticky(s.id) && (!isSessionActive(s) || dismissedSessionIds.has(s.id));
+  return isPlacedPinned(s.id) && !isPlacedSticky(s.id);
 }
 
 const SESSION_UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
@@ -11046,24 +11263,32 @@ function renderFilterState() {
   document.getElementById('filter-menu-btn')?.classList.toggle('has-filters', short.length > 0);
 }
 
+// With the sidebar cursor on a group header, zen shows that group instead of the open session.
 function toggleZenMode() {
-  zenMode = !zenMode;
+  const leavingSessionZen = zenMode;
+  if (zenMode) zenMode = false;
+  else if (zenGroup) zenGroup = null;
+  else {
+    const header = focusZone === 'sidebar' ? sessionsList.querySelector('.session-group-header.kb-selected') : null;
+    zenGroup = header?.dataset.groupId || null;
+    zenMode = !zenGroup;
+  }
   store.setItem(ZEN_KEY, String(zenMode));
   renderZenState();
-  if (zenMode) closeFilterMenu();
+  if (zenMode || zenGroup) closeFilterMenu();
   renderSessions();
-  // The open session may be outside the current server page/filter; refetch pins it in.
-  if (zenMode) fetchSessions(false);
+  // The open session or the group's members may be outside the current server page/filter,
+  // and leaving group zen needs the filtered page back.
+  if (!leavingSessionZen) fetchSessions(false);
 }
 
 function renderZenState() {
   const btn = document.getElementById('zen-mode-btn');
   if (!btn) return;
-  btn.classList.toggle('active', zenMode);
-  btn.setAttribute('aria-pressed', String(zenMode));
-  btn.title = zenMode
-    ? 'Zen mode on — show all sessions (Ctrl+Shift+Z)'
-    : 'Zen mode: current session only (Ctrl+Shift+Z)';
+  const on = zenMode || !!zenGroup;
+  btn.classList.toggle('active', on);
+  btn.setAttribute('aria-pressed', String(on));
+  btn.title = on ? 'Zen mode on — show all sessions (Ctrl+Shift+Z)' : 'Zen mode: current session only (Ctrl+Shift+Z)';
 }
 
 function filterBySessions(value) {
@@ -11178,46 +11403,23 @@ document.addEventListener('click', (e) => {
   if (sgHeader) {
     if (e.target.closest('.sg-name-input')) return;
     e.stopPropagation();
+    const groupId = sgHeader.dataset.groupId;
+    const group = sgGroupById(groupId);
+    if (!group) return;
     if (e.target.closest('.sg-keep')) {
-      sgKeepTransient(sgHeader.dataset.transientGroup);
+      sgKeep(group);
+      persistSessionGroups();
       renderSessions();
       return;
     }
-    if (sgHeader.dataset.transientGroup && e.target.closest('.sg-delete')) {
-      const name = sgHeader.dataset.transientGroup;
-      confirmModal({
-        title: 'Delete this group?',
-        message: 'Its sessions go back to Projects.',
-        chip: name,
-        okLabel: 'Delete group',
-      }).then((ok) => {
-        if (!ok) return;
-        sgDeleteTransient(name);
-        renderSessions();
-      });
+    if (e.target.closest('.sg-rename')) {
+      sgBeginRename(groupId);
+      return;
+    }
+    if (e.target.closest('.sg-delete')) {
+      sgConfirmDelete(group);
       return;
     }
-    const groupId = sgHeader.dataset.groupId;
-    const group = sgGroupById(groupId);
-    if (group) {
-      if (e.target.closest('.sg-rename')) {
-        sgBeginRename(groupId);
-        return;
-      }
-      if (e.target.closest('.sg-delete')) {
-        confirmModal({
-          title: 'Delete this group?',
-          message: 'Its sessions and projects go back to Projects.',
-          chip: group.name,
-          okLabel: 'Delete group',
-        }).then((ok) => {
-          if (!ok) return;
-          sgDeleteGroup(groupId);
-          renderSessions();
-        });
-        return;
-      }
-    } else if (!sgHeader.dataset.transientGroup) return;
   }
 
   const header = e.target.closest(COLLAPSIBLE_HEADER_SELECTOR);
@@ -11572,7 +11774,7 @@ function updateStickyBtnState() {
   const isSticky = stickySessionIds.has(_infoModalSessionId);
   stickyBtn.style.display = '';
   stickyBtn.classList.toggle('active', isSticky);
-  stickyBtn.title = isSticky ? 'Remove sticky pin' : 'Sticky pin — always show at top';
+  stickyBtn.title = isSticky ? 'Remove sticky pin' : 'Sticky pin — always show in the list';
   const svg = stickyBtn.querySelector('svg');
   if (svg) svg.setAttribute('fill', isSticky ? 'currentColor' : 'none');
 }
@@ -13165,7 +13367,9 @@ function mountPane(sid, pane) {
   view.dataset.key = key;
   paneViews.appendChild(view);
   paneFrames.set(key, view);
-  loadPaneView(sid, pane, view);
+  loadPaneView(sid, pane, view).then(() => {
+    if (paneFocusWanted === key && activePaneView() === view) focusActivePane();
+  });
   while (paneFrames.size > PANE_FRAME_LIMIT) {
     const [oldKey, oldView] = paneFrames.entries().next().value;
     paneFrames.delete(oldKey);
@@ -13226,6 +13430,10 @@ async function loadPaneView(sid, pane, view, scroll) {
       : ['pane-frame modal-zoomable', data.content + REVIEW_BRIDGE_TAG + restore];
     const frame = createPreviewFrame(cls, doc);
     frame.title = pane.title;
+    // Focus given before the document loads stays on the frame element, out of the document's keys.
+    frame.addEventListener('load', () => {
+      if (document.activeElement === frame) frame.contentWindow?.focus();
+    });
     view.appendChild(frame);
     attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, frame, frame));
     return;
@@ -13272,6 +13480,7 @@ function appendPaneDoc(view) {
   doc.className = 'pane-doc';
   const body = document.createElement('div');
   body.className = 'pane-doc-body rendered-md modal-zoomable';
+  body.tabIndex = -1;
   doc.append(body, paneDocGrip(doc));
   view.appendChild(doc);
   return body;
@@ -13347,8 +13556,11 @@ async function reloadPaneView(sid, pane, view) {
   paneReloads.delete(key);
   fresh.className = view.className;
   fresh.style.visibility = '';
+  const hadFocus = view.contains(document.activeElement);
   view.remove();
   paneFrames.set(key, fresh);
+  const target = hadFocus && paneFocusTarget(fresh);
+  if (target) focusPaneTarget(target);
   syncPaneReview();
   return true;
 }
@@ -13393,6 +13605,27 @@ function activePaneView() {
   return wantsTerminal() ? null : paneViews.querySelector('.pane-view.on.pane-focus');
 }
 
+// A URL page is on another origin and would keep every key from the board, so it gets no focus.
+function paneFocusTarget(view) {
+  return view?.querySelector(':scope > .pane-doc > .pane-doc-body, :scope > .pane-frame:not(.pane-url-frame)');
+}
+
+let paneFocusWanted = null;
+
+// The key that switches panes also moves focus into the pane, so its content takes the scroll keys.
+function focusActivePane() {
+  const view = activePaneView();
+  const target = paneFocusTarget(view);
+  paneFocusWanted = view && !view.firstElementChild ? view.dataset.key : null;
+  if (target) focusPaneTarget(target);
+  else if (paneViews.contains(document.activeElement)) document.activeElement.blur();
+}
+
+function focusPaneTarget(target) {
+  target.focus({ preventScroll: true });
+  target.contentWindow?.focus();
+}
+
 function isPaneDocOnScreen() {
   return !!activePaneView()?.querySelector('.modal-zoomable');
 }
@@ -13918,7 +14151,9 @@ paneStrip.addEventListener('click', (e) => {
     return;
   }
   const tab = e.target.closest('.pane-tab');
-  if (tab) selectPane(tab.dataset.pane);
+  if (!tab) return;
+  selectPane(tab.dataset.pane);
+  focusActivePane();
 });
 paneStrip.addEventListener('auxclick', (e) => {
   const tab = e.target.closest('.pane-tab');
@@ -14288,6 +14523,7 @@ function toggleTerminal() {
   setTerminalMode(currentSessionId, !terminalModes().has(currentSessionId));
   termState.focusNext = true;
   syncTerminal();
+  if (!wantsTerminal()) focusActivePane();
 }
 
 // The show card sits in the pane but is not the terminal, so Alt+` from it goes to the terminal.
@@ -14352,7 +14588,7 @@ function setSwapPair(last, previous) {
 async function swapToPreviousSession() {
   const target = currentSessionId === lastSessionId ? previousSessionId : lastSessionId;
   if (!target || target === currentSessionId) return;
-  if (terminalPaneFocused()) termState.focusNext = true;
+  if (terminalPaneFocused() || isShowCardFocused()) termState.focusNext = true;
   await revealSession(target);
 }
 
@@ -14451,9 +14687,12 @@ function takeTerminalFocus(sessionId) {
 }
 
 // The terminal attaches asynchronously; by then the user may be typing elsewhere or reading a modal.
+// A session on the trust dialog has no transcript yet, so it may not be in `sessions`.
 function promptAwaitsUser(sessionId) {
-  if (!sessions.find((s) => s.id === sessionId)?.hasWaitingForUser || isAnyModalOpen()) return false;
-  return !document.activeElement?.matches(TEXT_FIELD_SELECTOR);
+  if (isAnyModalOpen() || document.activeElement?.matches(TEXT_FIELD_SELECTOR)) return false;
+  if (trustWaiting.has(sessionId)) return true;
+  const session = sessions.find((s) => s.id === sessionId);
+  return !!session && isWaitingSession(session);
 }
 
 function onTerminalShown(focus = true) {
@@ -14963,6 +15202,7 @@ async function openTerminal(sessionId, mode, attempt = 0) {
         name: spec.name,
         worktree: spec.worktree,
         model: spec.model,
+        effort: spec.effort,
         prompt: spec.prompt,
         edit: spec.edit,
         forkOf: spec.forkOf,
@@ -16210,7 +16450,6 @@ function placeholderSession(id, spec) {
     mode: spec.mode,
     edit: !!spec.edit,
     name: spec.name || (spec.forkOf && forkLabel(spec.forkOf)) || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
-    dispatchGroup: spec.group || undefined,
     dispatched: spec.mode === 'dispatch' ? { parent: spec.parent || null } : undefined,
     project: spec.cwd,
     worktree: spec.worktree ? { repo: spec.cwd, name: spec.worktree === true ? 'new' : spec.worktree } : null,
@@ -16229,7 +16468,22 @@ function mergePlaceholders(list) {
     for (const id of [...specs.keys()]) if (ids.has(id)) specs.delete(id);
   }
   const pending = [...newSpecs, ...dispatchSpecs].sort((a, b) => b[1].startedAt - a[1].startedAt);
-  return [...pending.map(([id, spec]) => placeholderSession(id, spec)), ...list];
+  const placeholders = pending.map(([id, spec]) => placeholderSession(id, spec));
+  revealNewPlaceholders(placeholders);
+  return [...placeholders, ...list];
+}
+
+// Ids whose sections were expanded once; a section the user collapses again stays collapsed.
+const revealedPlaceholderIds = new Set();
+
+function revealNewPlaceholders(placeholders) {
+  let changed = false;
+  for (const p of placeholders) {
+    if (revealedPlaceholderIds.has(p.id)) continue;
+    revealedPlaceholderIds.add(p.id);
+    if (uncollapseFor(p)) changed = true;
+  }
+  if (changed) persistCollapsedGroups();
 }
 
 async function loadDispatches() {
@@ -16283,10 +16537,14 @@ 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' : ''}${childDepthClass(depth)}" title="${escapeHtml(`${session.id} | ${session.project}`)}">
+          <button onclick="openSession('${escAttrJs(session.id)}')" data-session-id="${escapeHtml(session.id)}" class="session-item session-placeholder ${isActive ? 'active' : ''}${childDepthClass(depth)}" title="${escapeHtml(`${session.id} | ${session.project}`)}">
             <div class="session-name">${escapeHtml(session.name)}</div>
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
-            <div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.edit ? 'edit' : session.mode] || PLACEHOLDER_HINTS.new}</div>
+            ${
+              trustWaiting.has(session.id)
+                ? `<div class="session-waiting"><span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>trust this folder?</div>`
+                : `<div class="session-waiting"><span class="pulse"></span>${PLACEHOLDER_HINTS[session.edit ? 'edit' : session.mode] || PLACEHOLDER_HINTS.new}</div>`
+            }
           </button>
         `;
 }
@@ -16296,9 +16554,8 @@ async function restorePendingSessions() {
   document.getElementById('new-session-btn').hidden = !terminalAvailable();
   const terminals = terminalAvailable() ? loadTerminals() : null;
   await loadDispatches();
-  if (!terminals) return;
   try {
-    for (const t of await terminals) {
+    for (const t of terminals ? await terminals : []) {
       if ((t.mode !== 'new' && t.mode !== 'pick') || newSpecs.has(t.id) || dispatchSpecs.has(t.id)) continue;
       newSpecs.set(t.id, {
         cwd: t.cwd,
@@ -16311,6 +16568,8 @@ async function restorePendingSessions() {
       });
     }
   } catch (_) {}
+  // Sessions that were already running keep the collapse state saved before the reload.
+  for (const id of [...newSpecs.keys(), ...dispatchSpecs.keys()]) revealedPlaceholderIds.add(id);
 }
 
 async function loadTerminals() {
@@ -16319,6 +16578,7 @@ async function loadTerminals() {
   if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
   const list = data.sessions || [];
   runningTerminals = new Set(list.map((t) => t.id));
+  setTrustWaiting(list.filter((t) => t.awaitingTrust).map((t) => t.id));
   rememberTerminalIds(list);
   syncShowCard();
   pushTerminalClaims();
@@ -16326,8 +16586,26 @@ async function loadTerminals() {
   return list;
 }
 
-function setRunningTerminals(ids) {
+// A dispatched session never had its terminal toggled on, so the dialog would stay out of sight.
+function setTrustWaiting(ids) {
+  const before = trustWaiting;
+  trustWaiting = new Set(ids);
+  for (const id of trustWaiting) {
+    if (before.has(id)) continue;
+    setTerminalMode(id, true);
+    if (id !== currentSessionId || viewMode !== 'session') continue;
+    if (termState.shown && termState.attached) {
+      if (promptAwaitsUser(id)) focusTerminalPane();
+    } else {
+      termState.openedByUser = id;
+      syncTerminal();
+    }
+  }
+}
+
+function setRunningTerminals(ids, awaitingTrust = []) {
   runningTerminals = new Set(ids);
+  setTrustWaiting(awaitingTrust);
   forgetEndedTerminals();
   syncShowCard();
   pushTerminalClaims();
@@ -16351,10 +16629,12 @@ function openNewSession(folder, resume = false) {
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt']) document.getElementById(id).value = '';
   document.getElementById('ns-wt').checked = false;
   document.getElementById('ns-model').value = '';
+  document.getElementById('ns-effort').value = '';
   document.getElementById('ns-stay').checked = store.getItem(NEW_SESSION_STAY_KEY) === 'true';
   document.getElementById('ns-edit').checked = store.getItem(NEW_SESSION_EDIT_KEY) === 'true';
   setNewSessionError('');
-  const current = viewMode === 'session' ? sessions.find((s) => s.id === currentSessionId)?.project : null;
+  const session = viewMode === 'session' ? sessions.find((s) => s.id === currentSessionId) : null;
+  const current = session?.worktree?.repo || session?.project;
   setNewSessionFolder(folder || current || '');
   document.getElementById('new-session-modal').classList.add('visible');
   const input = document.getElementById('ns-folder');
@@ -16458,6 +16738,7 @@ function newSessionValues() {
     name: document.getElementById('ns-name').value.trim() || null,
     worktree: wtOn ? wtName || true : false,
     model: document.getElementById('ns-model').value || null,
+    effort: document.getElementById('ns-effort').value || null,
     prompt: document.getElementById('ns-prompt').value.trim() || null,
     edit,
     stay: !ns.resume && !edit && document.getElementById('ns-stay').checked,
@@ -16666,7 +16947,7 @@ function initNewSession() {
     store.setItem(NEW_SESSION_EDIT_KEY, String(e.target.checked));
     renderNewSessionForm();
   });
-  for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model']) {
+  for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model', 'ns-effort']) {
     document.getElementById(id).addEventListener('input', renderNewSessionForm);
   }
   if (SpeechRecognitionApi) {
@@ -16793,6 +17074,7 @@ loadModalFullscreen();
 initModalResize();
 loadPanelWidths();
 initPanelResize('detail-panel', 'detail-panel-resize', '--detail-panel-width');
+initDetailLayout();
 initPanelResize('message-panel', 'message-panel-resize', '--message-panel-width');
 initMessagePanelFull();