anentrypoint-design 0.0.385 → 0.0.387

package/src/css/app-shell/base.css

@@ -30,6 +30,15 @@ button, input, select, textarea { font: inherit; }
   border-radius: var(--r-pill);
   font-weight: 600;
   font-size: var(--fs-sm);
+  /* The skip link is the first thing a keyboard or switch user reaches, so it
+     is the last control that should be hard to hit. Its padding alone rendered
+     it 39px tall -- measured live under coarse-pointer emulation on every kit.
+     Floored unconditionally rather than under a pointer:coarse query, because
+     switch and head-pointer users are not detected as coarse pointers and need
+     the larger target just as much. */
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
 }
 .skip-link:focus {
   top: 10px;
@@ -89,6 +98,20 @@ body {
 }
 .app * { min-width: 0; }
 
+/* Scrollbar treatment, applied once at the root rather than per-component.
+   chat.css already styled its own thread and code blocks this way, but every
+   other scroll container (.app-side-shell, .app-main, .ds-scroll-x,
+   .ds-table-wrap, .ds-live-log) fell back to the UA default -- measured live,
+   4 of 4 containers on dashboard and 7 of 7 on gm_inspector were unstyled while
+   chat's two were not. A default scrollbar reads as a bright seam against a
+   near-black panel in the ink and dark themes, and inconsistently between two
+   panels on the same page. Tokens mean the thumb follows the active theme.
+   Inheriting from the container also covers scrollers added later. */
+.app, .ds-stage, .app *, .ds-stage * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-3) transparent;
+}
+
 /* ============================================================
    Typography
    ============================================================ */

package/src/css/app-shell/states-interactions.css

@@ -395,6 +395,16 @@ hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
   padding: var(--space-2) var(--space-1);
   font: inherit; color: var(--fg);
 }
+/* Touch floor for the BASE input. Several specific inputs already carried this
+   (ds-file-filter-input, ds-modal-input, ds-term-input) but the primitive every
+   form actually uses did not, so a plain field measured 34px under a coarse
+   pointer -- measured live on the settings and gm_inspector kits. The 16px
+   font-size is not cosmetic: below 16px iOS auto-zooms the viewport on focus,
+   and max() keeps it from ever shrinking under a reduced typescale. */
+@media (pointer: coarse) {
+  .input { min-height: 44px; font-size: max(16px, var(--fs-body)); }
+  textarea.input { min-height: 88px; }
+}
 .input::placeholder { color: var(--fg-3); }
 .input:focus-visible {
   outline: none;

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

@@ -0,0 +1,32 @@
+// Wire-format translation for the dashboard chat page: SSE frame parsing and
+// the dashboard-message -> kit-ChatMessage shape conversion.
+
+export 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 { /* swallow: a malformed SSE event is dropped, the stream continues */ }
+            curEvent = null; curData = '';
+        }
+    }
+    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}] }
+export 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 || '' };
+}

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

