agentgui 1.0.1114 → 1.0.1116

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, TextField, Select, Btn, Icon, IconButton, 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, ShortcutList, FocusTrap, AgentListSkeleton, flashComposerNote, toast, withBusy, GitStatusPanel, GitDiffView, WorktreeSwitcher, ModelsConfig, PluginsConfig } = C;
+const { AppShell, WorkspaceShell, WorkspaceRail, Topbar, Crumb, Side, Status, Chat, ChatComposer, AgentChat, ConversationList, SessionDashboard, Row, Panel, PageHeader, TextField, Select, Btn, Icon, IconButton, 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, ShortcutList, FocusTrap, AgentListSkeleton, flashComposerNote, toast, withBusy, GitStatusPanel, GitDiffView, WorktreeSwitcher, Badge } = C;
 
 // One duration/bytes vocabulary across every surface: prefer the kit's shared
 // formatters (exported alongside the components), fall back to the local
@@ -23,7 +23,12 @@ const state = {
   chatCwd: lsGet('agentgui.cwd') || '',
   chat: { messages: [], busy: false, abort: null, draft: '', resumeSid: null, confirmingEdit: null, totalCost: 0 },
   agentsError: null,
-  agentsLoading: false,
+  // true until the boot loadAgents() call resolves - starting false left a
+  // real window (mount -> boot's first render -> loadAgents() actually
+  // starting) where the picker rendered with an empty options list instead
+  // of the "loading agents…" placeholder, a transient state a toolbar button
+  // could source an undefined label/type from.
+  agentsLoading: true,
   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)
@@ -44,13 +49,9 @@ const state = {
   eventsLimit: 300,   // how many of the most-recent events to render; grows via "load older"
   files: { path: '', segments: [], entries: [], roots: [], loading: false, error: null, preview: null, sort: 'name', sortDir: 'asc', filter: '' },
   git: { loading: false, error: null, diff: '', commits: [], worktrees: [], files: [], file: '', worktreeBusy: false },
-  // Models tab: composed agent/provider availability (models.availability WS
-  // handler), fed into the design SDK's ModelsConfig component.
-  models: { data: null, loading: false, error: null, selectedProviderId: null },
-  // Plugins tab: agentgui has no freddie-style plugin host - the closest real
-  // extensibility surface is the discovered agent-CLI registry (agents.list),
-  // adapted to PluginsConfig's {name,surfaces,requires,enabled,status} shape.
-  plugins: { selected: null },
+  // One-time welcome banner naming what each tab is for. Shown until
+  // dismissed once, ever - a returning user has already learned the tabs.
+  showOnboarding: lsGet('agentgui.onboarded') !== '1',
 };
 
 // Two-step arm controls auto-reset after this delay so an accidental first click
