claude-code-kanban 5.2.0 → 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();
@@ -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 =
@@ -2043,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';
@@ -2258,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);
@@ -2271,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;
@@ -2890,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) {
@@ -3400,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)),
     );
@@ -3462,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() {
@@ -3478,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';
@@ -3787,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();
@@ -3796,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
@@ -3941,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) {
@@ -3970,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
                 ? (
@@ -3984,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>
       `;
@@ -4545,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.
@@ -4571,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';
@@ -4655,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';
@@ -4664,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) {
@@ -4673,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
@@ -4712,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
@@ -4732,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);
@@ -5349,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>
 
         ${
@@ -5380,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);
 
@@ -5439,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);
     }
   };
 
@@ -5449,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();
 }
@@ -5488,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);
   };
 }
 
@@ -5504,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);
@@ -6463,11 +6605,21 @@ function dismissSessionFromList(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 (targetIdx >= 0) {
+    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()));
@@ -6483,16 +6635,28 @@ function dismissSessionFromList(sid) {
   }
 }
 
-async function dismissStickySession(sid) {
+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 ok = await confirmModal({
-    title: 'Remove Sticky Pin',
-    message: `"${session ? sessionDisplayName(session) : sid.slice(0, 8)}" has a sticky pin. Remove the pin and dismiss the session?`,
-    okLabel: 'Unpin and dismiss',
-  });
-  if (!ok) return;
-  unpinSession(sid);
-  dismissSessionFromList(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 = [
@@ -6678,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.
@@ -6829,7 +6994,7 @@ document.addEventListener('keydown', (e) => {
   if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'd') {
     e.preventDefault();
     if (!contextSid) return;
-    (stickySessionIds.has(contextSid) ? dismissStickySession : dismissSessionFromList)(contextSid);
+    dismissSession(contextSid);
     return;
   }
   if (e.code === 'KeyC' && e.shiftKey && !e.altKey && !e.metaKey) {
@@ -6894,9 +7059,11 @@ document.addEventListener('keydown', (e) => {
 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;
@@ -6906,7 +7073,7 @@ let reviewHoverAt = null;
 let reviewHoverFrame = 0;
 
 function reviewKey(sessionId, source) {
-  return `${sessionId}|${source.kind}|${source.path ? canonicalPath(source.path) : source.label}`;
+  return `${sessionId}|${source.kind}|${source.path ? canonicalPath(source.path) : source.id || source.label}`;
 }
 
 function reviewItems() {
@@ -6914,8 +7081,18 @@ function reviewItems() {
 }
 
 // `context(range)` adds view-specific citation fields to a comment on the host DOM;
-// `onSent()` runs after a batch is delivered.
-function mountReview({ contentEl, panelEl, hostEl, source, frame, context, onSent, sessionId = currentSessionId }) {
+// `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();
@@ -6928,6 +7105,7 @@ function mountReview({ contentEl, panelEl, hostEl, source, frame, context, onSen
     source,
     frame,
     context,
+    onComment,
     onSent,
     sessionId,
     key,
@@ -6940,6 +7118,7 @@ function mountReview({ contentEl, panelEl, hostEl, source, frame, context, onSen
   }
   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 });
@@ -7068,12 +7247,14 @@ function reviewBridge(textBefore, headingBefore, rangeAt) {
   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){background-color:rgba(240,180,41,.7)}';
+      '::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 }, '*');
@@ -7143,6 +7324,10 @@ function reviewBridge(textBefore, headingBefore, rangeAt) {
       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);
@@ -7172,12 +7357,16 @@ function reviewPopEl() {
 
 function placeReviewPop(el, r) {
   el.style.left = `${Math.max(8, Math.min(r.left, window.innerWidth - el.offsetWidth - 8))}px`;
-  const below = r.bottom + 6;
-  el.style.top = `${below + el.offsetHeight > window.innerHeight ? Math.max(8, r.top - el.offsetHeight - 6) : below}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 = '';
@@ -7198,17 +7387,25 @@ function showReviewOffer(picked) {
   const el = reviewPopEl();
   reviewPopMode = 'offer';
   el.className = 'visible offer';
-  el.innerHTML = `<button type="button" class="review-offer-btn">Comment</button>`;
+  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';
-  el.innerHTML = `<div class="review-pop-quote">${escapeHtml(picked.quote.slice(0, 200))}</div>
-    <textarea rows="3" placeholder="Comment (Ctrl+Enter to add)"></textarea>
+  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 = () => {
@@ -7258,6 +7455,7 @@ function addReviewComment(picked, comment) {
   items.sort((a, b) => a.pos - b.pos);
   closeReviewPop();
   renderReviewPanel();
+  activeReview.onComment?.();
 }
 
 function unmarkReviewItem(c) {
@@ -8752,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
@@ -8807,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;
@@ -9461,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
@@ -9642,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();
@@ -10198,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() {
@@ -11175,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() {
@@ -11259,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() {
@@ -11280,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;
@@ -11364,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;
@@ -11409,8 +11636,7 @@ function promptAwaitsUser(sessionId) {
 
 function onTerminalShown(focus = true) {
   requestAnimationFrame(() => {
-    fitTerminal();
-    repaintTerminal();
+    terminalFrameSend('refresh');
     if (focus) focusTerminalPane();
   });
 }
@@ -11418,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() {
@@ -11477,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));
 }
@@ -11621,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) {
@@ -11687,6 +11943,7 @@ function clearTerminalSlow() {
   clearTimeout(terminalSlowTimer);
   terminalSlowTimer = null;
   document.getElementById('terminal-boot').classList.remove('slow');
+  pushTerminalClaims();
 }
 
 function terminalConnectSlow() {
@@ -11715,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.
@@ -11758,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) {
@@ -11782,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) {
@@ -11923,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);
@@ -11932,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');
@@ -11974,7 +12218,7 @@ function onTerminalMessage(sessionId, msg) {
             ['fork', 'Fork'],
             ['shell', 'Shell'],
           ],
-      clean ? '' : terminalTail(6),
+      clean ? '' : tail,
     );
   } else if (msg.t === 'error') {
     hideTerminalBoot();
@@ -12004,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 = [];
@@ -12043,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>
@@ -12222,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();
@@ -12876,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;