agentgui 1.0.962 → 1.0.964

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, PromptDialog, ConfirmDialog, DropZone, UploadProgress, FilterPills, SessionMeta } = 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, BulkBar, Checkbox } = C;
 
 // One duration/bytes vocabulary across every surface: prefer the kit's shared
 // formatters (exported alongside the components), fall back to the local
@@ -23,6 +23,7 @@ const state = {
   chatCwd: lsGet('agentgui.cwd') || '',
   chat: { messages: [], busy: false, abort: null, draft: '', resumeSid: null, confirmingEdit: null, totalCost: 0 },
   agentsError: null,
+  agentsLoading: false,
   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)
@@ -87,6 +88,7 @@ function writeHash({ push = false } = {}) {
   // passive state sync (search text, filter resets).
   (push ? history.pushState : history.replaceState).call(history, null, '', url);
 }
+const plural = (n, w) => n + ' ' + w + (n === 1 ? '' : 's');
 function fmtRelTime(ts) {
   if (!ts) return '';
   const s = Math.round((Date.now() - ts) / 1000);
@@ -237,6 +239,8 @@ function agentAvailable(id) { const a = agentById(id); return !a || a.available
 // exists to drive are reachable without scanning a flat 17-item list. This
 // ordering is agentgui's orchestration priority, so it stays in the host and is
 // passed pre-sorted to the (app-agnostic) AgentChat kit.
+// Protocol ids are plumbing vocabulary; rows speak product words.
+const PROTOCOL_WORDS = { acp: 'managed server', cli: 'local CLI', direct: 'local CLI' };
 const PRIMARY_AGENTS = ['claude-code', 'opencode', 'kilo', 'agy'];
 function sortedAgents() {
   const rank = (a) => {
@@ -284,7 +288,7 @@ function navTo(tab, { writeHash: doWriteHash = true, push = true } = {}) {
   // 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');
+  announce('now on ' + tab + ' tab');
   render();
   // Move focus into the new region for keyboard/AT users.
   requestAnimationFrame(() => {
@@ -498,6 +502,7 @@ const SHORTCUTS = [
   { keys: 'Esc', desc: 'close overlays, cancel confirms, stop generation, or blur the field' },
   { keys: 'Up / Down / Home / End', desc: 'move the focused file row (files grid)' },
   { keys: 'Enter / Backspace', desc: 'open the focused file / go up a directory (files grid)' },
+  { keys: 'Ctrl/Cmd+A', desc: 'select all shown files (files grid); Shift+click selects a range' },
   { keys: 'Left / Right', desc: 'previous / next file (file preview)' },
 ];
 
@@ -535,10 +540,10 @@ function view() {
   } else if (state.tab === 'chat') {
     crumbLeaf = state.selectedAgent ? (agentById(state.selectedAgent)?.name || state.selectedAgent) : 'no agent';
   } else if (state.tab === 'files') {
-    // 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));
+    // ONE breadcrumb owner: the in-page BreadcrumbPath is the interactive
+    // navigator, so the top crumb names only the tab (mirroring live/settings).
+    // Duplicating the full path in both bars read as a layout mistake.
+    crumbLeaf = 'files';
   } else if (state.tab === 'live') {
     crumbLeaf = 'live · ' + ((state.active && state.active.length) || 0);
   } else if (state.tab === 'settings') {
@@ -550,8 +555,10 @@ function view() {
   const agentLabel = state.selectedAgent
     ? 'agent: ' + (agentById(state.selectedAgent)?.name || state.selectedAgent) + (state.selectedModel ? ' · ' + state.selectedModel : '')
     : 'no agent';
+  // The default (same-origin) backend is implementation detail, not status -
+  // the footer names a backend only when the user pointed at a custom one.
   const status = Status({
-    left: [state.backend || 'same-origin', ok ? 'connected' : 'offline'],
+    left: [state.backend || null, ok ? 'connected' : 'offline'].filter(Boolean),
     right: [agentLabel, 'press ? for shortcuts'],
   });
 
@@ -653,6 +660,16 @@ function sessionGroups(sessionsView) {
   return groups;
 }
 
+// Tool errors are routine in agent transcripts (every failed command counts),
+// so "has any error" is not a signal - it painted every real session flame.
+// A session reads as errored only when failures DOMINATE it: several errors
+// AND a meaningful share of all its events.
+function sessionErrorDense(s) {
+  const errors = Number(s?.errors) || 0;
+  const events = Number(s?.events) || 0;
+  return errors >= 3 && errors / Math.max(events, 1) > 0.15;
+}
+
 // The sessions column (conversation list) shared by chat + history. Selecting a
 // row on the chat tab resumes it in chat; on the history tab it loads its events.
 function sessionsColumn() {
@@ -693,21 +710,31 @@ 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.claudeSessionId || a.sessionId));
-  const items = sliced.map((s) => ({
-    sid: s.sid,
-    title: projectLabel(s.title) || projectLabel(s.project) || s.sid,
-    project: projectLabel(s.project) || '',
-    time: fmtRelTime(s.last),
-    agent: undefined,
-    running: runningSids.has(s.sid),
-    unread: false,
-    rail: s.errors ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
-  }));
+  const items = sliced.map((s) => {
+    const title = projectLabel(s.title) || projectLabel(s.project) || s.sid;
+    const project = projectLabel(s.project) || '';
+    return {
+      sid: s.sid,
+      title,
+      // title==project would print the same word twice in one row; the sub then
+      // carries only the time (and agent when present).
+      project: project === title ? '' : project,
+      time: fmtRelTime(s.last),
+      agent: undefined,
+      running: runningSids.has(s.sid),
+      unread: false,
+      // Tool errors are NORMAL in agent sessions (a failed Bash call counts) -
+      // flame-on-any-error painted every real session red. Flame only when
+      // failures dominate the session (error-dense), the recency-not-cumulative
+      // rule the live tab already follows.
+      rail: sessionErrorDense(s) ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
+    };
+  });
   return ConversationList({
     sessions: items,
     // Per-tab caption: selecting a row does different things on chat vs history,
     // so disambiguate the visually-identical rows (W17).
-    caption: state.tab === 'chat' ? 'Resume a conversation in chat' : 'Browse a session\'s events',
+    caption: state.tab === 'chat' ? 'Resume a conversation in chat' : 'Browse a conversation\'s events',
     // Today/Yesterday/This-week + a pinned Running section, the Claude-Desktop
     // Chats shape. Groups reference sids the kit maps back to the items above.
     groups: sessionGroups(sliced),
@@ -742,8 +769,16 @@ async function loadDir(dirPath, { fromHash = false } = {}) {
     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; }
+    // the resolved directory actually changed. The multi-select set follows the
+    // same rule: cleared on a real directory change, pruned to the surviving
+    // entries on an in-place refresh (a deleted file must not stay marked).
+    if (j.path !== state.files.path) {
+      state.files.filter = ''; state.files.shown = null;
+      state.files.marked = new Set(); state.files._lastMarkIdx = null;
+    } else if (state.files.marked && state.files.marked.size) {
+      const alive = new Set((j.entries || []).map((e) => e.path || e.name));
+      state.files.marked = new Set([...state.files.marked].filter((p) => alive.has(p)));
+    }
     state.files.path = j.path;
     state.files.segments = j.segments || [];
     state.files.entries = j.entries || [];
@@ -828,6 +863,106 @@ function openFileDialog(kind, file) {
   state.files.dialog = { kind, file: file || null, error: null, busy: false };
   render();
 }
+// --- multi-select (marked) helpers. Marked entries are keyed by path so the
+// set survives sort/filter changes; loadDir owns clearing/pruning it.
+function filesMarked() {
+  if (!(state.files.marked instanceof Set)) state.files.marked = new Set();
+  return state.files.marked;
+}
+function markFile(f, { range = false } = {}) {
+  const marked = filesMarked();
+  const key = f.path || f.name;
+  const list = state.files._sorted || [];
+  const idx = list.findIndex((e) => (e.path || e.name) === key);
+  if (range && state.files._lastMarkIdx != null && idx >= 0) {
+    // Shift-click: mark the whole span between the anchor and this row (always
+    // mark, never unmark - the common bulk gesture; EACCES rows are skipped).
+    const [a, b] = [Math.min(state.files._lastMarkIdx, idx), Math.max(state.files._lastMarkIdx, idx)];
+    for (const e of list.slice(a, b + 1)) {
+      if (e.permissions === 'EACCES') continue;
+      marked.add(e.path || e.name);
+    }
+  } else if (marked.has(key)) marked.delete(key);
+  else marked.add(key);
+  state.files._lastMarkIdx = idx >= 0 ? idx : null;
+  render();
+}
+function clearFileSelection({ quiet = false } = {}) {
+  const marked = filesMarked();
+  if (!marked.size) return false;
+  marked.clear();
+  state.files._lastMarkIdx = null;
+  if (!quiet) announce('selection cleared');
+  render();
+  return true;
+}
+// Bulk delete every marked entry via the same confined endpoint the per-row
+// delete uses. Partial failure keeps the FAILED paths marked (so a retry
+// targets exactly what's left) and surfaces a count in the dialog.
+async function runBulkDelete() {
+  const d = state.files.dialog;
+  if (!d || d.kind !== 'bulk-delete' || d.busy) return;
+  const marked = filesMarked();
+  const targets = (state.files.entries || []).filter((e) => marked.has(e.path || e.name));
+  if (!targets.length) { state.files.dialog = null; render(); return; }
+  d.busy = true; d.error = null; render();
+  const results = await Promise.allSettled(
+    targets.map((e) => B.deleteEntry(state.backend, e.path, e.type === 'dir')));
+  const failed = targets.filter((_, i) => results[i].status === 'rejected');
+  const okCount = targets.length - failed.length;
+  if (!failed.length) {
+    state.files.dialog = null;
+    marked.clear(); state.files._lastMarkIdx = null;
+    announce('deleted ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries'));
+  } else {
+    // Keep only the failures marked; report the split inside the dialog.
+    state.files.marked = new Set(failed.map((e) => e.path || e.name));
+    const firstErr = results.find((r) => r.status === 'rejected');
+    d.busy = false;
+    d.error = 'deleted ' + okCount + ' of ' + targets.length + ' - '
+      + (failed.length === 1 ? '1 entry' : failed.length + ' entries') + ' failed ('
+      + fileMutationCopy(firstErr.reason || {}) + '). The failed entries stay selected.';
+  }
+  await loadDir(state.files.path, { fromHash: true });
+  render();
+}
+// Bulk move every marked entry into a destination directory (confined
+// /api/move). Same partial-failure contract as bulk delete: failed paths
+// stay marked, the split reports inside the dialog.
+async function runBulkMove(destDir) {
+  const d = state.files.dialog;
+  if (!d || d.kind !== 'bulk-move' || d.busy) return;
+  const marked = filesMarked();
+  const targets = (state.files.entries || []).filter((e) => marked.has(e.path || e.name));
+  if (!targets.length) { state.files.dialog = null; render(); return; }
+  d.busy = true; d.error = null; render();
+  // Validate the destination once up front so 20 identical 403s read as one
+  // clear message instead of a partial-failure split.
+  try { await B.statPath(state.backend, destDir); }
+  catch (e) {
+    d.busy = false;
+    d.error = e.status === 404 ? 'that folder does not exist' : fileMutationCopy(e);
+    render(); return;
+  }
+  const results = await Promise.allSettled(
+    targets.map((e) => B.moveEntry(state.backend, e.path, destDir)));
+  const failed = targets.filter((_, i) => results[i].status === 'rejected');
+  const okCount = targets.length - failed.length;
+  if (!failed.length) {
+    state.files.dialog = null;
+    marked.clear(); state.files._lastMarkIdx = null;
+    announce('moved ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries'));
+  } else {
+    state.files.marked = new Set(failed.map((e) => e.path || e.name));
+    const firstErr = results.find((r) => r.status === 'rejected');
+    d.busy = false;
+    d.error = 'moved ' + okCount + ' of ' + targets.length + ' - '
+      + (failed.length === 1 ? '1 entry' : failed.length + ' entries') + ' failed ('
+      + fileMutationCopy(firstErr.reason || {}) + '). The failed entries stay selected.';
+  }
+  await loadDir(state.files.path, { fromHash: true });
+  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.
@@ -939,6 +1074,35 @@ function fileDialog() {
       onConfirm: () => runFileMutation(() => B.deleteEntry(state.backend, d.file.path, isDir), 'deleted ' + d.file.name),
     });
   }
+  if (d.kind === 'bulk-delete') {
+    const n = filesMarked().size;
+    const hasDir = (state.files.entries || []).some((e) => filesMarked().has(e.path || e.name) && e.type === 'dir');
+    return ConfirmDialog({
+      title: 'Delete ' + n + ' selected ' + (n === 1 ? 'entry' : 'entries'),
+      message: (hasDir
+        ? 'Folders are deleted with everything inside them. '
+        : '') + 'This cannot be undone.',
+      error: d.error || null, busy: !!d.busy,
+      confirmLabel: d.busy ? 'deleting...' : 'delete ' + n, cancelLabel: 'cancel', destructive: true,
+      onCancel: closeFileDialog,
+      onConfirm: runBulkDelete,
+    });
+  }
+  if (d.kind === 'bulk-move') {
+    const n = filesMarked().size;
+    return PromptDialog({
+      title: 'Move ' + n + ' selected ' + (n === 1 ? 'entry' : 'entries'),
+      value: state.files.path || '', placeholder: 'destination folder path',
+      error: d.error || null, busy: !!d.busy,
+      confirmLabel: d.busy ? 'moving...' : 'move ' + n, cancelLabel: 'cancel',
+      onCancel: closeFileDialog,
+      onConfirm: (v) => {
+        if (!v) { d.error = 'enter a destination folder'; render(); return; }
+        if (v === state.files.path) { d.error = 'already in that folder - enter a different destination'; render(); return; }
+        runBulkMove(v);
+      },
+    });
+  }
   if (d.kind === 'mkdir') {
     return PromptDialog({
       title: 'New folder', value: '', placeholder: 'folder name',
@@ -1056,7 +1220,9 @@ function filesMain() {
   // and an epoch (modifiedTs) so the kit's modified-sort orders by real time.
   const mapped = (f.entries || []).map((e) => {
     const ts = e.modified ? Date.parse(e.modified) : 0;
-    return { name: e.name, type: e.type, size: e.size, modified: ts ? fmtRelTime(ts) : null, modifiedTs: ts, path: e.path };
+    // permissions rides along so the kit's EACCES/read-only tag, disabled-open
+    // and unmarkable-checkbox logic actually fire (it was silently dropped here).
+    return { name: e.name, type: e.type, size: e.size, modified: ts ? fmtRelTime(ts) : null, modifiedTs: ts, path: e.path, permissions: e.permissions };
   });
   const filtered = f.filter
     ? mapped.filter(e => e.name.toLowerCase().includes(f.filter.toLowerCase()))
@@ -1075,6 +1241,20 @@ function filesMain() {
       shown: f.shown,
       onShowMore: (n) => { state.files.shown = n; render(); },
       emptyText: f.filter ? 'No files match "' + f.filter + '"' : 'Empty directory',
+      // Multi-select: marked is path-keyed; shift-click ranges over the same
+      // sorted order the grid shows; select-all covers the SHOWN window only.
+      selectable: !!f.path,
+      marked: filesMarked(),
+      onMark: markFile,
+      onSelectAll: (keys) => { state.files.marked = new Set(keys); state.files._lastMarkIdx = null; announce(keys.length + ' selected'); render(); },
+      onClearSelection: () => clearFileSelection(),
+      // Density: list / compact / thumbnails. Thumbnails stream through the
+      // confined /api/download (same fsAllowRoots as the listing - /api/image
+      // has its OWN narrower allowlist and 403s repo files; <img> ignores the
+      // attachment disposition).
+      density: f.density || 'list',
+      onDensity: (d2) => { state.files.density = d2; persistFilesPrefs(); render(); },
+      thumbUrl: (file) => B.downloadUrl(state.backend, file.path),
       sort: { key: f.sort || 'name', dir: f.sortDir || 'asc', onSort: (k) => {
         // 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';
@@ -1147,21 +1327,38 @@ function filesMain() {
     : body;
   return [
     offlineBanner(),
-    PageHeader({ compact: true, title: 'Files', lede: 'Browse and manage the server filesystem within the allowed roots. Click a folder to open it; pick one as the chat working directory.' }),
-    rootsRow ? h('div', { key: 'froots' }, rootsRow) : null,
-    h('div', { key: 'ftb' }, toolbar),
-    (f.uploads && f.uploads.length) ? h('div', { key: 'fup' }, UploadProgress({
-      // 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),
+    PageHeader({ compact: true, dense: true, title: 'Files', lede: 'Browse and manage files in the allowed folders.' }),
+    // One vertical beat (.ds-files-stack gap) for the whole command stack -
+    // the bands used to butt edge-to-edge while the header gap was 24px.
+    // The .filter(Boolean) is load-bearing (webjsx keyed-children rule).
+    h('div', { key: 'fstack', class: 'ds-files-stack' }, ...[
+      rootsRow ? h('div', { key: 'froots' }, rootsRow) : null,
+      h('div', { key: 'ftb' }, toolbar),
+      // Bulk action strip - appears while a multi-select is active; delete runs
+      // through the same armed ConfirmDialog vocabulary as the per-row delete.
+      filesMarked().size ? h('div', { key: 'fbulk' }, BulkBar({
+        count: filesMarked().size,
+        noun: 'entry',
+        busy: !!(f.dialog && (f.dialog.kind === 'bulk-delete' || f.dialog.kind === 'bulk-move') && f.dialog.busy),
+        actions: [
+          { label: 'move selected', onClick: () => openFileDialog('bulk-move') },
+          { label: 'delete selected', danger: true, onClick: () => openFileDialog('bulk-delete') },
+        ],
+        onClear: () => clearFileSelection(),
+      })) : null,
+      (f.uploads && f.uploads.length) ? h('div', { key: 'fup' }, UploadProgress({
+        // Recovery affordances per row: 'replace' on a name collision (409),
+        // dismiss on any error row (errors otherwise persist until the next batch).
+        items: f.uploads.map((it) => (it.error && it.status === 409 && !it._retrying)
+          ? { ...it, actions: [{ label: 'replace', onClick: () => retryUploadOverwrite(it) }] }
+          : it),
+        onDismiss: (item, i) => {
+          const src = (state.files.uploads || [])[i];
+          if (src && src.error) dismissUpload(src);
+        },
+      })) : null,
+      h('div', { key: 'fbody' }, droppableBody),
+    ].filter(Boolean)),
     fileDialog(),
     // Inline pane handles wide-screen preview; the modal is only the <900px
     // fallback (the pane has no room there).
@@ -1178,7 +1375,7 @@ 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' }));
+  lsSet(FILES_PREFS_KEY, JSON.stringify({ sort: state.files.sort || 'name', sortDir: state.files.sortDir || 'asc', density: state.files.density || 'list' }));
 }
 function hydratePrefs() {
   try {
@@ -1187,7 +1384,7 @@ function hydratePrefs() {
   } 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; }
+    if (fp) { if (fp.sort) state.files.sort = fp.sort; if (fp.sortDir) state.files.sortDir = fp.sortDir; if (fp.density) state.files.density = fp.density; }
   } catch {}
 }
 
@@ -1223,7 +1420,9 @@ async function stopAllActive(sessions) {
   state.live.bulkStopError = failed
     ? failed + ' session' + (failed === 1 ? '' : 's') + ' did not stop - try again'
     : null;
-  announce('stopped ' + okSids.length + ' of ' + sids.length + ' sessions');
+  announce(failed
+    ? 'stopped ' + okSids.length + ' of ' + sids.length + ' sessions'
+    : 'stopped ' + plural(okSids.length, 'session'));
   await refreshActive();
   render();
   return okSids;
@@ -1387,7 +1586,7 @@ function liveMain() {
             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.' }),
+    PageHeader({ compact: true, dense: true, title: 'Live sessions', lede: 'Watch, open, and stop running agent sessions.' }),
     SessionDashboard({
       sessions,
       offline,
@@ -1427,7 +1626,8 @@ function liveMain() {
         state.live.selected = sel;
         render();
       },
-      emptyText: 'No live sessions — start a chat or run a local agent.',
+      emptyText: 'No live sessions — agents you start (or run locally) appear here.',
+      emptyAction: { label: 'start a chat', onClick: () => { navTo('chat'); } },
       onStop: (s) => { if (!s.external) stopActiveChat(s.sid); },
       onStopAll: async (all) => {
         state.live.confirmingStopAll = false;
@@ -1570,8 +1770,8 @@ 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: confirmNewChat, children: 'yes, clear chat' }),
-        Btn({ key: 'cnno', onClick: () => { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); }, children: 'cancel' })] }));
+        Btn({ key: 'cnno', onClick: () => { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); }, children: 'cancel' }),
+        Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes, clear chat' })] }));
   }
   if (state.cwdError) {
     banners.push(Alert({ key: 'cwderr', kind: 'warn', title: 'Invalid working directory', children: state.cwdError }));
@@ -1604,8 +1804,8 @@ function chatMain() {
     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' })] }));
+        Btn({ key: 'ceno', onClick: cancelEditAndResend, children: 'cancel' }),
+        Btn({ key: 'ceyes', danger: true, onClick: confirmEditAndResend, children: 'continue' })] }));
   }
   const lastMsg = state.chat.messages.length ? state.chat.messages[state.chat.messages.length - 1] : null;
   const lastErr = lastMsg ? lastMsg.error : null;
@@ -1670,9 +1870,9 @@ function chatMain() {
             title: 'change working directory',
             onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); },
           },
-          userTurnCount > 0 ? userTurnCount + ' turns' : null,
+          userTurnCount > 0 ? plural(userTurnCount, 'turn') : null,
           (state.chat.resumeSid && state.selectedAgent === 'claude-code')
-            ? 'continues session ' + state.chat.resumeSid.slice(0, 8)
+            ? 'continues session ' + state.chat.resumeSid.slice(0, 8) + '…'
             : null,
         ].filter(Boolean),
       } : undefined,
@@ -2215,26 +2415,28 @@ function historyMain() {
       reconnectAlert(),
       PageHeader({
         compact: true,
+        dense: true,
         title: 'History',
-        lede: 'Pick a session from the sidebar - events stream live from ccsniff /v1/history.',
+        lede: 'Pick a conversation to inspect its events as they happen.',
       }),
       h('div', { key: 'histempty', class: 'history-empty', role: 'status' },
         h('p', { key: 'gt', class: 'history-empty-title' },
-          count ? 'Select a session to view its events' : 'No sessions yet'),
+          count ? 'Select a conversation to view its events' : 'No conversations yet'),
         h('p', { key: 'gs', class: 'lede history-empty-sub' },
           count
-            ? count + ' session' + (count === 1 ? '' : 's') + ' available · use the search box or press / to filter'
-            : 'Start a chat or run a local coding agent - its session will appear here live.')),
+            ? count + ' conversation' + (count === 1 ? '' : 's') + ' available · use the search box or press / to filter'
+            : 'Start a chat or run a local coding agent - its conversation will appear here live.')),
     ].filter(Boolean);
   }
 
   const sess = (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
   const lede = sess
-    ? (projectLabel(sess.project) || sess.cwd || '?') + ' · ' + (sess.events || 0) + ' events · ' + (sess.userTurns || 0) + ' turns · ' + fmtRelTime(sess.last)
+    ? (projectLabel(sess.project) || sess.cwd || '?') + ' · ' + plural(sess.events || 0, 'event') + ' · ' + plural(sess.userTurns || 0, 'turn') + ' · ' + fmtRelTime(sess.last)
     : state.selectedSid;
 
   const head = PageHeader({
     compact: true,
+    dense: true,
     title: truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || state.selectedSid, 40, 80),
     lede,
   });
@@ -2242,7 +2444,7 @@ function historyMain() {
   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: 'copy', onClick: copySid, children: copyToast || 'copy session id' }),
     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' }),
@@ -2255,10 +2457,12 @@ function historyMain() {
     // 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 - '),
+          h('span', { key: 'noevtxt' }, 'no events in this session'),
           Btn({ key: 'reload', onClick: () => loadSession(state.selectedSid), children: 'reload' }))
-      : h('div', { key: 'loading', class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ key: 'spin', size: 'sm' }),
-          state.eventsSlow ? 'Indexing your Claude history — the first load can take a minute…' : 'loading events…');
+      // Shape-matched skeleton rows (kit EventList loading state) instead of a
+      // lone spinner collapsing the slowest pane in the product.
+      : h('div', { key: 'loading' }, EventList({ items: [], loading: true,
+          loadingText: 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);
   }
 
@@ -2282,7 +2486,7 @@ function historyMain() {
     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: 'session id', value: state.selectedSid.slice(0, 8) + '…', title: state.selectedSid, onCopy: () => copyText(state.selectedSid, 'session id 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) },
@@ -2296,7 +2500,7 @@ function historyMain() {
       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 - '),
+        h('span', { key: 'noftxt' }, 'no events match this filter'),
         Btn({ key: 'clearf', onClick: () => { state.eventFilter = 'all'; render(); }, children: 'clear filter' })),
     ] })].filter(Boolean);
   }
