anentrypoint-design 0.0.383 → 0.0.385

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.383",
+  "version": "0.0.385",
   "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/scripts/lint-css.mjs

@@ -10,7 +10,15 @@
 // around runLintCss() below.
 //
 // Run: `node scripts/lint-css.mjs` (also wired as `npm run lint`, via lint.mjs).
-import { lintTokensOrThrow, lintRadiusOrThrow, lintSpacingOrThrow } from './lint-tokens.mjs';
+import {
+    lintTokensOrThrow,
+    lintRadiusOrThrow,
+    lintSpacingOrThrow,
+    lintFontSizeOrThrow,
+    lintZIndexOrThrow,
+    lintTransitionAllOrThrow,
+    lintImportantOrThrow,
+} from './lint-tokens.mjs';
 import { lintGlyphsOrThrow } from './lint-glyphs.mjs';
 import { lintNullChildrenOrThrow } from './lint-null-children.mjs';
 import { lintClassesOrThrow } from './lint-classes.mjs';
@@ -19,12 +27,24 @@ import { lintDuplicateSelectorsOrThrow } from './lint-duplicate-selectors.mjs';
 import { lintSwallowCommentsOrThrow } from './lint-swallow-comments.mjs';
 
 // Each entry: a human label for the report, and the check function to run.
-// lintSpacingOrThrow is report-only (never throws — see lint-tokens.mjs), so
-// it is run but never counted as a failure; its own console.warn/log already
-// carries the detail. Every other check throws on violation.
+// EVERY check here throws on violation and is counted in the pass/fail tally.
+//
+// The three token RATCHET gates (spacing, fontsize, important) throw only when
+// the count EXCEEDS their frozen baseline — they carry inherited debt that a
+// hard zero would demand fixing in one pass. They are otherwise ordinary
+// members of this list: a ratchet that never throws is not a gate, and
+// `spacing` was previously called outside the loop under a stale "report-only,
+// never throws" comment, which meant a real spacing regression escaped as an
+// unhandled exception out of runLintCss() instead of being reported as a
+// failed check. Anything that can fail belongs in CHECKS.
 const CHECKS = [
     ['tokens', lintTokensOrThrow],
     ['radius', lintRadiusOrThrow],
+    ['zindex', lintZIndexOrThrow],
+    ['transition-all', lintTransitionAllOrThrow],
+    ['spacing', lintSpacingOrThrow],
+    ['fontsize', lintFontSizeOrThrow],
+    ['important', lintImportantOrThrow],
     ['glyphs', lintGlyphsOrThrow],
     ['null-children', lintNullChildrenOrThrow],
     ['classes', lintClassesOrThrow],
@@ -48,12 +68,6 @@ export function runLintCss() {
         }
     }
 
-    // Spacing is report-only (logs its own [lint-spacing] REPORT/OK line
-    // above, via console.warn/console.log inside lintSpacingOrThrow) — never
-    // throws, so it is not part of the pass/fail tally, matching build.mjs's
-    // existing non-fatal treatment of it.
-    lintSpacingOrThrow();
-
     const failed = results.filter((r) => !r.ok);
     const passed = results.filter((r) => r.ok);
 

package/src/components/chat/message.js

