agentgui 1.0.959 → 1.0.961

package/site/app/js/app.js

@@ -5,6 +5,12 @@ installStyles().catch(() => {});
 
 const { AppShell, WorkspaceShell, WorkspaceRail, Topbar, Crumb, Side, Status, Chat, ChatComposer, AgentChat, ConversationList, SessionDashboard, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, Icon, EventList, Spinner, Alert, FileGrid, FileSkeleton, sortFiles, FileToolbar, RootsPicker, BreadcrumbPath, EmptyState, FileViewer, FilePreviewPane, FilePreviewCode, FilePreviewText, FilePreviewMedia, ThemeToggle, ContextPane, PromptDialog, ConfirmDialog, DropZone, UploadProgress, FilterPills, SessionMeta } = C;
 
+// One duration/bytes vocabulary across every surface: prefer the kit's shared
+// formatters (exported alongside the components), fall back to the local
+// equivalents so the app keeps working against an older vendored kit build.
+const fmtDuration = C.fmtDuration || ((ms) => humanizeMs(ms));
+const fmtBytes = C.fmtBytes || ((n) => (Math.round((n || 0) / 102.4) / 10) + ' KB');
+
 const state = {
   backend: B.getBackend(),
   backendDraft: B.getBackend(),
@@ -31,7 +37,7 @@ const state = {
   showSubagents: false,
   sessionsLimit: 60,
   projectFilter: '',
-  live: { es: null, connected: false, lastEventTs: 0, error: null, eventCount: 0, reconnects: 0 },
+  live: { es: null, connected: false, lastEventTs: 0, error: null, eventCount: 0, reconnects: 0, stopping: new Set(), clockSkew: null },
   active: [],
   activeTimer: null,
   eventsLimit: 300,   // how many of the most-recent events to render; grows via "load older"
@@ -84,6 +90,9 @@ function writeHash({ push = false } = {}) {
 function fmtRelTime(ts) {
   if (!ts) return '';
   const s = Math.round((Date.now() - ts) / 1000);
+  // Clamp negative spans (server clock ahead of the client) to "just now" -
+  // "-12s ago" is clock skew, not information.
+  if (s <= 0) return 'just now';
   if (s < 60) return s + 's ago';
   if (s < 3600) return Math.round(s/60) + 'm ago';
   if (s < 86400) return Math.round(s/3600) + 'h ago';
@@ -104,6 +113,18 @@ function scheduleRender() {
 let streamRenderScheduled = false;
 function scheduleStreamRender() {
   if (streamRenderScheduled) return;
+  // Don't wipe an active text selection inside the streaming thread: a
+  // re-render replaces the live bubble's text nodes every frame, destroying a
+  // select-and-copy in progress. The stream's settle path (finally) still
+  // renders unconditionally, so nothing is lost - rendering just pauses while
+  // the selection is held.
+  try {
+    const sel = document.getSelection();
+    if (sel && !sel.isCollapsed && sel.anchorNode) {
+      const node = sel.anchorNode.nodeType === 1 ? sel.anchorNode : sel.anchorNode.parentElement;
+      if (node && node.closest && node.closest('.agentchat-thread, .chat-thread')) return;
+    }
+  } catch {}
   streamRenderScheduled = true;
   requestAnimationFrame(() => {
     streamRenderScheduled = false;
@@ -241,7 +262,11 @@ function navTo(tab, { writeHash: doWriteHash = true, push = true } = {}) {
   // Live history SSE feeds both the History tab (event log) and the Live
   // dashboard (per-session activity tally + stream-health signal); open it on
   // either, close it when leaving both. Active-chat polling runs globally.
-  const wantsStream = (t) => t === 'history' || t === 'live';
+  // The chat tab keeps the stream too while a chat is busy or sessions are in
+  // flight, so the rail's counters/timestamps don't freeze on the very tab
+  // where the streaming happens.
+  const wantsStream = (t) => t === 'history' || t === 'live'
+    || (t === 'chat' && (state.chat.busy || (Array.isArray(state.active) && state.active.length > 0)));
   if (wantsStream(tab)) {
     if (tab === 'history') refreshHistory();
     openLiveStream();
@@ -296,13 +321,22 @@ function syncAriaCurrent() {
 // re-renders every row on each render). Only re-render when the set actually
 // changed (or while on the live tab, where elapsed advances every second).
 function activeSig(list) {
-  return (Array.isArray(list) ? list : []).map(a => a.sessionId + ':' + (a.model || '') + ':' + (a.startedAt || '')).sort().join('|');
+  // claudeSessionId arrives mid-turn (streaming_session) - it must be part of
+  // the signature so the rail/dashboard re-render when the real sid lands.
+  return (Array.isArray(list) ? list : []).map(a => a.sessionId + ':' + (a.claudeSessionId || '') + ':' + (a.model || '') + ':' + (a.startedAt || '')).sort().join('|');
 }
 async function refreshActive() {
   let next;
   try { next = await B.listActiveChats(state.backend); } catch { return; }
   const changed = activeSig(next) !== activeSig(state.active);
   state.active = next;
+  // A stopping sid that left the active set has genuinely stopped - clear it
+  // so the per-card 'stopping' state resolves.
+  const st = state.live.stopping;
+  if (st && st.size) {
+    const present = new Set(next.map(a => a.sessionId));
+    for (const sid of [...st]) if (!present.has(sid)) st.delete(sid);
+  }
   // The live tab needs the steady elapsed tick regardless; elsewhere only
   // re-render when the active set genuinely changed.
   if (changed || state.tab === 'live') render();
@@ -333,8 +367,16 @@ function startLiveTick() {
   }, 1000);
 }
 async function stopActiveChat(sid) {
+  const st = state.live.stopping = state.live.stopping || new Set();
+  if (st.has(sid)) return;   // re-entry guard: one cancel per sid in flight
+  st.add(sid);
+  render();
   try { await B.cancelChat(state.backend, sid); } catch {}
-  refreshActive();
+  // Optimistically drop the row so the card doesn't read 'running' for up to
+  // 3s after the click; the immediate refresh confirms.
+  state.active = (Array.isArray(state.active) ? state.active : []).filter(a => a.sessionId !== sid);
+  await refreshActive();
+  render();
 }
 
 function openLiveStream() {
@@ -344,16 +386,27 @@ function openLiveStream() {
   try {
     state.live.es = B.streamHistory(state.backend, (kind, data) => {
       state.live.lastEventTs = Date.now();
-      state.live.eventCount++;
+      // Only real event frames count - hello/error frames inflated the number.
+      if (kind === 'event') state.live.eventCount++;
       if (kind === 'hello') {
         if (!state.live.connected) state.live.connected = true;
-        if (state.live.error) { state.live.error = null; state.live.reconnects++; }
+        if (state.live.error) {
+          state.live.error = null; state.live.reconnects++;
+          // After a disconnect there is no way to know what was missed or
+          // replayed: re-baseline. Drop the tally (the index owns truth) and
+          // refetch the session list so counters never double-count a replay.
+          if (state.live.tally) state.live.tally.clear();
+          debouncedRefreshHistory();
+        }
       } else if (kind === 'event' && data) {
         // ccsniff's stream frame is { sid, payload: <flattened event> } - the
         // real event (type/isError/i/ts) lives under .payload, not on the
         // wrapper. Reading the wrapper gave every counter `undefined`, so live
         // tool/error tallies never moved. Route by data.sid, read ev for the rest.
         const ev = data.payload || data;
+        // Estimate server-vs-client clock skew once from the first near-realtime
+        // event; staleness comparisons apply it so pure skew never reads stale.
+        if (state.live.clockSkew == null && ev.ts) state.live.clockSkew = Date.now() - ev.ts;
         if (state.selectedSid && data.sid === state.selectedSid) {
           // Dedupe against the snapshot/prior pushes by event index - a
           // reconnect or overlap would otherwise double-append the same event.
@@ -369,18 +422,32 @@ function openLiveStream() {
         // exists yet.
         if (data.sid) {
           state.live.tally = state.live.tally || new Map();
-          const t = state.live.tally.get(data.sid) || { events: 0, tools: 0, errors: 0, last: 0 };
-          t.events++; t.last = ev.ts || Date.now();
-          if (ev.type === 'tool_use') t.tools++;
-          if (ev.isError) t.errors++;
+          const t = state.live.tally.get(data.sid) || { events: 0, tools: 0, errors: 0, last: 0, maxI: null, toolRunning: false, toolName: '', lastErrorTs: 0 };
+          // Dedupe by event index: a reconnect replay/overlap re-delivers the
+          // same events and would double-count tools/errors otherwise.
+          const dup = ev.i != null && t.maxI != null && ev.i <= t.maxI;
+          if (!dup) {
+            if (ev.i != null) t.maxI = ev.i;
+            t.events++; t.last = ev.ts || Date.now();
+            // Per-sid running-tool truth: an unresolved tool_use means this
+            // session is busy-with-tool, not stalled - for EVERY session, not
+            // only the one resumed in the in-page chat.
+            if (ev.type === 'tool_use') { t.tools++; t.toolRunning = true; t.toolName = ev.tool || ev.name || ''; }
+            if (ev.type === 'tool_result') { t.toolRunning = false; t.toolName = ''; }
+            if (ev.isError) { t.errors++; t.lastErrorTs = t.last; }
+          }
           state.live.tally.set(data.sid, t);
         }
         const sess = state.sessionsBySid ? state.sessionsBySid.get(data.sid) : null;
         if (sess) {
-          sess.events = (sess.events || 0) + 1;
-          sess.last = ev.ts || Date.now();
-          if (ev.type === 'tool_use') sess.tools = (sess.tools || 0) + 1;
-          if (ev.isError) sess.errors = (sess.errors || 0) + 1;
+          const dupS = ev.i != null && sess._maxI != null && ev.i <= sess._maxI;
+          if (!dupS) {
+            if (ev.i != null) sess._maxI = ev.i;
+            sess.events = (sess.events || 0) + 1;
+            sess.last = ev.ts || Date.now();
+            if (ev.type === 'tool_use') sess.tools = (sess.tools || 0) + 1;
+            if (ev.isError) { sess.errors = (sess.errors || 0) + 1; sess.lastErrorTs = sess.last; }
+          }
         } else {
           // Unknown session: a burst of events for a new session would trigger
           // a full session-list refetch per event - debounce it into one. The
@@ -424,9 +491,11 @@ function closeLiveStream() {
 const SHORTCUTS = [
   { keys: 'g then c / h / f / l / s', desc: 'switch tabs (chat / history / files / live / settings)' },
   { keys: 'n', desc: 'new chat (on the chat tab)' },
-  { keys: '/', desc: 'focus search or composer' },
+  { keys: '/', desc: 'focus search / filter / composer' },
+  { keys: 'Ctrl/Cmd+Shift+L', desc: 'focus the composer from anywhere' },
+  { keys: 'Enter / Shift+Enter', desc: 'send / new line (in the composer)' },
   { keys: '?', desc: 'show shortcuts' },
-  { keys: 'Esc', desc: 'blur the focused field' },
+  { keys: 'Esc', desc: 'close overlays, cancel confirms, stop generation, or blur the field' },
 ];
 
 function view() {
@@ -436,7 +505,7 @@ function view() {
     ? (state.live.error
         ? state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
         : (liveActive ? 'live · ' + state.live.eventCount : (state.live.connected ? 'live' : 'connecting…')))
-    : (ok ? (state.health.ws === 'reconnecting' ? 'ws reconnecting' : 'connected') : 'offline');
+    : (ok ? (state.health.ws === 'reconnecting' ? 'connecting' : 'connected') : 'offline');
   const dotLive = state.tab === 'history' ? (liveActive || state.live.connected) : ok;
   // The status dot is drawn entirely by CSS (.status-dot::before) - a small
   // colored disc, real product design, not a text glyph. State drives its colour
@@ -454,6 +523,7 @@ function view() {
   // only the dot: on history/chat it names the selected session/agent, on files
   // the current dir, on live the live count, on settings "configuration".
   let crumbLeaf = '';
+  let crumbTrail = [];
   if (state.tab === 'history') {
     const sel = state.selectedSid && (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
     crumbLeaf = state.selectedSid
@@ -462,13 +532,17 @@ function view() {
   } else if (state.tab === 'chat') {
     crumbLeaf = state.selectedAgent ? (agentById(state.selectedAgent)?.name || state.selectedAgent) : 'no agent';
   } else if (state.tab === 'files') {
-    crumbLeaf = truncate(state.files?.path || 'files', 24, 64);
+    // Location reads as hierarchy (parents / dir), not a mid-path ellipsis.
+    const segs = state.files?.segments || [];
+    crumbLeaf = segs.length ? truncate(segs[segs.length - 1], 18, 32) : 'files';
+    crumbTrail = segs.slice(Math.max(0, segs.length - 3), segs.length - 1).map(s => truncate(s, 12, 20));
   } else if (state.tab === 'live') {
     crumbLeaf = 'live · ' + ((state.active && state.active.length) || 0);
   } else if (state.tab === 'settings') {
-    crumbLeaf = 'configuration';
+    // Same word as the rail item - location chrome must not fork vocabulary.
+    crumbLeaf = 'settings';
   }
-  const crumb = Crumb({ trail: [], leaf: crumbLeaf, right: [dot] });
+  const crumb = Crumb({ trail: crumbTrail, leaf: crumbLeaf, right: [dot] });
 
   const agentLabel = state.selectedAgent
     ? 'agent: ' + (agentById(state.selectedAgent)?.name || state.selectedAgent) + (state.selectedModel ? ' · ' + state.selectedModel : '')
@@ -509,12 +583,17 @@ function view() {
         turns: state.chat.messages.filter(m => m.role === 'user').length,
         cost: state.chat.totalCost || null,
       },
-      onSetCwd: () => { navTo('files'); },
+      // One affordance per action: the cwd row opens the SAME inline editor as
+      // the composer context line (it validates via /api/stat) instead of
+      // navigating away to the Files tab.
+      onSetCwd: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); },
     });
   } else if (state.tab === 'files' && state.files && state.files.preview && !isNarrow()) {
     pane = filePreviewPane();
   }
-  return WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow: isNarrow(), stableFrame: true });
+  // The chat tab manages its own --measure gutter, so it opts out of the content
+  // column padding; every other surface (files/live/history/settings) keeps it.
+  return WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow: isNarrow(), stableFrame: true, mainFlush: state.tab === 'chat' });
 }
 
 // The left workspace rail: brand, New chat action, and the primary view nav.
@@ -556,7 +635,9 @@ const DATE_GROUP_ORDER = ['Running', 'Today', 'Yesterday', 'This week', 'Earlier
 // chats are pinned to a "Running" section at the top (a live workspace surfaces
 // in-flight work first), the rest bucket by recency. Returns { items, groups }.
 function sessionGroups(sessionsView) {
-  const runningSids = new Set((Array.isArray(state.active) ? state.active : []).map(a => a.sessionId));
+  // Join on the REAL claude/ccsniff sid when known (chat.active rows carry the
+  // ephemeral chat- id; claudeSessionId lands once streaming_session arrives).
+  const runningSids = new Set((Array.isArray(state.active) ? state.active : []).map(a => a.claudeSessionId || a.sessionId));
   const buckets = new Map();
   for (const s of sessionsView) {
     const label = runningSids.has(s.sid) ? 'Running' : dateGroupLabel(s.last);
@@ -608,7 +689,7 @@ function sessionsColumn() {
   }
   const sessionsView = visibleSessions();
   const sliced = sessionsView.slice(0, state.sessionsLimit);
-  const runningSids = new Set((Array.isArray(state.active) ? state.active : []).map(a => a.sessionId));
+  const runningSids = new Set((Array.isArray(state.active) ? state.active : []).map(a => a.claudeSessionId || a.sessionId));
   const items = sliced.map((s) => ({
     sid: s.sid,
     title: projectLabel(s.title) || projectLabel(s.project) || s.sid,
@@ -636,7 +717,7 @@ function sessionsColumn() {
     onNew: () => { navTo('chat'); newChat(); },
     onSelect: (s) => { if (state.tab === 'chat') resumeInChat({ sid: s.sid }); else loadSession(s.sid); },
     loading: state.tab === 'history' && !state.sessions.length && !state.historyError,
-    loadingText: state.historySlow ? 'Indexing your Claude history - the first load can take a minute…' : undefined,
+    loadingText: state.historySlow ? 'Indexing your Claude history — the first load can take a minute…' : undefined,
     error: state.historyError,
     emptyText: 'No conversations yet',
   });
@@ -656,6 +737,10 @@ async function loadDir(dirPath, { fromHash = false } = {}) {
   state.files.loading = true; state.files.error = null; render();
   try {
     const j = await B.listDir(state.backend, dirPath || '');
+    // The filter text and show-more cap are per-directory state: keep them
+    // across an in-place refresh (same path after a mutation), reset them when
+    // the resolved directory actually changed.
+    if (j.path !== state.files.path) { state.files.filter = ''; state.files.shown = null; }
     state.files.path = j.path;
     state.files.segments = j.segments || [];
     state.files.entries = j.entries || [];
@@ -740,7 +825,12 @@ function openFileDialog(kind, file) {
   state.files.dialog = { kind, file: file || null, error: null, busy: false };
   render();
 }
-function closeFileDialog() { state.files.dialog = null; render(); }
+function closeFileDialog() {
+  // A mid-flight close would orphan the mutation's result and swallow its
+  // error - hold the dialog open until the operation settles.
+  if (state.files.dialog?.busy) { announce('still working - please wait'); return; }
+  state.files.dialog = null; render();
+}
 async function runFileMutation(fn, doneMsg) {
   const d = state.files.dialog;
   if (!d || d.busy) return;
@@ -751,6 +841,9 @@ async function runFileMutation(fn, doneMsg) {
     announce(doneMsg);
     await loadDir(state.files.path, { fromHash: true }); // refresh in place, no history entry
   } catch (e) {
+    // If the dialog detached anyway (e.g. state replaced), the error would be
+    // written onto a dead object and lost - announce it instead.
+    if (state.files.dialog !== d) { announce(fileMutationCopy(e)); render(); return; }
     d.busy = false; d.error = fileMutationCopy(e); render();
   }
 }
@@ -759,55 +852,101 @@ async function runFileMutation(fn, doneMsg) {
 async function uploadFiles(fileList) {
   const dir = state.files.path;
   if (!dir || !fileList || !fileList.length) return;
-  const items = Array.from(fileList).map((f) => ({ name: f.name, pct: 0, done: false, error: null, _file: f }));
-  state.files.uploads = items; render();
-  for (const it of items) {
-    try {
-      await B.uploadFile(state.backend, dir, it._file);
-      it.pct = 100; it.done = true;
-    } catch (e) {
-      it.error = fileMutationCopy(e);
+  const items = Array.from(fileList).map((f) => ({ name: f.name, pct: 0, done: false, error: null, status: null, _file: f, _dir: dir }));
+  // Concurrent drops APPEND to the shared queue (a second drop mid-upload must
+  // not replace the first batch's progress/errors); one running loop drains it.
+  state.files.uploads = (state.files.uploads || []).concat(items);
+  render();
+  if (state.files.uploading) return;
+  state.files.uploading = true;
+  try {
+    let it;
+    while ((it = (state.files.uploads || []).find(i => !i.done && !i.error && !i._started))) {
+      it._started = true;
+      try {
+        await B.uploadFile(state.backend, it._dir, it._file);
+        it.pct = 100; it.done = true;
+      } catch (e) {
+        it.status = e.status || null;
+        it.error = fileMutationCopy(e);
+      }
+      render();
     }
-    render();
+  } finally {
+    state.files.uploading = false;
   }
   announce('upload finished');
-  await loadDir(dir, { fromHash: true });
+  await loadDir(state.files.path, { fromHash: true });
   // Keep error rows visible; clear the list entirely when everything landed.
-  if (!items.some(i => i.error)) state.files.uploads = null;
+  if (!(state.files.uploads || []).some(i => i.error)) state.files.uploads = null;
+  render();
+}
+// 'replace' on a 409 row: re-PUT the same file with overwrite=1.
+async function retryUploadOverwrite(it) {
+  if (!it || it._retrying || !it._file) return;
+  it._retrying = true; it.error = null; it.status = null; render();
+  try {
+    await B.uploadFile(state.backend, it._dir, it._file, true);
+    it.pct = 100; it.done = true;
+  } catch (e) {
+    it.status = e.status || null;
+    it.error = fileMutationCopy(e);
+  }
+  it._retrying = false;
+  await loadDir(state.files.path, { fromHash: true });
+  if (!(state.files.uploads || []).some(i => i.error)) state.files.uploads = null;
+  render();
+}
+function dismissUpload(it) {
+  const ups = state.files.uploads || [];
+  const i = ups.indexOf(it);
+  if (i >= 0) ups.splice(i, 1);
+  if (!ups.length) state.files.uploads = null;
   render();
 }
 // The active file dialog (rename/delete/mkdir) as a kit modal, or null.
 function fileDialog() {
   const d = state.files && state.files.dialog;
   if (!d) return null;
-  const err = d.error ? h('p', { key: 'fderr', class: 'lede', role: 'alert' }, d.error) : null;
+  // error/busy live INSIDE the kit dialog (the modal overlay sits above page
+  // flow, so a sibling alert was invisible and outside the focus trap).
   if (d.kind === 'rename') {
-    return h('div', { key: 'fdlg' }, err, PromptDialog({
+    return PromptDialog({
       title: 'Rename ' + d.file.name, value: d.file.name, placeholder: 'new name',
+      error: d.error || null, busy: !!d.busy,
       confirmLabel: d.busy ? 'renaming...' : 'rename', cancelLabel: 'cancel',
       onCancel: closeFileDialog,
-      onConfirm: (v) => { if (v && v !== d.file.name) runFileMutation(() => B.renameEntry(state.backend, d.file.path, v), 'renamed to ' + v); },
-    }));
+      onConfirm: (v) => {
+        // Every confirm press produces visible feedback - never a silent no-op.
+        if (!v || v === d.file.name) { d.error = 'enter a different name'; render(); return; }
+        runFileMutation(() => B.renameEntry(state.backend, d.file.path, v), 'renamed to ' + v);
+      },
+    });
   }
   if (d.kind === 'delete') {
     const isDir = d.file.type === 'dir';
-    return h('div', { key: 'fdlg' }, err, ConfirmDialog({
+    return ConfirmDialog({
       title: 'Delete ' + d.file.name,
       message: isDir
         ? 'Delete this folder and everything inside it? This cannot be undone.'
         : 'Delete this file? This cannot be undone.',
+      error: d.error || null, busy: !!d.busy,
       confirmLabel: d.busy ? 'deleting...' : 'delete', cancelLabel: 'cancel', destructive: true,
       onCancel: closeFileDialog,
       onConfirm: () => runFileMutation(() => B.deleteEntry(state.backend, d.file.path, isDir), 'deleted ' + d.file.name),
-    }));
+    });
   }
   if (d.kind === 'mkdir') {
-    return h('div', { key: 'fdlg' }, err, PromptDialog({
+    return PromptDialog({
       title: 'New folder', value: '', placeholder: 'folder name',
+      error: d.error || null, busy: !!d.busy,
       confirmLabel: d.busy ? 'creating...' : 'create', cancelLabel: 'cancel',
       onCancel: closeFileDialog,
-      onConfirm: (v) => { if (v) runFileMutation(() => B.makeDir(state.backend, state.files.path, v), 'created ' + v); },
-    }));
+      onConfirm: (v) => {
+        if (!v) { d.error = 'enter a folder name'; render(); return; }
+        runFileMutation(() => B.makeDir(state.backend, state.files.path, v), 'created ' + v);
+      },
+    });
   }
   return null;
 }
@@ -1005,7 +1144,17 @@ function filesMain() {
     PageHeader({ compact: true, title: 'Files', lede: 'Browse and manage the server filesystem within the allowed roots. Click a folder to open it; pick one as the chat working directory.' }),
     rootsRow ? h('div', { key: 'froots' }, rootsRow) : null,
     h('div', { key: 'ftb' }, toolbar),
-    (f.uploads && f.uploads.length) ? h('div', { key: 'fup' }, UploadProgress({ items: f.uploads })) : null,
+    (f.uploads && f.uploads.length) ? h('div', { key: 'fup' }, UploadProgress({
+      // Recovery affordances per row: 'replace' on a name collision (409),
+      // dismiss on any error row (errors otherwise persist until the next batch).
+      items: f.uploads.map((it) => (it.error && it.status === 409 && !it._retrying)
+        ? { ...it, actions: [{ label: 'replace', onClick: () => retryUploadOverwrite(it) }] }
+        : it),
+      onDismiss: (item, i) => {
+        const src = (state.files.uploads || [])[i];
+        if (src && src.error) dismissUpload(src);
+      },
+    })) : null,
     h('div', { key: 'fbody' }, droppableBody),
     fileDialog(),
     // Inline pane handles wide-screen preview; the modal is only the <900px
@@ -1054,10 +1203,24 @@ function armStopSelected() {
 }
 
 // Stop every in-flight chat at once (the dashboard "stop all" bulk control).
+// Awaits every cancel, reports partial failure, and returns the sids that
+// actually stopped so callers only clear those from a selection.
 async function stopAllActive(sessions) {
   const sids = (Array.isArray(sessions) ? sessions : (state.active || [])).map(s => s.sid || s.sessionId).filter(Boolean);
-  await Promise.all(sids.map(sid => B.cancelChat(state.backend, sid).catch(() => {})));
-  refreshActive();
+  if (!sids.length) return [];
+  const st = state.live.stopping = state.live.stopping || new Set();
+  for (const sid of sids) st.add(sid);
+  render();
+  const results = await Promise.allSettled(sids.map(sid => B.cancelChat(state.backend, sid)));
+  const okSids = sids.filter((sid, i) => results[i].status === 'fulfilled');
+  const failed = sids.length - okSids.length;
+  state.live.bulkStopError = failed
+    ? failed + ' session' + (failed === 1 ? '' : 's') + ' did not stop - try again'
+    : null;
+  announce('stopped ' + okSids.length + ' of ' + sids.length + ' sessions');
+  await refreshActive();
+  render();
+  return okSids;
 }
 
 // How long a session can go without activity (and without a running tool)
@@ -1074,71 +1237,156 @@ function liveMain() {
   const tally = state.live.tally || new Map();
   const now = Date.now();
   // Live-stream health: connected (recent event), connecting (opened, no event
-  // yet), or lost (errored). Feeds the dashboard header so "connected, 0 running"
-  // still tells the user the dashboard is listening.
-  const streamState = state.live.error ? 'lost' : (state.live.connected ? 'connected' : 'connecting');
+  // yet), or offline (errored - one connection vocabulary across the GUI).
+  const streamState = state.live.error ? 'offline' : (state.live.connected ? 'connected' : 'connecting');
+  const stoppingSet = state.live.stopping || new Set();
+  // Clock-skew-corrected "now" in server-timestamp terms, so pure skew never
+  // derives a session stale.
+  const nowS = now - (state.live.clockSkew || 0);
   let sessions = (Array.isArray(state.active) ? state.active : []).map((r) => {
-    // Activity tally: prefer the history-index row; fall back to the per-sid live
-    // tally so a brand-new chat not yet in the index still shows motion (W4).
-    const sess = bySid.get(r.sessionId);
-    const t = tally.get(r.sessionId);
-    const events = sess && sess.events != null ? sess.events : (t ? t.events : null);
-    const tools = sess && sess.tools != null ? sess.tools : (t ? t.tools : 0);
-    const errors = sess && sess.errors != null ? sess.errors : (t ? t.errors : 0);
-    const lastTs = (sess && sess.last) || (t && t.last) || 0;
+    // The history index + SSE tally are keyed by claude's REAL session id, not
+    // the ephemeral chat- id chat.active returns; join on the real one once
+    // streaming_session has landed. The ephemeral id stays the card sid (it is
+    // what chat.cancel takes).
+    const realSid = r.claudeSessionId || r.sessionId;
+    const sess = bySid.get(realSid);
+    const t = tally.get(realSid);
+    // Counters are MONOTONIC within a session: the index refresh lags the JSONL
+    // flush, so take the max of index and live tally - never regress.
+    const events = Math.max(sess?.events ?? -1, t?.events ?? -1);
+    const tools = Math.max(sess?.tools || 0, t?.tools || 0);
+    const errors = Math.max(sess?.errors || 0, t?.errors || 0);
+    const lastTs = Math.max(sess?.last || 0, t?.last || 0);
+    const lastErrorTs = Math.max(sess?.lastErrorTs || 0, t?.lastErrorTs || 0);
     const counterBits = [];
-    if (events != null) counterBits.push(events + ' ev');
+    if (events >= 0) counterBits.push(events + ' ev');
     if (tools) counterBits.push(tools + ' tools');
     if (errors) counterBits.push(errors + ' err');
-    // Current tool: while a turn is busy in the in-page chat for this sid, the
-    // trailing assistant message carries a running tool part.
+    // Current tool: the in-page chat knows its own running tool part; every
+    // OTHER session gets it from the per-sid SSE tally (an unresolved tool_use
+    // means busy-with-tool, not stalled).
     let currentTool = '';
-    if (state.chat.resumeSid === r.sessionId && state.chat.busy) {
+    if (state.chat.resumeSid === realSid && state.chat.busy) {
       const msgs = state.chat.messages || [];
       const last = msgs[msgs.length - 1];
       const running = last && Array.isArray(last.parts) && last.parts.filter(p => p && p.kind === 'tool' && p.status === 'running').slice(-1)[0];
       if (running) currentTool = running.name || '';
     }
-    // W2: stale = no recent activity AND no running tool. Errors win over stale.
+    if (!currentTool && t && t.toolRunning) currentTool = t.toolName || 'tool';
+    // Status reflects CURRENT reality: error only when an error is recent (a
+    // recovered tool error hours ago is history, kept in the counter chip);
+    // stale = no recent activity AND no running tool.
     let status = 'running';
-    if (errors) status = 'error';
-    else if (!currentTool && lastTs && (now - lastTs) > STALE_AFTER_MS) status = 'stale';
+    if (lastErrorTs && (nowS - lastErrorTs) <= STALE_AFTER_MS) status = 'error';
+    else if (!currentTool && lastTs && (nowS - lastTs) > STALE_AFTER_MS) status = 'stale';
+    const startedTs = r.startedAt || 0;
+    const elapsedMs = startedTs ? Math.max(0, now - startedTs) : 0;
+    // One title source shared with the rails: projectLabel(title|project)|sid.
+    const title = sess
+      ? (projectLabel(sess.title) || projectLabel(sess.project) || realSid)
+      : (r.claudeSessionId ? realSid : '');
     return {
       sid: r.sessionId,
+      realSid,
+      title: title || undefined,
       agent: agentById(r.agentId)?.name || r.agentId || 'agent',
       model: r.model || '',
       cwd: r.cwd ? r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '',
-      elapsed: r.startedAt ? Math.round((now - r.startedAt) / 1000) + 's' : '',
+      elapsed: elapsedMs ? fmtDuration(elapsedMs) : '',
+      elapsedMs,
+      startedTs,
       counter: counterBits.length ? counterBits.join(' · ') : null,
-      lastActivity: lastTs ? fmtRelTime(lastTs) : '',
+      lastActivity: lastTs ? fmtRelTime(lastTs + (state.live.clockSkew || 0)) : '',
+      lastTs,
+      errors,
       currentTool,
       status,
+      stopping: stoppingSet.has(r.sessionId),
+      // Arrival cue for a freshly-started session (a brief enter animation).
+      isNew: startedTs ? (now - startedTs < 3000) : false,
+      // Surface the in-page chat's own running cost on its card (the only
+      // session we hold a reliable per-session cost for; others omit it).
+      cost: (state.chat.resumeSid && (r.claudeSessionId === state.chat.resumeSid || r.sessionId === state.chat.resumeSid))
+        ? (state.chat.totalCost || null) : null,
     };
   });
+  // External sessions (a claude CLI in a terminal, etc.): live SSE motion that
+  // belongs to no agentgui-spawned chat. The page promises EVERY in-flight
+  // session, so render them as read-only cards (we own no process to stop).
+  const ownedReal = new Set(sessions.map(s => s.realSid));
+  for (const [sid, t] of tally) {
+    if (ownedReal.has(sid)) continue;
+    if (!t.last || (nowS - t.last) >= STALE_AFTER_MS) continue;
+    const sess = bySid.get(sid);
+    const events = Math.max(sess?.events ?? -1, t.events ?? -1);
+    const tools = Math.max(sess?.tools || 0, t.tools || 0);
+    const errors = Math.max(sess?.errors || 0, t.errors || 0);
+    const lastErrorTs = Math.max(sess?.lastErrorTs || 0, t.lastErrorTs || 0);
+    const counterBits = [];
+    if (events >= 0) counterBits.push(events + ' ev');
+    if (tools) counterBits.push(tools + ' tools');
+    if (errors) counterBits.push(errors + ' err');
+    sessions.push({
+      sid,
+      realSid: sid,
+      external: true,
+      readOnly: true,
+      title: sess ? (projectLabel(sess.title) || projectLabel(sess.project) || sid) : sid,
+      agent: 'external session',
+      model: '',
+      cwd: sess && sess.cwd ? sess.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '',
+      elapsed: '',
+      elapsedMs: 0,
+      startedTs: 0,
+      counter: counterBits.length ? counterBits.join(' · ') : null,
+      lastActivity: fmtRelTime(t.last + (state.live.clockSkew || 0)),
+      lastTs: t.last,
+      errors,
+      currentTool: t.toolRunning ? (t.toolName || 'tool') : '',
+      status: (lastErrorTs && (nowS - lastErrorTs) <= STALE_AFTER_MS) ? 'error' : 'running',
+      stopping: false,
+    });
+  }
   // W12: in-dir filter + errors-only toggle.
   const lv = state.live;
   if (lv.errorsOnly) sessions = sessions.filter(s => s.status === 'error');
   if (lv.filter) {
     const q = lv.filter.toLowerCase();
-    sessions = sessions.filter(s => (s.agent + ' ' + s.model + ' ' + s.cwd).toLowerCase().includes(q));
+    sessions = sessions.filter(s => ((s.title || '') + ' ' + s.agent + ' ' + s.model + ' ' + s.cwd).toLowerCase().includes(q));
   }
-  // W3/W12: sort. Default floats error then stale to the front (triage surface).
+  // Sort: real numeric comparisons (recency/elapsed/error count), owned before
+  // external, and a deterministic sid tiebreaker so equal-rank cards never
+  // reshuffle with the server's return order.
   const sortKey = lv.sort || 'status';
   sessions.sort((a, b) => {
-    if (sortKey === 'elapsed') return (parseInt(b.elapsed) || 0) - (parseInt(a.elapsed) || 0);
-    if (sortKey === 'activity') return (a.lastActivity ? 0 : 1) - (b.lastActivity ? 0 : 1);
-    if (sortKey === 'errors') return (a.status === 'error' ? 0 : 1) - (b.status === 'error' ? 0 : 1);
-    return (STATUS_RANK[a.status] ?? 9) - (STATUS_RANK[b.status] ?? 9);
+    let d = (a.external ? 1 : 0) - (b.external ? 1 : 0);
+    if (d) return d;
+    if (sortKey === 'elapsed') d = (b.elapsedMs || 0) - (a.elapsedMs || 0);
+    else if (sortKey === 'activity') d = (b.lastTs || 0) - (a.lastTs || 0);
+    else if (sortKey === 'errors') d = (b.errors || 0) - (a.errors || 0);
+    else d = (STATUS_RANK[a.status] ?? 9) - (STATUS_RANK[b.status] ?? 9);
+    return d || String(a.sid).localeCompare(String(b.sid));
   });
   const selected = lv.selected instanceof Set ? lv.selected : new Set();
+  // The in-page chat's card accent matches on the real sid, but the kit
+  // compares activeSid against card.sid (the ephemeral id for owned cards).
+  const activeCard = state.chat.resumeSid
+    ? sessions.find(s => s.realSid === state.chat.resumeSid)
+    : null;
   return [
     offlineBanner(),
+    lv.bulkStopError
+      ? Alert({ key: 'bulkstoperr', kind: 'warn', title: 'Some sessions did not stop',
+          children: [
+            h('span', { key: 'bsetxt' }, lv.bulkStopError + ' '),
+            Btn({ key: 'bsedismiss', onClick: () => { state.live.bulkStopError = null; render(); }, children: 'dismiss' })] })
+      : null,
     PageHeader({ compact: true, title: 'Live sessions', lede: 'Every in-flight agent session, managed at once. Stop, open, or jump to events per session.' }),
     SessionDashboard({
       sessions,
       offline,
       streamState,
-      activeSid: state.chat.resumeSid,            // W13
+      activeSid: activeCard ? activeCard.sid : state.chat.resumeSid,   // W13
       sort: { value: sortKey, onChange: (v) => { state.live.sort = v; persistLivePrefs(); render(); } },
       filter: { value: lv.filter || '', placeholder: 'Filter sessions', onInput: (v) => { state.live.filter = v; render(); } },
       errorsOnly: !!lv.errorsOnly,
@@ -1150,26 +1398,39 @@ function liveMain() {
         if (set.has(s.sid)) set.delete(s.sid); else set.add(s.sid);
         state.live.selected = set; render();
       },
+      // Tri-state select-all over the currently-visible selectable sids.
+      onSelectAll: (sids) => {
+        const set = (state.live.selected instanceof Set) ? state.live.selected : new Set();
+        for (const sid of sids) set.add(sid);
+        state.live.selected = set; render();
+      },
+      onClearSelection: () => { state.live.selected = new Set(); render(); },
       // Two-step bulk stops: arm first, execute on the confirmed click.
       confirmingStopAll: !!lv.confirmingStopAll,
       confirmingStopSelected: !!lv.confirmingStopSelected,
       onArmStopAll: armStopAll,
       onArmStopSelected: armStopSelected,
-      onStopSelected: (sids) => {
+      onStopSelected: async (sids) => {
         state.live.confirmingStopSelected = false;
         clearTimeout(_stopSelArmTimer);
-        stopAllActive(sids.map(sid => ({ sid })));
-        state.live.selected = new Set();
+        // Await the cancels and only clear the sids that actually stopped, so
+        // a partially-failed bulk stop stays selected and visibly armed-again.
+        const ok = await stopAllActive(sids.map(sid => ({ sid })));
+        const sel = (state.live.selected instanceof Set) ? state.live.selected : new Set();
+        for (const sid of ok) sel.delete(sid);
+        state.live.selected = sel;
+        render();
       },
-      emptyText: 'No live sessions - start a chat or run a local agent.',
-      onStop: (s) => stopActiveChat(s.sid),
-      onStopAll: (all) => {
+      emptyText: 'No live sessions — start a chat or run a local agent.',
+      onStop: (s) => { if (!s.external) stopActiveChat(s.sid); },
+      onStopAll: async (all) => {
         state.live.confirmingStopAll = false;
         clearTimeout(_stopAllArmTimer);
-        stopAllActive(all);
+        await stopAllActive((all || []).filter(s => !s.external));
+        render();
       },
-      onOpen: (s) => { resumeInChat({ sid: s.sid }); },
-      onView: (s) => { navTo('history'); loadSession(s.sid); },
+      onOpen: (s) => { resumeInChat({ sid: s.realSid || s.sid }); },
+      onView: (s) => { navTo('history'); loadSession(s.realSid || s.sid); },
     }),
   ].filter(Boolean);
 }
@@ -1291,7 +1552,7 @@ function chatMain() {
     // than as a separate stacked Alert, so resume context reads as one block.
     banners.push(h('div', { key: 'rb', class: 'resume-banner', role: 'status' },
       h('span', { key: 'rbtxt', class: 'lede' },
-        'resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'
+        'next message continues session ' + state.chat.resumeSid.slice(0, 8) + '…'
         + (state.chat.resumeNote ? ' - ' + state.chat.resumeNote : '')),
       Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; state.chat.resumeNote = null; render(); }, children: 'clear' })));
   }
@@ -1303,12 +1564,30 @@ function chatMain() {
     banners.push(Alert({ key: 'confnew', kind: 'warn', title: 'Clear chat history?',
       children: [
         h('span', { key: 'cntxt' }, 'This cannot be undone. '),
-        Btn({ key: 'cnyes', danger: true, onClick: newChat, children: 'clear' }),
-        Btn({ key: 'cnno', onClick: () => { state.confirmingNewChat = false; render(); }, children: 'cancel' })] }));
+        Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes, clear chat' }),
+        Btn({ key: 'cnno', onClick: () => { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); }, children: 'cancel' })] }));
   }
   if (state.cwdError) {
     banners.push(Alert({ key: 'cwderr', kind: 'warn', title: 'Invalid working directory', children: state.cwdError }));
   }
+  if (state.chat.externalUpdate) {
+    banners.push(Alert({ key: 'xupd', kind: 'info', title: 'This conversation was updated in another tab',
+      children: [
+        h('span', { key: 'xutxt' }, 'Reload it to see the latest turns, or dismiss to keep this tab\'s view. '),
+        Btn({ key: 'xureload', disabled: state.chat.busy, onClick: () => {
+          if (state.chat.busy) return;
+          state.chat.externalUpdate = false;
+          state.chat.messages = []; state.chat.resumeSid = null; state.chat.totalCost = 0;
+          restoreChat(); render();
+        }, children: 'reload it' }),
+        Btn({ key: 'xudismiss', onClick: () => { state.chat.externalUpdate = false; render(); }, children: 'dismiss' })] }));
+  }
+  if (state.chat.persistError) {
+    banners.push(Alert({ key: 'perr', kind: 'warn', title: 'Chat too large to save locally',
+      children: [
+        h('span', { key: 'petxt' }, 'New turns stay in this tab but will not survive a reload - export the transcript from settings. '),
+        Btn({ key: 'pedismiss', onClick: () => { state.chat.persistError = false; render(); }, children: 'dismiss' })] }));
+  }
   if (state.agentsError) {
     banners.push(Alert({ key: 'agerr', kind: 'error', title: 'Could not load agents from the server',
       children: [
@@ -1351,9 +1630,12 @@ function chatMain() {
       messages: state.chat.messages,
       busy: state.chat.busy,
       draft: state.chat.draft,
+      // Idle never reads 'resuming…' (nothing is in flight - the continuation
+      // fact lives in the composer context line and banner); a remotely-stopped
+      // turn reads 'stopped', not a normal finish.
       status: state.chat.busy
-        ? (state.health.ws === 'reconnecting' ? 'reconnecting…' : 'streaming…')
-        : (state.modelsLoading ? 'loading models…' : ((state.chat.resumeSid && state.selectedAgent === 'claude-code') ? 'resuming…' : 'ready')),
+        ? (state.health.ws === 'reconnecting' ? 'connecting…' : 'streaming…')
+        : (state.modelsLoading ? 'loading models…' : ((lastMsg && lastMsg.role === 'assistant' && lastMsg.stopped) ? 'stopped' : 'ready')),
       agentName,
       placeholder,
       canSend: canSend(),
@@ -1363,18 +1645,35 @@ function chatMain() {
         'What are the recent changes on this branch?',
         'Find and explain the main entry point',
       ],
-      onSuggestionClick: (t) => { if (!canSend()) return; state.chat.draft = t; sendChat(); },
+      // Chips send their own text and never touch a typed draft (clicking a
+      // chip with a half-typed message in the composer must not destroy it).
+      onSuggestionClick: (t) => { if (!canSend()) return; sendChat(t); },
       // W14: a stable per-agent product mark (a line-SVG, not a per-agent letter)
       // and the active target shown inline above the composer.
       avatar: state.selectedAgent ? h('span', { class: 'agentchat-avatar-mark', 'aria-hidden': 'true' }, Icon('forum', { size: 16 })) : undefined,
       composerContext: state.selectedAgent ? {
-        bits: [agentName, state.selectedModel || null, state.chatCwd ? state.chatCwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : 'server default', userTurnCount > 0 ? userTurnCount + ' turns' : null].filter(Boolean),
-        onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); },
+        // Split click targets: only the cwd bit is interactive (it opens the
+        // inline cwd editor); agent/model stay inert text - the picker above
+        // already owns them. The resume fact is stated plainly at the point of
+        // typing so send's behavior is never a surprise.
+        bits: [
+          agentName,
+          state.selectedModel || null,
+          {
+            label: state.chatCwd ? state.chatCwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : 'server default',
+            title: 'change working directory',
+            onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); },
+          },
+          userTurnCount > 0 ? userTurnCount + ' turns' : null,
+          (state.chat.resumeSid && state.selectedAgent === 'claude-code')
+            ? 'continues session ' + state.chat.resumeSid.slice(0, 8)
+            : null,
+        ].filter(Boolean),
       } : undefined,
       // W15: contextual follow-up chips derived from the settled last turn
       // (tool error / code fence / file path), seeded statically otherwise.
       followups: chatFollowups(),
-      onFollowupClick: (t) => { if (!canSend()) return; state.chat.draft = t; sendChat(); },
+      onFollowupClick: (t) => { if (!canSend()) return; sendChat(t); },
       // Transcript export: copy all / markdown / json.
       exportActions: state.chat.messages.length ? [
         { label: 'copy all', title: 'Copy the whole transcript as markdown', onClick: () => copyText(transcriptToMarkdown(state.chat.messages), 'transcript copied') },
@@ -1399,6 +1698,15 @@ function chatMain() {
       cwd: state.chatCwd,
       cwdEditing: !!state.cwdEditing,
       cwdDraft: state.cwdDraft,
+      cwdError: state.cwdError || null,
+      cwdChecking: !!state.cwdChecking,
+      // Pasting an image has no upload path on the chat surface yet - say so
+      // politely instead of silently dropping it.
+      onPasteFiles: () => announce('images cannot be attached here yet'),
+      // Long threads render a capped window with a 'show earlier' row (the
+      // chat-side equivalent of history's eventsLimit), reset per conversation.
+      shownMessages: state.chat.shownMessages || undefined,
+      onShowEarlier: (n) => { state.chat.shownMessages = n; render(); },
       onSelectAgent: (v) => selectAgent(v),
       onSelectModel: (v) => selectModel(v),
       onNewChat: newChat,
@@ -1444,9 +1752,9 @@ function chatMain() {
         if (state.chatCwd) lsSet('agentgui.cwd', state.chatCwd); else lsRemove('agentgui.cwd');
         state.cwdEditing = false; state.cwdDraft = undefined; render();
       },
-      onCwdCancel: () => { state.cwdEditing = false; state.cwdDraft = undefined; state.cwdError = null; render(); },
+      onCwdCancel: () => { state.cwdEditing = false; state.cwdDraft = undefined; state.cwdError = null; state.cwdChecking = false; render(); },
       onCwdClear: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); },
-      onCwdDraft: (v) => { state.cwdDraft = v; },
+      onCwdDraft: (v) => { state.cwdDraft = v; state.cwdError = null; debouncedCwdProbe(); },
     }),
   ].filter(Boolean);
 }
@@ -1460,14 +1768,28 @@ function offlineBanner() {
 // (The working-directory bar now lives in the AgentChat kit; agentgui wires its
 // cwd state + handlers as kit callbacks in chatMain.)
 
+// Destructive new-chat is two-step with DISTINCT arm/confirm controls: pressing
+// 'n' (or the rail action) only ARMS the banner; while armed, repeat presses
+// are no-ops and the arm auto-resets after 4s. Confirmation happens exclusively
+// via the banner's explicit 'clear' button - a double-tap can never wipe the
+// transcript.
+let _newChatArmTimer = null;
 function newChat() {
-  if (state.chat.messages.length && !state.confirmingNewChat) {
-    state.confirmingNewChat = true; render();
+  if (state.chat.messages.length) {
+    if (state.confirmingNewChat) { render(); return; }   // armed: repeat press is a no-op
+    state.confirmingNewChat = true;
+    clearTimeout(_newChatArmTimer);
+    _newChatArmTimer = setTimeout(() => { state.confirmingNewChat = false; render(); }, 4000);
+    render();
     return;
   }
+  confirmNewChat();
+}
+function confirmNewChat() {
+  clearTimeout(_newChatArmTimer);
   state.confirmingNewChat = false;
   state.chat.abort?.abort();
-  state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null, usage: null, confirmingEdit: null, totalCost: 0 };
+  state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null, usage: null, confirmingEdit: null, totalCost: 0, shownMessages: null };
   lsRemove(CHAT_KEY);
   render();
 }
@@ -1478,10 +1800,13 @@ function cancelChat() {
   state.chat.abort?.abort();
   // Drop a trailing empty assistant shell (aborted before any content) from the
   // live array so the message count + suggestions-empty check stay correct; the
-  // paired user message is intentionally kept.
+  // paired user message is intentionally kept. A turn stopped mid-content is
+  // labeled 'stopped' so truncated output never reads as a finished answer.
   const msgs = state.chat.messages;
   if (msgs.length && isEmptyTurn(msgs[msgs.length - 1])) msgs.pop();
+  else if (msgs.length && msgs[msgs.length - 1].role === 'assistant') msgs[msgs.length - 1].stopped = true;
   if (state.chat.busy) { state.chat.busy = false; }
+  refreshActive();
   render();
 }
 
@@ -1492,19 +1817,65 @@ const CHAT_KEY = 'agentgui.chat';
 function isEmptyTurn(m) {
   return m.role === 'assistant' && !m.content && !(Array.isArray(m.parts) && m.parts.length);
 }
+// Cap the persisted footprint: the last 100 messages, with any tool args/result
+// payload over 4KB truncated in the SAVED copy only (in-memory state keeps the
+// full payload). A quota failure is surfaced once instead of silently dropping
+// persistence forever.
+const PERSIST_MSG_CAP = 100;
+const PERSIST_PART_CAP = 4096;
+let _persistFailedOnce = false;
+let _lastPersistTs = 0;
+function trimPartForStorage(p) {
+  if (!p || typeof p !== 'object') return p;
+  let out = p;
+  for (const k of ['result', 'args']) {
+    const v = out[k];
+    if (v == null) continue;
+    let s;
+    if (typeof v === 'string') s = v;
+    else { try { s = JSON.stringify(v); } catch { s = String(v); } }
+    if (s.length > PERSIST_PART_CAP) {
+      if (out === p) out = { ...p };
+      out[k] = s.slice(0, PERSIST_PART_CAP);
+      out.truncatedForStorage = true;
+    }
+  }
+  return out;
+}
 function persistChat() {
   try {
     const msgs = state.chat.messages
       .filter(m => !isEmptyTurn(m))
-      .map(m => ({ id: m.id, role: m.role, content: m.content, time: m.time, parts: m.parts }));
+      .slice(-PERSIST_MSG_CAP)
+      .map(m => ({ id: m.id, role: m.role, content: m.content, time: m.time, costUsd: m.costUsd, stopped: m.stopped || undefined, parts: Array.isArray(m.parts) ? m.parts.map(trimPartForStorage) : m.parts }));
     const draft = (state.chat.draft || '').trim() ? state.chat.draft : '';
     // Persist when there is a transcript OR a non-empty draft (a typed-but-not-
     // sent message must survive a reload too).
     if (!msgs.length && !draft) { lsRemove(CHAT_KEY); return; }
-    lsSet(CHAT_KEY, JSON.stringify({ messages: msgs, draft, resumeSid: state.chat.resumeSid, totalCost: state.chat.totalCost || 0, agent: state.selectedAgent, model: state.selectedModel }));
-  } catch {}
+    _lastPersistTs = Date.now();
+    localStorage.setItem(CHAT_KEY, JSON.stringify({ ts: _lastPersistTs, messages: msgs, draft, resumeSid: state.chat.resumeSid, totalCost: state.chat.totalCost || 0, agent: state.selectedAgent, model: state.selectedModel }));
+  } catch {
+    if (!_persistFailedOnce) {
+      _persistFailedOnce = true;
+      state.chat.persistError = true;
+      announce('chat too large to save locally - export it from settings');
+      scheduleRender();
+    }
+  }
 }
 const debouncedPersistDraft = debounce(persistChat, 500);
+// Another GUI tab rewrote the shared chat key: never silently diverge - surface
+// a banner offering to reload the newer copy (last-writer-wins with a ts guard).
+window.addEventListener('storage', (e) => {
+  if (e.key !== CHAT_KEY || !e.newValue) return;
+  try {
+    const remote = JSON.parse(e.newValue);
+    if (remote && remote.ts && remote.ts > _lastPersistTs) {
+      state.chat.externalUpdate = true;
+      scheduleRender();
+    }
+  } catch {}
+});
 function restoreChat() {
   try {
     const raw = lsGet(CHAT_KEY);
@@ -1516,6 +1887,10 @@ function restoreChat() {
       state.chat.messages = saved.messages
         .filter(m => !isEmptyTurn(m))
         .map(m => ({ ...m, parts: Array.isArray(m.parts) ? m.parts : [] }));
+      // Prefer the per-message cost sum when present (it self-corrects after
+      // edit/retry truncation); the scalar is only the legacy fallback.
+      const derived = computeTotalCost();
+      if (derived) state.chat.totalCost = derived;
       state.chat.resumeSid = saved.resumeSid || null;
       // Restore the agent/model the transcript belongs to, so a restored chat
       // isn't silently shown under whatever agent the picker defaulted to.
@@ -1605,6 +1980,8 @@ function chatFollowups() {
 function retryLastTurn() {
   if (!canSend() && !state.chat.busy) { /* allow when idle */ }
   if (state.chat.busy) return;
+  // The armed edit confirm refers to indices this retry is about to shift.
+  state.chat.confirmingEdit = null;
   const msgs = state.chat.messages;
   // Find the trailing assistant turn and the user message before it.
   let ai = msgs.length - 1;
@@ -1616,6 +1993,7 @@ function retryLastTurn() {
   const userText = msgs[ui].content || '';
   // Drop the user+assistant pair (and anything after) and resend the user text.
   state.chat.messages = msgs.slice(0, ui);
+  state.chat.totalCost = computeTotalCost();   // discarded turns leave the spend
   state.chat.draft = userText;
   persistChat();
   if (canSend()) sendChat();
@@ -1635,6 +2013,7 @@ function confirmEditAndResend() {
   if (!ce || state.chat.busy) return;
   state.chat.confirmingEdit = null;
   state.chat.messages = state.chat.messages.slice(0, ce.idx);
+  state.chat.totalCost = computeTotalCost();   // discarded turns leave the spend
   // Never --resume a session whose tail diverged from what the server saw.
   state.chat.resumeSid = null;
   state.chat.resumeNote = null;
@@ -1648,15 +2027,31 @@ function cancelEditAndResend() {
   render();
 }
 
-async function sendChat() {
-  const text = (state.chat.draft || '').trim();
+// Compute the conversation's spend from the per-message costUsd markers, so
+// edit/retry truncation self-corrects the total (no phantom spend from turns
+// that no longer exist in the transcript).
+function computeTotalCost() {
+  return (state.chat.messages || []).reduce((s, m) => s + (typeof m.costUsd === 'number' ? m.costUsd : 0), 0);
+}
+
+// sendChat(text) sends an explicit text (suggestion/followup chips) WITHOUT
+// touching the typed draft; with no argument it sends + clears the draft.
+async function sendChat(textArg) {
+  const text = ((textArg != null ? textArg : state.chat.draft) || '').trim();
   if (!text || !canSend()) return;
+  // The conversation is moving on: any armed edit-and-resend confirm refers to
+  // an index that is about to be stale - disarm it.
+  state.chat.confirmingEdit = null;
   const t = timeNow();
   const userMsg = { id: 'u' + Date.now(), role: 'user', content: text, time: t };
   const curMsg = { id: 'a' + (Date.now() + 1), role: 'assistant', content: '', time: t, parts: [] };
   state.chat.messages = [...state.chat.messages, userMsg, curMsg];
-  state.chat.draft = '';
+  if (textArg == null) state.chat.draft = '';
   state.chat.busy = true;
+  // Open the live stream + refresh the active list right away so the rail and
+  // dashboard reflect this turn without waiting for the 3s poll.
+  openLiveStream();
+  refreshActive();
   const ctrl = new AbortController();
   state.chat.abort = ctrl;
   persistChat();
@@ -1674,6 +2069,10 @@ async function sendChat() {
       // another agent (it makes agy spuriously run --continue).
       resumeSid: (state.selectedAgent === 'claude-code' && state.chat.resumeSid) || undefined,
     })) {
+      // After a stop, the iterator drains buffered events for a turn the user
+      // aborted - applying them would set resumeSid / accrue cost / write text
+      // into a popped shell. A stopped turn applies no further state.
+      if (ctrl.signal.aborted) break;
       if (ev.type === 'session') {
         // Remember the server's session id so the NEXT turn resumes this
         // conversation instead of cold-spawning. Only claude-code supports
@@ -1701,10 +2100,17 @@ async function sendChat() {
           turns: b.num_turns != null ? b.num_turns : null,
           durationMs: b.duration_ms != null ? b.duration_ms : null,
         };
-        // Accumulate cost ACROSS turns so the ContextPane session line shows
-        // the whole conversation's spend, not just the last turn's.
+        // Per-message cost markers; the session total is DERIVED from the
+        // visible messages so edit/retry truncation self-corrects the spend.
         const cost = typeof b.total_cost_usd === 'number' ? b.total_cost_usd : (typeof u.cost === 'number' ? u.cost : 0);
-        if (cost) state.chat.totalCost = (state.chat.totalCost || 0) + cost;
+        if (cost) { cur.costUsd = (cur.costUsd || 0) + cost; state.chat.totalCost = computeTotalCost(); }
+        scheduleStreamRender();
+      }
+      else if (ev.type === 'cancelled') {
+        // Remote stop (another tab / dashboard): label the turn stopped so the
+        // truncated output never reads as a finished answer.
+        cur.stopped = true;
+        announce('generation stopped');
         scheduleStreamRender();
       }
       else if (ev.type === 'error') { cur.error = errText(ev.error); cur.errorRaw = errTextRaw(ev.error); render(); }
@@ -1715,11 +2121,34 @@ async function sendChat() {
     state.chat.busy = false;
     state.chat.abort = null;
     persistChat();
+    refreshActive();   // settle the running panel/dashboard now, not at the next poll
     render();
     scrollChatToBottom();
   }
 }
 
+// Validate the cwd draft while editing (debounced) so an invalid path reads as
+// invalid before the save click, via the existing confined /api/stat endpoint.
+const debouncedCwdProbe = debounce(async () => {
+  const path = (state.cwdDraft ?? '').trim();
+  if (!state.cwdEditing) return;
+  if (!path || !/^([/\\]|[A-Za-z]:[/\\])/.test(path)) { state.cwdChecking = false; render(); return; }
+  state.cwdChecking = true; render();
+  const probed = path;
+  try {
+    const st = await B.statPath(state.backend, probed);
+    if ((state.cwdDraft ?? '').trim() !== probed) return;   // draft moved on
+    state.cwdError = (!st || st.ok === false) ? 'folder not found on the server'
+      : (!st.dir ? 'that path is not a directory' : null);
+  } catch (e) {
+    if ((state.cwdDraft ?? '').trim() !== probed) return;
+    state.cwdError = e.status === 403 ? 'outside the allowed roots'
+      : (e.status === 404 ? 'folder not found on the server' : null);
+  }
+  state.cwdChecking = false;
+  render();
+}, 400);
+
 // --- history ---
 function reconnectAlert() {
   if (!state.live.error) return null;
@@ -1823,7 +2252,7 @@ function historyMain() {
           h('span', { key: 'noevtxt' }, 'no events in this session - '),
           Btn({ key: 'reload', onClick: () => loadSession(state.selectedSid), children: 'reload' }))
       : h('div', { key: 'loading', class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ key: 'spin', size: 'sm' }),
-          state.eventsSlow ? 'Indexing your Claude history - the first load can take a minute…' : 'loading events…');
+          state.eventsSlow ? 'Indexing your Claude history — the first load can take a minute…' : 'loading events…');
     return [reconnectAlert(), head, actions, Panel({ title: 'events', children: body })].filter(Boolean);
   }
 
@@ -1848,7 +2277,12 @@ function historyMain() {
       sess && sess.cwd ? { label: 'cwd', value: sess.cwd, title: sess.cwd } : null,
       sessionDuration() ? { label: 'duration', value: sessionDuration() } : null,
       { label: 'sid', value: state.selectedSid.slice(0, 8) + '…', title: state.selectedSid, onCopy: () => copyText(state.selectedSid, 'sid copied') },
+      // Spelled counter vocabulary in the detail strip (events/turns/tools/
+      // errors); the abbreviated 'ev/tools/err' triple stays compact-row-only.
       { label: 'events', value: String(state.events.length) },
+      { label: 'turns', value: String(sess?.userTurns ?? state.events.filter(e => e.role === 'user').length) },
+      { label: 'tools', value: String(state.events.filter(e => e.type === 'tool_use').length) },
+      { label: 'errors', value: String(state.events.filter(e => e.isError).length) },
     ].filter(Boolean),
   });
   if (filteredEvents.length === 0) {
@@ -1933,7 +2367,9 @@ function historyMain() {
             // Guard ts: a missing/zero timestamp renders "Invalid Date" otherwise.
             // Every row is click-to-expand, so always show the affordance word
             // (not only when text overflows 220 chars).
-            sub: (e.ts ? new Date(e.ts).toLocaleString() : 'no time') + ' · ' + role + ' · ' + type + tool + errMark + ' · ' + (expanded ? 'collapse' : 'expand'),
+            // Relative time matches every other surface; the absolute stamp
+            // appears when the row is expanded (forensic precision preserved).
+            sub: (e.ts ? (expanded ? new Date(e.ts).toLocaleString() : fmtRelTime(e.ts)) : 'no time') + ' · ' + role + ' · ' + type + tool + errMark + ' · ' + (expanded ? 'collapse' : 'expand'),
             onClick: () => { expanded ? state.expandedEvents.delete(key) : state.expandedEvents.add(key); render(); },
           };
         }),
@@ -1945,7 +2381,14 @@ function historyMain() {
 let copyToast = null;
 // Hold the toast long enough to read (2.5s); the copy button label is inside a
 // role=status region (history-actions) so AT announces the change.
-function setCopyToast(msg) { copyToast = msg; render(); setTimeout(() => { copyToast = null; render(); }, 2500); }
+let _copyToastTimer = null;
+function setCopyToast(msg) {
+  copyToast = msg; render();
+  // One timer per invocation: a rapid second copy must not have its feedback
+  // truncated by the first copy's expiring timeout.
+  clearTimeout(_copyToastTimer);
+  _copyToastTimer = setTimeout(() => { copyToast = null; render(); }, 2500);
+}
 function copySid() {
   const sid = state.selectedSid;
   if (!sid) return;
@@ -1971,6 +2414,8 @@ function resumeInChat(sess, { fromHash = false } = {}) {
   state.selectedSid = state.chat.resumeSid || state.selectedSid;
   if (!fromHash) writeHash({ push: true });
   state.chat.messages = [];
+  state.chat.totalCost = 0;
+  state.chat.shownMessages = null;
   state.chat.draft = '';
   // Only claude-code supports --resume by sid; warn if we have to switch the
   // user's selected agent rather than silently discarding it.
@@ -2019,19 +2464,28 @@ function uniqueProjects() {
 function runningPanel() {
   const running = Array.isArray(state.active) ? state.active : [];
   if (!running.length) return null;
+  const stopping = state.live.stopping || new Set();
   return Panel({
     key: 'runningPanel',
     title: 'running · ' + running.length,
-    children: running.map((r) => {
-      const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
-      const elapsed = r.startedAt ? Math.round((Date.now() - r.startedAt) / 1000) : 0;
-      // All three children must be keyed VElements (mixing a keyed span with an
-      // unkeyed one crashes webjsx applyDiff "reading 'key'").
-      return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
-        h('span', { key: 'rd-' + r.sessionId, class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
-        h('span', { key: 'rl-' + r.sessionId, class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
-        Btn({ key: 'stop' + r.sessionId, onClick: () => stopActiveChat(r.sessionId), children: 'stop' }));
-    }),
+    children: [
+      // A discoverable path from "this running chat" to the management surface.
+      h('div', { key: 'runall', class: 'resume-banner', role: 'group' },
+        h('span', { key: 'runalllbl', class: 'lede' }, 'manage all running sessions'),
+        Btn({ key: 'runalllive', onClick: () => navTo('live'), children: 'view all in live' })),
+      ...running.map((r) => {
+        const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
+        const elapsedMs = r.startedAt ? Math.max(0, Date.now() - r.startedAt) : 0;
+        const isStopping = stopping.has(r.sessionId);
+        // All children must be keyed VElements (mixing a keyed span with an
+        // unkeyed one crashes webjsx applyDiff "reading 'key'").
+        return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
+          h('span', { key: 'rd-' + r.sessionId, class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
+          h('span', { key: 'rl-' + r.sessionId, class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + (elapsedMs ? ' · ' + fmtDuration(elapsedMs) : '') + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
+          Btn({ key: 'open' + r.sessionId, onClick: () => navTo('live'), children: 'open in live' }),
+          Btn({ key: 'stop' + r.sessionId, disabled: isStopping, onClick: () => stopActiveChat(r.sessionId), children: isStopping ? 'stopping…' : 'stop' }));
+      }),
+    ],
   });
 }
 
@@ -2049,7 +2503,7 @@ function historySide() {
           key: 'sr-' + (r.sid || '?') + '-' + i,
           rank: String(i + 1).padStart(3, '0'),
           title: r.snippet || '(no snippet)',
-          sub: (r.project || '?') + ' · ' + (r.role || '?') + (r.tool ? ' · ' + r.tool : '') + (r.ts ? ' · ' + fmtRelTime(r.ts) : ''),
+          sub: (projectLabel(r.project) || '?') + ' · ' + (r.role || '?') + (r.tool ? ' · ' + r.tool : '') + (r.ts ? ' · ' + fmtRelTime(r.ts) : ''),
           // Rail carries the same semantics as session rows: error > subagent > normal.
           rail: r.isError ? 'flame' : (r.isSubagent ? 'purple' : 'green'),
           // Carry the matched event's index so loadSession scrolls to + flashes
@@ -2153,11 +2607,13 @@ function normalizeBackend(s) {
 async function saveBackend() {
   if (!isValidUrl(state.backendDraft) || state.backendDraft === state.backend) return;
   // Switching backend orphans the local chat transcript (it belongs to the old
-  // server's sessions). Confirm once if there's a transcript to lose.
-  if (state.chat.messages.length && !state.confirmingBackend) {
-    state.confirmingBackend = true; render(); return;
+  // server's sessions). Confirm once if there's a transcript to lose - and the
+  // confirmation binds to the EXACT value confirmed: editing the URL after
+  // arming re-arms instead of executing under a stale confirmation.
+  if (state.chat.messages.length && state.confirmingBackend !== state.backendDraft) {
+    state.confirmingBackend = state.backendDraft; render(); return;
   }
-  state.confirmingBackend = false;
+  state.confirmingBackend = undefined;
   const canonical = normalizeBackend(state.backendDraft);
   state.backendDraft = canonical;
   B.setBackend(canonical);
@@ -2201,7 +2657,9 @@ function settingsMain() {
     PageHeader({
       compact: true,
       title: 'Settings',
-      lede: 'Point agentgui at any backend. Blank = same-origin (ccsniff in-process). ?backend=... or the field below persists via localStorage.',
+      // The page lede describes the PAGE; the backend explanation lives in the
+      // backend panel where it applies.
+      lede: 'Connection, agents, appearance, keyboard, and local data.',
     }),
     h('div', { key: 'settings-grid', class: 'settings-grid' }, [
     Panel({
@@ -2211,6 +2669,7 @@ function settingsMain() {
         key: 'backendForm',
         onSubmit: (e) => { e.preventDefault(); saveBackend(); },
       }, [
+        h('p', { key: 'blede', class: 'lede', style: 'margin:0 0 .5em' }, 'Point agentgui at any backend. Blank = same-origin (ccsniff in-process). ?backend=... or the field below persists via localStorage.'),
         TextField({
           key: 'backendField',
           label: 'backend url',
@@ -2219,13 +2678,19 @@ function settingsMain() {
           'aria-describedby': !isValid ? 'backend-url-error' : undefined,
           'aria-invalid': !isValid ? 'true' : 'false',
           title: isValid ? 'Enter a valid URL or leave blank for same-origin' : 'Invalid URL format',
-          onInput: (v) => { state.backendDraft = v; render(); },
+          onInput: (v) => {
+            state.backendDraft = v;
+            // The armed confirmation refers to a different value now - disarm.
+            if (state.confirmingBackend !== undefined && state.confirmingBackend !== v) state.confirmingBackend = undefined;
+            render();
+          },
         }),
         !isValid ? h('p', { key: 'err', id: 'backend-url-error', class: 'lede field-error', role: 'alert' }, 'Invalid URL format') : null,
         state.backendStatus === 'connecting' ? h('p', { key: 'bst-connecting', class: 'lede', role: 'status' }, 'connecting…') : null,
         state.backendStatus === 'ok' ? h('p', { key: 'bst-ok', class: 'lede', role: 'status' }, 'connected') : null,
         state.backendStatus === 'failed' ? h('p', { key: 'bst-failed', class: 'lede field-error', role: 'alert' }, 'connection failed - check the URL') : null,
-        state.confirmingBackend ? h('p', { key: 'bcw', class: 'lede field-error', role: 'alert' }, 'changing backend discards this browser\'s chat transcript - press save again to confirm') : null,
+        (state.confirmingBackend !== undefined && state.confirmingBackend === state.backendDraft && isValid && state.backendDraft !== state.backend)
+          ? h('p', { key: 'bcw', class: 'lede field-error', role: 'alert' }, 'changing backend discards this browser\'s chat transcript - press save again to confirm') : null,
         healthSummary(),
         Btn({
           key: 'savebtn',
@@ -2238,6 +2703,10 @@ function settingsMain() {
         }),
       ]),
     }),
+    // Panel order: connection group (backend + server) first, then agents,
+    // then personal preferences (appearance / keyboard / data).
+    serverPanel(),
+    agentsPanel(),
     Panel({
       id: 'appearance',
       title: 'appearance',
@@ -2246,8 +2715,6 @@ function settingsMain() {
         ThemeToggle({ key: 'tt' }),
       ],
     }),
-    serverPanel(),
-    agentsPanel(),
     keyboardPanel(),
     preferencesPanel(),
     ]),
@@ -2315,9 +2782,13 @@ function preferencesPanel() {
     id: 'data',
     title: 'data',
     children: [
-      h('div', { key: 'ver', class: 'lede' }, 'server ' + (hh.version ? 'v' + hh.version : 'version unknown') + (window.__SERVER_VERSION ? ' · build ' + window.__SERVER_VERSION : '')),
+      // The server version lives in the server panel; carry only a build stamp
+      // here, and only when it differs from the server version.
+      (window.__SERVER_VERSION && window.__SERVER_VERSION !== hh.version)
+        ? h('div', { key: 'ver', class: 'lede' }, 'build ' + window.__SERVER_VERSION)
+        : null,
       h('div', { key: 'lsize', class: 'lede', style: 'margin:.5em 0' },
-        'local data: ' + (Math.round(lsBytes / 102.4) / 10) + ' KB across ' + lsKeys + ' key' + (lsKeys === 1 ? '' : 's')),
+        'local data: ' + fmtBytes(lsBytes) + ' across ' + lsKeys + ' key' + (lsKeys === 1 ? '' : 's')),
       h('div', { key: 'expchatrow', style: 'margin:.5em 0' },
         Btn({ key: 'expchat', disabled: !savedChat,
           title: savedChat ? 'Download the saved chat transcript as JSON' : 'no saved chat',
@@ -2332,7 +2803,7 @@ function preferencesPanel() {
               Btn({ key: 'cldyes', danger: true, onClick: clearLocalData, children: 'clear' }),
               Btn({ key: 'cldno', onClick: () => { state.confirmingClearData = false; render(); }, children: 'cancel' })] })
         : Btn({ key: 'cldbtn', onClick: clearLocalData, children: 'clear local data' }),
-    ],
+    ].filter(Boolean),
   });
 }
 
@@ -2399,6 +2870,20 @@ async function refreshHistory() {
     // Index by sid so each live SSE event is an O(1) lookup, not an O(sessions)
     // linear scan per event during a burst load.
     state.sessionsBySid = new Map((state.sessions || []).map(s => [s.sid, s]));
+    // Bound the live tally: drop entries with no activity in 24h and cap the
+    // Map at ~200 most-recent sids (a long-lived tab otherwise accumulates
+    // every sid ever seen, and dead entries could resurrect wrong externals).
+    if (state.live.tally) {
+      const cutoff = Date.now() - 24 * 3600 * 1000;
+      for (const [sid, t] of [...state.live.tally]) {
+        if (!t.last || t.last < cutoff) state.live.tally.delete(sid);
+      }
+      if (state.live.tally.size > 200) {
+        state.live.tally = new Map([...state.live.tally.entries()]
+          .sort((a, b) => (b[1].last || 0) - (a[1].last || 0))
+          .slice(0, 200));
+      }
+    }
     // If the selected session vanished from the list (deleted/aged out server-side),
     // drop the selection so the main pane doesn't sit on stale events that can no
     // longer be reloaded; fall back to the no-selection empty state.
@@ -2436,6 +2921,10 @@ async function runSearch() {
   render();
   try {
     state.searchHits = await B.searchHistory(state.backend, q, 60);
+    // Announce the settled count for AT - the sessions-column count is only
+    // rendered visually (the history actions row is the only aria-live region).
+    const n = (state.searchHits.results || []).length;
+    announce((n || 'no') + ' matches for ' + q);
   } catch (e) {
     state.searchHits = { query: q, results: [], error: errText(e) };
   } finally {
@@ -2477,6 +2966,10 @@ async function loadSession(sid, { focusEventI = null, focusEventTs = null, fromH
   });
   try {
     state.events = await B.getSessionEvents(state.backend, sid);
+    // ccsniff's events route has no ?limit= (checked: router.js returns the
+    // whole session) - cap in-memory state at the most-recent 5000 so a
+    // monster session can't pin the tab; the render window stays 300+load-older.
+    if (state.events.length > 5000) state.events = state.events.slice(-5000);
     clearTimeout(slowTimer);
     state.eventsSlow = false;
     state.eventsLoaded = true;
@@ -2717,14 +3210,49 @@ function focusSearch() {
   const el = document.querySelector('#app input[type="search"]');
   el?.focus();
 }
+// Focus the active surface's filter input (Files grid filter / Live dashboard
+// filter) - both are search-type inputs inside the main region.
+function focusFilter() {
+  const el = document.querySelector('#agentgui-main input[type="search"]')
+    || document.querySelector('#agentgui-main .ds-file-filter-input')
+    || document.querySelector('#agentgui-main input[type="text"]');
+  el?.focus();
+  return !!el;
+}
 window.addEventListener('keydown', (e) => {
   const t = e.target;
   const typing = t && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || t.isContentEditable);
+  // One explicit chord BEFORE the modifier early-return: Mod+Shift+L focuses
+  // the composer from anywhere, even while typing in another field.
+  if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'L' || e.key === 'l')) {
+    e.preventDefault();
+    navTo('chat');
+    requestAnimationFrame(() => focusComposer());
+    announce('composer focused');
+    return;
+  }
   if (e.metaKey || e.ctrlKey || e.altKey) return;
   if (typing) {
     if (e.key === 'Escape') t.blur();
     return;
   }
+  if (e.key === 'Escape') {
+    // Priority ladder for transient state (modals/drawers are kit-handled):
+    // shortcuts overlay > armed confirms > stop a streaming generation.
+    if (state.showShortcuts) { state.showShortcuts = false; render(); announce('shortcuts closed'); return; }
+    // File-mutation dialog: close on Escape wherever focus sits (the kit's
+    // backdrop listener covers in-dialog focus; this covers everything else).
+    if (state.files.dialog) { if (!state.files.dialog.busy) closeFileDialog(); return; }
+    if (state.chat.confirmingEdit) { state.chat.confirmingEdit = null; render(); announce('edit cancelled'); return; }
+    if (state.confirmingNewChat) { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); announce('new chat cancelled'); return; }
+    if (state.live.confirmingStopAll || state.live.confirmingStopSelected) {
+      state.live.confirmingStopAll = false; state.live.confirmingStopSelected = false;
+      clearTimeout(_stopAllArmTimer); clearTimeout(_stopSelArmTimer);
+      render(); announce('stop cancelled'); return;
+    }
+    if (state.chat.busy && state.tab === 'chat') { cancelChat(); announce('generation stopped'); return; }
+    return;
+  }
   if (gPending) {
     gPending = false;
     if (e.key === 'c') { navTo('chat'); return; }
@@ -2737,13 +3265,24 @@ window.addEventListener('keydown', (e) => {
   if (e.key === 'g') { gPending = true; setTimeout(() => { gPending = false; }, 1000); return; }
   if (e.key === 'n' && state.tab === 'chat') { e.preventDefault(); newChat(); return; }
   if (e.key === '/') {
-    // / focuses search on history, composer on chat; on settings there is no
-    // such field, so ignore it cleanly rather than focusing nothing.
+    // / targets the active surface's find affordance: search on history,
+    // composer on chat, the filter inputs on files/live. Settings has no
+    // field - the only documented no-op.
     if (state.tab === 'history') { e.preventDefault(); focusSearch(); announce('search focused'); }
     else if (state.tab === 'chat') { e.preventDefault(); focusComposer(); announce('composer focused'); }
+    else if (state.tab === 'files' || state.tab === 'live') { e.preventDefault(); if (focusFilter()) announce('filter focused'); }
     return;
   }
   if (e.key === '?') { state.showShortcuts = !state.showShortcuts; render(); return; }
 });
 
+// A file dropped anywhere outside a DropZone must never navigate the browser
+// away (destroying the live session view). DropZones handle their own events.
+window.addEventListener('dragover', (e) => {
+  if (!(e.target instanceof Element) || !e.target.closest('.ds-dropzone')) e.preventDefault();
+});
+window.addEventListener('drop', (e) => {
+  if (!(e.target instanceof Element) || !e.target.closest('.ds-dropzone')) e.preventDefault();
+});
+
 init();