anentrypoint-design 0.0.385 → 0.0.387

package/src/components/chat/composer-affordances.js

@@ -0,0 +1,109 @@
+// Composer side-affordances that live in the DOM rather than the vnode tree:
+// the queued transient note strip, the detected-attachment badge, the
+// coarse-pointer probe that decides Enter-to-send vs Enter-for-newline, and
+// the ticking m:ss streaming counter.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+// Transient, non-blocking composer note (aria-live polite): e.g. a pasted image
+// when no onPasteFiles handler is wired. Pure-DOM, auto-clears.
+export function flashComposerNote(composerEl, text) {
+    if (!composerEl) return;
+    let note = composerEl.querySelector('.chat-composer-note');
+    if (!note) {
+        note = document.createElement('div');
+        note.className = 'chat-composer-note';
+        note.setAttribute('role', 'status');
+        note.setAttribute('aria-live', 'polite');
+        composerEl.appendChild(note);
+    }
+    // A single shared node means a second call before the first note's timeout
+    // fires used to silently overwrite it (lost message, not just an early
+    // dismiss). Queue instead: show immediately if idle, otherwise append and
+    // let the display loop drain the queue in order.
+    note._dsNoteQueue = note._dsNoteQueue || [];
+    note._dsNoteQueue.push(text);
+    if (note._dsNoteTimer) return; // already draining the queue
+    const showNext = () => {
+        const next = note._dsNoteQueue.shift();
+        if (next === undefined) { note.remove(); note._dsNoteTimer = null; return; }
+        note.textContent = next;
+        note._dsNoteTimer = setTimeout(showNext, 2600);
+    };
+    showNext();
+}
+
+// Cached once per session: coarse-pointer (touch/no-hover) devices get a
+// newline on Enter instead of send (mirrors the one-time-cache pattern
+// editor-primitives.js uses for its own pointer/matchMedia checks).
+let _coarsePointerCache = null;
+export function isCoarsePointer() {
+    if (_coarsePointerCache != null) return _coarsePointerCache;
+    _coarsePointerCache = !!(typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(pointer: coarse)').matches);
+    return _coarsePointerCache;
+}
+
+// m:ss elapsed-time formatter for the streaming counter.
+function fmtElapsedMs(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    const m = Math.floor(total / 60);
+    const s = total % 60;
+    return m + ':' + String(s).padStart(2, '0');
+}
+
+// A small ticking `m:ss` counter, keyed off the streamingSince timestamp so a
+// parent re-render does not reset the interval — the ref only (re)starts the
+// interval when the timestamp actually changes, and clears it when streaming
+// goes false or the node unmounts.
+export function ChatComposerElapsed({ streamingSince }) {
+    return h('span', {
+        class: 'chat-composer-elapsed', role: 'status', 'aria-live': 'off',
+        ref: (el) => {
+            if (!el) return;
+            if (el._dsElapsedTimer && el._dsElapsedSince === streamingSince) return; // already ticking for this timestamp
+            if (el._dsElapsedTimer) clearInterval(el._dsElapsedTimer);
+            el._dsElapsedSince = streamingSince;
+            const tick = () => { el.textContent = fmtElapsedMs(Date.now() - streamingSince); };
+            tick();
+            el._dsElapsedTimer = setInterval(tick, 1000);
+        },
+    });
+}
+
+// detectAttachment(text) -> {type,label,id} runs on every input change; the
+// badge above the textarea shows/clears based on its result, and clears
+// outright when the textarea empties (mirrors the dismissible-badge pattern
+// via a DOM-owned dismissed flag so a re-render with the same detection
+// doesn't resurrect a badge the user just dismissed).
+export function updateDetectedBadge(composerEl, text, detectAttachment) {
+    if (!composerEl) return;
+    let badge = composerEl.querySelector('.chat-composer-detected-badge');
+    const detected = (text && detectAttachment) ? detectAttachment(text) : null;
+    if (!detected) {
+        if (badge) badge.remove();
+        composerEl._dsDetectedId = null;
+        return;
+    }
+    if (composerEl._dsDismissedId === detected.id) return; // user dismissed this exact detection
+    if (composerEl._dsDetectedId === detected.id && badge) return; // unchanged
+    composerEl._dsDetectedId = detected.id;
+    if (!badge) {
+        badge = document.createElement('div');
+        badge.className = 'chat-composer-detected-badge';
+        badge.setAttribute('role', 'status');
+        composerEl.insertBefore(badge, composerEl.firstChild);
+    }
+    badge.textContent = '';
+    const label = document.createElement('span');
+    label.className = 'chat-composer-detected-label';
+    label.textContent = detected.label;
+    badge.appendChild(label);
+    const dismiss = document.createElement('button');
+    dismiss.type = 'button';
+    dismiss.className = 'chat-composer-detected-dismiss';
+    dismiss.setAttribute('aria-label', 'dismiss ' + detected.label);
+    dismiss.textContent = 'x';
+    dismiss.onclick = (e) => { e.preventDefault(); composerEl._dsDismissedId = detected.id; badge.remove(); };
+    badge.appendChild(dismiss);
+}

package/src/components/chat/composer.js

@@ -0,0 +1,256 @@
+// ChatComposer — the message input: controlled textarea with caret-safe value
+// sync and auto-grow, the inline `:emoji` and `@file` autocomplete triggers,
+// paste/drop file routing, the optional context line, and the send/stop
+// toolbar. DOM-side affordances (notes, detected badge, elapsed counter,
+// pointer probe) live in ./composer-affordances.js.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { EmojiPicker, CommandPalette } from '../overlay-primitives.js';
+import { extractAtQuery, filterFileEntries, buildAtInsertText } from '../../file-mention.js';
+import { flashComposerNote, isCoarsePointer, ChatComposerElapsed, updateDetectedBadge } from './composer-affordances.js';
+
+const h = webjsx.createElement;
+
+// Matches a trailing `:keyword` at the end of the composer draft (optionally
+// preceded by whitespace/start-of-string) so typing `:smile` opens an inline
+// filtered EmojiPicker without requiring the toolbar button or Ctrl+;.
+const EMOJI_TRIGGER_RE = /(?:^|\s)(:([a-zA-Z0-9_+-]{0,24}))$/;
+
+export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy, placeholder = 'message…', disabled, disabledReason, label, context, onPasteFiles, onDropFiles, streamingSince, detectAttachment, mentionFiles }) {
+    // Keep a handle to the live textarea so send() reads the actual DOM value
+    // (not the possibly-lagging `value` prop) and so we can sync the DOM value
+    // only when it genuinely differs — re-applying `value` on every parent
+    // re-render otherwise resets the caret and drops fast keystrokes.
+    let taEl = null;
+    const send = () => {
+        const v = ((taEl && taEl.value) || value || '').trim();
+        if (!v || disabled) return;
+        if (onSend) onSend(v);
+    };
+    const triggerMatch = EMOJI_TRIGGER_RE.exec(value || '');
+    // `@`-file-mention autocomplete: host supplies mentionFiles (a flat list of
+    // {path,isDir} entries, or a plain string[] of paths — filterFileEntries
+    // normalizes both), we own detection/filtering/insertion. Caret-position-
+    // aware (extractAtQuery needs the text BEFORE the caret, not the whole
+    // draft) so an "@" earlier in an already-sent-past part of the text doesn't
+    // re-trigger after the cursor has moved on.
+    const caretPos = taEl ? taEl.selectionStart : (value || '').length;
+    const atQuery = mentionFiles ? extractAtQuery((value || '').slice(0, caretPos)) : null;
+    // taEl is only assigned by taRef during DOM diffing, which happens AFTER
+    // this render function returns — so on first paint of a trigger it is
+    // still null here. Fall back to the live DOM textarea from the previous
+    // paint (same composer, content patched in place) so the picker anchors
+    // near the input instead of the viewport origin.
+    const anchorEl = taEl || (typeof document !== 'undefined' ? document.querySelector('.chat-composer textarea') : null);
+    const insertEmoji = (ch) => {
+        const v = (taEl && taEl.value) || value || '';
+        const m = EMOJI_TRIGGER_RE.exec(v);
+        const next = m ? (v.slice(0, m.index) + (m[0].startsWith(':') ? '' : v[m.index]) + ch + ' ') : (v + ch);
+        if (onInput) onInput(next);
+        if (taEl) {
+            // Programmatic .value= (like the draft-restore path) discards the
+            // native undo stack the same way — surface that once, matching the
+            // existing one-time draft-restore note pattern.
+            try {
+                if (!sessionStorage.getItem('ds.composer.undoNoteShown')) {
+                    sessionStorage.setItem('ds.composer.undoNoteShown', '1');
+                    flashComposerNote(taEl.closest('.chat-composer'), 'inserted — undo history does not include this insert');
+                }
+            } catch { /* swallow: sessionStorage unavailable (private mode etc) — skip the note */ }
+            taEl.value = next;
+            taEl.focus();
+            taEl.selectionStart = taEl.selectionEnd = next.length;
+        }
+    };
+    let autoGrowScheduled = false;
+    const autoGrow = (e) => {
+        const ta = e.target;
+        if (onInput) onInput(ta.value);
+        if (detectAttachment) updateDetectedBadge(ta.closest('.chat-composer'), ta.value, detectAttachment);
+        // Debounce scrollHeight read with rAF to prevent sync reflow thrashing
+        if (!autoGrowScheduled) {
+            autoGrowScheduled = true;
+            requestAnimationFrame(() => {
+                ta.style.height = 'auto';
+                // Respect the CSS max-height cap (120px in short-landscape via
+                // app-shell.css) instead of a hardcoded 200px.
+                const cap = parseFloat(getComputedStyle(ta).maxHeight) || 200;
+                ta.style.height = Math.min(ta.scrollHeight, cap) + 'px';
+                autoGrowScheduled = false;
+            });
+        }
+    };
+    const taRef = (el) => {
+        if (!el) return;
+        taEl = el;
+        // Sync the controlled value into the DOM only when it actually differs,
+        // so a re-render mid-type does not clobber the caret or pending input.
+        const next = value || '';
+        if (el.value !== next) el.value = next;
+        el.style.height = 'auto';
+        const cap = parseFloat(getComputedStyle(el).maxHeight) || 200;
+        el.style.height = Math.min(el.scrollHeight, cap) + 'px';
+        if (detectAttachment) updateDetectedBadge(el.closest('.chat-composer'), next, detectAttachment);
+    };
+    // Optional context line shown above the textarea: agent / model / cwd at the
+    // point of typing (the way Claude-Desktop surfaces the active target inline).
+    // `context` is { bits:[...], onClick? }. Bits may be plain strings (inert
+    // text) or { text, onClick, title } objects — a bit with its own onClick
+    // renders as an inline button (.chat-composer-context-bit) so e.g. the cwd
+    // segment routes to the cwd editor WITHOUT making the whole line one giant
+    // click target. Legacy whole-line context.onClick is honored only when no
+    // bit carries its own handler. All children are keyed VElements.
+    // Normalize FIRST (a bit may carry `text` or `label`), then drop empties -
+    // separators must only ever sit between bits that actually render. An
+    // object bit whose text resolved empty used to leave a dangling trailing
+    // middot AND an invisible zero-width button.
+    const ctxBits = ((context && context.bits) ? context.bits : [])
+        .map((b) => {
+            if (b == null) return null;
+            if (typeof b === 'object') {
+                const text = b.text || b.label || '';
+                return text ? { text, onClick: b.onClick, title: b.title } : null;
+            }
+            const text = String(b);
+            return text ? { text } : null;
+        })
+        .filter(Boolean);
+    const hasBitClicks = ctxBits.some((b) => b.onClick);
+    let contextLine = null;
+    if (ctxBits.length && hasBitClicks) {
+        const kids = [];
+        ctxBits.forEach((b, i) => {
+            if (i) kids.push(h('span', { key: 'csep' + i, class: 'chat-composer-context-sep', 'aria-hidden': 'true' }, ' · '));
+            if (b.onClick) kids.push(h('button', {
+                key: 'cbit' + i, type: 'button', class: 'chat-composer-context-bit',
+                title: b.title || null, 'aria-label': b.title || b.text,
+                onclick: (e) => { e.preventDefault(); b.onClick(e); },
+            }, b.text));
+            else kids.push(h('span', { key: 'cbit' + i, class: 'chat-composer-context-text' }, b.text));
+        });
+        contextLine = h('div', { class: 'chat-composer-context', role: 'group', 'aria-label': 'active session: ' + ctxBits.map((b) => b.text).join(', ') }, ...kids);
+    } else if (ctxBits.length) {
+        const joined = ctxBits.map((b) => b.text).join(' · ');
+        contextLine = h(context.onClick ? 'button' : 'div', {
+            class: 'chat-composer-context', type: context.onClick ? 'button' : null,
+            'aria-label': context.onClick ? ('change target: ' + joined) : null,
+            onclick: context.onClick ? (e) => { e.preventDefault(); context.onClick(e); } : null,
+        }, joined);
+    }
+    const hasDraft = !!(value && value.trim());
+    // Clamp the picker anchor to the visual viewport: with the on-screen
+    // keyboard open the composer sits near the visual-viewport bottom, and on
+    // narrow screens the picker width can overflow the right edge.
+    const anchorRect = (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect() : null;
+    const vvWidth = (typeof window !== 'undefined')
+        ? ((window.visualViewport && window.visualViewport.width) || window.innerWidth)
+        : 0;
+    const triggerPicker = triggerMatch ? EmojiPicker({
+        open: true,
+        anchorX: anchorRect ? Math.max(0, Math.min(anchorRect.left, vvWidth - 280)) : 0,
+        anchorY: anchorRect ? Math.max(8, anchorRect.top - 8) : 0,
+        query: triggerMatch[2] || '',
+        onSelect: (ch) => insertEmoji(ch),
+        onClose: () => { if (taEl) { const v = taEl.value.replace(EMOJI_TRIGGER_RE, (full, tail) => full.slice(0, full.length - tail.length)); if (onInput) onInput(v); taEl.value = v; taEl.focus(); } },
+    }) : null;
+    // insertMention: replace the in-progress @token (atQuery.start..caretPos)
+    // with the built mention text, mirroring insertEmoji's DOM-authoritative
+    // read/write-back so the native undo stack isn't clobbered any more than
+    // the existing emoji path already accepts.
+    const insertMention = (entry) => {
+        const v = (taEl && taEl.value) || value || '';
+        if (!atQuery) return;
+        // buildAtInsertText returns {text, cursorOffset} — cursorOffset is
+        // relative to the start of the inserted text, matching the emoji
+        // path's absolute-caret style once added to atQuery.start.
+        const { text: insertText, cursorOffset } = buildAtInsertText(entry.path, entry.isDir);
+        const next = v.slice(0, atQuery.start) + insertText + v.slice(caretPos);
+        if (onInput) onInput(next);
+        if (taEl) {
+            taEl.value = next;
+            taEl.focus();
+            const pos = atQuery.start + cursorOffset;
+            taEl.selectionStart = taEl.selectionEnd = pos;
+        }
+    };
+    const mentionEntries = atQuery ? filterFileEntries(mentionFiles, atQuery.query) : [];
+    const mentionPicker = atQuery ? CommandPalette({
+        open: true,
+        items: mentionEntries.map((e) => ({ label: e.path, group: null, icon: e.isDir ? '📁' : null, _entry: e })),
+        onSelect: (it) => insertMention(it._entry),
+        onClose: () => { if (taEl) { const v = taEl.value.slice(0, atQuery.start) + taEl.value.slice(caretPos); if (onInput) onInput(v); taEl.value = v; taEl.focus(); taEl.selectionStart = taEl.selectionEnd = atQuery.start; } },
+    }) : null;
+    return h('div', {
+        class: 'chat-composer' + (hasDraft ? ' has-draft' : '') + (disabled ? ' is-disabled' : ''),
+        // A drop on the composer must NEVER navigate the browser away from the
+        // live session: preventDefault on both dragover and drop, route files to
+        // the optional onDropFiles handler, ring via .dragover.
+        ondragover: (e) => { e.preventDefault(); e.currentTarget.classList.add('dragover'); },
+        ondragleave: (e) => { e.currentTarget.classList.remove('dragover'); },
+        ondrop: (e) => {
+            e.preventDefault();
+            e.currentTarget.classList.remove('dragover');
+            const files = e.dataTransfer && e.dataTransfer.files;
+            if (files && files.length) {
+                if (onDropFiles) onDropFiles(files);
+                else flashComposerNote(e.currentTarget, 'dropped files are not supported here yet');
+            }
+        },
+    },
+        contextLine,
+        triggerPicker,
+        mentionPicker,
+        h('textarea', { ref: taRef, placeholder, rows: 1,
+            'aria-label': label || (disabled && disabledReason ? 'message input — ' + disabledReason : 'message input'),
+            disabled: !!disabled, 'aria-disabled': disabled ? 'true' : null,
+            oninput: autoGrow,
+            onpaste: (e) => {
+                const cd = e.clipboardData;
+                // If the clipboard contains files, always route them — even when
+                // text is also present (some apps attach a filename as text).
+                if (cd && cd.files && cd.files.length) {
+                    e.preventDefault();
+                    if (onPasteFiles) onPasteFiles(cd.files);
+                    else flashComposerNote(e.currentTarget.closest('.chat-composer'), 'images are not supported yet');
+                    return;
+                }
+                // Large plain-text pastes (e.g. a whole file/log dropped into the
+                // composer) get no feedback otherwise — the textarea just grows to
+                // its max-height cap with no signal of how much landed. Note the
+                // character count; this does not change any truncation behavior.
+                const text = cd && cd.getData ? cd.getData('text/plain') : '';
+                if (text && text.length > 2000) {
+                    flashComposerNote(e.currentTarget.closest('.chat-composer'), 'pasted ' + text.length + ' characters');
+                }
+            },
+            onkeydown: (e) => {
+                // Escape blurs the textarea when idle; stops generation when busy.
+                if (e.key === 'Escape') {
+                    if (!busy) { e.currentTarget.blur(); return; }
+                    if (onCancel) { e.preventDefault(); onCancel(e); return; }
+                }
+                // IME guard: the Enter that commits a CJK composition must never
+                // send (isComposing; keyCode 229 covers older engines).
+                // Coarse-pointer (touch) devices get a newline on Enter instead of
+                // send — there is no keyboard shortcut discoverability benefit on
+                // touch, and Enter-to-send is a frequent accidental-send source on
+                // phones/tablets where "Tap Send to send" is the predictable model.
+                if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229 && !isCoarsePointer()) { e.preventDefault(); send(); }
+                if (e.key === ';' && e.ctrlKey) { e.preventDefault(); onEmoji && onEmoji(e); }
+            } }),
+        // Enter-to-send affordance (Claude-Desktop style): a muted hint visible
+        // at rest so it's discoverable without focusing the composer first;
+        // hidden under 420px (CSS) to save rows. Middot is kept product typography.
+        h('div', { class: 'chat-composer-hint' }, isCoarsePointer() ? 'Tap Send to send' : 'Enter to send · Shift+Enter for a new line'),
+        (busy && streamingSince) ? ChatComposerElapsed({ streamingSince }) : null,
+        h('div', { class: 'chat-composer-toolbar' },
+            onEmoji ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onEmoji(e); }, 'aria-label': 'emoji picker', title: 'emoji picker (Ctrl+;)' }, Icon('smile')) : null,
+            busy && onCancel
+                ? h('button', { type: 'button', class: 'send cancel', onclick: (e) => { e.preventDefault(); onCancel(e); }, 'aria-label': 'stop generating', title: 'stop generating (Esc)' }, Icon('square'))
+                : h('button', { type: 'button', class: 'send', disabled: disabled || !(value && value.trim()), onclick: send,
+                    'aria-label': disabled && disabledReason ? 'send message (' + disabledReason + ')' : 'send message',
+                    title: disabled && disabledReason ? 'send message (' + disabledReason + ')' : 'send message (Enter)' }, Icon('arrow-up'))
+        )
+    );
+}

