agentgui 1.0.1116 → 1.0.1118

package/site/app/js/app.js

@@ -1,9 +1,10 @@
 import { h, mount, installStyles, components as C } from 'anentrypoint-design';
 import * as B from './backend.js';
+import { createChatPersistence } from './chat-persistence.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, Badge } = 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, 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
@@ -52,6 +53,13 @@ const state = {
   // 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
@@ -331,6 +339,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 });
@@ -675,6 +701,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] });
 
@@ -773,6 +803,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({
@@ -977,6 +1009,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();
 }
 
@@ -1080,6 +1114,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 || {};
@@ -2508,6 +2597,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.
@@ -2818,109 +2917,13 @@ function cancelChat() {
   render();
 }
 
-const CHAT_KEY = 'agentgui.chat';
-// An assistant turn with no content AND no parts is an empty shell (an aborted
-// turn that produced nothing). The view already renders it as nothing; drop it
-// from persisted/in-memory state so a restored chat never carries blank bubbles.
-function isEmptyTurn(m) {
-  return m.role === 'assistant' && !m.content && !(Array.isArray(m.parts) && m.parts.length);
-}
-// Cap the persisted footprint: the last 100 messages, with any tool args/result
-// payload over 4KB truncated in the SAVED copy only (in-memory state keeps the
-// full payload). A quota failure is surfaced once instead of silently dropping
-// persistence forever.
-const PERSIST_MSG_CAP = 100;
-const PERSIST_PART_CAP = 4096;
-let _persistFailedOnce = false;
-let _lastPersistTs = 0;
-function trimPartForStorage(p) {
-  if (!p || typeof p !== 'object') return p;
-  let out = p;
-  for (const k of ['result', 'args']) {
-    const v = out[k];
-    if (v == null) continue;
-    let s;
-    if (typeof v === 'string') s = v;
-    else { try { s = JSON.stringify(v); } catch { s = String(v); } }
-    if (s.length > PERSIST_PART_CAP) {
-      if (out === p) out = { ...p };
-      out[k] = s.slice(0, PERSIST_PART_CAP);
-      out.truncatedForStorage = true;
-    }
-  }
-  return out;
-}
-function persistChat() {
-  try {
-    const eligible = state.chat.messages.filter(m => !isEmptyTurn(m));
-    // On-screen transcript can exceed the cap; a reload only restores the last
-    // PERSIST_MSG_CAP turns - surface that once so it's not a silent surprise,
-    // same Alert pattern as the sibling quota-failure banner below.
-    const wasCapped = eligible.length > PERSIST_MSG_CAP;
-    if (wasCapped !== !!state.chat.persistTruncated) {
-      state.chat.persistTruncated = wasCapped;
-      scheduleRender();
-    }
-    const msgs = eligible
-      .slice(-PERSIST_MSG_CAP)
-      .map(m => ({ id: m.id, role: m.role, content: m.content, time: m.time, costUsd: m.costUsd, stopped: m.stopped || undefined, parts: Array.isArray(m.parts) ? m.parts.map(trimPartForStorage) : m.parts }));
-    const draft = (state.chat.draft || '').trim() ? state.chat.draft : '';
-    // Persist when there is a transcript OR a non-empty draft (a typed-but-not-
-    // sent message must survive a reload too).
-    if (!msgs.length && !draft) { lsRemove(CHAT_KEY); return; }
-    _lastPersistTs = Date.now();
-    localStorage.setItem(CHAT_KEY, JSON.stringify({ ts: _lastPersistTs, messages: msgs, draft, resumeSid: state.chat.resumeSid, totalCost: state.chat.totalCost || 0, agent: state.selectedAgent, model: state.selectedModel }));
-  } catch {
-    if (!_persistFailedOnce) {
-      _persistFailedOnce = true;
-      state.chat.persistError = true;
-      announce('chat too large to save locally - export it from settings');
-      scheduleRender();
-    }
-  }
-}
-const debouncedPersistDraft = debounce(persistChat, 500);
-// Another GUI tab rewrote the shared chat key: never silently diverge - surface
-// a banner offering to reload the newer copy (last-writer-wins with a ts guard).
-window.addEventListener('storage', (e) => {
-  if (e.key !== CHAT_KEY || !e.newValue) return;
-  try {
-    const remote = JSON.parse(e.newValue);
-    if (remote && remote.ts && remote.ts > _lastPersistTs) {
-      state.chat.externalUpdate = true;
-      scheduleRender();
-    }
-  } catch {}
-});
-function restoreChat() {
-  try {
-    const raw = lsGet(CHAT_KEY);
-    if (!raw) return;
-    const saved = JSON.parse(raw);
-    if (typeof saved.draft === 'string' && saved.draft.trim()) {
-      state.chat.draft = saved.draft;
-      // A restored draft is set programmatically, so Ctrl+Z has nothing in the
-      // browser's native undo history to act on - a one-time note explains why
-      // undo appears to do nothing right after a reload.
-      announce('draft restored - note: undo history does not carry over a reload');
-    }
-    if (typeof saved.totalCost === 'number') state.chat.totalCost = saved.totalCost;
-    if (Array.isArray(saved.messages) && saved.messages.length) {
-      state.chat.messages = saved.messages
-        .filter(m => !isEmptyTurn(m))
-        .map(m => ({ ...m, parts: Array.isArray(m.parts) ? m.parts : [] }));
-      // Prefer the per-message cost sum when present (it self-corrects after
-      // edit/retry truncation); the scalar is only the legacy fallback.
-      const derived = computeTotalCost();
-      if (derived) state.chat.totalCost = derived;
-      state.chat.resumeSid = saved.resumeSid || null;
-      // Restore the agent/model the transcript belongs to, so a restored chat
-      // isn't silently shown under whatever agent the picker defaulted to.
-      state.chat.restoredAgent = saved.agent || null;
-      state.chat.restoredModel = saved.model || null;
-    }
-  } catch {}
-}
+// Chat transcript localStorage persistence - extracted to chat-persistence.js
+// (vertical slice per AGENTS.md SOLID/Clean-Architecture preferences). The
+// factory closes over the SAME live `state` object every other app.js concern
+// mutates by reference, so every call site below (persistChat/restoreChat/
+// debouncedPersistDraft/isEmptyTurn) keeps working unchanged.
+const { persistChat, restoreChat, debouncedPersistDraft, isEmptyTurn } =
+  createChatPersistence(state, { announce, scheduleRender, lsGet, lsRemove, debounce });
 
 // Flatten a message's content (string content or md/text/tool parts) to plain
 // text for the copy action.
@@ -4351,6 +4354,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

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

package/site/app/js/chat-persistence.js

@@ -0,0 +1,123 @@
+const CHAT_KEY = 'agentgui.chat';
+// Cap the persisted footprint: the last 100 messages, with any tool args/result
+// payload over 4KB truncated in the SAVED copy only (in-memory state keeps the
+// full payload). A quota failure is surfaced once instead of silently dropping
+// persistence forever.
+const PERSIST_MSG_CAP = 100;
+const PERSIST_PART_CAP = 4096;
+
+// An assistant turn with no content AND no parts is an empty shell (an aborted
+// turn that produced nothing). The view already renders it as nothing; drop it
+// from persisted/in-memory state so a restored chat never carries blank bubbles.
+function isEmptyTurn(m) {
+  return m.role === 'assistant' && !m.content && !(Array.isArray(m.parts) && m.parts.length);
+}
+
+function trimPartForStorage(p) {
+  if (!p || typeof p !== 'object') return p;
+  let out = p;
+  for (const k of ['result', 'args']) {
+    const v = out[k];
+    if (v == null) continue;
+    let s;
+    if (typeof v === 'string') s = v;
+    else { try { s = JSON.stringify(v); } catch { s = String(v); } }
+    if (s.length > PERSIST_PART_CAP) {
+      if (out === p) out = { ...p };
+      out[k] = s.slice(0, PERSIST_PART_CAP);
+      out.truncatedForStorage = true;
+    }
+  }
+  return out;
+}
+
+function computeTotalCost(state) {
+  return (state.chat.messages || []).reduce((s, m) => s + (typeof m.costUsd === 'number' ? m.costUsd : 0), 0);
+}
+
+// Factory: app.js calls this once at module load, passing the live `state`
+// object (mutated by reference, same as every other app.js concern) and the
+// shared helpers (announce/scheduleRender/lsGet/lsSet/lsRemove/debounce)
+// already defined there. Returns the same function set app.js previously
+// defined inline, wired to app.js's own state/render/announce.
+export function createChatPersistence(state, { announce, scheduleRender, lsGet, lsRemove, debounce }) {
+  let _persistFailedOnce = false;
+  let _lastPersistTs = 0;
+
+  function persistChat() {
+    try {
+      const eligible = state.chat.messages.filter(m => !isEmptyTurn(m));
+      // On-screen transcript can exceed the cap; a reload only restores the last
+      // PERSIST_MSG_CAP turns - surface that once so it's not a silent surprise,
+      // same Alert pattern as the sibling quota-failure banner below.
+      const wasCapped = eligible.length > PERSIST_MSG_CAP;
+      if (wasCapped !== !!state.chat.persistTruncated) {
+        state.chat.persistTruncated = wasCapped;
+        scheduleRender();
+      }
+      const msgs = eligible
+        .slice(-PERSIST_MSG_CAP)
+        .map(m => ({ id: m.id, role: m.role, content: m.content, time: m.time, costUsd: m.costUsd, stopped: m.stopped || undefined, parts: Array.isArray(m.parts) ? m.parts.map(trimPartForStorage) : m.parts }));
+      const draft = (state.chat.draft || '').trim() ? state.chat.draft : '';
+      // Persist when there is a transcript OR a non-empty draft (a typed-but-not-
+      // sent message must survive a reload too).
+      if (!msgs.length && !draft) { lsRemove(CHAT_KEY); return; }
+      _lastPersistTs = Date.now();
+      localStorage.setItem(CHAT_KEY, JSON.stringify({ ts: _lastPersistTs, messages: msgs, draft, resumeSid: state.chat.resumeSid, totalCost: state.chat.totalCost || 0, agent: state.selectedAgent, model: state.selectedModel }));
+    } catch {
+      if (!_persistFailedOnce) {
+        _persistFailedOnce = true;
+        state.chat.persistError = true;
+        announce('chat too large to save locally - export it from settings');
+        scheduleRender();
+      }
+    }
+  }
+
+  const debouncedPersistDraft = debounce(persistChat, 500);
+
+  // Another GUI tab rewrote the shared chat key: never silently diverge - surface
+  // a banner offering to reload the newer copy (last-writer-wins with a ts guard).
+  window.addEventListener('storage', (e) => {
+    if (e.key !== CHAT_KEY || !e.newValue) return;
+    try {
+      const remote = JSON.parse(e.newValue);
+      if (remote && remote.ts && remote.ts > _lastPersistTs) {
+        state.chat.externalUpdate = true;
+        scheduleRender();
+      }
+    } catch {}
+  });
+
+  function restoreChat() {
+    try {
+      const raw = lsGet(CHAT_KEY);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (typeof saved.draft === 'string' && saved.draft.trim()) {
+        state.chat.draft = saved.draft;
+        // A restored draft is set programmatically, so Ctrl+Z has nothing in the
+        // browser's native undo history to act on - a one-time note explains why
+        // undo appears to do nothing right after a reload.
+        announce('draft restored - note: undo history does not carry over a reload');
+      }
+      if (typeof saved.totalCost === 'number') state.chat.totalCost = saved.totalCost;
+      if (Array.isArray(saved.messages) && saved.messages.length) {
+        state.chat.messages = saved.messages
+          .filter(m => !isEmptyTurn(m))
+          .map(m => ({ ...m, parts: Array.isArray(m.parts) ? m.parts : [] }));
+        // Prefer the per-message cost sum when present (it self-corrects after
+        // edit/retry truncation); the scalar is only the legacy fallback.
+        const derived = computeTotalCost(state);
+        if (derived) state.chat.totalCost = derived;
+        state.chat.resumeSid = saved.resumeSid || null;
+        // Restore the agent/model the transcript belongs to, so a restored chat
+        // isn't silently shown under whatever agent the picker defaulted to.
+        state.chat.restoredAgent = saved.agent || null;
+        state.chat.restoredModel = saved.model || null;
+      }
+    } catch {}
+  }
+
+  return { persistChat, restoreChat, debouncedPersistDraft, isEmptyTurn, computeTotalCost: () => computeTotalCost(state) };
+}