fauna-api 0.0.0-stage → 1.0.679

package/dist/src/ui/chat.js

@@ -0,0 +1,2379 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import gsap from "gsap";
+import { marked } from "marked";
+import { Fauna } from "fauna-api";
+import { mimeFromFileName } from "../marmot/media.js";
+import { createTokenizedInput, parseRichText, toPlainText, hasTokens } from "./tokenized.js";
+import { roomPartsToChatFields } from "./chatSequence.js";
+import { ChatPanel, askForComputer, attachmentOf, buildAttachmentCard, chatToolLabel, createPanelBus, execOutput, mountRepositoryControl, openViewModal, paintPreview, roomHas, showPreview } from "./chatPanel.js";
+export { RepositoryControl, askForComputer, pickedRepository } from "./chatPanel.js";
+import { createTooltip } from "./hover.js";
+import { sendInformaticToast } from "./toast.js";
+import { buildAvatar, createSelector, stampModelAvatar, stampUserAvatar } from "./generative.js";
+import { authorColorSeed, colorFromSeed } from "./cursor.js";
+// Re-export so apps can flatten serialized token markers (e.g. before sending
+// history to the LLM) without reaching into the tokenized-input module.
+export { toPlainText } from "./tokenized.js";
+// ---- Message builders ----
+function buildThinkingIndicator() {
+    const indicator = document.createElement('div');
+    indicator.className = 'chat-thinking';
+    const icon = document.createElement('span');
+    icon.className = 'material-symbols-outlined';
+    icon.textContent = 'neurology';
+    indicator.appendChild(icon);
+    const label = document.createElement('span');
+    label.textContent = 'Thinking';
+    indicator.appendChild(label);
+    return indicator;
+}
+export function toolChip(call, icon, label) {
+    const chip = document.createElement('div');
+    chip.className = 'chat-tool-chip';
+    if (call.status)
+        chip.classList.add(`chat-tool-chip-${call.status}`);
+    const iconEl = document.createElement('span');
+    iconEl.className = 'material-symbols-outlined';
+    iconEl.textContent = icon;
+    chip.appendChild(iconEl);
+    const labelEl = document.createElement('span');
+    labelEl.className = 'chat-tool-chip-label';
+    labelEl.textContent = label;
+    chip.appendChild(labelEl);
+    return chip;
+}
+function webResults(call, query) {
+    const root = document.createElement('details');
+    root.className = 'chat-tool-web';
+    const summary = document.createElement('summary');
+    summary.appendChild(toolChip(call, 'travel_explore', `Searched the web for ${query}`));
+    root.appendChild(summary);
+    const list = document.createElement('div');
+    list.className = 'chat-tool-web-sources';
+    for (const result of JSON.parse(String(call.result))) {
+        const link = document.createElement('a');
+        link.className = 'chat-tool-web-source';
+        link.href = result.url;
+        link.target = '_blank';
+        link.rel = 'noopener';
+        const title = document.createElement('span');
+        title.className = 'chat-tool-web-source-title';
+        title.textContent = result.title || result.url;
+        const host = document.createElement('span');
+        host.className = 'chat-tool-web-source-host';
+        host.textContent = new URL(result.url).hostname;
+        link.append(title, host);
+        list.appendChild(link);
+    }
+    root.appendChild(list);
+    return root;
+}
+function renderTool(call) {
+    const { name, args, status } = call;
+    if (name === 'observe_memory') {
+        const observation = String(args.observation ?? '').trim().slice(0, 72);
+        const label = status === 'success'
+            ? `Saved memory, ${observation}`
+            : status === 'error'
+                ? `Memory was not saved, ${observation}`
+                : `Remembering ${observation}`;
+        return toolChip(call, 'psychology', label);
+    }
+    if (name === 'query_web') {
+        const query = String(args.query ?? '').trim();
+        if (status === 'success')
+            return webResults(call, query);
+        return toolChip(call, 'travel_explore', status === 'error' ? 'Web search failed' : `Searching the web for ${query}`);
+    }
+    const chat = chatToolLabel(call);
+    if (chat) {
+        const output = name === 'exec' && status !== 'running' ? execOutput(call.result) : status === 'error' ? String(call.result ?? '').replace(/^Error:\s*/, '') : '';
+        if (!output)
+            return toolChip(call, chat.icon, chat.label);
+        const root = document.createElement('details');
+        root.className = 'chat-tool-web chat-tool-output';
+        const summary = document.createElement('summary');
+        summary.appendChild(toolChip(call, chat.icon, chat.label));
+        const pre = document.createElement('pre');
+        pre.textContent = output.length > 20000 ? `${output.slice(0, 20000)}\n\u2026` : output;
+        root.append(summary, pre);
+        return root;
+    }
+    return toolChip(call, 'build', status === 'error' ? `${name} failed` : name);
+}
+function renderToolCallElement(call, override) {
+    return override?.(call) ?? renderTool(call);
+}
+function buildFileElement(file, iconMap, cards) {
+    const code = typeof file.part?.accessCode === 'string' ? file.part.accessCode : '';
+    const preview = code && cards?.authorization
+        ? {
+            key: file.part.ref || code,
+            file: Fauna.Drive.fromAccessCode(cards.authorization, code, { name: file.name, contentType: file.mime, contentLength: Number(file.part.contentLength ?? 0) }),
+        }
+        : undefined;
+    const open = cards?.open;
+    const card = buildAttachmentCard(file.name, file.mime, open && file.part ? () => open(file) : undefined, iconMap, preview);
+    if (file.part?.ref)
+        card.dataset.ref = file.part.ref;
+    return card;
+}
+// A read-only token chip for rendered messages — mirrors the composer's
+// .tokenized-token visually but without the editable/remove affordances.
+function buildMessageToken(token, opts) {
+    const span = document.createElement('span');
+    span.className = 'chat-message-token';
+    if (opts?.onClick) {
+        span.style.cursor = 'pointer';
+        span.addEventListener('click', (e) => {
+            e.stopPropagation();
+            opts.onClick?.(token);
+        });
+    }
+    if (token.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'material-symbols-outlined chat-message-token-icon';
+        icon.textContent = token.icon;
+        if (opts?.color)
+            icon.style.color = opts.color;
+        span.appendChild(icon);
+    }
+    const label = document.createElement('span');
+    label.className = 'chat-message-token-label';
+    label.textContent = token.label || token.value;
+    span.appendChild(label);
+    return span;
+}
+// Render a (possibly token-bearing) message string into `textEl`. When the
+// string carries no token markers we keep the original markdown rendering, so
+// model output and plain user text are unchanged. When tokens are present we
+// render text segments as plain text and hydrate each marker into a chip.
+function renderRichText(textEl, text, opts) {
+    if (!hasTokens(text)) {
+        textEl.innerHTML = marked.parse(text);
+        return;
+    }
+    for (const part of parseRichText(text)) {
+        if (part.kind === 'token') {
+            textEl.appendChild(buildMessageToken(part.token, {
+                onClick: opts?.onTokenClick,
+                color: opts?.tokenColor,
+            }));
+            continue;
+        }
+        const lines = part.text.split('\n');
+        for (let i = 0; i < lines.length; i++) {
+            if (lines[i].length > 0)
+                textEl.appendChild(document.createTextNode(lines[i]));
+            if (i < lines.length - 1)
+                textEl.appendChild(document.createElement('br'));
+        }
+    }
+}
+function getOrCreateActions(el) {
+    let actions = el.querySelector('.chat-message-actions');
+    if (!actions) {
+        actions = document.createElement('div');
+        actions.className = 'chat-message-actions';
+        el.appendChild(actions);
+    }
+    return actions;
+}
+function formatMessageTime(at) {
+    const d = at instanceof Date ? at : new Date(at);
+    const day = d.getDate();
+    const teen = day % 100;
+    const ones = day % 10;
+    const ord = teen >= 11 && teen <= 13 ? "th" : ones === 1 ? "st" : ones === 2 ? "nd" : ones === 3 ? "rd" : "th";
+    const month = d.toLocaleString(undefined, { month: "long" });
+    const year = d.getFullYear();
+    const time = d.toLocaleString(undefined, { hour: "numeric", minute: "2-digit", hour12: true });
+    return `${month} ${day}${ord}, ${year} ${time}`;
+}
+function addCopyButton(el, getText, createdAt) {
+    const actions = getOrCreateActions(el);
+    if (!actions.querySelector(".chat-message-time")) {
+        const time = document.createElement("span");
+        time.className = "chat-message-time";
+        time.textContent = formatMessageTime(createdAt);
+        actions.appendChild(time);
+    }
+    const copyBtn = document.createElement('span');
+    copyBtn.className = 'material-symbols-outlined';
+    copyBtn.textContent = 'content_copy';
+    copyBtn.onclick = (e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(getText());
+        copyBtn.textContent = 'check';
+        setTimeout(() => { copyBtn.textContent = 'content_copy'; }, 1500);
+    };
+    actions.appendChild(copyBtn);
+}
+function chatMode(mode) {
+    return mode === 'thread' ? 'thread' : 'assistant';
+}
+function isIncomingAuthor(message, mode = 'assistant', selfEmail) {
+    if (message.role !== 'user')
+        return false;
+    if (mode !== 'thread')
+        return false;
+    const email = message.author?.id;
+    if (!email || !selfEmail)
+        return false;
+    return email !== selfEmail;
+}
+function applyUserBubbleLayout(el, incoming, profile) {
+    el.querySelector('.chat-message-model-avatar')?.remove();
+    el.querySelector(':scope > .chat-message-avatar:not(.chat-message-model-avatar)')?.remove();
+    el.classList.remove('chat-message-user', 'chat-message-model', 'chat-message-authored', 'chat-message-model-authored');
+    if (incoming) {
+        el.classList.add('chat-message-model');
+        stampIncomingAvatar(el, profile);
+    }
+    else {
+        el.classList.add('chat-message-user');
+        stampUserAvatar(el, profile);
+    }
+}
+function lockedModels(models) {
+    if (models === undefined)
+        return undefined;
+    return Array.isArray(models) ? models : [models];
+}
+function isModelLocked(models) {
+    const list = lockedModels(models);
+    return Boolean(list && list.length === 1);
+}
+/** A people only room takes the layout ticket chats use once staff join:
+ *  threaded bubbles and no model picker. */
+function roomLayout(options) {
+    if (!options.room?.room.isHuman())
+        return options;
+    return { ...options, mode: 'thread', models: Fauna.Parrot.Generative.Text.AUTO };
+}
+const QUICK_REACTIONS = ['👍', '❤️', '😂', '🎉', '😮', '👎'];
+function reactionOf(message) {
+    const part = message.parts?.[0];
+    return part?.type === 'REACTION' ? part : undefined;
+}
+function stampIncomingAvatar(el, profile) {
+    el.querySelector('.chat-message-model-avatar')?.remove();
+    el.classList.add('chat-message-model-authored');
+    const avatar = buildAvatar(profile);
+    avatar.classList.add('chat-message-model-avatar');
+    el.appendChild(avatar);
+}
+function appendTextBlock(el, text, message, onTokenClick) {
+    const textEl = document.createElement('div');
+    textEl.className = 'chat-message-text';
+    const authorSeed = authorColorSeed(message.author);
+    renderRichText(textEl, text, {
+        onTokenClick,
+        tokenColor: authorSeed ? colorFromSeed(authorSeed) : undefined,
+    });
+    el.appendChild(textEl);
+}
+async function buildMessageElement(message, iconMap, modelIcons, renderToolCall, mode, selfUserId, onTokenClick, fileCards) {
+    const incoming = isIncomingAuthor(message, chatMode(mode), selfUserId);
+    const el = document.createElement('div');
+    el.className = (message.role === 'user' && !incoming) ? 'chat-message-user' : 'chat-message-model';
+    if (message.role === 'user' && message.author?.id)
+        el.dataset.author = message.author.id;
+    if (message.sequence?.length) {
+        for (const block of message.sequence) {
+            if (block.type === 'text')
+                appendTextBlock(el, block.text, message, onTokenClick);
+            else if (block.type === 'tool')
+                el.appendChild(renderToolCallElement(block.call, renderToolCall));
+            else
+                el.appendChild(buildFileElement(block, iconMap, fileCards));
+        }
+    }
+    else {
+        if (message.text)
+            appendTextBlock(el, message.text, message, onTokenClick);
+        if (message.toolCalls) {
+            for (const call of message.toolCalls) {
+                el.appendChild(renderToolCallElement(call, renderToolCall));
+            }
+        }
+        if (message.files) {
+            for (const file of message.files) {
+                el.appendChild(buildFileElement(file, iconMap, fileCards));
+            }
+        }
+    }
+    if (message.text) {
+        addCopyButton(el, () => toPlainText(message.text), message.createdAt);
+    }
+    if (incoming && message.author) {
+        stampIncomingAvatar(el, message.author.profile);
+    }
+    else if (message.role === 'user' && message.author) {
+        stampUserAvatar(el, message.author.profile);
+    }
+    if (message.role === 'model') {
+        stampModelAvatar(el, message.model, modelIcons);
+    }
+    return el;
+}
+// ---- Streaming ----
+function nearBottom(messagesEl) {
+    return messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < 80;
+}
+/** Keeps the newest message in view when the reader was at the bottom. Pass
+ *  `stick` measured before inserting, or a tall message reads as scrolled away. */
+function autoScroll(messagesEl, stick = nearBottom(messagesEl)) {
+    if (stick) {
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+}
+function createStreamRenderer(modelEl, messagesEl, renderToolCall) {
+    // Text is rendered in *segments* — each run of text between tool calls
+    // gets its own .chat-message-text div. This way tool chips persist in the
+    // DOM between segments, and the visual paragraph break between pre- and
+    // post-tool-call text comes for free from the segment divs being separate
+    // block-level elements.
+    let currentBuffer = '';
+    let currentTextEl = null;
+    let dotsCleared = false;
+    let shown = 0; // chars of currentBuffer currently revealed (typewriter)
+    let rafId = null;
+    const toolCalls = [];
+    const toolElements = new Map();
+    const completedSegments = [];
+    function clearDots() {
+        if (!dotsCleared) {
+            // Keep a stamped model avatar (left badge) across the thinking→stream swap.
+            for (const child of [...modelEl.childNodes]) {
+                if (child.classList?.contains('chat-message-model-avatar'))
+                    continue;
+                child.remove();
+            }
+            dotsCleared = true;
+        }
+    }
+    function ensureTextEl() {
+        if (!currentTextEl) {
+            currentTextEl = document.createElement('div');
+            currentTextEl.className = 'chat-message-text';
+            modelEl.appendChild(currentTextEl);
+        }
+    }
+    // Smoothly reveal buffered text a little each frame so bursty network deltas
+    // flow in like a typewriter instead of landing in blocks. The step scales
+    // with the backlog: big chunks drain quickly while a steady stream stays
+    // just behind the incoming text.
+    function renderShown() {
+        if (currentTextEl)
+            currentTextEl.innerHTML = marked.parse(currentBuffer.slice(0, shown));
+    }
+    function stopReveal() {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    }
+    function tick() {
+        rafId = null;
+        if (!modelEl.isConnected)
+            return; // message element was removed — stop.
+        const remaining = currentBuffer.length - shown;
+        if (remaining > 0) {
+            shown = Math.min(currentBuffer.length, shown + Math.max(2, Math.ceil(remaining / 4)));
+            renderShown();
+            autoScroll(messagesEl);
+        }
+        if (shown < currentBuffer.length)
+            rafId = requestAnimationFrame(tick);
+    }
+    return {
+        feedText(delta) {
+            currentBuffer += delta;
+            clearDots();
+            ensureTextEl();
+            if (rafId === null)
+                rafId = requestAnimationFrame(tick);
+        },
+        feedToolCall(id, name, args) {
+            this.syncToolCalls([{ id, name, args, status: 'running' }]);
+        },
+        feedToolProgress(name, progress) {
+            const stored = [...toolCalls].reverse().find((item) => item.name === name && item.status === 'running');
+            if (!stored)
+                return;
+            this.syncToolCalls([{ ...stored, progress }]);
+        },
+        syncToolCalls(calls) {
+            for (const call of calls) {
+                const id = call.id ?? `${call.name}:${JSON.stringify(call.args)}`;
+                const view = { ...call, id };
+                const existing = toolElements.get(id);
+                if (existing) {
+                    // Room deltas resend every tool on each text chunk; re-rendering
+                    // unchanged calls would collapse open sources and remount charts.
+                    const stored = toolCalls.find((item) => item.id === id);
+                    const changed = stored.status !== call.status
+                        || stored.result !== call.result
+                        || stored.session?.code !== call.session?.code
+                        || (call.status === 'running' && stored.progress !== call.progress);
+                    if (!changed)
+                        continue;
+                    Object.assign(stored, call, { id });
+                    if (call.status === 'error')
+                        console.error('[chat] tool failed', call.name, call.result ?? '');
+                    const el = renderToolCallElement(view, renderToolCall);
+                    existing.replaceWith(el);
+                    toolElements.set(id, el);
+                    continue;
+                }
+                stopReveal();
+                clearDots();
+                if (currentBuffer) {
+                    shown = currentBuffer.length;
+                    renderShown();
+                    completedSegments.push(currentBuffer);
+                    currentBuffer = '';
+                    currentTextEl = null;
+                    shown = 0;
+                }
+                const stored = { ...call, id };
+                toolCalls.push(stored);
+                const chip = renderToolCallElement(view, renderToolCall);
+                toolElements.set(id, chip);
+                modelEl.appendChild(chip);
+                gsap.from(chip, { opacity: 0, x: -10, duration: 0.3, ease: 'power2.out' });
+            }
+            autoScroll(messagesEl);
+        },
+        feedError(message) {
+            stopReveal();
+            clearDots();
+            ensureTextEl();
+            currentBuffer = message;
+            shown = message.length;
+            if (currentTextEl)
+                currentTextEl.textContent = message;
+        },
+        async finalize() {
+            stopReveal();
+            // Final markdown re-render of the trailing segment + lock it in.
+            if (currentBuffer) {
+                completedSegments.push(currentBuffer);
+                if (currentTextEl) {
+                    currentTextEl.innerHTML = await marked.parse(currentBuffer);
+                }
+            }
+            autoScroll(messagesEl);
+            return {
+                role: 'model',
+                text: completedSegments.join('\n\n'),
+                createdAt: new Date(),
+                toolCalls: toolCalls.length > 0 ? toolCalls : undefined
+            };
+        },
+        getText() {
+            return [...completedSegments, currentBuffer].filter(Boolean).join('\n\n');
+        },
+        /** Prefer a longer persisted body over a short live buffer. */
+        syncText(full) {
+            if (!full)
+                return;
+            const live = this.getText();
+            if (full.length <= live.length)
+                return;
+            stopReveal();
+            clearDots();
+            const prefix = completedSegments.join('\n');
+            let trailing = full;
+            if (prefix && (full.startsWith(prefix) || full.startsWith(completedSegments.join('\n\n')))) {
+                trailing = full.slice(prefix.length).replace(/^\n+/, '');
+            }
+            else if (completedSegments.length === 0) {
+                trailing = full;
+            }
+            currentBuffer = trailing;
+            shown = trailing.length;
+            ensureTextEl();
+            if (currentTextEl)
+                currentTextEl.innerHTML = marked.parse(trailing);
+        },
+    };
+}
+function chatAuthorization(options) {
+    return options.authorization ?? options.room?.room.getAuthorization();
+}
+function isSystemRoomMessage(message) {
+    return message.role === Fauna.Parrot.Generative.Role.SYSTEM || message.role === 'SYSTEM';
+}
+class ChatEngine {
+    get fileCards() {
+        return { open: this.openFile, authorization: chatAuthorization(this.options) };
+    }
+    /** File cards for a streamed reply's attached files, each once. */
+    paintStreamFiles(el, files) {
+        const room = this.options.room?.room;
+        if (!room)
+            return;
+        let added = false;
+        for (const attachment of files) {
+            if (!attachment.ref || el.querySelector(`[data-ref="${CSS.escape(attachment.ref)}"]`))
+                continue;
+            const part = { type: 'FILE', ref: attachment.ref, name: attachment.file.name, contentType: attachment.file.contentType, accessCode: attachment.file.authorization.accessCode };
+            const card = buildFileElement({ mime: attachment.file.contentType, name: attachment.file.name, part }, this.options.acceptedTypes, this.fileCards);
+            const actions = el.querySelector(':scope > .chat-message-actions');
+            if (actions)
+                el.insertBefore(card, actions);
+            else
+                el.appendChild(card);
+            added = true;
+        }
+        if (added) {
+            this.refs.panel?.added();
+            autoScroll(this.refs.messagesEl);
+        }
+    }
+    constructor(refs, options) {
+        Object.defineProperty(this, "refs", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: refs
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        Object.defineProperty(this, "history", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "queue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "generating", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "generation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "destroyed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "runningParts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        /** Object URLs for the images waiting to be sent, freed once they're sent or removed. */
+        Object.defineProperty(this, "localPreviews", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "activeController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "roomToolAbort", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new AbortController()
+        });
+        Object.defineProperty(this, "steerTarget", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "stopRequested", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "currentModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentReasoning", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** Catalog icons keyed by text model id — used for MODEL bubble avatars. */
+        Object.defineProperty(this, "modelIcons", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "modelDropdown", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "tokenizedInput", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "inputWatchers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+        Object.defineProperty(this, "roomTypingHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "roomCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "roomThinkingEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Live streaming state for the room's model reply (server-owned turn).
+        Object.defineProperty(this, "roomStream", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Originator-only tool progress (e.g. poll 0/n), keyed by tool name. The
+        // Parrot SDK does not carry chip/token UI — chat maps this onto chips.
+        Object.defineProperty(this, "toolProgress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        // True while the server is streaming/thinking a room reply. Sends made now
+        // are buffered by the server into the shared queue (surfaced via onQueue),
+        // not the transcript. Cleared when the reply lands / thinking ends.
+        Object.defineProperty(this, "roomThinking", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** The person said no to making a repository for computer use. Never saved, so reopening the chat asks again. */
+        Object.defineProperty(this, "declinedComputer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "repositoryControl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Queue chips for the shared server-side queue (buffered sends while the
+        // model replies), keyed by durable queue-row id, plus the "Steer all" header.
+        // Driven entirely by the room's onQueue hook — never by the local send path.
+        Object.defineProperty(this, "roomQueue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "roomSteerAllEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Reactions folded onto their target message: target position → emoji →
+        // reactor email → the latest state, by the reaction message's position.
+        Object.defineProperty(this, "reactions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        /** Open a file from a message: a tab in the side panel when there is one, else a popup. */
+        Object.defineProperty(this, "openFile", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (file) => {
+                const room = this.options.room?.room;
+                if (!room || !file.part)
+                    return;
+                const attachment = attachmentOf(room, file.part);
+                if (this.refs.panel)
+                    this.refs.panel.open(attachment);
+                else
+                    openViewModal(attachment);
+            }
+        });
+        // ── Send button ──
+        Object.defineProperty(this, "sendTooltip", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        const locked = lockedModels(options.models);
+        const start = options.model && (!locked || locked.includes(options.model)) ? options.model : Fauna.Parrot.Generative.Text.AUTO;
+        this.currentModel = locked?.length === 1 ? locked[0] : start;
+        this.currentReasoning = this.currentModel === start ? options.reasoning : undefined;
+        this.tokenizedInput = createTokenizedInput(refs.rowEl, {
+            placeholder: options.placeholder ?? 'Type a message...',
+            triggers: options.triggers,
+            multiline: false,
+            onInput: (parts) => {
+                this.roomTypingHandler?.();
+                for (const handler of this.inputWatchers)
+                    handler(parts);
+            },
+            onSubmit: () => {
+                this.doSend(this.tokenizedInput.getText(), this.tokenizedInput.getParts(), this.runningParts.length > 0 ? [...this.runningParts] : undefined);
+                this.tokenizedInput.clear();
+                this.clearParts();
+            }
+        });
+        this.wireModelSelect();
+        this.syncModelSelectVisibility();
+        this.loadModelIcons();
+        this.wireAttach();
+        this.wireSend();
+        if (options.initialHistory) {
+            const gen = this.generation;
+            for (const message of options.initialHistory) {
+                this.history.push(message);
+                buildMessageElement(message, options.acceptedTypes, this.modelIcons, options.renderToolCall, options.mode, options.room?.self.profile.email, options.onTokenClick, this.fileCards).then((el) => {
+                    if (this.destroyed || this.generation !== gen)
+                        return;
+                    refs.messagesEl.appendChild(el);
+                });
+            }
+        }
+        if (options.room) {
+            this.setupRoomMode(options.room.room, options.room.self);
+        }
+    }
+    // ── Model selector (custom dropdown with provider icons) ──
+    syncModelSelectVisibility() {
+        const el = this.refs.modelSelect;
+        if (!el)
+            return;
+        el.style.display = isModelLocked(this.options.models) ? 'none' : '';
+    }
+    wireModelSelect() {
+        const container = this.refs.modelSelect;
+        if (isModelLocked(this.options.models) || !container || this.modelDropdown)
+            return;
+        this.modelDropdown = createSelector(container, {
+            value: this.currentModel,
+            reasoning: this.currentReasoning,
+            onChange: (model) => {
+                this.currentModel = model;
+                this.options.onModelChange?.(this.currentModel);
+            },
+            onReasoningChange: (reasoning) => {
+                this.currentReasoning = reasoning;
+                this.options.onReasoningChange?.(reasoning);
+            },
+        });
+        Fauna.Parrot.Routing.getAll()
+            .then((catalog) => {
+            const textRows = catalog.text ?? [];
+            this.rememberModelIcons(textRows);
+            const allowed = lockedModels(this.options.models);
+            const textModels = (allowed
+                ? textRows.filter((l) => allowed.includes(l.model))
+                : textRows).map((l) => ({ value: l.model, name: l.name, icon: l.icon, reasoning: l.reasoning }));
+            this.modelDropdown?.setOptions(textModels);
+            this.modelDropdown?.setValue(this.currentModel);
+            this.modelDropdown?.setReasoning(this.currentReasoning);
+        })
+            .catch((err) => console.error('[chat] failed to load models:', err));
+    }
+    /** Ensure catalog icons are available even when the model picker is fixed. */
+    loadModelIcons() {
+        if (this.refs.modelSelect && !isModelLocked(this.options.models))
+            return;
+        Fauna.Parrot.Routing.getAll()
+            .then(({ text }) => this.rememberModelIcons(text ?? []))
+            .catch((err) => console.error('[chat] failed to load model icons:', err));
+    }
+    rememberModelIcons(llms) {
+        const next = {};
+        for (const l of llms)
+            next[l.model] = l.icon;
+        this.modelIcons = next;
+        // Re-stamp any already-rendered MODEL bubbles that were waiting on icons.
+        for (const el of this.refs.messagesEl.querySelectorAll('.chat-message-model')) {
+            const model = el.dataset.model || undefined;
+            if (model && this.modelIcons[model])
+                stampModelAvatar(el, model, this.modelIcons);
+        }
+    }
+    // ── Attach button ──
+    wireAttach() {
+        const attachBtn = this.refs.attachBtn;
+        if (!attachBtn)
+            return;
+        attachBtn.onmouseenter = () => { gsap.to(attachBtn, { duration: 0.3, rotate: 180, color: 'var(--chat-text, #1a1a1a)', ease: 'power2.inOut' }); };
+        attachBtn.onmouseleave = () => { gsap.to(attachBtn, { duration: 0.3, rotate: 0, color: 'var(--chat-accent, #888)', ease: 'power2.inOut' }); };
+        attachBtn.onclick = () => {
+            if (!this.driveAuth()) {
+                this.options.callbacks?.onError?.('Guests cannot attach files.');
+                return;
+            }
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.style.display = 'none';
+            const accepted = this.options.acceptedTypes ?? {};
+            if (Object.keys(accepted).length > 0) {
+                // Include extension globs so HEIC picks work when browsers omit MIME.
+                const accept = [
+                    ...Object.keys(accepted),
+                    '.heic', '.heif',
+                ];
+                input.accept = [...new Set(accept)].join(',');
+            }
+            input.addEventListener('change', () => {
+                if (!input.files)
+                    return;
+                for (const file of input.files) {
+                    const mime = file.type
+                        || mimeFromFileName(file.name)
+                        || '';
+                    if (Object.keys(accepted).length > 0 && !accepted[mime])
+                        continue;
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const buffer = e.target?.result;
+                        void this.attachPart(mime, file.name, new Uint8Array(buffer));
+                    };
+                    reader.readAsArrayBuffer(file);
+                }
+            });
+            document.body.appendChild(input);
+            input.click();
+            input.remove();
+        };
+    }
+    wireSend() {
+        const sendBtn = this.refs.sendBtn;
+        this.sendTooltip = createTooltip(sendBtn, 'Send');
+        // Rests pointing right (arrow_forward), tilts up on hover.
+        sendBtn.onmouseenter = () => { gsap.to(sendBtn, { duration: 0.3, rotate: (this.generating || this.roomThinking) ? 0 : -90, color: 'var(--chat-text, #1a1a1a)', ease: 'power2.inOut' }); };
+        sendBtn.onmouseleave = () => { gsap.to(sendBtn, { duration: 0.3, rotate: 0, color: 'var(--chat-accent, #888)', ease: 'power2.inOut' }); };
+        sendBtn.onclick = () => {
+            // While a reply is running, the button is a stop control. In room mode
+            // the model runs server-side, so "stop" means steer the room (cancel
+            // the in-flight reply); in solo mode it aborts the local stream.
+            if (this.options.room) {
+                // Stop control while a reply runs: queue present → steer-all
+                // (flush + re-answer). Empty queue → cancel and stay stopped.
+                if (this.roomThinking) {
+                    if (this.roomQueue.size > 0)
+                        this.steerAllRoom();
+                    else
+                        this.stopRoom();
+                    return;
+                }
+            }
+            else if (this.generating) {
+                this.stopGeneration();
+                return;
+            }
+            this.doSend(this.tokenizedInput.getText(), this.tokenizedInput.getParts(), this.runningParts.length > 0 ? [...this.runningParts] : undefined);
+            this.tokenizedInput.clear();
+            this.clearParts();
+        };
+    }
+    setComposerGenerating(on) {
+        const sendBtn = this.refs.sendBtn;
+        sendBtn.textContent = on ? 'stop' : 'arrow_forward';
+        this.sendTooltip?.setText(on ? 'Stop generating' : 'Send');
+        sendBtn.classList.toggle('chat-stop', on);
+    }
+    stopGeneration() {
+        this.steerTarget = null;
+        this.stopRequested = true;
+        this.activeController?.abort();
+    }
+    driveAuth() {
+        return chatAuthorization(this.options);
+    }
+    async uploadBytes(mime, name, data) {
+        const auth = this.driveAuth();
+        if (!auth) {
+            this.options.callbacks?.onError?.('Guests cannot attach files.');
+            return undefined;
+        }
+        const dest = `tmp/${crypto.randomUUID()}-${name}`;
+        const file = Fauna.Drive.fromBytes(auth, dest, mime, data);
+        try {
+            await file.upload();
+            return file;
+        }
+        catch (err) {
+            this.options.callbacks?.onError?.(err?.message ?? 'Could not upload the file.');
+            return undefined;
+        }
+    }
+    // ── Attachment parts ──
+    async attachPart(mime, name, data) {
+        if (this.runningParts.some((p) => p.name === name || p.name.endsWith(`-${name}`)))
+            return;
+        const file = await this.uploadBytes(mime, name, data);
+        if (!file)
+            return;
+        if (this.runningParts.length === 0) {
+            gsap.to(this.refs.partsEl, { duration: 0.5, height: 120, opacity: 1, ease: 'power2.inOut' });
+        }
+        const partEl = document.createElement('div');
+        partEl.className = 'chat-input-part';
+        // Images show from the bytes being sent; browsers can't draw HEIC, so it waits for the server's preview like the rest.
+        const local = mime.startsWith('image/') && mime !== 'image/heic' && mime !== 'image/heif'
+            ? URL.createObjectURL(new Blob([new Uint8Array(data)], { type: mime }))
+            : null;
+        if (local)
+            this.localPreviews.push(local);
+        const deleteBtn = document.createElement('span');
+        deleteBtn.className = 'material-symbols-outlined chat-input-part-delete';
+        deleteBtn.textContent = 'close';
+        partEl.appendChild(deleteBtn);
+        deleteBtn.onclick = async () => {
+            this.runningParts = this.runningParts.filter((p) => p !== file);
+            if (file.online) {
+                try {
+                    await file.remove();
+                }
+                catch { /* already gone */ }
+            }
+            await new Promise((resolve) => {
+                gsap.to(partEl, { duration: 0.5, opacity: 0, ease: 'power2.inOut', onComplete: resolve });
+            });
+            if (local) {
+                URL.revokeObjectURL(local);
+                this.localPreviews = this.localPreviews.filter((url) => url !== local);
+            }
+            partEl.remove();
+            if (this.runningParts.length === 0)
+                this.clearParts();
+        };
+        const thumb = document.createElement('span');
+        thumb.className = 'chat-file-thumb chat-input-part-thumb';
+        const previewIcon = document.createElement('span');
+        previewIcon.className = 'material-symbols-outlined chat-input-part-preview';
+        previewIcon.textContent = (this.options.acceptedTypes ?? {})[mime] ?? 'description';
+        thumb.appendChild(previewIcon);
+        partEl.appendChild(thumb);
+        if (local)
+            paintPreview(thumb, local);
+        else
+            showPreview(thumb, { key: `upload:${file.authorization.path ?? name}`, file });
+        const labelEl = document.createElement('a');
+        labelEl.className = 'chat-input-part-label';
+        labelEl.textContent = name;
+        partEl.appendChild(labelEl);
+        this.refs.partsEl.appendChild(partEl);
+        gsap.from(partEl, { duration: 0.5, opacity: 0, ease: 'power2.inOut' });
+        this.runningParts.push(file);
+    }
+    clearParts() {
+        this.runningParts = [];
+        for (const url of this.localPreviews.splice(0))
+            URL.revokeObjectURL(url);
+        while (this.refs.partsEl.firstChild)
+            this.refs.partsEl.firstChild.remove();
+        gsap.to(this.refs.partsEl, { duration: 0.5, height: 0, opacity: 0, ease: 'power2.inOut' });
+    }
+    // ── Send / Queue ──
+    renderUserMessage(message) {
+        const incoming = isIncomingAuthor(message, chatMode(this.options.mode), this.options.room?.self.profile.email);
+        const userEl = document.createElement('div');
+        userEl.className = incoming ? 'chat-message-model' : 'chat-message-user';
+        if (message.role === 'user' && message.author?.id)
+            userEl.dataset.author = message.author.id;
+        if (message.text) {
+            const textEl = document.createElement('div');
+            textEl.className = 'chat-message-text';
+            const authorSeed = authorColorSeed(message.author);
+            renderRichText(textEl, message.text, {
+                onTokenClick: this.options.onTokenClick,
+                tokenColor: authorSeed ? colorFromSeed(authorSeed) : undefined,
+            });
+            userEl.appendChild(textEl);
+        }
+        if (message.files) {
+            for (const file of message.files) {
+                userEl.appendChild(buildFileElement(file, this.options.acceptedTypes, this.fileCards));
+            }
+        }
+        if (message.text) {
+            addCopyButton(userEl, () => toPlainText(message.text), message.createdAt);
+        }
+        if (incoming && message.author) {
+            stampIncomingAvatar(userEl, message.author.profile);
+        }
+        else if (message.author) {
+            stampUserAvatar(userEl, message.author.profile);
+        }
+        return userEl;
+    }
+    doSend(text, parts, files) {
+        if (!text.trim() && (!files || files.length === 0))
+            return;
+        // Room mode: the server owns turn-taking AND append-vs-queue. Just send;
+        // the message either lands in the transcript (fans back as chat-message)
+        // or is buffered into the shared queue (fans back as chat-queue-add). We
+        // never render locally or add a chip here — the room's events are the sole
+        // source of truth, so ordering + the queue stay consistent across members.
+        if (this.options.room) {
+            const roomParts = [];
+            if (text.trim())
+                roomParts.push({ type: 'TEXT', text: text.trim() });
+            for (const file of files ?? [])
+                roomParts.push({ type: 'FILE', file });
+            this.options.room.self.setStatus('');
+            if (this.options.room.room.isHuman()) {
+                void this.options.room.room.sendMessage(Fauna.Parrot.Generative.Role.USER, roomParts)
+                    .catch((err) => { this.options.callbacks?.onError?.(err.message); });
+                return;
+            }
+            const toolsOpt = this.options.room.tools;
+            const toolSchemas = toolsOpt && !Array.isArray(toolsOpt)
+                ? toolsOpt.function
+                : [
+                    ...(toolsOpt ?? []).map((t) => t.function),
+                    ...(this.offersComputer() ? [Fauna.Termite.OS.desktopTool(null)] : []),
+                ];
+            const sent = Array.isArray(toolSchemas) && toolSchemas.length === 0 ? undefined : toolSchemas;
+            void this.options.room.room.sendMessage(Fauna.Parrot.Generative.Role.USER, roomParts, {
+                model: this.currentModel,
+                reasoning: this.currentReasoning,
+                ...(sent !== undefined ? { tools: sent } : {}),
+            })
+                .catch((err) => { this.options.callbacks?.onError?.(err.message); });
+            return;
+        }
+        const userMessage = {
+            role: 'user',
+            text: text.trim(),
+            createdAt: new Date(),
+            parts: parts,
+            files: files?.map((f) => ({ mime: f.contentType, name: f.name }))
+        };
+        if (this.generating) {
+            this.enqueueMessage(text.trim(), parts, files);
+            return;
+        }
+        const userEl = this.renderUserMessage(userMessage);
+        this.refs.messagesEl.appendChild(userEl);
+        gsap.from(userEl, { duration: 0.5, y: 100, opacity: 0, ease: 'power2.inOut' });
+        this.history.push(userMessage);
+        this.options.callbacks?.onMessage?.(userMessage);
+        this.processGeneration(files);
+    }
+    enqueueMessage(text, parts, files) {
+        const chip = document.createElement('div');
+        chip.className = 'chat-queue-item';
+        const icon = document.createElement('span');
+        icon.className = 'material-symbols-outlined chat-queue-item-icon';
+        icon.textContent = 'schedule';
+        chip.appendChild(icon);
+        const label = document.createElement('div');
+        label.className = 'chat-queue-item-label';
+        const preview = toPlainText(text).trim();
+        const fileNote = files && files.length > 0 ? `${files.length} file${files.length > 1 ? 's' : ''}` : '';
+        label.textContent = preview || fileNote || 'Attachment';
+        if (preview && fileNote)
+            label.title = `${preview} · ${fileNote}`;
+        chip.appendChild(label);
+        const actions = document.createElement('div');
+        actions.className = 'chat-queue-item-actions';
+        const steerBtn = document.createElement('span');
+        steerBtn.className = 'material-symbols-outlined chat-queue-steer';
+        steerBtn.textContent = 'bolt';
+        createTooltip(steerBtn, 'Send now — stops the current response and runs this next');
+        steerBtn.onclick = (e) => {
+            e.stopPropagation();
+            if (!this.queue.some((q) => q.element === chip))
+                return;
+            this.steerTarget = chip;
+            if (this.generating)
+                this.activeController?.abort();
+        };
+        actions.appendChild(steerBtn);
+        const removeBtn = document.createElement('span');
+        removeBtn.className = 'material-symbols-outlined chat-queue-remove';
+        removeBtn.textContent = 'close';
+        createTooltip(removeBtn, 'Remove from queue');
+        removeBtn.onclick = (e) => {
+            e.stopPropagation();
+            const idx = this.queue.findIndex((q) => q.element === chip);
+            if (idx >= 0) {
+                if (this.steerTarget === chip)
+                    this.steerTarget = null;
+                this.queue.splice(idx, 1);
+                gsap.to(chip, {
+                    duration: 0.25, opacity: 0, height: 0, marginBottom: 0, ease: 'power2.in',
+                    onComplete: () => { chip.remove(); }
+                });
+                this.options.callbacks?.onQueueChange?.(this.queue.length);
+            }
+        };
+        actions.appendChild(removeBtn);
+        chip.appendChild(actions);
+        this.refs.queueEl.appendChild(chip);
+        gsap.from(chip, { duration: 0.3, opacity: 0, y: 8, ease: 'power2.out' });
+        this.queue.push({ text, parts, files, element: chip });
+        this.options.callbacks?.onQueueChange?.(this.queue.length);
+    }
+    runQueued(index) {
+        const next = this.queue.splice(index, 1)[0];
+        if (!next)
+            return;
+        this.options.callbacks?.onQueueChange?.(this.queue.length);
+        next.element.remove();
+        const queuedMessage = {
+            role: 'user',
+            text: next.text,
+            createdAt: new Date(),
+            parts: next.parts,
+            files: next.files?.map((f) => ({ mime: f.contentType, name: f.name }))
+        };
+        const userEl = this.renderUserMessage(queuedMessage);
+        this.refs.messagesEl.appendChild(userEl);
+        gsap.from(userEl, { duration: 0.5, y: 100, opacity: 0, ease: 'power2.inOut' });
+        this.history.push(queuedMessage);
+        this.options.callbacks?.onMessage?.(queuedMessage);
+        this.processGeneration(next.files);
+    }
+    drainQueue() {
+        if (this.steerTarget) {
+            const target = this.steerTarget;
+            this.steerTarget = null;
+            const idx = this.queue.findIndex((q) => q.element === target);
+            if (idx >= 0) {
+                this.runQueued(idx);
+                return;
+            }
+        }
+        if (this.queue.length > 0)
+            this.runQueued(0);
+    }
+    async processGeneration(files) {
+        if (!this.options.generate)
+            return;
+        if (this.destroyed)
+            return;
+        this.generating = true;
+        this.generation++;
+        this.stopRequested = false;
+        const gen = this.generation;
+        this.setComposerGenerating(true);
+        const controller = new AbortController();
+        this.activeController = controller;
+        const modelEl = document.createElement('div');
+        modelEl.className = 'chat-message-model';
+        modelEl.dataset.model = this.currentModel;
+        modelEl.appendChild(buildThinkingIndicator());
+        stampModelAvatar(modelEl, this.currentModel, this.modelIcons);
+        this.refs.messagesEl.appendChild(modelEl);
+        gsap.from(modelEl, { duration: 0.5, y: 100, opacity: 0, ease: 'power2.inOut' });
+        gsap.to(this.refs.messagesEl, { duration: 0.5, scrollTop: this.refs.messagesEl.scrollHeight, ease: 'power2.inOut' });
+        const renderer = createStreamRenderer(modelEl, this.refs.messagesEl, this.options.renderToolCall);
+        const isStale = () => this.destroyed || this.generation !== gen;
+        const usedModel = this.currentModel;
+        try {
+            const stream = this.options.generate(usedModel, this.history, files ?? [], controller.signal, this.currentReasoning);
+            for await (const event of stream) {
+                if (isStale())
+                    break;
+                if (event.event === 'text') {
+                    renderer.feedText(event.delta);
+                }
+                else if (event.event === 'tool_call') {
+                    renderer.feedToolCall(event.id, event.name, event.args);
+                }
+                else if (event.event === 'error') {
+                    renderer.feedError('Something went wrong. Please try again.');
+                    this.options.callbacks?.onError?.(event.message);
+                }
+            }
+        }
+        catch (err) {
+            if (!controller.signal.aborted) {
+                console.error(err);
+                if (!renderer.getText()) {
+                    renderer.feedError('Something went wrong. Please try again.');
+                }
+            }
+        }
+        if (isStale())
+            return;
+        const aborted = controller.signal.aborted;
+        const modelMessage = await renderer.finalize();
+        modelMessage.model = usedModel;
+        const hasContent = !!modelMessage.text || (modelMessage.toolCalls?.length ?? 0) > 0;
+        if (aborted && !hasContent) {
+            modelEl.remove();
+        }
+        else {
+            if (modelMessage.text) {
+                addCopyButton(modelEl, () => modelMessage.text, modelMessage.createdAt);
+            }
+            stampModelAvatar(modelEl, usedModel, this.modelIcons);
+            this.history.push(modelMessage);
+            this.options.callbacks?.onStreamComplete?.(modelMessage);
+        }
+        this.generating = false;
+        this.activeController = null;
+        this.setComposerGenerating(false);
+        if (this.stopRequested) {
+            this.stopRequested = false;
+            return;
+        }
+        this.drainQueue();
+    }
+    // ── Room mode (multiplayer) ──
+    roomMessageToChat(_room, _self, message) {
+        const isUser = message.role === Fauna.Parrot.Generative.Role.USER;
+        return {
+            role: isUser ? 'user' : 'model',
+            createdAt: message.created ? new Date(message.created) : new Date(),
+            model: isUser ? undefined : message.model,
+            author: isUser && message.author?.email
+                ? { id: message.author.email, profile: message.author }
+                : undefined,
+            ...roomPartsToChatFields(message.parts),
+        };
+    }
+    // Insert a rendered message element at the position matching its durable
+    // `position` in the transcript, so members render in a consistent order
+    // regardless of event-arrival timing (fixes interleaving on multi-member
+    // sends / queue releases). Elements carry `data-position`; we insert before
+    // the first existing element with a greater position, else append.
+    insertByPosition(el, position) {
+        el.dataset.position = String(position);
+        const siblings = this.refs.messagesEl.querySelectorAll('[data-position]');
+        let before = null;
+        for (const sib of siblings) {
+            const p = Number(sib.dataset.position);
+            if (p > position) {
+                before = sib;
+                break;
+            }
+        }
+        if (before)
+            this.refs.messagesEl.insertBefore(el, before);
+        else
+            this.refs.messagesEl.appendChild(el);
+    }
+    paintedMessage(messageId) {
+        if (!messageId)
+            return null;
+        const escaped = typeof CSS !== "undefined" && CSS.escape
+            ? CSS.escape(messageId)
+            : messageId.replace(/["\\]/g, "");
+        return this.refs.messagesEl.querySelector(`[data-message-id="${escaped}"]`);
+    }
+    renderRoomMessage(chat, messageId, position) {
+        if (this.destroyed)
+            return;
+        if (this.paintedMessage(messageId))
+            return;
+        const gen = this.generation;
+        const stick = nearBottom(this.refs.messagesEl);
+        const el = chat.role === 'user' ? this.renderUserMessage(chat) : undefined;
+        if (el) {
+            if (messageId)
+                el.dataset.messageId = messageId;
+            if (position !== undefined)
+                this.insertByPosition(el, position);
+            else
+                this.refs.messagesEl.appendChild(el);
+            if (position !== undefined)
+                this.enableReactions(el, position);
+            gsap.from(el, { duration: 0.4, y: 40, opacity: 0, ease: 'power2.out' });
+        }
+        else {
+            buildMessageElement(chat, this.options.acceptedTypes, this.modelIcons, this.options.renderToolCall, this.options.mode, this.options.room?.self.profile.email, this.options.onTokenClick, this.fileCards).then((built) => {
+                if (this.destroyed || this.generation !== gen)
+                    return;
+                if (this.paintedMessage(messageId))
+                    return;
+                if (messageId)
+                    built.dataset.messageId = messageId;
+                if (chat.model)
+                    built.dataset.model = chat.model;
+                if (position !== undefined)
+                    this.insertByPosition(built, position);
+                else
+                    this.refs.messagesEl.appendChild(built);
+                if (position !== undefined)
+                    this.enableReactions(built, position);
+                gsap.from(built, { duration: 0.4, y: 40, opacity: 0, ease: 'power2.out' });
+                autoScroll(this.refs.messagesEl, stick);
+            });
+        }
+        this.history.push(chat);
+        autoScroll(this.refs.messagesEl, stick);
+    }
+    // ── Reactions ──
+    // A reaction arrives as its own room message; it never paints a bubble.
+    // It folds into a row of emoji under the message at its target position.
+    applyReaction(message, reaction) {
+        const email = message.author?.email;
+        if (!email)
+            return;
+        let byEmoji = this.reactions.get(reaction.position);
+        if (!byEmoji) {
+            byEmoji = new Map();
+            this.reactions.set(reaction.position, byEmoji);
+        }
+        let byPerson = byEmoji.get(reaction.emoji);
+        if (!byPerson) {
+            byPerson = new Map();
+            byEmoji.set(reaction.emoji, byPerson);
+        }
+        const latest = byPerson.get(email);
+        if (latest && latest.at > message.position)
+            return;
+        const name = message.author?.displayName ?? email.split('@')[0];
+        byPerson.set(email, { on: reaction.on, at: message.position, name });
+        this.paintReactions(reaction.position);
+    }
+    /** Hover action to react, plus the folded row for any reactions already in. */
+    enableReactions(el, position) {
+        if (!this.options.room)
+            return;
+        const actions = getOrCreateActions(el);
+        if (!actions.querySelector('.chat-react-button')) {
+            const button = document.createElement('span');
+            button.className = 'material-symbols-outlined chat-react-button';
+            button.textContent = 'add_reaction';
+            createTooltip(button, 'React');
+            button.onclick = (e) => {
+                e.stopPropagation();
+                this.openReactionPicker(el, position);
+            };
+            actions.prepend(button);
+        }
+        this.paintReactions(position);
+    }
+    openReactionPicker(el, position) {
+        el.querySelector('.chat-reaction-picker')?.remove();
+        const picker = document.createElement('div');
+        picker.className = 'chat-reaction-picker';
+        for (const emoji of QUICK_REACTIONS) {
+            const option = document.createElement('button');
+            option.type = 'button';
+            option.textContent = emoji;
+            option.onclick = (e) => {
+                e.stopPropagation();
+                picker.remove();
+                this.react(position, emoji, !this.reactedWith(position, emoji));
+            };
+            picker.appendChild(option);
+        }
+        el.insertBefore(picker, el.querySelector(':scope > .chat-message-actions'));
+        gsap.from(picker, { duration: 0.2, scale: 0.85, opacity: 0, ease: 'back.out(2)' });
+        const close = (e) => {
+            if (picker.contains(e.target))
+                return;
+            picker.remove();
+            document.removeEventListener('click', close);
+        };
+        setTimeout(() => document.addEventListener('click', close), 0);
+    }
+    reactedWith(position, emoji) {
+        const self = this.options.room?.self.profile.email;
+        return Boolean(self && this.reactions.get(position)?.get(emoji)?.get(self)?.on);
+    }
+    react(position, emoji, on) {
+        void this.options.room?.room.react(position, emoji, on)
+            .catch((err) => { this.options.callbacks?.onError?.(err.message); });
+    }
+    paintReactions(position) {
+        const el = this.refs.messagesEl.querySelector(`[data-position="${position}"]`);
+        if (!el)
+            return;
+        const self = this.options.room?.self.profile.email;
+        const shown = [...(this.reactions.get(position) ?? new Map()).entries()]
+            .map(([emoji, people]) => {
+            const on = [...people.entries()].filter(([, state]) => state.on);
+            return { emoji, names: on.map(([, state]) => state.name), mine: on.some(([email]) => email === self) };
+        })
+            .filter((entry) => entry.names.length > 0);
+        let row = el.querySelector(':scope > .chat-reactions');
+        if (shown.length === 0) {
+            row?.remove();
+            return;
+        }
+        if (!row) {
+            row = document.createElement('div');
+            row.className = 'chat-reactions';
+            const actions = el.querySelector(':scope > .chat-message-actions');
+            if (actions)
+                el.insertBefore(row, actions);
+            else
+                el.appendChild(row);
+        }
+        const before = new Map([...row.children].map((chip) => [chip.dataset.emoji, chip.querySelector('.chat-reaction-count')?.textContent]));
+        row.replaceChildren(...shown.map(({ emoji, names, mine }) => {
+            const chip = document.createElement('button');
+            chip.type = 'button';
+            chip.className = mine ? 'chat-reaction mine' : 'chat-reaction';
+            chip.dataset.emoji = emoji;
+            chip.title = names.join(', ');
+            const face = document.createElement('span');
+            face.textContent = emoji;
+            const count = document.createElement('span');
+            count.className = 'chat-reaction-count';
+            count.textContent = String(names.length);
+            chip.append(face, count);
+            chip.onclick = (e) => {
+                e.stopPropagation();
+                this.react(position, emoji, !mine);
+            };
+            if (before.get(emoji) !== count.textContent) {
+                gsap.fromTo(chip, { scale: 0.7 }, { duration: 0.35, scale: 1, ease: 'back.out(3)' });
+            }
+            return chip;
+        }));
+    }
+    /** Wrap client tools so optional evaluate(params, onProgress) callbacks stay
+     *  in this UI. The Parrot Tool type is still evaluate(params) only — Python /
+     *  Rust SDKs should not grow chip/token fields. */
+    bindClientTools(tools) {
+        if (!tools)
+            return undefined;
+        const list = Array.isArray(tools) ? tools : [tools];
+        return list.map((tool) => ({
+            function: tool.function,
+            instruction: tool.instruction,
+            evaluate: (params) => {
+                const run = tool.evaluate;
+                return run(params, (progress) => {
+                    this.toolProgress.set(tool.function.name, progress);
+                    this.roomStream?.renderer.feedToolProgress(tool.function.name, progress);
+                }, this.roomToolAbort.signal);
+            },
+        }));
+    }
+    toolsWithProgress(tools) {
+        return tools.map((t) => {
+            const progress = this.toolProgress.get(t.name);
+            return progress !== undefined ? { ...t, progress } : t;
+        });
+    }
+    /** Where the repository button and the computer the model asks for are bound: the chat room's own, or an app's holder. */
+    repositoryHolder() {
+        const room = this.options.room?.room;
+        const option = this.options.repositories;
+        if (!room || !option || room.isHuman() || !room.chatId)
+            return null;
+        return option === true ? room : option;
+    }
+    /** A chat with no repository still offers use_desktop, until the person turns it down here. */
+    offersComputer() {
+        const holder = this.repositoryHolder();
+        return !!holder && holder.repository === null && !this.declinedComputer;
+    }
+    /**
+     * use_desktop without a repository: asks the person to make one. A no lasts only
+     * as long as this engine. A holder that isn't the room passes its repository on to
+     * the room (the app does), so the reply waits until the room has it.
+     */
+    computerTool(room, holder) {
+        return {
+            function: Fauna.Termite.OS.desktopTool(null),
+            evaluate: async (args) => {
+                if (holder.repository !== null)
+                    return JSON.stringify({ repository: holder.repository });
+                const signal = this.roomToolAbort.signal;
+                const repository = await askForComputer(holder, String(args?.name ?? ''), signal, this.options.computerAsker);
+                if (repository) {
+                    if (holder !== room)
+                        await roomHas(room, repository.id, signal);
+                    return JSON.stringify({ repository: repository.id });
+                }
+                if (!signal.aborted)
+                    this.declinedComputer = true;
+                return JSON.stringify({ declined: true });
+            },
+        };
+    }
+    setupRoomMode(room, self) {
+        const clientTools = this.bindClientTools(this.options.room?.tools) ?? [];
+        const holder = this.repositoryHolder();
+        if (holder)
+            clientTools.push(this.computerTool(room, holder));
+        room.setClientTools(clientTools);
+        const roster = document.createElement('div');
+        roster.className = 'chat-room-roster';
+        this.refs.root.insertBefore(roster, this.refs.messagesEl);
+        const typing = document.createElement('div');
+        typing.className = 'chat-room-typing';
+        this.refs.inputEl.insertBefore(typing, this.refs.queueEl);
+        let repositoryHolder = null;
+        if (holder) {
+            repositoryHolder = document.createElement('div');
+            repositoryHolder.className = 'chat-repository-holder';
+            this.refs.optionsEl.insertBefore(repositoryHolder, this.refs.optionsEl.firstChild);
+            this.repositoryControl = mountRepositoryControl(repositoryHolder, holder, this.options.onOpenRepository, this.options.onRepositoryChange);
+            this.repositoryControl.setReplying(this.roomThinking);
+        }
+        const seen = new Set();
+        const refreshRoster = () => {
+            roster.innerHTML = '';
+            const others = room.getPresences().filter((p) => p.id !== self.id);
+            // Solo chat: hide the roster entirely (it would just show your own
+            // avatar). Only surface it once there's company to attribute.
+            roster.style.display = others.length > 0 ? 'flex' : 'none';
+            if (others.length > 0) {
+                // Show only OTHER members — never your own avatar.
+                for (const presence of others) {
+                    const chip = document.createElement('div');
+                    chip.className = 'chat-room-member';
+                    chip.appendChild(buildAvatar(presence.profile));
+                    roster.appendChild(chip);
+                }
+            }
+            const typers = room.typingPresences(self);
+            if (typers.length === 0) {
+                typing.textContent = '';
+                typing.classList.remove('chat-room-typing-active');
+            }
+            else {
+                const names = typers.map((p) => p.profile?.displayName ?? p.profile?.email?.split('@')[0] ?? 'Someone');
+                typing.textContent = names.length === 1
+                    ? `${names[0]} is typing…`
+                    : `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]} are typing…`;
+                typing.classList.add('chat-room-typing-active');
+            }
+        };
+        for (const message of room.getMessages()) {
+            seen.add(message.id);
+            if (isSystemRoomMessage(message))
+                continue;
+            const reaction = reactionOf(message);
+            if (reaction) {
+                this.applyReaction(message, reaction);
+                continue;
+            }
+            this.renderRoomMessage(this.roomMessageToChat(room, self, message), message.id, message.position);
+        }
+        requestAnimationFrame(() => {
+            this.refs.messagesEl.scrollTop = this.refs.messagesEl.scrollHeight;
+        });
+        refreshRoster();
+        this.syncRoomQueue(room);
+        let liveEnded = false;
+        room.setHooks({
+            onMessage: (r, message) => {
+                if (liveEnded || this.destroyed)
+                    return;
+                if (seen.has(message.id) || this.paintedMessage(message.id))
+                    return;
+                seen.add(message.id);
+                if (isSystemRoomMessage(message))
+                    return;
+                const reaction = reactionOf(message);
+                if (reaction) {
+                    this.applyReaction(message, reaction);
+                    return;
+                }
+                const chat = this.roomMessageToChat(r, self, message);
+                if (chat.files?.length)
+                    this.refs.panel?.added();
+                // If this MODEL message finalizes the turn we've been streaming,
+                // keep the already-rendered streamed element instead of building
+                // a duplicate — just commit it to history.
+                if (chat.role === 'model' && this.roomStream) {
+                    const streamedEl = this.roomStream.el;
+                    const streamedRenderer = this.roomStream.renderer;
+                    if (chat.text && chat.text.length > streamedRenderer.getText().length) {
+                        streamedRenderer.syncText(chat.text);
+                    }
+                    streamedRenderer.finalize?.();
+                    this.roomStream = null;
+                    this.toolProgress.clear();
+                    // The streamed element was rendered live, so it never went
+                    // through buildMessageElement — give it the same copy action
+                    // wrapper every other message gets.
+                    if (chat.text)
+                        addCopyButton(streamedEl, () => chat.text, chat.createdAt);
+                    streamedRenderer.syncToolCalls(chat.toolCalls ?? []);
+                    // Files the reply attached, from the landed row (the stream may have missed some).
+                    for (const file of chat.files ?? []) {
+                        if (file.part?.ref && streamedEl.querySelector(`[data-ref="${CSS.escape(file.part.ref)}"]`))
+                            continue;
+                        const card = buildFileElement(file, this.options.acceptedTypes, this.fileCards);
+                        const actions = streamedEl.querySelector(':scope > .chat-message-actions');
+                        if (actions)
+                            streamedEl.insertBefore(card, actions);
+                        else
+                            streamedEl.appendChild(card);
+                    }
+                    // Stamp its durable position so later inserts order correctly
+                    // relative to it (it was appended live before its row landed).
+                    streamedEl.dataset.position = String(message.position);
+                    if (message.id)
+                        streamedEl.dataset.messageId = message.id;
+                    if (chat.model)
+                        streamedEl.dataset.model = chat.model;
+                    stampModelAvatar(streamedEl, chat.model ?? this.currentModel, this.modelIcons);
+                    this.enableReactions(streamedEl, message.position);
+                    this.history.push(chat);
+                    autoScroll(this.refs.messagesEl);
+                    this.options.room?.onRoomMessage?.(message);
+                    return;
+                }
+                this.renderRoomMessage(chat, message.id, message.position);
+                this.options.room?.onRoomMessage?.(message);
+            },
+            onQueue: (r) => {
+                if (liveEnded || this.destroyed)
+                    return;
+                this.syncRoomQueue(r);
+            },
+            onDelta: (_r, turn, delta, _text, aborted, tools, files) => {
+                if (liveEnded || this.destroyed)
+                    return;
+                if (aborted) {
+                    this.abortRoomTools();
+                    this.toolProgress.clear();
+                    // Successful clear after a committed MODEL row is not abort.
+                    // Only drop the live bubble when this turn never wrote text.
+                    if (this.roomStream && !this.roomStream.renderer.getText()) {
+                        this.roomStream.el.remove();
+                        this.roomStream = null;
+                    }
+                    return;
+                }
+                // Leftover stream after hydrate: the finished MODEL row is already
+                // painted. Do not grow a second bubble for that turn.
+                const last = [...room.getMessages()].reverse().find((m) => !isSystemRoomMessage(m));
+                const lastIsPaintedModel = Boolean(last
+                    && last.role === Fauna.Parrot.Generative.Role.MODEL
+                    && (seen.has(last.id) || this.paintedMessage(last.id)));
+                // Starting (or continuing) a streamed model turn: drop the
+                // "thinking" dots and grow a model message element live.
+                if (!this.roomStream || this.roomStream.turn !== turn) {
+                    if (this.roomStream && this.roomStream.turn !== turn) {
+                        this.roomStream.el.remove();
+                        this.roomStream = null;
+                    }
+                    if (lastIsPaintedModel)
+                        return;
+                    if (this.roomThinkingEl) {
+                        this.roomThinkingEl.remove();
+                        this.roomThinkingEl = null;
+                    }
+                    const el = document.createElement('div');
+                    el.className = 'chat-message-model';
+                    el.dataset.model = this.currentModel;
+                    stampModelAvatar(el, this.currentModel, this.modelIcons);
+                    this.refs.messagesEl.appendChild(el);
+                    gsap.from(el, { duration: 0.4, y: 40, opacity: 0, ease: 'power2.out' });
+                    this.roomStream = { turn, el, renderer: createStreamRenderer(el, this.refs.messagesEl, this.options.renderToolCall) };
+                }
+                this.roomStream.renderer.syncToolCalls(this.toolsWithProgress(tools));
+                if (files?.length)
+                    this.paintStreamFiles(this.roomStream.el, files);
+                if (delta)
+                    this.roomStream.renderer.feedText(delta);
+                autoScroll(this.refs.messagesEl);
+            },
+            onOpenFile: (_r, attachment) => {
+                if (liveEnded || this.destroyed)
+                    return;
+                this.refs.panel?.point(attachment);
+            },
+            onThinking: (_r, thinking) => {
+                if (liveEnded)
+                    return;
+                this.setRoomThinking(thinking);
+                this.options.room?.onThinking?.(thinking);
+            },
+            onRenamed: () => { },
+            onClosed: () => {
+                // Live room destroyed (host left / reap). Clear peer UI so we
+                // don't sit on a ghost roster; reopen the panel to reconnect.
+                liveEnded = true;
+                roster.innerHTML = '';
+                roster.style.display = 'none';
+                typing.textContent = '';
+                typing.classList.remove('chat-room-typing-active');
+                if (!this.refs.messagesEl.querySelector('.chat-room-ended')) {
+                    const banner = document.createElement('div');
+                    banner.className = 'chat-room-ended';
+                    banner.textContent = 'Live session ended. Reopen the panel to reconnect.';
+                    this.refs.messagesEl.appendChild(banner);
+                }
+                this.setRoomThinking(false);
+                this.roomQueue.clear();
+                this.roomSteerAllEl?.remove();
+                this.roomSteerAllEl = null;
+                this.refs.queueEl.replaceChildren();
+            },
+            onPresence: () => {
+                if (liveEnded)
+                    return;
+                refreshRoster();
+            },
+        });
+        room.replayReply();
+        let typingTimer = null;
+        this.roomTypingHandler = () => {
+            self.setStatus('typing');
+            if (typingTimer)
+                clearTimeout(typingTimer);
+            typingTimer = setTimeout(() => self.setStatus(''), 2500);
+        };
+        // Lazy backfill: when scrolled near the top and older pages remain, pull
+        // one older page and PREPEND it, preserving the scroll offset so the view
+        // doesn't jump. Guarded against overlapping loads.
+        let loadingOlder = false;
+        const onScroll = () => {
+            if (loadingOlder || !room.hasMore())
+                return;
+            if (this.refs.messagesEl.scrollTop > 80)
+                return;
+            loadingOlder = true;
+            const prevHeight = this.refs.messagesEl.scrollHeight;
+            void room.loadOlder()
+                .then((page) => {
+                void page;
+                if (liveEnded || this.destroyed)
+                    return;
+                // loadOlder merged the older rows into room.getMessages();
+                // render any not yet shown, in position order.
+                for (const message of room.getMessages()) {
+                    if (seen.has(message.id) || this.paintedMessage(message.id))
+                        continue;
+                    seen.add(message.id);
+                    if (isSystemRoomMessage(message))
+                        continue;
+                    const reaction = reactionOf(message);
+                    if (reaction) {
+                        this.applyReaction(message, reaction);
+                        continue;
+                    }
+                    this.renderRoomMessage(this.roomMessageToChat(room, self, message), message.id, message.position);
+                }
+                // Preserve scroll position across the prepend.
+                this.refs.messagesEl.scrollTop += this.refs.messagesEl.scrollHeight - prevHeight;
+                this.options.room?.onOlderLoaded?.();
+            })
+                .catch((err) => this.options.callbacks?.onError?.(err.message))
+                .finally(() => { loadingOlder = false; });
+        };
+        this.refs.messagesEl.addEventListener('scroll', onScroll);
+        const rosterPoll = setInterval(refreshRoster, 1000);
+        this.roomCleanup = () => {
+            liveEnded = true;
+            room.setHooks({
+                onMessage: () => { },
+                onQueue: () => { },
+                onDelta: () => { },
+                onThinking: () => { },
+                onRenamed: () => { },
+                onClosed: () => { },
+                onPresence: () => { },
+                onOpenFile: () => { },
+            });
+            this.repositoryControl?.unmount();
+            this.repositoryControl = null;
+            repositoryHolder?.remove();
+            clearInterval(rosterPoll);
+            if (typingTimer)
+                clearTimeout(typingTimer);
+            this.refs.messagesEl.removeEventListener('scroll', onScroll);
+            this.roomTypingHandler = null;
+            // StrictMode remounts the engine; orphan roster/typing nodes would
+            // stack (same bug as the tokenized composer) and show duplicate peers.
+            try {
+                roster.remove();
+            }
+            catch { /* noop */ }
+            try {
+                typing.remove();
+            }
+            catch { /* noop */ }
+        };
+    }
+    abortRoomTools() {
+        if (!this.roomToolAbort.signal.aborted)
+            this.roomToolAbort.abort();
+        this.roomToolAbort = new AbortController();
+    }
+    stopRoom() {
+        this.abortRoomTools();
+        void this.options.room?.room.steer({ stop: true, model: this.currentModel, reasoning: this.currentReasoning })
+            .catch((err) => {
+            void sendInformaticToast(err.message || 'Stop failed', 'error');
+            this.options.callbacks?.onError?.(err.message);
+        });
+    }
+    setRoomThinking(thinking) {
+        this.roomThinking = thinking;
+        if (thinking && this.roomToolAbort.signal.aborted)
+            this.roomToolAbort = new AbortController();
+        if (!thinking)
+            this.abortRoomTools();
+        // Mirror the stop affordance: while the server is replying, the send
+        // button becomes a stop control (clicking it cancels the room reply).
+        this.setComposerGenerating(thinking);
+        this.repositoryControl?.setReplying(thinking);
+        // Note: the shared queue is NOT cleared here — queued rows are released
+        // one-per-reply by the server and each release fans out a chat-queue-remove
+        // (handled by syncRoomQueue), so chips disappear exactly as they drain.
+        // While a streamed turn is actively rendering, the growing message is the
+        // indicator — don't also show the dots.
+        if (thinking && this.roomStream)
+            return;
+        if (thinking && !this.roomThinkingEl) {
+            this.roomThinkingEl = document.createElement('div');
+            this.roomThinkingEl.className = 'chat-message-model';
+            this.roomThinkingEl.appendChild(buildThinkingIndicator());
+            this.refs.messagesEl.appendChild(this.roomThinkingEl);
+            gsap.from(this.roomThinkingEl, { duration: 0.4, y: 40, opacity: 0, ease: 'power2.out' });
+            autoScroll(this.refs.messagesEl);
+        }
+        else if (!thinking && this.roomThinkingEl) {
+            this.roomThinkingEl.remove();
+            this.roomThinkingEl = null;
+        }
+    }
+    // Reconcile the queue-chip UI against the room's shared queue. Driven by the
+    // room's onQueue hook (and initial hydration): the server-side chat_queue is
+    // the single source of truth, so we add chips for new rows, drop chips for
+    // released/unqueued rows, and keep them in FIFO order. Each chip gets a bolt
+    // (per-item steer: release just this row) and an x (unqueue: drop this row).
+    syncRoomQueue(room) {
+        const items = room.getQueue();
+        const live = new Set(items.map((q) => q.id));
+        // Drop chips whose queue row is gone (released into the transcript or
+        // unqueued) — animate them out.
+        for (const [id, chip] of [...this.roomQueue]) {
+            if (!live.has(id)) {
+                this.roomQueue.delete(id);
+                gsap.to(chip, {
+                    duration: 0.25, opacity: 0, height: 0, marginBottom: 0, ease: 'power2.in',
+                    onComplete: () => { chip.remove(); },
+                });
+            }
+        }
+        // Add chips for new rows, in FIFO order (the queue is already sorted).
+        for (const item of items) {
+            if (this.roomQueue.has(item.id))
+                continue;
+            const chip = this.buildRoomQueueChip(item);
+            this.roomQueue.set(item.id, chip);
+            this.refs.queueEl.appendChild(chip);
+            gsap.from(chip, { duration: 0.3, opacity: 0, y: 8, ease: 'power2.out' });
+        }
+        this.syncRoomSteerAll();
+        this.options.callbacks?.onQueueChange?.(this.roomQueue.size);
+    }
+    // Build one queue chip for a shared-queue row. `bolt` releases just this row
+    // into the transcript (per-item steer); `x` drops it (unqueue). Both are
+    // room-global server operations — the resulting queue delta reconciles the UI.
+    buildRoomQueueChip(item) {
+        const chip = document.createElement('div');
+        chip.className = 'chat-queue-item';
+        const icon = document.createElement('span');
+        icon.className = 'material-symbols-outlined chat-queue-item-icon';
+        icon.textContent = 'schedule';
+        chip.appendChild(icon);
+        const text = item.parts.filter((p) => p.type === 'TEXT').map((p) => p.text).join('');
+        const fileCount = item.parts.filter((p) => p.type === 'FILE').length;
+        const label = document.createElement('div');
+        label.className = 'chat-queue-item-label';
+        const preview = toPlainText(text).trim();
+        const fileNote = fileCount > 0 ? `${fileCount} file${fileCount > 1 ? 's' : ''}` : '';
+        label.textContent = preview || fileNote || 'Attachment';
+        if (preview && fileNote)
+            label.title = `${preview} · ${fileNote}`;
+        chip.appendChild(label);
+        const actions = document.createElement('div');
+        actions.className = 'chat-queue-item-actions';
+        const steerBtn = document.createElement('span');
+        steerBtn.className = 'material-symbols-outlined chat-queue-steer';
+        steerBtn.textContent = 'bolt';
+        createTooltip(steerBtn, 'Steer — stop the current reply and jump this message ahead');
+        steerBtn.onclick = (e) => { e.stopPropagation(); this.steerRoom(item.id); };
+        actions.appendChild(steerBtn);
+        const removeBtn = document.createElement('span');
+        removeBtn.className = 'material-symbols-outlined chat-queue-remove';
+        removeBtn.textContent = 'close';
+        createTooltip(removeBtn, 'Remove from queue');
+        removeBtn.onclick = (e) => {
+            e.stopPropagation();
+            void this.options.room?.room.unqueue(item.id)
+                .then(() => { void sendInformaticToast('Removed from queue', 'info', 2500); })
+                .catch((err) => {
+                void sendInformaticToast(err.message || 'Could not remove from queue', 'error');
+                this.options.callbacks?.onError?.(err.message);
+            });
+        };
+        actions.appendChild(removeBtn);
+        chip.appendChild(actions);
+        return chip;
+    }
+    // Steer the room. With no `queueId` (steer-all header path routes through
+    // steerAllRoom) this stops the current reply and re-answers. With a `queueId`
+    // it releases just that one queued row and re-answers. Either way the server
+    // stops the current reply and restarts the normal debounce.
+    steerRoom(queueId) {
+        this.abortRoomTools();
+        void this.options.room?.room.steer({ queueId, model: this.currentModel, reasoning: this.currentReasoning })
+            .catch((err) => {
+            void sendInformaticToast(err.message || 'Steer failed', 'error');
+            this.options.callbacks?.onError?.(err.message);
+        });
+    }
+    // Steer-all: flush the whole queue into the transcript and stop the current
+    // reply (one reply then answers the whole batch after the debounce).
+    steerAllRoom() {
+        this.abortRoomTools();
+        void this.options.room?.room.steer({ all: true, model: this.currentModel, reasoning: this.currentReasoning })
+            .then(() => { void sendInformaticToast('Steered all queued messages', 'info', 2500); })
+            .catch((err) => {
+            void sendInformaticToast(err.message || 'Steer all failed', 'error');
+            this.options.callbacks?.onError?.(err.message);
+        });
+    }
+    // Show/refresh the "Steer all" header above the queue when >1 chip is waiting.
+    syncRoomSteerAll() {
+        if (this.roomQueue.size > 1 && !this.roomSteerAllEl) {
+            const header = document.createElement('div');
+            header.className = 'chat-queue-steer-all';
+            const icon = document.createElement('span');
+            icon.className = 'material-symbols-outlined';
+            icon.textContent = 'bolt';
+            header.appendChild(icon);
+            const label = document.createElement('span');
+            label.textContent = 'Steer all';
+            header.appendChild(label);
+            createTooltip(header, 'Stop the current reply and answer everything queued now');
+            header.onclick = (e) => { e.stopPropagation(); this.steerAllRoom(); };
+            this.refs.queueEl.insertBefore(header, this.refs.queueEl.firstChild);
+            gsap.from(header, { duration: 0.3, opacity: 0, y: -6, ease: 'power2.out' });
+            this.roomSteerAllEl = header;
+        }
+        else if (this.roomQueue.size <= 1 && this.roomSteerAllEl) {
+            this.roomSteerAllEl.remove();
+            this.roomSteerAllEl = null;
+        }
+    }
+    // ── Public API (drives the ChatInstance handle) ──
+    sendMessage(text, files) {
+        if (files && files.length > 0) {
+            void (async () => {
+                const uploaded = [];
+                for (const f of files) {
+                    const file = await this.uploadBytes(f.mime, f.name, f.data);
+                    if (!file)
+                        return;
+                    uploaded.push(file);
+                }
+                this.doSend(text, undefined, uploaded);
+            })();
+            return;
+        }
+        this.doSend(text);
+    }
+    appendMessage(role, text) {
+        const message = {
+            role,
+            text,
+            createdAt: new Date(),
+            model: role === 'model' ? this.currentModel : undefined,
+        };
+        this.history.push(message);
+        buildMessageElement(message, this.options.acceptedTypes, this.modelIcons, this.options.renderToolCall, this.options.mode, this.options.room?.self.profile.email, this.options.onTokenClick, this.fileCards).then((el) => {
+            if (message.model)
+                el.dataset.model = message.model;
+            this.refs.messagesEl.appendChild(el);
+            gsap.from(el, { duration: 0.5, y: 100, opacity: 0, ease: 'power2.inOut' });
+            autoScroll(this.refs.messagesEl);
+        });
+    }
+    removeQueuedMessage(index) {
+        if (index < 0 || index >= this.queue.length)
+            return;
+        const removed = this.queue.splice(index, 1)[0];
+        gsap.to(removed.element, {
+            duration: 0.3, opacity: 0, scale: 0.9, ease: 'power2.in',
+            onComplete: () => { removed.element.remove(); }
+        });
+        this.options.callbacks?.onQueueChange?.(this.queue.length);
+    }
+    getQueue() {
+        return this.queue.map((q) => ({
+            text: q.text,
+            files: q.files?.map((f) => ({ mime: f.contentType, name: f.name })),
+        }));
+    }
+    clearMessages() {
+        this.generation++;
+        this.generating = false;
+        this.steerTarget = null;
+        this.activeController?.abort();
+        this.activeController = null;
+        this.setComposerGenerating(false);
+        this.history.length = 0;
+        this.queue.length = 0;
+        this.roomQueue.clear();
+        this.roomSteerAllEl = null;
+        while (this.refs.messagesEl.firstChild)
+            this.refs.messagesEl.firstChild.remove();
+        while (this.refs.queueEl.firstChild)
+            this.refs.queueEl.firstChild.remove();
+        this.options.callbacks?.onQueueChange?.(0);
+    }
+    getHistory() {
+        return [...this.history];
+    }
+    getModel() {
+        return this.currentModel;
+    }
+    setModel(model) {
+        this.currentModel = model;
+        this.modelDropdown?.setValue(model);
+    }
+    getReasoning() {
+        return this.currentReasoning;
+    }
+    setReasoning(reasoning) {
+        this.currentReasoning = reasoning;
+        this.modelDropdown?.setReasoning(reasoning);
+    }
+    setMode(mode) {
+        if (chatMode(this.options.mode) === mode)
+            return;
+        this.options.mode = mode;
+        const selfEmail = this.options.room?.self.profile.email;
+        for (const el of this.refs.messagesEl.querySelectorAll('[data-author]')) {
+            const email = el.dataset.author;
+            const incoming = mode === 'thread' && Boolean(email && selfEmail && email !== selfEmail);
+            const profile = this.history.find((m) => m.author?.id === email)?.author?.profile;
+            applyUserBubbleLayout(el, incoming, profile);
+        }
+    }
+    setModels(models) {
+        this.options.models = models;
+        if (isModelLocked(models)) {
+            this.modelDropdown?.destroy();
+            this.modelDropdown = null;
+            this.syncModelSelectVisibility();
+            return;
+        }
+        this.syncModelSelectVisibility();
+        if (!this.modelDropdown)
+            this.wireModelSelect();
+        else {
+            this.modelDropdown.setValue(this.currentModel);
+            this.modelDropdown.setReasoning(this.currentReasoning);
+        }
+    }
+    insertToken(token) {
+        this.tokenizedInput.insertToken(token);
+    }
+    getParts() {
+        return this.tokenizedInput.getParts();
+    }
+    watchInput(handler) {
+        this.inputWatchers.add(handler);
+        return () => { this.inputWatchers.delete(handler); };
+    }
+    clearInput() {
+        this.tokenizedInput.clear();
+    }
+    focusInput() {
+        this.tokenizedInput.focus();
+    }
+    destroy() {
+        this.destroyed = true;
+        this.generation++;
+        this.generating = false;
+        this.steerTarget = null;
+        this.activeController?.abort();
+        this.activeController = null;
+        this.roomCleanup?.();
+        this.modelDropdown?.destroy();
+        this.modelDropdown = null;
+        // StrictMode remounts the engine; without clearing imperatively mounted
+        // nodes, a second composer / roster stacks in the panel.
+        this.inputWatchers.clear();
+        try {
+            this.tokenizedInput.getElement().remove();
+        }
+        catch { /* noop */ }
+        this.refs.rowEl.replaceChildren();
+        this.refs.messagesEl.replaceChildren();
+        this.refs.queueEl.replaceChildren();
+        this.history.length = 0;
+        this.queue.length = 0;
+        this.roomQueue.clear();
+        this.roomSteerAllEl = null;
+    }
+}
+// ---- React <Chat> component ----
+// Renders the chat shell (identical DOM structure/classes to the original
+// vanilla widget so ui.css and every animation apply unchanged) and wires the
+// imperative ChatEngine to the rendered nodes. Exposes the ChatInstance via
+// ref so both React consumers and the createChat bridge get the same handle.
+export const Chat = forwardRef(function Chat({ options = {} }, ref) {
+    const rootRef = useRef(null);
+    const mainRef = useRef(null);
+    const messagesRef = useRef(null);
+    // The side panel is set at mount, like every other option.
+    const panelRoom = options.attachments && options.room && !options.room.room.isHuman() ? options.room.room : null;
+    const bus = useMemo(() => (panelRoom ? createPanelBus() : null), [panelRoom]);
+    const [panelOpen, setPanelOpen] = useState(false);
+    const inputRef = useRef(null);
+    const queueRef = useRef(null);
+    const partsRef = useRef(null);
+    const rowRef = useRef(null);
+    const controlsRef = useRef(null);
+    const optionsRef = useRef(null);
+    const sendRef = useRef(null);
+    const modelSelectRef = useRef(null);
+    const attachRef = useRef(null);
+    const engineRef = useRef(null);
+    // Layout effect (not passive) so the engine is constructed during the commit
+    // phase. Combined with the flushSync mount in `createChat`, this guarantees
+    // the engine exists synchronously by the time createChat() returns, so a
+    // caller may sendMessage() immediately (e.g. the landing send) without the
+    // first message being dropped.
+    useLayoutEffect(() => {
+        if (!rootRef.current || !messagesRef.current || !inputRef.current || !queueRef.current ||
+            !partsRef.current || !rowRef.current || !controlsRef.current || !optionsRef.current ||
+            !sendRef.current)
+            return;
+        const engine = new ChatEngine({
+            root: mainRef.current ?? rootRef.current,
+            messagesEl: messagesRef.current,
+            inputEl: inputRef.current,
+            queueEl: queueRef.current,
+            partsEl: partsRef.current,
+            rowEl: rowRef.current,
+            controlsEl: controlsRef.current,
+            optionsEl: optionsRef.current,
+            sendBtn: sendRef.current,
+            modelSelect: modelSelectRef.current,
+            attachBtn: attachRef.current,
+            panel: bus,
+        }, roomLayout(options));
+        engineRef.current = engine;
+        return () => {
+            engine.destroy();
+            engineRef.current = null;
+        };
+        // Options are read once at mount (matching the imperative widget's
+        // one-time configuration); consumers rebuild the widget to change them.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useImperativeHandle(ref, () => ({
+        sendMessage: (text, files) => engineRef.current?.sendMessage(text, files),
+        appendMessage: (role, text) => engineRef.current?.appendMessage(role, text),
+        removeQueuedMessage: (index) => engineRef.current?.removeQueuedMessage(index),
+        getQueue: () => engineRef.current?.getQueue() ?? [],
+        clearMessages: () => engineRef.current?.clearMessages(),
+        getHistory: () => engineRef.current?.getHistory() ?? [],
+        getModel: () => engineRef.current?.getModel() ?? '',
+        setModel: (model) => engineRef.current?.setModel(model),
+        getReasoning: () => engineRef.current?.getReasoning(),
+        setReasoning: (reasoning) => engineRef.current?.setReasoning(reasoning),
+        setMode: (mode) => engineRef.current?.setMode(mode),
+        setModels: (models) => engineRef.current?.setModels(models),
+        insertToken: (token) => engineRef.current?.insertToken(token),
+        getParts: () => engineRef.current?.getParts() ?? [],
+        watchInput: (handler) => engineRef.current?.watchInput(handler) ?? (() => { }),
+        clearInput: () => engineRef.current?.clearInput(),
+        focusInput: () => engineRef.current?.focusInput(),
+        getElement: () => rootRef.current,
+        destroy: () => engineRef.current?.destroy(),
+    }), []);
+    const messages = _jsx("div", { className: "chat-messages", ref: messagesRef });
+    const input = (_jsxs("div", { className: "chat-input", ref: inputRef, children: [_jsx("div", { className: "chat-queue", ref: queueRef }), _jsx("div", { className: "chat-input-parts", ref: partsRef }), _jsx("div", { className: "chat-input-row", ref: rowRef }), _jsxs("div", { className: "chat-input-controls", ref: controlsRef, children: [_jsx("div", { className: "gen-select", ref: modelSelectRef, style: isModelLocked(roomLayout(options).models) ? { display: 'none' } : undefined }), _jsxs("div", { className: "chat-input-options", ref: optionsRef, children: [chatAuthorization(options) && (_jsx("span", { className: "material-symbols-outlined", ref: attachRef, children: "attach_file" })), _jsx("span", { className: "material-symbols-outlined", ref: sendRef, children: "arrow_forward" })] })] })] }));
+    const withPanel = Boolean(panelRoom && bus);
+    const actions = options.actions ?? [];
+    const actionRow = actions.length > 0 || (withPanel && !panelOpen)
+        ? (_jsxs("div", { className: "chat-actions", children: [actions.map((action) => (_jsx("button", { type: "button", className: "material-symbols-outlined chat-action", title: action.label, "aria-label": action.label, onClick: action.onClick, children: action.icon }, action.label))), withPanel && !panelOpen && (_jsx("button", { type: "button", className: "material-symbols-outlined chat-action", title: "Attachments", "aria-label": "Show attachments", onClick: () => setPanelOpen(true), children: "right_panel_open" }))] }))
+        : null;
+    if (!panelRoom || !bus) {
+        return (_jsxs("div", { className: "chat-root", ref: rootRef, children: [actionRow, messages, input] }));
+    }
+    return (_jsxs("div", { className: "chat-root chat-root-panel", ref: rootRef, children: [_jsxs("div", { className: "chat-main", ref: mainRef, children: [actionRow, messages, input] }), _jsx(ChatPanel, { room: panelRoom, bus: bus, open: panelOpen, onOpenChange: setPanelOpen })] }));
+});
+// ---- createChat (imperative bridge, backwards compatible) ----
+// Mounts the React <Chat> into `container` and returns the same imperative
+// ChatInstance the vanilla widget exposed, so the existing vanilla apps keep
+// calling createChat(el, opts) unchanged.
+export function createChat(container, options = {}) {
+    const root = createRoot(container);
+    let instance = null;
+    const ready = [];
+    const handleRef = (inst) => {
+        instance = inst;
+        if (inst)
+            ready.push(inst);
+    };
+    // React 19's `createRoot().render()` is asynchronous by default, so without
+    // flushSync the engine wouldn't exist yet when this function returns and an
+    // immediate sendMessage() (the landing send) would be silently dropped.
+    // flushSync forces a synchronous commit + layout effects, so the engine
+    // (mounted in a useLayoutEffect) is live before we return.
+    flushSync(() => root.render(_jsx(Chat, { ref: handleRef, options: options })));
+    const get = () => instance ?? ready[ready.length - 1] ?? null;
+    return {
+        sendMessage: (text, files) => get()?.sendMessage(text, files),
+        appendMessage: (role, text) => get()?.appendMessage(role, text),
+        removeQueuedMessage: (index) => get()?.removeQueuedMessage(index),
+        getQueue: () => get()?.getQueue() ?? [],
+        clearMessages: () => get()?.clearMessages(),
+        getHistory: () => get()?.getHistory() ?? [],
+        getModel: () => get()?.getModel() ?? '',
+        setModel: (model) => get()?.setModel(model),
+        getReasoning: () => get()?.getReasoning(),
+        setReasoning: (reasoning) => get()?.setReasoning(reasoning),
+        setMode: (mode) => get()?.setMode(mode),
+        setModels: (models) => get()?.setModels(models),
+        insertToken: (token) => get()?.insertToken(token),
+        getParts: () => get()?.getParts() ?? [],
+        watchInput: (handler) => get()?.watchInput(handler) ?? (() => { }),
+        clearInput: () => get()?.clearInput(),
+        focusInput: () => get()?.focusInput(),
+        getElement: () => (get()?.getElement() ?? container),
+        destroy: () => {
+            get()?.destroy();
+            root.unmount();
+        },
+    };
+}
+// ---- createLog ----
+// A read-only transcript surface: renders history and can stream a single
+// model reply, with no composer. Mirrors the original LogInstance API.
+export function createLog(container, options = {}) {
+    const history = [];
+    let destroyed = false;
+    const root = document.createElement('div');
+    root.className = 'chat-root';
+    const messagesEl = document.createElement('div');
+    messagesEl.className = 'chat-messages';
+    root.appendChild(messagesEl);
+    container.appendChild(root);
+    if (options.initialHistory) {
+        for (const message of options.initialHistory) {
+            history.push(message);
+            buildMessageElement(message).then((el) => {
+                messagesEl.appendChild(el);
+            });
+        }
+    }
+    return {
+        appendMessage(role, text) {
+            const message = { role, text, createdAt: new Date() };
+            history.push(message);
+            options.callbacks?.onMessage?.(message);
+            buildMessageElement(message).then((el) => {
+                messagesEl.appendChild(el);
+                gsap.from(el, { duration: 0.5, y: 100, opacity: 0, ease: 'power2.inOut' });
+                autoScroll(messagesEl);
+            });
+        },
+        async streamMessage(iterable) {
+            if (destroyed)
+                return;
+            const modelEl = document.createElement('div');
+            modelEl.className = 'chat-message-model';
+            modelEl.appendChild(buildThinkingIndicator());
+            messagesEl.appendChild(modelEl);
+            gsap.from(modelEl, { duration: 0.5, y: 100, opacity: 0, ease: 'power2.inOut' });
+            gsap.to(messagesEl, { duration: 0.5, scrollTop: messagesEl.scrollHeight, ease: 'power2.inOut' });
+            const renderer = createStreamRenderer(modelEl, messagesEl);
+            try {
+                for await (const event of iterable) {
+                    if (destroyed)
+                        break;
+                    if (event.event === 'text')
+                        renderer.feedText(event.delta);
+                    else if (event.event === 'tool_call')
+                        renderer.feedToolCall(event.id, event.name, event.args);
+                    else if (event.event === 'error')
+                        renderer.feedError(event.message);
+                }
+            }
+            catch (err) {
+                console.error(err);
+                if (!renderer.getText())
+                    renderer.feedError('Something went wrong.');
+            }
+            if (destroyed)
+                return;
+            const message = await renderer.finalize();
+            history.push(message);
+            options.callbacks?.onMessage?.(message);
+        },
+        clearMessages() {
+            history.length = 0;
+            while (messagesEl.firstChild)
+                messagesEl.firstChild.remove();
+        },
+        getHistory() {
+            return [...history];
+        },
+        getElement() {
+            return root;
+        },
+        destroy() {
+            destroyed = true;
+            history.length = 0;
+            root.remove();
+        }
+    };
+}