agentgui 1.0.1111 → 1.0.1113

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 } = 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, ModelsConfig, PluginsConfig } = C;
 
 // One duration/bytes vocabulary across every surface: prefer the kit's shared
 // formatters (exported alongside the components), fall back to the local
@@ -44,9 +44,13 @@ 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 },
-  // 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',
+  // 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 },
 };
 
 // Two-step arm controls auto-reset after this delay so an accidental first click
@@ -173,12 +177,6 @@ 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.
@@ -326,6 +324,24 @@ 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 });
@@ -656,6 +672,10 @@ 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] });
 
@@ -678,18 +698,7 @@ function view() {
           h('div', { key: 'sc-body', class: 'ds-alert-body' }, ShortcutList({ shortcuts: SHORTCUTS })),
         ] }))
     : null;
-  // 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));
+  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));
 
   // Claude-Desktop three-column shell: a persistent left rail (workspace nav), an
   // optional sessions column (chat + history share the conversation list), the
@@ -749,6 +758,8 @@ 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({
@@ -953,6 +964,8 @@ 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();
 }
 
@@ -1055,6 +1068,61 @@ 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 || {};
@@ -1235,9 +1303,7 @@ async function runBulkDelete() {
     state.files.dialog = null;
     restoreFileDialogFocus(d._trigger);
     marked.clear(); state.files._lastMarkIdx = null;
-    const successMsg = 'deleted ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries');
-    announce(successMsg);
-    toast({ message: successMsg, kind: 'success' });
+    announce('deleted ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries'));
     // 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));
@@ -1287,9 +1353,7 @@ async function runBulkMove(destDir) {
     state.files.dialog = null;
     restoreFileDialogFocus(d._trigger);
     marked.clear(); state.files._lastMarkIdx = null;
-    const successMsg = 'moved ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries');
-    announce(successMsg);
-    toast({ message: successMsg, kind: 'success' });
+    announce('moved ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries'));
     // 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));
@@ -1325,11 +1389,8 @@ 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 - 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.
+    // return value straight to the undo-toast caller.
     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.
@@ -2483,6 +2544,16 @@ 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.
@@ -3817,9 +3888,9 @@ function settingsMain() {
             render();
           },
         }),
-        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.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.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(),
@@ -4266,6 +4337,25 @@ 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() {

package/site/app/js/backend.js

@@ -428,6 +428,25 @@ 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 } = {}) {