agentgui 1.0.958 → 1.0.960

package/site/app/js/app.js

@@ -3,7 +3,13 @@ import * as B from './backend.js';
 
 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 } = C;
+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(),
@@ -15,7 +21,13 @@ const state = {
   agentModels: [],
   selectedModel: lsGet('agentgui.model') || '',
   chatCwd: lsGet('agentgui.cwd') || '',
-  chat: { messages: [], busy: false, abort: null, draft: '', resumeSid: null },
+  chat: { messages: [], busy: false, abort: null, draft: '', resumeSid: null, confirmingEdit: null, totalCost: 0 },
+  agentsError: null,
+  settingsSection: null,
+  eventFilter: 'all',         // history event-type filter: all | text | tool | errors
+  sessionSearchQ: null,       // the query the selected session was opened from (search-hit highlight)
+  historySlow: false,         // first history fetch unresolved after 5s -> indexing copy
+  eventsSlow: false,          // first events fetch unresolved after 5s -> indexing copy
   sessions: [],
   selectedSid: null,
   events: [],
@@ -25,39 +37,62 @@ 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"
   files: { path: '', segments: [], entries: [], roots: [], loading: false, error: null, preview: null, sort: 'name', sortDir: 'asc', filter: '' },
 };
 
+// Full routable param set. Every view-defining piece of state round-trips
+// through the hash so reload and Back/forward restore the exact view.
+const HASH_KEYS = ['tab', 'sid', 'dir', 'file', 'q', 'project', 'section'];
 function readHash() {
   const hash = location.hash || '';
-  const sidM = hash.match(/sid=([^&]+)/);
-  const tabM = hash.match(/tab=([^&]+)/);
-  return {
-    sid: sidM ? decodeURIComponent(sidM[1]) : null,
-    tab: tabM ? decodeURIComponent(tabM[1]) : null,
-  };
+  const out = {};
+  for (const k of HASH_KEYS) {
+    const m = hash.match(new RegExp('(?:^#|&)' + k + '=([^&]*)'));
+    out[k] = m ? decodeURIComponent(m[1]) : null;
+  }
+  return out;
 }
-function buildHash(tab, sid) {
+function buildHash() {
   const parts = [];
-  if (tab && tab !== 'chat') parts.push('tab=' + encodeURIComponent(tab));
-  if (sid) parts.push('sid=' + encodeURIComponent(sid));
+  const tab = state.tab || 'chat';
+  // tab is omitted for the default chat tab, EXCEPT when a session id rides
+  // along - a bare #sid= historically meant history, so chat+sid must name its
+  // tab explicitly or the deep-link restores the wrong surface.
+  if (tab !== 'chat') parts.push('tab=' + encodeURIComponent(tab));
+  else if (state.selectedSid) parts.push('tab=chat');
+  // Keep sid whenever set (regardless of tab) so Back restores the selection.
+  if (state.selectedSid) parts.push('sid=' + encodeURIComponent(state.selectedSid));
+  if (tab === 'files' && state.files) {
+    if (state.files.path) parts.push('dir=' + encodeURIComponent(state.files.path));
+    if (state.files.preview && state.files.preview.path) parts.push('file=' + encodeURIComponent(state.files.preview.path));
+  }
+  if (tab === 'history') {
+    const q = (state.searchQ || '').trim();
+    if (q.length >= 2) parts.push('q=' + encodeURIComponent(q));
+    if (state.projectFilter) parts.push('project=' + encodeURIComponent(state.projectFilter));
+  }
+  if (tab === 'settings' && state.settingsSection) parts.push('section=' + encodeURIComponent(state.settingsSection));
   return parts.length ? '#' + parts.join('&') : '';
 }
-function writeHash(sid, { push = false } = {}) {
-  const h = buildHash(state.tab, sid);
+function writeHash({ push = false } = {}) {
+  const h = buildHash();
   const url = location.pathname + location.search + h;
-  if (location.hash === h) return;
-  // pushState for session selection so Back returns to the session list;
-  // replaceState for tab-only changes.
+  if (location.hash === h || (!location.hash && !h)) return;
+  // pushState for user navigation steps (tab visits, session selection,
+  // directory walks, preview opens) so Back retraces them; replaceState for
+  // passive state sync (search text, filter resets).
   (push ? history.pushState : history.replaceState).call(history, null, '', url);
 }
 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';
@@ -78,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;
@@ -206,7 +253,7 @@ function sortedAgents() {
     .map(({ a }) => a);
 }
 
-function navTo(tab) {
+function navTo(tab, { writeHash: doWriteHash = true, push = true } = {}) {
   const prev = state.tab;
   // Leaving chat clears any pending new-chat confirmation so it doesn't linger
   // as a stale banner when the user returns.
@@ -215,7 +262,11 @@ function navTo(tab) {
   // 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();
@@ -230,7 +281,9 @@ function navTo(tab) {
   // filesMain (which runs during render) - a render-time fetch is fragile under
   // a double-render and re-enters render() while building the tree.
   if (tab === 'files' && !state.files.path && !state.files.loading && !state.files.error) loadDir('');
-  writeHash(state.selectedSid && tab === 'history' ? state.selectedSid : null);
+  // popstate calls navTo with writeHash:false so it never replaceState-clobbers
+  // the entry it popped; user-initiated navigation pushes so Back walks tabs.
+  if (doWriteHash) writeHash({ push });
   announce('Now on ' + tab + ' tab');
   render();
   // Move focus into the new region for keyboard/AT users.
@@ -268,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();
@@ -305,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() {
@@ -316,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.
@@ -341,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
@@ -390,6 +485,19 @@ function closeLiveStream() {
   state.live.connected = false;
 }
 
+// ONE shortcuts definition consumed by BOTH the ?-overlay and the settings
+// keyboard panel, so the two surfaces cannot drift from the keydown handler
+// below (which implements exactly these: g+c/h/f/l/s, n, /, ?, Esc).
+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 / 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: 'close overlays, cancel confirms, stop generation, or blur the field' },
+];
+
 function view() {
   const ok = state.health.status === 'ok';
   const liveActive = state.tab === 'history' && state.live.connected && (Date.now() - state.live.lastEventTs < 30000);
@@ -397,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
@@ -415,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
@@ -423,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 : '')
@@ -444,7 +557,7 @@ function view() {
     : 'min-height:0';
   const shortcutsHint = state.showShortcuts
     ? Alert({ key: 'sc', kind: 'info', title: 'Keyboard shortcuts',
-        children: 'g then c/h/f/l/s - chat/history/files/live/settings · n - new chat · / - focus search/composer · ? - toggle this · Esc - blur field' })
+        children: SHORTCUTS.map(s => s.keys + ' - ' + s.desc).join(' · ') })
     : null;
   const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, [shortcutsHint, ...mainContent()].filter(Boolean));
 
@@ -466,7 +579,14 @@ function view() {
       cwd: state.chatCwd || '',
       toolCount: runningToolCount(),
       usage: state.chat.usage || null,
-      onSetCwd: () => { navTo('files'); },
+      session: {
+        turns: state.chat.messages.filter(m => m.role === 'user').length,
+        cost: state.chat.totalCost || null,
+      },
+      // 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();
@@ -513,7 +633,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);
@@ -565,7 +687,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,
@@ -593,6 +715,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,
     error: state.historyError,
     emptyText: 'No conversations yet',
   });
@@ -607,16 +730,25 @@ function mainContent() {
 }
 
 // --- files (folder browser) ---
-async function loadDir(dirPath) {
+async function loadDir(dirPath, { fromHash = false } = {}) {
   state.files = state.files || {};
   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 || [];
     state.files.roots = j.roots || [];
     state.files.error = null;
+    // Deep-link the open directory: push so Back walks the tree; a load that
+    // came FROM the hash (popstate/boot) replaces instead - the entry already
+    // exists, only the URL needs to stay accurate (writeHash no-ops when the
+    // hash already matches, so popstate never loops).
+    if (state.tab === 'files') writeHash({ push: !fromHash });
   } catch (e) {
     // W9: translate HTTP status to plain, non-leaky copy.
     state.files.error = e.status === 403
@@ -659,8 +791,163 @@ function closePreview() {
   if (!state.files) return;
   state.files.preview = null;
   state.files.previewState = null;
+  // Clear file= from the URL (replace - the pushed open-entry stays poppable).
+  if (state.tab === 'files') writeHash();
+  render();
+}
+
+// Restore (or clear) the file= preview named by the hash once the directory
+// listing for dir= has resolved - popstate and boot both funnel through here.
+function restoreFileFromHash(filePath) {
+  const f = state.files || {};
+  if (!filePath) {
+    if (f.preview) { f.preview = null; f.previewState = null; render(); }
+    return;
+  }
+  if (f.preview && f.preview.path === filePath) return;
+  const entry = (f.entries || []).find(e => e.path === filePath);
+  if (entry && entry.type !== 'dir') openPreview(entry, { fromHash: true });
+}
+
+// --- file mutations (rename / delete / new folder / upload) ---
+// One dialog at a time lives in state.files.dialog: {kind, file, error, busy}.
+// Errors from the confined endpoints map to plain copy by HTTP status.
+function fileMutationCopy(e) {
+  if (e.status === 403) return 'Permission denied, or the target is outside the allowed roots.';
+  if (e.status === 404) return 'That file no longer exists.';
+  if (e.status === 409) return e.message || 'A file with that name already exists.';
+  if (e.status === 413) return 'Too large (50MB upload cap).';
+  return e.message || 'The operation failed.';
+}
+function openFileDialog(kind, file) {
+  state.files.dialog = { kind, file: file || null, error: null, busy: false };
+  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;
+  d.busy = true; d.error = null; render();
+  try {
+    await fn();
+    state.files.dialog = null;
+    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();
+  }
+}
+// Upload a FileList into the current directory; per-file rows feed the kit
+// UploadProgress (done/error per file - fetch has no chunk progress).
+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, 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();
+    }
+  } finally {
+    state.files.uploading = false;
+  }
+  announce('upload finished');
+  await loadDir(state.files.path, { fromHash: true });
+  // Keep error rows visible; clear the list entirely when everything landed.
+  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;
+  // 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 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) => {
+        // 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 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 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) { d.error = 'enter a folder name'; render(); return; }
+        runFileMutation(() => B.makeDir(state.backend, state.files.path, v), 'created ' + v);
+      },
+    });
+  }
+  return null;
+}
 
 // Build the inner preview body (image / code / text / loading / error) shared by
 // the modal FileViewer (<900px) and the inline FilePreviewPane (split view).
