anentrypoint-design 0.0.374 → 0.0.376

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.374",
+  "version": "0.0.376",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/agent-chat.js

@@ -17,6 +17,7 @@ import { Btn, Icon } from './shell.js';
 import { BreadcrumbPath } from './files.js';
 import { SplitPanel } from './editor-primitives.js';
 import { initializeCachesEagerly } from '../markdown-cache.js';
+import { ChatMinimap } from './chat-minimap.js';
 
 const h = webjsx.createElement;
 
@@ -224,6 +225,17 @@ export function AgentChat(props = {}) {
     onPasteFiles, onDropFiles, onEmoji,
     shownMessages, onShowEarlier,
     streamingSince, detectAttachment,
+    // @-mention file autocomplete in the composer — a flat list of file paths
+    // the host already has (e.g. its Files tab data source). Purely forwarded
+    // to ChatComposer; omitting it keeps every existing caller unchanged (no
+    // mention affordance appears without it).
+    mentionFiles,
+    // Optional scroll-position minimap alongside the thread (ChatMinimap).
+    // false/omitted keeps every existing caller byte-identical (no minimap
+    // column at all). true renders the strip using this component's own
+    // thread ref via a shared getter — no extra DOM wiring needed from the
+    // host beyond passing showMinimap.
+    showMinimap = false,
     // Optional inline content viewer beside the thread (a docstudio-cue
     // addition: its chat view keeps a live document/PDF preview open next to
     // the conversation instead of forcing a separate tab/window). The host
@@ -414,6 +426,7 @@ export function AgentChat(props = {}) {
     onEmoji,
     streamingSince,
     detectAttachment,
+    mentionFiles,
   });
 
   // Contextual follow-up chips below the last SETTLED assistant turn (claude.ai/
@@ -472,8 +485,18 @@ export function AgentChat(props = {}) {
           : null)
     : null;
 
