anentrypoint-design 0.0.174 → 0.0.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.174",
+  "version": "0.0.176",
   "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/chat.js

@@ -105,10 +105,50 @@ function CodeNode(p) {
     );
 }
 
+// Freddie-flavored agent parts: collapsible tool-call card, tool-result, and
+// transient thinking indicator. Each renders as a `chat-bubble` variant so the
+// surrounding ChatMessage chrome (avatar/meta/reactions) stays consistent.
+function ToolCallNode(p) {
+    const status = p.status || (p.error ? 'error' : (p.result != null ? 'done' : 'running'));
+    const argsText = typeof p.args === 'string' ? p.args : JSON.stringify(p.args || {}, null, 2);
+    const resultText = p.result == null ? '' : (typeof p.result === 'string' ? p.result : JSON.stringify(p.result, null, 2));
+    // Default-open while running or on error so the user sees live progress / failure detail;
+    // collapse on success unless the caller explicitly overrides with open:true.
+    const defaultOpen = p.open != null ? !!p.open : (status === 'running' || status === 'error');
+    const iconName = status === 'running' ? 'refresh' : (status === 'error' ? 'warn' : 'check');
+    return h('details', { class: 'chat-bubble chat-tool tool-' + status, open: defaultOpen },
+        h('summary', { class: 'chat-tool-head' },
+            h('span', { class: 'chat-tool-icon', 'aria-hidden': 'true' }, Icon(iconName, { size: 14 })),
+            h('span', { class: 'chat-tool-name' }, p.name || 'tool'),
+            p.label ? h('span', { class: 'chat-tool-label' }, p.label) : null,
+            h('span', { class: 'chat-tool-status' }, status)
+        ),
+        h('div', { class: 'chat-tool-body' },
+            h('div', { class: 'chat-tool-section' },
+                h('div', { class: 'chat-tool-section-label' }, 'args'),
+                h('pre', { class: 'chat-tool-pre' }, h('code', {}, argsText))),
+            resultText ? h('div', { class: 'chat-tool-section' },
+                h('div', { class: 'chat-tool-section-label' }, p.error ? 'error' : 'result'),
+                h('pre', { class: 'chat-tool-pre' + (p.error ? ' is-error' : '') }, h('code', {}, resultText))) : null
+        )
+    );
+}
+
+function ThinkingNode(p) {
+    return h('div', { class: 'chat-bubble chat-thinking', role: 'status', 'aria-live': 'polite' },
+        h('span', { class: 'chat-thinking-dots', 'aria-hidden': 'true' }, h('span'), h('span'), h('span')),
+        h('span', { class: 'chat-thinking-text' }, p.text || 'thinking…')
+    );
+}
+
 const PART_RENDERERS = {
     text:  (p) => h('div', { class: 'chat-bubble' }, ...renderInline(p.text || '')),
     md:    (p) => MdNode(p),
     code:  (p) => CodeNode(p),
+    tool:        (p) => ToolCallNode(p),
+    tool_call:   (p) => ToolCallNode(p),
+    tool_result: (p) => ToolCallNode({ ...p, name: p.name || 'tool_result', result: p.text != null ? p.text : p.result }),
+    thinking:    (p) => ThinkingNode(p),
     image: (p) => h('a', { class: 'chat-image', href: p.href || p.src, target: '_blank', rel: 'noopener', 'aria-label': p.alt || `embedded image: ${p.src}` },
         h('img', { src: p.src, alt: p.alt || `embedded image from ${p.src}`, loading: 'lazy' }),
         p.caption ? h('span', { class: 'cap' }, p.caption) : null),
@@ -146,9 +186,20 @@ function renderPart(p, key) {
 
 export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name }) {
     _stats.messages += 1;
-    // Support legacy 'who' prop, prefer 'role' with mapping: 'user' <-> 'you', 'assistant' <-> 'them'
-    const resolvedWho = role ? (role === 'user' ? 'you' : role === 'assistant' ? 'them' : role) : who;
-    const cls = 'chat-msg ' + resolvedWho + (aicat && resolvedWho === 'them' ? ' aicat' : '');
+    // 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';
+    const cls = 'chat-msg ' + resolvedWho + (aicat && resolvedWho === 'them' ? ' aicat' : '') + (isCentered ? ' centered' : '');
     const fallbackAvatar = avatar != null
         ? avatar
         : (resolvedWho === 'you' ? 'u' : (name ? String(name).trim().charAt(0).toUpperCase() || '?' : '?'));
@@ -171,10 +222,14 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     if (tickNode) metaItems.push(tickNode);
     const meta = metaItems.length ? h('div', { class: 'chat-meta' }, ...metaItems) : null;
     const stack = h('div', { class: 'chat-stack' }, ...bodyNodes, reactionRow, 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);
     return h('div', { key, class: cls }, resolvedWho === 'you' ? stack : av, resolvedWho === 'you' ? av : stack);
 }
 
