anentrypoint-design 0.0.323 → 0.0.325

package/src/components/chat.js

@@ -3,12 +3,13 @@
 // 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 { t } from '../i18n.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 +25,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 +79,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 }) {
@@ -488,7 +192,7 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     // Flat layout leads the turn with a small role label (You / agent name)
     // above the content, the way claude.ai/code titles each turn.
     const roleLabel = isFlat
-        ? h('div', { class: 'chat-role', key: '_role' }, resolvedWho === 'you' ? 'You' : (name || 'Assistant'))
+        ? h('div', { class: 'chat-role', key: '_role' }, resolvedWho === 'you' ? t('chat.roleYou', 'You') : (name || t('chat.roleAssistant', 'Assistant')))
         : null;
     const stack = h('div', { class: 'chat-stack' }, roleLabel, ...bodyNodes, reactionRow, actionRow, meta);
     // Centered roles (system/tool/thinking) skip the avatar column entirely so
@@ -560,7 +264,7 @@ export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy,
                     sessionStorage.setItem('ds.composer.undoNoteShown', '1');
                     flashComposerNote(taEl.closest('.chat-composer'), 'inserted — undo history does not include this insert');
                 }
-            } catch { /* sessionStorage unavailable (private mode etc) — skip the note */ }
+            } catch { /* swallow: sessionStorage unavailable (private mode etc) — skip the note */ }
             taEl.value = next;
             taEl.focus();
             taEl.selectionStart = taEl.selectionEnd = next.length;
