anentrypoint-design 0.0.414 → 0.0.416

package/dist/src/index.js

@@ -5,15 +5,28 @@
 import * as webjsx from '../vendor/webjsx/index.js';
 import { loadCss, scope } from './styles.js';
 import { registerDeckStage, getDeckStage } from './deck-stage.js';
+import { Router, createRouter } from './router.js';
 import * as components from './components.js';
 import * as motion from './motion.js';
 import * as debug from './debug.js';
-import { renderMarkdown, ensureReady as ensureMarkdownReady } from './markdown.js';
-import { ensurePrism, highlightAllUnder } from './highlight.js';
+import { renderMarkdown, ensureReady as ensureMarkdownReady, sanitizeHtml, isDegraded as isMarkdownDegraded, configureMarkdownCdn, getMarkdownCdnConfig } from './markdown.js';
+import { escapeHtml, escapeJson } from './html-escape.js';
+import { uid, shortUid } from './uid.js';
+import { ensurePrism, highlightAllUnder, configurePrismCdn, getPrismCdnConfig } from './highlight.js';
+import { ensureMermaid, renderMermaid, renderMermaidBlocksUnder, configureMermaidCdn, getMermaidCdnConfig } from './mermaid.js';
+import { ensureKatex, renderMathBlocksUnder, configureKatexCdn, getKatexCdnConfig } from './math.js';
 import { renderPageHtml } from './page-html.js';
+import { HeroFromPageData } from './components/content.js';
+import { ThemeToggle } from './components/theme-toggle.js';
 import { mountKit } from './bootstrap.js';
 import * as theme from './theme.js';
+import { t, registerLocale, getLocale, setLocale, availableLocales } from './i18n.js';
 import { registerChatElement, DsChat } from './web-components/ds-chat.js';
+import { registerFreddieChatElement, FreddieChat } from './web-components/freddie-chat.js';
+import { formatTime, formatDateTime, formatNumber, formatRelativeTime } from './locale.js';
+import { queueMessage, listQueued, flushQueue, watchReconnect, isOnline } from './idb-outbox.js';
+import { createVirtualizer, measureRef } from './virtual-scroll.js';
+import { applyMotion, getMotion, isMotionReduced, onMotionChange, initMotion } from './motion-toggle.js';
 
 let _installed = false;
 export async function installStyles(target) {
@@ -32,9 +45,18 @@ export async function installStyles(target) {
     }
 }
 