@@ -0,0 +1,130 @@
+// ChatMessage — one conversational turn in every layout the surface supports:
+// messenger bubbles (you/them), centered out-of-band roles (system/tool/
+// thinking), and the flat full-width claude.ai/code turn. Owns the turn's
+// notices (stopped / incomplete / error+retry), reactions, read receipt,
+// meta line, and the hover-revealed per-message action row.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { t } from '../../i18n.js';
+import { renderInline } from '../chat-message-parts.js';
+import { avatarInitial } from '../content.js';
+import { countMessage, renderPart } from './stats.js';
+
+const h = webjsx.createElement;
+
+export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped, flat, error, onRetry }) {
+    countMessage();
+    // Support legacy 'who' prop, prefer 'role' with mapping:
+    //   'user'      -> 'you'   (right-aligned, accent bubble)
+    //   'assistant' -> 'them'  (left-aligned, paper bubble)
+    //   'system'    -> 'system' (centered, italic muted)
+    //   'tool'      -> 'tool'   (centered, collapsible card chrome)
+    //   'thinking'  -> 'thinking' (centered, transient typing dots)
+    const resolvedWho = role
+        ? (role === 'user' ? 'you'
+            : role === 'assistant' ? 'them'
+            : (role === 'system' || role === 'tool' || role === 'thinking') ? role
+            : role)
+        : who;
+    const isCentered = resolvedWho === 'system' || resolvedWho === 'tool' || resolvedWho === 'thinking';
+    // Flat layout (Claude-Code-web): full-width, avatar-less turns with a role
+    // label above the content and a faint assistant background, instead of the
+    // messenger avatar-disc + colored-bubble layout (kept for the chat demo).
+    const isFlat = flat && !isCentered;
+    const cls = 'chat-msg ' + resolvedWho + (aicat && resolvedWho === 'them' ? ' aicat' : '') + (isCentered ? ' centered' : '') + (isFlat ? ' chat-msg-flat' : '');
+    const fallbackAvatar = avatar != null
+        ? avatar
+        : (resolvedWho === 'you' ? 'u' : avatarInitial(name));
+    const av = h('span', { class: 'chat-avatar' }, fallbackAvatar);
+    let bodyNodes;
+    if (typing) bodyNodes = [h('div', { class: 'chat-bubble', key: 'typb' }, h('span', { class: 'chat-typing' }, h('span'), h('span'), h('span')))];
+    else if (parts && parts.length) bodyNodes = parts.map((p, i) => renderPart(p, i));
+    else bodyNodes = [h('div', { class: 'chat-bubble', key: 't' }, ...renderInline(text || ''))];
+    // A blinking caret at the stream head: while an assistant turn is streaming
+    // AND already shows content (so the inline typing dots have stopped), append
+    // a thin caret so the live edge reads as "still writing", not "done". Drawn as
+    // a CSS element, not a glyph character.
+    // Only append the caret as a sibling if the last part did not already embed
+    // it inline (streamingCaret flag on the last text/md part in parts array).
+    const lastPartHasCaret = parts && parts.length && parts[parts.length - 1] && parts[parts.length - 1].streamingCaret;
+    if (streaming && !typing && !lastPartHasCaret) bodyNodes = [...bodyNodes, h('span', { key: '_caret', class: 'chat-stream-caret', 'aria-hidden': 'true' })];
+    // Out-of-band turn notices, plain copy in a NEUTRAL tone (not error red):
+    //   stopped    — the turn was cancelled (locally or remotely); truncated
+    //                output must not read as a finished answer.
+    //   incomplete — the connection dropped mid-turn and events were not
+    //                replayed; the response may be missing content.
+    // Pass true for the default copy or a string to override it. Retry rides
+    // the existing per-message actions row.
+    if (stopped) bodyNodes = [...bodyNodes, h('div', { key: '_stopped', class: 'chat-msg-notice is-stopped', role: 'status' },
+        typeof stopped === 'string' ? stopped : 'stopped — this turn was cancelled before it finished')];
+    if (incomplete) bodyNodes = [...bodyNodes, h('div', { key: '_incomplete', class: 'chat-msg-notice is-incomplete', role: 'status' },
+        typeof incomplete === 'string' ? incomplete : 'connection dropped mid-turn — the response may be incomplete')];
+    // Inline per-turn error: unlike a global toast, this pins the failure to
+    // the specific turn that failed (docstudio pattern) with a retry action
+    // right there instead of forcing the user to hunt for what broke.
+    if (error) bodyNodes = [...bodyNodes, h('div', { key: '_error', class: 'chat-msg-notice is-error', role: 'alert' },
+        h('span', {}, typeof error === 'string' ? error : 'this turn failed'),
+        onRetry ? h('button', {
+            type: 'button', class: 'chat-msg-retry-btn',
+            onclick: (e) => { e.preventDefault(); onRetry(e); },
+        }, 'retry') : null)];
+    const reactionRow = reactions && reactions.length
+        ? h('div', { class: 'chat-reactions' },
+            ...reactions.map((r, i) => h('span', { class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i, 'aria-label': `${r.emoji} reaction (${String(r.count)} ${String(r.count) === '1' ? 'reaction' : 'reactions'})${r.you ? ' - you reacted' : ''}` },
+                h('span', { class: 'e', 'aria-hidden': 'true' }, r.emoji), h('span', { class: 'n', 'aria-hidden': 'true' }, String(r.count)))))
+        : null;
+    const tickNode = resolvedWho === 'you' && receipt
+        ? h('span', { class: 'tick' + (receipt === 'read' ? ' read' : ''), role: 'img', 'aria-label': receipt === 'read' ? 'message read' : 'message sent' }, Icon(receipt === 'read' ? 'check-check' : 'check', { size: 14 }))
+        : null;
+    const metaItems = [];
+    if (name && resolvedWho === 'them') metaItems.push(h('span', { class: 'who', key: 'w' }, name));
+    if (time) metaItems.push(h('span', { class: 't', key: 'ti' }, time));
+    if (tickNode) metaItems.push(tickNode);
+    const meta = metaItems.length ? h('div', { class: 'chat-meta' }, ...metaItems) : null;
+    // Per-message actions (copy / retry / edit) — a hover-revealed control row
+    // below the bubble, the way Claude-Desktop surfaces message-level actions.
+    // Each action is { label, icon, onClick, title }. Kept icon-only with an
+    // accessible name; no decorative glyphs (the Icon set is line-SVG).
+    const actionRow = (actions && actions.length)
+        ? h('div', { class: 'chat-msg-actions', role: 'group', 'aria-label': 'message actions' },
+            ...actions.filter(Boolean).map((a, i) => h('button', {
+                key: 'ma' + i, type: 'button', class: 'chat-msg-action',
+                title: a.title || a.label, 'aria-label': a.label || a.title,
+                onclick: (e) => {
+                    e.preventDefault();
+                    a.onClick && a.onClick(e);
+                    // Copy is the highest-traffic per-message action and, unlike
+                    // code-block/tool-result copy elsewhere in this file, had no
+                    // self-contained visual feedback — a sighted/mouse user saw
+                    // nothing happen. Flip the button's own label/icon the same
+                    // way those sibling copy controls already do.
+                    if (a.label === 'copy') {
+                        const btn = e.currentTarget;
+                        const labelEl = btn.querySelector('.chat-msg-action-label');
+                        clearTimeout(btn._dsCopyTimer);
+                        btn.classList.add('is-copied');
+                        if (labelEl) labelEl.textContent = 'copied';
+                        btn._dsCopyTimer = setTimeout(() => {
+                            btn.classList.remove('is-copied');
+                            if (labelEl) labelEl.textContent = 'copy';
+                        }, 1600);
+                    }
+                },
+            }, a.icon ? Icon(a.icon, { size: 14 }) : null,
+               a.label ? h('span', { class: 'chat-msg-action-label' }, a.label) : null)))
+        : null;
+    // Flat layout leads the turn with a small role label (You / agent name)
+    // above the content, the way claude.ai/code titles each turn.
+    const roleLabel = isFlat
+        ? h('div', { class: 'chat-role', key: '_role' }, resolvedWho === 'you' ? t('chat.roleYou', 'You') : (name || t('chat.roleAssistant', 'Assistant')))
+        : null;
+    const stack = h('div', { class: 'chat-stack' }, roleLabel, ...bodyNodes, reactionRow, actionRow, meta);
+    // Centered roles (system/tool/thinking) skip the avatar column entirely so
+    // the bubble owns the full row — the chrome reads as out-of-band signal,
+    // not a participant turn.
+    if (isCentered) return h('div', { key, class: cls }, stack);
+    // Flat turns drop the avatar column entirely (full-width content).
+    if (isFlat) return h('div', { key, class: cls }, stack);
+    return h('div', { key, class: cls }, resolvedWho === 'you' ? stack : av, resolvedWho === 'you' ? av : stack);
+}