+  // ChatMinimap needs a getter that resolves the live thread element lazily
+  // (it may mount before the thread's own ref fires). A holder object keeps
+  // the element across re-renders without introducing component state.
+  const threadElHolder = { el: null };
+  const combinedThreadRef = (el) => {
+    threadElHolder.el = el;
+    const dispose = threadRef(messages.length)(el);
+    return dispose;
+  };
+
   const threadBody = h('div', { class: 'agentchat-thread-wrap' },
-    h('div', { class: 'agentchat-thread', ref: threadRef(messages.length), role: 'log', 'aria-label': 'conversation', 'aria-live': 'polite', 'aria-relevant': 'additions' },
+    h('div', { class: 'agentchat-thread', ref: combinedThreadRef, role: 'log', 'aria-label': 'conversation', 'aria-live': 'polite', 'aria-relevant': 'additions' },
       emptyState,
       earlierRow,
       ...rows.filter(Boolean),
@@ -488,7 +511,12 @@ export function AgentChat(props = {}) {
     // stateless chrome, so the host needn't thread scroll state through state.
     h('button', { class: 'agentchat-jump', type: 'button', 'aria-label': 'jump to latest', title: 'jump to latest',
       onclick: (e) => scrollThreadToBottom(e.currentTarget) },
-      Icon('arrow-down', { size: 16 }), h('span', { class: 'agentchat-jump-label' }, 'latest')));
+      Icon('arrow-down', { size: 16 }), h('span', { class: 'agentchat-jump-label' }, 'latest')),
+    // Optional scroll-position overview strip, sharing the same live thread
+    // element the auto-scroll/jump logic already resolves via threadElHolder.
+    showMinimap
+      ? ChatMinimap({ messages, getThreadEl: () => threadElHolder.el })
+      : null);
 
   const mainColumn = h('div', { class: 'agentchat-main-col' },
     h('div', { class: 'agentchat-head' },

package/src/components/freddie.js

@@ -14,9 +14,12 @@ import { register as registerDebug, unregister as unregisterDebug } from '../deb
 import { queueMessage, watchReconnect, isOnline } from '../idb-outbox.js';
 import { ChatMessage, ChatComposer } from './chat.js';
 import { fmtTime, fmtAgo } from './sessions.js';
-import { createVirtualizer, measureRef } from '../virtual-scroll.js';
+import { ModelsConfig } from './models-config.js';
+import { SkillsConfig } from './skills-config.js';
+import { PluginsConfig } from './plugins-config.js';
 import { GitStatusPanel, GitDiffView } from './git-status.js';
 import { WorktreeSwitcher } from './worktree-switcher.js';
+import { AgentChat } from './agent-chat.js';
 
 const h = webjsx.createElement;
 
@@ -43,10 +46,6 @@ const TRUNC_PROMPT = 50;  // batch prompt cells
 const truncSpan = (s, n) => { const t = trunc(s, n); return h('span', { title: t.title }, t.text); };
 // Cap a raw JSON dump for an inline table cell without losing the data via tooltip.
 const truncJson = (v, n = TRUNC_TITLE) => truncSpan(JSON.stringify(v), n);
-// Autoscroll a thread only when the user is already near the bottom, so
-// scrolling up to read history is not yanked back down on the next render.
-const stickyScroll = (el) => { if (!el) return; const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80; if (nearBottom) el.scrollTop = el.scrollHeight; };
-
 // ---- home ------------------------------------------------------------------
 
 export const home = makePage((ctx) => {
@@ -106,98 +105,196 @@ export const home = makePage((ctx) => {
 
 // ---- chat ------------------------------------------------------------------
 
-// Below this thread length, mount every message directly -- virtualization's
-// scroll-listener + spacer-div overhead only pays for itself once the DOM
-// node count it would otherwise mount is large enough to matter.
-const VIRTUALIZE_THRESHOLD = 60;
+// Parse a fetch Response body as a Server-Sent-Events frame stream. There is
+// no EventSource-over-POST in browsers (EventSource only does GET, no custom
+// headers/body), so a POST-based SSE consumer has to manually decode the
+// ReadableStream and split on blank-line-terminated `event: X\ndata: Y\n\n`
+// frames. No existing SSE-parsing utility exists elsewhere in this SDK
+// (checked idb-outbox.js and grepped src/ for `text/event-stream`) -- this is
+// the first, generic enough (event name + JSON.parse'd data) to reuse for any
+// future SSE endpoint, not freddie-chat-specific in shape.
+async function* parseSseStream(response) {
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buf = '';
+    try {
+        for (;;) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buf += decoder.decode(value, { stream: true });
+            // Frames are separated by a blank line; a frame may itself contain
+            // multiple `field: value` lines (event/data/id/retry) but this
+            // server only ever emits one `event:` + one `data:` line per frame.
+            let sep;
+            while ((sep = buf.indexOf('\n\n')) !== -1) {
+                const frame = buf.slice(0, sep);
+                buf = buf.slice(sep + 2);
+                let event = 'message', dataLines = [];
+                for (const line of frame.split('\n')) {
+                    if (line.startsWith('event:')) event = line.slice(6).trim();
+                    else if (line.startsWith('data:')) dataLines.push(line.slice(5).trim());
+                }
+                if (!dataLines.length) continue;
+                let data;
+                try { data = JSON.parse(dataLines.join('\n')); } catch { data = dataLines.join('\n'); }
+                yield { event, data };
+            }
+        }
+    } finally {
+        try { reader.releaseLock(); } catch { /* stream already closed/errored */ }
+    }
+}
 
-export const chat = makePage((ctx) => {
-    Object.assign(ctx.state, { loading: false, messages: [], draft: '', sending: false });
-    const virtualizer = createVirtualizer();
-    let threadEl = null;
-    let range = { startIndex: 0, endIndex: 0, topSpacerPx: 0, bottomSpacerPx: 0 };
-    function recomputeRange() {
-        if (!threadEl) return;
-        virtualizer.setCount(ctx.state.messages.length);
-        range = virtualizer.computeRange(threadEl.scrollTop, threadEl.clientHeight);
+// Map a freddie tool_progress SSE payload ({name, args, partial}) to an
+// AgentChat tool part. There is no matching id to correlate a later
+// "done" state (freddie's stream has no discrete tool-start/tool-end pair --
+// tool_progress fires zero-or-more times per call while it runs, and the
+// authoritative role:'tool' result only arrives batched in the final
+// `message`/`done` events) so every progress part renders as 'running'; the
+// turn-settle pass below promotes matching parts to 'done'/'error' once the
+// real tool_call_id/content pairs are known.
+function toolProgressPart(payload) {
+    return { kind: 'tool', name: payload.name || 'tool', args: payload.args || {}, status: 'running' };
+}
+
+// After `done`, freddie's persisted message list is the source of truth:
+// walk it and rebuild the assistant turn's parts as interleaved
+// text/tool/tool_result, replacing the provisional tool_progress-only parts
+// accumulated during streaming. assistant messages with tool_calls become
+// running tool parts (by call id); role:'tool' messages settle the matching
+// part to done/error by tool_call_id.
+function partsFromMessages(assistantAndToolMessages) {
+    const parts = [];
+    const byId = new Map();
+    for (const m of assistantAndToolMessages) {
+        if (m.role === 'assistant') {
+            if (m.content) parts.push({ kind: 'md', text: m.content });
+            for (const tc of (m.tool_calls || [])) {
+                const part = { kind: 'tool', _id: tc.id, name: tc.name || tc.function?.name || 'tool', args: tc.arguments || tc.function?.arguments || {}, status: 'running' };
+                parts.push(part);
+                if (tc.id) byId.set(tc.id, part);
+            }
+        } else if (m.role === 'tool') {
+            const target = m.tool_call_id ? byId.get(m.tool_call_id) : null;
+            let content = m.content;
+            let isError = false;
+            try { const parsed = JSON.parse(content); if (parsed && parsed.error) { isError = true; } } catch { /* not JSON, leave as-is */ }
+            if (target) { target.result = content; target.status = isError ? 'error' : 'done'; target.error = isError || undefined; }
+            else parts.push({ kind: 'tool_result', name: 'result', result: content, error: isError || undefined, status: isError ? 'error' : 'done' });
+        }
     }
+    return parts;
+}
+
+export const chat = makePage((ctx) => {
+    Object.assign(ctx.state, { loading: false, messages: [], draft: '', busy: false, error: null, abort: null });
+
     // Offline outbox: a prompt sent while genuinely offline queues to
     // IndexedDB and auto-flushes on the real 'online' event, rather than
     // surfacing a hard error the user can't act on. True offline LLM
     // response generation is impossible by definition -- a queued message
-    // only gets a reply once connectivity actually returns.
-    async function sendToServer(body) {
+    // only gets a reply once connectivity actually returns. Reconnect-flush
+    // still goes through the single-shot JSON path (no live UI to stream
+    // into for a message sent while this page may not even be mounted).
+    async function sendQueuedToServer(body) {
         const r = await api('/api/chat', { method: 'POST', body });
         const reply = r.result || r.content || r.message || (r.messages && r.messages.at(-1)?.content) || JSON.stringify(r);
-        ctx.state.messages.push({ role: 'assistant', text: String(reply), time: formatTime(Date.now()) });
+        ctx.state.messages.push({ id: 'a' + Date.now(), role: 'assistant', content: String(reply), time: formatTime(Date.now()) });
+        ctx.rerender();
     }
-    watchReconnect('chat', sendToServer);
+    watchReconnect('chat', sendQueuedToServer);
+
     async function send(text) {
-        const t = (text || ctx.state.draft || '').trim();
-        if (!t || ctx.state.sending) return;
-        ctx.state.messages.push({ role: 'user', text: t, time: formatTime(Date.now()) });
-        ctx.set({ draft: '', sending: true });
+        const t = (typeof text === 'string' ? text : ctx.state.draft || '').trim();
+        if (!t || ctx.state.busy) return;
+        const userMsg = { id: 'u' + Date.now(), role: 'user', content: t, time: formatTime(Date.now()) };
+        const curMsg = { id: 'a' + (Date.now() + 1), role: 'assistant', content: '', time: formatTime(Date.now()), parts: [] };
+        ctx.state.messages = [...ctx.state.messages, userMsg, curMsg];
+        ctx.set({ draft: '', busy: true, error: null });
+
         if (!isOnline()) {
             await queueMessage('chat', { prompt: t });
-            ctx.state.messages.push({ role: 'assistant', text: '(offline -- queued, will send when connection returns)', time: formatTime(Date.now()) });
-            ctx.set({ sending: false });
+            ctx.state.messages = ctx.state.messages.slice(0, -1);
+            ctx.state.messages.push({ id: curMsg.id, role: 'assistant', content: '(offline -- queued, will send when connection returns)', time: formatTime(Date.now()) });
+            ctx.set({ busy: false });
             return;
         }
+
+        const ctrl = new AbortController();
+        ctx.state.abort = ctrl;
+        const cur = ctx.state.messages[ctx.state.messages.length - 1];
         try {
-            await sendToServer({ prompt: t });
+            const res = await fetch('/api/chat', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
+                body: JSON.stringify({ prompt: t, sessionId: ctx.state.sessionId || undefined }),
+                signal: ctrl.signal,
+            });
+            if (!res.ok || !res.body) {
+                const txt = await res.text().catch(() => '');
+                throw new Error(txt || ('HTTP ' + res.status));
+            }
+            let finalMessages = null;
+            for await (const { event, data } of parseSseStream(res)) {
+                if (ctrl.signal.aborted) break;
+                if (event === 'start') {
+                    if (data && data.sessionId) ctx.state.sessionId = data.sessionId;
+                } else if (event === 'tool_progress') {
+                    cur.parts.push(toolProgressPart(data || {}));
+                    ctx.rerender();
+                } else if (event === 'message') {
+                    // Buffered per-message events land right before `done` -- accumulate
+                    // rather than rerender per-message; the final rebuild below is O(1)
+                    // extra work and avoids a flurry of rerenders in the same tick.
+                    (finalMessages || (finalMessages = [])).push(data);
+                } else if (event === 'error') {
+                    cur.error = String((data && data.error) || 'stream error');
+                    ctx.rerender();
+                } else if (event === 'done') {
+                    if (finalMessages && finalMessages.length) {
+                        cur.parts = partsFromMessages(finalMessages);
+                        // Prefer the settled assistant text as plain content when the
+                        // rebuilt parts carry exactly one md part (the common no-tool-call
+                        // case) -- keeps AgentChat's md-vs-content dedup path simple.
+                        cur.content = '';
+                    } else if (data && data.result) {
+                        cur.content = String(data.result);
+                    }
+                    ctx.rerender();
+                }
+            }
         } catch (e) {
-            ctx.state.messages.push({ role: 'assistant', text: 'Error: ' + String(e.message || e), time: formatTime(Date.now()) });
+            if (e && e.name === 'AbortError') {
+                cur.stopped = true;
+            } else {
+                cur.error = String(e && e.message || e);
+            }
+        } finally {
+            ctx.state.abort = null;
+            ctx.set({ busy: false });
         }
-        ctx.set({ sending: false });
-    }
-    // Combines the existing bottom-pin auto-scroll ref (stickyScroll) with the
-    // virtualizer's range recompute on every scroll tick. Both run off the
-    // SAME element -- one ref callback wiring both keeps a single listener
-    // registration instead of two refs fighting over the same node.
-    function threadRef(el) {
-        if (!el) { threadEl = null; return; }
-        threadEl = el;
-        stickyScroll(el);
-        if (!el.__vsScrollWired) {
-            el.__vsScrollWired = true;
-            el.addEventListener('scroll', () => { recomputeRange(); ctx.rerender(); }, { passive: true });
-        }
-        recomputeRange();
+    }
+
+    function stop() {
+        if (ctx.state.abort) { try { ctx.state.abort.abort(); } catch { /* already settled */ } }
     }
 
     return () => {
         const s = ctx.state;
-        const virtualized = s.messages.length > VIRTUALIZE_THRESHOLD;
-        let threadChildren;
-        if (!s.messages.length) {
-            threadChildren = [emptyState('send a prompt to start', Icon('forum'))];
-        } else if (!virtualized) {
-            threadChildren = s.messages.map((m, i) => ChatMessage({ ...m, key: i }));
-        } else {
-            recomputeRange();
-            const { startIndex, endIndex, topSpacerPx, bottomSpacerPx } = range;
-            threadChildren = [
-                h('div', { key: '_top_spacer', style: `height:${topSpacerPx}px` }),
-                ...s.messages.slice(startIndex, endIndex).map((m, i) => {
-                    const realIndex = startIndex + i;
-                    return h('div', { key: 'vm' + realIndex, ref: measureRef(virtualizer, realIndex) }, ChatMessage({ ...m, key: realIndex }));
-                }),
-                h('div', { key: '_bottom_spacer', style: `height:${bottomSpacerPx}px` }),
-            ];
-        }
         return h('div', { class: 'fd-chat' },
-            PageHeader({ eyebrow: 'freddie', title: 'chat', lede: 'one-shot agent turns · POST /api/chat' }),
-            liveRegion(s.sending ? 'waiting for assistant reply' : ''),
-            h('div', { class: 'chat-thread fd-chat-thread', role: 'log', 'aria-label': 'chat messages',
-                ref: threadRef },
-                ...threadChildren,
-                s.sending ? ChatMessage({ role: 'assistant', typing: true, key: '_typing' }) : null),
-            ChatComposer({
-                value: s.draft,
-                placeholder: s.sending ? 'waiting for reply…' : 'message…',
-                disabled: s.sending,
+            AgentChat({
+                messages: s.messages,
+                busy: s.busy,
+                draft: s.draft,
+                status: s.busy ? 'streaming…' : 'ready',
+                agentName: 'freddie',
+                placeholder: s.busy ? 'waiting for reply…' : 'message…',
+                showMinimap: true,
+                banners: s.error ? [noteAlert({ kind: 'error', msg: s.error })] : [],
                 onInput: (v) => { s.draft = v; },
                 onSend: send,
+                onStop: stop,
+                onNewChat: () => ctx.set({ messages: [], draft: '', error: null, sessionId: null }),
             }));
     };
 });
@@ -364,44 +461,34 @@ export const analytics = makePage((ctx) => {
 // ---- models ----------------------------------------------------------------
 
 export const models = makePage((ctx) => {
-    Object.assign(ctx.state, { discovering: false });
+    Object.assign(ctx.state, { rebuilding: false, selectedProviderId: null, selectedModel: null });
+    // GET /api/models/availability — the real per-(provider x model x mode)
+    // availability matrix (plugins/gui-models-discover), per freddie's AGENTS.md
+    // "Model availability matrix" section. 404 with {error,hint} when the
+    // matrix file hasn't been built yet — ModelsConfig itself renders that
+    // as an empty state with a "build availability matrix" action.
     async function load() {
-        try {
-            const [providers, cached, sampler] = await Promise.all([
-                api('/api/models/providers').catch(() => []),
-                api('/api/models/cached').catch(() => ({})),
-                api('/api/models/sampler').catch(() => ({})),
-            ]);
-            ctx.set({ loading: false, providers, cached, sampler, error: null });
-        } catch (e) { ctx.set({ loading: false, error: e }); }
+        try { ctx.set({ loading: false, data: await api('/api/models/availability'), error: null }); }
+        catch (e) { ctx.set({ loading: false, data: null, error: (e && e.body) || e }); }
     }
-    async function discover() {
-        if (ctx.state.discovering) return;
-        ctx.set({ discovering: true });
-        try { await api('/api/models/discover', { method: 'POST', body: {} }); await load(); }
-        catch (e) { ctx.set({ error: e }); }
-        ctx.set({ discovering: false });
+    async function rebuild() {
+        if (ctx.state.rebuilding) return;
+        ctx.set({ rebuilding: true, rebuildError: null });
+        try { await api('/api/models/availability/rebuild', { method: 'POST', body: {} }); await load(); }
+        catch (e) { ctx.set({ rebuildError: e }); }
+        ctx.set({ rebuilding: false });
     }
     load();
     return () => {
         const s = ctx.state;
-        if (s.loading) return loadingState('loading models…');
-        if (s.error && !s.providers) return errorState(s.error, load);
-        const providers = Array.isArray(s.providers) ? s.providers : [];
-        const cached = s.cached || {};
-        const status = s.sampler?.status || {};
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'models', lede: providers.length + ' providers', right: Btn({ variant: 'primary', disabled: s.discovering, children: s.discovering ? 'discovering…' : 'discover', onClick: discover }) }),
-            liveRegion(s.discovering ? 'discovering models' : ''),
-            section('providers', providers.length ? Table({
-                headers: ['provider', 'sampler', 'cached models'],
-                rows: providers.map(p => {
-                    const name = typeof p === 'string' ? p : p.id || p.provider;
-                    const st = status[name];
-                    const cm = (cached[name] || []);
-                    return [name, st ? (st.available === false ? Chip({ tone: 'miss', children: 'down' }) : Chip({ tone: 'ok', children: 'up' })) : '—', Array.isArray(cm) ? cm.length : '—'];
-                }),
-            }) : emptyState('no providers; set provider API keys')),
+            PageHeader({ eyebrow: 'freddie', title: 'models', lede: s.data ? (s.data.summary?.total_models ?? 0) + ' models across ' + (s.data.summary?.total_providers ?? 0) + ' providers' : 'model availability matrix' }),
+            ModelsConfig({
+                data: s.data, loading: s.loading, error: s.error,
+                selectedProviderId: s.selectedProviderId, onSelectProvider: (id) => ctx.set({ selectedProviderId: id, selectedModel: null }),
+                selectedModel: s.selectedModel, onSelectModel: (m) => ctx.set({ selectedModel: m }),
+                onRefresh: load, onRebuild: rebuild, rebuilding: s.rebuilding, rebuildError: s.rebuildError,
+            }),
         ];
     };
 });
@@ -444,22 +531,59 @@ export const cron = makePage((ctx) => {
 // ---- skills ----------------------------------------------------------------
 
 export const skills = makePage((ctx) => {
-    Object.assign(ctx.state, { open: null });
+    Object.assign(ctx.state, { selected: null, query: '', busyName: null });
     async function load() { try { ctx.set({ loading: false, list: await api('/api/skills'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
     load();
     return () => {
         const s = ctx.state;
-        if (s.loading) return loadingState('loading skills…');
-        if (s.error) return errorState(s.error, load);
-        const list = Array.isArray(s.list) ? s.list : (s.list?.skills || []);
+        // GET /api/skills returns {home:[...], bundled:[...], skillState} —
+        // two source lists (user ~/.freddie/skills vs bundled skills/ dirs)
+        // plus a per-skill enabled/disabled state map, not a flat array.
+        // Concat both sources (home overrides bundled on name collision,
+        // matching src/skills/index.js's own findSkill() precedence) and
+        // resolve enabled state from skillState (default true when absent).
+        const raw = s.list && typeof s.list === 'object' ? s.list : {};
+        const rawList = Array.isArray(raw) ? raw : [...(raw.bundled || []), ...(raw.home || [])];
+        const skillState = raw.skillState || {};
+        const mapped = rawList.map((sk) => ({
+            file: sk.file || sk.path || sk.name,
+            name: sk.name,
+            description: sk.description || (sk.frontmatter && sk.frontmatter.description) || '',
+            platforms: sk.platforms || (sk.frontmatter && sk.frontmatter.platforms),
+            enabled: skillState[sk.name] !== false,
+        }));
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'skills', lede: list.length + ' skills' }),
-            section('skills', list.length ? list.map((sk, i) => h('div', { key: i },
-                Row({ code: (sk.source || 'fs').slice(0, 3), title: sk.name, sub: trunc(sk.description, TRUNC_DESC).text,
-                    onClick: () => ctx.set({ open: s.open === i ? null : i }), active: s.open === i }),
-                s.open === i ? h('pre', { class: 'fd-pre fd-skill-body' }, sk.body || sk.content || '(no body)') : null,
-            )) : emptyState('no skills')),
-        ].filter(Boolean);
+            PageHeader({ eyebrow: 'freddie', title: 'skills', lede: mapped.length + ' skills' }),
+            SkillsConfig({
+                skills: mapped, selected: s.selected, loading: s.loading, error: s.error,
+                busyName: s.busyName, query: s.query, onQuery: (q) => ctx.set({ query: q }),
+                onSelect: (name) => ctx.set({ selected: s.selected === name ? null : name }),
+            }),
+        ];
+    };
+});
+
+// ---- plugins -----------------------------------------------------------------
+
+export const plugins = makePage((ctx) => {
+    Object.assign(ctx.state, { selected: null });
+    // GET /api/plugins — flat {name,version,surfaces,requires,source,enabled}
+    // list, per plugins/gui-plugins-list/plugin.js (distinct from
+    // /api/plugin-graph's D3 {nodes,edges} shape built for the dependency
+    // visualization, not a flat list UI).
+    async function load() { try { ctx.set({ loading: false, list: await api('/api/plugins'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
+    load();
+    return () => {
+        const s = ctx.state;
+        const list = Array.isArray(s.list) ? s.list : (s.list?.plugins || []);
+        return [
+            PageHeader({ eyebrow: 'freddie', title: 'plugins', lede: list.length + ' plugins loaded' }),
+            PluginsConfig({
+                plugins: list, selected: s.selected, loading: s.loading, error: s.error,
+                onSelect: (name) => ctx.set({ selected: s.selected === name ? null : name }),
+                onReload: load,
+            }),
+        ];
     };
 });
 
@@ -950,7 +1074,7 @@ export const git = makePage((ctx) => {
 
 export const FREDDIE_PAGES = {
     home, chat, voice, sessions, projects, agents, analytics,
-    models, cron, skills, config, env, tools, batch, gateway, chains,
+    models, cron, skills, plugins, config, env, tools, batch, gateway, chains,
     machines, health, debug, logs, git,
 };