@@ -0,0 +1,178 @@
+// The three send strategies the dashboard chat falls through, and the
+// provider discovery that decides which are viable. All return (or synthesize)
+// the same `{event, data}` list the server SSE path produces, so the render
+// loop that consumes them is identical regardless of which path ran.
+
+import { parseSseEvents } from './chat-protocol.js';
+
+// Static deploy (no freddie-server, so /api/providers 404s): probe the
+// acptoapi gateway directly and, when it answers, surface it as a real
+// configured provider with its model list. Without this the dashboard
+// tells the user to "run a gateway" even though one is live and chat works.
+export async function loadProviders() {
+    let providers = await fetch('/api/providers').then(r => r.json()).catch(() => []);
+    if (!Array.isArray(providers)) providers = [];
+    if (!providers.some(p => p.configured)) {
+        try {
+            const cfg = (window.__debug?.instances?.i1?.host?.fs?.readJson?.('/etc/freddie/freddie.json', null)) || {};
+            const baseUrl = (cfg?.providers?.openai?.baseUrl || 'http://localhost:4800').replace(/\/+$/, '');
+            const ac = new AbortController();
+            const t = setTimeout(() => ac.abort(), 4000);
+            const r = await fetch(baseUrl + '/v1/models', { signal: ac.signal }).catch(() => null);
+            clearTimeout(t);
+            if (r && r.ok) {
+                const j = await r.json().catch(() => null);
+                const models = Array.isArray(j?.data) ? j.data.map(m => m.id) : [];
+                providers = [{ id: 'acptoapi', name: 'acptoapi gateway (' + baseUrl + ')', configured: true, models: ['auto', ...models] }, ...providers];
+            }
+        } catch { /* swallow: probing the local acptoapi gateway is opt-in best-effort, absence just means no providers shown */ }
+    }
+    return providers;
+}
+
+// Static deploy with an in-page agent runtime (e.g. thebird): drive
+// the REAL multi-step agent loop (host tools + acptoapi gateway +
+// tool execution) instead of a single bare completion, so the model
+// emits tool_calls, the loop executes them, feeds results back, and
+// iterates. We synthesize the same {event:'message'} stream the
+// server path produces so the render loop is unchanged. The
+// window global is the opt-in: hosts without it keep single-shot.
+async function runInPageAgent(trimmed, chatState, renderPage) {
+    const events = [];
+    try {
+        let stepN = 0;
+        const onUpdate = (snap) => {
+            try {
+                const msgs = (snap && snap.context && snap.context.messages) || [];
+                const toolMsgs = msgs.filter(m => m.role === 'tool');
+                const lastAssist = [...msgs].reverse().find(m => m.role === 'assistant' && Array.isArray(m.tool_calls) && m.tool_calls.length);
+                const running = lastAssist && lastAssist.tool_calls[0] && (lastAssist.tool_calls[0].function?.name || lastAssist.tool_calls[0].name);
+                stepN = toolMsgs.length;
+                chatState.progress = running
+                    ? ('agent: ' + running + ' (step ' + (stepN + 1) + ')…')
+                    : ('agent thinking' + (stepN ? ' (step ' + stepN + ')' : '') + '…');
+                renderPage();
+            } catch { /* swallow: progress-indicator update failing must not abort the agent run */ }
+        };
+        const out = await window.__thebirdRunAgent({ prompt: trimmed, onUpdate });
+        const turnMsgs = (out && Array.isArray(out.messages)) ? out.messages : [];
+        for (const m of turnMsgs) {
+            if (m.role === 'assistant' && Array.isArray(m.tool_calls) && m.tool_calls.length) {
+                const parts = [];
+                if (m.content) parts.push({ type: 'text', text: String(m.content) });
+                for (const tc of m.tool_calls) {
+                    const rawArgs = tc.function?.arguments ?? tc.arguments;
+                    let input = {};
+                    if (rawArgs && typeof rawArgs === 'object') input = rawArgs;
+                    else if (typeof rawArgs === 'string') { try { input = JSON.parse(rawArgs || '{}'); } catch { input = {}; } }
+                    parts.push({ type: 'tool_use', name: tc.function?.name || tc.name, input });
+                }
+                events.push({ event: 'message', data: { role: 'assistant', content: parts } });
+            } else if (m.role === 'tool') {
+                events.push({ event: 'message', data: { role: 'tool', content: [{ content: String(m.content ?? '') }] } });
+            }
+        }
+        const finalText = (out && out.result) || (out && out.error ? 'error: ' + out.error : '');
+        if (finalText) events.push({ event: 'message', data: { role: 'assistant', content: [{ type: 'text', text: String(finalText) }] } });
+        if (!events.length) events.push({ event: 'message', data: { role: 'assistant', content: [{ type: 'text', text: '' }] } });
+        return events;
+    } catch (e) {
+        return [{ event: 'error', data: { error: e?.message || String(e) } }];
+    }
+}
+
+// Static deploy without an in-page agent runtime: single direct
+// acptoapi /v1/chat/completions call (no tool loop — one shot).
+async function runDirectCompletion(trimmed, chatState) {
+    const cfg = (window.__debug?.instances?.i1?.host?.fs?.readJson?.('/etc/freddie/freddie.json', null)) || {};
+    const baseUrl = cfg?.providers?.openai?.baseUrl || 'http://localhost:4800';
+    try {
+        const url = baseUrl.replace(/\/+$/, '') + '/v1/chat/completions';
+        const reqBody = { model: chatState.model || cfg?.providers?.openai?.model || 'auto', messages: [{ role: 'user', content: trimmed }] };
+        const r2 = await fetch(url, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(reqBody), signal: chatState.abort.signal });
+        if (!r2.ok) {
+            const errText = await r2.text().catch(() => '');
+            return [{ event: 'error', data: { error: 'acptoapi ' + r2.status + ': ' + errText.slice(0, 200) } }];
+        }
+        const j = await r2.json();
+        const content = j?.choices?.[0]?.message?.content || '';
+        const tool_calls = j?.choices?.[0]?.message?.tool_calls;
+        const parts = [];
+        if (content) parts.push({ type: 'text', text: content });
+        if (Array.isArray(tool_calls)) {
+            for (const tc of tool_calls) parts.push({ type: 'tool_use', name: tc.function?.name, input: (() => { try { return JSON.parse(tc.function?.arguments || '{}'); } catch { return {}; } })() });
+        }
+        return [{ event: 'message', data: { role: 'assistant', content: parts.length ? parts : [{ type: 'text', text: '' }] } }];
+    } catch (e) {
+        return [{ event: 'error', data: { error: e?.message || String(e) } }];
+    }
+}
+
+// Try the real server SSE endpoint first; fall back to the in-page agent
+// runtime, then to a single direct gateway completion.
+export async function fetchChatEvents(trimmed, chatState, renderPage) {
+    const body = { prompt: trimmed, cwd: chatState.cwd || undefined, skill: chatState.skill || undefined, provider: chatState.provider || undefined, model: chatState.model || undefined, sessionId: chatState.sessionId || undefined };
+    let resp;
+    try {
+        resp = await fetch('/api/chat', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body), signal: chatState.abort.signal });
+    } catch (fetchErr) {
+        resp = null;
+    }
+    if (resp && resp.ok) {
+        const text = await resp.text();
+        return parseSseEvents(text);
+    }
+    if (typeof window !== 'undefined' && typeof window.__thebirdRunAgent === 'function') {
+        return runInPageAgent(trimmed, chatState, renderPage);
+    }
+    return runDirectCompletion(trimmed, chatState);
+}
+
+// Fold the event list into chatState.messages, resolving running tool calls to
+// done/error and accumulating assistant prose. Returns the trailing assistant
+// text the caller appends once the stream is fully drained.
+export function applyChatEvents(events, chatState, syncMessages) {
+    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), status: 'running' });
+                        syncMessages();
+                    }
+                }
+            } else if (role === 'tool') {
+                const tc = Array.isArray(data.content) ? data.content[0] : data;
+                // 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') {
+            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;
+        }
+    }
+    return assistantContent;
+}

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

