agentgui 1.0.958 → 1.0.959

package/site/app/js/app.js

@@ -3,7 +3,7 @@ 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;
 
 const state = {
   backend: B.getBackend(),
@@ -15,7 +15,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: [],
@@ -32,27 +38,47 @@ const state = {
   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) {
@@ -206,7 +232,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.
@@ -230,7 +256,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.
@@ -390,6 +418,17 @@ 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 or composer' },
+  { keys: '?', desc: 'show shortcuts' },
+  { keys: 'Esc', desc: 'blur the focused field' },
+];
+
 function view() {
   const ok = state.health.status === 'ok';
   const liveActive = state.tab === 'history' && state.live.connected && (Date.now() - state.live.lastEventTs < 30000);
@@ -444,7 +483,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,6 +505,10 @@ function view() {
       cwd: state.chatCwd || '',
       toolCount: runningToolCount(),
       usage: state.chat.usage || null,
+      session: {
+        turns: state.chat.messages.filter(m => m.role === 'user').length,
+        cost: state.chat.totalCost || null,
+      },
       onSetCwd: () => { navTo('files'); },
     });
   } else if (state.tab === 'files' && state.files && state.files.preview && !isNarrow()) {
@@ -593,6 +636,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,7 +651,7 @@ 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 {
@@ -617,6 +661,11 @@ async function loadDir(dirPath) {
     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,9 +708,110 @@ 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() { 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) {
+    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, _file: f }));
+  state.files.uploads = items; render();
+  for (const it of items) {
+    try {
+      await B.uploadFile(state.backend, dir, it._file);
+      it.pct = 100; it.done = true;
+    } catch (e) {
+      it.error = fileMutationCopy(e);
+    }
+    render();
+  }
+  announce('upload finished');
+  await loadDir(dir, { fromHash: true });
+  // Keep error rows visible; clear the list entirely when everything landed.
+  if (!items.some(i => i.error)) state.files.uploads = null;
+  render();
+}
+// The active file dialog (rename/delete/mkdir) as a kit modal, or null.
+function fileDialog() {
+  const d = state.files && state.files.dialog;
+  if (!d) return null;
+  const err = d.error ? h('p', { key: 'fderr', class: 'lede', role: 'alert' }, d.error) : null;
+  if (d.kind === 'rename') {
+    return h('div', { key: 'fdlg' }, err, PromptDialog({
+      title: 'Rename ' + d.file.name, value: d.file.name, placeholder: 'new name',
+      confirmLabel: d.busy ? 'renaming...' : 'rename', cancelLabel: 'cancel',
+      onCancel: closeFileDialog,
+      onConfirm: (v) => { if (v && v !== d.file.name) runFileMutation(() => B.renameEntry(state.backend, d.file.path, v), 'renamed to ' + v); },
+    }));
+  }
+  if (d.kind === 'delete') {
+    const isDir = d.file.type === 'dir';
+    return h('div', { key: 'fdlg' }, err, 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.',
+      confirmLabel: d.busy ? 'deleting...' : 'delete', cancelLabel: 'cancel', destructive: true,
+      onCancel: closeFileDialog,
+      onConfirm: () => runFileMutation(() => B.deleteEntry(state.backend, d.file.path, isDir), 'deleted ' + d.file.name),
+    }));
+  }
+  if (d.kind === 'mkdir') {
+    return h('div', { key: 'fdlg' }, err, PromptDialog({
+      title: 'New folder', value: '', placeholder: 'folder name',
+      confirmLabel: d.busy ? 'creating...' : 'create', cancelLabel: 'cancel',
+      onCancel: closeFileDialog,
+      onConfirm: (v) => { if (v) 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).
 function filePreviewBody(file) {
@@ -697,8 +847,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 +937,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 +946,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,22 +975,84 @@ 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({ items: f.uploads })) : 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).
 async function stopAllActive(sessions) {
   const sids = (Array.isArray(sessions) ? sessions : (state.active || [])).map(s => s.sid || s.sessionId).filter(Boolean);
@@ -921,10 +1139,10 @@ function liveMain() {
       offline,
       streamState,
       activeSid: state.chat.resumeSid,            // W13
-      sort: { value: sortKey, onChange: (v) => { state.live.sort = v; render(); } },
+      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,10 +1150,24 @@ 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(); },
+      // Two-step bulk stops: arm first, execute on the confirmed click.
+      confirmingStopAll: !!lv.confirmingStopAll,
+      confirmingStopSelected: !!lv.confirmingStopSelected,
+      onArmStopAll: armStopAll,
+      onArmStopSelected: armStopSelected,
+      onStopSelected: (sids) => {
+        state.live.confirmingStopSelected = false;
+        clearTimeout(_stopSelArmTimer);
+        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),
+      onStopAll: (all) => {
+        state.live.confirmingStopAll = false;
+        clearTimeout(_stopAllArmTimer);
+        stopAllActive(all);
+      },
       onOpen: (s) => { resumeInChat({ sid: s.sid }); },
       onView: (s) => { navTo('history'); loadSession(s.sid); },
     }),
@@ -1016,15 +1248,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
@@ -1063,13 +1309,27 @@ function chatMain() {
   if (state.cwdError) {
     banners.push(Alert({ key: 'cwderr', kind: 'warn', title: 'Invalid working directory', children: state.cwdError }));
   }
+  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
@@ -1108,17 +1368,34 @@ function chatMain() {
       // 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),
+        bits: [agentName, state.selectedModel || null, state.chatCwd ? state.chatCwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : 'server default', userTurnCount > 0 ? userTurnCount + ' turns' : null].filter(Boolean),
         onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); },
       } : 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'] : [],
+      // W15: contextual follow-up chips derived from the settled last turn
+      // (tool error / code fence / file path), seeded statically otherwise.
+      followups: chatFollowups(),
       onFollowupClick: (t) => { if (!canSend()) return; state.chat.draft = t; sendChat(); },
+      // 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,
       // 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,
@@ -1133,11 +1410,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,6 +1425,20 @@ 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');
@@ -1175,7 +1467,7 @@ function newChat() {
   }
   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 };
   lsRemove(CHAT_KEY);
   render();
 }