package/src/components/chat/stats.js

@@ -0,0 +1,36 @@
+// Chat-surface debug counters + the markdown/Prism cache warm-up, registered
+// into the single `window.__debug` client-side registry. Kept in its own
+// module so ChatMessage (which increments the counters) and the registration
+// call in the barrel share one live object rather than two copies.
+
+import { initializeCachesEagerly, getCacheStats } from '../../markdown-cache.js';
+import { register } from '../../debug.js';
+import { renderMessagePart as sharedRenderMessagePart } from '../chat-message-parts.js';
+
+const _stats = { messages: 0, lastKindCounts: {} };
+let _cacheInitialized = false;
+
+// Eagerly warm the markdown + Prism caches on first chat-surface mount, once.
+export function ensureCachesInit() {
+    if (_cacheInitialized) return;
+    _cacheInitialized = true;
+    initializeCachesEagerly().catch((err) => console.warn('[247420] cache init error:', err));
+}
+
+export function countMessage() { _stats.messages += 1; }
+
+// Thin wrapper around the shared renderer that keeps this file's own debug
+// counter (_stats.lastKindCounts, surfaced via register('chat', ...) below)
+// wired exactly as before. sharedRenderMessagePart already applies the
+// 'p' + key VElement key itself.
+export function renderPart(p, key) {
+    return sharedRenderMessagePart(p, key, (kind) => {
+        _stats.lastKindCounts[kind] = (_stats.lastKindCounts[kind] || 0) + 1;
+    });
+}
+
+register('chat', () => ({
+    messages: _stats.messages,
+    lastKindCounts: { ..._stats.lastKindCounts },
+    cacheStats: getCacheStats(),
+}));

