anentrypoint-design 0.0.413 → 0.0.415

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

@@ -1,10 +1,10 @@
 // Core freddie pages: projects, home, sessions, agents, logs.
 import * as webjsx from '../../../../vendor/webjsx/index.js';
 import * as components from '../../../components.js';
-import { pre, form, skillLabel } from './helpers.js';
+import { pre, form, skillLabel } from '../../../components/freddie/helpers.js';
 
 const h = webjsx.createElement;
-const { Panel, Row, Hero, Receipt, Kpi, Table, EmptyState } = components;
+const { Panel, Row, Hero, Receipt, Kpi, Table, EmptyState, Icon } = components;
 
 export function makeCorePages(ctx) {
     return {
@@ -13,7 +13,7 @@ export function makeCorePages(ctx) {
             const activeProj = (typeof h0.pi.projects.active === 'function') ? h0.pi.projects.active() : null;
             const rows = list.map(p => Row({
                 key: p.name,
-                code: p.name === activeProj?.name ? '●' : '○',
+                code: p.name === activeProj?.name ? Icon('circle-dot') : Icon('circle'),
                 title: p.name + (p.name === activeProj?.name ? '  (active)' : ''),
                 meta: p.path,
                 onClick: () => { if (p.name !== activeProj?.name) try { h0.pi.projects.setActive(p.name); ctx.rerender(); } catch (e) { alert(e.message); } },
@@ -26,7 +26,7 @@ export function makeCorePages(ctx) {
                     submit: 'add',
                     onSubmit: (ev) => { try { h0.pi.projects.create({ name: ev.target.elements.name.value, path: ev.target.elements.path.value }); ctx.rerender(); } catch (e) { alert(e.message); } },
                 }) }),
-                Panel({ title: 'all projects', count: list.length, children: rows.length ? rows : EmptyState({ text: 'no projects', glyph: '◆' }) }),
+                Panel({ title: 'all projects', count: list.length, children: rows.length ? rows : EmptyState({ text: 'no projects', glyph: Icon('square') }) }),
                 Panel({ title: 'how encapsulation works', children: Receipt({ rows: [
                     ['sessions db', '<project>/sessions.db'],
                     ['config', '<project>/config.json'],
@@ -45,15 +45,15 @@ export function makeCorePages(ctx) {
             const skills = h0.pi.skills.size;
             const health = (typeof h0.pi.health === 'function') ? h0.pi.health() : { ok: true };
             return [
-                Hero({ title: 'freddie', body: 'open js agent harness — pi-mono · xstate · floosie · anentrypoint-design.', accent: h0.version || 'web' }),
+                Hero({ title: 'assistant', body: 'open js agent harness — in-page agent runtime.', accent: h0.version || 'web' }),
                 Kpi({ items: [[sessions.length, 'sessions'], [tools, 'tools'], [skills, 'skills']] }),
                 Panel({ title: 'quick start', children: Receipt({ rows: [
                     ['open chat',   "click 'chat' in sidebar — set a working directory and pick a skill"],
                     ['pick skill',  "software dev, research, planning — shown with descriptions"],
                     ['pick model',  "select a configured provider + model in the chat bar"],
-                    ['list tools',  '/tools in chat → tools tab'],
-                    ['set api key', 'keys tab → click chip to set value'],
-                    ['add cron',    'cron tab → form'],
+                    ['list tools',  '/tools in chat -> tools tab'],
+                    ['set api key', 'keys tab -> click chip to set value'],
+                    ['add cron',    'cron tab -> form'],
                 ] }) }),
                 Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, String(v)]) }) }),
             ];
@@ -78,7 +78,7 @@ export function makeCorePages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'sessions']] }),
                 Panel({ title: 'recent sessions', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'no sessions yet — open chat and send a message', glyph: '✉' })
+                    ? EmptyState({ text: 'no sessions yet — open chat and send a message', glyph: Icon('thread') })
                     : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], rows }) }),
             ];
         },

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

@@ -1,8 +1,8 @@
 // OS-overlay freddie pages, only mounted when osSurfaces is provided.
 import * as components from '../../../components.js';
