agentgui 1.0.963 → 1.0.965

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, BulkBar } = 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(() => {
@@ -536,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') {
@@ -551,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'],
   });
 
@@ -654,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() {
@@ -694,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),
@@ -900,6 +926,43 @@ async function runBulkDelete() {
   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.
@@ -1025,6 +1088,21 @@ function fileDialog() {
       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',
@@ -1249,30 +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),
-    // 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.busy),
-      actions: [{ 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),
+    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).
@@ -1334,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;
@@ -1498,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,
@@ -1538,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;
@@ -1681,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 }));
@@ -1715,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;
@@ -1781,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,
@@ -2326,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,
   });
@@ -2353,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' }),
@@ -2366,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);
   }
 
@@ -2393,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) },
@@ -2407,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);
   }
@@ -2436,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
@@ -2636,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),
         })
@@ -2683,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)
@@ -2773,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.
@@ -2786,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',
@@ -2851,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'),
@@ -2917,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),
   });
@@ -2946,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'),
@@ -2967,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),
   });
 }
@@ -3130,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.
@@ -3142,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();

package/site/app/js/backend.js

@@ -120,6 +120,7 @@ export async function statPath(base, p) {
 export function renameEntry(base, filePath, newName) { return mutateJSON(base, '/api/rename', { path: filePath, newName }); }
 export function deleteEntry(base, filePath, recursive) { return mutateJSON(base, '/api/delete', { path: filePath, recursive: !!recursive }); }
 export function makeDir(base, dirPath, name) { return mutateJSON(base, '/api/mkdir', { dir: dirPath, name }); }
+export function moveEntry(base, filePath, destDir, overwrite) { return mutateJSON(base, '/api/move', { path: filePath, destDir, overwrite: !!overwrite }); }
 
 // Upload a File/Blob as raw bytes (PUT /api/upload-file). onProgress is not
 // available via fetch streaming everywhere, so progress is per-file (done or
@@ -199,20 +200,26 @@ function scheduleReconnect() {
 }
 
 function wsUrl(base) {
-  let proto, host;
+  let proto, host, prefix = '';
   if (base) {
     try {
       const u = new URL(base);
       proto = u.protocol === 'https:' ? 'wss:' : 'ws:';
       host = u.host;
+      // A custom backend URL may carry a routing path prefix (e.g. https://host/gm).
+      prefix = u.pathname.replace(/\/+$/, '');
     } catch {}
   }
   if (!host) {
     proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
     host = location.host;
+    // Same-origin: honour the server-injected router prefix so the socket is
+    // routed correctly behind a path-routing proxy (e.g. nginx /gm/ -> 9897).
+    const bu = (typeof window !== 'undefined' && window.__BASE_URL) || '';
+    prefix = String(bu).replace(/\/+$/, '');
   }
   const tok = authToken();
-  return proto + '//' + host + SYNC_PATH + (tok ? '?token=' + encodeURIComponent(tok) : '');
+  return proto + '//' + host + prefix + SYNC_PATH + (tok ? '?token=' + encodeURIComponent(tok) : '');
 }
 
 function ensureWs(base) {
@@ -230,7 +237,9 @@ function ensureWs(base) {
       }
       resolve(_ws);
     });
-    _ws.addEventListener('error', (e) => { emitStatus('error'); reject(e); });
+    // The error Event has no .message; reject with a real Error so callers log
+    // a usable reason instead of "undefined" (e.g. "agents fetch failed: ...").
+    _ws.addEventListener('error', () => { emitStatus('error'); reject(new Error('WebSocket connection failed')); });
     _ws.addEventListener('close', () => {
       emitStatus('closed');
       for (const [, p] of _pending) p.reject(new Error('ws closed'));