-export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, placeholder = 'message…', disabled }) {
+export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled }) {
     // Keep a handle to the live textarea so send() reads the actual DOM value
     // (not the possibly-lagging `value` prop) and so we can sync the DOM value
     // only when it genuinely differs — re-applying `value` on every parent
@@ -220,12 +275,14 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
             onAttach ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onAttach(e); }, 'aria-label': 'attach file', title: 'attach file' }, Icon('paperclip')) : null,
             onEmoji ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onEmoji(e); }, 'aria-label': 'emoji picker', title: 'emoji picker (Ctrl+;)' }, Icon('smile')) : null,
             onMenu ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onMenu(e); }, 'aria-label': 'composer menu', title: 'more options' }, Icon('more-horizontal')) : null,
-            h('button', { type: 'button', class: 'send', disabled: disabled || !(value && value.trim()), onclick: send, 'aria-label': 'send message', title: 'send message (Enter)' }, Icon('arrow-up'))
+            busy && onCancel
+                ? h('button', { type: 'button', class: 'send cancel', onclick: (e) => { e.preventDefault(); onCancel(e); }, 'aria-label': 'stop generating', title: 'stop generating (Esc)' }, Icon('square'))
+                : h('button', { type: 'button', class: 'send', disabled: disabled || !(value && value.trim()), onclick: send, 'aria-label': 'send message', title: 'send message (Enter)' }, Icon('arrow-up'))
         )
     );
 }
 
-export function Chat({ title = 'chat', sub, messages = [], composer, header } = {}) {
+export function Chat({ title = 'chat', sub, messages = [], composer, header, suggestions, onSuggestionClick } = {}) {
     // Warm markdown/Prism caches once so library loading parallelizes.
     ensureCachesInit();
     const threadRef = makeThreadAutoScroll(() => messages.length);
@@ -243,8 +300,14 @@ export function Chat({ title = 'chat', sub, messages = [], composer, header } =
         h('div', { class: 'chat-thread', ref: threadRef, role: 'log', 'aria-label': 'chat messages' },
             messages.length === 0
                 ? h('div', { key: '_empty', class: 'chat-empty', role: 'status' },
-                    h('p', { class: 'chat-empty-title' }, 'no messages yet'),
-                    h('p', { class: 'chat-empty-sub' }, 'start the conversation'))
+                    h('p', { class: 'chat-empty-title' }, 'start a conversation'),
+                    h('p', { class: 'chat-empty-sub' }, sub || 'ask anything — i can search, read files, recall context, and call tools'),
+                    (suggestions && suggestions.length)
+                        ? h('div', { class: 'chat-empty-suggestions' },
+                            ...suggestions.map((s, i) => h('button', { key: 'sug' + i, type: 'button', class: 'chat-empty-suggestion',
+                                onclick: () => { if (onSuggestionClick) onSuggestionClick(typeof s === 'string' ? s : (s.prompt || s.text || '')); } },
+                                typeof s === 'string' ? s : (s.label || s.text || s.prompt))))
+                        : null)
                 : null,
             ...messages.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i }))
         ),

package/src/components/editor-primitives.js