@@ -2325,7 +2529,7 @@ function historyMain() {
     head,
     actions,
     Panel({
-      title: total + ' events' + (ef !== 'all' ? ' (' + ef + ' filter)' : '') + (hiddenCount > 0 ? ' (showing last ' + shown.length + '; ' + hiddenCount + ' older)' : ''),
+      title: plural(total, 'event') + (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
@@ -2525,7 +2729,7 @@ function historySide() {
           title: projectLabel(s.title) || projectLabel(s.project) || s.sid,
           // Always show the error count so 0 reads as "no errors", not "untracked".
           sub: fmtRelTime(s.last) + ' · ' + (s.events || 0) + ' ev · ' + (s.tools || 0) + ' tools · ' + (s.errors || 0) + ' err',
-          rail: s.errors ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
+          rail: sessionErrorDense(s) ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
           active: s.sid === state.selectedSid,
           onClick: () => loadSession(s.sid),
         })
@@ -2572,9 +2776,12 @@ function historySide() {
                 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' },
-              h('input', { type: 'checkbox', checked: state.showSubagents, onChange: (e) => { state.showSubagents = e.target.checked; render(); } }),
-              'show subagents (' + (state.showSubagents ? subagentCount + ' shown' : subagentCount + ' hidden') + ')')
+          ? h('div', { key: 'subtog', class: 'lede subagent-toggle' },
+              Checkbox({
+                checked: state.showSubagents,
+                label: 'show subagents (' + (state.showSubagents ? subagentCount + ' shown' : subagentCount + ' hidden') + ')',
+                onChange: (v) => { state.showSubagents = v; render(); },
+              }))
           : null,
         state.historyError
           ? h('p', { key: 'err', class: 'lede field-error', role: 'alert' }, state.historyError)
@@ -2662,6 +2869,7 @@ function settingsMain() {
   return [
     PageHeader({
       compact: true,
+      dense: true,
       title: 'Settings',
       // The page lede describes the PAGE; the backend explanation lives in the
       // backend panel where it applies.
@@ -2675,7 +2883,9 @@ function settingsMain() {
         key: 'backendForm',
         onSubmit: (e) => { e.preventDefault(); saveBackend(); },
       }, [
-        h('p', { key: 'blede', class: 'lede', style: 'margin:0 0 .5em' }, 'Point agentgui at any backend. Blank = same-origin (ccsniff in-process). ?backend=... or the field below persists via localStorage.'),
+        h('p', { key: 'blede', class: 'lede', style: 'margin:0 0 .5em',
+          title: 'Also settable with a ?backend= URL parameter; the value persists in this browser.' },
+          'Connect to a different agentgui server. Leave blank to use this one.'),
         TextField({
           key: 'backendField',
           label: 'backend url',
@@ -2740,8 +2950,8 @@ function serverPanel() {
     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')),
+      h('div', { key: 'swc', class: 'lede' }, 'connected clients: ' + (wsClients != null ? wsClients : 'unknown')),
+      h('div', { key: 'spd', class: 'lede' }, 'projects folder: ' + (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'),
@@ -2806,8 +3016,8 @@ function preferencesPanel() {
         ? Alert({ key: 'cld', kind: 'warn', title: 'Clear all local data?',
             children: [
               h('span', { key: 'cldtxt' }, 'Removes saved chat, agent/model/cwd, and backend from this browser. This cannot be undone. '),
-              Btn({ key: 'cldyes', danger: true, onClick: clearLocalData, children: 'clear' }),
-              Btn({ key: 'cldno', onClick: () => { state.confirmingClearData = false; render(); }, children: 'cancel' })] })
+              Btn({ key: 'cldno', onClick: () => { state.confirmingClearData = false; render(); }, children: 'cancel' }),
+              Btn({ key: 'cldyes', danger: true, onClick: clearLocalData, children: 'clear' })] })
         : Btn({ key: 'cldbtn', onClick: clearLocalData, children: 'clear local data' }),
     ].filter(Boolean),
   });
@@ -2835,11 +3045,10 @@ function agentsPanel() {
           const acp = acpStatusFor(a.id);
           const avail = a.available !== false;
           const usable = avail || a.npxInstallable;     // selectable from this row
-          const bits = [a.protocol || 'agent'];
+          const bits = [PROTOCOL_WORDS[a.protocol] || 'agent'];
           if (!avail) bits.push(a.npxInstallable ? 'runs via npx' : 'not installed');
           if (acp) bits.push(acp.healthy ? 'running healthy' : (acp.running ? 'running' : 'stopped'));
-          if (acp && acp.port) bits.push('port ' + acp.port);
-          if (acp && acp.restartCount) bits.push(acp.restartCount + ' restarts');
+          if (acp && acp.restartCount > 1) bits.push('restarted ' + acp.restartCount + ' times');
           return Row({
             key: 'ag' + a.id,
             rank: String(i + 1).padStart(3, '0'),
@@ -2856,7 +3065,16 @@ function agentsPanel() {
             onClick: usable ? () => { navTo('chat'); selectAgent(a.id); } : undefined,
           });
         })
-      : [h('p', { key: 'none', class: 'lede' }, 'no agents loaded')]),
+      // The empty array means one of three things; never let an in-flight load
+      // read as a broken registry.
+      : [state.agentsLoading
+          ? h('div', { key: 'agload', class: 'lede empty-state', role: 'status', 'aria-live': 'polite' },
+              Spinner({ key: 'spin', size: 'sm' }), 'loading agents…')
+          : (state.agentsError
+              ? h('div', { key: 'agfail', class: 'lede empty-state' },
+                  h('span', { key: 'agfailtxt' }, 'the agent list failed to load'),
+                  Btn({ key: 'agretry2', onClick: () => loadAgents(), children: 'retry' }))
+              : h('p', { key: 'none', class: 'lede' }, 'no agents loaded'))]),
     ].filter(Boolean),
   });
 }
@@ -3019,8 +3237,10 @@ async function loadSession(sid, { focusEventI = null, focusEventTs = null, fromH
 // state.agentsError so the chat tab can surface it with a retry control.
 async function loadAgents() {
   state.agentsError = null;
+  state.agentsLoading = true;
   try {
     state.agents = await B.listAgents(state.backend);
+    state.agentsLoading = false;
     // Agent selection priority: the agent a restored transcript belongs to (so
     // the chat isn't shown under the wrong agent), else the saved picker agent,
     // else first available, else first.
@@ -3031,6 +3251,7 @@ async function loadAgents() {
     render();
     return true;
   } catch (e) {
+    state.agentsLoading = false;
     state.agentsError = errText(e);
     console.warn('agents fetch failed:', e.message);
     render();
@@ -3256,6 +3477,9 @@ window.addEventListener('keydown', (e) => {
       clearTimeout(_stopAllArmTimer); clearTimeout(_stopSelArmTimer);
       render(); announce('stop cancelled'); return;
     }
+    // A live file multi-select is transient state too: Escape drops it before
+    // falling through to stop-generation.
+    if (state.tab === 'files' && filesMarked().size) { clearFileSelection(); return; }
     if (state.chat.busy && state.tab === 'chat') { cancelChat(); announce('generation stopped'); return; }
     return;
   }