@@ -177,6 +178,12 @@ function lsGet(k) { try { return localStorage.getItem(k); } catch { return null;
 function lsSet(k, v) { try { localStorage.setItem(k, v); } catch {} }
 function lsRemove(k) { try { localStorage.removeItem(k); } catch {} }
 
+function dismissOnboarding() {
+  state.showOnboarding = false;
+  lsSet('agentgui.onboarded', '1');
+  render();
+}
+
 // A single visually-hidden aria-live region for transient announcements (tab
 // changes, etc.) so screen-reader users hear context that's otherwise conveyed
 // only by focus movement or color.
@@ -324,24 +331,6 @@ function navTo(tab, { writeHash: doWriteHash = true, push = true } = {}) {
   // 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('');
-  // Chat's @-mention autocomplete (mentionFiles) reuses state.files.entries -
-  // seed it from the root listing on first chat visit so mentions work
-  // without requiring a prior Files-tab visit. Uses the same confined
-  // B.listDir the Files tab itself calls; failure is silent (mentionFiles
-  // just stays empty, same as never having visited Files).
-  if (tab === 'chat' && !state.files.entries.length && !state.files.loading && !state.files.error) {
-    B.listDir(state.backend, '').then((j) => {
-      if (!state.files.entries.length) state.files.entries = j.entries || [];
-      if (!state.files.roots.length) state.files.roots = j.roots || [];
-      render();
-    }).catch(() => {});
-  }
-  // Models tab: composed agent/provider availability, fetched on first visit
-  // (and via the ModelsConfig 'refresh' action thereafter).
-  if (tab === 'models' && !state.models.data && !state.models.loading && !state.models.error) loadModelsAvailability();
-  // Plugins tab reuses state.agents (agents.list) - same lazy load as chat's
-  // agent picker, so visiting Plugins directly (deep-link/reload) still works.
-  if (tab === 'plugins' && !state.agents.length && !state.agentsLoading && !state.agentsError) loadAgents();
   // 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 });
@@ -627,13 +616,19 @@ const SHORTCUTS = [
 
 function view() {
   const ok = state.health.status === 'ok';
-  const liveActive = state.tab === 'history' && state.live.connected && (Date.now() - state.live.lastEventTs < 30000);
-  const dotLabel = state.tab === 'history'
+  // history/live both read the SSE stream, not the REST health poll - a tab
+  // that shows its own "connecting to live stream" widget must agree with the
+  // header badge, since they are the same underlying connection. Showing the
+  // REST-derived "connected" here while the tab's own widget says otherwise
+  // is exactly the mismatch this guards against.
+  const streamTab = state.tab === 'history' || state.tab === 'live';
+  const liveActive = streamTab && state.live.connected && (Date.now() - state.live.lastEventTs < 30000);
+  const dotLabel = streamTab
     ? (state.live.error
         ? 'stream: ' + state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
         : (liveActive ? 'stream: live · ' + state.live.eventCount : (state.live.connected ? 'stream: live' : 'stream: connecting…')))
     : (ok ? (state.health.ws === 'reconnecting' ? 'connecting…' : 'connected') : 'offline');
-  const dotLive = state.tab === 'history' ? (liveActive || state.live.connected) : ok;
+  const dotLive = streamTab ? (liveActive || state.live.connected) : ok;
   // The status dot is drawn entirely by CSS (.status-dot::before) - a small
   // colored disc, real product design, not a text glyph. State drives its colour
   // via the modifier class; the label carries only words so AT reads "live", and
@@ -659,7 +654,15 @@ function view() {
       ? truncate(projectLabel(sel?.title) || projectLabel(sel?.project) || state.selectedSid, 24, 48)
       : 'all sessions';
   } else if (state.tab === 'chat') {
-    crumbLeaf = state.selectedAgent ? (agentById(state.selectedAgent)?.name || state.selectedAgent) : 'no agent';
+    // A resumed conversation loses the agent picker's own visual weight (it
+    // collapses to two small <select>s once turns exist) - the only other
+    // place the bound agent showed was this same tiny crumb text, easy to
+    // miss. Render it as a real badge on resumed threads so "which agent is
+    // this" reads as a persistent, visible indicator, not header trivia.
+    const chatAgentName = state.selectedAgent ? (agentById(state.selectedAgent)?.name || state.selectedAgent) : null;
+    crumbLeaf = chatAgentName
+      ? (state.chat.resumeSid ? Badge({ children: 'agent: ' + chatAgentName, tone: 'neutral' }) : chatAgentName)
+      : 'no agent';
   } else if (state.tab === 'files') {
     // ONE breadcrumb owner: the in-page BreadcrumbPath is the interactive
     // navigator, so the top crumb names only the tab (mirroring live/settings).
@@ -672,10 +675,6 @@ function view() {
   } else if (state.tab === 'settings') {
     // Same word as the rail item - location chrome must not fork vocabulary.
     crumbLeaf = 'settings';
-  } else if (state.tab === 'models') {
-    crumbLeaf = 'models';
-  } else if (state.tab === 'plugins') {
-    crumbLeaf = 'plugins';
   }
   const crumb = Crumb({ trail: crumbTrail, leaf: crumbLeaf, right: [dot] });
 
@@ -684,8 +683,13 @@ function view() {
     : '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.
+  // On history/live, the persistent footer chip must agree with the crumb dot
+  // and the tab's own stream widget - reporting REST-health "connected" here
+  // while the Live tab's widget says "connecting to live stream" indefinitely
+  // is the exact contradiction users can't resolve into a real signal.
+  const footerConnLabel = streamTab ? (dotLive ? 'connected' : 'connecting…') : (ok ? 'connected' : 'offline');
   const status = Status({
-    left: [state.backend || null, ok ? 'connected' : 'offline'].filter(Boolean),
+    left: [state.backend || null, footerConnLabel].filter(Boolean),
     right: [agentLabel, 'press ? for shortcuts'],
   });
 
@@ -698,7 +702,18 @@ function view() {
           h('div', { key: 'sc-body', class: 'ds-alert-body' }, ShortcutList({ shortcuts: SHORTCUTS })),
         ] }))
     : null;
-  const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab }, [shortcutsHint, ...mainContent()].filter(Boolean));
+  // One-time welcome naming what each tab is for - a brand-new user's only
+  // other guidance is installHint (zero-agents case) or the calm chat empty
+  // state (agents-but-no-conversation case); neither explains History/Files/
+  // Live exist at all. Dismissed once, ever, via localStorage.
+  const onboardingBanner = state.showOnboarding
+    ? Alert({
+        key: 'onboarding', kind: 'info', title: 'Welcome to AgentGUI',
+        onDismiss: dismissOnboarding,
+        children: 'Chat with an agent here. History holds every past conversation, Files browses and edits project directories, Live shows every running session at once, and Settings covers connection, appearance, and keyboard shortcuts.',
+      })
+    : null;
+  const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab }, [shortcutsHint, onboardingBanner, ...mainContent()].filter(Boolean));
 
   // Claude-Desktop three-column shell: a persistent left rail (workspace nav), an
   // optional sessions column (chat + history share the conversation list), the