@@ -697,8 +984,10 @@ function previewNeighbours() {
   return { prev: i > 0 ? list[i - 1] : null, next: i < list.length - 1 ? list[i + 1] : null };
 }
 
-function openPreview(file) {
+function openPreview(file, { fromHash = false } = {}) {
   state.files.preview = file;
+  // Push file= so Back closes the preview; hash-driven opens replace instead.
+  if (state.tab === 'files') writeHash({ push: !fromHash });
   if (file.type !== 'image') loadPreviewContent(file);
   render();
 }
@@ -785,6 +1074,7 @@ function filesMain() {
         // Click the active column to flip direction; a new column resets to asc.
         if (state.files.sort === k) state.files.sortDir = state.files.sortDir === 'asc' ? 'desc' : 'asc';
         else { state.files.sort = k; state.files.sortDir = 'asc'; }
+        persistFilesPrefs();
         render();
       } },
       filter: { value: f.filter || '', placeholder: 'Filter files in this directory', onInput: (v) => { state.files.filter = v; state.files.shown = null; render(); } },
@@ -793,15 +1083,18 @@ function filesMain() {
         if (file.type === 'dir') loadDir(file.path);
         else openPreview(file);
       },
-      // W7: download is the one mutation-free row action the read-only server
-      // supports. rename/delete are a deliberate scope cut (no mutation endpoints
-      // - documented in PUNCHLIST-COHESION.md), so only download is wired.
+      // Full manager wiring: download streams the confined /api/download;
+      // rename/delete open a kit dialog backed by the confined mutation
+      // endpoints (the former read-only scope cut is reversed).
       onAction: (act, file) => {
+        if (file.permissions === 'EACCES') { announce('no access to ' + file.name); return; }
         if (act === 'download' && file.type !== 'dir') {
           const a = document.createElement('a');
           a.href = B.downloadUrl(state.backend, file.path);
           a.download = file.name; document.body.appendChild(a); a.click(); a.remove();
         }
+        if (act === 'rename') openFileDialog('rename', file);
+        if (act === 'delete') openFileDialog('delete', file);
       },
     });
   }
@@ -819,27 +1112,113 @@ function filesMain() {
   // Kit FileToolbar (replaces the hand-built .ds-file-toolbar markup).
   const toolbar = FileToolbar({
     left: [crumb],
-    right: [targetCwd
-      ? Btn({ key: 'usecwd', onClick: () => { state.chatCwd = targetCwd; lsSet('agentgui.cwd', targetCwd); announce('working directory set to ' + targetCwd); navTo('chat'); }, children: 'use as chat cwd' })
-      : null].filter(Boolean),
+    right: [
+      f.path ? Btn({ key: 'newdir', onClick: () => openFileDialog('mkdir'), children: 'new folder' }) : null,
+      f.path ? Btn({ key: 'upload', onClick: () => {
+        const inp = document.createElement('input');
+        inp.type = 'file'; inp.multiple = true;
+        inp.onchange = () => uploadFiles(inp.files);
+        inp.click();
+      }, children: 'upload' }) : null,
+      targetCwd
+        ? Btn({ key: 'usecwd', onClick: () => { state.chatCwd = targetCwd; lsSet('agentgui.cwd', targetCwd); announce('working directory set to ' + targetCwd); navTo('chat'); }, children: 'use as chat cwd' })
+        : null,
+    ].filter(Boolean),
   });
+  // Drag-and-drop upload wraps the grid (keyboard path = the toolbar upload
+  // button); per-file progress rows render above the grid while in flight.
+  const droppableBody = f.path && !f.error
+    ? DropZone({
+        dragover: !!f.dragover,
+        label: 'drop files to upload to this folder',
+        onDragOver: () => { if (!state.files.dragover) { state.files.dragover = true; render(); } },
+        onDragLeave: () => { if (state.files.dragover) { state.files.dragover = false; render(); } },
+        onDrop: (files) => { state.files.dragover = false; uploadFiles(files); },
+        children: body,
+      })
+    : body;
   return [
     offlineBanner(),
-    PageHeader({ compact: true, title: 'Files', lede: 'Browse the server filesystem within the allowed roots. Click a folder to open it; pick one as the chat working directory.' }),
+    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),
-    h('div', { key: 'fbody' }, body),
+    (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
     // fallback (the pane has no room there).
     (f.preview && isNarrow()) ? h('div', { key: 'fprev' }, filePreview()) : null,
   ].filter(Boolean);
 }
 