@@ -740,8 +444,8 @@ export function Chat({ title = 'chat', sub, messages = [], composer, header, sug
         h('div', { class: 'chat-thread', ref: threadRef, role: 'log', 'aria-label': 'chat messages' },
             messages.length === 0
                 ? h('div', { key: '_empty', class: 'chat-empty', role: 'status' },
-                    h('p', { class: 'chat-empty-title' }, 'start a conversation'),
-                    h('p', { class: 'chat-empty-sub' }, sub || 'Send a message to start the conversation'),
+                    h('p', { class: 'chat-empty-title' }, t('chat.startConversation', 'start a conversation')),
+                    h('p', { class: 'chat-empty-sub' }, sub || t('chat.emptySub', 'Send a message to start the conversation')),
                     (suggestions && suggestions.length)
                         ? h('div', { class: 'chat-empty-suggestions' },
                             ...suggestions.map((s, i) => h('button', { key: 'sug' + i, type: 'button', class: 'chat-empty-suggestion',

package/src/components/content.js

@@ -267,13 +267,17 @@ export function Install({ cmd, copied, onCopy }) {
 // every portfolio consumer theme.mjs (zellous/wireweave/247420) had hand-rolled
 // identically: lines.map((l,i) => a div per line holding a prompt span ('$' or
 // '#' for a comment line) and a cmd span, all wrapped in a Panel. This factory
-// targets the multi-line `.cli` contract already defined in app-shell.css and
-// gm-prose.css (`.cli` holding `.ds-cli-row` rows — each a prompt+cmd pair —
-// and `.ds-cli-comment` comment rows). `lines` is [{kind, text}] where kind: 'cmt' renders a
+// targets the multi-line `.ds-cli-block` contract defined in gm-prose.css
+// (`.ds-cli-block` holding `.ds-cli-row` rows — each a prompt+cmd pair — and
+// `.ds-cli-comment` comment rows). `lines` is [{kind, text}] where kind: 'cmt' renders a
 // comment-only row (no prompt glyph); any other kind (or omitted) renders a
 // command row prefixed '$'. `heading` titles the wrapping Panel ('quick start'
 // default, matching every hand-rolled instance); pass `heading: null` to
-// render the bare `.cli` block with no Panel chrome.
+// render the bare `.ds-cli-block` block with no Panel chrome.
+// Note: this is a different component than the bare `.cli` single prompt+cmd
+// row primitive (app-shell.css; see Install() above and the per-line usage
+// in terminal/site quickstart renderers) — the two used to collide on the
+// same `.cli` class name with incompatible display models.
 export function CliBlock({ lines = [], heading = 'quick start', className = '' } = {}) {
     if (!lines || !lines.length) return null;
     const rows = lines.map((l, i) => {
@@ -285,7 +289,7 @@ export function CliBlock({ lines = [], heading = 'quick start', className = '' }
                 h('span', { class: 'prompt' }, '$'),
                 h('span', { class: 'cmd' }, text));
     });
-    const body = h('div', { class: 'cli' + (className ? ' ' + className : '') }, ...rows);
+    const body = h('div', { class: 'ds-cli-block' + (className ? ' ' + className : '') }, ...rows);
     return heading == null ? body : Panel({ title: heading, children: body });
 }
 

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/editor-primitives.js

@@ -345,7 +345,7 @@ export function ResizeHandle({ axis = 'horizontal', onResize, ariaLabel } = {})
     };
     const onPointerUp = (e) => {
         dragOrigin = null;
-        try { e.currentTarget.releasePointerCapture && e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
+        try { e.currentTarget.releasePointerCapture && e.currentTarget.releasePointerCapture(e.pointerId); } catch { /* swallow: pointer capture may already be released, drag end still proceeds */ }
     };
     const onKeyDown = (e) => {
         const k = e.key;
@@ -829,7 +829,7 @@ export function JsonViewer({ value, emptyText = 'no data', maxHeight, mode = 'pl
     if (!text) return h('div', { class: 'ds-ep-json ds-ep-json-empty' }, emptyText);
     const style = maxHeight ? ('max-height:' + maxHeight) : null;
     if (!knownJson && (mode === 'highlight' || mode === 'tree')) {
-        try { parsed = JSON.parse(text); knownJson = true; } catch { /* not JSON — render plain */ }
+        try { parsed = JSON.parse(text); knownJson = true; } catch { /* swallow: not JSON — render plain */ }
     }
     let body;
     if (mode === 'tree' && knownJson && parsed !== null && typeof parsed === 'object') {

package/src/components/files-modals.js

@@ -4,6 +4,7 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Icon } from './shell.js';
 import { fileGlyph, fmtFileSize } from './files.js';
 import { highlightAllUnder } from '../highlight.js';
+import { shortUid } from '../uid.js';
 const h = webjsx.createElement;
 
 // Full focusable set for the modal Tab trap — omitting textarea/select/a[href]
@@ -81,7 +82,7 @@ function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {
             // Only restore focus when the modal is genuinely going away (not a
             // re-render remount) and focus is not already somewhere useful.
             if (removed && Backdrop._invoker && Backdrop._invoker.focus && Backdrop._invoker.isConnected) {
-                try { Backdrop._invoker.focus(); } catch {}
+                try { Backdrop._invoker.focus(); } catch { /* swallow: restoring focus on close is best-effort, teardown still completes */ }
             }
             if (removed) Backdrop._invoker = null;
         };
@@ -140,7 +141,7 @@ function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body,
     // stays constant across re-renders of the same dialog instance — an
     // incrementing counter advances on every render, leaving the previous
     // aria-labelledby reference pointing at a now-absent element.
-    const headId = head != null ? ('ds-modal-head-' + Math.random().toString(36).slice(2, 8)) : null;
+    const headId = head != null ? ('ds-modal-head-' + shortUid(6)) : null;
     return Backdrop({
         onClose,
         kind,
@@ -270,7 +271,7 @@ export function FilePreviewCode({ content = '', lang, filename } = {}) {
         const btn = e.currentTarget;
         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(content).then(done).catch(() => {});
-        else { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+        else { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch { /* swallow: legacy execCommand copy fallback unsupported, nothing more to try */ } }
     };
     return h('div', { class: 'ds-preview-code-wrap' },
         h('div', { class: 'chat-code-head ds-preview-code-head' },
@@ -295,7 +296,7 @@ function codeBody({ content = '', lang } = {}) {
         : null;
     const highlightRef = (el) => {
         if (!el) return;
-        try { highlightAllUnder(el); } catch {}
+        try { highlightAllUnder(el); } catch { /* swallow: syntax highlighting is a progressive enhancement, plain code still renders */ }
     };
     return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') + (wantGutter ? ' has-gutter' : ''), ref: highlightRef },
         gutter,

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;