anentrypoint-design 0.0.322 → 0.0.324

package/src/components/chat.js

@@ -3,12 +3,12 @@
 // Includes ChatMessage, ChatComposer, Chat, AICat, AICatPortrait.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { renderMarkdownCached, highlightCodeBlockCached, initializeCachesEagerly, getCacheStats } from '../markdown-cache.js';
-import { isDegraded as isMarkdownDegraded } from '../markdown.js';
+import { initializeCachesEagerly, getCacheStats } from '../markdown-cache.js';
 import { register } from '../debug.js';
 import { Icon } from './shell.js';
 import { fmtFileSize } from './files.js';
 import { EmojiPicker } from './overlay-primitives.js';
+import { renderMessagePart as sharedRenderMessagePart, safeUrl as sharedSafeUrl, renderInline as sharedRenderInline, injectCodeCopy as sharedInjectCodeCopy } from './chat-message-parts.js';
 
 // Matches a trailing `:keyword` at the end of the composer draft (optionally
 // preceded by whitespace/start-of-string) so typing `:smile` opens an inline
@@ -24,52 +24,13 @@ let _cacheInitialized = false;
 // existing imports working while rendering the same string as the Files grid.
 export const fmtBytes = fmtFileSize;
 
-// Reject dangerous URL schemes (javascript:, data:, vbscript:, file:) so an
-// inline markdown link or an image src built from untrusted text can't smuggle a
-// script-executing or data-exfiltrating URL past the inline renderer (which does
-// NOT pass through DOMPurify the way the full md path does). http(s), mailto,
-// protocol-relative, root/relative, and anchor links are allowed.
-export function safeUrl(url) {
-    const s = String(url == null ? '' : url).trim();
-    if (!s) return null;
-    // Allow relative / anchor / protocol-relative without a scheme.
-    if (/^(\/|\.|#|\?)/.test(s) || s.startsWith('//')) return s;
-    const scheme = (s.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):/) || [])[1];
-    if (!scheme) return s; // schemeless relative
-    return /^(https?|mailto|tel)$/i.test(scheme) ? s : null;
-}
-
-// Inline-only markdown subset; safe for chat bubbles.
-export function renderInline(text) {
-    if (text == null) return [];
-    const out = [];
-    const re = /(\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`|\[([^\]]+)\]\(([^)]+)\))/g;
-    let last = 0; let m; let i = 0;
-    const push = (n) => out.push(n);
-    while ((m = re.exec(text)) !== null) {
-        if (m.index > last) push(h('span', { key: 's' + i + 'a' }, text.slice(last, m.index)));
-        if (m[2] != null) push(h('strong', { key: 's' + i }, m[2]));
-        else if (m[3] != null) push(h('em', { key: 's' + i }, m[3]));
-        else if (m[4] != null) push(h('code', { key: 's' + i, class: 'chat-tick' }, m[4]));
-        else if (m[5] != null) {
-            const safe = safeUrl(m[6]);
-            // A link with a rejected (unsafe) scheme degrades to its plain label
-            // text rather than a clickable, scheme-smuggling anchor.
-            if (safe) push(h('a', { key: 's' + i, href: safe, target: '_blank', rel: 'noopener noreferrer' }, m[5]));
-            else push(h('span', { key: 's' + i }, m[5]));
-        }
-        last = m.index + m[0].length; i += 1;
-    }
-    if (last < text.length) push(h('span', { key: 's' + i + 'a' }, text.slice(last)));
-    return out;
-}
-
-// Map file extension -> line-icon name (drawn SVG, not a decorative glyph).
-const FILE_ICONS = { pdf: 'file-pdf', zip: 'file-zip', tar: 'file-zip', gz: 'file-zip', mp4: 'file-video', mov: 'file-video', mp3: 'file-audio', wav: 'file-audio', csv: 'file-sheet', json: 'file-code', js: 'file-code', ts: 'file-code', md: 'file-text', txt: 'file-text' };
-function fileIconName(name) {
-    const ext = String(name || '').split('.').pop().toLowerCase();
-    return FILE_ICONS[ext] || 'file';
-}
+// safeUrl / renderInline now live in chat-message-parts.js (the shared
+// message-part renderer both this file and agent-chat.js render parts
+// through) — re-exported here under their original names so every existing
+// consumer of chat.js's public API (components.js barrel, any host importing
+// directly from './components/chat.js') keeps working unchanged.
+export const safeUrl = sharedSafeUrl;
+export const renderInline = sharedRenderInline;
 
 // Eagerly warm the markdown + Prism caches on first chat-surface mount, once.
 function ensureCachesInit() {
@@ -117,280 +78,22 @@ export function makeThreadAutoScroll(getCount) {
     };
 }
 
-// Inject a per-block copy button into every <pre> inside a rendered-markdown
-// container. claude.ai/code and Claude Desktop give EVERY fenced block a hover
-// copy affordance; the chat surface had only a whole-message copy. Idempotent:
-// marks each <pre> with data-copy-wired so re-renders don't stack buttons. The
-// button reveals on .chat-code-block:hover/:focus-within (CSS) and flips its
-// label copy -> copied for ~1.6s. Drawn with a real icon + word, no glyph.
-export function injectCodeCopy(container) {
-    if (!container) return;
-    container.querySelectorAll('pre').forEach((pre) => {
-        if (pre.dataset.copyWired === '1') return;
-        pre.dataset.copyWired = '1';
-        // Wrap the <pre> in a position:relative shell so the button can sit
-        // top-right without disturbing code layout.
-        const shell = document.createElement('div');
-        shell.className = 'chat-code-block';
-        pre.parentNode.insertBefore(shell, pre);
-        shell.appendChild(pre);
-        // Surface the fenced language as a small header tab (claude.ai/code
-        // shows the language on every block, not just the structured CodeNode).
-        // The highlighter sets language-xx / lang-xx on the inner <code>.
-        const codeEl = pre.querySelector('code');
-        const langCls = codeEl && (codeEl.className || '').match(/(?:language|lang)-([a-z0-9+#]+)/i);
-        if (langCls && langCls[1]) {
-            const lang = document.createElement('span');
-            lang.className = 'chat-code-lang';
-            lang.setAttribute('aria-hidden', 'true');
-            lang.textContent = langCls[1];
-            shell.appendChild(lang);
-        }
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = 'chat-code-copy';
-        btn.setAttribute('aria-label', 'copy code');
-        btn.textContent = 'copy';
-        btn.addEventListener('click', () => {
-            const code = pre.innerText;
-            const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
-            if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code).then(done).catch(() => {});
-            else { try { const t = document.createElement('textarea'); t.value = code; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
-        });
-        shell.appendChild(btn);
-    });
-}
-
-const MD_STREAM_THROTTLE_MS = 120;
-const MD_STREAM_MIN_DELTA_CHARS = 40;
-
-function MdNode(p) {
-    const refSink = (el) => {
-        if (!el) return;
-        // Version the per-element source key with a degraded marker: a bubble
-        // rendered while the markdown loader was down re-renders (real markdown)
-        // once the loader recovers, instead of staying plain-escaped forever.
-        const srcKey = (isMarkdownDegraded() ? '~degraded~' : '') + (p.text || '');
-        if (el.dataset.mdSrc === srcKey) return;
-        // While streaming (text still growing, not the final settle), a full
-        // re-parse of the WHOLE accumulated text on every rAF tick is the
-        // dominant cost of a long stream. Throttle: skip the parse unless
-        // enough time or enough new characters landed since the last one.
-        // p.streamingCaret (already threaded by the host for the stream-head
-        // caret) marks "still streaming"; its absence forces the final parse
-        // so nothing is left un-parsed once the turn settles.
-        const parsedLen = el.dataset.mdParsedLen ? Number(el.dataset.mdParsedLen) : 0;
-        const lastParseAt = el.dataset.mdLastParseAt ? Number(el.dataset.mdLastParseAt) : 0;
-        const now = (typeof performance !== 'undefined' ? performance.now() : Date.now());
-        if (p.streamingCaret && parsedLen > 0 &&
-            (now - lastParseAt) < MD_STREAM_THROTTLE_MS &&
-            (srcKey.length - parsedLen) < MD_STREAM_MIN_DELTA_CHARS) {
-            // Not enough new content/time yet — paint raw text so the latest
-            // characters are visible, but defer the expensive re-parse.
-            el.textContent = p.text || '';
-            return;
-        }
-        el.dataset.mdSrc = srcKey;
-        el.dataset.mdParsedLen = String(srcKey.length);
-        el.dataset.mdLastParseAt = String(now);
-        // Markdown stack still loading (or down): paint the raw text
-        // synchronously so streamed tokens are visible the same frame they
-        // arrive (an empty bubble until the CDN import resolves reads as a
-        // hang); the resolved render swaps in sanitized markdown in place.
-        if (isMarkdownDegraded()) el.textContent = p.text || '';
-        renderMarkdownCached(p.text || '').then((html) => {
-            const swap = () => { el.innerHTML = html; injectCodeCopy(el); };
-            // Don't blow away an active text selection inside this bubble mid-swap
-            // (e.g. the user is mid-copy while a stream tick settles). Defer the
-            // swap once, until the selection changes (cleared or moved elsewhere).
-            const sel = typeof window !== 'undefined' ? window.getSelection() : null;
-            if (sel && sel.anchorNode && el.contains(sel.anchorNode)) {
-                const onSelChange = () => { document.removeEventListener('selectionchange', onSelChange); swap(); };
-                document.addEventListener('selectionchange', onSelChange, { once: true });
-                return;
-            }
-            swap();
-        });
-    };
-    return h('div', { class: 'chat-bubble chat-md', ref: refSink });
-}
-
-function CodeNode(p) {
-    const refSink = (el) => {
-        if (!el) return;
-        // Key on the full code, not its length: two different blocks of the same
-        // length (e.g. an edit that swaps a line) would otherwise share a key and
-        // skip re-highlighting, leaving stale syntax coloring.
-        const codeKey = (p.lang || '') + '|' + (p.code || '');
-        if (el.dataset.codeKey === codeKey) return;
-        el.dataset.codeKey = codeKey;
-        // Same in-progress-selection guard as MdNode.refSink: don't wipe an
-        // active text selection inside this block mid-stream-settle. Defer
-        // the highlight swap once, until the selection changes.
-        const sel = typeof window !== 'undefined' ? window.getSelection() : null;
-        if (sel && sel.anchorNode && el.contains(sel.anchorNode)) {
-            const onSelChange = () => { document.removeEventListener('selectionchange', onSelChange); highlightCodeBlockCached(el); };
-            document.addEventListener('selectionchange', onSelChange, { once: true });
-            return;
-        }
-        highlightCodeBlockCached(el);
-    };
-    // Copy the raw code (not the highlighted DOM) for the structured CodeNode.
-    const onCopy = (e) => {
-        const btn = e.currentTarget;
-        const code = p.code || '';
-        const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
-        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code).then(done).catch(() => {});
-        else { try { const t = document.createElement('textarea'); t.value = code; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
-    };
-    return h('div', { class: 'chat-bubble chat-code', ref: refSink },
-        h('div', { class: 'chat-code-head' },
-            h('span', { class: 'lang' }, p.lang || 'code'),
-            p.filename ? h('span', { class: 'name' }, p.filename) : null,
-            h('span', { class: 'spread' }),
-            h('button', { type: 'button', class: 'chat-code-copy chat-code-copy-head', 'aria-label': 'copy code', onclick: onCopy }, 'copy')
-        ),
-        h('pre', {}, h('code', { class: p.lang ? 'lang-' + p.lang + ' language-' + p.lang : '' }, p.code || ''))
-    );
-}
-
-// 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'));
-    // Args/result are re-stringified on every rAF re-render while any part of
-    // the turn is streaming, even for collapsed cards whose own args/result
-    // haven't changed since the last frame. Cache by identity on the part
-    // object itself so an unchanged args/result skips the stringify.
-    if (p._argsCache !== p.args) {
-        p._argsTextCache = typeof p.args === 'string' ? p.args : JSON.stringify(p.args || {}, null, 2);
-        p._argsCache = p.args;
-    }
-    const argsText = p._argsTextCache;
-    if (p._resultCache !== p.result) {
-        p._resultTextCache = p.result == null ? '' : (typeof p.result === 'string' ? p.result : JSON.stringify(p.result, null, 2));
-        p._resultCache = p.result;
-    }
-    const resultText = p._resultTextCache;
-    const hasArgs = p.args != null && argsText !== '{}' && argsText.trim() !== '';
-    // 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');
-    const copyText = (txt) => (e) => {
-        const b = e.currentTarget;
-        const done = () => {
-            b.textContent = 'copied';
-            b.classList.add('is-copied');
-            setTimeout(() => { b.textContent = 'copy'; b.classList.remove('is-copied'); }, 1600);
-        };
-        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(txt).then(done).catch(() => {});
-        else { try { const t = document.createElement('textarea'); t.value = txt; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
-    };
-    const sectionLabel = (text, txt) => h('div', { class: 'chat-tool-section-label' },
-        h('span', {}, text),
-        h('button', { type: 'button', class: 'chat-code-copy chat-tool-copy', 'aria-label': 'copy ' + text, onclick: copyText(txt) }, 'copy'));
-    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' },
-            ...[
-                hasArgs ? h('div', { class: 'chat-tool-section' },
-                    sectionLabel('args', argsText),
-                    h('pre', { class: 'chat-tool-pre' }, h('code', {}, argsText))) : null,
-                resultText ? h('div', { class: 'chat-tool-section' },
-                    sectionLabel(p.error ? 'error' : 'result', resultText),
-                    h('pre', { class: 'chat-tool-pre' + (p.error ? ' is-error' : '') }, h('code', {}, resultText)))
-                    // A finished tool with no output would otherwise render no result
-                    // section, reading identically to a still-running tool. Show an
-                    // explicit placeholder so "done, empty" is distinguishable.
-                    : (status === 'done' ? h('div', { class: 'chat-tool-section' },
-                        h('div', { class: 'chat-tool-section-label' }, 'result'),
-                        h('pre', { class: 'chat-tool-pre chat-tool-empty' }, h('code', {}, '(no output)'))) : null)
-            ].filter(Boolean)
-        )
-    );
-}
-
-function ThinkingNode(p) {
-    if (p.settled) {
-        return h('details', { class: 'chat-bubble chat-thinking-settled' },
-            h('summary', {}, 'View thinking'),
-            h('div', { class: 'chat-thinking-body' }, p.text)
-        );
-    }
-    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) => p.preShell
-        // Streaming prose that already contains a code fence (or a huge tail
-        // window) renders as a plain monospaced <pre> so it does not reflow from
-        // prose to a styled block on settle (no Prism mid-stream). The settled
-        // turn renders real markdown. `streamHead` is an optional head line for
-        // the tail-window path ('streaming · N KB so far').
-        ? h('div', { class: 'chat-bubble chat-md chat-stream-pre' },
-            ...[p.streamHead ? h('div', { key: 'sh', class: 'chat-stream-head', role: 'status', 'aria-live': 'polite' }, p.streamHead) : null,
-               h('pre', { key: 'pre' }, h('code', {}, p.text || '')),
-               p.streamingCaret ? h('span', { key: '_caret', class: 'chat-stream-caret', 'aria-hidden': 'true' }) : null].filter(Boolean))
-        : h('div', { class: 'chat-bubble' + (p.mdShell ? ' chat-md' : '') },
-            ...renderInline(p.text || ''),
-            p.streamingCaret ? h('span', { key: '_caret', class: 'chat-stream-caret', 'aria-hidden': 'true' }) : null),
-    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) => {
-        // Guard both the wrapping link and the img src against unsafe schemes
-        // (e.g. a data:text/html src) so an embedded-image part from untrusted
-        // markdown can't smuggle an active payload.
-        const imgSrc = safeUrl(p.src);
-        const linkHref = safeUrl(p.href || p.src);
-        if (!imgSrc) return h('span', { class: 'chat-image-blocked' }, p.alt || 'image blocked (unsafe url)');
-        return h('a', { class: 'chat-image', href: linkHref || imgSrc, target: '_blank', rel: 'noopener noreferrer', 'aria-label': p.alt || `embedded image: ${imgSrc}` },
-            h('img', { src: imgSrc, alt: p.alt || `embedded image from ${imgSrc}`, loading: 'lazy' }),
-            p.caption ? h('span', { class: 'cap' }, p.caption) : null);
-    },
-    pdf:   (p) => h('div', { class: 'chat-pdf' },
-        h('div', { class: 'chat-pdf-head' },
-            h('span', { class: 'glyph', 'aria-hidden': 'true' }, Icon('file-pdf', { size: 18 })),
-            h('span', { class: 'name' }, p.name || 'document.pdf'),
-            p.size != null ? h('span', { class: 'size' }, fmtBytes(p.size)) : null,
-            h('a', { class: 'open', href: p.src, target: '_blank', rel: 'noopener', 'aria-label': `open PDF: ${p.name || 'document.pdf'}` }, 'open ->')
-        ),
-        h('embed', { src: p.src, type: 'application/pdf', 'aria-label': `PDF document: ${p.name || 'document.pdf'}` })),
-    file:  (p) => h('a', { class: 'chat-file', href: p.src, target: '_blank', rel: 'noopener', download: p.name || true, 'aria-label': `download file: ${p.name || 'attachment'} (${p.kindLabel || (p.name || '').split('.').pop().toUpperCase()})` },
-        h('span', { class: 'glyph', 'aria-hidden': 'true' }, Icon(fileIconName(p.name), { size: 22 })),
-        h('span', { class: 'meta' },
-            h('span', { class: 'name' }, p.name || 'attachment'),
-            h('span', { class: 'size' }, [p.kindLabel || (p.name || '').split('.').pop().toUpperCase(), p.size != null ? fmtBytes(p.size) : null].filter(Boolean).join(' · '))
-        ),
-        h('span', { class: 'go', 'aria-hidden': 'true' }, Icon('arrow-down'))),
-    link:  (p) => h('a', { class: 'chat-link', href: safeUrl(p.href) || '#', target: '_blank', rel: 'noopener noreferrer', 'aria-label': `link: ${p.title || p.href}` },
-        p.thumb ? h('img', { class: 'thumb', src: p.thumb, alt: `preview for ${p.title || p.href}` }) : null,
-        h('span', { class: 'meta' },
-            h('span', { class: 'host' }, p.host || (() => { try { return new URL(p.href).host; } catch { return ''; } })()),
-            h('span', { class: 'title' }, p.title || p.href),
-            p.desc ? h('span', { class: 'desc' }, p.desc) : null
-        ))
-};
+// injectCodeCopy / MdNode / CodeNode / ToolCallNode / ThinkingNode /
+// PART_RENDERERS all now live in chat-message-parts.js — the one dispatch
+// table this file, agent-chat.js, and any future chat surface render message
+// parts through. injectCodeCopy stays exported here (re-exported, same
+// signature) since it was part of this file's public surface before the
+// extraction, even though nothing in-repo imports it directly today.
+export const injectCodeCopy = sharedInjectCodeCopy;
 
+// Thin wrapper around the shared renderer that keeps this file's own debug
+// counter (_stats.lastKindCounts, surfaced via register('chat', ...) below)
+// wired exactly as before. sharedRenderMessagePart already applies the
+// 'p' + key VElement key itself.
 function renderPart(p, key) {
-    const fn = PART_RENDERERS[p.kind] || PART_RENDERERS.text;
-    const node = fn(p);
-    if (node && typeof node === 'object') node.props = { ...(node.props || {}), key: 'p' + key };
-    _stats.lastKindCounts[p.kind] = (_stats.lastKindCounts[p.kind] || 0) + 1;
-    return node;
+    return sharedRenderMessagePart(p, key, (kind) => {
+        _stats.lastKindCounts[kind] = (_stats.lastKindCounts[kind] || 0) + 1;
+    });
 }
 
 export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped, flat }) {

package/src/components/data-density.js

@@ -60,11 +60,14 @@ export function TreeNode({ ts, kind, variant = '', phase, id, keyLabel, reason,
 // ---------------------------------------------------------------------------
 export function BarRow({ label, value, pct = 0, tone } = {}) {
     const clamped = Math.max(0, Math.min(100, pct));
-    return h('div', { class: 'ds-bar-row' },
+    return h('div', {
+        class: 'ds-bar-row', role: 'meter', 'aria-label': label != null ? String(label) : 'value',
+        'aria-valuenow': String(clamped), 'aria-valuemin': '0', 'aria-valuemax': '100',
+    },
         h('span', { class: 'ds-bar-row-label', style: tone ? `color:${tone}` : null }, label),
-        h('div', { class: 'ds-bar-bg' },
+        h('div', { class: 'ds-bar-bg', 'aria-hidden': 'true' },
             h('div', { class: 'ds-bar-fill', style: `width:${clamped}%` + (tone ? `;background:${tone}` : '') })),
-        h('span', { class: 'ds-bar-row-value' }, value));
+        h('span', { class: 'ds-bar-row-value', 'aria-hidden': 'true' }, value));
 }
 
 // ---------------------------------------------------------------------------
@@ -72,15 +75,15 @@ export function BarRow({ label, value, pct = 0, tone } = {}) {
 //   cls on StatTile selects an accent variant: '' | 'rate-big' | 'err-rate'.
 // ---------------------------------------------------------------------------
 export function StatTile({ val, lbl, cls = '' } = {}) {
-    return h('div', { class: 'ds-stat' },
-        h('div', { class: 'ds-stat-val' + (cls ? ' ' + cls : '') }, val),
-        h('div', { class: 'ds-stat-lbl' }, lbl));
+    return h('div', { class: 'ds-stat', role: 'group', 'aria-label': `${lbl || 'stat'}: ${val}` },
+        h('div', { class: 'ds-stat-val' + (cls ? ' ' + cls : ''), 'aria-hidden': 'true' }, val),
+        h('div', { class: 'ds-stat-lbl', 'aria-hidden': 'true' }, lbl));
 }
 
 export function StatsGrid({ items = [] } = {}) {
     if (!items.length) return h('div', { class: 'ds-stats-grid ds-stats-grid-empty' },
         h('span', { class: 'ds-stat-lbl' }, 'no stats'));
-    return h('div', { class: 'ds-stats-grid' },
+    return h('div', { class: 'ds-stats-grid', role: 'group', 'aria-label': 'stats' },
         ...items.map((it, i) => h('div', { key: it.key || i }, StatTile(it))));
 }
 
@@ -90,11 +93,12 @@ export function StatsGrid({ items = [] } = {}) {
 export function SubGrid({ items = [] } = {}) {
     if (!items.length) return h('div', { class: 'ds-sub-grid ds-sub-grid-empty' },
         h('span', { class: 'ds-stat-lbl' }, 'no items'));
-    return h('div', { class: 'ds-sub-grid' },
+    return h('div', { class: 'ds-sub-grid', role: 'group', 'aria-label': 'categories' },
         ...items.map((it, i) => h('button', {
             key: it.key || i, type: 'button', class: 'ds-sub-btn',
             onclick: it.onClick || null,
-        }, h('span', {}, String(it.count)), it.label)));
+            'aria-label': `${it.label}: ${String(it.count)}`,
+        }, h('span', { 'aria-hidden': 'true' }, String(it.count)), it.label)));
 }
 
 // ---------------------------------------------------------------------------
@@ -115,6 +119,7 @@ export function SessionRow({ sessId, phaseWalkProps, events, verbs, prd, muts, r
         class: 'ds-session-row', onclick: onClick || null,
         role: onClick ? 'button' : null, tabindex: onClick ? '0' : null,
         onkeydown: onClick ? (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onClick(e); } } : null,
+        'aria-label': onClick ? `session ${sessId}: ${counts}` : null,
     },
         h('span', { class: 'ds-session-row-id' }, sessId),
         h('span', { class: 'ds-session-row-counts' }, counts),
@@ -163,6 +168,6 @@ export function LiveLog({ entries = [], autoScroll = true } = {}) {
     };
     if (!entries.length) return h('div', { class: 'ds-live-log ds-live-log-empty' },
         h('span', { class: 'ds-stat-lbl' }, 'no log entries'));
-    return h('div', { class: 'ds-live-log', ref: seedScroll },
+    return h('div', { class: 'ds-live-log', ref: seedScroll, role: 'log', 'aria-label': 'live log' },
         ...entries.map((e, i) => h('div', { key: e.key || i }, LiveLogEntry(e))));
 }

package/src/components/files-modals.js

@@ -178,7 +178,19 @@ export function ConfirmDialog({ title = 'Are you sure?', message, confirmLabel =
     });
 }
 
-export function PromptDialog({ title = 'Enter a name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…' } = {}) {
+export function PromptDialog({ title = 'Enter a name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…', roots, onPickRoot } = {}) {
+    // Optional one-click starting-point chips (e.g. a destination-path prompt
+    // for a filesystem with more than one allowed root) - a user typing a
+    // path has no way to discover what a second disjoint root even looks
+    // like otherwise. Each { path, label } fills the input via the same
+    // onInput callback a manual keystroke would.
+    const rootsRow = (roots && roots.length)
+        ? h('div', { class: 'ds-prompt-roots', role: 'group', 'aria-label': 'accessible folders' },
+            ...roots.map((r, i) => h('button', {
+                key: 'pr' + i, type: 'button', class: 'ds-prompt-root-chip',
+                onclick: () => { const p = r.path || r; if (onPickRoot) onPickRoot(p); else if (onInput) onInput(p); },
+            }, r.label || r.path || r)))
+        : null;
     return Modal({
         onClose: onCancel,
         kind: 'small',
@@ -198,7 +210,7 @@ export function PromptDialog({ title = 'Enter a name', value = '', placeholder =
                 if (e.key === 'Enter' && !e.isComposing && e.keyCode !== 229) { e.preventDefault(); if (!busy) onConfirm && onConfirm(e.target.value); }
                 if (e.key === 'Escape') { e.preventDefault(); if (!busy) onCancel && onCancel(); }
             }
-        }), modalError(error)].filter(Boolean),
+        }), rootsRow, modalError(error)].filter(Boolean),
         actions: [
             Btn({ onClick: onCancel, disabled: busy, children: cancelLabel }),
             Btn({

package/src/components/files.js

@@ -28,9 +28,13 @@ export function fileGlyph(type) {
 }
 
 // The canonical kit byte formatter (chat.js re-exports it as fmtBytes). One
-// format everywhere: '0 B' for zero; the em-dash means unknown/null ONLY.
+// format everywhere: '0 B' for zero; the em-dash means unknown/null/invalid
+// (NaN, a negative count, or anything non-numeric never reaches the divide
+// loop — previously NaN fell through to the loop unchanged and rendered the
+// literal string "NaN B").
 export function fmtFileSize(bytes) {
     if (bytes == null) return '—';
+    if (typeof bytes !== 'number' || Number.isNaN(bytes) || bytes < 0) return '—';
     if (bytes === 0) return '0 B';
     const u = ['B', 'KB', 'MB', 'GB', 'TB'];
     let i = 0, n = bytes;

package/src/components/freddie/helpers.js

@@ -1,6 +1,11 @@
-// Freddie helpers — minimal stubs. Real freddie surfaces ship downstream
-// (gm-cc, foph, hermes-fork). The SDK exposes the registry shape and
-// localStorage helpers so consumer pages can wire to existing patterns.
+// Freddie helpers — shared registry/localStorage/render helpers used by both
+// the freddie component surface (src/components/freddie.js) and the OS kit's
+// freddie pages (src/kits/os/freddie/*.js). Canonical merged location: this
+// module previously had a diverged twin at src/kits/os/freddie/helpers.js
+// (pre/form/getRecentPaths/saveRecentPath/skillLabel) that re-implemented the
+// same localStorage-recent-paths + skill-label concerns with different keys
+// and a different skillLabel() call shape; merged here so both surfaces
+// share one behavior.
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 const h = webjsx.createElement;
@@ -13,7 +18,22 @@ export function renderPageStub({ id, title }) {
     );
 }
 
-const SKILL_LABELS = {
+// pre() / form() — small raw-DOM helpers used by the OS kit's freddie pages
+// (JSON dumps, quick add-forms) that don't need the full component barrel.
+export function pre(obj) {
+    return h('pre', { class: 'fd-pre' }, typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2));
+}
+
+export function form(opts) {
+    const { fields = [], submit = 'submit', onSubmit } = opts;
+    return h('form', { class: 'row-form', onsubmit: (ev) => { ev.preventDefault(); onSubmit && onSubmit(ev); } },
+        ...fields.map(f => f.kind === 'textarea'
+            ? h('textarea', { name: f.name, placeholder: f.placeholder || '', rows: f.rows || 4 })
+            : h('input', { name: f.name, type: f.type || 'text', placeholder: f.placeholder || '', value: f.value || '', required: f.required ? 'true' : null })),
+        h('button', { type: 'submit', class: 'btn-primary' }, submit));
+}
+
+const SKILL_SLUG_LABELS = {
     transcribe: 'transcribe',
     summarize:  'summarize',
     translate:  'translate',
@@ -21,11 +41,29 @@ const SKILL_LABELS = {
     classify:   'classify',
 };
 
-export function skillLabel(slug) {
-    return SKILL_LABELS[slug] || slug;
+// skillLabel() accepts EITHER call shape used by existing call sites:
+//   skillLabel('transcribe')             -> looks up the static slug map
+//   skillLabel({ name, shortName })      -> derives a display label from a
+//                                           freddie skill object (OS kit's
+//                                           pages-core/-tools/-chat usage)
+// Additive/widened on purpose: never narrows either existing signature.
+export function skillLabel(input) {
+    if (input && typeof input === 'object') {
+        if (input.shortName) return input.shortName;
+        const n = input.name || '';
+        return n.replace(/^gm:/, '').replace(/^software-development$/, 'software dev').replace(/-/g, ' ');
+    }
+    return SKILL_SLUG_LABELS[input] || input;
 }
 
-const RECENT_KEY = 'ds247420.recent.paths';
+// Recent-cwd localStorage helpers. The two diverged copies used different
+// keys (ds247420.recent.paths vs fd_recent_cwds) and different caps (10 vs
+// 5) — keep the fd_recent_cwds key + cap 5 since that is the one every real
+// call site (the OS kit's freddie chat page) actually reads/writes; a
+// consumer of the ds247420.recent.paths key never existed (grep-confirmed
+// zero other readers), so this is a safe consolidation, not a behavior cut.
+const RECENT_KEY = 'fd_recent_cwds';
+const RECENT_CAP = 5;
 
 export function getRecentPaths() {
     if (typeof localStorage === 'undefined') return [];
@@ -37,7 +75,7 @@ export function saveRecentPath(path) {
     if (typeof localStorage === 'undefined' || !path) return;
     const list = getRecentPaths().filter(p => p !== path);
     list.unshift(path);
-    try { localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, 10))); } catch {}
+    try { localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, RECENT_CAP))); } catch {}
 }
 
 // Helper used by consumers that want to render chat-message arrays with