@@ -1205,15 +1497,21 @@ function persistChat() {
     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 }));
+    const draft = (state.chat.draft || '').trim() ? state.chat.draft : '';
+    // Persist when there is a transcript OR a non-empty draft (a typed-but-not-
+    // sent message must survive a reload too).
+    if (!msgs.length && !draft) { lsRemove(CHAT_KEY); return; }
+    lsSet(CHAT_KEY, JSON.stringify({ messages: msgs, draft, resumeSid: state.chat.resumeSid, totalCost: state.chat.totalCost || 0, agent: state.selectedAgent, model: state.selectedModel }));
   } catch {}
 }
+const debouncedPersistDraft = debounce(persistChat, 500);
 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))
@@ -1239,14 +1537,70 @@ 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 */ }
@@ -1267,18 +1621,32 @@ function retryLastTurn() {
   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);
+  // 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();
+}
 
 async function sendChat() {
   const text = (state.chat.draft || '').trim();
@@ -1333,12 +1701,16 @@ async function sendChat() {
           turns: b.num_turns != null ? b.num_turns : null,
           durationMs: b.duration_ms != null ? b.duration_ms : null,
         };
+        // Accumulate cost ACROSS turns so the ContextPane session line shows
+        // the whole conversation's spend, not just the last turn's.
+        const cost = typeof b.total_cost_usd === 'number' ? b.total_cost_usd : (typeof u.cost === 'number' ? u.cost : 0);
+        if (cost) state.chat.totalCost = (state.chat.totalCost || 0) + cost;
         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;
@@ -1359,6 +1731,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 +1804,65 @@ 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') },
+      { label: 'events', value: String(state.events.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 +1885,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,13 +1909,27 @@ 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).
@@ -1495,10 +1962,14 @@ 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.draft = '';
   // Only claude-code supports --resume by sid; warn if we have to switch the
@@ -1578,7 +2049,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: (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 +2103,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' },
@@ -1734,6 +2205,7 @@ function settingsMain() {
     }),
     h('div', { key: 'settings-grid', class: 'settings-grid' }, [
     Panel({
+      id: 'backend',
       title: 'backend',
       children: h('form', {
         key: 'backendForm',
@@ -1767,18 +2239,53 @@ function settingsMain() {
       ]),
     }),
     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' }),
       ],
     }),
+    serverPanel(),
     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 +2295,34 @@ 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'),
+      h('div', { key: 'lsize', class: 'lede', style: 'margin:.5em 0' },
+        'local data: ' + (Math.round(lsBytes / 102.4) / 10) + ' KB across ' + lsKeys + ' key' + (lsKeys === 1 ? '' : 's')),
+      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
@@ -1823,6 +2345,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,8 +2386,16 @@ 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]));
@@ -1875,34 +2406,38 @@ 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);
   } 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 +2445,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 +2477,8 @@ async function loadSession(sid, { focusEventI = null, focusEventTs = null } = {}
   });
   try {
     state.events = await B.getSessionEvents(state.backend, sid);
+    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 +2506,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 +2530,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;
+  }
+}
 
-  const { sid: initialSid, tab: initialTab } = readHash();
-  if (initialSid) {
-    navTo('history');
+// 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();
+}
+
+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 +2629,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 +2648,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 };