package/src/components/chat/thread-scroll.js

@@ -0,0 +1,42 @@
+// Thread auto-scroll: keep a scroll container pinned to the bottom as new
+// messages arrive, but never while the user is mid-selection. Shared by Chat,
+// AICat, and AgentChat.
+
+// True when the user has a non-collapsed text selection anchored inside `el`.
+// Used to pause auto-scroll (and by hosts to pause streaming re-renders) so
+// select-and-copy from a still-streaming message is not wiped every frame.
+export function hasSelectionInside(el) {
+    const sel = typeof document !== 'undefined' && document.getSelection ? document.getSelection() : null;
+    return !!(sel && !sel.isCollapsed && sel.anchorNode && el && el.contains(sel.anchorNode));
+}
+
+// Build a ref callback that keeps a scroll container pinned to the bottom when
+// new messages arrive AND the user is already at the bottom (sentinel visible).
+// `getCount` returns the current message count so the observer compares against
+// live state. Shared by Chat, AICat, and AgentChat.
+// CONTRACT: auto-scroll pauses while the user holds a non-collapsed selection
+// inside the thread (hasSelectionInside) — the same guard hosts apply to their
+// streaming re-render pass — and resumes once the selection collapses.
+export function makeThreadAutoScroll(getCount) {
+    return (el) => {
+        if (!el) return;
+        let sentinel = el.querySelector('[data-scroll-sentinel]');
+        if (!sentinel) {
+            sentinel = document.createElement('div');
+            sentinel.setAttribute('data-scroll-sentinel', '');
+            sentinel.style.height = '1px';
+            el.appendChild(sentinel);
+        }
+        const obs = new IntersectionObserver((entries) => {
+            if (hasSelectionInside(el)) return; // don't fight an active selection
+            const count = String(getCount());
+            if (entries[0]?.isIntersecting && el.dataset.msgCount !== count) {
+                el.scrollTop = el.scrollHeight - el.clientHeight;
+                el.dataset.msgCount = count;
+            }
+        }, { root: el, threshold: 0 });
+        obs.observe(sentinel);
+        el.dataset.msgCount = String(getCount());
+        return () => obs.disconnect();
+    };
+}

package/src/components/freddie/pages-chat.js