@@ -272,6 +272,14 @@ export function SplitPanel({ orientation = 'horizontal', initial = '50%', min =
     const sizeProp = isH ? 'width' : 'height';
     const initStyle = typeof initial === 'number' ? initial + 'px' : initial;
     let rootEl = null;
+    // The dragged size is persisted here so a re-render (applyDiff reconciling
+    // the pane's style back to the initial value) does NOT reset the user's
+    // resize. onResize records it; the pane's ref re-applies it after each diff.
+    let draggedSize = null;
+    const applySize = (a) => {
+        if (!a) return;
+        if (draggedSize != null) { a.style[sizeProp] = draggedSize + 'px'; a.style.flex = '0 0 auto'; }
+    };
     const onResize = (delta) => {
         if (!rootEl) return;
         const a = rootEl.firstChild;
@@ -280,6 +288,7 @@ export function SplitPanel({ orientation = 'horizontal', initial = '50%', min =
         const curr = isH ? rect.width : rect.height;
         const total = isH ? rootEl.getBoundingClientRect().width : rootEl.getBoundingClientRect().height;
         const next = Math.max(min, Math.min(max === Infinity ? total - min : max, curr + delta));
+        draggedSize = next;
         a.style[sizeProp] = next + 'px';
         a.style.flex = '0 0 auto';
     };
@@ -287,7 +296,7 @@ export function SplitPanel({ orientation = 'horizontal', initial = '50%', min =
         class: 'ds-ep-split ' + (isH ? 'horiz' : 'vert'),
         ref: (el) => { rootEl = el; }
     },
-        h('div', { class: 'ds-ep-split-pane', style: '--split-size:' + initStyle + ';flex:0 0 auto' }, first),
+        h('div', { class: 'ds-ep-split-pane', style: '--split-size:' + initStyle + ';flex:0 0 auto', ref: applySize }, first),
         ResizeHandle({ axis: isH ? 'horizontal' : 'vertical', onResize }),
         h('div', { class: 'ds-ep-split-pane grow', style: 'flex:1 1 0;min-' + sizeProp + ':0' }, second)
     );

package/src/components/interaction-primitives.js

@@ -89,6 +89,56 @@ export function useDraggable(el, { data, kind, onDragStart, onDragEnd } = {}) {
     }};
 }
 
+// useNumberScrub — pointer-event horizontal drag-to-scrub on a numeric input.
+// Pointer Events (mouse+touch+pen+XR), touch-action:none so a vertical page
+// scroll never steals the gesture. Click-to-edit is preserved: a press that
+// does not cross SCRUB_THRESHOLD leaves the input focusable for typing.
+export function useNumberScrub(el, { getValue, onChange, step = 0.01, threshold = 3 } = {}) {
+    if (!el) return { destroy() {} };
+    el.style.touchAction = 'none';
+    let pid = null, startX = 0, startV = 0, moved = false;
+    const onMove = (e) => {
+        if (pid == null) return;
+        const dx = e.clientX - startX;
+        if (!moved) {
+            if (Math.abs(dx) < threshold) return;
+            moved = true;
+            el.setAttribute('data-scrubbing', 'true');
+            if (document.activeElement === el) el.blur();
+        }
+        const v = startV + dx * step;
+        if (onChange) onChange(v);
+    };
+    const onUp = () => {
+        if (pid == null) return;
+        try { el.releasePointerCapture(pid); } catch {}
+        pid = null;
+        el.removeAttribute('data-scrubbing');
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+    };
+    const onDown = (e) => {
+        if (e.button != null && e.button !== 0) return;
+        // Let a focused input handle caret placement / text selection instead.
+        if (document.activeElement === el) return;
+        pid = e.pointerId; startX = e.clientX; moved = false;
+        const cur = getValue ? getValue() : parseFloat(el.value);
+        startV = Number.isFinite(cur) ? cur : 0;
+        try { el.setPointerCapture(pid); } catch {}
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+    };
+    el.addEventListener('pointerdown', onDown);
+    return { destroy() {
+        el.removeEventListener('pointerdown', onDown);
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+    }};
+}
+
 export function useDropTarget(el, { accepts = [], onDrop, onDragOver } = {}) {
     if (!el) return { destroy() {} };
     el.setAttribute('data-drop-target', '');

package/src/components.js

@@ -58,7 +58,7 @@ export {
 } from './components/form-primitives.js';
 
 export {
-    useDraggable, useDropTarget, Reorderable,
+    useDraggable, useDropTarget, useNumberScrub, Reorderable,
     useKeyboardShortcut, formatShortcut, ShortcutHint,
     useKeyboardShortcutHelp, ShortcutHelpDialog
 } from './components/interaction-primitives.js';

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

@@ -1,7 +1,13 @@
-// 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).
+
 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 './helpers.js';
+import { Chat, ChatComposer } from '../../../components/chat.js';
 
 const h = webjsx.createElement;
 const { Panel, Receipt, Chip, Icon } = components;
@@ -20,6 +26,22 @@ function parseSseEvents(text) {
     return events;
 }
 
+// Convert the dashboard message shape into the kit ChatMessage shape:
+//   { role:'user', content:string }   -> { role:'user', text }
+//   { role:'assistant', content:string } -> { role:'assistant', parts:[{kind:'md', text}] }
+//   { role:'tool', name, argsSummary, content } ->
+//       { role:'tool', parts:[{kind:'tool_call', name, label, args, result, status}] }
+//   { role:'thinking' } -> { role:'thinking', parts:[{kind:'thinking', text}] }
+function toKitMessage(m) {
+    if (m.role === 'tool') {
+        const status = m.status || (m.error ? 'error' : (m.content != null ? 'done' : 'running'));
+        return { role: 'tool', parts: [{ kind: 'tool_call', name: m.name || 'tool', label: m.argsSummary || '', args: m.args || m.input || {}, result: m.content, status, error: !!m.error, open: status !== 'done' }] };
+    }
+    if (m.role === 'thinking') return { role: 'thinking', parts: [{ kind: 'thinking', text: m.content || 'thinking…' }] };
+    if (m.role === 'assistant' && m.content) return { role: 'assistant', parts: [{ kind: 'md', text: String(m.content) }] };
+    return { role: m.role, text: m.content || '' };
+}
+
 export function makeChatPage(ctx) {
     return async function chat(h0) {
         const root = ctx.root;
@@ -28,34 +50,44 @@ export function makeChatPage(ctx) {
         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 cancelInFlight = () => {
+            if (chatState.abort) { try { chatState.abort.abort(); } catch {} chatState.abort = null; }
+            chatState.busy = false;
+            syncMessages();
+            renderPage();
         };
 
-        const sendChat = async (ev) => {
-            ev.preventDefault();
+        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.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 body = { prompt: trimmed, 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), signal: chatState.abort.signal });
                 const text = await resp.text();
                 const events = parseSseEvents(text);
                 let assistantContent = '';
@@ -71,63 +103,110 @@ export function makeChatPage(ctx) {
                                 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) });
+                                    chatState.messages.push({ role: 'tool', name: block.name, argsSummary, content: JSON.stringify(block.input || {}, null, 2), status: 'running' });
+                                    syncMessages();
                                 }
                             }
                         } 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)) });