+// --- live/files preference persistence (sort, errors-only). The live
+// selection Set is deliberately NOT persisted - stale sids would arm
+// stop-selected against sessions that no longer exist.
+const LIVE_PREFS_KEY = 'agentgui.live';
+const FILES_PREFS_KEY = 'agentgui.files';
+function persistLivePrefs() {
+  lsSet(LIVE_PREFS_KEY, JSON.stringify({ sort: state.live.sort || 'status', errorsOnly: !!state.live.errorsOnly }));
+}
+function persistFilesPrefs() {
+  lsSet(FILES_PREFS_KEY, JSON.stringify({ sort: state.files.sort || 'name', sortDir: state.files.sortDir || 'asc' }));
+}
+function hydratePrefs() {
+  try {
+    const lv = JSON.parse(lsGet(LIVE_PREFS_KEY) || 'null');
+    if (lv) { if (lv.sort) state.live.sort = lv.sort; state.live.errorsOnly = !!lv.errorsOnly; }
+  } catch {}
+  try {
+    const fp = JSON.parse(lsGet(FILES_PREFS_KEY) || 'null');
+    if (fp) { if (fp.sort) state.files.sort = fp.sort; if (fp.sortDir) state.files.sortDir = fp.sortDir; }
+  } catch {}
+}
+
+// Two-step stop: the first click ARMS (confirming* flips the kit button to a
+// confirm state), a second click within 4s executes; the timer auto-resets.
+let _stopAllArmTimer = null;
+let _stopSelArmTimer = null;
+function armStopAll() {
+  state.live.confirmingStopAll = true;
+  clearTimeout(_stopAllArmTimer);
+  _stopAllArmTimer = setTimeout(() => { state.live.confirmingStopAll = false; render(); }, 4000);
+  render();
+}
+function armStopSelected() {
+  state.live.confirmingStopSelected = true;
+  clearTimeout(_stopSelArmTimer);
+  _stopSelArmTimer = setTimeout(() => { state.live.confirmingStopSelected = false; render(); }, 4000);
+  render();
+}
+
 // 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)
@@ -856,75 +1235,154 @@ 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),
     };
   });
+  // 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
-      sort: { value: sortKey, onChange: (v) => { state.live.sort = v; render(); } },
+      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,
-      onErrorsOnly: (on) => { state.live.errorsOnly = on; render(); },
+      onErrorsOnly: (on) => { state.live.errorsOnly = on; persistLivePrefs(); render(); },
       selectable: true,
       selected,
       onToggleSelect: (s) => {
@@ -932,12 +1390,32 @@ function liveMain() {
         if (set.has(s.sid)) set.delete(s.sid); else set.add(s.sid);
         state.live.selected = set; render();
       },
-      onStopSelected: (sids) => { stopAllActive(sids.map(sid => ({ sid }))); state.live.selected = new Set(); },
-      emptyText: 'No live sessions - start a chat or run a local agent.',
-      onStop: (s) => stopActiveChat(s.sid),
-      onStopAll: (all) => stopAllActive(all),
-      onOpen: (s) => { resumeInChat({ sid: s.sid }); },
-      onView: (s) => { navTo('history'); loadSession(s.sid); },
+      // Two-step bulk stops: arm first, execute on the confirmed click.
+      confirmingStopAll: !!lv.confirmingStopAll,
+      confirmingStopSelected: !!lv.confirmingStopSelected,
+      onArmStopAll: armStopAll,
+      onArmStopSelected: armStopSelected,
+      onStopSelected: async (sids) => {
+        state.live.confirmingStopSelected = false;
+        clearTimeout(_stopSelArmTimer);
+        // 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) => { if (!s.external) stopActiveChat(s.sid); },
+      onStopAll: async (all) => {
+        state.live.confirmingStopAll = false;
+        clearTimeout(_stopAllArmTimer);
+        await stopAllActive((all || []).filter(s => !s.external));
+        render();
+      },
+      onOpen: (s) => { resumeInChat({ sid: s.realSid || s.sid }); },
+      onView: (s) => { navTo('history'); loadSession(s.realSid || s.sid); },
     }),
   ].filter(Boolean);
 }
@@ -1016,15 +1494,29 @@ function applyToolResult(parts, block) {
   }
 }
 
-function errText(e) {
+// Map raw transport/server errors to plain-language copy. The raw string is
+// preserved via errTextRaw so renderers can carry it on a title attribute.
+const ERR_COPY = [
+  [/^ws closed$/, 'Lost connection to the server.'],
+  [/connection lost during stream/, 'Lost connection while the agent was responding - use retry.'],
+  [/no sessionId from server/, 'The server could not start the agent - check it is installed.'],
+  [/^sessions: \d+/, 'History is still indexing - try again in a moment.'],
+];
+function errTextRaw(e) {
   if (e == null) return 'unknown error';
   if (typeof e === 'string') return e;
   if (e.message) return e.message;
   try { return JSON.stringify(e); } catch { return String(e); }
 }
+function errText(e) {
+  const raw = errTextRaw(e);
+  for (const [re, copy] of ERR_COPY) { if (re.test(raw)) return copy; }
+  return raw;
+}
 
 function chatMain() {
   const agentName = agentById(state.selectedAgent)?.name || state.selectedAgent || 'agent';
+  const userTurnCount = state.chat.messages.filter(m => m.role === 'user').length;
 
   // Banners agentgui owns (resume, agent-switched, unavailable, confirm-clear,
   // stream error) are pre-built here and handed to the kit, which renders them
@@ -1045,7 +1537,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' })));
   }
@@ -1057,19 +1549,51 @@ 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: [
+        h('span', { key: 'agtxt', title: state.agentsError }, 'The agent list failed to load. '),
+        Btn({ key: 'agretry', onClick: () => loadAgents(), children: 'retry' })] }));
+  }
+  if (state.chat.confirmingEdit) {
+    banners.push(Alert({ key: 'confedit', kind: 'warn', title: 'Edit this message?',
+      children: [
+        h('span', { key: 'cetext' }, 'Editing will remove the later turns - continue? '),
+        Btn({ key: 'ceyes', danger: true, onClick: confirmEditAndResend, children: 'continue' }),
+        Btn({ key: 'ceno', onClick: cancelEditAndResend, children: 'cancel' })] }));
+  }
   const lastMsg = state.chat.messages.length ? state.chat.messages[state.chat.messages.length - 1] : null;
   const lastErr = lastMsg ? lastMsg.error : null;
   if (lastErr && !state.chat.busy) {
     banners.push(Alert({ key: 'chaterr', kind: 'error', title: 'Stream error',
       children: [
-        h('span', { key: 'cetxt' }, lastErr + ' '),
-        Btn({ key: 'cedismiss', onClick: () => { if (lastMsg) { delete lastMsg.error; persistChat(); render(); } }, children: 'dismiss' })] }));
+        h('span', { key: 'cetxt', title: lastMsg.errorRaw || lastErr }, lastErr + ' '),
+        Btn({ key: 'ceretry', onClick: () => { delete lastMsg.error; delete lastMsg.errorRaw; retryLastTurn(); }, children: 'retry' }),
+        Btn({ key: 'cedismiss', onClick: () => { if (lastMsg) { delete lastMsg.error; delete lastMsg.errorRaw; persistChat(); render(); } }, children: 'dismiss' })] }));
   }
 
   const placeholder = !state.selectedAgent