@@ -0,0 +1,149 @@
+// Freddie conversational pages: the streaming `chat` page (SSE over POST,
+// offline outbox queueing, abortable turns) and the `voice` backend probe.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { makePage, api, loadingState, emptyState } from './runtime.js';
+import { Table, PageHeader } from '../content.js';
+import { Chip } from '../shell.js';
+import { formatTime } from '../../locale.js';
+import { queueMessage, watchReconnect, isOnline } from '../../idb-outbox.js';
+import { AgentChat } from '../agent-chat.js';
+import { section, noteAlert } from './shared.js';
+import { parseSseStream, toolProgressPart, partsFromMessages } from './sse.js';
+
+const h = webjsx.createElement;
+
+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. 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({ id: 'a' + Date.now(), role: 'assistant', content: String(reply), time: formatTime(Date.now()) });
+        ctx.rerender();
+    }
+    watchReconnect('chat', sendQueuedToServer);
+
+    async function send(text) {
+        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 = 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 {
+            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) {
+            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 });
+        }
+    }
+
+    function stop() {
+        if (ctx.state.abort) { try { ctx.state.abort.abort(); } catch { /* swallow: already settled */ } }
+    }
+
+    return () => {
+        const s = ctx.state;
+        return h('div', { class: 'fd-chat' },
+            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 }),
+            }));
+    };
+});
+
+export const voice = makePage((ctx) => {
+    async function load() {
+        // Probe for a voice backend; the endpoint is optional, so a 404/!ok
+        // means "not wired" rather than an error to surface.
+        try { const v = await api('/api/voice').catch(() => null); ctx.set({ loading: false, voice: v, error: null }); }
+        catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading voice config…');
+        const v = s.voice;
+        const enabled = v && (v.enabled || v.transcription || v.tts);
+        return [
+            PageHeader({ title: 'voice', lede: 'voice surfaces', right: enabled ? Chip({ tone: 'ok', children: 'enabled' }) : Chip({ tone: 'neutral', children: 'not configured' }) }),
+            enabled
+                ? section('backends', Table({ headers: ['capability', 'status'], rows: [['transcription', v.transcription ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })], ['tts', v.tts ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })]] }))
+                : section('status', emptyState('no voice backend wired in this build. configure a transcription/tts plugin to enable.')),
+        ];
+    };
+});

package/src/components/freddie/pages-config.js