@@ -3,70 +3,26 @@
 // 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 } from '../../../components/freddie/helpers.js';
-import { Chat, ChatComposer } from '../../../components/chat.js';
+import { toKitMessage } from './chat-protocol.js';
+import { loadProviders, fetchChatEvents, applyChatEvents } from './chat-transport.js';
 
 const h = webjsx.createElement;
 const { Panel, Receipt, Chip, Icon } = 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 { /* swallow: a malformed SSE event is dropped, the stream continues */ }
-            curEvent = null; curData = '';
-        }
-    }
-    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;
         const skills = [...h0.pi.skills.values()];
-        let providers = await fetch('/api/providers').then(r => r.json()).catch(() => []);
-        if (!Array.isArray(providers)) providers = [];
-        // Static deploy (no freddie-server, so /api/providers 404s): probe the
-        // acptoapi gateway directly and, when it answers, surface it as a real
-        // configured provider with its model list. Without this the dashboard
-        // tells the user to "run a gateway" even though one is live and chat works.
-        if (!providers.some(p => p.configured)) {
-            try {
-                const cfg = (window.__debug?.instances?.i1?.host?.fs?.readJson?.('/etc/freddie/freddie.json', null)) || {};
-                const baseUrl = (cfg?.providers?.openai?.baseUrl || 'http://localhost:4800').replace(/\/+$/, '');
-                const ac = new AbortController();
-                const t = setTimeout(() => ac.abort(), 4000);
-                const r = await fetch(baseUrl + '/v1/models', { signal: ac.signal }).catch(() => null);
-                clearTimeout(t);
-                if (r && r.ok) {
-                    const j = await r.json().catch(() => null);
-                    const models = Array.isArray(j?.data) ? j.data.map(m => m.id) : [];
-                    providers = [{ id: 'acptoapi', name: 'acptoapi gateway (' + baseUrl + ')', configured: true, models: ['auto', ...models] }, ...providers];
-                }
-            } catch { /* swallow: probing the local acptoapi gateway is opt-in best-effort, absence just means no providers shown */ }
-        }
+        const providers = await loadProviders();
         const configuredProviders = providers.filter(p => p.configured);
 
         const chatState = window.__fd_chatState = window.__fd_chatState || {
@@ -107,134 +63,8 @@ export function makeChatPage(ctx) {
             syncMessages();
             renderPage();
             try {
-                const body = { prompt: trimmed, cwd: chatState.cwd || undefined, skill: chatState.skill || undefined, provider: chatState.provider || undefined, model: chatState.model || undefined, sessionId: chatState.sessionId || undefined };
-                let resp;
-                try {
-                    resp = await fetch('/api/chat', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body), signal: chatState.abort.signal });
-                } catch (fetchErr) {
-                    resp = null;
-                }
-                let text = '';
-                let events = [];
-                if (resp && resp.ok) {
-                    text = await resp.text();
-                    events = parseSseEvents(text);
-                } else if (typeof window !== 'undefined' && typeof window.__thebirdRunAgent === 'function') {
-                    // Static deploy with an in-page agent runtime (e.g. thebird): drive
-                    // the REAL multi-step agent loop (host tools + acptoapi gateway +
-                    // tool execution) instead of a single bare completion, so the model
-                    // emits tool_calls, the loop executes them, feeds results back, and
-                    // iterates. We synthesize the same {event:'message'} stream the
-                    // server path produces so the render loop below is unchanged. The
-                    // window global is the opt-in: hosts without it keep single-shot.
-                    try {
-                        let stepN = 0;
-                        const onUpdate = (snap) => {
-                            try {
-                                const msgs = (snap && snap.context && snap.context.messages) || [];
-                                const toolMsgs = msgs.filter(m => m.role === 'tool');
-                                const lastAssist = [...msgs].reverse().find(m => m.role === 'assistant' && Array.isArray(m.tool_calls) && m.tool_calls.length);
-                                const running = lastAssist && lastAssist.tool_calls[0] && (lastAssist.tool_calls[0].function?.name || lastAssist.tool_calls[0].name);
-                                stepN = toolMsgs.length;
-                                chatState.progress = running
-                                    ? ('agent: ' + running + ' (step ' + (stepN + 1) + ')…')
-                                    : ('agent thinking' + (stepN ? ' (step ' + stepN + ')' : '') + '…');
-                                renderPage();
-                            } catch { /* swallow: progress-indicator update failing must not abort the agent run */ }
-                        };
-                        const out = await window.__thebirdRunAgent({ prompt: trimmed, onUpdate });
-                        const turnMsgs = (out && Array.isArray(out.messages)) ? out.messages : [];
-                        for (const m of turnMsgs) {
-                            if (m.role === 'assistant' && Array.isArray(m.tool_calls) && m.tool_calls.length) {
-                                const parts = [];
-                                if (m.content) parts.push({ type: 'text', text: String(m.content) });
-                                for (const tc of m.tool_calls) {
-                                    const rawArgs = tc.function?.arguments ?? tc.arguments;
-                                    let input = {};
-                                    if (rawArgs && typeof rawArgs === 'object') input = rawArgs;
-                                    else if (typeof rawArgs === 'string') { try { input = JSON.parse(rawArgs || '{}'); } catch { input = {}; } }
-                                    parts.push({ type: 'tool_use', name: tc.function?.name || tc.name, input });
-                                }
-                                events.push({ event: 'message', data: { role: 'assistant', content: parts } });
-                            } else if (m.role === 'tool') {
-                                events.push({ event: 'message', data: { role: 'tool', content: [{ content: String(m.content ?? '') }] } });
-                            }
-                        }
-                        const finalText = (out && out.result) || (out && out.error ? 'error: ' + out.error : '');
-                        if (finalText) events.push({ event: 'message', data: { role: 'assistant', content: [{ type: 'text', text: String(finalText) }] } });
-                        if (!events.length) events.push({ event: 'message', data: { role: 'assistant', content: [{ type: 'text', text: '' }] } });
-                    } catch (e) {
-                        events = [{ event: 'error', data: { error: e?.message || String(e) } }];
-                    }
-                } else {
-                    // Static deploy without an in-page agent runtime: single direct
-                    // acptoapi /v1/chat/completions call (no tool loop — one shot).
-                    const cfg = (window.__debug?.instances?.i1?.host?.fs?.readJson?.('/etc/freddie/freddie.json', null)) || {};
-                    const baseUrl = cfg?.providers?.openai?.baseUrl || 'http://localhost:4800';
-                    try {
-                        const url = baseUrl.replace(/\/+$/, '') + '/v1/chat/completions';
-                        const reqBody = { model: chatState.model || cfg?.providers?.openai?.model || 'auto', messages: [{ role: 'user', content: trimmed }] };
-                        const r2 = await fetch(url, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(reqBody), signal: chatState.abort.signal });
-                        if (!r2.ok) {
-                            const errText = await r2.text().catch(() => '');
-                            events = [{ event: 'error', data: { error: 'acptoapi ' + r2.status + ': ' + errText.slice(0, 200) } }];
-                        } else {
-                            const j = await r2.json();
-                            const content = j?.choices?.[0]?.message?.content || '';
-                            const tool_calls = j?.choices?.[0]?.message?.tool_calls;
-                            const parts = [];
-                            if (content) parts.push({ type: 'text', text: content });
-                            if (Array.isArray(tool_calls)) {
-                                for (const tc of tool_calls) parts.push({ type: 'tool_use', name: tc.function?.name, input: (() => { try { return JSON.parse(tc.function?.arguments || '{}'); } catch { return {}; } })() });
-                            }
-                            events = [{ event: 'message', data: { role: 'assistant', content: parts.length ? parts : [{ type: 'text', text: '' }] } }];
-                        }
-                    } catch (e) {
-                        events = [{ event: 'error', data: { error: e?.message || String(e) } }];
-                    }
-                }
-                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), status: 'running' });
-                                    syncMessages();
-                                }
-                            }
-                        } else if (role === 'tool') {
-                            const tc = Array.isArray(data.content) ? data.content[0] : data;
-                            // 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') {
-                        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;
-                    }
-                }
+                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) {

package/src/kits/os/shell-chrome.js

@@ -0,0 +1,163 @@
+// Pure DOM builders for the desktop shell: theme-stylesheet injection, the
+// icon span and button factories, and the four static chrome structures
+// (menubar, apps menu, side rail, apps drawer) the shell wires behaviour onto.
+// Nothing here closes over shell state — every function returns fresh nodes.
+
+import { icons } from './icons.js';
+
+const THEME_CSS_URL = new URL('./theme.css', import.meta.url).href;
+
+export function ensureCss(href) {
+    if (document.querySelector('link[data-os-theme]')) return;
+    const l = document.createElement('link');
+    l.rel = 'stylesheet';
+    l.href = href || THEME_CSS_URL;
+    l.dataset.osTheme = '1';
+    document.head.appendChild(l);
+}
+
+export function ic(svg) {
+    const s = document.createElement('span');
+    s.className = 'ic';
+    s.innerHTML = svg;
+    return s;
+}
+
+export function makeBtn(svg, label, role) {
+    const b = document.createElement('button');
+    b.className = 'os-btn';
+    b.type = 'button';
+    if (role) b.dataset.role = role;
+    if (svg) b.append(ic(svg));
+    if (label) b.append(Object.assign(document.createElement('span'), { textContent: label }));
+    // Icon-only buttons (no visible label text) need an accessible name from
+    // somewhere; `role` ('home'/'add'/etc) is already a short human-readable
+    // word, so reuse it as aria-label rather than leaving the button unnamed.
+    if (!label && role) b.setAttribute('aria-label', role);
+    return b;
+}
+
+// The top menubar: home/brand/apps, an optional new-instance button, the
+// instance switcher, and the tray clock. Returns every node the shell needs
+// to bind listeners to or update later.
+export function buildMenubar({ brand, withNewInstance }) {
+    const menubar = document.createElement('div');
+    menubar.className = 'os-menubar';
+    menubar.setAttribute('role', 'menubar');
+    menubar.setAttribute('aria-label', 'Desktop menu bar');
+
+    const homeBtn = makeBtn(icons.home, '', 'home');
+    homeBtn.title = 'apps';
+
+    const brandEl = document.createElement('span');
+    brandEl.className = 'os-brand';
+    brandEl.textContent = brand;
+
+    const appsBtn = makeBtn(icons.apps, 'apps', 'apps');
+    appsBtn.setAttribute('aria-haspopup', 'menu');
+    appsBtn.setAttribute('aria-expanded', 'false');
+    const newInstBtn = withNewInstance ? makeBtn(icons.plus, 'instance', 'add') : null;
+
+    const instSwitch = document.createElement('div');
+    instSwitch.className = 'os-instances';
+
+    const spacer = document.createElement('div');
+    spacer.className = 'os-spacer';
+
+    const tray = document.createElement('div');
+    tray.className = 'os-tray';
+    const clock = document.createElement('span');
+    clock.className = 'os-clock';
+    tray.appendChild(clock);
+
+    menubar.append(homeBtn, brandEl, appsBtn);
+    if (newInstBtn) menubar.append(newInstBtn);
+    menubar.append(instSwitch, spacer, tray);
+
+    return { menubar, homeBtn, appsBtn, newInstBtn, instSwitch, clock };
+}
+
+export function buildAppsMenu() {
+    const appsMenu = document.createElement('div');
+    appsMenu.className = 'os-menu';
+    appsMenu.setAttribute('role', 'menu');
+    appsMenu.setAttribute('aria-label', 'Apps');
+    return appsMenu;
+}
+
+export function buildSideRail() {
+    const sideRail = document.createElement('div');
+    sideRail.className = 'os-side-rail';
+    sideRail.setAttribute('role', 'navigation');
+    sideRail.setAttribute('aria-label', 'App launcher rail');
+    return sideRail;
+}
+
+// The full-screen apps drawer. Full-screen overlay that traps the user's
+// attention while open — the dialog role + aria-modal + aria-labelledby give
+// a screen reader the same "you are now in a dialog named X" announcement a
+// sighted user gets from the visual takeover.
+export function buildDrawer() {
+    const drawer = document.createElement('div');
+    drawer.className = 'os-drawer';
+    drawer.setAttribute('aria-hidden', 'true');
+    drawer.setAttribute('role', 'dialog');
+    drawer.setAttribute('aria-modal', 'true');
+    drawer.setAttribute('aria-labelledby', 'os-drawer-title');
+    const drawerHeader = document.createElement('div');
+    drawerHeader.className = 'os-drawer-head';
+    const drawerTitle = document.createElement('span');
+    drawerTitle.className = 'os-drawer-title';
+    drawerTitle.id = 'os-drawer-title';
+    drawerTitle.textContent = 'apps';
+    const drawerClose = document.createElement('button');
+    drawerClose.className = 'os-drawer-close';
+    drawerClose.type = 'button';
+    drawerClose.setAttribute('aria-label', 'Close apps drawer');
+    drawerClose.append(ic(icons.close));
+    drawerHeader.append(drawerTitle, drawerClose);
+    const drawerGrid = document.createElement('div');
+    drawerGrid.className = 'os-drawer-grid';
+    drawer.append(drawerHeader, drawerGrid);
+    return { drawer, drawerClose, drawerGrid };
+}
+
+// Taskbar contents are rebuilt on a 500ms poll whenever windows open/
+// close/gain focus (refreshTaskbar in the shell); aria-live announces those
+// additions/removals to a screen reader, which otherwise gets no signal
+// that the running-window list changed. "polite" so it never interrupts.
+export function buildTaskbar() {
+    const taskbar = document.createElement('div');
+    taskbar.className = 'os-taskbar';
+    taskbar.setAttribute('role', 'toolbar');
+    taskbar.setAttribute('aria-label', 'Open windows');
+    taskbar.setAttribute('aria-live', 'polite');
+    taskbar.setAttribute('aria-relevant', 'additions removals');
+    return taskbar;
+}
+
+// Per-app launcher entries: a menu item, a rail button, and a drawer tile,
+// each wired to the caller's own open/close handlers.
+export function buildAppEntries(app, { onMenuClick, onRailClick, onTileClick }) {
+    const iconSvg = app.icon || icons[app.id] || '';
+
+    const menuBtn = makeBtn(iconSvg, app.name);
+    menuBtn.setAttribute('role', 'menuitem');
+    menuBtn.addEventListener('click', onMenuClick);
+
+    const railBtn = document.createElement('button');
+    railBtn.className = 'os-rail-btn';
+    railBtn.type = 'button';
+    railBtn.title = app.name;
+    railBtn.setAttribute('aria-label', app.name);
+    railBtn.append(ic(iconSvg));
+    railBtn.addEventListener('click', onRailClick);
+
+    const tile = document.createElement('button');
+    tile.className = 'os-drawer-tile';
+    tile.type = 'button';
+    tile.append(ic(iconSvg), Object.assign(document.createElement('span'), { className: 'lbl', textContent: app.name }));
+    tile.addEventListener('click', onTileClick);
+
+    return { menuBtn, railBtn, tile };
+}