-import { pre } from './helpers.js';
+import { pre } from '../../../components/freddie/helpers.js';
 
-const { Panel, Kpi, Table, EmptyState } = components;
+const { Panel, Kpi, Table, EmptyState, Icon } = components;
 
 export function makeOsPages(ctx) {
     const { osSurfaces, instance } = ctx;
@@ -13,9 +13,9 @@ export function makeOsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'instances'], [activeId || '—', 'active']] }),
                 Panel({ title: 'instances', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'no instances', glyph: '◫' })
+                    ? EmptyState({ text: 'no instances', glyph: Icon('square') })
                     : Table({ headers: ['id', 'active', 'shells', 'windows'],
-                        rows: list.map(i => [i.id, i.id === activeId ? '●' : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
+                        rows: list.map(i => [i.id, i.id === activeId ? Icon('circle') : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
             ];
         },
         async ['os-windows']() {
@@ -24,15 +24,15 @@ export function makeOsPages(ctx) {
             return [
                 Kpi({ items: [[wins.length, 'windows'], [focused ? (focused.id || focused.title || '?') : '—', 'focused']] }),
                 Panel({ title: 'windows', count: wins.length, children: wins.length === 0
-                    ? EmptyState({ text: 'no windows open', glyph: '▭' })
+                    ? EmptyState({ text: 'no windows open', glyph: Icon('square') })
                     : Table({ headers: ['id', 'title', 'min', 'max', 'pos'],
-                        rows: wins.map(w => [w.id || '?', w.title || '', w.min ? '●' : '', w.max ? '●' : '',
+                        rows: wins.map(w => [w.id || '?', w.title || '', w.min ? Icon('circle') : '', w.max ? Icon('circle') : '',
                             (w.el ? `${w.el.offsetLeft},${w.el.offsetTop} ${w.el.offsetWidth}×${w.el.offsetHeight}` : '')]) }) }),
             ];
         },
         async ['os-x']() {
             const x = osSurfaces && osSurfaces.xServer && osSurfaces.xServer();
-            if (!x) return [Panel({ title: 'x-server', children: EmptyState({ text: 'x-server not running in this instance', glyph: '✕' }) })];
+            if (!x) return [Panel({ title: 'x-server', children: EmptyState({ text: 'x-server not running in this instance', glyph: Icon('x') }) })];
             return [
                 Kpi({ items: [[x.windows, 'windows'], [x.pixmaps, 'pixmaps'], [x.gcs, 'gcs'], [x.atoms, 'atoms'], [x.cursors, 'cursors']] }),
                 Panel({ title: 'display', children: pre(x) }),
@@ -43,7 +43,7 @@ export function makeOsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'paths'], [instance.id, 'instance']] }),
                 Panel({ title: 'paths', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'empty fs', glyph: '📁' })
+                    ? EmptyState({ text: 'empty fs', glyph: Icon('square') })
                     : pre(list.join('\n')) }),
             ];
         },

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

@@ -1,10 +1,10 @@
 // Tools-ish freddie pages: analytics, models, cron, skills, config, env, tools, batch, gateway.
 import * as webjsx from '../../../../vendor/webjsx/index.js';
 import * as components from '../../../components.js';
-import { pre, form, skillLabel } from './helpers.js';
+import { pre, form, skillLabel } from '../../../components/freddie/helpers.js';
 
 const h = webjsx.createElement;
-const { Panel, Row, Receipt, Kpi, Table, Section, EmptyState, Chip } = components;
+const { Panel, Row, Receipt, Kpi, Table, Section, EmptyState, Chip, Icon } = components;
 
 export function makeToolsPages(ctx) {
     const { rerender } = ctx;
@@ -18,10 +18,10 @@ export function makeToolsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'sessions'], [tools.length, 'tools']] }),
                 Panel({ title: 'sessions by platform', children: Object.keys(byPlatform).length === 0
-                    ? EmptyState({ text: 'no data', glyph: '◉' })
+                    ? EmptyState({ text: 'no data', glyph: Icon('activity') })
                     : Table({ headers: ['platform', 'count'], rows: Object.entries(byPlatform).sort((a, b) => b[1] - a[1]) }) }),
                 Panel({ title: 'sessions by model', children: Object.keys(byModel).length === 0
-                    ? EmptyState({ text: 'no data', glyph: '◎' })
+                    ? EmptyState({ text: 'no data', glyph: Icon('circle-dot') })
                     : Table({ headers: ['model', 'count'], rows: Object.entries(byModel).sort((a, b) => b[1] - a[1]) }) }),
                 Panel({ title: 'tool distribution', children: Table({ headers: ['toolset', 'count', 'tools'],
                     rows: Object.entries(byToolset).map(([k, v]) => [k, v.length, v.slice(0, 4).join(', ') + (v.length > 4 ? '…' : '')]) }) }),