@@ -758,8 +773,6 @@ function workspaceRail() {
     { key: 'files', label: 'Files', icon: 'folder', active: state.tab === 'files', onClick: () => navTo('files') },
     { key: 'live', label: 'Live', icon: 'activity', active: state.tab === 'live', count: liveCount || null, rail: liveHasError ? 'flame' : undefined, onClick: () => navTo('live') },
     { key: 'git', label: 'Git', icon: 'branch', active: state.tab === 'git', onClick: () => navTo('git') },
-    { key: 'models', label: 'Models', icon: 'circle-dot', active: state.tab === 'models', onClick: () => navTo('models') },
-    { key: 'plugins', label: 'Plugins', icon: 'link', active: state.tab === 'plugins', onClick: () => navTo('plugins') },
     { key: 'settings', label: 'Settings', icon: 'settings', active: state.tab === 'settings', onClick: () => navTo('settings') },
   ];
   return WorkspaceRail({
@@ -964,8 +977,6 @@ function mainContent() {
   if (state.tab === 'files')   return filesMain();
   if (state.tab === 'live')    return liveMain();
   if (state.tab === 'git')     return gitMain();
-  if (state.tab === 'models')  return modelsMain();
-  if (state.tab === 'plugins') return pluginsMain();
   return settingsMain();
 }
 
@@ -993,8 +1004,9 @@ async function loadGitPanel() {
 async function loadGitDiff(file) {
   state.git.diffLoading = true; state.git.diffError = null; render();
   try {
-    const { diff } = await B.gitDiff(state.backend, { file: file || undefined });
+    const { diff, binary } = await B.gitDiff(state.backend, { file: file || undefined });
     state.git.diff = diff || '(no changes)';
+    state.git.diffBinary = !!binary;
     state.git.file = file || '';
   } catch (e) {
     state.git.diffError = e.message || 'Could not load diff.';
@@ -1054,7 +1066,7 @@ function gitMain() {
       GitStatusPanel({ files: g.files, active: g.file, onFileClick: (f) => loadGitDiff(f.path) }) }),
     Panel({ id: 'git-diff', title: g.file ? ('diff: ' + g.file) : 'diff', children:
       g.diffError ? h('p', { key: 'de', class: 't-meta field-error' }, g.diffError)
-      : GitDiffView({ diff: g.diff || '', filename: g.file }) }),
+      : GitDiffView({ diff: g.diff || '', filename: g.file, binary: !!g.diffBinary }) }),
     Panel({ id: 'git-log', title: 'recent commits', children:
       !g.commits.length ? h('p', { key: 'nc', class: 't-meta' }, g.loading ? 'loading…' : 'no commits')
       : h('ul', { key: 'cl', class: 'git-commit-list' }, g.commits.map(c =>
@@ -1068,61 +1080,6 @@ function gitMain() {
   ];
 }
 
-// Models tab: agentgui's real model surface composed by the models.availability
-// WS handler (agent-CLI registry availability + provider key presence), fed
-// into the design SDK's ModelsConfig component. Not freddie's probed per-mode
-// matrix - see lib/ws-handlers-util.js models.availability for the mapping.
-function modelsMain() {
-  const m = state.models;
-  return [
-    PageHeader({ compact: true, dense: true, title: 'Models', lede: 'Discovered agent CLIs, their models, and provider key presence on this server.' }),
-    ModelsConfig({
-      data: m.data,
-      loading: m.loading,
-      error: m.error,
-      selectedProviderId: m.selectedProviderId,
-      onSelectProvider: (id) => { state.models.selectedProviderId = id; render(); },
-      onRefresh: () => loadModelsAvailability(),
-    }),
-  ];
-}
-
-// Plugins tab: agentgui has no freddie-style plugin host (~150 discoverable
-// plugin.js files) - its actual extensibility surface is the discovered
-// agent-CLI registry (lib/agent-discovery.js + lib/claude-runner-agents.js
-// AgentRegistry, the same data agents.list already exposes to the chat
-// picker). Adapted onto PluginsConfig's shape: name=agent id, surfaces=
-// protocol (cli|acp), requires=[] (agents have no dependency graph), enabled=
-// available (the CLI was actually found on this server), status=install hint
-// when missing. There is no enable/disable action (agentgui does not gate
-// which agent CLIs are usable) so onToggle re-checks availability instead of
-// pretending to flip a setting that doesn't exist.
-function pluginsMain() {
-  const list = (state.agents || []).map((a) => ({
-    name: a.id,
-    version: undefined,
-    surfaces: a.protocol || 'cli',
-    requires: [],
-    source: a.npxPackage ? ('npx ' + a.npxPackage) : undefined,
-    enabled: a.available !== false,
-    status: a.available !== false ? 'loaded' : (a.npxInstallable ? 'installable via npx' : 'not found'),
-  }));
-  return [
-    PageHeader({ compact: true, dense: true, title: 'Plugins', lede: 'Discovered agent CLIs — agentgui\'s real extensibility surface (no freddie-style plugin host).' }),
-    PluginsConfig({
-      plugins: list,
-      selected: state.plugins.selected,
-      loading: !!state.agentsLoading,
-      error: state.agentsError,
-      onSelect: (name) => { state.plugins.selected = name; render(); },
-      // No real enable/disable exists - re-run discovery so a just-installed
-      // CLI's availability reflects immediately instead of a fake toggle.
-      onToggle: () => { withBusy(null, () => loadAgents(), 'checking…'); },
-      onReload: () => loadAgents(),
-    }),
-  ];
-}
-
 // --- files (folder browser) ---
 async function loadDir(dirPath, { fromHash = false } = {}) {
   state.files = state.files || {};
@@ -1303,7 +1260,9 @@ async function runBulkDelete() {
     state.files.dialog = null;
     restoreFileDialogFocus(d._trigger);
     marked.clear(); state.files._lastMarkIdx = null;
-    announce('deleted ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries'));
+    const successMsg = 'deleted ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries');
+    announce(successMsg);
+    toast({ message: successMsg, kind: 'success' });
     // Patch the visible list immediately instead of waiting on a second full
     // directory round-trip - the server already confirmed every deletion.
     const gone = new Set(targets.map((e) => e.path || e.name));
@@ -1353,7 +1312,9 @@ async function runBulkMove(destDir) {
     state.files.dialog = null;
     restoreFileDialogFocus(d._trigger);
     marked.clear(); state.files._lastMarkIdx = null;
-    announce('moved ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries'));
+    const successMsg = 'moved ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries');
+    announce(successMsg);
+    toast({ message: successMsg, kind: 'success' });
     // Moved entries leave the current dir - patch them out immediately rather
     // than waiting on a second full directory round-trip.
     const gone = new Set(targets.map((e) => e.path || e.name));
@@ -1389,8 +1350,11 @@ async function runFileMutation(fn, doneMsg, patch) {
     restoreFileDialogFocus(d._trigger);
     announce(doneMsg);
     // A soft-delete's trashId (if this mutation was a delete) rides the
-    // return value straight to the undo-toast caller.
+    // return value straight to the undo-toast caller - that banner is its own
+    // dedicated real-undo-action UI, not a generic dismiss-only confirmation,
+    // so it stays separate from toast() rather than being replaced by it.
     if (result && result.trashId) offerUndoDelete(result.trashId, doneMsg);
+    else toast({ message: doneMsg, kind: 'success' });
     if (patch) {
       // Patch the visible list immediately, matching the bulk-delete/move
       // pattern, instead of stalling the dialog on a second full round-trip.
@@ -2544,16 +2508,6 @@ function chatMain() {
       messages: state.chat.messages,
       busy: state.chat.busy,
       draft: state.chat.draft,
-      // Scroll-position overview strip alongside the thread.
-      showMinimap: true,
-      // @-mention file autocomplete: reuse the Files tab's own data source
-      // (state.files.entries, populated by loadDir/listDir) rather than a new
-      // fetch. Scoped to whatever directory Files last listed - if the user
-      // hasn't opened Files yet this is empty and the composer simply shows
-      // no mention suggestions until they do (no fake/synthetic file list).
-      mentionFiles: (state.files.entries || [])
-        .filter((e) => e && e.path)
-        .map((e) => ({ path: e.path, isDir: e.type === 'dir' })),
       // Idle never reads 'resuming…' (nothing is in flight - the continuation
       // fact lives in the composer context line and banner); a remotely-stopped
       // turn reads 'stopped', not a normal finish.
@@ -2585,7 +2539,7 @@ function chatMain() {
           state.selectedModel || null,
           {
             label: state.chatCwd ? pathBasename(state.chatCwd) : 'server default',
-            title: 'change working directory',
+            title: state.chatCwd ? 'change working directory' : ('change working directory (default: ' + (state.serverHome?.cwd || '…') + ')'),
             onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); requestAnimationFrame(() => { const inp = document.querySelector('.chat-cwd-input, .agentchat-cwd-input'); if (inp) inp.focus(); }); },
           },
           userTurnCount > 0 ? plural(userTurnCount, 'turn') : null,
@@ -2625,6 +2579,7 @@ function chatMain() {
       onArmEdit: (m) => armEditAndResend(m),
       onEditMessage: (m) => armEditAndResend(m),
       cwd: state.chatCwd,
+      defaultCwd: state.serverHome?.cwd || null,
       cwdEditing: !!state.cwdEditing,
       cwdDraft: state.cwdDraft,
       cwdError: state.cwdError || null,
@@ -3619,18 +3574,51 @@ function resumeInChat(sess, { fromHash = false } = {}) {
     B.getSessionEvents(state.backend, sidToLoad).then(evs => {
       // Only populate if still on the same resume (user may have switched).
       if (state.chat.resumeSid !== sidToLoad || state.chat.messages.length) return;
+      // Replay the FULL event history (not a fixed-size slice of raw events -
+      // a slice taken before filtering to human/assistant turns can leave only
+      // a couple of visible messages on a long thread). The kit's own
+      // shownMessages/onShowEarlier windowing (wired above) handles the
+      // "load earlier" pagination the same way History's eventsLimit does.
       const msgs = [];
-      for (const e of (evs || []).slice(-50)) {
+      let cur = null; // the in-progress assistant message, so interleaved
+                       // tool_use/tool_result/text events land on one bubble
+                       // instead of one bubble per event.
+      let totalCost = 0; // ccsniff's stored 'result' events already carry the
+                          // real total_cost_usd (as e.cost) - the live path
+                          // sums these as they stream in, but a resumed
+                          // historical session never re-derived it, leaving
+                          // totalCost stuck at 0 regardless of turn/tool count.
+      for (const e of (evs || [])) {
         if (e.type === 'human' || e.role === 'user') {
+          cur = null;
           const text = e.text || e.content || '';
           if (text) msgs.push({ id: 'rh' + e.ts, role: 'user', content: text, time: e.ts, historical: true });
+        } else if (e.type === 'tool_use') {
+          if (!cur) { cur = { id: 'ra' + e.ts, role: 'assistant', content: '', time: e.ts, parts: [], historical: true }; msgs.push(cur); }
+          cur.parts.push(toolPart({ name: e.tool, input: e.toolInput, id: e.toolUseId || e.id }));
+        } else if (e.type === 'tool_result') {
+          if (!cur) { cur = { id: 'ra' + e.ts, role: 'assistant', content: '', time: e.ts, parts: [], historical: true }; msgs.push(cur); }
+          applyToolResult(cur.parts, { tool_use_id: e.toolUseId || e.id, content: e.text, is_error: e.isError });
+        } else if (e.type === 'result') {
+          if (typeof e.cost === 'number') totalCost += e.cost;
         } else if (e.type === 'assistant' || e.role === 'assistant') {
           const text = e.text || '';
-          if (text) msgs.push({ id: 'ra' + e.ts, role: 'assistant', content: '', time: e.ts, parts: [{ kind: 'md', text }], historical: true });
+          if (!text) continue;
+          if (!cur) { cur = { id: 'ra' + e.ts, role: 'assistant', content: '', time: e.ts, parts: [], historical: true }; msgs.push(cur); }
+          appendText(cur.parts, text);
         }
       }
       if (state.chat.resumeSid === sidToLoad && !state.chat.messages.length) {
+        // Attach the summed cost to the last message's costUsd (rather than a
+        // side-channel field) so computeTotalCost() - which every subsequent
+        // send/discard recomputes from message.costUsd - naturally includes
+        // it instead of silently resetting it back to 0 on the next turn.
+        if (totalCost > 0) {
+          const last = msgs[msgs.length - 1];
+          if (last) last.costUsd = (last.costUsd || 0) + totalCost;
+        }
         state.chat.messages = msgs;
+        state.chat.totalCost = computeTotalCost();
       }
     }).catch(() => {}) // history may not be available; silent fail
     .finally(() => {
@@ -3888,9 +3876,9 @@ function settingsMain() {
             render();
           },
         }),
-        state.backendStatus === 'connecting' ? h('p', { key: 'bst-connecting', class: 't-meta', role: 'status' }, 'connecting…') : null,
-        state.backendStatus === 'ok' ? h('p', { key: 'bst-ok', class: 't-meta', role: 'status' }, 'connected') : null,
-        state.backendStatus === 'failed' ? h('p', { key: 'bst-failed', class: 't-meta field-error', role: 'alert' }, 'connection failed - check the URL') : null,
+        state.backendStatus === 'connecting' ? h('span', { key: 'bst-connecting', class: 'ds-status-chip', role: 'status' }, 'connecting…') : null,
+        state.backendStatus === 'ok' ? h('span', { key: 'bst-ok', class: 'ds-status-chip ds-status-chip-ok', role: 'status' }, 'connected') : null,
+        state.backendStatus === 'failed' ? h('span', { key: 'bst-failed', class: 'ds-status-chip ds-status-chip-error', role: 'alert' }, 'connection failed - check the URL') : null,
         (state.confirmingBackend !== undefined && state.confirmingBackend === state.backendDraft && isValid && state.backendDraft !== state.backend)
           ? h('p', { key: 'bcw', class: 't-meta field-error', role: 'alert' }, 'changing backend discards this browser\'s chat transcript - press save again to confirm') : null,
         healthSummary(),
@@ -4067,6 +4055,15 @@ function agentsPanel() {
   const title = (state.agentsLoading && !state.agents.length)
     ? 'agents · loading…'
     : 'agents · ' + installed.length + '/' + state.agents.length + ' installed';
+  // A 16-agent list with only ~4 installed is dominated by disabled-looking
+  // rows; default to hiding not-installed/non-npx-installable agents so the
+  // list reads as "what can I use" rather than a wall of grey entries. The
+  // toggle stays visible (and the count in its label) so nothing is hidden
+  // silently.
+  const hiddenCount = state.agents.filter(a => a.available === false && !a.npxInstallable).length;
+  const visibleAgents = state.hideUnavailableAgents
+    ? state.agents.filter(a => a.available !== false || a.npxInstallable)
+    : state.agents;
   return Panel({
     id: 'agents',
     title,
@@ -4076,14 +4073,22 @@ function agentsPanel() {
     // manual start/stop controls by design. This note makes that explicit so
     // a 'stopped' row doesn't read as a missing action.
     hasAcp ? h('p', { key: 'acpnote', class: 't-meta agentgui-field-mb' }, 'ACP agents start on demand and restart automatically; selecting one launches it.') : null,
-    h('div', { key: 'agrefreshrow', class: 'agentgui-field-mb' }, Btn({ key: 'agrefresh', onClick: () => loadAgents(), disabled: state.agentsLoading, children: state.agentsLoading ? 'refreshing…' : 'refresh' })),
-    ...(state.agents.length
-      ? state.agents.map((a, i) => {
+    h('div', { key: 'agrefreshrow', class: 'agentgui-field-mb' }, [
+      Btn({ key: 'agrefresh', onClick: () => loadAgents(), disabled: state.agentsLoading, children: state.agentsLoading ? 'refreshing…' : 'refresh' }),
+      hiddenCount > 0 ? Checkbox({
+        key: 'aghidetoggle',
+        checked: !!state.hideUnavailableAgents,
+        label: 'hide unavailable (' + hiddenCount + ')',
+        onChange: (v) => { state.hideUnavailableAgents = v; render(); },
+      }) : null,
+    ].filter(Boolean)),
+    ...(visibleAgents.length
+      ? visibleAgents.map((a, i) => {
           const acp = acpStatusFor(a.id);
           const avail = a.available !== false;
           const usable = avail || a.npxInstallable;     // selectable from this row
           const bits = [PROTOCOL_WORDS[a.protocol] || 'agent'];
-          if (!avail) bits.push(a.npxInstallable ? 'installs automatically when used' : 'not installed');
+          if (!avail) bits.push(a.npxInstallable ? 'installs automatically when used (via npx)' : ('not installed' + (a.cmd ? ' - install the "' + a.cmd + '" CLI to enable' : '')));
           if (acp) bits.push(acp.healthy ? 'connected' : (acp.running ? 'connecting' : 'offline'));
           if (acp && acp.restartCount >= 1) bits.push('restarted ' + acp.restartCount + (acp.restartCount === 1 ? ' time' : ' times'));
           if (acp && !acp.healthy && acp.providerInfo?.error) {
@@ -4100,9 +4105,13 @@ function agentsPanel() {
             // Rail tone keeps its GUI-wide meaning: green=ok/selected,
             // flame=error/unavailable. Selection is shown via `active`, not by
             // borrowing purple (purple is reserved for subagents).
-            // Flame also covers ACP agents that are installed but running-unhealthy
-            // (provider auth error, etc.) so the error state is visually distinct.
-            rail: (!avail || (acp && !acp.healthy)) ? 'flame' : (a.id === state.selectedAgent ? 'green' : undefined),
+            // flame is a REAL error signal (Row's shared rail renders it as an
+            // sr-only "error" a11y label) - "not installed" is the normal,
+            // expected state for most of the 16-agent list and must not carry
+            // that label. Only an ACP agent that is actually running-unhealthy
+            // (started, but connection/auth failed) is a genuine error; a
+            // merely-absent binary with no restart in flight is not.
+            rail: (acp && !acp.healthy) ? 'flame' : (a.id === state.selectedAgent ? 'green' : undefined),
             active: a.id === state.selectedAgent,
             // Non-installable agents are genuinely inert: mark them disabled (no
             // click, no button role) instead of looking clickable but doing nothing.
@@ -4117,15 +4126,20 @@ function agentsPanel() {
               : (!avail ? [Btn({ key: 'agrecheck', onClick: (e) => { e.stopPropagation(); withBusy(e.currentTarget, () => loadAgents(), 'checking…'); }, children: 're-check' })] : undefined),
           });
         })
-      // The empty array means one of three things; never let an in-flight load
-      // read as a broken registry.
+      // The empty array means one of several things; never let an in-flight
+      // load read as a broken registry, and never let the hide-unavailable
+      // filter read as "no agents" either.
       : [state.agentsLoading
           ? AgentListSkeleton({ rows: 5 })
           : (state.agentsError
               ? h('div', { key: 'agfail', class: 't-meta empty-state' },
                   h('span', { key: 'agfailtxt' }, 'the agent list failed to load'),
                   Btn({ key: 'agretry2', onClick: (e) => withBusy(e.currentTarget, () => loadAgents(), 'retrying…'), children: 'retry' }))
-              : h('p', { key: 'none', class: 't-meta' }, 'no agents loaded'))]),
+              : (state.agents.length
+                  ? h('div', { key: 'agallhidden', class: 't-meta empty-state' },
+                      h('span', { key: 'agallhiddentxt' }, 'all agents are hidden by the unavailable filter'),
+                      Btn({ key: 'agshowall', onClick: () => { state.hideUnavailableAgents = false; render(); }, children: 'show all' }))
+                  : h('p', { key: 'none', class: 't-meta' }, 'no agents loaded')))]),
     ].filter(Boolean),
   });
 }
@@ -4337,25 +4351,6 @@ async function loadAgents() {
   }
 }
 
-// Models tab data load: models.availability WS handler composes agent
-// registry + provider key presence into ModelsConfig's expected shape. See
-// lib/ws-handlers-util.js for exactly what each field means in agentgui (no
-// freddie-style per-mode probe matrix - one real 'cli' mode per model).
-async function loadModelsAvailability() {
-  state.models.loading = true;
-  state.models.error = null;
-  render();
-  try {
-    state.models.data = await B.getModelsAvailability(state.backend);
-    state.models.loading = false;
-    render();
-  } catch (e) {
-    state.models.loading = false;
-    state.models.error = errText(e) || 'failed to load model availability';
-    render();
-  }
-}
-
 // Boot-time automatic retries with backoff when the first agents fetch fails
 // (the server may still be warming up).
 async function retryLoadAgents() {
@@ -4440,6 +4435,9 @@ async function init() {
   render();
   if (!(await loadAgents())) retryLoadAgents();
   startBuildFreshnessPoll();
+  // Fetch once: lets the cwd "use default" button show what it resolves to
+  // via a tooltip, instead of only revealing it after the click.
+  B.getHome(state.backend).then(h => { state.serverHome = h; render(); }).catch(() => {});
 
   const hp = readHash();
   const bootTab = hp.tab || (hp.sid ? 'history' : 'chat');

package/site/app/js/backend.js

@@ -398,6 +398,13 @@ export async function listAgents(base) {
   return agents || [];
 }
 
+// Server's home/STARTUP_CWD - fetched once so "use default" can show what it
+// actually resolves to (a tooltip) before the user clicks it, instead of only
+// after.
+export async function getHome(base) {
+  return wsCall(base, 'home', {});
+}
+
 export async function listActiveChats(base) {
   try { const { sessions } = await wsCall(base, 'chat.active', {}); return sessions || []; }
   catch { return []; }
@@ -428,25 +435,6 @@ export async function listAgentModels(base, agentId) {
   } catch { return []; }
 }
 
-// Composed model-availability view for the Models tab (ModelsConfig
-// component): per-agent CLI availability + models, in the shape ModelsConfig
-// expects ({timestamp, providers, sampler, summary}). See lib/ws-handlers-
-// util.js models.availability for what each field really means in agentgui
-// (no probed per-mode matrix like freddie - one real 'cli' mode per model).
-export async function getModelsAvailability(base) {
-  return wsCall(base, 'models.availability', {});
-}
-
-// Provider API-key configs (masked) for the Models tab's provider auth info -
-// backs the existing Settings 'keys' surface, reused here as-is.
-export async function getAuthConfigs(base) {
-  return wsCall(base, 'auth.configs', {});
-}
-
-export async function saveAuthConfig(base, providerId, apiKey, defaultModel) {
-  return wsCall(base, 'auth.save', { providerId, apiKey, defaultModel });
-}
-
 // ---------- Git / worktrees (WS) ----------
 
 export async function gitStatus(base, { cwd } = {}) {