@@ -1091,9 +1615,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(),
@@ -1103,25 +1630,68 @@ 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'].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; 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') },
+        { label: 'export md', title: 'Download the transcript as markdown', onClick: () => downloadBlob(transcriptToMarkdown(state.chat.messages), 'agentgui-chat-' + dateStamp() + '.md', 'text/markdown') },
+        { label: 'export json', title: 'Download the transcript as JSON', onClick: () => downloadBlob(JSON.stringify(state.chat.messages, null, 2), 'agentgui-chat-' + dateStamp() + '.json', 'application/json') },
+      ] : [],
+      // When the server reports agents but NONE is installed, show install
+      // commands inline instead of a dead picker.
+      installHint: (state.agents.length && state.agents.every(a => a.available === false)) ? {
+        text: 'No agent CLIs found on the server.',
+        commands: state.agents.filter(a => a.npxInstallable).map(a => ({ agent: a.name || a.id, command: 'npx ' + (a.npxPackage || a.id) })),
+        onRecheck: () => loadAgents(),
       } : undefined,
-      // W15: contextual follow-up chips after a settled assistant turn.
-      followups: state.chat.messages.length ? ['Explain that in more detail', 'Show me the diff', 'Run the tests'] : [],
-      onFollowupClick: (t) => { if (!canSend()) return; state.chat.draft = t; sendChat(); },
       // Per-message actions: copy any message; retry the last assistant turn;
-      // edit-and-resend a user message (drops everything after it, refills draft).
+      // edit-and-resend a user message (two-step: arm a confirm banner first,
+      // since the truncation destroys the later turns).
       onCopyMessage: (m) => copyMessageText(m),
       onRetryMessage: () => retryLastTurn(),
-      onEditMessage: (m) => editAndResend(m),
+      confirmEdit: true,
+      onArmEdit: (m) => armEditAndResend(m),
+      onEditMessage: (m) => armEditAndResend(m),
       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,
@@ -1133,11 +1703,12 @@ function chatMain() {
         const was = !!(state.chat.draft && state.chat.draft.trim());
         const now = !!(v && v.trim());
         state.chat.draft = v;
+        debouncedPersistDraft();   // a typed-but-unsent draft survives reload
         if (was !== now) render();
       },
       onSend: (v) => { state.chat.draft = v; sendChat(); },
       onCwdEdit: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); },
-      onCwdSave: () => {
+      onCwdSave: async () => {
         const path = (state.cwdDraft ?? '').trim();
         // A relative cwd would resolve against the server process dir, not what
         // the user means - require an absolute path (POSIX /..., UNC \\..., or
@@ -1147,14 +1718,28 @@ function chatMain() {
           render();
           return;
         }
+        // Validate against the server: the path must resolve and be a directory.
+        if (path) {
+          try {
+            const st = await B.statPath(state.backend, path);
+            if (!st || st.ok === false) { state.cwdError = 'directory not found on the server: ' + path; render(); return; }
+            if (!st.dir) { state.cwdError = 'that path is not a directory'; render(); return; }
+          } catch (e) {
+            state.cwdError = e.status === 403 ? 'outside the allowed roots'
+              : (e.status === 404 ? 'directory not found on the server: ' + path
+              : (e.status ? 'directory not found on the server: ' + path : 'could not validate the path - server unreachable'));
+            render();
+            return;
+          }
+        }
         state.cwdError = null;
         state.chatCwd = path;
         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);
 }
@@ -1168,14 +1753,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 };
+  state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null, usage: null, confirmingEdit: null, totalCost: 0, shownMessages: null };
   lsRemove(CHAT_KEY);
   render();
 }
@@ -1186,10 +1785,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();
 }
 
@@ -1200,24 +1802,80 @@ 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 }));
-    if (!msgs.length) { lsRemove(CHAT_KEY); return; }
-    lsSet(CHAT_KEY, JSON.stringify({ messages: msgs, resumeSid: state.chat.resumeSid, agent: state.selectedAgent, model: state.selectedModel }));
-  } catch {}
+      .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; }
+    _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);
     if (!raw) return;
     const saved = JSON.parse(raw);
+    if (typeof saved.draft === 'string' && saved.draft.trim()) state.chat.draft = saved.draft;
+    if (typeof saved.totalCost === 'number') state.chat.totalCost = saved.totalCost;
     if (Array.isArray(saved.messages) && saved.messages.length) {
       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.
@@ -1239,18 +1897,76 @@ function messageToText(m) {
     return '';
   }).filter(Boolean).join('\n');
 }