+// Tracks nodes already mounted via mount() so a second mount() call onto the
+// same DOM node fails loud instead of silently layering a second render loop
+// (double applyDiff/animateTree on one root corrupts webjsx's diff state).
+const _mountedRoots = new WeakSet();
+
 export function mount(rootEl, viewFn, { autoScope = true } = {}) {
-    if (!rootEl) throw new Error('mount: rootEl required');
+    if (!rootEl) throw new Error('mount: rootEl required (received ' + (rootEl === null ? 'null' : typeof rootEl) + ')');
     if (typeof viewFn !== 'function') throw new Error('mount: viewFn required');
+    if (_mountedRoots.has(rootEl)) {
+        throw new Error('mount: this element is already mounted — call the returned render() to re-render, do not mount() the same root twice');
+    }
+    _mountedRoots.add(rootEl);
     if (autoScope && rootEl.classList && !rootEl.classList.contains(scope.slice(1))) {
         const cls = scope.slice(1);
         const inheritedFromAncestor = rootEl.closest && rootEl.closest('.' + cls);
@@ -51,36 +73,60 @@ export function mount(rootEl, viewFn, { autoScope = true } = {}) {
     return render;
 }
 
-// Side-effect: register <ds-chat> as soon as the SDK loads in a browser.
+// Side-effect: register <ds-chat> + <freddie-chat> as soon as the SDK loads in a browser.
 if (typeof window !== 'undefined' && typeof customElements !== 'undefined') {
     registerChatElement();
+    registerFreddieChatElement();
 }
 
 export {
     webjsx, loadCss, scope,
     registerDeckStage, getDeckStage,
+    Router, createRouter,
     components, motion, debug, mountKit,
-    renderMarkdown, ensureMarkdownReady,
-    ensurePrism, highlightAllUnder,
+    renderMarkdown, ensureMarkdownReady, sanitizeHtml, isMarkdownDegraded,
+    configureMarkdownCdn, getMarkdownCdnConfig,
+    ensurePrism, highlightAllUnder, configurePrismCdn, getPrismCdnConfig,
+    ensureMermaid, renderMermaid, renderMermaidBlocksUnder, configureMermaidCdn, getMermaidCdnConfig,
+    ensureKatex, renderMathBlocksUnder, configureKatexCdn, getKatexCdnConfig,
     registerChatElement, DsChat,
-    renderPageHtml,
-    theme
+    registerFreddieChatElement, FreddieChat,
+    renderPageHtml, HeroFromPageData,
+    escapeHtml, escapeJson,
+    uid, shortUid,
+    theme, ThemeToggle,
+    t, registerLocale, getLocale, setLocale, availableLocales,
+    formatTime, formatDateTime, formatNumber, formatRelativeTime,
+    queueMessage, listQueued, flushQueue, watchReconnect, isOnline,
+    createVirtualizer, measureRef,
+    applyMotion, getMotion, isMotionReduced, onMotionChange, initMotion
 };
-export { applyTheme, getTheme, resolvedTheme, onThemeChange, initTheme } from './theme.js';
+export { applyTheme, getTheme, resolvedTheme, onThemeChange, initTheme,
+         applyAccent, getAccent, applyDensity, getDensity } from './theme.js';
+export { extractAtQuery, buildEntriesFromFiles, filterFileEntries, buildAtInsertText,
+         buildAtMentionText, buildFileAtMentionsText } from './file-mention.js';
 export const h = webjsx.createElement;
 export const applyDiff = webjsx.applyDiff;
 
+// spoint kit paint surfaces (loading screen, HUD, editor chrome).
+export { renderLoadingScreen } from './kits/spoint/loading-screen.js';
+export { renderGameHud, Crosshair, AmmoCounter, HealthBar, BoostIndicator } from './kits/spoint/game-hud.js';
+export { renderHostJoinLobby } from './kits/spoint/host-join-lobby.js';
+
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from
 // 'anentrypoint-design'` directly.
 export {
     FREDDIE_PAGES,
     home, chat, voice, sessions, projects, agents, analytics,
     models, cron, skills, config, env, tools, batch, gateway, chains,
-    skillLabel, getRecentPaths, saveRecentPath, renderChatMessages
+    skillLabel, getRecentPaths, saveRecentPath, renderChatMessages,
+    fmtBytes, fmtFileSize, fmtTime, fmtAgo, fmtDuration
 } from './components.js';
 
 export default {
     webjsx, loadCss, scope, installStyles, mount, h, applyDiff,
-    registerDeckStage, getDeckStage, components, motion, debug, mountKit,
-    renderMarkdown, ensurePrism, registerChatElement, renderPageHtml
+    registerDeckStage, getDeckStage, Router, createRouter,
+    components, motion, debug, mountKit,
+    renderMarkdown, ensurePrism, registerChatElement, renderPageHtml, HeroFromPageData,
+    escapeHtml, escapeJson
 };

package/dist/src/kits/os/about-app.js

@@ -13,10 +13,9 @@ export function renderAboutApp(opts = {}) {
             'libsql via sql.js · freddie host',
             'responsive: phone / tablet / desktop',
         ],
-        footer = 'open <code>validator</code> to run isolation harness · click apps menu for more.',
+        footer = 'click apps menu for more.',
         links = [
             { href: 'https://github.com/AnEntrypoint/thebird', text: 'source' },
-            { href: './validate.html', text: 'validate' },
         ],
     } = opts;
 
@@ -35,7 +34,7 @@ export function renderAboutApp(opts = {}) {
         ul.appendChild(li);
     }
     const foot = document.createElement('p');
-    foot.innerHTML = footer;
+    foot.textContent = footer;
     const meta = document.createElement('p');
     meta.className = 'meta';
     links.forEach((l, i) => {

package/dist/src/kits/os/app-panes.css

@@ -1,7 +1,7 @@
 /* App-pane chrome for kit components rendered inside .wm-win bodies.
    Bible tokens only — no hardcoded color, font, or radius. Focus = inset rail; no shadows, no gradients. */
 
-/* ── terminal-app ───────────────────────────────────────────────────── */
+/* --- terminal-app --- */
 .terminal-app {
     display: flex;
     flex-direction: column;
@@ -14,7 +14,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 4px 10px;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
     font-family: var(--os-mono);
     font-size: 11px;
@@ -22,16 +23,32 @@
     text-transform: lowercase;
     flex: 0 0 auto;
 }
-.terminal-app-title { font-family: var(--os-mono); }
-.terminal-app-status { font-family: var(--os-mono); color: var(--os-fg-3); }
+.terminal-app-title {
+    font-family: var(--os-mono);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.terminal-app-status {
+    font-family: var(--os-mono);
+    color: var(--os-fg-3);
+    flex: 0 0 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .terminal-app-slot {
     flex: 1 1 auto;
+    min-width: 0;
     min-height: 0;
     overflow: hidden;
     background: var(--os-bg-0);
+    position: relative;
 }
+.terminal-app-slot > * { width: 100%; height: 100%; }
 
-/* ── browser-app ────────────────────────────────────────────────────── */
+/* --- browser-app --- */
 .browser-app {
     display: flex;
     flex-direction: column;
@@ -43,15 +60,15 @@
 .browser-app-bar {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 6px 8px;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
     flex: 0 0 auto;
 }
 .browser-app-btn {
     height: 28px;
     min-width: 28px;
-    padding: 0 8px;
+    padding: 0 var(--space-2);
     background: var(--os-bg-3);
     color: var(--os-fg);
     border: none;
@@ -61,10 +78,15 @@
     outline: none;
 }
 .browser-app-btn:hover { background: var(--os-accent-soft); }
+.browser-app-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--os-accent); }
+/* Inert back/forward when there's no history in that direction. */
+.browser-app-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
+.browser-app-btn:disabled:hover { background: var(--os-bg-3); }
 .browser-app-url {
     flex: 1 1 auto;
+    min-width: 0;
     height: 28px;
-    padding: 0 10px;
+    padding: 0 var(--space-2);
     background: var(--os-bg-0);
     color: var(--os-fg);
     border: none;
@@ -75,78 +97,32 @@
 .browser-app-url:focus { box-shadow: inset 4px 0 0 var(--os-accent); }
 .browser-app-slot {
     flex: 1 1 auto;
+    min-width: 0;
     min-height: 0;
     overflow: hidden;
     background: var(--os-bg-0);
-    display: flex;
+    position: relative;
 }
-.browser-app-slot > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+.browser-app-slot > * { width: 100%; height: 100%; }
 .browser-app-status {
     flex: 0 0 auto;
-    padding: 2px 10px;
+    padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
     font: 11px var(--os-mono);
     color: var(--os-fg-3);
     text-transform: lowercase;
     min-height: 18px;
 }
+/* Loading: a thin indeterminate bar under the toolbar. Error: red status row. */
+.browser-app-loading .browser-app-bar { box-shadow: inset 0 -2px 0 var(--os-accent); }
+.browser-app[data-error] .browser-app-status { color: var(--os-danger, #c0392b); }
 
-/* ── validator-app ──────────────────────────────────────────────────── */
-.validator-app {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: var(--os-bg-1);
-    color: var(--os-fg);
-    font-family: var(--os-font);
-}
-.validator-app-head {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 10px;
-    background: var(--os-bg-2);
-    flex: 0 0 auto;
-}
-.validator-app-banner {
-    padding: 2px 10px;
-    border-radius: 999px;
-    font: 11px var(--os-mono);
-    text-transform: lowercase;
-    background: var(--os-bg-3);
-    color: var(--os-fg-2);
-}
-.validator-app-banner[data-state="pass"] { background: var(--os-accent-soft); color: var(--os-fg); }
-.validator-app-banner[data-state="fail"] { background: var(--os-red); color: var(--os-bg-0); }
-.validator-app-counts {
-    font: 11px var(--os-mono);
-    color: var(--os-fg-2);
-}
-.validator-app-rerun {
-    margin-left: auto;
-    height: 24px;
-    padding: 0 10px;
-    background: var(--os-bg-3);
-    color: var(--os-fg);
-    border: none;
-    border-radius: var(--os-radius-sm);
-    font: 11px var(--os-mono);
-    text-transform: lowercase;
-    cursor: pointer;
-    outline: none;
-}
-.validator-app-rerun:hover { background: var(--os-accent-soft); }
-.validator-app-slot {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    background: var(--os-bg-0);
-}
-.validator-app-slot > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
-.validator-app-frame {
-    width: 100%;
-    height: 100%;
-    border: none;
-    background: var(--os-bg-0);
+/* Touch tap-target floor for the browser pane toolbar. The back/forward/reload
+ * buttons and the URL field are 28px by default (no @media anywhere), below the
+ * 44px touch minimum on tablets and phones. Lift them on coarse pointers and
+ * grow the bar so the controls fit with breathing room. */
+@media (hover: none), (pointer: coarse) {
+    .browser-app-bar { min-height: 52px; padding: 6px var(--space-2); }
+    .browser-app-btn { min-height: var(--os-tap, 44px); height: var(--os-tap, 44px); min-width: var(--os-tap, 44px); }
+    .browser-app-url { height: var(--os-tap, 44px); }
 }

package/dist/src/kits/os/browser-app.js

@@ -1,7 +1,10 @@
 // Browser-pane paint surface — URL bar + iframe slot + status row. Consumer owns iframe.
 // renderBrowserPane({initialUrl, callbacks: {onNavigate, onReload, onBack, onForward}})
-//   -> {node, slot, setUrl, setStatus, dispose}.
+//   -> {node, slot, setUrl, setStatus, setNav, setLoading, setError, dispose}.
 // slot is the container the consumer should append its iframe to.
+// setNav({canBack,canForward}) disables the back/forward buttons when history
+// has no entry in that direction; setLoading(bool) toggles a loading state on
+// the bar; setError(msg|null) surfaces a load failure in the status row.
 
 export function renderBrowserPane(opts = {}) {
     const { initialUrl = 'about:blank', callbacks = {} } = opts;
@@ -21,8 +24,14 @@ export function renderBrowserPane(opts = {}) {
         return b;
     };
     const backBtn = mkBtn('<', 'back');
+    backBtn.setAttribute('aria-label', 'Back');
     const fwdBtn = mkBtn('>', 'forward');
+    fwdBtn.setAttribute('aria-label', 'Forward');
     const reloadBtn = mkBtn('reload', 'reload');
+    reloadBtn.setAttribute('aria-label', 'Reload');
+    // Start with no history in either direction until the consumer says otherwise.
+    backBtn.disabled = true;
+    fwdBtn.disabled = true;
 
     const urlInput = document.createElement('input');
     urlInput.type = 'text';
@@ -44,6 +53,8 @@ export function renderBrowserPane(opts = {}) {
 
     const status = document.createElement('div');
     status.className = 'browser-app-status';
+    status.setAttribute('role', 'status');
+    status.setAttribute('aria-live', 'polite');
     status.textContent = '';
 
     node.append(bar, slot, status);
@@ -53,6 +64,22 @@ export function renderBrowserPane(opts = {}) {
         get slot() { return slot; },
         setUrl(u) { urlInput.value = u; },
         setStatus(s) { status.textContent = s; },
+        // Reflect history availability so disabled buttons read as inert.
+        setNav({ canBack = false, canForward = false } = {}) {
+            backBtn.disabled = !canBack;
+            fwdBtn.disabled = !canForward;
+        },
+        // Loading: tint the bar + announce; the consumer flips it off on load/error.
+        setLoading(on) {
+            node.classList.toggle('browser-app-loading', !!on);
+            if (on) { node.removeAttribute('data-error'); status.textContent = 'loading...'; }
+        },
+        // Error: persistent failure surfaced in the live status row.
+        setError(msg) {
+            node.classList.remove('browser-app-loading');
+            if (msg) { node.setAttribute('data-error', '1'); status.textContent = msg; }
+            else { node.removeAttribute('data-error'); }
+        },
         dispose() {},
     };
 }

package/dist/src/kits/os/files-app.js

@@ -10,8 +10,11 @@ export function renderFilesApp(opts = {}) {
     node.dataset.component = 'files-app';
 
     let preview = null;
+    let selected = null;
     async function refresh() {
         const items = await list();
+        preview = null;
+        selected = null;
         node.innerHTML = '';
         const head = document.createElement('div');
         head.className = 'head';
@@ -21,7 +24,11 @@ export function renderFilesApp(opts = {}) {
             const row = document.createElement('div');
             row.className = 'row';
             row.textContent = p;
+            row.title = p;
             row.addEventListener('click', async () => {
+                if (selected) selected.classList.remove('selected');
+                selected = row;
+                row.classList.add('selected');
                 const body = await readFile(p);
                 if (preview) preview.remove();
                 preview = document.createElement('pre');

package/dist/src/kits/os/freddie/pages-chat.js

@@ -1,143 +1,158 @@
-// Chat page — its own module because of SSE plumbing weight.
+// Chat page — dashboard surface for the agent. Renders via the kit's
+// Chat + ChatComposer primitives so the dashboard tab and the OS chat panel
+// share the same bubble / tool-call / empty-state chrome. The bespoke
+// cwd/skill/provider/model selectors live in a collapsible config strip
+// above the thread (mirror of the OS panel cc-strip pattern).
+//
+// Wire-format translation lives in ./chat-protocol.js; provider discovery and
+// the three send strategies (server SSE / in-page agent runtime / direct
+// gateway completion) plus the event->state fold live in ./chat-transport.js.
+// This module owns only the page's own state, DOM wiring, and config strip.
+
 import * as webjsx from '../../../../vendor/webjsx/index.js';
 import * as components from '../../../components.js';
-import { getRecentPaths, saveRecentPath, skillLabel, renderChatMessages } from './helpers.js';
+import { getRecentPaths, saveRecentPath, skillLabel } from '../../../components/freddie/helpers.js';
+import { toKitMessage } from './chat-protocol.js';
+import { loadProviders, fetchChatEvents, applyChatEvents } from './chat-transport.js';
 
 const h = webjsx.createElement;
-const { Panel, Receipt, Chip } = components;
-
-function parseSseEvents(text) {
-    const events = [];
-    let curEvent = null, curData = '';
-    for (const line of text.split('\n')) {
-        if (line.startsWith('event: ')) { curEvent = line.slice(7).trim(); }
-        else if (line.startsWith('data: ')) { curData = line.slice(6).trim(); }
-        else if (line === '' && curEvent) {
-            try { events.push({ event: curEvent, data: JSON.parse(curData) }); } catch {}
-            curEvent = null; curData = '';
-        }
-    }
-    return events;
-}
+const { Panel, Receipt, Chip, Icon } = components;
 
 export function makeChatPage(ctx) {
     return async function chat(h0) {
         const root = ctx.root;
         const skills = [...h0.pi.skills.values()];
-        const providers = await fetch('/api/providers').then(r => r.json()).catch(() => []);
+        const providers = await loadProviders();
         const configuredProviders = providers.filter(p => p.configured);
 
         const chatState = window.__fd_chatState = window.__fd_chatState || {
-            cwd: '', skill: '', provider: '', model: '', messages: [], busy: false, sessionId: null,
+            cwd: '', skill: '', provider: '', model: '', messages: [], busy: false, sessionId: null, draft: '', abort: null,
         };
         if (!chatState.cwd) chatState.cwd = (getRecentPaths()[0] || '');
 
-        const getMsgsContainer = () => root.querySelector('#fd-chat-msgs');
+        // Find the chat container in the live DOM (set on the rendered <ds-chat>).
+        const getChatHost = () => root.querySelector('ds-chat.fd-dashboard-chat');
+        const syncMessages = () => {
+            const host = getChatHost();
+            if (host) host.messages = chatState.messages.map(toKitMessage);
+        };
 
         const newSession = () => {
             if (chatState.busy) return;
             chatState.messages = [];
             chatState.sessionId = null;
-            renderChatMessages(getMsgsContainer(), chatState.messages);
+            syncMessages();
         };
 
-        const sendChat = async (ev) => {
-            ev.preventDefault();
+        const cancelInFlight = () => {
+            if (chatState.abort) { try { chatState.abort.abort(); } catch { /* swallow: the in-flight request may already be settled, abort() is a no-op then */ } chatState.abort = null; }
+            chatState.busy = false;
+            syncMessages();
+            renderPage();
+        };
+
+        const sendChat = async (prompt) => {
             if (chatState.busy) return;
-            const promptEl = ev.target.elements.prompt;
-            const prompt = promptEl.value.trim();
-            if (!prompt) return;
-            chatState.messages.push({ role: 'user', content: prompt });
-            promptEl.value = '';
-            promptEl.style.height = 'auto';
+            const trimmed = String(prompt || '').trim();
+            if (!trimmed) return;
+            chatState.messages.push({ role: 'user', content: trimmed });
             chatState.busy = true;
+            chatState.progress = 'agent thinking…';
+            chatState.abort = new AbortController();
             saveRecentPath(chatState.cwd);
-            renderChatMessages(getMsgsContainer(), chatState.messages);
+            syncMessages();
+            renderPage();
             try {
-                const body = { prompt, cwd: chatState.cwd || undefined, skill: chatState.skill || undefined, provider: chatState.provider || undefined, model: chatState.model || undefined, sessionId: chatState.sessionId || undefined };
-                const resp = await fetch('/api/chat', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
-                const text = await resp.text();
-                const events = parseSseEvents(text);
-                let assistantContent = '';
-                for (const { event, data } of events) {
-                    if (event === 'start' && data.sessionId) chatState.sessionId = data.sessionId;
-                    if (event === 'done' && data.sessionId) chatState.sessionId = data.sessionId;
-                    if (event === 'message') {
-                        const role = data.role;
-                        if (role === 'assistant') {
-                            const content = Array.isArray(data.content) ? data.content : [{ type: 'text', text: String(data.content || '') }];
-                            for (const block of content) {
-                                if (block.type === 'text') assistantContent += block.text;
-                                if (block.type === 'tool_use') {
-                                    if (assistantContent) { chatState.messages.push({ role: 'assistant', content: assistantContent }); assistantContent = ''; }
-                                    const argsSummary = JSON.stringify(block.input || {}).slice(0, 60);
-                                    chatState.messages.push({ role: 'tool', name: block.name, argsSummary, content: JSON.stringify(block.input || {}, null, 2) });
-                                }
-                            }
-                        } else if (role === 'tool') {
-                            const tc = Array.isArray(data.content) ? data.content[0] : data;
-                            chatState.messages.push({ role: 'tool', name: 'result', argsSummary: '', content: String(tc?.content || tc?.text || JSON.stringify(tc)) });
-                        }
-                    }
-                    if (event === 'done' && data.result) { if (!assistantContent) assistantContent = data.result; }
-                    if (event === 'error') assistantContent = 'error: ' + (data.error || 'unknown');
-                }
+                const events = await fetchChatEvents(trimmed, chatState, renderPage);
+                const assistantContent = applyChatEvents(events, chatState, syncMessages);
                 if (assistantContent) chatState.messages.push({ role: 'assistant', content: assistantContent });
                 if (!events.length) chatState.messages.push({ role: 'assistant', content: '(no response)' });
             } catch (e) {
-                chatState.messages.push({ role: 'assistant', content: 'error: ' + e.message });
+                if (e.name === 'AbortError') chatState.messages.push({ role: 'assistant', content: '[cancelled]' });
+                else chatState.messages.push({ role: 'assistant', content: 'error: ' + e.message });
             }
+            chatState.abort = null;
             chatState.busy = false;
-            renderChatMessages(getMsgsContainer(), chatState.messages);
+            chatState.progress = '';
+            syncMessages();
+            renderPage();
         };
 
         const recentPaths = getRecentPaths();
         const datalistId = 'fd-cwd-list';
         const byCat = skills.reduce((a, s) => { const c = s.category || 'other'; (a[c] = a[c] || []).push(s); return a; }, {});
 
-        setTimeout(() => renderChatMessages(getMsgsContainer(), chatState.messages), 50);
+        const renderPage = () => {
+            const host = getChatHost();
+            if (host) {
+                host.busy = chatState.busy;
+                host.placeholder = chatState.busy
+                    ? (chatState.progress || 'agent working…')
+                    : 'describe what you want to do in the working directory…';
+            }
+            // Refresh disabled state on header buttons.
+            const newBtn = root.querySelector('.fd-chat-new');
+            if (newBtn) newBtn.disabled = !!chatState.busy;
+            const cancelBtn = root.querySelector('.fd-chat-cancel');
+            if (cancelBtn) cancelBtn.style.display = chatState.busy ? '' : 'none';
+        };
+
+        // After mount, seed messages onto the ds-chat element + wire the send event.
+        setTimeout(() => {
+            const host = getChatHost();
+            if (host && !host._fdBound) {
+                host._fdBound = true;
+                host.addEventListener('send', (e) => { sendChat(e.detail && e.detail.text); });
+                host.messages = chatState.messages.map(toKitMessage);
+                host.placeholder = 'describe what you want to do in the working directory…';
+                host.sub = chatState.sessionId ? ('session ' + chatState.sessionId.slice(0, 8)) : 'agent';
+            }
+            renderPage();
+        }, 50);
 
         const selSkill = h('select', { name: 'skill', onchange: (ev) => { chatState.skill = ev.target.value; } },
-            h('option', { value: '' }, '— no skill —'),
+            h('option', { value: '' }, 'no skill'),
             ...Object.entries(byCat).map(([cat, ss]) =>
                 h('optgroup', { label: cat },
                     ...ss.map(s => h('option', { value: s.name, selected: chatState.skill === s.name ? 'true' : null, title: s.description || s.name }, skillLabel(s)))
                 )));
 
         const selProv = h('select', { name: 'provider', onchange: (ev) => { chatState.provider = ev.target.value; } },
-            h('option', { value: '' }, configuredProviders.length ? '— auto —' : '— no providers configured —'),
-            ...configuredProviders.map(p => h('option', { value: p.name, selected: chatState.provider === p.name ? 'true' : null }, (p.available ? '● ' : '○ ') + p.name)));
+            h('option', { value: '' }, configuredProviders.length ? 'auto' : 'no providers configured'),
+            ...configuredProviders.map(p => h('option', { value: p.name, selected: chatState.provider === p.name ? 'true' : null }, (p.available ? '(on) ' : '(off) ') + p.name)));
 
         return [
             Panel({
                 title: 'chat',
-                right: h('button', { class: 'btn-primary fd-btn-mini', onclick: (ev) => { ev.preventDefault(); newSession(); }, disabled: chatState.busy ? 'true' : null }, '+ new session'),
+                right: h('div', { class: 'fd-chat-actions' },
+                    h('button', { class: 'btn-secondary fd-btn-mini fd-chat-cancel', style: chatState.busy ? '' : 'display:none', onclick: (ev) => { ev.preventDefault(); cancelInFlight(); } }, 'cancel'),
+                    h('button', { class: 'btn-primary fd-btn-mini fd-chat-new', onclick: (ev) => { ev.preventDefault(); newSession(); }, disabled: chatState.busy ? 'true' : null }, 'new session')
+                ),
                 children: [
                     h('datalist', { id: datalistId }, ...recentPaths.map(p => h('option', { value: p }))),
-                    h('form', { class: 'row-form fd-chat-form', onsubmit: sendChat },
-                        h('div', { class: 'fd-chat-field' },
+                    h('div', { class: 'fd-chat-config' },
+                        h('div', { class: 'fd-chat-field fd-chat-field-grow' },
                             h('label', {}, 'working directory'),
                             h('input', { name: 'cwd', type: 'text', placeholder: 'e.g. C:/dev/myproject or /home/user/project', value: chatState.cwd, list: datalistId, oninput: (ev) => { chatState.cwd = ev.target.value; } })),
                         h('div', { class: 'fd-chat-row' },
                             h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'skill'), selSkill),
                             h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'provider'), selProv),
                             h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'model (optional)'),
-                                h('input', { name: 'model', type: 'text', placeholder: configuredProviders.find(p => p.name === chatState.provider)?.defaultModel || 'default', value: chatState.model, oninput: (ev) => { chatState.model = ev.target.value; } }))),
-                        h('div', { class: 'fd-chat-submit' },
-                            h('textarea', { name: 'prompt', placeholder: 'describe what you want to do in the working directory…', rows: 4,
-                                oninput: (ev) => { ev.target.style.height = 'auto'; ev.target.style.height = Math.min(ev.target.scrollHeight, 240) + 'px'; } }),
-                            h('button', { type: 'submit', class: 'btn-primary', disabled: chatState.busy ? 'true' : null }, chatState.busy ? '…' : 'send'))),
-                    h('div', { id: 'fd-chat-msgs', class: 'fd-chatlog' }),
+                                h('input', { name: 'model', type: 'text', placeholder: configuredProviders.find(p => p.name === chatState.provider)?.defaultModel || 'default', value: chatState.model, oninput: (ev) => { chatState.model = ev.target.value; } })))),
+                    // Live chat surface — the kit's ds-chat web component handles
+                    // layout, scroll, empty state, bubble chrome, tool-call cards,
+                    // composer focus rings, send/cancel button swap, etc.
+                    h('ds-chat', { class: 'fd-dashboard-chat ds-247420', title: 'chat', placeholder: 'describe what you want to do in the working directory…' }),
                 ],
             }),
             configuredProviders.length === 0
                 ? Panel({ title: 'no providers configured', children: Receipt({ rows: [
                     ['set API key', 'go to keys tab, click a provider chip to set its key'],
                     ['then reload', 'refresh this page to see providers here'],
-                    ['or use acptoapi', 'run acptoapi server on localhost:4800 for local LLMs'],
+                    ['or use a gateway', 'run a gateway server on localhost:4800 for local LLMs'],
                 ] }) })
                 : Panel({ title: 'configured providers', children: h('div', { class: 'fd-chip-wrap' },
-                    ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: p.name + (p.configured ? (p.available ? ' ●' : ' ○') : '') }))) }),
+                    ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: p.configured ? [p.name, ' ', p.available ? Icon('circle-dot') : Icon('circle')] : p.name }))) }),
         ];
     };
 }