@@ -0,0 +1,203 @@
+// Freddie configuration pages: `models` (availability matrix + rebuild),
+// `skills`, `plugins`, `config` (runtime settings + skin), and `env`
+// (provider api keys, write-only, never echoed back).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { makePage, api, loadingState, errorState, emptyState } from './runtime.js';
+import { Row, Table, PageHeader, TextField, Select } from '../content.js';
+import { Chip, Btn } from '../shell.js';
+import { ModelsConfig } from '../models-config.js';
+import { SkillsConfig } from '../skills-config.js';
+import { PluginsConfig } from '../plugins-config.js';
+import { section, noteAlert, liveRegion } from './shared.js';
+
+const h = webjsx.createElement;
+
+export const models = makePage((ctx) => {
+    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 { 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 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;
+        return [
+            PageHeader({ 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,
+            }),
+        ];
+    };
+});
+
+export const skills = makePage((ctx) => {
+    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;
+        // 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({ 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 }),
+            }),
+        ];
+    };
+});
+
+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({ 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,
+            }),
+        ];
+    };
+});
+
+export const config = makePage((ctx) => {
+    Object.assign(ctx.state, { edited: {}, busy: false, note: null });
+    async function load() {
+        try {
+            const [cfg, skins] = await Promise.all([api('/api/config'), api('/api/skins').catch(() => null)]);
+            ctx.set({ loading: false, cfg, skins, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    async function save() {
+        ctx.set({ busy: true, note: null });
+        try { await api('/api/config', { method: 'POST', body: ctx.state.edited }); ctx.state.edited = {}; await load(); ctx.set({ note: { kind: 'success', msg: 'saved' } }); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    async function setSkin(name) {
+        ctx.set({ busy: true, note: null });
+        try { await api('/api/config', { method: 'POST', body: { skin: name } }); await load(); ctx.set({ note: { kind: 'success', msg: 'skin -> ' + name } }); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading config…');
+        if (s.error) return errorState(s.error, load);
+        const cfg = s.cfg || {};
+        const flat = Object.entries(cfg).filter(([, v]) => typeof v !== 'object' || v === null);
+        const nested = Object.entries(cfg).filter(([, v]) => typeof v === 'object' && v !== null);
+        const skinList = Array.isArray(s.skins) ? s.skins : (s.skins?.skins || s.skins?.available || []);
+        const activeSkin = cfg.skin || s.skins?.active || '';
+        return [
+            PageHeader({ title: 'config', lede: 'runtime configuration' }),
+            noteAlert(s.note),
+            liveRegion(s.busy ? 'saving configuration' : ''),
+            nested.length ? h('div', { class: 'ds-alert ds-alert-info', role: 'note' },
+                h('span', { class: 'ds-alert-icon' }, 'i'),
+                h('div', { class: 'ds-alert-content' }, nested.length + ' nested config ' + (nested.length === 1 ? 'object is' : 'objects are') + ' read-only here (' + nested.map(([k]) => k).join(', ') + ') — edit via the config file or raw view below.')) : null,
+            skinList.length ? section('skin',
+                Select({ label: 'active skin', value: activeSkin, options: skinList, onChange: (v) => setSkin(v) })
+            ) : null,
+            section('settings', flat.length ? flat.map(([k, v], i) =>
+                TextField({ key: i, label: k, value: String(ctx.state.edited[k] ?? v ?? ''), onInput: (val) => { ctx.state.edited[k] = val; } })
+            ) : emptyState('no scalar config keys')),
+            section('raw', h('pre', { class: 'fd-pre' }, JSON.stringify(cfg, null, 2))),
+            section('actions',
+                Btn({ variant: 'primary', disabled: s.busy || !Object.keys(s.edited).length, children: s.busy ? 'saving…' : 'save changes', onClick: save })),
+        ].filter(Boolean);
+    };
+});
+
+export const env = makePage((ctx) => {
+    Object.assign(ctx.state, { auth: null, vars: null, draft: {}, busy: '', note: null });
+    async function load() {
+        try {
+            const [auth, vars] = await Promise.all([api('/api/auth').catch(() => null), api('/api/env').catch(() => null)]);
+            ctx.set({ loading: false, auth, vars, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    // Set a provider key through the dashboard (POST /api/auth). The key is sent
+    // once and never echoed back — GET /api/auth returns only a masked fingerprint.
+    async function setKey(provider) {
+        const key = (ctx.state.draft[provider] || '').trim();
+        if (!key) { ctx.set({ note: { kind: 'warn', msg: 'key required for ' + provider } }); return; }
+        ctx.set({ busy: provider, note: null });
+        try { await api('/api/auth', { method: 'POST', body: { provider, key } }); ctx.state.draft[provider] = ''; await load(); ctx.set({ note: { kind: 'success', msg: 'stored ' + provider } }); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: '' });
+    }
+    async function removeKey(provider) {
+        ctx.set({ busy: provider, note: null });
+        try { await api('/api/auth/' + encodeURIComponent(provider), { method: 'DELETE' }); await load(); ctx.set({ note: { kind: 'success', msg: 'removed ' + provider } }); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: '' });
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading keys…');
+        if (s.error && !s.auth) return errorState(s.error, load);
+        const auth = Array.isArray(s.auth) ? s.auth : [];
+        const vars = Array.isArray(s.vars) ? s.vars : [];
+        // Non-provider env vars (platform tokens etc) stay a read-only presence table.
+        const providerEnvs = new Set(auth.map(a => a.env));
+        const otherRows = vars.filter(v => !providerEnvs.has(v.key)).map(v => [v.key, v.set ? Chip({ tone: 'ok', children: v.source || 'set' }) : Chip({ tone: 'neutral', children: 'unset' })]);
+        return [
+            PageHeader({ title: 'keys', lede: 'provider api keys · stored locally, never displayed' }),
+            noteAlert(s.note),
+            section('provider keys',
+                auth.length ? auth.map((a, i) => Row({
+                    key: i, title: a.provider, sub: a.env + (a.set ? '  ·  ' + a.source + (a.fingerprint ? '  ·  ' + a.fingerprint : '') : ''),
+                    trailing: h('span', { class: 'fd-row-actions' },
+                        a.set ? Chip({ tone: 'ok', children: 'set' }) : Chip({ tone: 'neutral', children: 'unset' }),
+                        TextField({ type: 'password', value: s.draft[a.provider] || '', onInput: (v) => { s.draft[a.provider] = v; }, placeholder: 'paste key', 'aria-label': 'key for ' + a.provider }),
+                        Btn({ variant: 'primary', disabled: s.busy === a.provider, children: s.busy === a.provider ? '…' : 'save', onClick: () => setKey(a.provider) }),
+                        (a.set && a.source === 'stored') ? Btn({ variant: 'danger', disabled: s.busy === a.provider, children: 'remove', onClick: () => removeKey(a.provider) }) : null),
+                })) : emptyState('no providers')),
+            otherRows.length ? section('other environment', Table({ headers: ['key', 'status'], rows: otherRows })) : null,
+        ].filter(Boolean);
+    };
+});