package/src/components/chat/threads.js

@@ -0,0 +1,105 @@
+// Thread containers: Chat (the standard header + log + composer surface),
+// AICat / AICatPortrait (the ascii-mascot variant), and ChatSuggestions (the
+// blank-thread composer-priming CTA).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { t } from '../../i18n.js';
+import { ChatMessage } from './message.js';
+import { makeThreadAutoScroll } from './thread-scroll.js';
+import { ensureCachesInit } from './stats.js';
+
+const h = webjsx.createElement;
+
+// ChatSuggestions — centered blank-thread heading + subtext + a wrapped row
+// of prompt chips that fill the composer textarea on click and auto-dismiss
+// on first send. Ported from docstudio's empty-state composer-priming CTA
+// (distinct from a generic list EmptyState: this exists to seed a first
+// message, not to describe an empty list). `onPick(prompt, item)` is the
+// caller's single hook — the component does not touch the composer DOM
+// itself, so the host decides how "fill the composer" actually happens.
+// A rapid double-click on the same chip (or a click racing the first send)
+// is guarded by a one-shot `_picked` flag: only the first click of any kind
+// dispatches onPick, so the composer is never filled twice and the chips
+// never reappear having already been "used".
+export function ChatSuggestions({ heading = 'What can I help with?', subtext = '', suggestions = [] } = {}) {
+    let picked = false;
+    return h('div', { class: 'chat-suggestions', role: 'group', 'aria-label': heading },
+        h('h2', { class: 'chat-suggestions-heading' }, heading),
+        subtext ? h('p', { class: 'chat-suggestions-subtext' }, subtext) : null,
+        h('div', { class: 'chat-suggestions-list' },
+            ...suggestions.map((s, i) => h('button', {
+                key: s.id || i, type: 'button', class: 'chat-suggestions-chip',
+                onclick: () => { if (picked) return; picked = true; s.onPick ? s.onPick(s) : null; }
+            }, s.label))
+        )
+    );
+}
+
+export function Chat({ title = 'chat', sub, messages = [], composer, header, suggestions, onSuggestionClick } = {}) {
+    // Warm markdown/Prism caches once so library loading parallelizes.
+    ensureCachesInit();
+    const threadRef = makeThreadAutoScroll(() => messages.length);
+    const msgCount = messages.length;
+    return h('div', { class: 'chat' },
+        header || h('div', { class: 'chat-head', role: 'banner' },
+            h('h2', { class: 'ds-chat-title' }, title),
+            sub ? h('span', { class: 'sub', 'aria-label': `subtitle: ${sub}` }, ' · ' + sub) : null,
+            h('span', { class: 'spread' }),
+            msgCount > 0
+                ? h('span', { class: 'sub', 'aria-live': 'polite' }, msgCount + (msgCount === 1 ? ' message' : ' messages'))
+                : null
+        ),
+        h('div', { class: 'chat-thread', ref: threadRef, role: 'log', 'aria-label': 'chat messages', 'aria-live': 'polite', 'aria-relevant': 'additions' },
+            messages.length === 0
+                ? h('div', { key: '_empty', class: 'chat-empty', role: 'status' },
+                    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',
+                                onclick: () => { if (onSuggestionClick) onSuggestionClick(typeof s === 'string' ? s : (s.prompt || s.text || '')); } },
+                                typeof s === 'string' ? s : (s.label || s.text || s.prompt))))
+                        : null)
+                : null,
+            ...messages.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i }))
+        ),
+        composer || null
+    );
+}
+
+export const AICAT_FACE = ` /\\_/\\\n( o.o )\n > ^ <`;
+
+export function AICatPortrait({ name = 'aicat', status = 'idle', face } = {}) {
+    return h('div', { class: 'aicat-portrait' },
+        h('pre', { class: 'aicat-face', 'aria-label': `${name} portrait` }, face || AICAT_FACE),
+        h('div', { class: 'aicat-meta' },
+            h('span', { class: 'name' }, name),
+            h('span', { class: 'status', 'aria-label': `status: ${status}` }, h('span', { class: 'dot ds-dot ds-dot-on', 'aria-hidden': 'true' }), ' ', status)
+        )
+    );
+}
+
+export function AICat({ name = 'aicat', messages = [], thinking, composer, status = 'online · purring' } = {}) {
+    ensureCachesInit();
+    const annotated = messages.map((m) =>
+        m.who === 'them' ? { ...m, aicat: true, avatar: m.avatar || '=^.^=' } : m);
+    const all = thinking
+        ? [...annotated, { who: 'them', aicat: true, avatar: '=^.^=', typing: true, key: '_thinking' }]
+        : annotated;
+    const threadRef = makeThreadAutoScroll(() => all.length);
+    return h('div', { class: 'chat' },
+        h('div', { class: 'chat-head', role: 'banner' },
+            h('span', { class: 'dot', 'aria-hidden': 'true' }),
+            h('h2', { class: 'ds-chat-title' }, name),
+            h('span', { class: 'sub', 'aria-label': `status: ${status}` }, ' · ' + status),
+            h('span', { class: 'spread' }),
+            messages.length > 0
+                ? h('span', { class: 'sub', 'aria-live': 'polite' }, messages.length + (messages.length === 1 ? ' turn' : ' turns'))
+                : null
+        ),
+        h('div', { class: 'chat-thread', ref: threadRef, role: 'log', 'aria-label': 'conversation turns', 'aria-live': 'polite', 'aria-relevant': 'additions' },
+            ...all.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i }))
+        ),
+        composer || null
+    );
+}