-function copyMessageText(m) {
-  const text = messageToText(m);
+// Shared clipboard helper with an insecure-origin fallback; announces via the
+// aria-live region so AT users hear the result.
+function copyText(text, msg) {
   if (!text) return;
-  if (navigator.clipboard?.writeText) navigator.clipboard.writeText(text).then(() => announce('message copied')).catch(() => {});
+  if (navigator.clipboard?.writeText) navigator.clipboard.writeText(text).then(() => announce(msg)).catch(() => {});
   else {
-    try { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); announce('message copied'); } catch {}
+    try { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); announce(msg); } catch {}
+  }
+}
+function copyMessageText(m) {
+  copyText(messageToText(m), 'message copied');
+}
+
+// --- transcript export ---
+function dateStamp() { return new Date().toISOString().slice(0, 10); }
+function downloadBlob(content, filename, type) {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url; a.download = filename;
+  document.body.appendChild(a); a.click(); a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 5000);
+}
+function transcriptToMarkdown(messages) {
+  return (messages || []).map((m) => {
+    const head = '## ' + (m.role === 'user' ? 'User' : 'Assistant') + (m.time ? ' (' + m.time + ')' : '');
+    const parts = Array.isArray(m.parts) ? m.parts : [];
+    const body = parts.length
+      ? parts.map((p) => {
+          if (typeof p === 'string') return p;
+          if (p.kind === 'md' || p.kind === 'text') return p.text || '';
+          if (p.kind === 'tool' || p.kind === 'tool_result') {
+            const bits = ['## tool: ' + (p.name || 'tool')];
+            if (p.args && Object.keys(p.args).length) bits.push('```json\n' + JSON.stringify(p.args, null, 2) + '\n```');
+            if (p.result != null) bits.push('```\n' + (typeof p.result === 'string' ? p.result : JSON.stringify(p.result, null, 2)) + '\n```');
+            return bits.join('\n');
+          }
+          return '';
+        }).filter(Boolean).join('\n\n')
+      : (m.content || '');
+    return head + '\n\n' + body;
+  }).join('\n\n');
+}
+
+// Contextual follow-up chips derived from the settled last assistant turn;
+// falls back to the static seeds when nothing contextual applies.
+const FOLLOWUP_SEEDS = ['Explain that in more detail', 'Show me the diff', 'Run the tests'];
+function chatFollowups() {
+  const msgs = state.chat.messages || [];
+  if (!msgs.length || state.chat.busy) return [];
+  const last = [...msgs].reverse().find(m => m.role === 'assistant');
+  if (!last) return [];
+  const out = [];
+  const parts = Array.isArray(last.parts) ? last.parts : [];
+  if (parts.some(p => p && p.kind === 'tool' && p.status === 'error')) out.push('Fix that error');
+  const text = messageToText(last);
+  if (/```/.test(text) || parts.some(p => p && p.kind === 'code')) out.push('Explain this code');
+  const fm = text.match(/([A-Za-z]:\\\S+|\/[\w./-]+\.\w+)/);
+  if (fm) {
+    const base = fm[1].split(/[/\\]/).filter(Boolean).pop();
+    if (base) out.push('Open ' + base.replace(/[^\w.\-]/g, '') + ' in files');
   }
+  return out.length ? out.slice(0, 3) : FOLLOWUP_SEEDS;
 }
 // Retry the last assistant turn: drop it and re-send the preceding user message.
 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;
@@ -1262,33 +1978,65 @@ 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();
   else render();
 }
-// Edit-and-resend a user message: truncate the transcript at it, refill the
-// composer with its text, and let the user revise before sending.
-function editAndResend(m) {
+// Edit-and-resend a user message: two-step. The edit click ARMS a confirmation
+// (truncating destroys the later turns), the banner's continue executes it.
+function armEditAndResend(m) {
   if (state.chat.busy) return;
   const idx = state.chat.messages.indexOf(m);
   if (idx < 0) return;
-  state.chat.messages = state.chat.messages.slice(0, idx);
-  state.chat.draft = m.content || messageToText(m);
+  state.chat.confirmingEdit = { idx, text: m.content || messageToText(m) };
+  render();
+}
+function confirmEditAndResend() {
+  const ce = state.chat.confirmingEdit;
+  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;
+  state.chat.draft = ce.text;
   persistChat();
   render();
   requestAnimationFrame(() => focusComposer());
 }
+function cancelEditAndResend() {
+  state.chat.confirmingEdit = null;
+  render();
+}
+
+// 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);
+}
 
-async function sendChat() {
-  const text = (state.chat.draft || '').trim();
+// 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();
@@ -1306,6 +2054,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
@@ -1333,21 +2085,55 @@ async function sendChat() {
           turns: b.num_turns != null ? b.num_turns : null,
           durationMs: b.duration_ms != null ? b.duration_ms : null,
         };
+        // 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) { 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); render(); }
+      else if (ev.type === 'error') { cur.error = errText(ev.error); cur.errorRaw = errTextRaw(ev.error); render(); }
     }
   } catch (e) {
-    if (e.name !== 'AbortError') cur.error = errText(e.message);
+    if (e.name !== 'AbortError') { cur.error = errText(e); cur.errorRaw = errTextRaw(e); }
   } finally {
     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;
@@ -1359,6 +2145,48 @@ function reconnectAlert() {
   });
 }
 
+// Humanize a millisecond span (1m 30s scale words, no glyphs).
+function humanizeMs(ms) {
+  if (ms == null || !isFinite(ms) || ms < 0) return '';
+  const s = Math.round(ms / 1000);
+  if (s < 60) return s + 's';
+  if (s < 3600) return Math.floor(s / 60) + 'm ' + (s % 60) + 's';
+  return Math.floor(s / 3600) + 'h ' + Math.floor((s % 3600) / 60) + 'm';
+}
+
+// First-to-last event timestamp span for the selected session, humanized.
+function sessionDuration() {
+  const ts = (state.events || []).map(e => e.ts).filter(Boolean);
+  if (ts.length < 2) return '';
+  return humanizeMs(Math.max(...ts) - Math.min(...ts));
+}
+
+// Event-type filter predicate (all | text | tool | errors).
+function eventMatchesFilter(e, f) {
+  if (f === 'tool') return e.type === 'tool_use' || e.type === 'tool_result';
+  if (f === 'errors') return !!e.isError;
+  if (f === 'text') return !e.isError && e.type !== 'tool_use' && e.type !== 'tool_result';
+  return true;
+}
+
+// Scroll to + flash the first error event, widening the render window (and
+// clearing the type filter) so the row is actually rendered.
+function jumpToFirstError() {
+  const idx = state.events.findIndex(e => e.isError);
+  if (idx < 0) return;
+  state.eventFilter = 'all';
+  const fromEnd = state.events.length - idx;
+  if (fromEnd > state.eventsLimit) state.eventsLimit = Math.ceil(fromEnd / 300) * 300;
+  render();
+  const sliceStart = Math.max(0, state.events.length - state.eventsLimit);
+  const rowPos = idx - sliceStart;
+  requestAnimationFrame(() => {
+    const rows = document.querySelectorAll('.ds-event-list .row');
+    const row = rows[rowPos];
+    if (row) { row.scrollIntoView({ block: 'center' }); row.classList.add('event-flash'); setTimeout(() => row.classList.remove('event-flash'), 2000); }
+  });
+}
+
 function historyMain() {
   if (!state.selectedSid) {
     const count = (Array.isArray(state.sessions) ? state.sessions : []).length;
@@ -1390,26 +2218,70 @@ function historyMain() {
     lede,
   });
 
-  const actions = h('div', { key: 'acts', class: 'history-actions', role: 'status', 'aria-live': 'polite' },
+  const hasErrors = state.events.some(e => e.isError);
+  const actions = h('div', { key: 'acts', class: 'history-actions', role: 'status', 'aria-live': 'polite' }, [
     Btn({ key: 'resume', primary: true, onClick: () => resumeInChat(sess || { sid: state.selectedSid }), children: 'open in chat' }),
     Btn({ key: 'copy', onClick: copySid, children: copyToast || 'copy sid' }),
-  );
+    Btn({ key: 'exportsess', disabled: !state.eventsLoaded, title: 'Download this session\'s events as JSON',
+      onClick: () => downloadBlob(JSON.stringify(state.events, null, 2), (projectLabel(sess?.project) || 'session') + '-' + state.selectedSid + '.json', 'application/json'),
+      children: 'export' }),
+    hasErrors ? Btn({ key: 'jumperr', onClick: jumpToFirstError, children: 'jump to first error' }) : null,
+  ].filter(Boolean));
 
   if (state.events.length === 0) {
     // Distinguish "still loading" from "genuinely empty" so a 0-event session
-    // doesn't spin forever.
+    // doesn't spin forever. After 5s of an unresolved first fetch, swap to the
+    // indexing copy (ccsniff's first JSONL walk can take a minute).
     const body = state.eventsLoaded
       ? h('div', { key: 'noev', class: 'lede empty-state', role: 'status' },
           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' }), 'loading events…');
+      : 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…');
     return [reconnectAlert(), head, actions, Panel({ title: 'events', children: body })].filter(Boolean);
   }
 
   if (!state.expandedEvents) state.expandedEvents = new Set();
-  const total = state.events.length;
+  // Event-type filter applies BEFORE the render-window slice so "errors" shows
+  // every error in the session, not only errors among the most-recent 300.
+  const ef = state.eventFilter || 'all';
+  const filteredEvents = ef === 'all' ? state.events : state.events.filter(e => eventMatchesFilter(e, ef));
+  const filterPills = FilterPills({
+    options: [
+      { id: 'all', label: 'all' },
+      { id: 'text', label: 'text' },
+      { id: 'tool', label: 'tools' },
+      { id: 'errors', label: 'errors' },
+    ],
+    selected: ef,
+    onSelect: (id) => { state.eventFilter = id && id.id ? id.id : id; render(); },
+    label: 'Filter events by type',
+  });
+  const meta = SessionMeta({
+    items: [
+      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) {
+    return [reconnectAlert(), head, actions, Panel({ title: 'events', children: [
+      h('div', { key: 'evmeta' }, meta),
+      h('div', { key: 'evfp' }, filterPills),
+      h('div', { key: 'nofilt', class: 'lede empty-state', role: 'status' },
+        h('span', { key: 'noftxt' }, '0 events match this filter - '),
+        Btn({ key: 'clearf', onClick: () => { state.eventFilter = 'all'; render(); }, children: 'clear filter' })),
+    ] })].filter(Boolean);
+  }
+  const total = filteredEvents.length;
   const limit = state.eventsLimit;
-  const shown = state.events.slice(-limit);
+  const shown = filteredEvents.slice(-limit);
   const hiddenCount = total - shown.length;
   // Keys of the currently-shown rows, so expand-all toggles only what's rendered.
   const shownKeys = shown.map((e, i) => {
@@ -1432,8 +2304,8 @@ function historyMain() {
     head,
     actions,
     Panel({
-      title: total + ' events' + (hiddenCount > 0 ? ' (showing last ' + shown.length + '; ' + hiddenCount + ' older)' : ''),
-      children: [eventControls, EventList({
+      title: total + ' events' + (ef !== 'all' ? ' (' + ef + ' filter)' : '') + (hiddenCount > 0 ? ' (showing last ' + shown.length + '; ' + hiddenCount + ' older)' : ''),
+      children: [h('div', { key: 'evmeta' }, meta), h('div', { key: 'evfp' }, filterPills), eventControls, EventList({
         items: shown.map((e, i) => {
           // Stable key: prefer the server-assigned event index, else the
           // event timestamp + position, never a bare array index (which
@@ -1456,17 +2328,33 @@ function historyMain() {
           // Rail tone matches the session/agents rail semantics so an event's
           // kind is visible at a glance, consistent across the GUI:
           // flame = error, purple = tool_use, green = normal turn.
-          const rail = e.isError ? 'flame' : 'green';
+          const rail = e.isError ? 'flame' : (e.type === 'tool_use' ? 'purple' : 'green');
+          // When the session was opened from a search hit, window the collapsed
+          // title AROUND the first query match (a match at char 5000 would
+          // otherwise be invisible behind the 0-220 slice).
+          let collapsedTitle = text.slice(0, 220);
+          const q = state.sessionSearchQ;
+          if (q && !expanded) {
+            const qi = text.toLowerCase().indexOf(q.toLowerCase());
+            if (qi > 60) collapsedTitle = '…' + text.slice(qi - 60, qi - 60 + 220);
+          }
           return {
             key,
             code: String(absIdx + 1).padStart(4, '0'),
             rail,
             expanded,  // disclosure state -> kit Row sets aria-expanded
-            title: expanded ? (full || '(' + type + ')') : (text.slice(0, 220) || '(' + type + ')'),
+            highlight: q || undefined,
+            actions: expanded ? [{
+              label: 'copy', title: 'copy event',
+              onClick: () => copyText(full || raw || ('(' + type + ')'), 'event copied'),
+            }] : undefined,
+            title: expanded ? (full || '(' + type + ')') : (collapsedTitle || '(' + type + ')'),
             // 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(); },
           };
         }),
@@ -1478,7 +2366,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;
@@ -1495,11 +2390,17 @@ function copySid() {
   }
 }
 
-function resumeInChat(sess) {
+function resumeInChat(sess, { fromHash = false } = {}) {
   state.tab = 'chat';
   closeLiveStream();
   state.chat.resumeSid = sess?.sid || state.selectedSid;
+  // Carry the sid on the chat tab too (tab=chat&sid=...) so reload/Back
+  // restores the resumed conversation rather than a blank chat.
+  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.
@@ -1548,19 +2449,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' }));
+      }),
+    ],
   });
 }
 
@@ -1578,7 +2488,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 : ''),
+          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
@@ -1632,13 +2542,13 @@ function historySide() {
           ? h('p', { key: 'min2', class: 'lede empty-state' }, 'type at least 2 characters to search')
           : null,
         state.searchQ
-          ? Btn({ key: 'clearq', onClick: () => { state.searchQ = ''; state.searchHits = null; state.searchBusy = false; render(); }, children: 'clear search' })
+          ? Btn({ key: 'clearq', onClick: () => { state.searchQ = ''; state.searchHits = null; state.searchBusy = false; writeHash(); render(); }, children: 'clear search' })
           : null,
         !searching && projects.length > 1
           ? h('div', { key: 'projfilter', class: 'pill-row', role: 'group', 'aria-label': 'Filter sessions by project' },
-              pillButton('allp', 'all', !state.projectFilter, 'Show all projects', () => { state.projectFilter = ''; render(); }),
+              pillButton('allp', 'all', !state.projectFilter, 'Show all projects', () => { state.projectFilter = ''; writeHash(); render(); }),
               ...projects.slice(0, 8).map(([name, count]) =>
-                pillButton('p'+name, truncate(projectLabel(name), 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; render(); })))
+                pillButton('p'+name, truncate(projectLabel(name), 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; writeHash(); render(); })))
           : null,
         !searching && subagentCount
           ? h('label', { key: 'subtog', class: 'lede subagent-toggle' },
@@ -1682,11 +2592,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);
@@ -1730,15 +2642,19 @@ 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({
+      id: 'backend',
       title: 'backend',
       children: h('form', {
         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',
@@ -1747,13 +2663,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',
@@ -1766,19 +2688,56 @@ function settingsMain() {
         }),
       ]),
     }),
+    // Panel order: connection group (backend + server) first, then agents,
+    // then personal preferences (appearance / keyboard / data).
+    serverPanel(),
+    agentsPanel(),
     Panel({
+      id: 'appearance',
       title: 'appearance',
       children: [
         h('div', { key: 'apl', class: 'lede', style: 'margin-bottom:.5em' }, 'theme - follows the OS in auto, or pick light/dark.'),
         ThemeToggle({ key: 'tt' }),
       ],
     }),
-    agentsPanel(),
+    keyboardPanel(),
     preferencesPanel(),
     ]),
   ];
 }
 
+// Server info from /health: version, uptime, ws clients, allowed roots (with
+// per-root copy), projects dir. Renders unknowns plainly rather than hiding.
+function serverPanel() {
+  const hh = state.health || {};
+  const roots = Array.isArray(hh.allowRoots) ? hh.allowRoots : [];
+  const upMs = hh.uptimeMs != null ? hh.uptimeMs : (hh.uptime != null ? hh.uptime * 1000 : null);
+  const wsClients = hh.wsClients != null ? hh.wsClients : (hh.clients != null ? hh.clients : null);
+  return Panel({
+    id: 'server',
+    title: 'server',
+    children: [
+      h('div', { key: 'sv', class: 'lede' }, 'version: ' + (hh.version ? 'v' + hh.version : 'unknown')),
+      h('div', { key: 'sup', class: 'lede' }, 'uptime: ' + (upMs != null ? humanizeMs(upMs) : 'unknown')),
+      h('div', { key: 'swc', class: 'lede' }, 'ws clients: ' + (wsClients != null ? wsClients : 'unknown')),
+      h('div', { key: 'spd', class: 'lede' }, 'projects dir: ' + (hh.projectsDir || 'unknown')),
+      roots.length
+        ? SessionMeta({ key: 'sroots', items: roots.map((r, i) => ({ label: 'root ' + (i + 1), value: r, title: r, onCopy: () => copyText(r, 'root copied') })) })
+        : h('div', { key: 'snoroots', class: 'lede' }, 'allowed roots: unknown'),
+    ],
+  });
+}
+
+// The keyboard panel consumes the same SHORTCUTS definition as the ?-overlay.
+function keyboardPanel() {
+  return Panel({
+    id: 'keyboard',
+    title: 'keyboard',
+    children: SHORTCUTS.map((s, i) =>
+      h('div', { key: 'kb' + i, class: 'lede' }, s.keys + ' - ' + s.desc)),
+  });
+}
+
 function clearLocalData() {
   if (!state.confirmingClearData) { state.confirmingClearData = true; render(); return; }
   state.confirmingClearData = false;
@@ -1788,19 +2747,38 @@ function clearLocalData() {
   // re-persist them, so the "clear" wouldn't survive. A reload re-inits from
   // defaults with the keys gone.
   state.chat.abort?.abort(); // stop any in-flight stream before we drop the page
-  for (const k of ['agentgui.chat', 'agentgui.agent', 'agentgui.model', 'agentgui.cwd', 'agentgui.backend']) lsRemove(k);
-  state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null };
+  for (const k of ['agentgui.chat', 'agentgui.agent', 'agentgui.model', 'agentgui.cwd', 'agentgui.backend', 'agentgui.live', 'agentgui.files']) lsRemove(k);
+  state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null, confirmingEdit: null, totalCost: 0 };
   location.reload();
 }
 
 function preferencesPanel() {
   const hh = state.health || {};
+  const savedChat = lsGet(CHAT_KEY);
+  // Footprint of agentgui's own localStorage keys.
+  let lsKeys = 0, lsBytes = 0;
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (k && k.startsWith('agentgui.')) { lsKeys++; lsBytes += (localStorage.getItem(k) || '').length; }
+    }
+  } catch {}
   return Panel({
-    title: 'preferences',
+    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 : '')),
-      h('div', { key: 'sc', class: 'lede', style: 'margin:.5em 0' },
-        'keyboard: g then c/h/s - switch tabs · n - new chat · / - focus search/composer · ? - toggle hint · Esc - blur field'),
+      // 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: ' + 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',
+          onClick: savedChat ? () => downloadBlob(savedChat, 'agentgui-chat-' + dateStamp() + '.json', 'application/json') : undefined,
+          children: savedChat ? 'export chat' : 'no saved chat' })),
       h('div', { key: 'cwdnote', class: 'lede', style: 'margin:.5em 0' },
         'working directory: set per-chat in the chat composer’s cwd bar' + (state.chatCwd ? ' (current: ' + state.chatCwd + ')' : ' (currently: server default)')),
       state.confirmingClearData
@@ -1810,7 +2788,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),
   });
 }
 
@@ -1823,6 +2801,7 @@ function agentsPanel() {
   const installed = state.agents.filter(a => a.available !== false);
   const hasAcp = (Array.isArray(state.health.acp) ? state.health.acp : []).length > 0;
   return Panel({
+    id: 'agents',
     title: 'agents · ' + installed.length + '/' + state.agents.length + ' installed',
     children: [
     // ACP agents (opencode/kilo/codex) are managed automatically: started
@@ -1863,11 +2842,33 @@ function agentsPanel() {
 
 // --- data ---
 async function refreshHistory() {
+  // Warmup copy: the FIRST sessions fetch can sit behind ccsniff's 30-90s
+  // JSONL walk; after 5s swap the loading copy to indexing language.
+  const firstLoad = !state._historyLoadedOnce;
+  const slowTimer = firstLoad
+    ? setTimeout(() => { if (!state._historyLoadedOnce) { state.historySlow = true; render(); } }, 5000)
+    : null;
   try {
     state.sessions = await B.listSessions(state.backend);
+    state._historyLoadedOnce = true;
+    state.historySlow = false;
     // 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.
@@ -1875,34 +2876,42 @@ async function refreshHistory() {
       state.selectedSid = null;
       state.events = [];
       state.eventsLoaded = false;
-      writeHash(null);
+      writeHash();
     }
     state.historyError = null;
   } catch (e) {
     // Only a genuine fetch/list failure is a history error. A render exception
     // must not masquerade as one (it would poison the sessions panel with a
     // render-stack string and never clear), so render() lives outside this try.
-    state.historyError = e.message;
+    state.historyError = errText(e);
     console.warn('history fetch failed:', e.message);
   }
+  if (slowTimer) clearTimeout(slowTimer);
   render();
 }
 const debouncedRefreshHistory = debounce(refreshHistory, 500);
 
 async function runSearch() {
   const q = state.searchQ.trim();
-  if (!q) { state.searchHits = null; state.searchBusy = false; render(); return; }
-  if (q.length < 2) { state.searchHits = null; state.searchBusy = false; render(); return; }
+  if (!q) { state.searchHits = null; state.searchBusy = false; writeHash(); render(); return; }
+  if (q.length < 2) { state.searchHits = null; state.searchBusy = false; writeHash(); render(); return; }
   // The project-filter pills are hidden while searching; clear the filter so it
   // doesn't silently re-apply (and surprise the user) when they later clear the
   // search and the now-visible session list is unexpectedly narrowed.
   state.projectFilter = '';
+  // The debounced search keeps the URL's q=/project= in sync via replaceState
+  // so a reload (or share) restores the search, without flooding history.
+  writeHash();
   state.searchBusy = true;
   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: e.message };
+    state.searchHits = { query: q, results: [], error: errText(e) };
   } finally {
     state.searchBusy = false;
     render();
@@ -1910,18 +2919,26 @@ async function runSearch() {
 }
 const debouncedSearch = debounce(runSearch, 300);
 
-async function loadSession(sid, { focusEventI = null, focusEventTs = null } = {}) {
+async function loadSession(sid, { focusEventI = null, focusEventTs = null, fromHash = false } = {}) {
   // Guard against a bad sid from a malformed hash (e.g. "?sid=undefined").
   if (!sid || sid === 'undefined' || sid === 'null') { state.selectedSid = null; render(); return; }
   state.selectedSid = sid;
   state.events = [];
   state.eventsLoaded = false;
+  state.eventsSlow = false;
   state.eventsLimit = 300;            // reset the render window per session
+  state.eventFilter = 'all';          // don't carry the type filter across sessions
   state.expandedEvents = new Set();   // don't carry expansion to the new session
+  // Remember the query this session was opened FROM (search hit) so the event
+  // rows can highlight + window around the match; a plain selection clears it.
+  state.sessionSearchQ = (focusEventI != null || focusEventTs != null) && state.searchQ.trim().length >= 2
+    ? state.searchQ.trim() : null;
   // The live "live · N" crumb counter reads as the selected session's activity,
   // so reset it per selection rather than letting it accrue across all sessions.
   state.live.eventCount = 0;
-  writeHash(sid, { push: true });
+  writeHash({ push: !fromHash });
+  // Warmup copy: a first events fetch can sit behind ccsniff's JSONL walk.
+  const slowTimer = setTimeout(() => { if (!state.eventsLoaded && state.selectedSid === sid) { state.eventsSlow = true; render(); } }, 5000);
   // Close the mobile sidebar drawer on selection. The DS only auto-closes when
   // the clicked element is an <a>; agentgui's session rows are onClick divs, so
   // we close it explicitly here.
@@ -1934,6 +2951,12 @@ async function loadSession(sid, { focusEventI = null, focusEventTs = null } = {}
   });
   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;
     // If we arrived from a search hit, make sure the matched event is within the
     // render window, then scroll to + flash it so the match isn't lost.
@@ -1961,21 +2984,20 @@ async function loadSession(sid, { focusEventI = null, focusEventTs = null } = {}
       ts: Date.now(),
       role: 'error',
       type: 'fetch',
-      text: 'Failed to load session: ' + e.message + ' - retry via sidebar',
+      text: 'Failed to load session: ' + errText(e) + ' - retry via sidebar',
     }];
+    clearTimeout(slowTimer);
+    state.eventsSlow = false;
     state.eventsLoaded = true;
     render();
   }
 }
 
-async function init() {
-  try {
-    const r = await B.probeBackend(state.backend);
-    state.health = r.ok ? { status: 'ok', ...r.info } : { status: 'down', ...r };
-  } catch (e) {
-    state.health = { status: 'error', error: e.message };
-  }
-  render();
+// Fetch agents + pick the active one. Reusable: boot, backend save, and the
+// reconnect path all re-run it. Returns true on success; failure lands in
+// state.agentsError so the chat tab can surface it with a retry control.
+async function loadAgents() {
+  state.agentsError = null;
   try {
     state.agents = await B.listAgents(state.backend);
     // Agent selection priority: the agent a restored transcript belongs to (so
@@ -1986,15 +3008,85 @@ async function init() {
     if (!target) target = state.agents.find(a => a.available !== false) || state.agents[0];
     if (target) await selectAgent(target.id);
     render();
-  } catch (e) { console.warn('agents fetch failed:', e.message); }
+    return true;
+  } catch (e) {
+    state.agentsError = errText(e);
+    console.warn('agents fetch failed:', e.message);
+    render();
+    return false;
+  }
+}
+
+// Boot-time automatic retries with backoff when the first agents fetch fails
+// (the server may still be warming up).
+async function retryLoadAgents() {
+  for (const ms of [2000, 5000, 10000]) {
+    await new Promise(r => setTimeout(r, ms));
+    if (!state.agentsError) return;       // a manual retry already succeeded
+    if (await loadAgents()) return;
+  }
+}
+
+// While the backend is unreachable, poll /health every ~10s; on recovery
+// re-fetch agents + models and announce, so a mid-session outage self-heals.
+let _healthPollTimer = null;
+function stopHealthPolling() { if (_healthPollTimer) { clearInterval(_healthPollTimer); _healthPollTimer = null; } }
+function startHealthPolling() {
+  if (_healthPollTimer) return;
+  _healthPollTimer = setInterval(() => {
+    if (state.health.status === 'ok') { stopHealthPolling(); return; }
+    recheckHealth();
+  }, 10000);
+}
+async function recheckHealth() {
+  const wasOk = state.health.status === 'ok';
+  const r = await B.probeBackend(state.backend);
+  if (r.ok) {
+    state.health = { status: 'ok', ...r.info };
+    stopHealthPolling();
+    if (!wasOk) { announce('reconnected'); loadAgents(); }
+  } else {
+    state.health = { status: 'down', ...r };
+    startHealthPolling();
+  }
+  render();
+}
 
-  const { sid: initialSid, tab: initialTab } = readHash();
-  if (initialSid) {
-    navTo('history');
+async function init() {
+  try {
+    const r = await B.probeBackend(state.backend);
+    state.health = r.ok ? { status: 'ok', ...r.info } : { status: 'down', ...r };
+  } catch (e) {
+    state.health = { status: 'error', error: e.message };
+  }
+  render();
+  if (!(await loadAgents())) retryLoadAgents();
+
+  const hp = readHash();
+  const bootTab = hp.tab || (hp.sid ? 'history' : 'chat');
+  if (hp.sid && bootTab === 'chat') {
+    // tab=chat&sid deep link: resume the conversation in chat.
+    resumeInChat({ sid: hp.sid }, { fromHash: true });
+    refreshHistory();
+  } else if (hp.sid) {
+    if (hp.q) state.searchQ = hp.q;
+    if (hp.project) state.projectFilter = hp.project;
+    navTo('history', { push: false });
     await refreshHistory();
-    await loadSession(initialSid);
-  } else if (initialTab && initialTab !== state.tab) {
-    navTo(initialTab);
+    await loadSession(hp.sid, { fromHash: true });
+    if (state.searchQ.trim().length >= 2) runSearch();
+  } else if (bootTab !== state.tab) {
+    // Files deep-link: restore the directory the URL names (reload keeps
+    // context instead of resetting to the default root). Kick the load BEFORE
+    // navTo - loadDir sets loading=true synchronously, so navTo's default
+    // loadDir('') guard skips and the two never race. Once the listing
+    // resolves, restore the file= preview on top of it.
+    if (bootTab === 'files' && hp.dir) loadDir(hp.dir, { fromHash: true }).then(() => restoreFileFromHash(hp.file));
+    if (bootTab === 'history' && hp.q) state.searchQ = hp.q;
+    if (bootTab === 'history' && hp.project) state.projectFilter = hp.project;
+    navTo(bootTab, { push: false });
+    if (bootTab === 'history' && state.searchQ.trim().length >= 2) runSearch();
+    if (bootTab === 'settings' && hp.section) focusSettingsSection(hp.section);
   }
 
   registerWsStatusOnce();
@@ -2015,12 +3107,17 @@ function registerWsStatusOnce() {
   B.onWsStatus?.((s) => {
     if (s === 'closed' || s === 'error') {
       if (state.health.status === 'ok') { state.health = { ...state.health, ws: 'reconnecting' }; render(); }
+      // The WS dropping often means the whole server went away - re-probe
+      // /health so the offline banner appears mid-session (and the 10s
+      // recovery poll starts) instead of silently retrying forever.
+      recheckHealth();
     } else if (s === 'open') {
       if (state.health.ws) { delete state.health.ws; render(); }
     }
   });
 }
 
+hydratePrefs();
 restoreChat();
 render = mount(document.getElementById('app'), view);
 requestAnimationFrame(syncAriaCurrent);
@@ -2029,12 +3126,60 @@ requestAnimationFrame(syncAriaCurrent);
 // (they read window.innerWidth only at render time).
 window.addEventListener('resize', debounce(() => scheduleRender(), 150));
 
-// Browser Back/forward: re-sync tab + selected session from the hash.
+// Scroll to + focus a settings panel by its id (section= deep link), reusing
+// the data-prog-focus pattern so the programmatic focus ring is suppressed.
+function focusSettingsSection(id) {
+  state.settingsSection = id;
+  requestAnimationFrame(() => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ block: 'start' });
+    if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1');
+    el.setAttribute('data-prog-focus', '');
+    try { el.focus({ preventScroll: true }); } catch {}
+    const clear = () => { el.removeAttribute('data-prog-focus'); el.removeEventListener('blur', clear); };
+    el.addEventListener('blur', clear);
+  });
+}
+
+// Browser Back/forward: diff the FULL hash param set against state and re-sync
+// each piece. Everything here runs with writeHash:false / fromHash:true so the
+// handler never clobbers or re-pushes the entry it just popped.
 window.addEventListener('popstate', () => {
-  const { sid, tab } = readHash();
-  if (sid && sid !== state.selectedSid) { state.tab = 'history'; loadSession(sid); }
-  else if (!sid && tab && tab !== state.tab) navTo(tab);
-  else if (!sid && !tab && state.tab !== 'chat') navTo('chat');
+  const hp = readHash();
+  const tab = hp.tab || 'chat';
+  if (tab !== state.tab) navTo(tab, { writeHash: false });
+  // Session selection: honor tab= when present (tab=chat&sid resumes in chat,
+  // anything else - or a bare sid - opens it in history).
+  if (hp.sid && hp.sid !== state.selectedSid) {
+    if (tab === 'chat') resumeInChat({ sid: hp.sid }, { fromHash: true });
+    else loadSession(hp.sid, { fromHash: true });
+  } else if (!hp.sid && state.selectedSid && tab === 'history') {
+    state.selectedSid = null;
+    state.events = [];
+    state.eventsLoaded = false;
+  }
+  if (tab === 'files') {
+    const cur = state.files && state.files.path;
+    if (hp.dir && hp.dir !== cur) {
+      // Restore the file= preview only once the directory listing resolves
+      // (the entry object lives in state.files.entries).
+      loadDir(hp.dir, { fromHash: true }).then(() => restoreFileFromHash(hp.file));
+    } else {
+      restoreFileFromHash(hp.file);
+    }
+  }
+  if (tab === 'history') {
+    const q = hp.q || '';
+    if (q !== state.searchQ) {
+      state.searchQ = q;
+      if (q.trim().length >= 2) runSearch();
+      else { state.searchHits = null; state.searchBusy = false; }
+    }
+    state.projectFilter = hp.project || '';
+  }
+  if (tab === 'settings' && hp.section) focusSettingsSection(hp.section);
+  render();
 });
 
 window.__agentgui = { state, render };
@@ -2050,14 +3195,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; }
@@ -2070,13 +3250,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();