@@ -50,7 +50,7 @@ export function makeToolsPages(ctx) {
                     },
                 }) }),
                 Panel({ title: 'provider availability', 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.name, ' ', p.configured ? (p.available ? Icon('circle-dot') : Icon('circle')) : Icon('dot')] }))
                 ) }),
             ];
         },
@@ -64,7 +64,7 @@ export function makeToolsPages(ctx) {
                     onSubmit: async (ev) => { try { await h0.pi.cron.create({ cron: ev.target.elements.cron.value, prompt: ev.target.elements.prompt.value }); rerender(); } catch (e) { alert(e.message); } },
                 }) }),
                 Panel({ title: 'scheduled jobs', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'no cron jobs — add one above', glyph: '◷' })
+                    ? EmptyState({ text: 'no cron jobs — add one above', glyph: Icon('circle') })
                     : Table({ headers: ['id', 'cron', 'prompt', 'enabled'],
                         rows: list.map(j => [j.id, j.cron, (j.prompt || '').slice(0, 40), j.enabled ? 'yes' : 'no']) }) }),
             ];
@@ -74,9 +74,9 @@ export function makeToolsPages(ctx) {
             const byCat = list.reduce((a, s) => { (a[s.category || 'other'] = a[s.category || 'other'] || []).push(s); return a; }, {});
             return [
                 Kpi({ items: [[list.length, 'skills'], [Object.keys(byCat).length, 'categories']] }),
-                list.length === 0 ? EmptyState({ text: 'no skills loaded — add SKILL.md files to ~/.freddie/skills/', glyph: '◈' }) : null,
+                list.length === 0 ? EmptyState({ text: 'no skills loaded — add SKILL.md files to ~/.freddie/skills/', glyph: Icon('square') }) : null,
                 ...Object.entries(byCat).map(([cat, ss]) => Panel({ title: cat, count: ss.length,
-                    children: ss.length === 0 ? EmptyState({ text: 'none', glyph: '◈' })
+                    children: ss.length === 0 ? EmptyState({ text: 'none', glyph: Icon('square') })
                         : Table({ headers: ['name', 'description'], rows: ss.map(s => [skillLabel(s), (s.description || '').slice(0, 120)]) }) })),
             ].filter(Boolean);
         },
@@ -91,7 +91,7 @@ export function makeToolsPages(ctx) {
                     submit: 'save',
                     onSubmit: async (ev) => {
                         let v = ev.target.elements.value.value;
-                        try { v = JSON.parse(v); } catch {}
+                        try { v = JSON.parse(v); } catch { /* swallow: value may be a plain string, not JSON — keep it as-is */ }
                         await h0.pi.config.saveValue(ev.target.elements.key.value, v);
                         rerender();
                     },
@@ -115,7 +115,7 @@ export function makeToolsPages(ctx) {
                         if (typeof h0.pi.env.set === 'function') { h0.pi.env.set(k.key, v); rerender(); }
                     },
                 },