package/src/components/chat-message-parts/agent-nodes.js

@@ -0,0 +1,103 @@
+// Agent-turn bubbles: the collapsible tool-call card (with per-section copy,
+// stringify caching, and unified-diff detection that routes a patch-shaped
+// result through GitDiffView) and the transient/settled thinking indicator.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { t } from '../../i18n.js';
+import { GitDiffView } from '../git-status.js';
+import { copyToClipboardWithFeedback } from './inline.js';
+
+const h = webjsx.createElement;
+
+// A tool result reads as a unified diff when it has at least one `@@ ... @@`
+// hunk header and a +/- line — cheap enough to check on every render (no
+// caching) since it only runs once per settled tool card, not per rAF tick.
+function looksLikeUnifiedDiff(text) {
+    if (!text || text.indexOf('@@') === -1) return false;
+    return /^@@ .* @@/m.test(text) && /^[+-]/m.test(text);
+}
+
+// Pull a filename out of a unified diff's `+++ b/path` (or `--- a/path`)
+// header line, for the GitDiffView head label — best-effort, no filename is
+// fine (GitDiffView renders headerless).
+function filenameFromDiff(text) {
+    const m = /^\+\+\+ b?\/?(.+)$/m.exec(text) || /^--- a?\/?(.+)$/m.exec(text);
+    return m ? m[1].trim() : undefined;
+}
+
+// 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.
+export 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) => copyToClipboardWithFeedback(txt, e.currentTarget);
+    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
+                    ? (!p.error && looksLikeUnifiedDiff(resultText)
+                        // A patch-shaped tool result (edit/write/diff tools) renders
+                        // through the same split unified-diff view git-status.js's
+                        // GitDiffView already owns, instead of a raw JSON/text dump —
+                        // colored +/- hunks read far better than escaped plaintext.
+                        ? h('div', { class: 'chat-tool-section' },
+                            sectionLabel('result', resultText),
+                            GitDiffView({ diff: resultText, filename: filenameFromDiff(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)
+        )
+    );
+}
+
+export function ThinkingNode(p) {
+    if (p.settled) {
+        return h('details', { class: 'chat-bubble chat-thinking-settled' },
+            h('summary', {}, t('chat.viewThinking', '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 || t('chat.thinking', 'thinking…'))
+    );
+}