claude-code-kanban 5.1.1 → 5.3.0

package/public/app.js

@@ -52,7 +52,12 @@ const collapsedProjectGroups = new Set();
 const SECTION_GROUPS = '__section_groups__';
 const SECTION_PROJECTS = '__section_projects__';
 const SECTION_SESSIONS = '__section_sessions__';
-let stableGroupOrder = []; // cached project path order to prevent jumping
+// Project paths and session ids in Active-view sidebar order, kept across reloads so live
+// activity does not reshuffle the list. Each holds only what the loaded list still has.
+const PROJECT_ORDER_KEY = 'project-order';
+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();
@@ -260,7 +265,7 @@ let lastTasksHash = '';
 //#endregion
 
 //#region DATA_FETCHING
-async function fetchSessions(includeTasks = true) {
+async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
   try {
     const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
     if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
@@ -269,7 +274,7 @@ async function fetchSessions(includeTasks = true) {
     // 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.
-    const includeParam = currentSessionId ? `&include=${encodeURIComponent(currentSessionId)}` : '';
+    const includeParam = focusId ? `&include=${encodeURIComponent(focusId)}` : '';
     const projectParam =
       filterProject === '__recent__'
         ? `&recentHours=${RECENT_PROJECT_HOURS}`
@@ -587,6 +592,9 @@ let lastCurrentTasksHash = '';
 async function fetchTasks(sessionId) {
   try {
     const refresh = viewMode === 'session' && sessionId === currentSessionId;
+    // The PTY already runs, so the attach need not wait for the session fetch and the render after it.
+    if (!refresh && termState.sessionId !== sessionId && runningTerminals.has(sessionId) && wantsTerminalFor(sessionId))
+      openTerminal(sessionId, terminalOpenMode(sessionId));
     viewMode = 'session';
     document.getElementById('message-toggle')?.style.removeProperty('display');
     const res = await fetch(`/api/sessions/${sessionId}`);
@@ -1694,6 +1702,8 @@ let pinnedCollapsed = false;
 
 const PIN_SVG =
   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>';
+const DETAIL_EDIT_SVG =
+  '<svg class="detail-edit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>';
 const MSG_ICON_USER =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
 const MSG_ICON_ASSISTANT =
@@ -1727,6 +1737,8 @@ const ICON_AGENT_ACTIVE =
 const ICON_TERMINAL =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>';
 const TERMINAL_TITLE = 'Running in a terminal here';
+const ICON_DISPATCHED =
+  '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>';
 const ICON_CHAT =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
 const TOOL_ICONS = {
@@ -1974,16 +1986,24 @@ function offloadSessionPin(sessionId) {
   }).catch(() => {});
 }
 
+function clearSessionPin(sessionId) {
+  pinnedSessionIds.delete(sessionId);
+  stickySessionIds.delete(sessionId);
+  deferredPinPlacement.delete(sessionId);
+}
+
+function unpinSession(sessionId) {
+  clearSessionPin(sessionId);
+  savePinnedSessions();
+  offloadSessionPin(sessionId);
+  renderSessions();
+}
+
 function toggleSessionPin(sessionId) {
-  if (pinnedSessionIds.has(sessionId)) {
-    pinnedSessionIds.delete(sessionId);
-    stickySessionIds.delete(sessionId);
-    deferredPinPlacement.delete(sessionId);
-  } else {
-    pinnedSessionIds.add(sessionId);
-    if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
-    expandPinnedFor(sessionId);
-  }
+  if (pinnedSessionIds.has(sessionId)) return unpinSession(sessionId);
+  pinnedSessionIds.add(sessionId);
+  if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
+  expandPinnedFor(sessionId);
   savePinnedSessions();
   offloadSessionPin(sessionId);
   renderSessions();
@@ -1991,9 +2011,7 @@ function toggleSessionPin(sessionId) {
 
 function toggleSessionSticky(sessionId) {
   if (stickySessionIds.has(sessionId)) {
-    stickySessionIds.delete(sessionId);
-    pinnedSessionIds.delete(sessionId);
-    deferredPinPlacement.delete(sessionId);
+    clearSessionPin(sessionId);
   } else {
     pinnedSessionIds.add(sessionId);
     stickySessionIds.add(sessionId);
@@ -2013,9 +2031,7 @@ function isPlacedSticky(id) {
 
 function handleSessionPinEvent({ id, state }) {
   if (!id) return;
-  pinnedSessionIds.delete(id);
-  stickySessionIds.delete(id);
-  deferredPinPlacement.delete(id);
+  clearSessionPin(id);
   if (state === 'pinned') pinnedSessionIds.add(id);
   if (state === 'sticky') {
     pinnedSessionIds.add(id);
@@ -2037,6 +2053,7 @@ function isAnyPinned(sessionId) {
 }
 
 function _renderPinToDetail(pin) {
+  unmountMsgReview();
   const body = document.getElementById('msg-detail-body');
   const agentBtn = document.getElementById('msg-detail-agent-btn');
   agentBtn.style.display = 'none';
@@ -2252,11 +2269,10 @@ function showMsgDetail(idx) {
       body.innerHTML = userExtras || '<em>No content</em>';
     }
   }
-  const modal = document.getElementById('msg-detail-modal').querySelector('.modal');
-  autoSizeModal(modal, body);
-  modal.classList.toggle('live', msgDetailFollowLatest);
   const overlay = document.getElementById('msg-detail-modal');
-  overlay.classList.toggle('live-overlay', msgDetailFollowLatest);
+  const modal = overlay.querySelector('.modal');
+  autoSizeModal(modal, body);
+  setMsgDetailFollow(msgDetailFollowLatest);
 
   const meta = [formatDate(m.timestamp)];
   if (m.model) meta.unshift(m.model);
@@ -2265,9 +2281,34 @@ function showMsgDetail(idx) {
   currentPinDetailId = null;
   updateMsgDetailPinState();
   overlay.classList.add('visible');
+  mountReplyReview(m, body, modal);
+}
+
+function setMsgDetailFollow(on) {
+  msgDetailFollowLatest = on;
+  const overlay = document.getElementById('msg-detail-modal');
+  overlay.classList.toggle('live-overlay', on);
+  overlay.querySelector('.modal').classList.toggle('live', on);
+}
+
+function unmountMsgReview() {
+  unmountReview(document.getElementById('msg-review-panel'));
+}
+
+// Only the main session's replies: the agent has them in context, so a quote is enough.
+function mountReplyReview(m, body, modal) {
+  if (m.type !== 'assistant' || agentLogMode || !m.timestamp) return unmountMsgReview();
+  mountReview({
+    contentEl: body,
+    panelEl: document.getElementById('msg-review-panel'),
+    hostEl: modal,
+    source: { kind: 'reply', id: m.timestamp, label: `your reply at ${new Date(m.timestamp).toLocaleTimeString()}` },
+    onComment: () => setMsgDetailFollow(false),
+  });
 }
 
 function closeMsgDetailModal() {
+  unmountMsgReview();
   hideModalOverlay('msg-detail-modal');
   msgDetailFollowLatest = false;
   waitingDetailAutoOpened = false;
@@ -2456,14 +2497,21 @@ let _manualRefreshing = false;
 
 //#region TOAST
 // `action` ({label, onClick}) adds a button and keeps the toast up long enough to reach it.
-function showToast(msg, type, action) {
+function showToast(msg, type, action, hint) {
   const el = document.getElementById('toast');
   clearTimeout(_toastTimer);
   el.style.transition = 'none';
   el.classList.remove('visible', 'toast-success', 'toast-error', 'toast-info', 'has-action');
   void el.offsetHeight;
   el.style.transition = '';
-  el.textContent = msg;
+  if (hint) {
+    const text = document.createElement('div');
+    const hintEl = document.createElement('div');
+    hintEl.className = 'toast-hint';
+    hintEl.textContent = hint;
+    text.append(msg, hintEl);
+    el.replaceChildren(text);
+  } else el.textContent = msg;
   const hide = () => el.classList.remove('visible', 'has-action');
   if (action) {
     const btn = document.createElement('button');
@@ -2877,8 +2925,9 @@ function autoSizeModal(modal, body) {
   // hasPre is already computed and short-circuits the textContent walk, which is
   // no longer cheap now that colourised output puts thousands of spans in there.
   const desired = hasTable ? 1100 : hasPre || body.textContent.length > 2000 ? 960 : 860;
-  const current = parseFloat(getComputedStyle(modal).maxWidth) || 0;
-  if (desired > current) modal.style.maxWidth = `${desired}px`;
+  const style = getComputedStyle(modal);
+  const current = (parseFloat(style.maxWidth) || 0) - (parseFloat(style.getPropertyValue('--review-extra')) || 0);
+  if (desired > current) modal.style.maxWidth = `calc(${desired}px + var(--review-extra, 0px))`;
 }
 
 function renderToolResultHtml(toolResult, isTruncated, fullResult, toolUseId) {
@@ -3387,7 +3436,7 @@ function getFilteredSessions() {
     // above already makes, for the same reason.
     filteredSessions = filteredSessions.filter(
       (s) =>
-        matchesProjectFilter(s.project) ||
+        matchesProjectFilter(s.project, s.worktree?.repo) ||
         s.id === currentSessionId ||
         (filterProject === '__recent__' && isAnyPinned(s.id)),
     );
@@ -3449,6 +3498,39 @@ function getFilteredSessions() {
   return filteredSessions;
 }
 
+function saveOrder(key, prev, next) {
+  if (next.length === prev.length && next.every((id, i) => id === prev[i])) return prev;
+  try {
+    store.setItem(key, JSON.stringify(next));
+  } catch (_) {}
+  return next;
+}
+
+// An entry keeps its slot while `loaded` has it; one not seen before enters at the top.
+function mergeOrder(key, prev, loaded, incoming) {
+  const kept = prev.filter((id) => loaded.has(id));
+  const known = new Set(kept);
+  return saveOrder(key, prev, [...incoming.filter((id) => !known.has(id)), ...kept]);
+}
+
+// Only the Active view groups into blocks; the other views stay in recency order.
+function applyStableSessionOrder(list) {
+  if (sessionFilter !== 'active' || sessions.length === 0) return list;
+  const loaded = new Set(sessions.map((s) => s.id));
+  const ids = list.map((s) => s.id);
+  sessionOrder = mergeOrder(SESSION_ORDER_KEY, sessionOrder, loaded, ids);
+  const rank = new Map(sessionOrder.map((id, i) => [id, i]));
+  return [...list].sort((a, b) => rank.get(a.id) - rank.get(b.id));
+}
+
+function insertNear(arr, isRef, item, after) {
+  const at = arr.findIndex(isRef);
+  if (at < 0) return null;
+  const out = [...arr];
+  out.splice(at + (after ? 1 : 0), 0, item);
+  return out;
+}
+
 // A live refresh would replace the zen panel's link-a-file input mid-type, the same way it
 // would swallow a half-typed group name. Off zen there is no panel, so skip the DOM probe.
 function zenPanelIsEditing() {
@@ -3465,7 +3547,7 @@ function renderSessions() {
   // 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.
   const zenSession = zenMode && currentSessionId ? sessions.find((s) => s.id === currentSessionId) : null;
-  const filteredSessions = zenMode ? (zenSession ? [zenSession] : []) : getFilteredSessions();
+  const filteredSessions = zenMode ? (zenSession ? [zenSession] : []) : applyStableSessionOrder(getFilteredSessions());
 
   if (filteredSessions.length === 0) {
     let emptyMsg = 'No sessions found';
@@ -3507,15 +3589,6 @@ function renderSessions() {
     const projectHtml = renderProjectIdentity(session);
 
     const gitBranch = session.gitBranch ? escapeHtml(session.gitBranch) : null;
-    const createdDisplay = session.createdAt ? formatDate(session.createdAt) : '';
-    const modifiedDisplay = formatDate(session.modifiedAt);
-    const timeDisplay =
-      session.createdAt && createdDisplay !== modifiedDisplay
-        ? `Created ${createdDisplay} · Modified ${modifiedDisplay}`
-        : modifiedDisplay;
-    const tooltip = [session.id, session.project, timeDisplay, gitBranch ? `Branch: ${gitBranch}` : '']
-      .filter(Boolean)
-      .join(' | ');
     const isTeam = session.isTeam;
     const memberCount = session.memberCount || 0;
 
@@ -3539,14 +3612,20 @@ function renderSessions() {
         : '';
     const justFinishedClass = isJustFinished(session) ? 'just-finished' : '';
     const sid = escAttrJs(session.id);
+    const progressHtml =
+      total > 0
+        ? `<div class="session-progress" title="${escapeHtml(session.completed)} of ${total} tasks done"><div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div><span class="progress-text">${session.completed}/${total}</span></div>`
+        : '';
+    const metricsHtml = progressHtml + (showCtx ? renderContextBar(session) : '');
     return `
-          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${session.unread ? 'unread' : ''} ${tempClass} ${idleClass} ${justFinishedClass} ${showCtx ? 'has-context' : ''}" title="${escapeHtml(tooltip)}">
+          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${session.unread ? 'unread' : ''} ${tempClass} ${idleClass} ${justFinishedClass}">
             <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>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
-            ${session.planTitle ? `<div class="session-plan">${escapeHtml(session.planTitle)}</div>` : ''}
-            <div class="session-progress">
+            ${metricsHtml ? `<div class="session-metrics">${metricsHtml}</div>` : ''}
+            <div class="session-footer">
+              <div class="session-time">${formatDate(session.modifiedAt)}</div>
               <span class="session-indicators">
                 ${isTeam ? `<span class="team-badge" title="${memberCount} team members"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>${memberCount}</span>` : ''}
                 ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${sid}')" title="View session info"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>` : ''}
@@ -3558,16 +3637,13 @@ function renderSessions() {
                 ${session.hasPlan && !session.planSourceSessionId ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${sid}')" title="View plan">${ICON_PLAN}</span>` : ''}
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escAttrJs(session.planSourceSessionId)}')">${ICON_PLAN}</span>` : ''}
                 ${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>` : ''}
                 ${isLive || session.hasRunningAgents ? `<span class="pulse" title="${isLive ? 'Live' : 'Active agents'}"></span>` : ''}
               </span>
-              <div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div>
-              <span class="progress-text">${session.completed}/${total}</span>
             </div>
-            ${showCtx ? renderContextBar(session.contextStatus) : ''}
-            <div class="session-time">${formatDate(session.modifiedAt)}</div>
           </button>
         `;
   };
@@ -3577,7 +3653,7 @@ function renderSessions() {
   if (zenMode) {
     sessionsList.innerHTML = `${renderSessionCard(zenSession)}
       <div class="zen-panel">
-        ${renderContextDetail(zenSession.contextStatus, { tokens: false }) || '<div class="zen-panel-empty">No context data for this session</div>'}
+        ${renderContextDetail(zenSession, { tokens: false }) || '<div class="zen-panel-empty">No context data for this session</div>'}
         ${renderScratchpadRow(zenSession)}
         ${renderLinkedDocsHtml(zenSession.id)}
         ${renderArtifactsHtml(zenSession.id)}
@@ -3591,7 +3667,7 @@ function renderSessions() {
   }
 
   const groupPinned = store.getItem('groupPinnedSessions') !== 'false';
-  const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isPlacedPinned(s.id) && !isSessionActive(s) ? 1 : 0);
+  const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isInPinnedGroup(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
   const countHtml = (arr) => {
     const active = arr.reduce((n, s) => n + (isSessionActive(s) ? 1 : 0), 0);
@@ -3609,12 +3685,10 @@ function renderSessions() {
 
   const renderGroupSessions = (sessions, pinKey) => {
     if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
-    const gPinned = sessions.filter((s) => isPlacedPinned(s.id) && !isPlacedSticky(s.id));
-    if (gPinned.length === 0) return sessions.map(renderSessionCard).join('');
-    const gIdlePinned = gPinned.filter((s) => !isSessionActive(s));
-    const gUnpinned = sessions.filter((s) => !isPlacedPinned(s.id) || isSessionActive(s) || isPlacedSticky(s.id));
+    const gIdlePinned = sessions.filter(isInPinnedGroup);
+    if (gIdlePinned.length === 0) return sessions.map(renderSessionCard).join('');
+    const gUnpinned = sessions.filter((s) => !isInPinnedGroup(s));
     const pinCollapsed = collapsedProjectGroups.has(pinKey);
-    if (gIdlePinned.length === 0) return gUnpinned.map(renderSessionCard).join('');
     return (
       '<div class="pinned-sub-section">' +
       '<div class="pinned-sub-header' +
@@ -3782,7 +3856,7 @@ function renderSessions() {
       ungrouped.sort(pinSort);
     }
 
-    // Stable group order: preserve existing order, append new groups sorted by recency.
+    // Stable group order: preserve existing order, put new groups first, sorted by recency.
     // Grouped projects stay in the array (they are just not rendered here), so dragging one
     // back out restores its old slot instead of jumping to the top.
     const latestByPath = new Map();
@@ -3791,11 +3865,9 @@ function renderSessions() {
       const t = new Date(s.modifiedAt).getTime();
       latestByPath.set(s.project, Math.max(latestByPath.get(s.project) ?? -Infinity, t));
     }
-    const knownPaths = new Set(stableGroupOrder);
-    const keptOrder = stableGroupOrder.filter((p) => latestByPath.has(p));
-    const newPaths = [...latestByPath.keys()].filter((p) => !knownPaths.has(p));
-    if (newPaths.length > 1) newPaths.sort((a, b) => latestByPath.get(b) - latestByPath.get(a));
-    stableGroupOrder = [...keptOrder, ...newPaths];
+    const byRecency = [...latestByPath.keys()].sort((a, b) => latestByPath.get(b) - latestByPath.get(a));
+    const loadedPaths = new Set(sessions.map((s) => s.project));
+    stableGroupOrder = mergeOrder(PROJECT_ORDER_KEY, stableGroupOrder, loadedPaths, byRecency);
     const sortedGroups = stableGroupOrder.filter((p) => groups.has(p)).map((p) => [p, groups.get(p)]);
 
     // The section header is rendered even when nothing is left under it: it is the drop target
@@ -3936,11 +4008,13 @@ function renderProjectView() {
 }
 
 // Claude Code keeps a blocker's id in blockedBy after the blocker completes.
-function openBlockers(task) {
+function findSiblingTask(task, id) {
   const list = (t) => t.sessionId || t._taskDir;
-  return (task.blockedBy || []).filter(
-    (id) => currentTasks.find((t) => t.id === id && list(t) === list(task))?.status !== 'completed',
-  );
+  return currentTasks.find((t) => t.id === id && list(t) === list(task));
+}
+
+function openBlockers(task) {
+  return (task.blockedBy || []).filter((id) => findSiblingTask(task, id)?.status !== 'completed');
 }
 
 function renderTaskCard(task) {
@@ -3965,7 +4039,7 @@ function renderTaskCard(task) {
           aria-label="${escapeHtml(task.subject)} — ${task.status.replace('_', ' ')}">
           <div class="task-id">
             <span>#${taskId}</span>
-            ${isBlocked ? '<span class="task-badge blocked">Blocked</span>' : ''}
+            ${isBlocked ? `<span class="task-blocked" title="Blocked">waiting on ${blockers.map((id) => `#${escapeHtml(id)}`).join(' ')}</span>` : ''}
             ${
               task.owner
                 ? (
@@ -3979,7 +4053,6 @@ function renderTaskCard(task) {
           </div>
           <div class="task-title">${escapeHtml(task.subject)}</div>
           ${task.status === 'in_progress' && task.activeForm ? `<div class="task-active">${escapeHtml(task.activeForm)}</div>` : ''}
-          ${isBlocked ? `<div class="task-blocked">Waiting on ${blockers.map((id) => `#${id}`).join(', ')}</div>` : ''}
           ${task.description ? `<div class="task-desc">${escapeHtml(task.description.split('\n')[0])}</div>` : ''}
         </div>
       `;
@@ -4351,6 +4424,12 @@ function sgTransientGroup(name) {
   return group;
 }
 
+function dispatchedTitle({ parent, outcome }) {
+  const starter = parent && sessions.find((s) => s.id === parent);
+  const by = starter ? sessionDisplayName(starter) : 'another session';
+  return `Started by ${by}${outcome ? ` · ${outcome}` : ''}${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.
 // With no group of its own, a started session follows its starter into the starter's named group.
 function sgDispatchGroupFor(session) {
@@ -4534,19 +4613,70 @@ function sgCommitRename(input, save) {
 //#region SESSION_GROUPS_DND
 // 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_SELECTOR = SG_LIT_CLASSES.map((c) => `.${c}`).join(', ');
 
 function sgClearDropTargets() {
-  sgLitZone?.classList.remove('sg-drop-over');
+  sgLitZone?.classList.remove(...SG_LIT_CLASSES);
   sgLitZone = null;
 }
 
-function sgLightDropTarget(zone) {
-  if (sgLitZone === zone) return;
+function sgLightDropTarget(zone, cls = 'sg-drop-over') {
+  if (sgLitZone === zone && zone.classList.contains(cls)) return;
   sgClearDropTargets();
-  zone.classList.add('sg-drop-over');
+  zone.classList.add(cls);
   sgLitZone = zone;
 }
 
+// A session dropped on the edge of a card in its own list moves next to it. `share` is the part
+// of the card's height on each edge that means insert; the middle keeps its group gesture.
+function sgInsertHit(card, e, share) {
+  const rect = card.getBoundingClientRect();
+  const y = e.clientY - rect.top;
+  const after = y > rect.height * (1 - share);
+  if (!after && y >= rect.height * share) return null;
+  return { zone: card, cls: after ? 'sg-insert-after' : 'sg-insert-before', insert: { card, after } };
+}
+
+function sgSiblingCard(target) {
+  if (sgDrag?.kind !== 'session' || sessionFilter !== 'active' || !sgDragEl) return null;
+  const card = target.closest('.session-item');
+  return card && card !== sgDragEl && card.parentElement === sgDragEl.parentElement ? card : null;
+}
+
+function sgDropZone(target, e) {
+  const sibling = sgSiblingCard(target);
+  const hit = sgGroupDropZone(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;
+}
+
+function sgInsertSession(dragId, { card, after }) {
+  const ref = card.dataset.sessionId;
+  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.
+    const members = insertNear(
+      group.members.filter((m) => !(m.type === 'session' && m.ref === dragId)),
+      (m) => m.type === 'session' && m.ref === ref,
+      { type: 'session', ref: dragId },
+      after,
+    );
+    if (!members) return;
+    group.members = members;
+    persistSessionGroups();
+    return;
+  }
+  const order = insertNear(
+    sessionOrder.filter((id) => id !== dragId),
+    (id) => id === ref,
+    dragId,
+    after,
+  );
+  if (order) sessionOrder = saveOrder(SESSION_ORDER_KEY, sessionOrder, order);
+}
+
 function sgDragPayload(el) {
   if (el.classList.contains('session-group-header')) return { kind: 'group', ref: el.dataset.groupId };
   // data-project-path is on real project headers only, so the sentinels drop out by themselves.
@@ -4560,7 +4690,7 @@ function sgDragPayload(el) {
 // Resolve the element under the pointer to a legal drop zone for the in-flight drag.
 // Returns {zone} to ungroup, {zone, groupId} to assign, or {zone, pairWith}/{zone, pairSession}
 // to stack two ungrouped items into a brand-new group.
-function sgDropZone(target) {
+function sgGroupDropZone(target) {
   if (!sgDrag) return null;
   const base =
     '.sg-ungroup-zone, .session-group-header, .session-group-sessions, .project-group-header, .project-group-sessions';
@@ -4644,6 +4774,7 @@ function sgOnDragStart(e) {
     return;
   }
   sgDrag = payload;
+  sgDragEl = el;
   el.classList.add('sg-dragging');
   sessionsList.classList.add('sg-dragging-active');
   e.dataTransfer.effectAllowed = 'move';
@@ -4653,7 +4784,7 @@ function sgOnDragStart(e) {
 }
 
 function sgOnDragOver(e) {
-  const hit = sgDropZone(e.target);
+  const hit = sgDropZone(e.target, e);
   // Moving onto a spot that refuses the drop has to put the previous highlight out, or two zones
   // stay lit and the one under the pointer is not the one that would receive the drop.
   if (!hit) {
@@ -4662,15 +4793,20 @@ function sgOnDragOver(e) {
   }
   e.preventDefault();
   e.dataTransfer.dropEffect = 'move';
-  sgLightDropTarget(hit.zone);
+  sgLightDropTarget(hit.zone, hit.cls);
 }
 
 function sgOnDrop(e) {
-  const hit = sgDropZone(e.target);
+  const hit = sgDropZone(e.target, e);
   if (!hit) return;
   e.preventDefault();
   e.stopPropagation();
   const drag = sgDrag;
+  if (hit.insert) {
+    sgInsertSession(drag.ref, hit.insert);
+    sgFinishDrag();
+    return;
+  }
   if (hit.pairWith || hit.pairSession) {
     // Stacked onto an ungrouped item: seed a group, then let the user name it in place.
     const target = hit.pairWith
@@ -4701,6 +4837,7 @@ function sgOnDrop(e) {
 
 function sgFinishDrag() {
   sgDrag = null;
+  sgDragEl = null;
   sgClearDropTargets();
   sessionsList.classList.remove('sg-dragging-active');
   // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
@@ -4721,7 +4858,7 @@ function initSessionGroupsDnd() {
   sessionsList.addEventListener('dragstart', sgOnDragStart);
   sessionsList.addEventListener('dragover', sgOnDragOver);
   sessionsList.addEventListener('dragleave', (e) => {
-    const zone = e.target.closest?.('.sg-drop-over');
+    const zone = e.target.closest?.(SG_LIT_SELECTOR);
     if (zone && !zone.contains(e.relatedTarget)) sgClearDropTargets();
   });
   sessionsList.addEventListener('drop', sgOnDrop);
@@ -5131,7 +5268,7 @@ function uncollapseFor(session) {
 }
 
 function pinnedCollapseKeys(session) {
-  if (!isPlacedPinned(session.id) || isPlacedSticky(session.id) || isSessionActive(session)) return [];
+  if (!isInPinnedGroup(session)) return [];
   const group = sgGroupForSession(session);
   const host = sgHostOf(group, session);
   return [pinKey(session.project || '__ungrouped__'), host && pinKey(host), group && `__pinned_group_${group.id}__`];
@@ -5338,22 +5475,33 @@ async function showTaskDetail(taskId, sessionId = null) {
   const blockers = openBlockers(task);
   const isBlocked = blockers.length > 0;
   const actualSessionId = task.sessionId || sessionId || currentSessionId;
-
+  const isProjectView = viewMode === 'project';
+  const pencil = isProjectView ? '' : DETAIL_EDIT_SVG;
+  const editable = isProjectView ? '' : ' editable';
+  const depChip = (id, kind) => {
+    const dep = findSiblingTask(task, id);
+    const label = dep ? `#${id} ${dep.subject}` : `#${id}`;
+    return `<button type="button" class="detail-dep ${escapeHtml(kind)}" data-dep-id="${escapeHtml(id)}" title="${escapeHtml(label)}"><span class="dot"></span><span class="detail-dep-text">${escapeHtml(label)}</span></button>`;
+  };
+  const deps = [
+    isBlocked ? ['wait', 'Waiting on', blockers] : null,
+    task.blocks?.length ? ['next', 'Unblocks', task.blocks] : null,
+  ].filter(Boolean);
+  detailContent.classList.toggle('blocked', isBlocked && task.status === 'pending');
   detailContent.innerHTML = `
         <div class="detail-section">
-          <div class="detail-label">Task #${task.id}</div>
-          <h2 class="detail-title">${escapeHtml(task.subject)}</h2>
+          <div class="detail-label">Task #${task.id}${pencil}</div>
+          <h2 class="detail-title${escapeHtml(editable)}">${escapeHtml(task.subject)}</h2>
         </div>
 
         <div class="detail-section" style="display: flex; gap: 12px; align-items: center;">
           <div>${statusLabels[task.status] || ''}</div>
           ${task.owner ? `<div style="font-size: 13px; color: ${getOwnerColor(task.owner).color}; font-weight: 500;">${escapeHtml(task.owner)}</div>` : ''}
-          ${isBlocked && task.status !== 'in_progress' ? '<div style="font-size: 10px; color: var(--warning);">Blocked</div>' : ''}
         </div>
 
         <div class="detail-section">
-          <div class="detail-label">Description</div>
-          <div class="detail-desc">${task.description ? renderMarkdown(task.description) : '<em style="color: var(--text-muted);">No description</em>'}</div>
+          <div class="detail-label">Description${pencil}</div>
+          <div class="detail-desc${escapeHtml(editable)}">${task.description ? renderMarkdown(task.description) : '<em style="color: var(--text-muted);">No description</em>'}</div>
         </div>
 
         ${
@@ -5369,33 +5517,24 @@ async function showTaskDetail(taskId, sessionId = null) {
         }
 
         ${
-          isBlocked
+          deps.length
             ? `
         <div class="detail-section">
-          <div class="detail-label">Blocked By</div>
+          <div class="detail-label">Dependencies</div>
           <div class="detail-deps">
-            <div class="detail-box blocked"><strong>Blocked by:</strong> ${blockers.map((id) => `#${id}`).join(', ')}</div>
-          </div>
-        </div>`
-            : ''
-        }
-
-        ${
-          task.blocks && task.blocks.length > 0
-            ? `
-        <div class="detail-section">
-          <div class="detail-label">Blocks</div>
-          <div class="detail-deps">
-            <div class="detail-box blocks"><strong>Blocks:</strong> ${task.blocks.map((id) => `#${id}`).join(', ')}</div>
+            ${deps.map(([kind, label, ids]) => `<span class="detail-deps-label ${escapeHtml(kind)}">${label}</span><div class="detail-deps-list">${ids.map((id) => depChip(id, kind)).join('')}</div>`).join('')}
           </div>
         </div>`
             : ''
         }
       `;
 
+  for (const chip of detailContent.querySelectorAll('.detail-dep')) {
+    chip.onclick = () => showTaskDetail(chip.dataset.depId, actualSessionId);
+  }
+
   // Setup button handlers (read-only in project view)
   const deleteBtn = document.getElementById('delete-task-btn');
-  const isProjectView = viewMode === 'project';
   deleteBtn.style.display = isProjectView ? 'none' : '';
   if (!isProjectView) deleteBtn.onclick = () => deleteTask(task.id, actualSessionId);
 
@@ -5428,7 +5567,7 @@ function editTitle(titleEl, task, sessionId) {
     if (val && val !== task.subject) {
       await saveTaskField(task.id, sessionId, 'subject', val);
     } else {
-      showTaskDetail(task.id, sessionId);
+      await showTaskDetail(task.id, sessionId);
     }
   };
 
@@ -5438,6 +5577,18 @@ function editTitle(titleEl, task, sessionId) {
       save();
     }
     if (e.key === 'Escape') showTaskDetail(task.id, sessionId);
+    // Saving re-renders the panel and drops the input, so native Tab would land on <body>.
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      input.onblur = null;
+      const shift = e.shiftKey;
+      save().then(() => {
+        const target = shift
+          ? document.getElementById('delete-task-btn')
+          : detailContent.querySelector('.detail-dep') || document.getElementById('close-detail');
+        target?.focus();
+      });
+    }
   };
   input.onblur = () => save();
 }
@@ -5477,8 +5628,10 @@ function editDescription(descEl, task, sessionId) {
 
   saveBtn.onclick = save;
   cancelBtn.onclick = () => showTaskDetail(task.id, sessionId);
-  textarea.onkeydown = (e) => {
-    if (e.key === 'Escape') showTaskDetail(task.id, sessionId);
+  wrapper.onkeydown = (e) => {
+    if (e.key !== 'Escape') return;
+    e.stopPropagation();
+    showTaskDetail(task.id, sessionId);
   };
 }
 
@@ -5493,7 +5646,7 @@ async function saveTaskField(taskId, sessionId, field, value) {
     if (res.ok) {
       lastCurrentTasksHash = null;
       await fetchTasks(sessionId);
-      showTaskDetail(taskId, sessionId);
+      await showTaskDetail(taskId, sessionId);
     }
   } catch (error) {
     console.error('Failed to update task:', error);
@@ -5507,10 +5660,6 @@ function closeDetailPanel() {
   taskHighlightDimmed = false;
 }
 
-let deleteTaskId = null;
-let deleteSessionId = null;
-let deleteModalKeyHandler = null;
-
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function showBlockedTaskModal(task) {
   const messageDiv = document.getElementById('blocked-task-message');
@@ -5555,62 +5704,47 @@ function closeBlockedTaskModal() {
 //#endregion
 
 //#region DELETE_TASK
-function deleteTask(taskId, sessionId) {
-  const task = currentTasks.find((t) => t.id === taskId);
-  if (!task) return;
-
-  deleteTaskId = taskId;
-  deleteSessionId = sessionId;
-
-  const message = document.getElementById('delete-confirm-message');
-  message.textContent = `Delete task "${task.subject}"? This cannot be undone.`;
-
-  const modal = document.getElementById('delete-confirm-modal');
+// Set while #confirm-modal is open; settles the open confirmModal() promise.
+let closeConfirmModal = null;
+
+function confirmModal({ title, message, okLabel }) {
+  const modal = document.getElementById('confirm-modal');
+  document.getElementById('confirm-modal-title').textContent = title;
+  document.getElementById('confirm-modal-message').textContent = message;
+  const buttons = [document.getElementById('confirm-cancel-btn'), document.getElementById('confirm-ok-btn')];
+  buttons[1].textContent = okLabel;
   modal.classList.add('visible');
+  buttons[1].focus();
 
-  const buttons = [document.getElementById('delete-cancel-btn'), document.getElementById('delete-confirm-btn')];
-  let focusIdx = 1;
-  buttons[focusIdx].focus();
-
-  deleteModalKeyHandler = (e) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeDeleteConfirmModal();
-    } else if (matchKey(e, 'ArrowLeft')) {
+  const onKey = (e) => {
+    if (matchKey(e, 'ArrowLeft', 'ArrowRight')) {
       e.preventDefault();
-      focusIdx = 0;
-      buttons[focusIdx].focus();
-    } else if (matchKey(e, 'ArrowRight')) {
-      e.preventDefault();
-      focusIdx = 1;
-      buttons[focusIdx].focus();
+      buttons[e.key === 'ArrowLeft' ? 0 : 1].focus();
     } else if (e.key === 'Enter') {
       e.preventDefault();
-      buttons[focusIdx].click();
+      (document.activeElement === buttons[0] ? buttons[0] : buttons[1]).click();
     }
   };
-  document.addEventListener('keydown', deleteModalKeyHandler);
-}
-
-function closeDeleteConfirmModal() {
-  const modal = document.getElementById('delete-confirm-modal');
-  modal.classList.remove('visible');
-  deleteTaskId = null;
-  deleteSessionId = null;
-  if (deleteModalKeyHandler) {
-    document.removeEventListener('keydown', deleteModalKeyHandler);
-    deleteModalKeyHandler = null;
-  }
+  document.addEventListener('keydown', onKey);
+  return new Promise((resolve) => {
+    closeConfirmModal = (ok) => {
+      modal.classList.remove('visible');
+      document.removeEventListener('keydown', onKey);
+      closeConfirmModal = null;
+      resolve(ok);
+    };
+  });
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-async function confirmDelete() {
-  if (!deleteTaskId || !deleteSessionId) return;
-
-  const taskId = deleteTaskId;
-  const sessionId = deleteSessionId;
-
-  closeDeleteConfirmModal();
+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',
+  });
+  if (!ok) return;
 
   try {
     const res = await fetch(`/api/tasks/${sessionId}/${taskId}`, {
@@ -5696,7 +5830,7 @@ const SHORTCUT_TABS = [
           { keys: ['.'], label: 'Pin / unpin' },
           { keys: ['>'], label: 'Toggle sticky' },
           { keys: ['Shift', 'F10'], combo: true, label: 'Move to group (or Menu key)' },
-          { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session' },
+          { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session (pinned: to Pinned group)' },
           { keys: ['Shift', 'L'], combo: true, label: 'Toggle session log' },
           { keys: ['Shift', 'M'], combo: true, label: 'Open last message' },
           { keys: ['↑', '↓'], label: 'Previous / next message in detail' },
@@ -6177,8 +6311,7 @@ async function _storageViewSession(id) {
 }
 
 function _storageUnpinSession(id) {
-  pinnedSessionIds.delete(id);
-  stickySessionIds.delete(id);
+  clearSessionPin(id);
   savePinnedSessions();
   renderSessions();
   _renderStorageTab();
@@ -6463,6 +6596,69 @@ function matchKey(e, ...keys) {
   return keys.some((k) => e.key === k || e.code === k);
 }
 
+function dismissSessionFromList(sid) {
+  const prevIdx = selectedSessionIdx;
+  if (!setSessionDismissed(sid, true)) return;
+  const newItems = getNavigableItems();
+  if (isAnyPinned(sid)) {
+    const pinnedIdx = newItems.findIndex((el) => el.dataset?.sessionId === sid);
+    if (pinnedIdx >= 0) selectSessionByIndex(pinnedIdx, newItems);
+    return;
+  }
+  // Ctrl+Alt+S would reveal the dismissed session, and revealing restores it.
+  const forget = (x) => (x === sid ? null : x);
+  const fallback = currentSessionId === sid && lastSessionId === sid ? previousSessionId : null;
+  setSwapPair(forget(lastSessionId), forget(previousSessionId));
+  const targetIdx = newItems.length > 0 ? Math.max(0, prevIdx - 1) : -1;
+  // If the dismissed session is currently open, navigate to the previous one
+  if (currentSessionId === sid || selectedSessionId === sid) {
+    selectedSessionId = null;
+    if (fallback && !dismissedSessionIds.has(fallback) && sessions.some((s) => s.id === fallback)) {
+      revealSession(fallback).then(() => {
+        const items = getNavigableItems();
+        const idx = items.findIndex((el) => el.dataset?.sessionId === fallback);
+        if (idx >= 0) selectSessionByIndex(idx, items);
+      });
+    } else if (targetIdx >= 0) {
+      const targetSid = newItems[targetIdx]?.dataset?.sessionId;
+      if (targetSid) {
+        fetchTasks(targetSid).then(() => selectSessionByIndex(targetIdx, getNavigableItems()));
+      } else {
+        showNoSession();
+        selectSessionByIndex(targetIdx, getNavigableItems());
+      }
+    } else {
+      showNoSession();
+    }
+  } else if (targetIdx >= 0) {
+    selectSessionByIndex(targetIdx, newItems);
+  }
+}
+
+async function confirmDismissBlockers(sid) {
+  const sticky = stickySessionIds.has(sid);
+  const terminal = runningTerminals.has(sid);
+  if (!sticky && !terminal) return true;
+  const session = sessions.find((s) => s.id === sid);
+  const name = session ? sessionDisplayName(session) : sid.slice(0, 8);
+  const has = [sticky && 'a sticky pin', terminal && 'a running terminal'].filter(Boolean).join(' and ');
+  const [title, verb, okLabel] =
+    sticky && terminal
+      ? ['Unpin and Close Terminal', 'Unpin, close the terminal', 'Unpin, close and dismiss']
+      : sticky
+        ? ['Remove Sticky Pin', 'Remove the pin', 'Unpin and dismiss']
+        : ['Close Terminal', 'Close the terminal', 'Close and dismiss'];
+  const ok = await confirmModal({ title, message: `"${name}" has ${has}. ${verb} and dismiss the session?`, okLabel });
+  if (!ok) return false;
+  if (sticky) unpinSession(sid);
+  if (terminal) closeTerminalSession(sid);
+  return true;
+}
+
+async function dismissSession(sid) {
+  if (await confirmDismissBlockers(sid)) dismissSessionFromList(sid);
+}
+
 const MODAL_ESC_PRIORITY = [
   'preview-modal',
   'msg-detail-modal',
@@ -6488,6 +6684,7 @@ const MODAL_CLOSERS = {
   'project-picker-modal': () => closeProjectPicker(),
   'terminal-manager-modal': () => closeTerminalManager(),
   'new-session-modal': () => closeNewSession(),
+  'confirm-modal': () => closeConfirmModal?.(false),
 };
 
 document.addEventListener('keydown', (e) => {
@@ -6645,6 +6842,7 @@ document.addEventListener('keydown', (e) => {
   }
 
   // Tab toggles focus zone
+  if (e.key === 'Tab' && detailPanel.contains(e.target)) return;
   if (e.key === 'Tab') {
     e.preventDefault();
     // The terminal replaces the board, so it takes the board's place in the Tab cycle.
@@ -6795,27 +6993,8 @@ document.addEventListener('keydown', (e) => {
   }
   if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'd') {
     e.preventDefault();
-    const prevIdx = selectedSessionIdx;
-    if (!contextSid || !setSessionDismissed(contextSid, true)) return;
-    const newItems = getNavigableItems();
-    const targetIdx = newItems.length > 0 ? Math.max(0, prevIdx - 1) : -1;
-    // If the dismissed session is currently open, navigate to the previous one
-    if (currentSessionId === contextSid || selectedSessionId === contextSid) {
-      selectedSessionId = null;
-      if (targetIdx >= 0) {
-        const targetSid = newItems[targetIdx]?.dataset?.sessionId;
-        if (targetSid) {
-          fetchTasks(targetSid).then(() => selectSessionByIndex(targetIdx, getNavigableItems()));
-        } else {
-          showNoSession();
-          selectSessionByIndex(targetIdx, getNavigableItems());
-        }
-      } else {
-        showNoSession();
-      }
-    } else if (targetIdx >= 0) {
-      selectSessionByIndex(targetIdx, newItems);
-    }
+    if (!contextSid) return;
+    dismissSession(contextSid);
     return;
   }
   if (e.code === 'KeyC' && e.shiftKey && !e.altKey && !e.metaKey) {
@@ -6867,6 +7046,517 @@ document.addEventListener('keydown', (e) => {
 
 //#endregion
 
+//#region REVIEW
+// Comments on rendered content, sent to a session as one batch. Drafts outlive the view in
+// this tab, keyed by session and source, so closing a preview loses nothing. Highlights use
+// the CSS Custom Highlight API, which marks ranges without touching the DOM the renderer
+// built; a draft restored on reopen has no mark and shows in the panel only.
+//
+// An HTML preview is an iframe on an opaque origin, so its selection is out of reach from
+// here. `reviewBridge` runs inside the frame and reports each selection over postMessage;
+// the frame keeps its own ranges and marks them by id. A page whose CSP forbids inline
+// scripts gets no comments.
+const reviewDrafts = new Map();
+const reviewHighlight = typeof Highlight === 'function' && CSS.highlights ? new Highlight() : null;
+const reviewHotHighlight = reviewHighlight ? new Highlight() : null;
+const reviewPendingHighlight = reviewHighlight ? new Highlight() : null;
+if (reviewHighlight) {
+  CSS.highlights.set('review', reviewHighlight);
+  CSS.highlights.set('review-hot', reviewHotHighlight);
+  CSS.highlights.set('review-pending', reviewPendingHighlight);
+}
+const REVIEW_MSG = 'cck-review:';
+let activeReview = null;
+let reviewMarkSeq = 0;
+let reviewPopMode = null;
+let reviewHoverAt = null;
+let reviewHoverFrame = 0;
+
+function reviewKey(sessionId, source) {
+  return `${sessionId}|${source.kind}|${source.path ? canonicalPath(source.path) : source.id || source.label}`;
+}
+
+function reviewItems() {
+  return (activeReview && reviewDrafts.get(activeReview.key)) || [];
+}
+
+// `context(range)` adds view-specific citation fields to a comment on the host DOM;
+// `onComment()` runs after a comment is added; `onSent()` runs after a batch is delivered.
+function mountReview({
+  contentEl,
+  panelEl,
+  hostEl,
+  source,
+  frame,
+  context,
+  onComment,
+  onSent,
+  sessionId = currentSessionId,
+}) {
+  unmountReview();
+  if (!sessionId) return;
+  const ctl = new AbortController();
+  const { signal } = ctl;
+  const key = reviewKey(sessionId, source);
+  activeReview = {
+    contentEl,
+    panelEl,
+    hostEl,
+    source,
+    frame,
+    context,
+    onComment,
+    onSent,
+    sessionId,
+    key,
+    ctl,
+    hot: null,
+  };
+  if (!frame) {
+    contentEl.addEventListener('mouseup', () => setTimeout(offerReviewComment, 0), { signal });
+    contentEl.addEventListener('mousemove', (e) => queueReviewHover(e.clientX, e.clientY), { signal });
+  }
+  window.addEventListener('message', onReviewFrameMessage, { signal });
+  document.addEventListener('mousedown', closeReviewPop, { signal });
+  document.addEventListener('keydown', onReviewOfferKey, { capture: true, signal });
+  document.addEventListener('scroll', closeReviewOffer, { capture: true, signal });
+  panelEl.addEventListener('click', onReviewPanelClick, { signal });
+  panelEl.addEventListener('mouseover', onReviewPanelHover, { signal });
+  panelEl.addEventListener('mouseleave', () => setReviewHot(null), { signal });
+  renderReviewPanel();
+}
+
+// With `ownPanel`, unmounts only the review that panel holds, so a modal under another one keeps it.
+function unmountReview(ownPanel) {
+  if (ownPanel && activeReview?.panelEl !== ownPanel) return;
+  closeReviewPop();
+  if (!activeReview) return;
+  const { ctl, panelEl, hostEl } = activeReview;
+  ctl.abort();
+  for (const c of reviewItems()) {
+    c.range = null;
+    c.frameId = 0;
+  }
+  panelEl.replaceChildren();
+  panelEl.hidden = true;
+  hostEl?.classList.remove('has-review');
+  activeReview = null;
+  reviewHighlight?.clear();
+  reviewHotHighlight?.clear();
+}
+
+// The three helpers below are also handed to `reviewBridge` as source text, so each must use
+// only its arguments and the globals of whichever document it runs in.
+function reviewTextBefore(root, container, offset) {
+  const before = root.ownerDocument.createRange();
+  before.setStart(root, 0);
+  before.setEnd(container, offset);
+  return before.toString();
+}
+
+function reviewHeadingBefore(root, node) {
+  let found = null;
+  for (const h of root.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
+    if (h.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING || h.contains(node)) found = h;
+    else break;
+  }
+  return found?.textContent.trim().slice(0, 200) || undefined;
+}
+
+function reviewRangeAt(x, y, entries) {
+  const at = document.caretPositionFromPoint?.(x, y);
+  if (!at?.offsetNode) return null;
+  for (const [key, range] of entries) if (range?.isPointInRange(at.offsetNode, at.offset)) return key;
+  return null;
+}
+
+function queueReviewHover(x, y) {
+  reviewHoverAt = [x, y];
+  if (reviewHoverFrame) return;
+  reviewHoverFrame = requestAnimationFrame(() => {
+    reviewHoverFrame = 0;
+    const marked = reviewItems().filter((c) => c.range);
+    if (!marked.length) return;
+    const [hx, hy] = reviewHoverAt;
+    setReviewHot(
+      reviewRangeAt(
+        hx,
+        hy,
+        marked.map((c) => [c, c.range]),
+      ),
+      true,
+    );
+  });
+}
+
+function setReviewHot(c, fromText) {
+  if (!activeReview || activeReview.hot === c) return;
+  activeReview.hot = c;
+  reviewHotHighlight?.clear();
+  if (c?.range) reviewHotHighlight?.add(c.range);
+  if (activeReview.frame) postToReviewFrame('hot', c?.frameId || 0);
+  const { panelEl } = activeReview;
+  panelEl.querySelector('.review-card.hot')?.classList.remove('hot');
+  const i = reviewItems().indexOf(c);
+  const card = i >= 0 ? panelEl.querySelector(`.review-card[data-i="${i}"]`) : null;
+  card?.classList.add('hot');
+  if (fromText) card?.scrollIntoView({ block: 'nearest' });
+}
+
+function reviewSelection() {
+  const sel = window.getSelection();
+  if (!activeReview || !sel || sel.isCollapsed || !sel.rangeCount) return null;
+  const range = sel.getRangeAt(0);
+  if (!activeReview.contentEl.contains(range.commonAncestorContainer)) return null;
+  const quote = sel.toString().trim();
+  if (!quote) return null;
+  return { quote, range: range.cloneRange(), rect: range.getBoundingClientRect() };
+}
+
+function onReviewFrameMessage(e) {
+  const frameWin = activeReview?.frame?.contentWindow;
+  const type =
+    typeof e.data?.type === 'string' && e.data.type.startsWith(REVIEW_MSG) && e.data.type.slice(REVIEW_MSG.length);
+  if (!frameWin || e.source !== frameWin || !type) return;
+  if (type === 'clear') return closeReviewOffer();
+  if (type === 'hover') {
+    return setReviewHot((e.data.id && reviewItems().find((c) => c.frameId === e.data.id)) || null, true);
+  }
+  if (type !== 'select' || typeof e.data.quote !== 'string' || !e.data.quote.trim()) return;
+  const box = activeReview.frame.getBoundingClientRect();
+  const r = e.data.rect || {};
+  const rect = { left: box.left + (r.left || 0), top: box.top + (r.top || 0), bottom: box.top + (r.bottom || 0) };
+  const c = e.data.context || {};
+  const context = { heading: c.heading, element: c.element, selector: c.selector };
+  const pos = Number.isFinite(e.data.pos) ? e.data.pos : 0;
+  showReviewOffer({ quote: e.data.quote.trim(), context, pos, rect, inFrame: true });
+}
+
+function postToReviewFrame(type, id) {
+  activeReview?.frame?.contentWindow?.postMessage({ type: REVIEW_MSG + type, id }, '*');
+}
+
+// Runs inside the preview iframe as source text, so it must not close over anything outside
+// its own body and arguments.
+function reviewBridge(textBefore, headingBefore, rangeAt) {
+  const P = 'cck-review:';
+  const marks = new Map();
+  let pending = null;
+  let hotId = 0;
+  let hoverAt = null;
+  let hoverFrame = 0;
+  const hl = typeof Highlight === 'function' && CSS.highlights ? new Highlight() : null;
+  const hot = hl ? new Highlight() : null;
+  const pend = hl ? new Highlight() : null;
+  if (hl) {
+    CSS.highlights.set('cck-review', hl);
+    CSS.highlights.set('cck-review-hot', hot);
+    CSS.highlights.set('cck-review-pending', pend);
+    const style = document.createElement('style');
+    style.textContent =
+      '::highlight(cck-review){background-color:rgba(240,180,41,.35)}::highlight(cck-review-hot),::highlight(cck-review-pending){background-color:rgba(240,180,41,.7)}';
+    (document.head || document.documentElement).append(style);
+  }
+  const send = (msg) => parent.postMessage({ ...msg, type: P + msg.type }, '*');
+  const describe = (node) => {
+    const el = node.nodeType === 1 ? node : node.parentElement;
+    if (!el) return {};
+    const cls = [...el.classList].slice(0, 3);
+    const attrs = [el.tagName.toLowerCase()];
+    if (el.id) attrs.push(`id=${JSON.stringify(el.id)}`);
+    if (cls.length) attrs.push(`class=${JSON.stringify(cls.join(' '))}`);
+    const element = `<${attrs.join(' ')}>`;
+    const parts = [];
+    for (let n = el; n && n !== document.body && n.nodeType === 1; n = n.parentElement) {
+      if (n.id) {
+        parts.unshift(`#${n.id}`);
+        break;
+      }
+      const tag = n.tagName.toLowerCase();
+      const same = n.parentElement ? [...n.parentElement.children].filter((s) => s.tagName === n.tagName) : [];
+      parts.unshift(same.length > 1 ? `${tag}:nth-of-type(${same.indexOf(n) + 1})` : tag);
+    }
+    return { element, selector: parts.join(' > '), heading: headingBefore(document, el) };
+  };
+  document.addEventListener('mouseup', () =>
+    setTimeout(() => {
+      const sel = getSelection();
+      const quote = sel && !sel.isCollapsed && sel.rangeCount ? sel.toString().trim() : '';
+      if (!quote) {
+        pending = null;
+        return;
+      }
+      pending = sel.getRangeAt(0).cloneRange();
+      const r = pending.getBoundingClientRect();
+      send({
+        type: 'select',
+        quote,
+        pos: textBefore(document.body, pending.startContainer, pending.startOffset).length,
+        rect: { left: r.left, top: r.top, bottom: r.bottom },
+        context: describe(pending.commonAncestorContainer),
+      });
+    }, 0),
+  );
+  document.addEventListener('mousemove', (e) => {
+    if (!marks.size && !hotId) return;
+    hoverAt = [e.clientX, e.clientY];
+    if (hoverFrame) return;
+    hoverFrame = requestAnimationFrame(() => {
+      hoverFrame = 0;
+      const id = rangeAt(hoverAt[0], hoverAt[1], marks) || 0;
+      if (id !== hotId) {
+        hotId = id;
+        send({ type: 'hover', id });
+      }
+    });
+  });
+  const clear = () => {
+    if (pending) send({ type: 'clear' });
+  };
+  document.addEventListener('mousedown', clear);
+  document.addEventListener('scroll', clear, true);
+  addEventListener('message', (e) => {
+    if (e.source !== parent || typeof e.data?.type !== 'string' || !e.data.type.startsWith(P)) return;
+    const type = e.data.type.slice(P.length);
+    const range = marks.get(e.data.id);
+    if (type === 'mark' && pending) {
+      marks.set(e.data.id, pending);
+      hl?.add(pending);
+      pending = null;
+      getSelection().removeAllRanges();
+    } else if (type === 'pend' && pending) {
+      pend?.add(pending);
+    } else if (type === 'unpend') {
+      pend?.clear();
+    } else if (type === 'hot') {
+      hot?.clear();
+      if (range) hot?.add(range);
+    } else if (type === 'unmark' && range) {
+      hl?.delete(range);
+      hot?.delete(range);
+      marks.delete(e.data.id);
+    } else if (type === 'reveal' && range) {
+      range.startContainer.parentElement?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }
+  });
+}
+
+const REVIEW_BRIDGE_TAG = `<script>(${reviewBridge})(${reviewTextBefore}, ${reviewHeadingBefore}, ${reviewRangeAt});</script>`;
+
+function reviewPopEl() {
+  let el = document.getElementById('review-pop');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'review-pop';
+    el.addEventListener('mousedown', (e) => e.stopPropagation());
+    el.addEventListener('click', (e) => e.stopPropagation());
+    document.body.append(el);
+  }
+  return el;
+}
+
+function placeReviewPop(el, r) {
+  el.style.left = `${Math.max(8, Math.min(r.left, window.innerWidth - el.offsetWidth - 8))}px`;
+  const above = r.top - el.offsetHeight - 6;
+  el.style.top = `${above >= 8 ? above : r.bottom + 6}px`;
+}
+
+function closeReviewPop() {
+  if (!reviewPopMode) return;
+  if (reviewPopMode === 'editor') {
+    reviewPendingHighlight?.clear();
+    if (activeReview?.frame) postToReviewFrame('unpend');
+  }
+  reviewPopMode = null;
+  const el = reviewPopEl();
+  el.className = '';
+  el.replaceChildren();
+}
+
+function closeReviewOffer() {
+  if (reviewPopMode === 'offer') closeReviewPop();
+}
+
+function offerReviewComment() {
+  const picked = reviewSelection();
+  if (picked) showReviewOffer(picked);
+  else if (reviewPopMode !== 'editor') closeReviewPop();
+}
+
+function showReviewOffer(picked) {
+  const el = reviewPopEl();
+  reviewPopMode = 'offer';
+  el.className = 'visible offer';
+  el.innerHTML = `<button type="button" class="review-offer-btn" title="Comment (C)">${ICON_CHAT}Comment<kbd>C</kbd></button>`;
+  el.firstElementChild.addEventListener('click', () => openReviewEditor(picked));
+  placeReviewPop(el, picked.rect);
+}
+
+function onReviewOfferKey(e) {
+  if (reviewPopMode !== 'offer' || !matchKey(e, 'c', 'C')) return;
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  reviewPopEl().querySelector('.review-offer-btn').click();
+}
+
+function openReviewEditor(picked) {
+  const el = reviewPopEl();
+  reviewPopMode = 'editor';
+  el.className = 'visible editor';
+  if (picked.range) reviewPendingHighlight?.add(picked.range);
+  else if (picked.inFrame) postToReviewFrame('pend');
+  el.innerHTML = `<textarea rows="3" placeholder="Comment (Ctrl+Enter to add)"></textarea>
+    <div class="review-pop-actions"><button type="button" data-act="cancel">Cancel</button><button type="button" data-act="add" class="primary">Add</button></div>`;
+  const ta = el.querySelector('textarea');
+  const add = () => {
+    const comment = ta.value.trim();
+    if (!comment) return ta.focus();
+    addReviewComment(picked, comment);
+  };
+  ta.addEventListener('keydown', (e) => {
+    e.stopPropagation();
+    if (e.key === 'Escape') closeReviewPop();
+    else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) add();
+  });
+  el.querySelector('[data-act="cancel"]').addEventListener('click', closeReviewPop);
+  el.querySelector('[data-act="add"]').addEventListener('click', add);
+  placeReviewPop(el, picked.rect);
+  ta.focus();
+}
+
+function addReviewComment(picked, comment) {
+  if (!activeReview) return;
+  const { key, contentEl } = activeReview;
+  let item;
+  if (picked.inFrame) {
+    item = {
+      quote: picked.quote,
+      comment,
+      context: picked.context,
+      pos: picked.pos,
+      range: null,
+      frameId: ++reviewMarkSeq,
+    };
+    postToReviewFrame('mark', item.frameId);
+  } else {
+    const { range } = picked;
+    const context = {
+      heading: reviewHeadingBefore(contentEl, range.startContainer),
+      ...activeReview.context?.(range),
+    };
+    const pos = reviewTextBefore(contentEl, range.startContainer, range.startOffset).length;
+    item = { quote: picked.quote, comment, context, pos, range, frameId: 0 };
+    reviewHighlight?.add(range);
+    window.getSelection()?.removeAllRanges();
+  }
+  if (!reviewDrafts.has(key)) reviewDrafts.set(key, []);
+  const items = reviewDrafts.get(key);
+  items.push(item);
+  items.sort((a, b) => a.pos - b.pos);
+  closeReviewPop();
+  renderReviewPanel();
+  activeReview.onComment?.();
+}
+
+function unmarkReviewItem(c) {
+  if (c.range) reviewHighlight?.delete(c.range);
+  else if (c.frameId) postToReviewFrame('unmark', c.frameId);
+}
+
+function revealReviewItem(c) {
+  if (c.range) c.range.startContainer.parentElement?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  else if (c.frameId) postToReviewFrame('reveal', c.frameId);
+}
+
+function removeReviewComment(c) {
+  const items = reviewItems();
+  const i = items.indexOf(c);
+  if (i < 0) return;
+  items.splice(i, 1);
+  unmarkReviewItem(c);
+  if (activeReview.hot === c) setReviewHot(null);
+  if (!items.length) reviewDrafts.delete(activeReview.key);
+  renderReviewPanel();
+}
+
+function clearReviewDrafts(key = activeReview?.key) {
+  for (const c of reviewDrafts.get(key) || []) unmarkReviewItem(c);
+  reviewDrafts.delete(key);
+  setReviewHot(null);
+  renderReviewPanel();
+}
+
+function onReviewPanelClick(e) {
+  const act = e.target.closest('[data-act]')?.dataset.act;
+  if (act === 'send') return sendReview();
+  if (act === 'discard') return clearReviewDrafts();
+  const card = e.target.closest('.review-card');
+  const c = card && reviewItems()[Number(card.dataset.i)];
+  if (!c) return;
+  if (e.target.closest('.review-remove')) removeReviewComment(c);
+  else revealReviewItem(c);
+}
+
+function onReviewPanelHover(e) {
+  const card = e.target.closest('.review-card');
+  setReviewHot((card && reviewItems()[Number(card.dataset.i)]) || null);
+}
+
+function renderReviewPanel() {
+  if (!activeReview) return;
+  const { panelEl, hostEl } = activeReview;
+  const items = reviewItems();
+  panelEl.hidden = !items.length;
+  hostEl?.classList.toggle('has-review', items.length > 0);
+  if (!items.length) return panelEl.replaceChildren();
+  panelEl.innerHTML = `<div class="review-panel-head">
+      <span>${items.length} comment${items.length > 1 ? 's' : ''}</span>
+      <button type="button" data-act="discard" class="review-discard">Discard</button>
+      <button type="button" data-act="send" class="primary">Send</button>
+    </div>
+    <ol class="review-panel-list">${items
+      .map((c, i) => {
+        return `<li class="review-card${c === activeReview.hot ? ' hot' : ''}" data-i="${i}" title="Show in the document">
+        <button type="button" class="review-remove" title="Remove" aria-label="Remove">×</button>
+        <div class="review-card-quote">${escapeHtml(c.quote.slice(0, 300))}</div>
+        <div class="review-card-comment">${escapeHtml(c.comment)}</div></li>`;
+      })
+      .join('')}</ol>`;
+}
+
+async function sendReview() {
+  if (!activeReview) return;
+  const { sessionId, source, key, onSent } = activeReview;
+  const items = reviewItems();
+  if (!items.length) return;
+  try {
+    const res = await terminalFetch(`/api/sessions/${encodeURIComponent(sessionId)}/review`, 'POST', {
+      source,
+      comments: items.map(({ quote, comment, context }) => ({ quote, comment, ...context })),
+    });
+    const data = await res.json();
+    if (!res.ok) return showToast(data.error || 'Review failed', 'error');
+    if (data.delivered === 'doorbell') showToast('Sent to session', 'success');
+    else if (data.delivered === 'terminal') showToast('Pasted into the terminal: press Enter there to send', 'info');
+    else {
+      const { markdown } = data;
+      const copy = () => navigator.clipboard.writeText(markdown).catch(() => {});
+      await copy();
+      showToast(
+        'Review copied. Paste it into the session.',
+        'info',
+        { label: 'Copy again', onClick: copy },
+        'Run /claude-code-kanban:follow there to send reviews directly.',
+      );
+    }
+    clearReviewDrafts(key);
+    if (activeReview?.key === key) onSent?.();
+  } catch {
+    showToast('Failed to send the review', 'error');
+  }
+}
+//#endregion
+
 //#region MARKDOWN_PREVIEW
 const PREVIEW_STORAGE_PREFIX = 'preview-paths-';
 let currentPreviewPath = null;
@@ -6984,7 +7674,9 @@ function renderHtmlPreview(bodyEl, content) {
   frame.className = 'preview-html-frame';
   frame.setAttribute('sandbox', 'allow-scripts allow-popups');
   frame.setAttribute('referrerpolicy', 'no-referrer');
-  frame.srcdoc = content;
+  // After the document's end the parser still adds the script to <body>, and it runs after
+  // the page's own scripts.
+  frame.srcdoc = content + REVIEW_BRIDGE_TAG;
   bodyEl.appendChild(frame);
 }
 
@@ -7048,6 +7740,22 @@ function openPreviewModal(filePath, content, kind) {
   document.getElementById('preview-modal-meta').textContent = filePath;
   document.getElementById('preview-modal').classList.add('visible');
   updatePreviewLinkBtn();
+  if (kind === 'image') return unmountReview();
+  mountReview({
+    contentEl: bodyEl,
+    panelEl: document.getElementById('preview-review-panel'),
+    hostEl: document.querySelector('#preview-modal .modal'),
+    source: { kind: 'file', label: fileName, path: filePath },
+    frame: isHtml ? bodyEl.querySelector('iframe') : null,
+    context: kind === 'text' ? (range) => ({ line: sourceLineOf(bodyEl, range) }) : null,
+    onSent: closePreviewModal,
+  });
+}
+
+function sourceLineOf(bodyEl, range) {
+  const code = bodyEl.querySelector('.preview-source code');
+  if (!code?.contains(range.startContainer)) return undefined;
+  return reviewTextBefore(code, range.startContainer, range.startOffset).split('\n').length;
 }
 
 function isPreviewLinkedToCurrentSession() {
@@ -7098,6 +7806,7 @@ function refreshInfoModalLinkedDocs() {
 }
 
 function closePreviewModal() {
+  unmountReview(document.getElementById('preview-review-panel'));
   hideModalOverlay('preview-modal');
   // Empty the body so an iframe preview is destroyed and its scripts/timers stop.
   document.getElementById('preview-modal-body').innerHTML = '';
@@ -7965,20 +8674,30 @@ function renderMarkers(markers) {
 }
 
 function formatTokens(k) {
-  if (k >= 1000) return `${(k / 1000).toFixed(1)}M`;
+  if (k >= 1000) return `${(k / 1000).toFixed(1).replace(/\.0$/, '')}M`;
   if (k < 1) return (k * 1000).toFixed(0);
   return `${Math.round(k)}K`;
 }
 
-function getCtx(raw) {
+// session.autoCompact ({window, pct} from the session's settings) makes the compaction point the
+// bar's full scale, because the status line reports the model's full window regardless.
+function getCtx(session) {
+  const raw = session?.contextStatus;
+  const autoCompact = session?.autoCompact;
   if (!raw) return null;
   const cw = raw.context_window || {};
-  const size = cw.context_window_size || 0;
-  const pct = cw.used_percentage || 0;
+  const modelSize = cw.context_window_size || 0;
   const model = raw.model || {};
   const modelName = model.display_name || model.id || '';
   const thresholds = getModelThresholds(modelName);
-  const usedTokens = size > 0 ? (pct / 100) * size : 0;
+  const usedTokens = modelSize > 0 ? ((cw.used_percentage || 0) / 100) * modelSize : 0;
+  const compactAt =
+    modelSize > 0 && autoCompact
+      ? (Math.min(modelSize, autoCompact.window || modelSize) * (autoCompact.pct || 100)) / 100
+      : 0;
+  const compacts = compactAt > 0 && compactAt < modelSize;
+  const size = compacts ? compactAt : modelSize;
+  const pct = compacts ? Math.min(100, (usedTokens / size) * 100) : cw.used_percentage || 0;
   const markers =
     size > 0
       ? [
@@ -7989,8 +8708,10 @@ function getCtx(raw) {
       : [];
   return {
     pct,
-    remaining: cw.remaining_percentage || 100 - pct,
+    remaining: 100 - pct,
     size,
+    modelSize,
+    compacts,
     usedTokens,
     modelName,
     inputTokens: cw.total_input_tokens || 0,
@@ -7999,18 +8720,23 @@ function getCtx(raw) {
   };
 }
 
-function renderContextBar(raw) {
-  const ctx = getCtx(raw);
+function renderContextBar(session) {
+  const ctx = getCtx(session);
   if (!ctx) return '';
   const color = getContextColor(ctx.usedTokens, ctx.modelName);
+  const fmt = (n) => formatTokens(n / 1000);
+  const used = fmt(ctx.usedTokens);
+  const title = ctx.compacts
+    ? `Context: ${used} of ${fmt(ctx.size)} tokens before auto-compact (model window ${fmt(ctx.modelSize)})`
+    : `Context: ${used}${ctx.size ? ` of ${fmt(ctx.size)}` : ''} tokens`;
   return `
-        <div class="context-bar" style="display:block">
+        <div class="context-bar" title="${escapeHtml(title)}">
           <div class="context-bar-track">
             <div class="context-bar-fill" style="width:${ctx.pct}%;background:${color}"></div>
             ${renderMarkers(ctx.markers)}
           </div>
           <div class="context-bar-labels">
-            <span style="color:${color}">${Math.round(ctx.pct)}% (${formatTokens(ctx.usedTokens / 1000)})</span>
+            <span style="color:${color}">${Math.round(ctx.pct)}% (${used})</span>
             <span>${Math.round(ctx.remaining)}% free</span>
           </div>
         </div>`;
@@ -8021,9 +8747,10 @@ function formatCost(usd) {
   return `$${usd.toFixed(2)}`;
 }
 
-function renderContextDetail(raw, { tokens = true } = {}) {
-  const ctx = getCtx(raw);
+function renderContextDetail(session, { tokens = true } = {}) {
+  const ctx = getCtx(session);
   if (!ctx) return '';
+  const raw = session.contextStatus;
   const totalK = ctx.size / 1000;
   const color = getContextColor(ctx.usedTokens, ctx.modelName);
 
@@ -8052,7 +8779,7 @@ function renderContextDetail(raw, { tokens = true } = {}) {
           </div>
           <div class="detail-context-summary">
             <span style="color:${color}">${Math.round(ctx.pct)}% used</span>
-            <span>${formatTokens((ctx.pct / 100) * totalK)} / ${formatTokens(totalK)}</span>
+            <span${ctx.compacts ? ` title="Auto-compact window · model window ${escapeHtml(formatTokens(ctx.modelSize / 1000))}"` : ''}>${formatTokens(ctx.usedTokens / 1000)} / ${formatTokens(totalK)}</span>
           </div>
           <div class="detail-context-stats">
             ${tokenRows}
@@ -8223,6 +8950,7 @@ function submitWaitingAnswers() {
 function showWaitingDetail() {
   if (!isWaitingFresh()) return;
   currentMsgDetailIdx = MSG_DETAIL_WAITING_IDX;
+  unmountMsgReview();
   msgHighlightDimmed = false;
   highlightSelectedMsg();
   // Follow-mode poll ticks re-run this whole render — carry any typed reject
@@ -8278,9 +9006,8 @@ function showWaitingDetail() {
   document.getElementById('msg-detail-agent-btn').style.display = 'none';
   const modal = document.getElementById('msg-detail-modal').querySelector('.modal');
   autoSizeModal(modal, body);
-  modal.classList.toggle('live', msgDetailFollowLatest);
+  setMsgDetailFollow(msgDetailFollowLatest);
   const overlay = document.getElementById('msg-detail-modal');
-  overlay.classList.toggle('live-overlay', msgDetailFollowLatest);
   const meta = [formatDate(currentWaiting.timestamp), 'waiting'];
   document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
   currentPinDetailId = null;
@@ -8292,6 +9019,11 @@ 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));
+}
+
 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;
 
 function sessionDisplayName(session) {
@@ -8927,13 +9659,13 @@ function projectFilterText() {
 }
 
 let filterMatcher = { query: null, match: null };
-function matchesProjectFilter(project) {
+function matchesProjectFilter(project, repo) {
   if (!filterProject) return true;
   if (filterProject === '__recent__') return recentProjects.has(project);
   if (filterMatcher.query !== filterProject) {
     filterMatcher = { query: filterProject, match: projectMatcher(filterProject) };
   }
-  return filterMatcher.match(project);
+  return filterMatcher.match(project, repo);
 }
 
 //#endregion
@@ -9108,7 +9840,9 @@ async function refreshProjectList() {
   const cutoff = Date.now() - RECENT_PROJECT_HOURS * 60 * 60 * 1000;
   const prevRecent = recentProjects;
   recentProjects = new Set(
-    projects.filter((p) => p.modifiedAt && new Date(p.modifiedAt).getTime() > cutoff).map((p) => p.path),
+    projects
+      .filter((p) => p.modifiedAt && new Date(p.modifiedAt).getTime() > cutoff)
+      .flatMap((p) => [p.path, ...(p.worktrees || [])]),
   );
 
   renderFilterState();
@@ -9394,7 +10128,10 @@ async function showSessionInfoModal(sessionId) {
   const planPromise = fetch(`/api/sessions/${sessionId}/plan`)
     .then((r) => (r.ok ? r.json() : null))
     .catch(() => null)
-    .then((data) => data?.content || null);
+    .then((data) => {
+      if (data?.content) _pendingPlanPath = data.path || null;
+      return data?.content || null;
+    });
 
   const tasksPromise =
     cachedTasks.length > 0
@@ -9418,6 +10155,7 @@ async function showSessionInfoModal(sessionId) {
 
 let _infoModalSessionId = null;
 let _pendingPlanContent = null;
+let _pendingPlanPath = null;
 
 function updateStickyBtnState() {
   const stickyBtn = document.getElementById('session-info-sticky-btn');
@@ -9542,7 +10280,7 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
 
   if (session.contextStatus) {
     html += `<hr style="border: none; border-top: 1px solid var(--border); margin: 12px 0;">`;
-    html += renderContextDetail(session.contextStatus);
+    html += renderContextDetail(session);
   }
 
   if (planContent) {
@@ -9660,8 +10398,11 @@ function openSessionFromInfo(sessionId) {
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function toggleDismissSession(sessionId) {
-  setSessionDismissed(sessionId, !dismissedSessionIds.has(sessionId));
+async function toggleDismissSession(sessionId) {
+  const dismiss = !dismissedSessionIds.has(sessionId);
+  if (dismiss && !(await confirmDismissBlockers(sessionId))) return;
+  if (dismiss) dismissSessionFromList(sessionId);
+  else setSessionDismissed(sessionId, false);
 }
 
 function updateDismissBtnState() {
@@ -10061,10 +10802,11 @@ function refreshOpenPlan() {
   fetch(`/api/sessions/${_planSessionId}/plan`)
     .then((r) => (r.ok ? r.json() : null))
     .then((data) => {
-      if (data?.content) {
+      if (data?.content && (data.content !== _pendingPlanContent || data.path !== _pendingPlanPath)) {
         _pendingPlanContent = data.content;
-        const body = document.getElementById('plan-modal-body');
-        body.innerHTML = renderMarkdown(_pendingPlanContent);
+        _pendingPlanPath = data.path || null;
+        document.getElementById('plan-modal-body').innerHTML = renderMarkdown(_pendingPlanContent);
+        mountPlanReview();
       }
     })
     .catch(() => {});
@@ -10383,6 +11125,7 @@ function openPlanForSession(sid) {
     .then((data) => {
       if (data?.content) {
         _pendingPlanContent = data.content;
+        _pendingPlanPath = data.path || null;
         _planSessionId = sid;
         openPlanModal();
       }
@@ -10403,10 +11146,12 @@ function openPlanModal() {
     document.querySelector('#plan-modal .modal-footer').prepend(controls);
   }
   document.getElementById('plan-modal').classList.add('visible');
+  mountPlanReview();
   const keyHandler = (e) => {
     if (e.key === 'Escape') {
       e.preventDefault();
       e.stopPropagation();
+      if (reviewPopMode) return closeReviewPop();
       closePlanModal();
       document.removeEventListener('keydown', keyHandler, true);
     }
@@ -10414,7 +11159,20 @@ function openPlanModal() {
   document.addEventListener('keydown', keyHandler, true);
 }
 
+function mountPlanReview() {
+  if (!_pendingPlanPath || !_planSessionId) return;
+  mountReview({
+    contentEl: document.getElementById('plan-modal-body'),
+    panelEl: document.getElementById('plan-review-panel'),
+    hostEl: document.querySelector('#plan-modal .modal'),
+    source: { kind: 'file', label: pathBasename(_pendingPlanPath), path: _pendingPlanPath },
+    sessionId: _planSessionId,
+    onSent: closePlanModal,
+  });
+}
+
 function closePlanModal() {
+  unmountReview(document.getElementById('plan-review-panel'));
   hideModalOverlay('plan-modal');
 }
 
@@ -10620,31 +11378,44 @@ const TERMINAL_MODES_KEY = 'terminal-sessions';
 const TERMINAL_FONT_KEY = 'terminal-font-size';
 const TERMINAL_FONT_MIN = 8;
 const TERMINAL_FONT_MAX = 32;
-const ACK_BATCH_BYTES = 32 * 1024;
+const TERMINAL_FRAME_ISOLATED_MS = 5000;
+const TERMINAL_FRAME_LOAD_MS = 10000;
+const TERMINAL_FRAME_ALIVE_MS = 5000;
+const TERMINAL_MSG = 'cck-term:';
 const TERMINAL_RETRY_MS = [500, 1000, 2000, 4000, 8000];
 const TERMINAL_STABLE_MS = 5000;
 const STALE_TOKEN_MSG = 'The terminal token is out of date. Reload the hub window.';
 // Read at load, before the first updateUrl() rewrites the URL without the fragment.
 let terminalToken = readTerminalToken();
 const termState = {
-  loaded: null,
-  term: null,
-  fit: null,
-  webgl: null,
-  ws: null,
+  socket: null,
   sessionId: null,
+  fontSize: null,
   syncedView: null,
   panelHidden: false,
   shown: false,
   attached: false,
   closeGuard: false,
-  leaving: false,
   focusNext: false,
   openedByUser: null,
-  ackPending: 0,
-  ackTimer: null,
   retryTimer: null,
 };
+const termFrame = {
+  el: null,
+  origin: null,
+  ready: null,
+  resolve: null,
+  inited: false,
+  reload: false,
+  claims: '',
+  theme: '',
+  sameOrigin: false,
+};
+
+function resetTerminalFrame(patch) {
+  Object.assign(termFrame, { inited: false, reload: false, claims: '', theme: '', ...patch });
+}
+let terminalSocketSeq = 0;
 
 // The hub passes the token in the fragment, which is never sent to a server or logged.
 function readTerminalToken() {
@@ -10704,7 +11475,11 @@ function setTerminalMode(sessionId, on) {
 }
 
 function wantsTerminal() {
-  return terminalAvailable() && viewMode === 'session' && !!currentSessionId && terminalModes().has(currentSessionId);
+  return viewMode === 'session' && wantsTerminalFor(currentSessionId);
+}
+
+function wantsTerminalFor(sessionId) {
+  return terminalAvailable() && !!sessionId && terminalModes().has(sessionId);
 }
 
 function toggleTerminal() {
@@ -10725,12 +11500,13 @@ function inPageField(e) {
   return !!field && !document.getElementById('terminal-pane').contains(field);
 }
 
-function terminalShortcut(e) {
+// `probe` asks which keys the terminal frame hands back, and the frame sees keys only while it has focus.
+function terminalShortcut(e, probe = false) {
   const ctrlAlt = e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey;
   const ctrlShift = e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey;
   // Ctrl+_ is Claude Code's undo, so the zoom keys leave it to the terminal.
   const zoom = e.key === '_' ? undefined : zoomDelta(e);
-  if (zoom !== undefined && termState.term && terminalPaneFocused()) {
+  if (zoom !== undefined && termFrame.inited && (probe || terminalPaneFocused())) {
     return () => adjustTerminalFontSize(Math.sign(zoom));
   }
   if (ctrlAlt && e.code === 'KeyS') return swapToPreviousSession;
@@ -10809,7 +11585,13 @@ function syncTerminal() {
     btn.classList.toggle('active', on);
   }
   sessionView.classList.toggle('terminal-mode', on);
+  pushTerminalClaims();
   if (!on) {
+    // A hidden xterm textarea drops focus, but a display:none iframe keeps it and would take keys unseen.
+    if (termState.shown && terminalPaneFocused()) {
+      terminalHadFocus = false;
+      document.activeElement.blur();
+    }
     termState.shown = false;
     termState.focusNext = false;
     termState.openedByUser = null;
@@ -10854,8 +11636,7 @@ function promptAwaitsUser(sessionId) {
 
 function onTerminalShown(focus = true) {
   requestAnimationFrame(() => {
-    fitTerminal();
-    repaintTerminal();
+    terminalFrameSend('refresh');
     if (focus) focusTerminalPane();
   });
 }
@@ -10863,37 +11644,210 @@ function onTerminalShown(focus = true) {
 function focusTerminalPane() {
   const prompt = document.getElementById('terminal-prompt');
   if (prompt.classList.contains('visible')) prompt.querySelector('button')?.focus();
-  else termState.term?.focus();
+  else if (termFrame.inited) {
+    termFrame.el.focus();
+    terminalFrameSend('focus');
+  }
 }
 
 function leaveTerminalPane() {
-  termState.leaving = true;
+  terminalHadFocus = false;
   document.activeElement.blur();
-  termState.leaving = false;
   setFocusZone('sidebar');
 }
 
-function loadXterm() {
-  if (termState.loaded) return termState.loaded;
-  const css = document.createElement('link');
-  css.rel = 'stylesheet';
-  css.href = '/vendor/xterm/xterm.css';
-  document.head.appendChild(css);
-  const script = (src) =>
-    new Promise((resolve, reject) => {
-      const s = document.createElement('script');
-      s.src = src;
-      s.onload = resolve;
-      s.onerror = () => reject(new Error(`failed to load ${src}`));
-      document.head.appendChild(s);
+// Chrome puts frames in one process per site, and a site ignores the port. Served from another
+// loopback name, the terminal runs in its own renderer, so board work never delays a key or a frame.
+// localhost maps to [::1], not 127.0.0.1: Chrome reaches localhost over IPv6, and some Windows
+// machines drop fresh IPv4 loopback connects in bursts, which stalls a socket for seconds.
+// A board on [::1] keeps the terminal in its process, because frame-ancestors cannot name an IPv6
+// literal; so does any other host, which has no second name.
+function terminalFrameOrigin(loc = location) {
+  const other = { localhost: '[::1]', '127.0.0.1': 'localhost' }[loc.hostname];
+  return other ? `${loc.protocol}//${other}${loc.port ? `:${loc.port}` : ''}` : loc.origin;
+}
+
+function ensureTerminalFrame() {
+  if (termFrame.ready) return termFrame.ready;
+  const isolated = termFrame.sameOrigin ? location.origin : terminalFrameOrigin();
+  // A host that does not answer on the other name (IPv6 turned off) still gets a terminal, in this
+  // process, and later loads skip the wait.
+  const ready = loadTerminalFrame(isolated, TERMINAL_FRAME_ISOLATED_MS).catch(async (err) => {
+    if (isolated === location.origin) throw err;
+    await loadTerminalFrame(location.origin, TERMINAL_FRAME_LOAD_MS);
+    termFrame.sameOrigin = true;
+  });
+  termFrame.ready = ready;
+  ready.catch(() => {
+    if (termFrame.ready === ready) termFrame.ready = null;
+  });
+  return ready;
+}
+
+function loadTerminalFrame(origin, timeoutMs) {
+  termFrame.el?.remove();
+  const el = document.createElement('iframe');
+  el.className = 'terminal-frame';
+  el.title = 'Terminal';
+  el.allow = 'clipboard-read; clipboard-write';
+  el.src = `${origin}/terminal.html#p=${encodeURIComponent(location.origin)}`;
+  resetTerminalFrame({ el, origin });
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      if (termFrame.el !== el || termFrame.inited) return;
+      el.remove();
+      termFrame.el = null;
+      reject(new Error('The terminal did not load.'));
+    }, timeoutMs);
+    termFrame.resolve = () => {
+      clearTimeout(timer);
+      resolve();
+    };
+    document.getElementById('terminal-host').appendChild(el);
+  });
+}
+
+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 });
+}
+
+// Keyed on the colors, and style is watched, because under the hub a theme change lands in two
+// steps: the class flips while the old pick's inline vars are still on body, then the SDK swaps them.
+new MutationObserver(sendTerminalTheme).observe(document.body, {
+  attributes: true,
+  attributeFilter: ['class', 'data-color-theme', 'style'],
+});
+
+function postToTerminalFrame(t, data) {
+  termFrame.el.contentWindow?.postMessage({ ...data, type: TERMINAL_MSG + t }, termFrame.origin);
+}
+
+function terminalFrameSend(t, data) {
+  if (termFrame.inited) postToTerminalFrame(t, data);
+}
+
+window.addEventListener('message', (e) => {
+  if (!termFrame.el || e.source !== termFrame.el.contentWindow || e.origin !== termFrame.origin) return;
+  const m = e.data;
+  if (typeof m?.type === 'string' && m.type.startsWith(TERMINAL_MSG))
+    onTerminalFrameMessage(m.type.slice(TERMINAL_MSG.length), m);
+});
+
+function onTerminalFrameMessage(t, m) {
+  const socket = termState.socket;
+  const current = socket && m.socketId === socket.id;
+  if (t === 'loaded') {
+    // 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,
     });
-  termState.loaded = script('/vendor/xterm/xterm.js').then(() =>
-    Promise.all(['addon-fit', 'addon-webgl', 'addon-unicode11'].map((n) => script(`/vendor/xterm/${n}.js`))),
+  } else if (t === 'term') {
+    termFrame.inited = true;
+    pushTerminalClaims();
+    // A theme change between init and now was dropped.
+    sendTerminalTheme();
+    termFrame.resolve?.();
+    if (termFrame.reload) {
+      termFrame.reload = false;
+      reconnectTerminal();
+    }
+  } else if (t === 'key') replayTerminalKey(m);
+  // Chrome does not always fire focusin on the iframe element when its content takes focus.
+  else if (t === 'focused') terminalHadFocus = terminalPaneFocused();
+  else if (t === 'opening') {
+    if (current) clearTimeout(socket.aliveTimer);
+  } else if (t === 'output') {
+    if (current && terminalBootTimer) hideTerminalBoot();
+  } else if (t === 'ws') {
+    if (!current) return;
+    if (m.msg?.t === 'ready') socket.readyAt = Date.now();
+    else if (m.msg?.t === 'error') socket.refused = true;
+    onTerminalMessage(socket.sessionId, m.msg, m.tail);
+  } else if (t === 'close') {
+    if (current) onTerminalSocketClose(socket, m.code);
+  }
+}
+
+// The frame hands back the keys the board acts on. Replaying them on a textarea inside the pane gives
+// the document listeners the target they saw when xterm lived here: the shortcut runs, the SDK
+// forwards a hub key, and the text-field guard keeps the board's own keys out.
+function replayTerminalKey(m) {
+  const target = document.getElementById('terminal-key-proxy');
+  target.dispatchEvent(
+    new KeyboardEvent('keydown', {
+      key: m.key,
+      code: m.code,
+      ctrlKey: !!m.ctrl,
+      altKey: !!m.alt,
+      shiftKey: !!m.shift,
+      metaKey: !!m.meta,
+      bubbles: true,
+      cancelable: true,
+    }),
   );
-  termState.loaded.catch(() => {
-    termState.loaded = null;
+}
+
+// [code, key, key with Shift] on a US layout. Each is probed by code alone and by key alone, so a claim
+// holds on any layout exactly when the shortcut would. Hub keys are not probed: the frame gets the
+// hub's combos and matches them with the SDK's comboOf.
+const TERMINAL_PROBE_KEYS = [
+  ...[...'abcdefghijklmnopqrstuvwxyz'].map((k) => [`Key${k.toUpperCase()}`, k, k.toUpperCase()]),
+  ...[...')!@#$%^&*('].map((s, n) => [`Digit${n}`, String(n), s]),
+  ['Backquote', '`', '~'],
+  ['Equal', '=', '+'],
+  ['Minus', '-', '_'],
+  ['NumpadAdd', '+', '+'],
+  ['NumpadSubtract', '-', '-'],
+  ['Numpad0', '0', '0'],
+  ...['Left', 'Right', 'Up', 'Down'].map((d) => [`Arrow${d}`, `Arrow${d}`, `Arrow${d}`]),
+];
+
+function terminalClaims() {
+  const keys = [];
+  for (let bits = 0; bits < 16; bits++) {
+    const mods = { ctrlKey: !!(bits & 1), altKey: !!(bits & 2), shiftKey: !!(bits & 4), metaKey: !!(bits & 8) };
+    for (const [code, base, shifted] of TERMINAL_PROBE_KEYS) {
+      const key = mods.shiftKey ? shifted : base;
+      for (const probe of [
+        { ...mods, key: 'Unidentified', code },
+        { ...mods, key, code: '' },
+      ]) {
+        if (terminalShortcut(probe, true)) keys.push(probe);
+      }
+    }
+  }
+  return keys;
+}
+
+let terminalClaimsQueued = false;
+
+// The claims depend on state (the hub's welcome, a slow connect, the session), so every change re-sends
+// them. One state change calls this several times, and the probe is about 1,500 shortcut checks.
+function pushTerminalClaims() {
+  if (!termFrame.inited || terminalClaimsQueued) return;
+  terminalClaimsQueued = true;
+  queueMicrotask(() => {
+    terminalClaimsQueued = false;
+    if (!termFrame.inited) return;
+    const claims = { keys: terminalClaims(), forward: hub.forwardCombos() };
+    const sig = JSON.stringify(claims);
+    if (sig === termFrame.claims) return;
+    termFrame.claims = sig;
+    terminalFrameSend('claims', claims);
   });
-  return termState.loaded;
 }
 
 function terminalTheme() {
@@ -10922,141 +11876,6 @@ function terminalThemeOptions() {
   };
 }
 
-// Returning false hands the key back to the page: xterm skips it and the document
-// listeners (the toggle, hub forwarding, native paste) see it instead.
-function terminalKeyFilter(e) {
-  if (e.type !== 'keydown') return true;
-  const ctrlOnly = e.ctrlKey && !e.altKey && !e.metaKey;
-  if (terminalShortcut(e)) return false;
-  if (ctrlOnly && e.code === 'KeyC' && (e.shiftKey || termState.term.hasSelection())) {
-    e.preventDefault();
-    navigator.clipboard?.writeText(termState.term.getSelection()).catch(() => {});
-    termState.term.clearSelection();
-    return false;
-  }
-  if (ctrlOnly && e.code === 'KeyV') return false;
-  return !hub.forwards(e);
-}
-
-function oscColor(hex) {
-  const m = /^#([0-9a-f]{6})$/i.exec(hex || '');
-  if (!m) return null;
-  return `rgb:${[0, 2, 4].map((i) => m[1].slice(i, i + 2).repeat(2)).join('/')}`;
-}
-
-function ensureTerm() {
-  if (termState.term) return termState.term;
-  const cfg = appConfig.terminal;
-  const host = document.getElementById('terminal-host');
-  const fontFamily =
-    cfg.fontFamily || getComputedStyle(document.body).getPropertyValue('--font-mono').trim() || 'monospace';
-  const fontSize = terminalFontSize();
-  const term = new window.Terminal({
-    fontFamily,
-    fontSize,
-    scrollback: cfg.scrollback,
-    cursorBlink: true,
-    allowProposedApi: true,
-    ...terminalThemeOptions(),
-  });
-  termState.fit = new window.FitAddon.FitAddon();
-  term.loadAddon(termState.fit);
-  term.loadAddon(new window.Unicode11Addon.Unicode11Addon());
-  term.unicode.activeVersion = '11';
-  term.open(host);
-  try {
-    const gl = new window.WebglAddon.WebglAddon();
-    gl.onContextLoss(() => {
-      gl.dispose();
-      termState.webgl = null;
-      repaintTerminal();
-    });
-    term.loadAddon(gl);
-    termState.webgl = gl;
-  } catch (_) {
-    // No WebGL: xterm falls back to its DOM renderer.
-  }
-  document.fonts
-    ?.load(`${fontSize}px ${fontFamily}`)
-    .then(repaintTerminal)
-    .catch(() => {});
-  term.attachCustomKeyEventHandler(terminalKeyFilter);
-  // xterm leaves OSC 10/11 color queries unanswered, so apps that pick a palette from the
-  // background (Claude Code's Auto theme) assume dark even on a light theme.
-  for (const [code, key] of [
-    [10, 'foreground'],
-    [11, 'background'],
-  ]) {
-    term.parser.registerOscHandler(code, (data) => {
-      if (data !== '?') return false;
-      const rgb = oscColor(term.options.theme[key]);
-      if (rgb) terminalSend({ t: 'in', d: `\x1b]${code};${rgb}\x1b\\` });
-      return true;
-    });
-  }
-  term.onData((d) => terminalSend({ t: 'in', d }));
-  term.onResize(({ cols, rows }) => terminalSend({ t: 'resize', cols, rows }));
-  // One fit per frame while a drag resizes the host. The atlas is rebuilt only when the host comes
-  // back from 0×0, which is also how a hidden hub iframe or pane shows again.
-  let frame = 0;
-  let visible = false;
-  new ResizeObserver(() => {
-    if (frame) return;
-    frame = requestAnimationFrame(() => {
-      frame = 0;
-      const nowVisible = host.offsetWidth > 0;
-      fitTerminal();
-      if (nowVisible && !visible) repaintTerminal();
-      visible = nowVisible;
-    });
-  }).observe(host);
-  const themeKey = () => `${isLightTheme()}|${document.body.dataset.colorTheme || ''}`;
-  let appliedTheme = themeKey();
-  new MutationObserver(() => {
-    if (themeKey() === appliedTheme) return;
-    appliedTheme = themeKey();
-    Object.assign(term.options, terminalThemeOptions());
-    repaintTerminal();
-  }).observe(document.body, { attributes: true, attributeFilter: ['class', 'data-color-theme'] });
-  // Vimium eats Escape inside a text field and only blurs it, so the key never reaches Claude.
-  // A blur no click caused, while the pane stays shown and the window keeps focus, is that Escape.
-  let pointerDown = false;
-  document.addEventListener('mousedown', () => (pointerDown = true), true);
-  document.addEventListener('mouseup', () => (pointerDown = false), true);
-  term.textarea.addEventListener('blur', () => {
-    if (pointerDown || termState.leaving) return;
-    requestAnimationFrame(() => {
-      if (!termState.attached || !host.offsetWidth) return;
-      if (!document.hasFocus() || document.activeElement !== document.body) return;
-      terminalSend({ t: 'in', d: '\x1b' });
-      term.focus();
-    });
-  });
-  termState.term = term;
-  return term;
-}
-
-// The WebGL renderer keeps its last frame and glyph atlas while the pane (or the hub's iframe) is
-// display:none, and comes back showing stale cells or backgrounds with no text. xterm does not
-// repaint on its own when the canvas is shown again.
-function repaintTerminal() {
-  const term = termState.term;
-  if (!term) return;
-  try {
-    termState.webgl?.clearTextureAtlas();
-  } catch (_) {}
-  term.refresh(0, term.rows - 1);
-}
-
-// The fit addon measures 0×0 while the pane (or the hub's iframe) is display:none.
-function fitTerminal() {
-  const host = document.getElementById('terminal-host');
-  if (!termState.fit || !host.offsetWidth || !host.offsetHeight) return;
-  try {
-    termState.fit.fit();
-  } catch (_) {}
-}
-
 function clampTerminalFont(v) {
   return Math.min(TERMINAL_FONT_MAX, Math.max(TERMINAL_FONT_MIN, v));
 }
@@ -11066,33 +11885,25 @@ function terminalFontSize() {
   return saved ? clampTerminalFont(saved) : appConfig.terminal.fontSize;
 }
 
+function currentTerminalFontSize() {
+  termState.fontSize ??= terminalFontSize();
+  return termState.fontSize;
+}
+
 function adjustTerminalFontSize(step) {
-  const term = termState.term;
-  const size = step === 0 ? appConfig.terminal.fontSize : clampTerminalFont(term.options.fontSize + step);
-  if (size !== term.options.fontSize) {
+  const current = currentTerminalFontSize();
+  const size = step === 0 ? appConfig.terminal.fontSize : clampTerminalFont(current + step);
+  if (size !== current) {
     if (step === 0) store.removeItem(TERMINAL_FONT_KEY);
     else store.setItem(TERMINAL_FONT_KEY, String(size));
-    term.options.fontSize = size;
-    fitTerminal();
+    termState.fontSize = size;
+    terminalFrameSend('font', { size });
   }
   showToast(`Terminal ${size}px`);
 }
 
 function terminalSend(msg) {
-  if (termState.ws?.readyState === WebSocket.OPEN) termState.ws.send(JSON.stringify(msg));
-}
-
-function ackTerminal(ws, n) {
-  if (termState.ws !== ws) return;
-  termState.ackPending += n;
-  const flush = () => {
-    clearTimeout(termState.ackTimer);
-    termState.ackTimer = null;
-    if (termState.ws === ws && termState.ackPending) terminalSend({ t: 'ack', n: termState.ackPending });
-    termState.ackPending = 0;
-  };
-  if (termState.ackPending >= ACK_BATCH_BYTES) flush();
-  else if (!termState.ackTimer) termState.ackTimer = setTimeout(flush, 50);
+  if (termState.socket) terminalFrameSend('send', { msg });
 }
 
 function setTerminalStatus(text) {
@@ -11132,6 +11943,7 @@ function clearTerminalSlow() {
   clearTimeout(terminalSlowTimer);
   terminalSlowTimer = null;
   document.getElementById('terminal-boot').classList.remove('slow');
+  pushTerminalClaims();
 }
 
 function terminalConnectSlow() {
@@ -11160,22 +11972,12 @@ function showTerminalPrompt(sessionId, title, detail, choices, output = '') {
   el.querySelector('button')?.focus();
 }
 
-function terminalTail(count) {
-  const buf = termState.term?.buffer.active;
-  if (!buf) return '';
-  const lines = [];
-  for (let i = buf.length - 1; i >= 0 && lines.length < count; i--) {
-    const text = buf.getLine(i)?.translateToString(true) ?? '';
-    if (text.trim() || lines.length) lines.unshift(text);
-  }
-  return lines.join('\n');
-}
-
 // Closing the page leaves the PTY running, but Ctrl+W meant for the prompt closes the tab, so ask first.
 // Under the hub the top frame asks: browsers do not reliably show the dialog for a frame.
 function setTerminalAttached(on) {
   termState.attached = on;
   syncCloseGuard();
+  pushTerminalClaims();
 }
 
 // A hidden pane stays attached, but Ctrl+W can only be meant for a terminal on screen.
@@ -11203,6 +12005,26 @@ document.addEventListener('focusout', (e) => {
     if (document.hasFocus()) terminalHadFocus = terminalPaneFocused();
   });
 });
+// The hub hands focus back by focusing this frame after a palette closes, and focus does not
+// pass on into the nested terminal frame by itself. The hub makes this frame inert while the
+// palette is open, which can blur the terminal frame, so activeElement no longer says it had focus.
+// Without inert (the app launcher), activeElement stays the frame element while the frame has no focus.
+// 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);
+for (const type of ['pointerup', 'pointercancel']) {
+  document.addEventListener(type, () => (boardPointerDown = false), true);
+}
+window.addEventListener('focus', () => {
+  if (!terminalHadFocus || boardPointerDown) return;
+  setTimeout(() => {
+    const active = document.activeElement;
+    if (terminalHadFocus && termState.shown && (active === document.body || active === termFrame.el)) {
+      focusTerminalPane();
+    }
+  });
+});
 window.addEventListener('pagehide', () => {
   try {
     if (termState.attached && termState.shown && terminalHadFocus) {
@@ -11227,109 +12049,87 @@ document.getElementById('terminal-pane').addEventListener('focusin', () => {
 });
 
 function detachTerminal() {
-  const ws = termState.ws;
-  termState.ws = null;
+  const had = termState.socket;
+  termState.socket = null;
   termState.sessionId = null;
-  clearTimeout(termState.ackTimer);
-  termState.ackTimer = null;
-  termState.ackPending = 0;
   clearTimeout(termState.retryTimer);
   termState.retryTimer = null;
   setTerminalAttached(false);
-  if (ws) {
-    ws.onclose = null;
-    ws.close();
-  }
+  if (had) terminalFrameSend('detach');
   hideTerminalPrompt();
   hideTerminalBoot();
 }
 
+// The frame owns the socket and xterm; the board picks the session, the mode and when to retry.
 async function openTerminal(sessionId, mode, attempt = 0) {
   detachTerminal();
   termState.sessionId = sessionId;
+  const socket = { id: ++terminalSocketSeq, sessionId, mode, attempt, readyAt: 0, refused: false };
+  termState.socket = socket;
   if (!attempt) setTerminalStatus('');
-  try {
-    await loadXterm();
-  } catch (e) {
-    setTerminalStatus(e.message);
-    return;
+  // Even a settled await resumes only after the caller's render, so a loaded frame is used at once.
+  if (!termFrame.inited) {
+    try {
+      await ensureTerminalFrame();
+    } catch (e) {
+      if (termState.socket === socket) setTerminalStatus(e.message);
+      return;
+    }
+    if (termState.socket !== socket) return;
   }
-  if (termState.sessionId !== sessionId) return;
-  const term = ensureTerm();
-  if (!attempt) showTerminalBoot();
-  // RIS through the write queue, not term.reset(): reset() runs at once, and output the previous
-  // session had already queued would still be drawn after it. A retry keeps the last screen
-  // until the replay arrives.
-  const reset = () => term.write('\x1bc', repaintTerminal);
-  if (!attempt) reset();
-  fitTerminal();
-  const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/api/terminal/ws`);
-  ws.binaryType = 'arraybuffer';
-  termState.ws = ws;
   if (!attempt) {
+    showTerminalBoot();
     terminalSlowTimer = setTimeout(() => {
-      if (termState.ws === ws) document.getElementById('terminal-boot').classList.add('slow');
+      if (termState.socket !== socket) return;
+      document.getElementById('terminal-boot').classList.add('slow');
+      pushTerminalClaims();
     }, TERMINAL_SLOW_CONNECT_MS);
   }
   const spec = newSpecs.get(sessionId);
-  let readyAt = 0;
-  let refused = false;
-  ws.onopen = () =>
-    ws.send(
-      JSON.stringify({
-        t: 'hello',
-        token: terminalToken,
-        id: sessionId,
-        mode,
-        cols: term.cols,
-        rows: term.rows,
-        ...(spec?.mode === mode && {
-          cwd: spec.cwd,
-          name: spec.name,
-          worktree: spec.worktree,
-          model: spec.model,
-          prompt: spec.prompt,
-        }),
+  terminalFrameSend('open', {
+    socketId: socket.id,
+    reset: !attempt,
+    hello: {
+      token: terminalToken,
+      id: sessionId,
+      mode,
+      ...(spec?.mode === mode && {
+        cwd: spec.cwd,
+        name: spec.name,
+        worktree: spec.worktree,
+        model: spec.model,
+        prompt: spec.prompt,
       }),
-    );
-  ws.onmessage = (ev) => {
-    if (termState.ws !== ws) return;
-    if (typeof ev.data !== 'string') {
-      const bytes = new Uint8Array(ev.data);
-      term.write(bytes, () => {
-        ackTerminal(ws, bytes.length);
-        if (terminalBootTimer && termState.ws === ws && terminalTail(1)) hideTerminalBoot();
-      });
-      return;
-    }
-    let msg;
-    try {
-      msg = JSON.parse(ev.data);
-    } catch (_) {
-      return;
-    }
-    if (msg.t === 'ready') {
-      readyAt = Date.now();
-      if (attempt) reset();
-    } else if (msg.t === 'error') refused = true;
-    onTerminalMessage(sessionId, msg);
-  };
-  ws.onclose = (ev) => {
-    if (termState.ws !== ws) return;
-    termState.ws = null;
-    setTerminalAttached(false);
-    // A refusal already shows the server's reason, and retrying would only repeat it, unless the
-    // reason was a token that the hub has since replaced (4001).
-    if (refused && ev.code === 4001) {
-      refreshTerminalToken().then((ok) => {
-        if (ok && termState.sessionId === sessionId) openTerminal(sessionId, mode, attempt + 1);
-      });
-      return;
-    }
-    if (refused || document.getElementById('terminal-prompt').classList.contains('visible')) return;
-    const stable = readyAt && Date.now() - readyAt > TERMINAL_STABLE_MS;
-    retryTerminal(sessionId, stable ? 0 : attempt);
-  };
+    },
+  });
+  // Chrome shows a crashed frame as a sad face and does not reload it, so a dead frame only shows as silence.
+  socket.aliveTimer = setTimeout(() => {
+    if (termState.socket !== socket) return;
+    dropTerminalFrame();
+    openTerminal(sessionId, mode, attempt);
+  }, TERMINAL_FRAME_ALIVE_MS);
+}
+
+function dropTerminalFrame() {
+  termFrame.el?.remove();
+  resetTerminalFrame({ el: null, ready: null });
+}
+
+function onTerminalSocketClose(socket, code) {
+  termState.socket = null;
+  setTerminalAttached(false);
+  const { sessionId, mode, attempt } = socket;
+  // A refusal already shows the server's reason, and retrying would only repeat it, unless the
+  // reason was a token that the hub has since replaced (4001).
+  if (socket.refused && code === 4001) {
+    refreshTerminalToken().then((ok) => {
+      if (ok && termState.sessionId === sessionId) openTerminal(sessionId, mode, attempt + 1);
+    });
+    return;
+  }
+  if (socket.refused || document.getElementById('terminal-prompt').classList.contains('visible')) return;
+  const stable = socket.readyAt && Date.now() - socket.readyAt > TERMINAL_STABLE_MS;
+  retryTerminal(sessionId, stable ? 0 : attempt);
 }
 
 function terminalOpenMode(sessionId) {
@@ -11368,7 +12168,7 @@ function retryTerminal(sessionId, attempt) {
   }, delay);
 }
 
-function onTerminalMessage(sessionId, msg) {
+function onTerminalMessage(sessionId, msg, tail = '') {
   if (msg.t === 'ready') {
     // The server has the prompt now; a later start of the same placeholder must not send it again.
     const spec = newSpecs.get(sessionId);
@@ -11377,8 +12177,7 @@ function onTerminalMessage(sessionId, msg) {
     hideTerminalPrompt();
     setTerminalStatus('');
     setTerminalAttached(true);
-    terminalSend({ t: 'resize', cols: termState.term.cols, rows: termState.term.rows });
-    if (takeTerminalFocus(sessionId)) termState.term.focus();
+    if (takeTerminalFocus(sessionId)) focusTerminalPane();
   } else if (msg.t === 'rekey' && typeof msg.id === 'string') {
     adoptPickedSession(sessionId, msg.id);
     if (msg.duplicate) showToast('That session is already open here, so this terminal switched to it', 'info');
@@ -11419,7 +12218,7 @@ function onTerminalMessage(sessionId, msg) {
             ['fork', 'Fork'],
             ['shell', 'Shell'],
           ],
-      clean ? '' : terminalTail(6),
+      clean ? '' : tail,
     );
   } else if (msg.t === 'error') {
     hideTerminalBoot();
@@ -11449,12 +12248,42 @@ function openTerminalManager() {
   if (terminalPaneFocused()) leaveTerminalPane();
   document.getElementById('terminal-manager-modal').classList.add('visible');
   renderTerminalManager();
+  clearInterval(terminalProcTimer);
+  pollTerminalProcStats();
+  terminalProcTimer = setInterval(pollTerminalProcStats, TERMINAL_PROC_POLL_MS);
 }
 
 function closeTerminalManager() {
+  clearInterval(terminalProcTimer);
   hideModalOverlay('terminal-manager-modal');
 }
 
+// Each poll costs one OS process query on the server, so it runs only while the modal is on screen.
+const TERMINAL_PROC_POLL_MS = 5000;
+let terminalProcTimer = 0;
+let terminalProcStats = {};
+
+function formatTerminalProc(s) {
+  if (!s) return '';
+  return `${Math.round(s.rss / 1048576)} MB${s.cpu === null ? '' : ` · ${s.cpu}% CPU`}`;
+}
+
+async function pollTerminalProcStats() {
+  if (!isOnScreen()) return;
+  let cck;
+  try {
+    const res = await fetch('/api/terminals/stats', { cache: 'no-store' });
+    if (!res.ok) return;
+    ({ cck, terminals: terminalProcStats } = await res.json());
+  } catch (_) {
+    return;
+  }
+  document.getElementById('terminal-manager-stats').textContent = cck ? `cck ${formatTerminalProc(cck)}` : '';
+  for (const el of document.querySelectorAll('#terminal-manager-body [data-proc]')) {
+    el.textContent = formatTerminalProc(terminalProcStats[el.dataset.proc]);
+  }
+}
+
 async function renderTerminalManager() {
   const body = document.getElementById('terminal-manager-body');
   let list = [];
@@ -11488,6 +12317,7 @@ async function renderTerminalManager() {
             <span class="terminal-manager-mode">${escapeHtml(t.mode)}</span>
             <span title="${escapeHtml(`pid ${t.pid}`)}">up ${formatDuration(Date.now() - t.startedAt)}</span>
             <span>${attached}</span>
+            <span class="terminal-manager-proc" data-proc="${escapeHtml(t.id)}" title="Memory and CPU of the claude process. Tools it runs are not counted. 100% CPU is one core.">${escapeHtml(formatTerminalProc(terminalProcStats[t.id]))}</span>
             <span class="terminal-manager-cwd" title="${escapeHtml(t.cwd)}">${escapeHtml(pathBasename(t.cwd))}</span>
           </div>
         </div>
@@ -11571,6 +12401,7 @@ function placeholderSession(id, spec) {
     name: spec.name || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
     dispatchGroup: spec.group || undefined,
     startedBy: spec.startedBy || undefined,
+    dispatched: spec.mode === 'dispatch' ? { parent: spec.startedBy || null } : undefined,
     project: spec.cwd,
     worktree: spec.worktree ? { repo: spec.cwd, name: spec.worktree === true ? 'new' : spec.worktree } : null,
     modifiedAt: new Date(spec.startedAt).toISOString(),
@@ -11666,12 +12497,14 @@ async function loadTerminals() {
   const res = await fetch('/api/terminals', { cache: 'no-store' });
   const list = (await res.json()).sessions || [];
   runningTerminals = new Set(list.map((t) => t.id));
+  pushTerminalClaims();
   renderActivityChip();
   return list;
 }
 
 function setRunningTerminals(ids) {
   runningTerminals = new Set(ids);
+  pushTerminalClaims();
   if (ids.some((id) => !sessions.some((s) => s.id === id))) fetchSessions(false).catch(() => {});
   else renderSessionViews();
   renderActivityChip();
@@ -12234,7 +13067,12 @@ fetch('/api/config')
   })
   .catch(() => {})
   .then(restorePendingSessions)
-  .then(() => fetchSessions())
+  .then(() =>
+    fetchSessions(
+      true,
+      urlState.projectView ? null : urlState.session || (lastView?.view === 'session' ? lastView.session : null),
+    ),
+  )
   .then(async () => {
     if (urlState.projectView) {
       try {
@@ -12315,7 +13153,11 @@ const hub = ClaudeHub.connect({
   }),
 });
 
-hub.onActive((active) => onHubActive(active));
+hub.onActive((active) => {
+  onHubActive(active);
+  pushTerminalClaims();
+});
+hub.onStatus(pushTerminalClaims);
 
 // session.changed goes out once the switch settles, so arrowing through the list sends one event.
 let publishTimer = 0;