+                            // Resolve the last running tool call to done with this result.
+                            for (let i = chatState.messages.length - 1; i >= 0; i--) {
+                                const m = chatState.messages[i];
+                                if (m.role === 'tool' && m.status === 'running') {
+                                    m.content = String(tc?.content || tc?.text || JSON.stringify(tc));
+                                    m.status = 'done';
+                                    break;
+                                }
+                            }
+                            syncMessages();
                         }
                     }
                     if (event === 'done' && data.result) { if (!assistantContent) assistantContent = data.result; }
-                    if (event === 'error') assistantContent = 'error: ' + (data.error || 'unknown');
+                    if (event === 'error') {
+                        const msg = 'error: ' + (data.error || 'unknown');
+                        // Mark any running tool as errored; record assistant error.
+                        for (let i = chatState.messages.length - 1; i >= 0; i--) {
+                            const m = chatState.messages[i];
+                            if (m.role === 'tool' && m.status === 'running') { m.status = 'error'; m.error = true; m.content = msg; break; }
+                        }
+                        if (!assistantContent) assistantContent = msg;
+                    }
                 }
                 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);
+            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 ? '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 —'),
+            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

package/src/kits/os/freddie-dashboard.css

@@ -52,3 +52,21 @@
 .fd-chip-wrap { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); }
 .fd-chip-wrap-padded { padding: var(--space-2, 8px) var(--space-1, 4px); }
 .fd-env-chip { cursor: pointer; }
+
+/* dashboard chat tab — config strip above + <ds-chat> thread below
+   --------------------------------------------------------------------- */
+.fd-chat-config { display: flex; flex-direction: column; gap: var(--space-2, 8px); padding-bottom: var(--space-3, 12px); border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); margin-bottom: var(--space-3, 12px); }
+.fd-chat-config .fd-chat-field { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 120px; }
+.fd-chat-config .fd-chat-field > label { font-family: var(--os-mono, monospace); font-size: 10px; opacity: 0.6; letter-spacing: 0.05em; text-transform: uppercase; }
+.fd-chat-config .fd-chat-field > input,
+.fd-chat-config .fd-chat-field > select { width: 100%; box-sizing: border-box; padding: 6px 8px; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: 6px; font: inherit; font-size: 12px; }
+.fd-chat-config .fd-chat-field > input:focus-visible,
+.fd-chat-config .fd-chat-field > select:focus-visible { outline: 2px solid var(--os-accent, #247420); outline-offset: 0; border-color: color-mix(in oklab, var(--os-accent, #247420) 60%, transparent); }
+.fd-chat-config .fd-chat-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
+.fd-chat-config .fd-chat-field-grow { flex: 1 1 140px; min-width: 0; }
+
+.app-fd ds-chat.fd-dashboard-chat { flex: 1 1 auto; min-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
+
+.fd-chat-actions { display: inline-flex; gap: var(--space-1, 4px); align-items: center; }
+.fd-chat-actions .btn-secondary { background: transparent; color: var(--danger, #c0392b); border: 1px solid color-mix(in oklab, var(--danger, #c0392b) 40%, transparent); cursor: pointer; padding: 2px 8px; border-radius: 4px; font: inherit; font-size: 12px; }
+.fd-chat-actions .btn-secondary:hover { background: color-mix(in oklab, var(--danger, #c0392b) 10%, transparent); }