-                Chip({ tone: k.set ? 'ok' : 'miss', children: k.key + (k.set ? ' ✓' : ' ·') })
+                Chip({ tone: k.set ? 'ok' : 'miss', children: k.key + (k.set ? ' [x]' : ' [ ]') })
             ));
             return [
                 Kpi({ items: [[setCount, 'set'], [list.length - setCount, 'missing'], [list.length, 'total known']] }),
@@ -132,14 +132,14 @@ export function makeToolsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'tools'], [Object.keys(byToolset).length, 'toolsets']] }),
                 ...Object.entries(byToolset).map(([ts, items]) => Panel({ title: 'toolset · ' + ts, count: items.length,
-                    children: items.map(t => Row({ key: t.name, code: '⚒', title: t.name, sub: (t.description || (t.schema && t.schema.description) || '').slice(0, 80) })) })),
+                    children: items.map(t => Row({ key: t.name, code: Icon('settings'), title: t.name, sub: (t.description || (t.schema && t.schema.description) || '').slice(0, 80) })) })),
             ];
         },
         async batch(h0) {
             const out = h('div', { id: 'fd-batch-out' });
             const root = ctx.root;
             return [
-                Section({ title: '// batch runner', children: [
+                Section({ title: 'batch runner', children: [
                     Panel({ title: 'run prompts', children: form({
                         fields: [{ name: 'prompts', kind: 'textarea', placeholder: 'one prompt per line' }, { name: 'concurrency', type: 'number', value: '4' }],
                         submit: 'run',
@@ -170,8 +170,8 @@ export function makeToolsPages(ctx) {
                 Kpi({ items: [[platforms.length, 'platforms'], [active.length, 'active']] }),
                 Panel({ title: 'platforms', count: platforms.length,
                     right: active.length > 0 ? Chip({ tone: 'ok', children: active.length + ' active' }) : Chip({ tone: 'miss', children: 'none active' }),
-                    children: platforms.length === 0 ? EmptyState({ text: 'no platforms registered', glyph: '⇌' })
-                        : platforms.map(p => Row({ key: p.name, code: p.enabled ? '●' : '○', title: p.name, sub: p.note || '', meta: p.enabled ? 'enabled' : '' })) }),
+                    children: platforms.length === 0 ? EmptyState({ text: 'no platforms registered', glyph: Icon('arrow-right') })
+                        : platforms.map(p => Row({ key: p.name, code: p.enabled ? Icon('circle-dot') : Icon('circle'), title: p.name, sub: p.note || '', meta: p.enabled ? 'enabled' : '' })) }),
                 Panel({ title: 'start gateway', children: Receipt({ rows: [
                     ['webhook + api_server', 'freddie gateway --port 3000'],
                     ['specific platform', 'TELEGRAM_BOT_TOKEN=… freddie gateway'],

package/dist/src/kits/os/freddie/routes.js

@@ -1,24 +1,26 @@
+import { Icon } from '../../../components/shell.js';
+
 export const ROUTES = [
-    { path: 'projects',  label: 'projects',  glyph: '◆' },
-    { path: 'home',      label: 'home',      glyph: '⌂' },
-    { path: 'chat',      label: 'chat',      glyph: '⌨' },
-    { path: 'sessions',  label: 'sessions',  glyph: '✉' },
-    { path: 'agents',    label: 'agents',    glyph: '◈' },
-    { path: 'analytics', label: 'analytics', glyph: '◉' },
-    { path: 'models',    label: 'models',    glyph: '◎' },
-    { path: 'logs',      label: 'logs',      glyph: '☰' },
-    { path: 'cron',      label: 'cron',      glyph: '◷' },
-    { path: 'skills',    label: 'skills',    glyph: '◈' },
-    { path: 'config',    label: 'config',    glyph: '⚙' },
-    { path: 'env',       label: 'keys',      glyph: '⚿' },
-    { path: 'tools',     label: 'tools',     glyph: '⚒' },
-    { path: 'batch',     label: 'batch',     glyph: '⊞' },
-    { path: 'gateway',   label: 'gateway',   glyph: '⇌' },
+    { path: 'projects',  label: 'projects',  glyph: Icon('square') },
+    { path: 'home',      label: 'home',      glyph: Icon('page') },
+    { path: 'chat',      label: 'chat',      glyph: Icon('forum') },
+    { path: 'sessions',  label: 'sessions',  glyph: Icon('thread') },
+    { path: 'agents',    label: 'agents',    glyph: Icon('members') },
+    { path: 'analytics', label: 'analytics', glyph: Icon('activity') },
+    { path: 'models',    label: 'models',    glyph: Icon('circle-dot') },
+    { path: 'logs',      label: 'logs',      glyph: Icon('menu') },
+    { path: 'cron',      label: 'cron',      glyph: Icon('circle') },
+    { path: 'skills',    label: 'skills',    glyph: Icon('check') },
+    { path: 'config',    label: 'config',    glyph: Icon('settings') },
+    { path: 'env',       label: 'keys',      glyph: Icon('hash') },
+    { path: 'tools',     label: 'tools',     glyph: Icon('more-horizontal') },
+    { path: 'batch',     label: 'batch',     glyph: Icon('square') },
+    { path: 'gateway',   label: 'gateway',   glyph: Icon('arrow-right') },
 ];
 
 export const OS_ROUTE_DEFS = [
-    { path: 'os-instances', label: 'instances', glyph: '◫' },
-    { path: 'os-windows',   label: 'windows',   glyph: '▭' },
-    { path: 'os-x',         label: 'x-server',  glyph: '✕' },
-    { path: 'os-fs',        label: 'fs',        glyph: '📁' },
+    { path: 'os-instances', label: 'instances', glyph: Icon('square') },
+    { path: 'os-windows',   label: 'windows',   glyph: Icon('screen') },
+    { path: 'os-x',         label: 'x-server',  glyph: Icon('x') },
+    { path: 'os-fs',        label: 'fs',        glyph: Icon('page') },
 ];

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

@@ -3,49 +3,70 @@
    Table/Receipt/Hero/Row/EmptyState/Chip) that ship their own classes via
    247420.css. This file holds the freddie-specific chrome that AGENTS.md's
    inline-styles ban pushed out of freddie-dashboard.js and the freddie/* page
-   modules. */
+   modules. Tokens follow the kit --os-* namespace plus the base --space-*/
+   --fs-* 8pt scale, with the var(--token, fallback) idiom so the kit's
+   standalone theme.css resolves cleanly. */
 
 .app-fd .fd-pre {
-    font-family: var(--ff-mono, JetBrains Mono, monospace);
-    font-size: 12px;
+    font-family: var(--os-mono, monospace);
+    font-size: var(--fs-tiny, 12px);
     white-space: pre-wrap;
     word-break: break-all;
     margin: 0;
     max-height: 320px;
     overflow: auto;
-    background: var(--panel-2, #DDD3BC);
-    padding: 8px 10px;
-    border-radius: var(--r-1, 6px);
+    background: var(--os-bg-2);
+    padding: var(--space-2, 8px) var(--space-3, 16px);
+    border-radius: var(--os-radius-sm, 6px);
 }
 
 .fd-root { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
 
-.fd-btn-mini { padding: 2px 10px; font-size: 0.8em; }
+.fd-btn-mini { padding: var(--space-1, 4px) var(--space-2, 8px); font-size: var(--fs-tiny, 12px); }
 
 /* chat composer fields */
-.fd-chat-form { display: flex; flex-direction: column; gap: var(--tool-gutter, 16px); }
-.fd-chat-row  { display: flex; gap: var(--tool-gutter, 16px); flex-wrap: wrap; }
-.fd-chat-field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
+.fd-chat-form { display: flex; flex-direction: column; gap: var(--space-3, 16px); }
+.fd-chat-row  { display: flex; gap: var(--space-3, 16px); flex-wrap: wrap; }
+.fd-chat-field { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 120px; }
 .fd-chat-field-grow { flex: 2; min-width: 140px; }
-.fd-chat-field > label { font-size: 0.75em; opacity: 0.7; letter-spacing: 0.05em; }
+.fd-chat-field > label { font-family: var(--os-mono, monospace); font-size: var(--fs-micro, 11px); color: var(--os-fg-3); letter-spacing: var(--tr-label, 0.10em); text-transform: uppercase; }
 .fd-chat-field > input { width: 100%; box-sizing: border-box; }
-.fd-chat-submit { display: flex; gap: var(--tool-gutter, 16px); align-items: flex-end; }
+.fd-chat-submit { display: flex; gap: var(--space-3, 16px); align-items: flex-end; }
 .fd-chat-submit textarea { flex: 1; resize: none; min-height: 80px; }
 .fd-chat-submit > button { align-self: flex-end; }
 
 /* chatlog (legacy fd-chat-msgs container) */
 .fd-chatlog {
     max-height: 420px; overflow-y: auto;
-    background: rgba(0,0,0,0.12);
-    border-radius: 4px; padding: 4px; margin-top: 8px;
+    background: var(--os-bg-2);
+    border-radius: var(--os-radius-sm, 6px);
+    padding: var(--space-1, 4px); margin-top: var(--space-2, 8px);
 }
-.fd-chatlog-msg { padding: 6px 10px; border-bottom: 1px solid rgba(128,128,128,0.15); white-space: pre-wrap; word-break: break-word; }
-.fd-chatlog-assistant { color: var(--color-accent, #7c9); }
-.fd-chatlog-tool { margin: 4px 0; padding: 4px 8px; background: rgba(0,0,0,0.18); border-radius: 4px; font-family: monospace; font-size: 0.85em; }
-.fd-chatlog-tool-sum { cursor: pointer; color: var(--color-warn, #fc9); padding: 2px 0; }
-.fd-chatlog-tool-body { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
+.fd-chatlog-msg { padding: var(--space-1, 4px) var(--space-3, 16px); background: var(--os-bg-2); white-space: pre-wrap; word-break: break-word; }
+.fd-chatlog-assistant { color: var(--os-accent); }
+.fd-chatlog-tool { margin: var(--space-1, 4px) 0; padding: var(--space-1, 4px) var(--space-2, 8px); background: var(--os-bg-3); border-radius: var(--os-radius-sm, 6px); font-family: var(--os-mono, monospace); font-size: var(--fs-tiny, 12px); }
+.fd-chatlog-tool-sum { cursor: pointer; color: var(--os-red); padding: var(--space-1, 4px) 0; }
+.fd-chatlog-tool-body { margin: var(--space-1, 4px) 0 0; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
 
 /* chip wraps (providers, env) */
-.fd-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
-.fd-chip-wrap-padded { padding: 8px 4px; }
+.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: var(--space-1-75) var(--space-2); background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); 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: var(--space-hair) var(--space-2); border-radius: var(--r-0); font: inherit; font-size: 12px; }
+.fd-chat-actions .btn-secondary:hover { background: color-mix(in oklab, var(--danger, #c0392b) 10%, transparent); }

package/dist/src/kits/os/freddie-dashboard.js

@@ -6,13 +6,13 @@ import { makeChatPage } from './freddie/pages-chat.js';
 import { makeToolsPages } from './freddie/pages-tools.js';
 import { makeOsPages } from './freddie/pages-os.js';
 
-const { AppShell, Topbar, Side, Crumb, Status, Panel, Chip, EmptyState } = components;
+const { AppShell, Topbar, Side, Crumb, Status, Panel, Chip, EmptyState, Icon } = components;
 
 function pre(obj) {
     return webjsx.createElement('pre', { class: 'fd-pre' }, typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2));
 }
 
-export function createFreddieDashboard({ instance, bootHost, osSurfaces }) {
+export function createFreddieDashboard({ instance, bootHost, osSurfaces, loadingText }) {
     const root = document.createElement('div');
     root.className = 'app-fd ds-247420 fd-root';
 
@@ -42,7 +42,7 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces }) {
 
     function buildSide() {
         const sections = [{
-            group: 'FREDDIE',
+            group: 'ASSISTANT',
             items: ROUTES.map(r => ({
                 glyph: r.glyph, label: r.label, href: '#fd-' + r.path,
                 active: state.active === r.path,
@@ -63,10 +63,10 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces }) {
     function view() {
         const route = allRoutes.find(r => r.path === state.active) || ROUTES[1];
         return AppShell({
-            topbar: Topbar({ brand: 'freddie', leaf: 'dashboard', items: [], active: '' }),
-            crumb: Crumb({ trail: ['freddie', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
+            topbar: Topbar({ brand: 'assistant', leaf: 'dashboard', items: [], active: '' }),
+            crumb: Crumb({ trail: ['assistant', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
             side: buildSide(),
-            main: state.body || EmptyState({ text: 'loading…', glyph: '◌' }),
+            main: state.body || EmptyState({ text: loadingText || 'loading…', glyph: Icon('circle') }),
             status: Status({ left: ['ds-247420 · webjsx · ' + allRoutes.length + ' routes', 'instance=' + instance.id], right: [state.ts] }),
         });
     }

package/dist/src/kits/os/icons.js

@@ -1,17 +1,39 @@
-export const icons = {
-    terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>',
-    browser: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>',
-    canvas: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17l6-5 4 3 5-4 3 2"/></svg>',
-    files: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>',
-    monitor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-8 4 14 4-10 4 8 2-3"/></svg>',
-    validator: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4L19 6"/></svg>',
-    about: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v5h1"/></svg>',
-    apps: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
-    plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>',
-    home: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>',
-    xdisplay: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21h8M12 17v4M9 9l6 4M15 9l-6 4"/></svg>',
-    close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6l-12 12"/></svg>',
-    chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H8l-4 4z"/><path d="M8 9h8M8 12h6"/></svg>',
-    tools: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 7l3-3 3 3-3 3-3-3zM7 14l3 3-7 7-3-3 7-7zM5 7l3-3M14 14l6 6"/></svg>',
-    freddie: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2M8 12a4 4 0 008 0"/></svg>',
+import { ICON_PATHS } from '../../components/shell.js';
+
+// os-window-manager app icons. Concepts here (terminal/browser/canvas/monitor/
+// apps/xdisplay/tools/freddie) are OS-app glyphs with no equivalent in the
+// shared ICON_PATHS UI-icon set, so they keep their own path data — but every
+// entry renders through iconMarkup()'s attribute contract (viewBox 0 0 24 24,
+// stroke=currentColor, shared --ds-icon-stroke var) instead of a second
+// hardcoded stroke-width, so this module can't drift from the system's
+// visual weight. Where a concept already exists in ICON_PATHS (close/files/
+// validator/about/apps/home/chat), reuse that entry's path data directly.
+const OS_PATHS = {
+    terminal: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/>',
+    browser: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/>',
+    canvas: '<rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17l6-5 4 3 5-4 3 2"/>',
+    files: ICON_PATHS.folder,
+    monitor: '<path d="M3 12l4-8 4 14 4-10 4 8 2-3"/>',
+    validator: ICON_PATHS.check,
+    about: ICON_PATHS.info,
+    apps: ICON_PATHS.grid,
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    home: ICON_PATHS.menu,
+    xdisplay: '<rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21h8M12 17v4M9 9l6 4M15 9l-6 4"/>',
+    close: ICON_PATHS.x,
+    chat: ICON_PATHS.forum,
+    tools: '<path d="M14 7l3-3 3 3-3 3-3-3zM7 14l3 3-7 7-3-3 7-7zM5 7l3-3M14 14l6 6"/>',
+    freddie: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2M8 12a4 4 0 008 0"/>',
 };
+
+// iconMarkup() only resolves names already registered in the shared
+// ICON_PATHS table; this module's names are private to the os kit, so each
+// entry is rendered against the identical attr contract iconMarkup() uses
+// (viewBox/stroke/linecap/--ds-icon-stroke) rather than forking a second
+// stroke-width constant.
+export const icons = Object.fromEntries(
+    Object.entries(OS_PATHS).map(([name, inner]) => [
+        name,
+        `<svg class="ds-icon ds-icon-${name}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--ds-icon-stroke, 1.6)" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`
+    ])
+);

package/dist/src/kits/os/index.js

@@ -2,4 +2,15 @@ export { icons } from './icons.js';
 export { createDesktopShell } from './shell.js';
 export { renderWindow } from './wm.js';
 export { renderDock } from './launcher.js';
+
+// App modules — surfaced through the kit entry point so consumers can use a
+// single import site. Each module also remains importable from its own path
+// for tree-shaking and back-compat.
+export { renderAboutApp } from './about-app.js';
+export { renderBrowserPane } from './browser-app.js';
+export { renderFilesApp } from './files-app.js';
+export { renderMonitorApp } from './monitor-app.js';
+export { renderTerminal } from './terminal-app.js';
+export { createFreddieDashboard } from './freddie-dashboard.js';
+
 export const themeUrl = new URL('./theme.css', import.meta.url).href;

package/dist/src/kits/os/launcher.css

@@ -6,24 +6,26 @@
 .launcher-dock {
     position: fixed;
     left: 0; top: 0; bottom: 0;
-    width: 56px;
+    width: calc(var(--os-rail-w, 56px) + env(safe-area-inset-left, 0px));
     background: var(--os-bg-2);
     border: none;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 8px 0;
-    gap: 8px;
-    z-index: 10000;
+    padding: var(--space-2, 8px) 0;
+    padding-left: env(safe-area-inset-left, 0px);
+    gap: var(--space-2, 8px);
+    z-index: var(--z-dock);
     pointer-events: auto;
     font: 11px var(--os-mono);
     color: var(--os-fg);
+    overflow: hidden;
 }
 
 .launcher-btn {
     width: 40px; height: 40px;
     background: transparent;
-    color: inherit;
+    color: var(--os-fg-2);
     cursor: pointer;
     border-radius: var(--os-radius-sm);
     display: flex;
@@ -31,31 +33,45 @@
     justify-content: center;
     padding: 0;
     font: inherit;
+    text-transform: lowercase;
     transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
 }
 .launcher-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
+.launcher-btn:active { background: var(--panel-select, var(--os-accent-soft)); }
 .launcher-btn.active {
     background: var(--panel-select, var(--os-accent-soft));
     color: var(--os-fg);
     box-shadow: inset 4px 0 0 var(--os-accent);
 }
-.launcher-add { font-size: 20px; }
+.launcher-add { font-size: 20px; color: var(--os-fg-2); }
+.launcher-add:hover { color: var(--os-accent); }
 
 .launcher-instances {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
 }
 
 .launcher-row {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 2px;
+    gap: var(--space-1, 4px);
 }
 
-.launcher-close { font-size: 11px; opacity: 0.7; width: 20px; height: 20px; }
-.launcher-close:hover { opacity: 1; }
+.launcher-close { font-size: 11px; opacity: 0.7; width: 20px; height: 20px; color: var(--os-fg-3); }
+.launcher-close:hover { opacity: 1; color: var(--os-red); }
+
+.launcher-dock + .wm-root { left: calc(var(--os-rail-w, 56px) + env(safe-area-inset-left, 0px)) !important; }
 
-.launcher-dock + .wm-root { left: 56px !important; }
+/* Touch tap-target floor for dock controls. */
+@media (pointer: coarse) {
+    .launcher-btn { width: 44px; height: 44px; }
+    .launcher-close { width: 44px; height: 44px; font-size: 13px; }
+}

package/dist/src/kits/os/launcher.js

@@ -14,6 +14,7 @@ export function renderDock(opts = {}) {
     addBtn.className = 'launcher-btn launcher-add';
     addBtn.textContent = '+';
     addBtn.title = 'new instance';
+    addBtn.setAttribute('aria-label', 'new instance');
     addBtn.addEventListener('click', () => callbacks.onNewInstance && callbacks.onNewInstance());
     el.appendChild(addBtn);
 
@@ -42,6 +43,7 @@ export function renderDock(opts = {}) {
             selBtn.className = 'launcher-btn';
             selBtn.textContent = inst.label || inst.id;
             selBtn.title = 'instance ' + inst.id;
+            selBtn.setAttribute('aria-label', 'instance ' + inst.id);
             selBtn.dataset.role = 'select';
             selBtn.dataset.instanceId = inst.id;
             if (inst.active || inst.id === activeId) selBtn.classList.add('active');
@@ -51,6 +53,7 @@ export function renderDock(opts = {}) {
             closeBtn.className = 'launcher-btn launcher-close';
             closeBtn.textContent = 'x';
             closeBtn.title = 'close ' + inst.id;
+            closeBtn.setAttribute('aria-label', 'close ' + inst.id);
             closeBtn.dataset.role = 'close';
             closeBtn.dataset.instanceId = inst.id;
             closeBtn.addEventListener('click', e => {