@nxisai/agent-harness 0.2.0

package/dist/ui/agent-fullscreen.js

@@ -0,0 +1,2821 @@
+/**
+ * The `<nxis-agent-fullscreen>` custom element: a full-screen chat interface
+ * over an {@link AgentHarness}.
+ *
+ * The layout is a conversation drawer beside a thread. Messages, generated tool
+ * forms and submitted detail cards all render inline in that thread, so a form
+ * appears where it was asked for rather than in a separate dialog.
+ *
+ * The model proposes a tool; a form generated from the tool's JSON Schema and
+ * prefilled from stored preferences appears inline; submitting it is the
+ * confirmation step for a write, after which the form becomes a read-only card.
+ *
+ * Configurable through properties and attributes: see the property accessors
+ * below, and `README.md` for worked examples.
+ *
+ * @example
+ * ```html
+ * <nxis-agent-fullscreen preload="idle"></nxis-agent-fullscreen>
+ * ```
+ *
+ * @module
+ */
+import { mountSurface } from '../a2ui/host.js';
+import { emitCardsSurface } from '../a2ui/cards.js';
+import { emitToolForm } from '../a2ui/form.js';
+import { A2UI_THEME_CSS } from '../a2ui/theme.js';
+// Compiled from agent.tw.css at build time (scripts/css-to-ts.mjs). It is a
+// string rather than a stylesheet import because the UI renders into a shadow
+// root (a <link> in the host page's head never crosses that boundary) and
+// because a published package cannot assume the consumer runs Tailwind.
+import { TAILWIND_CSS } from './tailwind.generated.js';
+import { emitAsk, emitStep } from '../a2ui/stepper.js';
+import { AgentHarness, isAbort } from '../harness/harness.js';
+import { WebMcpTools } from '../harness/tools/webmcp.js';
+import { extractResult, missingRequired, toolSchema, } from '../harness/tools/schema.js';
+import { connectTools } from '../harness/tools/source.js';
+import { AgentCoordinator } from '../harness/router/coordinator.js';
+import { LocalGemmaProvider, humanize, escapeHtml, NXIS_LOGO_SVG, NXIS_SITE_URL, ICON_CHECK, ICON_WARN, ICON_ARROW, ICON_PLUS, ICON_MENU, ICON_TRASH, ICON_STOP, ICON_COPY, ICON_PENCIL, ICON_REDO, ICON_CHECK_MARK, } from '../engine.js';
+import { DEFAULT_SYSTEM_PROMPT, DEFAULT_SUGGESTIONS, DEFAULT_EMPTY_STATE, DEFAULT_AGENT_NAME, DEFAULT_LOGO, THEME_TOKENS, PROFILE_ALIASES, } from './config.js';
+// Prefixed keys so state never collides with other Nxis examples on the same origin.
+const PROFILE_KEY = 'nxis-listings-agent-profile';
+const CONV_KEY = 'nxis-listings-agent-conversations';
+// ── Metrics (Typed Agent vs Traditional RAG) ─────────────────────────────────
+// RAG retrieval assumptions, ported from the original demo's MetricsPanel.
+const AVG_HTML_CHUNK_TOKENS = 650; // avg tokens per chunked HTML segment (nav/footer/CSS included)
+const CHUNKS_PER_RESULT = 3; // header + services + reviews chunks to match one JSON-LD record
+const TOOL_DEF_OVERHEAD = 600; // ~tokens for the MCP tool schemas in the prompt
+function estimateRagTokens(rounds) {
+    const toolCalls = rounds.reduce((s, m) => s + m.toolCalls, 0);
+    // Floor: each retrieval call fetches at least 3 results in a typical RAG setup.
+    const numResults = Math.max(rounds.reduce((s, m) => s + m.results, 0), toolCalls * 3);
+    // Round 1 input = system prompt + tool definitions + user message. RAG keeps
+    // the same prompt + user but swaps tool definitions for retrieved chunks.
+    const round1Input = rounds.length ? rounds[0].promptTokens : 3000;
+    const ragBaseContext = Math.max(round1Input - TOOL_DEF_OVERHEAD, 0);
+    const ragChunks = numResults * CHUNKS_PER_RESULT;
+    return {
+        ragInput: ragBaseContext + ragChunks * AVG_HTML_CHUNK_TOKENS,
+        ragOutput: rounds.reduce((s, m) => s + m.outputTokens, 0),
+        numResults,
+        ragChunks,
+    };
+}
+const fmt = (n) => n.toLocaleString();
+/**
+ * The contents of a pending bubble: three dots, a phase label and a byte count.
+ *
+ * The dots are separate spans rather than an animated glyph, so the motion can
+ * be disabled under `prefers-reduced-motion` while the bubble still reads as
+ * pending. The label and byte spans are filled per phase and hidden while empty.
+ */
+const THINKING_MARKUP = '<span class="think-row">' +
+    '<span class="think-dots" aria-hidden="true"><i></i><i></i><i></i></span>' +
+    '<span class="think-label"></span>' +
+    '<span class="think-bytes"></span>' +
+    '</span>';
+/** Format a byte count for display, as `"412 MB"` or `"1.6 GB"`. */
+function formatBytes(n) {
+    const mb = n / (1024 * 1024);
+    if (mb >= 1024)
+        return `${(mb / 1024).toFixed(1)} GB`;
+    return `${Math.round(mb)} MB`;
+}
+const uid = () => 'c' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+class NxisAgentFullscreen extends HTMLElement {
+    constructor() {
+        super();
+        /** True while the turn in flight can still be called off. */
+        this._stoppable = false;
+        /**
+         * Settles when the turn in flight is finished, however it finished.
+         *
+         * Edit and send-again stop the current turn before replacing the question it
+         * was answering, and a stop resolves a tick later. Without something to wait
+         * on, the re-run would race `_onSend`'s own guard and be dropped.
+         */
+        this._turnDone = null;
+        /** Built only when the host defines agents — otherwise there is one harness. */
+        this._coordinator = null;
+        this._agentDefs = null;
+        this._routes = [];
+        this._fallbackAgent = '';
+        /** The live ask/confirm surface, if one is open. */
+        this._prompt = null;
+        this._persistPrefs = false;
+        this._systemPrompt = DEFAULT_SYSTEM_PROMPT;
+        this._suggestions = DEFAULT_SUGGESTIONS;
+        this._emptyState = DEFAULT_EMPTY_STATE;
+        this._name = DEFAULT_AGENT_NAME;
+        this._logo = DEFAULT_LOGO;
+        this._theme = {};
+        /** The pending bubble currently on screen, if any — the target for progress. */
+        this._liveBubble = null;
+        /** The engine's current phase name, shown in the empty state while loading. */
+        this._stage = '';
+        /** The one discovery run, kicked off on first open and awaited before a turn. */
+        this._connect = null;
+        this._loadPct = 0;
+        /**
+         * Which mode the empty state is currently drawn in, or null when a
+         * conversation has replaced it.
+         *
+         * The load almost never starts while the empty state is being built, since
+         * opening the panel is what starts it, so the view has to notice that it moved
+         * underneath it and redraw. Without this the chips stay up through a load
+         * that was supposed to withhold them, and never come back when it ends.
+         */
+        this._emptyLoading = null;
+        /** A provider the host supplied, used instead of the local model. */
+        this._provider = null;
+        this.attachShadow({ mode: 'open' });
+        this._turnActive = false;
+        this._tool = null; // tool of the live inline form (if any)
+        this._formEl = null; // the live inline form element (transient, not persisted)
+        this._profile = {}; // device-local profile
+        this._conversations = []; // [{ id, title, messages, items }]
+        this._activeId = null;
+        this._surfaces = [];
+        // Opt out with a2ui="false" to compare against the inline renderers, which
+        // are kept rather than deleted, since the basic catalog cannot express the tag
+        // colours, links and logo chip they use.
+        this._useA2ui = this.getAttribute('a2ui') !== 'false';
+    }
+    connectedCallback() {
+        this.shadowRoot.innerHTML = this._template();
+        this._applyIdentity();
+        this._applyTheme();
+        const root = this.shadowRoot;
+        this._els = {
+            launcher: root.querySelector('.launcher'),
+            overlay: root.querySelector('.overlay'),
+            close: root.querySelector('.close'),
+            menu: root.querySelector('.menu'),
+            scrim: root.querySelector('.scrim'),
+            newchat: root.querySelector('.newchat'),
+            history: root.querySelector('.history'),
+            thread: root.querySelector('.thread'),
+            status: root.querySelector('.statusline'),
+            bar: root.querySelector('.prog > i'),
+            input: root.querySelector('.composer textarea'),
+            go: root.querySelector('.composer .go'),
+        };
+        // A host-supplied provider wins; otherwise the local model, configured from
+        // the attributes that only mean anything to it.
+        this.provider =
+            this._provider ??
+                new LocalGemmaProvider({
+                    modelHost: this.getAttribute('model-host') || undefined,
+                    modelPathTemplate: this.getAttribute('model-path-template') || undefined,
+                    // cache="false" skips Cache Storage: the escape hatch for a browser
+                    // whose cache backend fails on entries this size.
+                    useBrowserCache: this.getAttribute('cache') !== 'false',
+                    systemPrompt: this._systemPrompt,
+                    onStatus: (t, e) => this._setStatus(t, e),
+                    onProgress: (pct, detail) => {
+                        this._loadPct = pct;
+                        this._loadDetail = detail;
+                        this._setBar(pct);
+                        this._liveBubble?.setProgress(pct, detail);
+                        this._paintLoad();
+                    },
+                });
+        this.toolSource = new WebMcpTools();
+        this._paintProvenance();
+        this._buildAgents();
+        // The element renders; the harness decides. Everything from choosing a
+        // tool to running it happens behind harness.turn().
+        this._harness = new AgentHarness({
+            provider: this.provider,
+            toolSource: this.toolSource,
+            renderer: this._renderer(),
+            profile: (schema) => this._profileForSchema(schema),
+            onMessages: () => this._saveConversations(),
+        });
+        // Preferences are supplied by the host page through `element.preferences`.
+        // Anything a previous build persisted is picked up so upgrading does not
+        // silently drop a user's saved details; `persist` then stays true so they
+        // are not silently dropped on the next write either.
+        this._prefsApi = this._buildPreferencesApi();
+        this._profile = this._loadProfile();
+        this._persistPrefs = Object.keys(this._profile).length > 0;
+        // Conversation history.
+        this._loadConversations();
+        this._renderHistory();
+        this._renderThread();
+        this._els.launcher.addEventListener('click', () => this._open());
+        this._els.close.addEventListener('click', () => {
+            this._els.overlay.classList.remove('show');
+            // A remote turn can outlive the panel, and its answer would go unread.
+            this._setStoppable(false);
+            (this._coordinator ?? this._harness).stop();
+        });
+        this._els.menu.addEventListener('click', () => this._setNav(!this._navOpen()));
+        // Tapping the conversation is how a drawer is dismissed everywhere else.
+        // The drawer is a fixed 280px, so on any phone a strip of the thread stays
+        // visible beside it, and that strip is the target.
+        this._els.scrim.addEventListener('click', () => this._setNav(false));
+        this._els.newchat.addEventListener('click', () => this._newConversation());
+        this._els.go.addEventListener('click', () => {
+            // One control, two jobs. A separate stop button would be inactive for
+            // most of a conversation, and appears where attention is not.
+            if (this._stoppable)
+                this._stopTurn();
+            else
+                this._onSend();
+        });
+        this._els.input.addEventListener('input', () => this._autosize());
+        this._els.input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this._onSend();
+            }
+        });
+        // Escape stops the turn, and only that. Closing the panel on the same key
+        // would mean the reflex for "wait, no" also throws away the thread it was
+        // aimed at, and the two mistakes look identical until it is too late.
+        this._els.overlay.addEventListener('keydown', (e) => {
+            if (e.key !== 'Escape')
+                return;
+            // The drawer is on top of everything, so it is what Escape is aimed at
+            // while it is open. Only once it is gone does the key reach the turn.
+            if (this._navOpen()) {
+                e.preventDefault();
+                e.stopPropagation();
+                this._setNav(false);
+                return;
+            }
+            if (!this._stoppable)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this._stopTurn();
+        });
+        const preload = this.preload;
+        if (preload !== 'none')
+            this.provider.preload?.(preload);
+        if (this.hasAttribute('auto-open'))
+            this._open();
+    }
+    _navOpen() {
+        return this._els.overlay.classList.contains('nav');
+    }
+    /**
+     * Show or hide the conversation drawer.
+     *
+     * On a narrow screen the drawer covers the panel, including the button that
+     * opened it, so every way out has to be somewhere else: the strip of
+     * conversation beside it, Escape, or picking a conversation.
+     */
+    _setNav(open) {
+        this._els.overlay.classList.toggle('nav', open);
+        this._els.menu.setAttribute('aria-expanded', String(open));
+        // Kept out of the accessibility tree and out of the tab order when closed:
+        // a full-bleed element that swallows taps is not something to leave lying
+        // over the conversation.
+        this._els.scrim.hidden = !open;
+        // Focus follows the drawer, returning to the control it came from.
+        if (!open)
+            this._els.menu.focus();
+    }
+    /** Programmatic open (used by pages that dock the agent full-page). */
+    open() {
+        this._open();
+    }
+    _open() {
+        this._els.overlay.classList.add('show');
+        this._els.input.focus();
+        void this._connectTools();
+        (this.provider.load?.() ?? Promise.resolve())
+            // A finished load has to redraw too: the chips were withheld while it ran.
+            .then(() => this._paintLoad())
+            .catch((err) => this._reportEngineError(err));
+        // ensureEngine flips `loading` synchronously, so the empty state can switch
+        // to the stage view now rather than waiting for the first status callback.
+        this._paintLoad();
+    }
+    // ── Conversations ──────────────────────────────────────────────────────────
+    _loadConversations() {
+        try {
+            const arr = JSON.parse(localStorage.getItem(CONV_KEY) || 'null');
+            if (Array.isArray(arr) && arr.length) {
+                this._conversations = arr;
+                this._activeId = arr[0].id;
+                return;
+            }
+        }
+        catch {
+            /* fall through to a fresh one */
+        }
+        this._newConversation();
+    }
+    _saveConversations() {
+        try {
+            // Live forms are transient: persist only finalized thread items.
+            const slim = this._conversations.map((c) => ({
+                id: c.id,
+                title: c.title,
+                messages: c.messages,
+                items: c.items.filter((it) => it.kind !== 'form'),
+            }));
+            localStorage.setItem(CONV_KEY, JSON.stringify(slim));
+        }
+        catch {
+            /* storage blocked/full */
+        }
+    }
+    _active() {
+        return this._conversations.find((c) => c.id === this._activeId) || null;
+    }
+    _newConversation() {
+        const conv = {
+            id: uid(),
+            title: 'New conversation',
+            messages: [{ role: 'system', content: this._systemPrompt }],
+            items: [],
+        };
+        this._conversations.unshift(conv);
+        this._activeId = conv.id;
+        this._tool = null;
+        this._formEl = null;
+        this._syncProfileContext();
+        this._setNav(false);
+        if (this._els.history) {
+            this._renderHistory();
+            this._renderThread();
+            this._saveConversations();
+        }
+        if (this._els.input)
+            this._els.input.focus();
+    }
+    _switchConversation(id) {
+        if (id === this._activeId)
+            return;
+        this._activeId = id;
+        this._tool = null;
+        this._formEl = null;
+        this._syncProfileContext();
+        this._setNav(false);
+        this._renderHistory();
+        this._renderThread();
+    }
+    _renderHistory() {
+        this._els.history.innerHTML = this._conversations
+            .map((c) => `<div class="hist-row${c.id === this._activeId ? ' active' : ''}">
+        <button class="hist-item" data-id="${c.id}">${escapeHtml(c.title || 'New conversation')}</button>
+        <button class="hist-del" data-id="${c.id}" title="Delete conversation" aria-label="Delete conversation">${ICON_TRASH}</button>
+      </div>`)
+            .join('');
+        this._els.history.querySelectorAll('.hist-item').forEach((b) => b.addEventListener('click', () => this._switchConversation(b.dataset.id)));
+        this._els.history.querySelectorAll('.hist-del').forEach((b) => b.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._deleteConversation(b.dataset.id);
+        }));
+    }
+    _deleteConversation(id) {
+        const idx = this._conversations.findIndex((c) => c.id === id);
+        if (idx === -1)
+            return;
+        const wasActive = id === this._activeId;
+        this._conversations.splice(idx, 1);
+        if (!this._conversations.length) {
+            this._newConversation(); // creates a fresh one + re-renders + saves
+            return;
+        }
+        if (wasActive) {
+            this._activeId = this._conversations[Math.min(idx, this._conversations.length - 1)].id;
+            this._tool = null;
+            this._formEl = null;
+            this._syncProfileContext();
+            this._renderThread();
+        }
+        this._renderHistory();
+        this._saveConversations();
+    }
+    // ── Thread rendering ───────────────────────────────────────────────────────
+    _renderThread() {
+        const t = this._els.thread;
+        // innerHTML = '' detaches the surface elements but leaves their processors
+        // subscribed; dispose explicitly before dropping the references.
+        for (const s of this._surfaces) {
+            try {
+                s.dispose();
+            }
+            catch { /* already disposed */ }
+        }
+        this._surfaces = [];
+        t.innerHTML = '';
+        this._emptyLoading = null;
+        const conv = this._active();
+        if (!conv || !conv.items.length) {
+            // The mark doubles as the loading indicator, with a ring filling around
+            // it while the weights download, rather than adding a second widget.
+            //
+            // The suggestions are withheld until the model exists, since tapping one
+            // before then would do nothing.
+            const loading = (this.provider?.load ? this.provider.loading : false) ?? false;
+            this._emptyLoading = loading;
+            const body = loading
+                ? `<p class="stage">${escapeHtml(this._stage || 'Loading model…')}</p>` +
+                    `<p class="stage-bytes"></p>`
+                : `<p>${escapeHtml(this._emptyState)}</p>` +
+                    `<div class="chips appear">` +
+                    this._suggestions.map((c) => `<button class="chip">${escapeHtml(c)}</button>`).join('') +
+                    `</div>`;
+            t.innerHTML =
+                `<div class="empty">` +
+                    `<span class="empty-mark"><span class="ring" hidden></span>${this._logoMarkup()}</span>` +
+                    body +
+                    `</div>`;
+            this._paintLoad();
+            t.querySelectorAll('.chip').forEach((b) => b.addEventListener('click', () => {
+                this._els.input.value = b.textContent || '';
+                this._onSend();
+            }));
+            return;
+        }
+        for (let i = 0; i < conv.items.length; i++) {
+            const it = conv.items[i];
+            if (it.kind === 'msg')
+                this._paintMsg(it.role, it.text, i);
+            else if (it.kind === 'tool')
+                this._paintToolResult(it.name, it.text, it.isError);
+            else if (it.kind === 'trace') {
+                if (this.debug)
+                    this._els.thread.appendChild(this._traceEl(it));
+            }
+            else if (it.kind === 'stopped') {
+                this._paintStopped();
+            }
+            else if (it.kind === 'route') {
+                if (this.debug)
+                    this._els.thread.appendChild(this._routeEl(it));
+            }
+            else if (it.kind === 'detail')
+                this._els.thread.appendChild(this._detailEl(it));
+            else if (it.kind === 'results')
+                this._els.thread.appendChild(this._resultsEl(it));
+            else if (it.kind === 'metrics')
+                this._els.thread.appendChild(this._metricsEl(it));
+        }
+        this._scroll();
+    }
+    _clearEmpty() {
+        const e = this._els.thread.querySelector('.empty');
+        if (e)
+            e.remove();
+    }
+    /**
+     * A chat bubble.
+     *
+     * `.msg` styles the bubble and also wraps non-bubble content, so the form,
+     * detail and results wrappers each had to undo it (`background: none;
+     * border: none; padding: 0`. Splitting the two roles removes that undo:
+     * bubbles get bubble utilities, wrappers get layout utilities, and neither
+     * has to know about the other.
+     *
+     * The squared corner nearest the sender is the one carrying information: it
+     * is how a glance tells user from assistant before any colour is read.
+     */
+    _msgEl(role, text) {
+        const el = document.createElement('div');
+        const base = 'max-w-[76%] whitespace-pre-wrap break-words px-3.5 py-2.5 text-sm leading-relaxed';
+        const byRole = role === 'user'
+            ? 'self-end bg-blue text-white rounded-2xl rounded-br-md'
+            : 'self-start bg-surface text-ink border border-border-hair rounded-2xl rounded-bl-md shadow-resting';
+        el.className = `msg ${role} ${base} ${byRole}`;
+        el.textContent = text;
+        return el;
+    }
+    /**
+     * A tool outcome.
+     *
+     * Not a bubble, since nobody said it. Styled as a system line: full width, mono
+     * eyebrow for the tool name, and the result beneath in body text. Colour
+     * carries the outcome (design.md §2: green is a positive result, and error
+     * red is reserved for actual failure).
+     */
+    _toolEl(name, text, isError) {
+        const el = document.createElement('div');
+        el.className =
+            'msg tool self-stretch w-full rounded-card border px-3.5 py-2.5 ' +
+                (isError
+                    ? 'bg-surface border-red/25 text-red'
+                    : 'bg-surface border-border-hair text-green-strong');
+        el.innerHTML =
+            `<b class="flex items-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em]">` +
+                `${isError ? ICON_WARN : ICON_CHECK}${escapeHtml(name)}</b>` +
+                `<div class="mt-1 font-sans text-[13px] leading-normal text-ink-2">${escapeHtml(text)}</div>`;
+        return el;
+    }
+    _detailEl(item) {
+        const rows = (item.rows || [])
+            .map((r) => `<div class="dc-row"><dt>${escapeHtml(r.label)}</dt><dd>${escapeHtml(r.value)}</dd></div>`)
+            .join('');
+        const el = document.createElement('div');
+        el.className = 'msg detail';
+        el.innerHTML = `
+      <div class="detailcard">
+        <div class="dc-badge">${ICON_CHECK}</div>
+        <div class="dc-eyebrow">Submitted</div>
+        <div class="dc-title">${escapeHtml(item.title)}</div>
+        <div class="dc-sub">${escapeHtml(item.note)}</div>
+        <dl class="dc-list">${rows || '<div class="dc-row"><dd>No details captured.</dd></div>'}</dl>
+      </div>`;
+        return el;
+    }
+    /**
+     * Draw one message.
+     *
+     * A message the user sent carries a row of actions, so `index` identifies
+     * which item it is: copy needs the text, and edit and send-again need to know
+     * how much of the conversation they will replace.
+     *
+     * @param role - Who sent the message.
+     * @param text - The message text.
+     * @param index - Its position in the conversation's items. Required for the
+     * action bar; omit it for messages that should not carry one.
+     * @returns The bubble element.
+     */
+    _paintMsg(role, text, index) {
+        this._clearEmpty();
+        const el = this._msgEl(role, text);
+        if (role !== 'user' || index === undefined) {
+            this._els.thread.appendChild(el);
+            return el;
+        }
+        const turn = document.createElement('div');
+        turn.className = 'turn';
+        // Focusable so the row can be reached without a pointer: `:focus-within`
+        // is what reveals it, and a bubble that cannot take focus never fires it.
+        turn.tabIndex = -1;
+        turn.dataset.item = String(index);
+        turn.appendChild(el);
+        turn.appendChild(this._actionBar(index, text));
+        this._els.thread.appendChild(turn);
+        return el;
+    }
+    /** Copy, edit, send again, under the person's own message. */
+    _actionBar(index, text) {
+        const bar = document.createElement('div');
+        bar.className = 'actions';
+        bar.innerHTML =
+            `<button class="act" data-act="copy" type="button" aria-label="Copy message" title="Copy">${ICON_COPY}</button>` +
+                `<button class="act" data-act="edit" type="button" aria-label="Edit message" title="Edit">${ICON_PENCIL}</button>` +
+                `<button class="act" data-act="resend" type="button" aria-label="Send again" title="Send again">${ICON_REDO}</button>`;
+        const copy = bar.querySelector('[data-act="copy"]');
+        copy.addEventListener('click', () => {
+            // The tick is the confirmation; a toast would be redundant.
+            navigator.clipboard?.writeText(text).catch(() => { });
+            copy.innerHTML = ICON_CHECK_MARK;
+            copy.classList.add('done');
+            copy.setAttribute('aria-label', 'Copied');
+            setTimeout(() => {
+                copy.innerHTML = ICON_COPY;
+                copy.classList.remove('done');
+                copy.setAttribute('aria-label', 'Copy message');
+            }, 1400);
+        });
+        bar
+            .querySelector('[data-act="resend"]')
+            .addEventListener('click', () => void this._rerunFrom(index, text));
+        bar
+            .querySelector('[data-act="edit"]')
+            .addEventListener('click', () => this._editMessage(index, text));
+        return bar;
+    }
+    /**
+     * Turn the bubble into a field where it already sits.
+     *
+     * Not the composer. Editing in the composer means looking at one copy of the
+     * sentence while typing into another, and the one being changed is the one
+     * further from the eye.
+     */
+    _editMessage(index, text) {
+        const turn = this._els.thread.querySelector(`.turn[data-item="${index}"]`);
+        if (!turn)
+            return;
+        const box = document.createElement('div');
+        box.className = 'editing';
+        box.innerHTML =
+            `<textarea rows="2"></textarea>` +
+                `<div class="edit-actions">` +
+                `<button class="ebtn" data-e="cancel" type="button">Cancel</button>` +
+                `<button class="ebtn primary" data-e="save" type="button">Send</button>` +
+                `</div>`;
+        const hint = document.createElement('div');
+        hint.className = 'edit-hint';
+        // Said before the commit, not after. Editing the first of five turns throws
+        // away the four below it, because they answered a question that no longer
+        // exists, and that is not something to discover by watching it happen.
+        hint.textContent = 'everything below is replaced when this is sent';
+        const ta = box.querySelector('textarea');
+        ta.value = text;
+        turn.replaceWith(box);
+        box.after(hint);
+        ta.focus();
+        ta.setSelectionRange(ta.value.length, ta.value.length);
+        const close = () => {
+            hint.remove();
+            box.remove();
+            this._renderThread();
+        };
+        const send = () => {
+            const next = ta.value.trim();
+            if (!next)
+                return;
+            void this._rerunFrom(index, next);
+        };
+        box.querySelector('[data-e="cancel"]').addEventListener('click', close);
+        box.querySelector('[data-e="save"]').addEventListener('click', send);
+        ta.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                close();
+            }
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                send();
+            }
+        });
+    }
+    /**
+     * Send a message again from this point, replacing everything below it.
+     *
+     * Discards the following items and messages from both the thread and the
+     * transcript, since they answered a question that no longer exists.
+     *
+     * @param index - The item index of the message to resend.
+     * @param text - The message to send, edited or unchanged.
+     */
+    async _rerunFrom(index, text) {
+        if (!this._active())
+            return;
+        // The turn in flight is answering the question being replaced.
+        if (this._turnActive) {
+            this._stopTurn();
+            await this._turnDone;
+        }
+        this._truncateFrom(index);
+        this._renderThread();
+        this._els.input.value = text;
+        this._autosize();
+        await this._onSend();
+    }
+    /**
+     * Drop every item and every message from `index` down, the message itself
+     * included: it is about to be sent again.
+     */
+    _truncateFrom(index) {
+        const conv = this._active();
+        if (!conv)
+            return;
+        let turns = 0;
+        for (let i = 0; i < index; i++) {
+            const it = conv.items[i];
+            if (it.kind === 'msg' && it.role === 'user')
+                turns++;
+        }
+        // Tool results are written into the transcript as user turns too, so the
+        // person's own messages are the unbracketed ones.
+        let seen = 0;
+        let cut = conv.messages.length;
+        for (let i = 0; i < conv.messages.length; i++) {
+            const m = conv.messages[i];
+            if (m.role !== 'user' || m.content.startsWith('['))
+                continue;
+            if (seen++ === turns) {
+                cut = i;
+                break;
+            }
+        }
+        conv.messages.length = cut;
+        conv.items.length = index;
+        this._saveConversations();
+    }
+    /**
+     * The receipt for a tool call: one muted line, collapsed.
+     *
+     * `<details>` rather than a button and a class, because the summary is a
+     * real disclosure control, so keyboard, screen reader and find-in-page all
+     * work without anything being wired up. Closed by default: this is the row
+     * a person scrolls past, and opens only when the answer above it looks
+     * wrong.
+     */
+    _traceEl(item) {
+        const el = document.createElement('details');
+        el.className = `trace${item.isError ? ' err' : ''}`;
+        const summary = document.createElement('summary');
+        const verb = item.isError ? 'failed' : 'ran';
+        const outcome = item.isError
+            ? 'error'
+            : typeof item.count === 'number'
+                ? `${item.count} result${item.count === 1 ? '' : 's'}`
+                : 'ok';
+        summary.innerHTML =
+            `<span class="caret" aria-hidden="true"></span>` +
+                `<span>${escapeHtml(humanize(item.name))} ${verb} · ${escapeHtml(outcome)}</span>`;
+        el.appendChild(summary);
+        const body = document.createElement('div');
+        body.className = 'trace-body';
+        const args = JSON.stringify(item.args ?? {}, null, 2);
+        body.innerHTML =
+            `<span class="trace-label">Call</span>` +
+                `<pre>${escapeHtml(`${item.name}(${args === '{}' ? '' : args})`)}</pre>` +
+                `<span class="trace-label">Response</span>` +
+                `<pre class="raw">${escapeHtml(item.text || '(empty)')}</pre>`;
+        el.appendChild(body);
+        return el;
+    }
+    _paintToolResult(name, text, isError) {
+        this._clearEmpty();
+        const el = this._toolEl(name, text, isError);
+        this._els.thread.appendChild(el);
+        return el;
+    }
+    /** Append a bubble both to the persisted thread and the DOM. */
+    /**
+     * Call off the turn in flight.
+     *
+     * The note left in the thread is presented neutrally: a stop is neither an
+     * error nor a refusal, so it is not styled as a warning.
+     */
+    _stopTurn() {
+        if (!this._stoppable)
+            return;
+        this._setStoppable(false);
+        (this._coordinator ?? this._harness).stop();
+        const conv = this._active();
+        if (conv) {
+            conv.items.push({ kind: 'stopped' });
+            this._saveConversations();
+        }
+        this._paintStopped();
+        this._setStatus('');
+        this._scroll();
+        this._els.input.focus();
+    }
+    _paintStopped() {
+        const el = document.createElement('div');
+        el.className = 'stopped-note';
+        el.textContent = 'Stopped';
+        this._els.thread.appendChild(el);
+        return el;
+    }
+    /** Swap the composer button between sending and stopping. */
+    _setStoppable(canStop) {
+        if (this._stoppable === canStop)
+            return;
+        this._stoppable = canStop;
+        const go = this._els.go;
+        go.classList.toggle('stop', canStop);
+        go.innerHTML = canStop ? ICON_STOP : ICON_ARROW;
+        go.setAttribute('aria-label', canStop ? 'Stop' : 'Send');
+        // Enabled either way: disabling it during a turn would disable the very
+        // control needed to stop that turn.
+        go.disabled = false;
+    }
+    _appendMsg(role, text) {
+        const conv = this._active();
+        conv.items.push({ kind: 'msg', role, text });
+        const el = this._paintMsg(role, text, conv.items.length - 1);
+        this._saveConversations();
+        this._scroll();
+        return el;
+    }
+    /**
+     * The assistant's bubble for one phase of a turn.
+     *
+     * Starts as an animated thinking indicator rather than a static ellipsis: a
+     * turn can be silent for tens of seconds while weights download, and a
+     * motionless dot is indistinguishable from a hung page. The first token
+     * replaces the indicator with text, and only a non-empty `finalize` persists
+     * the bubble into the stored conversation.
+     */
+    _appendStreaming() {
+        const el = this._paintMsg('assistant', '');
+        el.classList.add('thinking');
+        el.innerHTML = THINKING_MARKUP;
+        // The bubble is a live region so a screen reader hears the phase change
+        // without the focus moving to it.
+        el.setAttribute('aria-live', 'polite');
+        this._scroll();
+        const setLabel = (label) => {
+            const node = el.querySelector('.think-label');
+            if (node)
+                node.textContent = label ?? '';
+        };
+        /**
+         * Show byte counts for the current phase, or nothing.
+         *
+         * Only the weight download reports totals. The runtime fetch and the warm-up
+         * do not, and those phases show the dots alone rather than an empty readout.
+         */
+        const setProgress = (_pct, detail) => {
+            const bytes = el.querySelector('.think-bytes');
+            if (!bytes)
+                return;
+            // Figures rather than a bar: the ring on the header mark already carries
+            // the proportion, and what it cannot show is how much is left in bytes.
+            bytes.textContent = detail?.total
+                ? `${formatBytes(detail.loaded)} / ${formatBytes(detail.total)}`
+                : '';
+        };
+        const bubble = {
+            // Naming a new phase reuses the same bubble, so a turn that loads, then
+            // discovers, then generates remains one element in the thread rather than
+            // three that appear and vanish.
+            thinking: (label) => {
+                if (!el.classList.contains('thinking')) {
+                    el.classList.add('thinking');
+                    el.innerHTML = THINKING_MARKUP;
+                }
+                setLabel(label);
+                this._scroll();
+            },
+            // `t` is the whole answer so far, not the newest fragment; assigning it
+            // is correct; appending would repeat the answer on every token.
+            update: (t) => {
+                if (!t)
+                    return;
+                // First token: drop the indicator and become an ordinary bubble. The
+                // live region goes with it, since announcing a streaming answer word by
+                // word would talk over the reader.
+                if (el.classList.contains('thinking')) {
+                    el.classList.remove('thinking');
+                    el.removeAttribute('aria-live');
+                    el.innerHTML = '';
+                    if (this._liveBubble === bubble)
+                        this._liveBubble = null;
+                }
+                el.textContent = t;
+                this._scroll();
+            },
+            // Empty text means the phase had nothing to leave behind (a finished
+            // tool call, a failed load), so the bubble goes rather than lingering as
+            // a blank one. Anything else is persisted; a pending indicator never is.
+            finalize: (t) => {
+                el.classList.remove('thinking');
+                el.removeAttribute('aria-live');
+                if (this._liveBubble === bubble)
+                    this._liveBubble = null;
+                if (!t) {
+                    el.remove();
+                    return;
+                }
+                el.textContent = t;
+                this._active().items.push({ kind: 'msg', role: 'assistant', text: t });
+                this._saveConversations();
+                this._scroll();
+            },
+            setProgress,
+        };
+        // The engine reports progress to the element, not through the turn loop,
+        // so the element has to know which bubble is currently on screen.
+        this._liveBubble = bubble;
+        return bubble;
+    }
+    // ── Turn loop ──────────────────────────────────────────────────────────────
+    async _onSend() {
+        const goal = this._els.input.value.trim();
+        if (!goal || this._turnActive)
+            return;
+        this._els.input.value = '';
+        this._autosize();
+        this._appendMsg('user', goal);
+        const conv = this._active();
+        if (conv && (!conv.title || conv.title === 'New conversation')) {
+            conv.title = goal.length > 40 ? goal.slice(0, 40) + '…' : goal;
+            this._renderHistory();
+            this._saveConversations();
+        }
+        this._turnActive = true;
+        this._setStoppable(true);
+        let settle;
+        this._turnDone = new Promise((r) => (settle = r));
+        try {
+            // The toolset has to be complete before the model is asked to choose from
+            // it. Discovery normally finished while the weights were downloading; this
+            // only waits when a message is sent the instant the panel opens.
+            await this._connectTools();
+            this._syncProfileContext();
+            // One agent, or several with a router in front: the signatures match.
+            await (this._coordinator ?? this._harness).turn(goal, conv.messages);
+        }
+        catch (err) {
+            // A cancelled turn has already reported itself in the thread, and is not
+            // a failure to report a second time.
+            if (!isAbort(err))
+                this._reportEngineError(err);
+        }
+        finally {
+            this._turnActive = false;
+            this._setStoppable(false);
+            this._turnDone = null;
+            settle();
+        }
+    }
+    // ── HarnessRenderer ────────────────────────────────────────────────────────
+    /**
+     * The element's implementation of {@link HarnessRenderer}.
+     *
+     * Drawing and reporting back only: whether to ask, what to ask for, and when
+     * to run a tool are all decided by the harness.
+     */
+    _renderer() {
+        return {
+            message: (role, text) => this._appendMsg(role, text),
+            streaming: () => this._appendStreaming(),
+            status: (text, isError) => this._setStatus(text, isError),
+            ask: (req) => this._renderAsk(req),
+            confirm: (req) => this._renderConfirm(req),
+            results: (tool, res) => {
+                const conv = this._active();
+                const item = this._buildResultsItem(tool, res);
+                conv?.items.push(item);
+                this._els.thread.appendChild(this._resultsEl(item));
+                this._upsertMetrics();
+                this._saveConversations();
+                this._scroll();
+            },
+            detail: (tool, values, text) => {
+                const conv = this._active();
+                const item = this._buildDetailItem(tool, values, text);
+                conv?.items.push(item);
+                this._els.thread.appendChild(this._detailEl(item));
+                this._saveConversations();
+                this._scroll();
+            },
+            trace: ({ tool, args, text, isError, count }) => {
+                // Not recorded at all when debugging is off. See the `debug` getter.
+                if (!this.debug)
+                    return;
+                const item = {
+                    kind: 'trace',
+                    name: tool.name,
+                    args,
+                    text,
+                    isError,
+                    count,
+                };
+                this._active()?.items.push(item);
+                this._els.thread.appendChild(this._traceEl(item));
+                this._saveConversations();
+                this._scroll();
+            },
+            toolError: (tool, message) => this._paintToolResult(tool.name, message, true),
+            dismissPrompt: () => this._dismissPrompt(),
+            // The harness says when stopping stops being possible, because it is the
+            // part that knows a tool has been invoked. Once a call is out, offering
+            // to stop would be offering to un-send a booking.
+            stoppable: (canStop) => this._setStoppable(canStop),
+        };
+    }
+    _dismissPrompt() {
+        if (this._prompt) {
+            try {
+                this._prompt.dispose();
+            }
+            catch { /* already gone */ }
+            this._prompt = null;
+        }
+        if (this._formEl && this._formEl.isConnected)
+            this._formEl.remove();
+        this._formEl = null;
+    }
+    /** Mount an A2UI prompt surface into the thread. */
+    _mountPrompt(messages, onAction) {
+        this._clearEmpty();
+        this._dismissPrompt();
+        const wrap = document.createElement('div');
+        wrap.className = 'form a2ui a2ui-scope self-start w-full max-w-[420px]';
+        const mounted = mountSurface(wrap, messages, (event) => {
+            const name = event?.event?.name ?? event?.name ?? '';
+            const ctx = (event?.event?.context ?? event?.context ?? {});
+            onAction(String(name), ctx);
+        });
+        if (!mounted)
+            return null;
+        this._els.thread.appendChild(wrap);
+        this._formEl = wrap;
+        this._prompt = mounted;
+        this._surfaces.push(mounted);
+        this._scroll();
+        return mounted;
+    }
+    /** Gaps to fill — one question, or a wizard when the plan has several. */
+    _renderAsk(req) {
+        const { tool, plan } = req;
+        if (!plan.steps.length) {
+            req.onComplete({});
+            return;
+        }
+        let step = 0;
+        const mounted = this._mountPrompt(emitAsk(tool.name, plan, req.resolution.values, 'ask'), (name, ctx) => {
+            if (name === 'nxis.cancel') {
+                req.onCancel();
+                return;
+            }
+            if (name === 'nxis.back') {
+                step = Math.max(0, step - 1);
+                this._prompt?.send(emitStep('ask', tool.name, plan, step));
+                return;
+            }
+            if (name === 'nxis.next') {
+                // Do not advance past an unanswered question: the step exists
+                // precisely because this value is unknown.
+                const form = (this._prompt?.read('form') ?? {});
+                const unanswered = plan.steps[step].slots.filter((sl) => { const v = form[sl.name]; return v === undefined || v === null || String(v).trim() === ''; });
+                if (unanswered.length) {
+                    this._setStatus(`Please answer: ${unanswered.map((sl) => humanize(sl.name)).join(', ')}`, true);
+                    return;
+                }
+                this._setStatus('');
+                step = Math.min(plan.steps.length - 1, step + 1);
+                this._prompt?.send(emitStep('ask', tool.name, plan, step));
+                return;
+            }
+            if (name === 'nxis.submit') {
+                const form = (this._prompt?.read('form') ?? {});
+                req.onComplete(form);
+            }
+            void ctx;
+        });
+        // A renderer failure must not strand the turn; fall back to the DOM form.
+        if (!mounted)
+            this._renderFormLegacy(tool, req.resolution.values);
+    }
+    /**
+     * Show what a write will send, and wait for the user to submit it.
+     *
+     * Drawn as DOM rather than an A2UI surface so the confirmation matches the
+     * detail card it becomes once submitted. A2UI's basic catalog cannot express
+     * that styling: each component nests its own shadow root, and the `--a2ui-*`
+     * properties that reach inside are per component type rather than per
+     * instance. `emitConfirm` remains available for renderers that prefer the
+     * surface.
+     */
+    _renderConfirm(req) {
+        this._clearEmpty();
+        this._dismissPrompt();
+        const rows = req.slots
+            .map((sl) => `<div class="dc-row"><dt>${escapeHtml(sl.schema.description || humanize(sl.name))}</dt><dd>${escapeHtml(String(sl.value ?? ''))}</dd></div>`)
+            .join('');
+        const wrap = document.createElement('div');
+        wrap.className = 'msg detail';
+        wrap.innerHTML = `
+      <div class="detailcard">
+        <div class="dc-badge review">${ICON_ARROW}</div>
+        <div class="dc-eyebrow review">Ready to send</div>
+        <div class="dc-title">${escapeHtml(humanize(req.tool.name))}</div>
+        <div class="dc-sub">Review these details, then submit.</div>
+        <dl class="dc-list">${rows || '<div class="dc-row"><dd>No details captured.</dd></div>'}</dl>
+        <div class="dc-actions">
+          <button type="button" class="btn ghost" data-act="cancel">Cancel</button>
+          <button type="button" class="btn ghost" data-act="edit">Edit</button>
+          <button type="button" class="btn primary" data-act="submit">Submit ${ICON_ARROW}</button>
+        </div>
+      </div>`;
+        wrap.querySelector('[data-act="cancel"]').addEventListener('click', () => req.onCancel());
+        wrap.querySelector('[data-act="edit"]').addEventListener('click', () => req.onEdit());
+        wrap.querySelector('[data-act="submit"]').addEventListener('click', () => {
+            const btn = wrap.querySelector('[data-act="submit"]');
+            btn.disabled = true;
+            req.onSubmit(req.values);
+        });
+        this._els.thread.appendChild(wrap);
+        this._formEl = wrap;
+        this._scroll();
+    }
+    // ── Inline generated form (from JSON-Schema) ───────────────────────────────
+    _renderForm(tool, args) {
+        if (this._useA2ui) {
+            try {
+                this._renderFormA2ui(tool, args);
+                return;
+            }
+            catch (err) {
+                // Never strand the user without a form; fall through to the DOM one.
+                console.warn('[a2ui] form surface failed, using inline form', err);
+            }
+        }
+        this._renderFormLegacy(tool, args);
+    }
+    /** The tool form as an A2UI surface rather than hand-built DOM. */
+    _renderFormA2ui(tool, args) {
+        this._clearEmpty();
+        this._tool = tool;
+        const wrap = document.createElement('div');
+        wrap.className = 'form a2ui a2ui-scope self-start w-full max-w-[420px]';
+        const surfaceHost = document.createElement('div');
+        // The status line stays outside the surface: reporting progress and errors
+        // is the host's job, and the basic catalog has no component for it.
+        const result = document.createElement('div');
+        result.className = 'genform-result';
+        wrap.append(surfaceHost, result);
+        const messages = emitToolForm(tool.name, (tool.description || '').trim(), toolSchema(tool), args);
+        const mounted = mountSurface(surfaceHost, messages, (event) => {
+            const name = event?.event?.name ?? event?.name;
+            if (name === 'nxis.cancel') {
+                this._cancelForm();
+                return;
+            }
+            if (name !== 'nxis.submit')
+                return;
+            const values = (mounted?.read('form') ?? {});
+            const missing = missingRequired(tool, values);
+            if (missing.length) {
+                this._showFormError(result, `Please fill in: ${missing.map((m) => humanize(m)).join(', ')}.`);
+                this._setStatus('');
+                return;
+            }
+            void this._submitValues(tool, values, result, () => { });
+        });
+        if (!mounted)
+            throw new Error('no form surface produced');
+        this._surfaces.push(mounted);
+        if (this._formEl && this._formEl.isConnected)
+            this._formEl.remove();
+        this._els.thread.appendChild(wrap);
+        this._formEl = wrap;
+        this._scroll();
+    }
+    _renderFormLegacy(tool, args) {
+        this._clearEmpty();
+        this._tool = tool;
+        const schema = toolSchema(tool);
+        const props = schema.properties || {};
+        const required = new Set(schema.required || []);
+        const fields = Object.entries(props)
+            .map(([key, spec]) => {
+            const id = `f_${key}`;
+            const label = `${humanize(key)}${required.has(key) ? ' <span class="req">*</span>' : ''}`;
+            return `<div class="field"><label for="${id}">${label}</label>${this._control(id, key, spec || {}, args[key])}</div>`;
+        })
+            .join('');
+        const wrap = document.createElement('div');
+        wrap.className = 'msg form';
+        wrap.innerHTML = `
+      <form class="genform" novalidate>
+        <div class="genform-head">
+          <div class="gf-tool">${escapeHtml(humanize(tool.name))}</div>
+          <div class="gf-desc">${escapeHtml((tool.description || '').trim())}</div>
+        </div>
+        ${fields || '<p class="gf-empty">This tool takes no inputs.</p>'}
+        <div class="genform-actions">
+          <button type="button" class="btn ghost" data-act="cancel">Cancel</button>
+          <button type="submit" class="btn primary">Submit ${ICON_ARROW}</button>
+        </div>
+        <div class="genform-result"></div>
+      </form>`;
+        if (this._formEl && this._formEl.isConnected)
+            this._formEl.remove();
+        this._els.thread.appendChild(wrap);
+        this._formEl = wrap;
+        const form = wrap.querySelector('.genform');
+        form.querySelector('[data-act="cancel"]').addEventListener('click', () => this._cancelForm());
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this._submitForm(tool, form);
+        });
+        const clearInvalid = (e) => e.target.classList && e.target.classList.remove('invalid');
+        form.addEventListener('input', clearInvalid);
+        form.addEventListener('change', clearInvalid);
+        this._scroll();
+    }
+    _cancelForm() {
+        if (this._formEl)
+            this._formEl.remove();
+        this._formEl = null;
+        this._tool = null;
+        this._appendMsg('assistant', 'Okay — cancelled. Tell me what you’d like to do.');
+    }
+    /** Build one input control from a property schema. */
+    _control(id, name, spec, value) {
+        const enumVals = spec.enum || (spec.items && spec.items.enum);
+        if (enumVals) {
+            const opts = enumVals
+                .map((v) => `<option value="${escapeHtml(String(v))}"${String(v) === String(value) ? ' selected' : ''}>${escapeHtml(humanize(String(v)))}</option>`)
+                .join('');
+            return `<select id="${id}" data-name="${escapeHtml(name)}"><option value="">Select…</option>${opts}</select>`;
+        }
+        if (spec.type === 'boolean') {
+            return `<label class="check"><input id="${id}" data-name="${escapeHtml(name)}" type="checkbox"${value ? ' checked' : ''}> Yes</label>`;
+        }
+        let type = 'text';
+        if (spec.type === 'integer' || spec.type === 'number')
+            type = 'number';
+        else if (spec.format === 'date' || /\bdate\b/.test(name))
+            type = 'date';
+        else if (/email/.test(name))
+            type = 'email';
+        let val = value == null ? '' : String(value);
+        if (type === 'date' && val) {
+            const parts = val.split(/[\/\-]/);
+            if (parts.length === 3 && parts[0].length <= 2) {
+                let y = parts[2];
+                if (y.length === 2)
+                    y = (parseInt(y) > 50 ? '19' : '20') + y;
+                val = `${y}-${parts[0].padStart(2, '0')}-${parts[1].padStart(2, '0')}`;
+            }
+        }
+        val = escapeHtml(val);
+        return `<input id="${id}" data-name="${escapeHtml(name)}" type="${type}" value="${val}">`;
+    }
+    _collect(form) {
+        const out = {};
+        form.querySelectorAll('[data-name]').forEach((node) => {
+            const el = node;
+            const name = el.dataset.name;
+            if (el.type === 'checkbox') {
+                out[name] = el.checked;
+                return;
+            }
+            const v = el.value;
+            if (v !== '' && v != null)
+                out[name] = el.type === 'number' ? Number(v) : v;
+        });
+        return out;
+    }
+    async _submitForm(tool, form) {
+        const result = form.querySelector('.genform-result');
+        const submitBtn = form.querySelector('button[type="submit"]');
+        const values = this._collect(form);
+        // Highlighting the offending controls is specific to the DOM form; the
+        // A2UI surface has no equivalent, so it stays here rather than in the
+        // shared path below.
+        form.querySelectorAll('.invalid').forEach((el) => el.classList.remove('invalid'));
+        const missing = missingRequired(tool, values);
+        if (missing.length) {
+            missing.forEach((m) => {
+                let ctrl = null;
+                try {
+                    ctrl = form.querySelector(`[data-name="${CSS.escape(m)}"]`);
+                }
+                catch {
+                    /* ignore */
+                }
+                if (ctrl)
+                    ctrl.classList.add('invalid');
+            });
+            this._showFormError(result, `Please fill in: ${missing.map((m) => humanize(m)).join(', ')}.`);
+            this._setStatus('');
+            return;
+        }
+        await this._submitValues(tool, values, result, (b) => (submitBtn.disabled = b));
+    }
+    _showFormError(result, msg) {
+        result.className = 'genform-result error';
+        result.innerHTML = `${ICON_WARN}<span>${escapeHtml(msg)}</span>`;
+    }
+    /**
+     * Everything after "we have valid values": run the tool, then swap the form
+     * for a detail card or result cards.
+     *
+     * Shared by the DOM form and the A2UI surface, which differ only in how
+     * values are collected and how invalid fields are flagged, so only that part
+     * stays renderer-specific.
+     */
+    async _submitValues(tool, values, result, setBusy) {
+        const submitBtn = { set disabled(b) { setBusy(b); } };
+        submitBtn.disabled = true;
+        result.className = 'genform-result';
+        result.textContent = 'Submitting…';
+        try {
+            this._setStatus(`Running ${tool.name}…`);
+            const res = await this.toolSource.execTool(tool, tool.name, values);
+            const isError = !!(res && res.isError);
+            const text = extractResult(res);
+            this._setStatus('');
+            if (isError) {
+                result.className = 'genform-result error';
+                result.innerHTML = `${ICON_WARN}<span>${escapeHtml(text || 'Failed')}</span>`;
+                submitBtn.disabled = false;
+                return;
+            }
+            // Success → the form transitions inline. A write tool (form/action)
+            // becomes a "Submitted" detail card; a read-only tool (typed retrieval)
+            // becomes result cards for the records it returned.
+            const conv = this._active();
+            const readOnly = !!(tool.annotations && tool.annotations.readOnlyHint);
+            let item;
+            let card;
+            if (readOnly) {
+                const results = this._buildResultsItem(tool, res);
+                const summary = results.cards
+                    .map((c) => c.title)
+                    .filter(Boolean)
+                    .slice(0, 8)
+                    .join(', ');
+                conv.messages.push({
+                    role: 'user',
+                    content: `[${tool.name} returned ${results.note}${summary ? ': ' + summary : ''}]`,
+                });
+                // Attribute the typed-retrieval cost to the round that proposed the call.
+                const round = conv.metrics && conv.metrics[conv.metrics.length - 1];
+                if (round) {
+                    round.toolCalls += 1;
+                    round.results += results.cards.length;
+                    round.toolResultTokens += await this.countTokens(text);
+                }
+                item = results;
+                card = this._resultsEl(results);
+            }
+            else {
+                conv.messages.push({
+                    role: 'user',
+                    content: `[${tool.name} submitted with: ${JSON.stringify(values)}]. Keep these unless I ask to change them.`,
+                });
+                const detail = this._buildDetailItem(tool, values, text);
+                item = detail;
+                card = this._detailEl(detail);
+            }
+            conv.items.push(item);
+            if (this._formEl && this._formEl.isConnected)
+                this._formEl.replaceWith(card);
+            else
+                this._els.thread.appendChild(card);
+            this._formEl = null;
+            this._tool = null;
+            if (readOnly)
+                this._upsertMetrics();
+            this._saveConversations();
+            this._scroll();
+        }
+        catch (e) {
+            result.className = 'genform-result error';
+            result.innerHTML = `${ICON_WARN}<span>${escapeHtml(String(e.message || e))}</span>`;
+            submitBtn.disabled = false;
+        }
+    }
+    _buildDetailItem(tool, values, resultText) {
+        const schema = toolSchema(tool);
+        const props = schema.properties || {};
+        const order = [...Object.keys(props), ...Object.keys(values).filter((k) => !(k in props))];
+        const rows = order
+            .filter((k) => values[k] !== undefined && values[k] !== null && values[k] !== '')
+            .map((k) => {
+            const spec = props[k] || {};
+            let v = values[k];
+            if (spec.type === 'boolean' || typeof v === 'boolean')
+                v = v ? 'Yes' : 'No';
+            else if (spec.enum || (spec.items && spec.items.enum))
+                v = humanize(String(v));
+            return { label: humanize(k), value: String(v) };
+        });
+        const note = resultText && !/^\s*[[{]/.test(resultText) ? resultText : 'Your details were submitted successfully.';
+        return { kind: 'detail', title: humanize(tool.name), note, rows };
+    }
+    // ── Read-tool results → cards ──────────────────────────────────────────────
+    /** Pull the array of records out of a tool response. The WebMCP polyfill's
+     * result normalizer can drop `structuredContent`, so every source is tried:
+     * structuredContent (object or JSON string) and each content text part, and
+     * return the first that yields records. Shapes covered: query → results[],
+     * list_types → types[], get → result{}, or a bare entity/array. */
+    _extractItems(res) {
+        const sources = [];
+        // Collect every candidate payload, recursively unwrapping tool-response
+        // envelopes. `res` can be an object, a JSON string, or (with a WebMCP browser
+        // extension in the loop) the whole `{content, structuredContent}` envelope
+        // serialized to a string, possibly more than once. Diving into both
+        // `structuredContent` and each `content[].text` covers all of them.
+        const visit = (raw, depth = 0) => {
+            if (raw == null || depth > 5)
+                return;
+            const val = raw;
+            if (typeof val === 'string') {
+                const t = val.trim();
+                if (!t)
+                    return;
+                let parsed;
+                try {
+                    parsed = JSON.parse(t);
+                }
+                catch {
+                    return; // plain (non-JSON) text — nothing to extract
+                }
+                // Parsed value may itself be an object/array OR another JSON string
+                // (double-encoded); recurse either way.
+                return visit(parsed, depth + 1);
+            }
+            if (!val || typeof val !== 'object')
+                return;
+            sources.push(val);
+            const v = val;
+            if (v.structuredContent != null)
+                visit(v.structuredContent, depth + 1);
+            if (Array.isArray(v.content)) {
+                for (const c of v.content) {
+                    if (c && typeof c === 'object')
+                        visit(c.text, depth + 1);
+                }
+            }
+        };
+        visit(res);
+        for (const data of sources) {
+            const items = this._itemsFrom(data);
+            if (items.length)
+                return items;
+        }
+        console.warn('[nxis-mcp] no items extracted from tool result', { sourcesTried: sources.length, res });
+        return [];
+    }
+    /** Find the record array within one parsed payload. */
+    _itemsFrom(data) {
+        const objs = (arr) => arr.filter((x) => x && typeof x === 'object');
+        if (Array.isArray(data))
+            return objs(data);
+        if (!data || typeof data !== 'object')
+            return [];
+        const d = data;
+        for (const key of ['results', 'types', 'items', 'entities', 'data']) {
+            if (Array.isArray(d[key]))
+                return objs(d[key]);
+        }
+        if (d.result && typeof d.result === 'object')
+            return [d.result];
+        if (d['@id'] != null || d['@type'] != null || d.name != null)
+            return [d];
+        return [];
+    }
+    /** Build a display card from a single record (a JSON-LD entity or a type row). */
+    _entityCard(entity) {
+        const str = (v) => (v == null ? '' : String(Array.isArray(v) ? v[0] : v));
+        const rawType = entity['@type'];
+        const title = str(entity.name ?? entity.title ?? entity.headline ?? rawType ?? entity['@id'] ?? 'Result');
+        const type = rawType ? humanize(str(rawType)) : '';
+        // Positive outcome (rating) → green tag, per the color rules.
+        let rating;
+        const ar = entity.aggregateRating;
+        if (ar && typeof ar === 'object' && ar.ratingValue != null) {
+            const stars = '★'.repeat(Math.max(1, Math.min(5, Math.round(Number(ar.ratingValue) || 0))));
+            rating = ar.reviewCount != null ? `${stars} ${str(ar.ratingValue)} · ${str(ar.reviewCount)}` : `${stars} ${str(ar.ratingValue)}`;
+        }
+        // 24/7 emergency service is only implied by round-the-clock opening hours.
+        const hours = entity.openingHoursSpecification;
+        const emergency = Array.isArray(hours) &&
+            hours.some((h) => h &&
+                typeof h === 'object' &&
+                String(h.opens) === '00:00' &&
+                String(h.closes) === '23:59');
+        // One supporting line under the headline (feature-card pattern).
+        const desc = str(entity.description).trim();
+        const sub = desc ? (desc.length > 150 ? desc.slice(0, 147) + '…' : desc) : undefined;
+        const rows = [];
+        const push = (label, value, href) => {
+            const v = str(value).trim();
+            if (v && rows.length < 4 && !rows.some((r) => r.label === label)) {
+                rows.push({ label, value: v.length > 90 ? v.slice(0, 87) + '…' : v, ...(href ? { href } : {}) });
+            }
+        };
+        const addr = entity.address;
+        if (addr && typeof addr === 'object') {
+            const parts = [addr.streetAddress, addr.addressLocality, addr.addressRegion].filter(Boolean).map(str);
+            if (parts.length)
+                push('Address', parts.join(', '));
+        }
+        // Preferred scalar fields, then any remaining scalars as a fallback.
+        const preferred = ['telephone', 'email', 'url', 'count'];
+        const seen = new Set(['name', 'title', 'headline', 'image', 'description', ...preferred]);
+        for (const key of preferred) {
+            const v = entity[key];
+            if (typeof v === 'string' || typeof v === 'number') {
+                const href = key === 'telephone' ? `tel:${String(v).replace(/[^\d+]/g, '')}` : undefined;
+                push(humanize(key === 'url' ? 'website' : key), v, href);
+            }
+        }
+        if (rows.length < 3) {
+            for (const [k, v] of Object.entries(entity)) {
+                if (k.startsWith('@') || seen.has(k))
+                    continue;
+                if (typeof v === 'string' || typeof v === 'number')
+                    push(humanize(k), v);
+            }
+        }
+        const id = entity['@id'] != null ? str(entity['@id']) : undefined;
+        return { title, type, rating, emergency, sub, rows, id };
+    }
+    _buildResultsItem(tool, res) {
+        const items = this._extractItems(res);
+        const cards = items.slice(0, 12).map((e) => this._entityCard(e));
+        const note = !cards.length
+            ? 'No results found.'
+            : `${cards.length} result${cards.length === 1 ? '' : 's'}`;
+        return { kind: 'results', title: humanize(tool.name), note, cards };
+    }
+    /** Feature-card pattern: tinted icon chip, tags, tight Manrope headline, one
+     * supporting line, then mono-labelled detail rows. */
+    /**
+     * ResultCard → A2UI card data.
+     *
+     * Three things do not survive the trip, all catalog limits rather than
+     * mapping choices: the tag colours (basic Text has no tone), the tel: links
+     * on rows (no link component), and the @id line. They are dropped here
+     * rather than faked so the difference is visible when comparing renderers.
+     */
+    _toA2uiCards(cards) {
+        return cards.map((c) => ({
+            title: c.title,
+            sub: c.sub ?? '',
+            tags: [
+                ...(c.type ? [{ label: c.type }] : []),
+                ...(c.rating ? [{ label: c.rating }] : []),
+                ...(c.emergency ? [{ label: '24/7' }] : []),
+            ],
+            rows: c.rows.map((r) => ({ label: r.label, value: r.value })),
+        }));
+    }
+    /** Results rendered through A2UI instead of the bespoke card markup. */
+    _resultsElA2ui(item) {
+        const wrap = document.createElement('div');
+        wrap.className = 'results a2ui a2ui-scope self-stretch w-full';
+        if (!item.cards.length) {
+            wrap.innerHTML = `<div class="rc-empty">${escapeHtml(item.note)}</div>`;
+            return wrap;
+        }
+        try {
+            const messages = emitCardsSurface(item.note, this._toA2uiCards(item.cards));
+            const mounted = mountSurface(wrap, messages);
+            if (!mounted)
+                throw new Error('no surface produced');
+            this._surfaces.push(mounted);
+        }
+        catch (err) {
+            // A renderer failure must not take the conversation with it.
+            console.warn('[a2ui] results surface failed, using inline cards', err);
+            return this._resultsElLegacy(item);
+        }
+        return wrap;
+    }
+    /**
+     * Typed-retrieval results.
+     *
+     * Drawn as DOM, for the same reason the review card is: the house result card
+     * has a tinted logo chip, blue and green pill tags, a Manrope headline and
+     * tel: links on its rows, and none of that is expressible in A2UI's basic
+     * catalog. Each component nests its own shadow root, so only the global
+     * --a2ui-* properties reach inside, and they are per component type, so there
+     * is no way to say "this tag is a rating" from out here.
+     *
+     * emitCardsSurface remains in a2ui/cards.ts for renderers that want the
+     * surface; a2ui="a2ui-results" opts this element back into it for comparison.
+     */
+    _resultsEl(item) {
+        return this.getAttribute('a2ui') === 'a2ui-results'
+            ? this._resultsElA2ui(item)
+            : this._resultsElLegacy(item);
+    }
+    _resultsElLegacy(item) {
+        const wrap = document.createElement('div');
+        wrap.className = 'msg results';
+        if (!item.cards.length) {
+            wrap.innerHTML = `<div class="rc-empty">${escapeHtml(item.note)}</div>`;
+            return wrap;
+        }
+        const cardsHtml = item.cards
+            .map((c) => {
+            const rows = c.rows
+                .map((r) => `<div class="rc-row"><dt>${escapeHtml(r.label)}</dt><dd>${r.href ? `<a href="${escapeHtml(r.href)}">${escapeHtml(r.value)}</a>` : escapeHtml(r.value)}</dd></div>`)
+                .join('');
+            const tags = (c.type ? `<span class="tag blue"><i class="dot"></i>${escapeHtml(c.type)}</span>` : '') +
+                (c.rating ? `<span class="tag green"><i class="dot"></i>${escapeHtml(c.rating)}</span>` : '') +
+                (c.emergency ? `<span class="tag green"><i class="dot"></i>24/7</span>` : '');
+            return `<div class="resultcard">
+          <div class="rc-top">
+            <div class="rc-chip">${this._logoMarkup()}</div>
+            <div class="rc-tags">${tags}</div>
+          </div>
+          <div class="rc-title">${escapeHtml(c.title)}</div>
+          ${c.sub ? `<div class="rc-sub">${escapeHtml(c.sub)}</div>` : ''}
+          ${rows ? `<dl class="rc-list">${rows}</dl>` : ''}
+          ${c.id ? `<div class="rc-id"><code>${escapeHtml(c.id)}</code></div>` : ''}
+        </div>`;
+        })
+            .join('');
+        wrap.innerHTML = `<div class="rc-head">${escapeHtml(item.note)}</div><div class="rc-cards">${cardsHtml}</div>`;
+        return wrap;
+    }
+    // ── Metrics panel (real Gemma tokenizer counts vs a RAG estimate) ──────────
+    /** Keep one 'metrics' thread item, always at the end of the thread. */
+    _upsertMetrics() {
+        // The comparison needs a tokenizer. A provider that cannot count would
+        // render every figure as zero, which would read as a measurement.
+        if (!this.provider?.countTokens)
+            return;
+        const conv = this._active();
+        if (!conv || !conv.metrics || !conv.metrics.length)
+            return;
+        const idx = conv.items.findIndex((it) => it.kind === 'metrics');
+        if (idx !== -1)
+            conv.items.splice(idx, 1);
+        const item = { kind: 'metrics', rounds: conv.metrics };
+        conv.items.push(item);
+        const existing = this._els.thread.querySelector('.msg.metrics');
+        if (existing)
+            existing.remove();
+        this._els.thread.appendChild(this._metricsEl(item));
+    }
+    _metricsEl(item) {
+        const rounds = item.rounds;
+        const totalInput = rounds.reduce((s, m) => s + m.promptTokens, 0);
+        const totalOutput = rounds.reduce((s, m) => s + m.outputTokens, 0);
+        const totalToolCalls = rounds.reduce((s, m) => s + m.toolCalls, 0);
+        const totalToolTokens = rounds.reduce((s, m) => s + m.toolResultTokens, 0);
+        const mcpTotal = totalInput + totalOutput;
+        const { ragInput, ragOutput, numResults } = estimateRagTokens(rounds);
+        const ragTotal = ragInput + ragOutput;
+        const maxTotal = Math.max(mcpTotal, ragTotal, 1);
+        const savings = ragTotal > 0 ? ((ragTotal - mcpTotal) / ragTotal) * 100 : 0;
+        const rows = rounds
+            .map((m) => `<tr><td>Round ${m.round}</td><td class="num">${fmt(m.promptTokens)}</td><td class="num">${fmt(m.outputTokens)}</td><td class="num">${m.toolCalls}</td><td class="num">${fmt(m.toolResultTokens)}</td></tr>`)
+            .join('');
+        const bar = (label, value, cls) => `<div class="mx-bar-row"><span class="mx-bar-label">${label}</span><div class="mx-bar-track"><i class="${cls}" style="width:${((value / maxTotal) * 100).toFixed(1)}%"></i></div><span class="mx-bar-value">${fmt(value)}</span></div>`;
+        const badge = Math.abs(savings) > 1
+            ? `<div class="mx-savings ${savings > 0 ? 'pos' : 'neg'}">${savings > 0
+                ? `↓ ${savings.toFixed(0)}% fewer tokens with typed retrieval`
+                : `↑ ${Math.abs(savings).toFixed(0)}% more — multi-round context accumulation adds overhead`}</div>`
+            : '';
+        const el = document.createElement('div');
+        el.className = 'msg metrics';
+        el.innerHTML = `
+      <details class="metricscard">
+        <summary>⚡ ${fmt(mcpTotal)} tokens · ${rounds.length} round${rounds.length === 1 ? '' : 's'} · ${totalToolCalls} tool call${totalToolCalls === 1 ? '' : 's'}</summary>
+        <table class="mx-table">
+          <thead><tr><th>Round</th><th class="num">Input</th><th class="num">Output</th><th class="num">Tools</th><th class="num">Tool tokens</th></tr></thead>
+          <tbody>${rows}<tr class="total"><td>Total</td><td class="num">${fmt(totalInput)}</td><td class="num">${fmt(totalOutput)}</td><td class="num">${totalToolCalls}</td><td class="num">${fmt(totalToolTokens)}</td></tr></tbody>
+        </table>
+        <div class="mx-compare">
+          <div class="mx-compare-title">Typed Agent vs Traditional RAG</div>
+          ${bar('Typed', mcpTotal, 'mcp')}
+          ${bar('RAG est.', ragTotal, 'rag')}
+          ${badge}
+          <div class="mx-note">RAG estimate: ${numResults} result${numResults === 1 ? '' : 's'} × ${CHUNKS_PER_RESULT} HTML chunks × ${AVG_HTML_CHUNK_TOKENS} tokens, on the same base prompt. Token counts are real, measured by the on-device Gemma tokenizer.</div>
+        </div>
+      </details>`;
+        return el;
+    }
+    // ── Preferences (programmatic) ─────────────────────────────────────────────
+    /**
+     * Stored values the agent may use to fill forms.
+     *
+     * Supplied by the host page, which usually knows them already, so a signed-in
+     * visitor is not asked to re-enter their own details.
+     *
+     * Session-scoped by default. Persistence is opt-in, since these values are
+     * personal data and the element offers no UI for a visitor to review or clear
+     * what a page has stored. Set `persist = true` to keep them across reloads.
+     *
+     * @example
+     * ```ts
+     * const agent = document.querySelector('nxis-agent-fullscreen');
+     * agent.preferences.set({ name: 'Jane Doe', email: 'jane@example.com' });
+     * agent.preferences.set('phone', '555-0100');
+     * agent.preferences.persist = true;   // survive reloads
+     * agent.preferences.clear();          // forget everything
+     * ```
+     */
+    get preferences() {
+        return this._prefsApi;
+    }
+    /**
+     * The system prompt.
+     *
+     * Set it before the element connects, or call `reset()` afterwards. Two
+     * instructions in {@link DEFAULT_SYSTEM_PROMPT} change how the harness
+     * behaves rather than only how the model reads; see its documentation before
+     * replacing them.
+     */
+    get systemPrompt() {
+        return this._systemPrompt;
+    }
+    set systemPrompt(prompt) {
+        this._systemPrompt = prompt;
+        // The engine holds the prompt, so a change after connect needs it rebuilt.
+        if (this.provider)
+            this._systemPrompt = prompt;
+    }
+    /**
+     * The line shown above the suggestion chips before a conversation starts.
+     *
+     * Only the host knows what this agent can actually do, so the default
+     * describes the mechanism rather than the subject. Set it to say what is
+     * available here.
+     */
+    get emptyState() {
+        return this._emptyState;
+    }
+    set emptyState(text) {
+        this._emptyState = text;
+        if (this._els?.thread)
+            this._renderThread();
+    }
+    /**
+     * The agent's name, used in the header, the launcher's tooltip and the accessible
+     * name of both the launcher and the dialog.
+     *
+     * "Nxis Agent" is a placeholder standing in for a name the host has not
+     * chosen yet. On a customer's own site the agent is theirs, and it should
+     * introduce itself as theirs.
+     */
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        this._name = value || DEFAULT_AGENT_NAME;
+        this._applyIdentity();
+    }
+    /**
+     * The mark on the launcher, in the headers, above the empty state and on
+     * result cards. Inline SVG markup, or the URL of an image.
+     *
+     * Markup is injected as written, so pass only your own, never anything a
+     * visitor can influence. The footer's "Powered by NxisAI" badge is not
+     * affected by this.
+     */
+    get logo() {
+        return this._logo;
+    }
+    set logo(value) {
+        this._logo = value || DEFAULT_LOGO;
+        this._applyIdentity();
+        if (this._els?.thread)
+            this._renderThread();
+    }
+    /**
+     * Brand overrides, as custom properties on the host element.
+     *
+     * Merged over the defaults, not replacing them, so a theme can set one
+     * colour and leave the rest of the system alone. Assigning writes inline
+     * styles, which outrank a stylesheet rule targeting this element, so theme
+     * here or in CSS, but not both.
+     */
+    get theme() {
+        return { ...this._theme };
+    }
+    set theme(next) {
+        this._theme = { ...next };
+        this._applyTheme();
+    }
+    /** Empty-state chips. Set to [] to show none. */
+    get suggestions() {
+        return [...this._suggestions];
+    }
+    set suggestions(next) {
+        this._suggestions = [...next];
+        if (this._els?.thread)
+            this._renderThread();
+    }
+    _loadProfile() {
+        try {
+            return JSON.parse(localStorage.getItem(PROFILE_KEY) || 'null') || {};
+        }
+        catch {
+            return {};
+        }
+    }
+    /** Persist only when asked; otherwise leave storage untouched. */
+    _persistProfile() {
+        if (!this._persistPrefs)
+            return;
+        try {
+            localStorage.setItem(PROFILE_KEY, JSON.stringify(this._profile));
+        }
+        catch {
+            /* storage blocked/full */
+        }
+    }
+    /**
+     * Take new values and let the rest of the agent notice.
+     *
+     * Two things depend on this: the system message carries the values so the
+     * model can use them in prose, and the harness reads them as a slot source
+     * so a field the host already supplied is never asked for.
+     */
+    _applyPreferences(next) {
+        this._profile = next;
+        this._persistProfile();
+        this._syncProfileContext();
+        this._saveConversations();
+        this.dispatchEvent(new CustomEvent('nxis-preferences-change', {
+            detail: { preferences: { ...next } },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _buildPreferencesApi() {
+        const self = this;
+        return {
+            get persist() {
+                return self._persistPrefs;
+            },
+            set persist(on) {
+                self._persistPrefs = on;
+                if (on)
+                    self._persistProfile();
+                else {
+                    try {
+                        localStorage.removeItem(PROFILE_KEY);
+                    }
+                    catch {
+                        /* storage blocked */
+                    }
+                }
+            },
+            // Overloaded in the interface; implemented as one function, so the
+            // implementation signature is widened and the cast narrows it back.
+            get: ((key) => key === undefined ? { ...self._profile } : self._profile[key]),
+            set: ((keyOrValues, value) => {
+                const patch = typeof keyOrValues === 'string' ? { [keyOrValues]: value ?? '' } : keyOrValues;
+                const next = { ...self._profile };
+                for (const [k, v] of Object.entries(patch)) {
+                    const trimmed = String(v ?? '').trim();
+                    // An empty value clears rather than storing "", so set(k, '') and
+                    // clear(k) mean the same thing instead of quietly differing.
+                    if (trimmed)
+                        next[k] = trimmed;
+                    else
+                        delete next[k];
+                }
+                self._applyPreferences(next);
+            }),
+            clear(key) {
+                if (key === undefined) {
+                    self._applyPreferences({});
+                    try {
+                        localStorage.removeItem(PROFILE_KEY);
+                    }
+                    catch {
+                        /* storage blocked */
+                    }
+                    return;
+                }
+                const next = { ...self._profile };
+                delete next[key];
+                self._applyPreferences(next);
+            },
+            /** The keys the agent knows how to map onto form fields. */
+            keys() {
+                return Object.keys(PROFILE_ALIASES);
+            },
+        };
+    }
+    /** Map the saved profile onto a tool's schema property names. */
+    _profileForSchema(schema) {
+        const props = schema && schema.properties ? Object.keys(schema.properties) : [];
+        if (!props.length)
+            return {};
+        const norm = (s) => String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
+        const out = {};
+        for (const [pf, val] of Object.entries(this._profile)) {
+            if (!val || !String(val).trim())
+                continue;
+            const cands = (PROFILE_ALIASES[pf] || [pf]).map(norm);
+            const match = props.find((p) => cands.includes(norm(p))) ||
+                props.find((p) => cands.some((c) => norm(p).includes(c) || c.includes(norm(p))));
+            if (match && out[match] === undefined)
+                out[match] = val;
+        }
+        return out;
+    }
+    /** Fold the current profile into the active conversation's system message. */
+    _syncProfileContext() {
+        const conv = this._active();
+        if (!conv || !conv.messages[0])
+            return;
+        const entries = Object.entries(this._profile).filter(([, v]) => v && String(v).trim());
+        const note = entries.length
+            ? '\n\nSaved user profile — use these to fill matching fields unless the user gives different values: ' +
+                entries.map(([k, v]) => `${humanize(k)}: ${v}`).join('; ') +
+                '.'
+            : '';
+        const formatReq = '\n\nFor fields that require a specific format (such as dates), explicitly inform the user of the required format (e.g., mm/dd/yyyy).';
+        conv.messages[0] = { role: 'system', content: this._systemPrompt + note + formatReq };
+    }
+    // ── Misc UI ────────────────────────────────────────────────────────────────
+    _setStatus(text, isError = false) {
+        // Errors only.
+        //
+        // The empty state names the phase while loading and the pending bubble
+        // names it during a turn, so echoing the same words above the composer was
+        // the same sentence twice on one screen. An error has nowhere else to go.
+        this._els.status.textContent = isError ? text || '' : '';
+        this._els.status.classList.toggle('err', !!isError);
+        // The engine names its phases through onStatus, and the empty state shows
+        // that name in place of the invitation, so a phase change has to reach it.
+        if (!isError && text && text !== this._stage) {
+            this._stage = text;
+            const stage = this._els?.thread?.querySelector('.stage');
+            if (stage)
+                stage.textContent = text;
+            // A phase with no numbers still changes what the ring should be doing,
+            // and the phase that ends the load is what brings the chips back, so
+            // this repaints either way rather than only while loading.
+            if (!this.provider?.ready)
+                this._loadDetail = undefined;
+            this._paintLoad();
+        }
+    }
+    _setBar(pct) {
+        this._els.bar.style.width = `${Math.max(0, Math.min(100, pct))}%`;
+    }
+    _scroll() {
+        this._els.thread.scrollTop = this._els.thread.scrollHeight;
+    }
+    _autosize() {
+        const ta = this._els.input;
+        ta.style.height = 'auto';
+        ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
+    }
+    /**
+     * Rebuild the specialist agents and their coordinator.
+     *
+     * Called on connect and whenever the host changes `agents`, `routes` or
+     * `fallback`. Inexpensive: each agent is a role over the one shared provider,
+     * so no additional model is loaded.
+     */
+    _buildAgents() {
+        if (!this.provider || !this._agentDefs) {
+            this._coordinator = null;
+            return;
+        }
+        const names = Object.keys(this._agentDefs);
+        const agents = {};
+        for (const name of names) {
+            const def = this._agentDefs[name];
+            agents[name] = new AgentHarness({
+                provider: this.provider,
+                toolSource: this.toolSource,
+                renderer: this._renderer(),
+                profile: (schema) => this._profileForSchema(schema),
+                onMessages: () => this._saveConversations(),
+                systemPrompt: def.systemPrompt,
+                tools: def.tools,
+                name,
+                unavailable: def.unavailable,
+            });
+        }
+        const descriptions = {};
+        for (const name of names) {
+            const d = this._agentDefs[name].description;
+            if (d)
+                descriptions[name] = d;
+        }
+        const fallback = this._fallbackAgent && agents[this._fallbackAgent] ? this._fallbackAgent : names[0];
+        this._coordinator = new AgentCoordinator({
+            agents,
+            rules: this._routes,
+            fallback,
+            // The model pass is the last resort, and it uses the same weights the
+            // specialists do, so there is no second model to load.
+            provider: this.provider,
+            descriptions,
+            onRoute: (routed) => this._paintRoute(routed.agent, routed.via),
+        });
+    }
+    /** Zero when the provider cannot count, which hides the token metrics. */
+    async countTokens(text) {
+        return (await this.provider.countTokens?.(text)) ?? 0;
+    }
+    /**
+     * Add a line to the thread naming the agent that took the turn.
+     *
+     * Behind `debug`, like the tool traces: a misroute is otherwise invisible,
+     * showing only as an unhelpful answer.
+     */
+    _paintRoute(agent, via) {
+        if (!this.debug)
+            return;
+        const item = { kind: 'route', agent, via };
+        this._active()?.items.push(item);
+        this._els.thread.appendChild(this._routeEl(item));
+        this._saveConversations();
+        this._scroll();
+    }
+    _routeEl(item) {
+        const el = document.createElement('div');
+        el.className = 'routeline';
+        el.textContent = `routed to ${item.agent} · ${item.via}`;
+        return el;
+    }
+    /**
+     * Bring in the site's own MCP server, once.
+     *
+     * The page's own action tools register themselves. Remote tools do not: they
+     * live on an MCP server that must be discovered through
+     * `/.well-known/ai-catalog.json` and bridged into the page's registry.
+     *
+     * Runs on first open rather than on connect, so an unopened launcher costs no
+     * network request. Failure is neither fatal nor loud: a site with no MCP
+     * server is an ordinary case, and the page's own tools work regardless.
+     */
+    _connectTools() {
+        if (this._connect)
+            return this._connect;
+        if (this.getAttribute('discover') === 'false') {
+            this._connect = Promise.resolve();
+            return this._connect;
+        }
+        this._connect = connectTools(this.getAttribute('mcp-api-key') || undefined, {
+            // Short, because this blocks the first turn: a provider that has not
+            // appeared within a few seconds is not going to.
+            timeout: 4000,
+        })
+            .then(({ remoteTools, warning }) => {
+            if (warning)
+                console.warn('[nxis-agent]', warning);
+            else if (remoteTools.length) {
+                console.info(`[nxis-agent] discovered remote tools: ${remoteTools.join(', ')}`);
+            }
+        })
+            .catch((err) => console.warn('[nxis-agent] tool discovery failed:', err));
+        return this._connect;
+    }
+    /**
+     * Report a failure in the thread, where it will be seen.
+     *
+     * Translates the underlying error into a sentence that says what to do next,
+     * rather than surfacing the exception.
+     */
+    _reportEngineError(err) {
+        const raw = String(err?.message || err || 'Unknown error');
+        let human;
+        if (/webgpu/i.test(raw)) {
+            human =
+                'This browser cannot run the on-device model — it needs WebGPU. ' +
+                    'Chrome or Edge 113+, or Safari 18+, will work.';
+        }
+        else if (/cache|quota|storage/i.test(raw)) {
+            human =
+                "The model could not be stored in this browser's cache, so it did not finish " +
+                    'loading. Clearing this site\'s data usually fixes it, and the next attempt ' +
+                    'will skip the cache.';
+        }
+        else if (/fetch|network|import|load/i.test(raw)) {
+            human =
+                'The model files could not be downloaded. Check the connection and try ' +
+                    'again — nothing was lost.';
+        }
+        else {
+            human = `The on-device model could not be started: ${raw}`;
+        }
+        this._setStatus(raw, true);
+        this._appendMsg('assistant', human);
+    }
+    /**
+     * Draw load progress on whichever mark is currently visible.
+     *
+     * Exactly one ring is ever on screen: the empty state's mark until a
+     * conversation replaces it, then the header's. Phases that report no totals,
+     * such as the runtime fetch and the warm-up, spin rather than fill.
+     */
+    _paintLoad() {
+        // A provider with nothing to load is ready as soon as it exists, so none
+        // of the progress treatment applies. `load` is optional on the interface so
+        // that this can be detected.
+        const loading = (this.provider?.load ? this.provider.loading : false) ?? false;
+        // The empty state was drawn before this load existed, or before it
+        // finished. Redrawing it calls back here against the right DOM.
+        if (this._emptyLoading !== null && this._emptyLoading !== loading) {
+            this._renderThread();
+            return;
+        }
+        const detail = this._loadDetail;
+        const determinate = loading && !!detail?.total && this._loadPct > 0;
+        const clamped = Math.max(0, Math.min(100, this._loadPct));
+        const ring = this._els?.thread?.querySelector('.ring');
+        const head = this.shadowRoot?.querySelector('.head-ring');
+        for (const [node, show] of [
+            [ring, loading],
+            // The header only takes over once the empty state is gone.
+            [head, loading && !ring],
+        ]) {
+            if (!node)
+                continue;
+            node.hidden = !show;
+            node.classList.toggle('indet', show && !determinate);
+            if (show && determinate)
+                node.style.setProperty('--pct', String(clamped));
+        }
+        const byteLine = this._els?.thread?.querySelector('.stage-bytes');
+        if (byteLine) {
+            byteLine.textContent = determinate
+                ? `${formatBytes(detail.loaded)} / ${formatBytes(detail.total)}`
+                : '';
+        }
+    }
+    /**
+     * Split this element into several specialist agents.
+     *
+     * Each definition becomes an {@link AgentHarness} sharing this element's
+     * provider, so one model in memory serves every role. With none set, the
+     * element runs as a single agent with every tool and one prompt.
+     *
+     * @example
+     * ```ts
+     * agent.agents = {
+     *   retrieval: { systemPrompt: '…', tools: (t) => t.name.startsWith('nxis_') },
+     *   booking:   { systemPrompt: '…', tools: (t) => /book/.test(t.name) },
+     * };
+     * agent.routes = [{ route: 'booking', match: /\bbook\b/ }];
+     * agent.fallback = 'retrieval';
+     * ```
+     */
+    get agents() {
+        return this._agentDefs;
+    }
+    set agents(defs) {
+        this._agentDefs = defs && Object.keys(defs).length ? defs : null;
+        this._buildAgents();
+    }
+    /** The routing table. Ignored unless `agents` is set. */
+    get routes() {
+        return this._routes;
+    }
+    set routes(rules) {
+        this._routes = rules ?? [];
+        this._buildAgents();
+    }
+    /**
+     * Where a turn goes when the rules abstain, nothing is sticky and the model
+     * declined. Defaults to the first agent declared.
+     */
+    get fallback() {
+        return this._fallbackAgent;
+    }
+    set fallback(name) {
+        this._fallbackAgent = name;
+        this._buildAgents();
+    }
+    /**
+     * Where completions come from. Defaults to Gemma on WebGPU.
+     *
+     * Set a provider to run the agent on a remote model. Anything a host writes
+     * here should talk to their own origin rather than a vendor directly: a key
+     * in a browser is a key anyone can read from the page.
+     */
+    get modelProvider() {
+        return this._provider;
+    }
+    set modelProvider(next) {
+        this._provider = next;
+        // Late enough to matter: rebuild so the next turn uses it.
+        if (this._els?.thread) {
+            this.provider = next ?? this.provider;
+            this._paintProvenance();
+            this._buildAgents();
+        }
+    }
+    /**
+     * Show the tool calls behind each answer.
+     *
+     * Off by default, and intended for whoever is building the agent. Traces
+     * carry the arguments a tool was called with, which for a form tool includes
+     * personal data, so while this is off they are neither rendered nor stored
+     * rather than merely hidden.
+     *
+     * Enabling it affects subsequent turns, not those already recorded.
+     */
+    get debug() {
+        const raw = (this.getAttribute('debug') || '').toLowerCase();
+        if (!this.hasAttribute('debug'))
+            return false;
+        return raw !== 'false' && raw !== '0' && raw !== 'off';
+    }
+    set debug(on) {
+        if (on)
+            this.setAttribute('debug', 'true');
+        else
+            this.removeAttribute('debug');
+        if (this._els?.thread)
+            this._renderThread();
+    }
+    /**
+     * How eagerly to fetch the model weights.
+     *
+     * `eager` starts on connect, `idle` waits for the browser to be free (the
+     * default), and `none` waits until the panel is opened or a message is sent.
+     * `preload="false"` is accepted as a synonym for `none`.
+     */
+    get preload() {
+        const raw = (this.getAttribute('preload') || '').toLowerCase();
+        if (raw === 'eager')
+            return 'eager';
+        if (raw === 'false' || raw === 'none')
+            return 'none';
+        return 'idle';
+    }
+    set preload(mode) {
+        this.setAttribute('preload', mode);
+        // Honoured when set after connect, so a host can start the load mid-session
+        // without a reload.
+        if (mode === 'eager' && this.provider && !this.provider.ready && !this.provider.loading) {
+            this.provider.preload?.('eager');
+        }
+    }
+    /**
+     * The logo as markup.
+     *
+     * A value starting with `<` is used as written; anything else is treated as
+     * an image URL.
+     */
+    _logoMarkup() {
+        const logo = this._logo.trim();
+        return logo.startsWith('<') ? logo : `<img src="${escapeHtml(logo)}" alt="" />`;
+    }
+    /**
+     * Push the current name and logo into the rendered shadow tree.
+     *
+     * Called on connect and on every set, so hosts can configure the element
+     * before or after it upgrades without having to know which happened first.
+     */
+    _applyIdentity() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const logo = this._logoMarkup();
+        root.querySelectorAll('.launcher, .brand').forEach((node) => {
+            node.innerHTML = logo;
+        });
+        const heading = root.querySelector('.main-head h2');
+        if (heading)
+            heading.textContent = this._name;
+        this._paintProvenance();
+        const launcher = root.querySelector('.launcher');
+        launcher?.setAttribute('title', `Open ${this._name}`);
+        launcher?.setAttribute('aria-label', `Open ${this._name}`);
+        root.querySelector('.overlay')?.setAttribute('aria-label', this._name);
+    }
+    /**
+     * Say where the answers come from.
+     *
+     * The package's claim is that nothing leaves the tab, so the one case where
+     * that stops being true has to be on screen. Painted separately from the rest
+     * of the identity because the provider is built after the shadow tree, and
+     * can be replaced later.
+     */
+    _paintProvenance() {
+        const badge = this.shadowRoot?.querySelector('.provenance');
+        if (!badge?.lastChild)
+            return;
+        const local = this.provider?.local ?? true;
+        badge.lastChild.textContent = local ? 'On-device' : 'Remote';
+        badge.setAttribute('title', local
+            ? 'The model runs in this browser. Nothing you type leaves the device.'
+            : 'Answers come from a model on a server, so this conversation leaves the device.');
+    }
+    /** Write the theme's custom properties onto the host element. */
+    _applyTheme() {
+        for (const props of Object.values(THEME_TOKENS)) {
+            for (const prop of props)
+                this.style.removeProperty(prop);
+        }
+        for (const [key, value] of Object.entries(this._theme)) {
+            const props = THEME_TOKENS[key];
+            if (!props || !value)
+                continue;
+            for (const prop of props)
+                this.style.setProperty(prop, value);
+        }
+    }
+    _template() {
+        return `
+    <style>
+      /* NxisAI Visual Direction — tokens from design.md (drop-in CSS). */
+      :host {
+        all: initial;
+        --bg:#FFFFFF; --surface:#F5F7FB; --surface-2:#EDF1F9;
+        --border:#E4E9F2; --border-strong:#CFD8E8;
+        --ink:#0F172A; --ink-2:#475569; --ink-3:#8A97AC;
+        --blue:#2563EB; --blue-strong:#1D4ED8; --blue-tint:#EEF3FF;
+        --green:#22C55E; --green-strong:#16A34A; --green-tint:#E8FAEF;
+        --inline-bg:#EEF2F8; --red:#B91C1C;
+        --radius:14px; --radius-sm:10px; --radius-pill:999px;
+        --shadow-sm:0 1px 2px rgba(15,23,42,.05);
+        --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 30px rgba(15,23,42,.06);
+        --display:'Manrope', system-ui, sans-serif;
+        --sans:'Inter', system-ui, sans-serif;
+        --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-family: var(--sans);
+
+        /*
+         * Tailwind v4 composes box-shadow, ring and border-style from --tw-*
+         * custom properties, and "all: initial" above wipes them, so every
+         * child inherits empty values, and shadow/border utilities resolve to
+         * nothing while looking perfectly correct in the stylesheet. Restoring
+         * the defaults here is what makes those utilities work inside a shadow
+         * root that isolates itself from the page.
+         */
+        --tw-shadow: 0 0 #0000;
+        --tw-inset-shadow: 0 0 #0000;
+        --tw-ring-shadow: 0 0 #0000;
+        --tw-inset-ring-shadow: 0 0 #0000;
+        --tw-ring-offset-shadow: 0 0 #0000;
+        --tw-border-style: solid;
+      }
+
+      /* Tailwind, scoped to this shadow root. Utilities resolve to the NxisAI
+         palette because agent.tw.css themes them from design.md. */
+      ${TAILWIND_CSS}
+
+      /* A2UI surfaces inherit the tokens above through --a2ui-* bridges. */
+      ${A2UI_THEME_CSS}
+
+      /* App-icon tile: chevron centered in a 56px tile, Soft Gray, hairline. */
+      .launcher {
+        position: fixed; right: 20px; bottom: 20px; z-index: 9998;
+        width: 56px; height: 56px; border-radius: var(--radius); cursor: pointer; padding: 0;
+        display: flex; align-items: center; justify-content: center;
+        border: 1px solid var(--border); background: var(--surface);
+        box-shadow: var(--shadow-sm);
+        transition: transform .15s ease, box-shadow .15s ease;
+      }
+      .launcher:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
+      .launcher svg, .launcher img { width: 34px; height: auto; display: block; }
+
+      .overlay { position: fixed; inset: 0; z-index: 9999; display: none; background: var(--bg); color: var(--ink); }
+      .overlay.show { display: flex; animation: fade .2s ease; }
+      @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
+
+      /* ── Side panel ─────────────────────────────────────────────── */
+      .scrim { display: none; }
+      .side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); }
+      .side-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px; }
+      .side-head .brand { width: 22px; height: 22px; display: block; }
+      .side-head .brand svg, .side-head .brand img { width: 22px; height: auto; display: block; }
+      .side-title { font-family: var(--display); font-weight: 800; font-size: 14px; }
+      .newchat { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
+      .newchat:hover { color: var(--blue-strong); border-color: var(--blue); }
+      .newchat svg { width: 16px; height: 16px; }
+      .history { flex: 1; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; }
+      .hist-row { display: flex; align-items: center; border-radius: 8px; }
+      .hist-row:hover { background: var(--surface-2); }
+      .hist-row.active { background: var(--blue-tint); }
+      .hist-item { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 9px 10px; font-family: var(--sans); font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .hist-row.active .hist-item { color: var(--blue-strong); font-weight: 600; }
+      .hist-del { flex-shrink: 0; opacity: 0; width: 26px; height: 26px; margin-right: 4px; border: none; background: none; color: var(--ink-3); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
+      .hist-row:hover .hist-del, .hist-row.active .hist-del { opacity: 1; }
+      .hist-del:hover { color: var(--red); background: var(--bg); }
+      .hist-del svg { width: 15px; height: 15px; }
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+      /* ── Main view ──────────────────────────────────────────────── */
+      .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+      .main-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
+      .menu { display: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-2); cursor: pointer; align-items: center; justify-content: center; }
+      .menu svg { width: 18px; height: 18px; }
+      .main-head .brand { width: 24px; height: 24px; display: block; }
+      .main-head .brand svg, .main-head .brand img { width: 24px; height: auto; display: block; }
+      .main-head h2 { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
+      /* Tags & chips — Inter 500 13px pill, optional leading dot. */
+      .tag { font-family: var(--sans); font-weight: 500; font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--ink-2); background: var(--bg); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+      .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
+      .tag.blue { color: var(--blue-strong); background: var(--blue-tint); border-color: transparent; }
+      .tag.blue .dot { background: var(--blue); }
+      .tag.green { color: var(--green-strong); background: var(--green-tint); border-color: transparent; }
+      .tag.green .dot { background: var(--green); }
+      .main-head .close { margin-left: auto; background: none; border: none; font-size: 24px; line-height: 1; color: var(--ink-3); cursor: pointer; font-family: inherit; }
+      .prog { height: 2px; background: var(--surface-2); }
+      .prog > i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s ease; }
+
+      .thread { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
+      .empty { margin: auto; text-align: center; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 14px; }
+      .empty svg, .empty img { width: 44px; height: auto; opacity: .9; }
+      .empty p { max-width: 320px; font-size: 14px; line-height: 1.5; }
+      .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; }
+      .chip { font-family: var(--sans); font-weight: 500; font-size: 13px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink-2); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
+      .chip:hover { border-color: var(--blue); color: var(--blue-strong); background: var(--blue-tint); }
+
+      /* Thinking indicator — three dots and an optional phase label. */
+      .msg.thinking { display: inline-flex; align-items: center; gap: 10px; }
+      .think-dots { display: inline-flex; align-items: center; gap: 4px; }
+      .think-dots i {
+        width: 6px; height: 6px; border-radius: 50%;
+        background: var(--ink-3); display: block;
+        animation: nxis-think 1.2s ease-in-out infinite;
+      }
+      .think-dots i:nth-child(2) { animation-delay: .15s; }
+      .think-dots i:nth-child(3) { animation-delay: .3s; }
+      @keyframes nxis-think {
+        0%, 80%, 100% { opacity: .28; transform: translateY(0); }
+        40%           { opacity: 1;   transform: translateY(-3px); }
+      }
+      .think-label {
+        font-family: var(--mono); font-size: 11px; font-weight: 500;
+        letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
+      }
+      .think-label:empty { display: none; }
+
+      /* ── The wait, with numbers on it ──────────────────────────────────
+         A first run downloads gigabytes. Dots alone say "working"; they never
+         say "for how long", which is the only question a multi-minute wait
+         raises. The line appears for the phases that have bytes behind them
+         and stays hidden for the ones that do not. */
+      .msg.thinking { flex-direction: column; align-items: stretch; gap: 8px; min-width: 190px; }
+      .think-row { display: inline-flex; align-items: center; gap: 10px; }
+      .think-bytes {
+        margin-left: auto; font-family: var(--mono); font-size: 10px;
+        color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
+      }
+      .think-bytes:empty { display: none; }
+
+      /* ── The mark, charging ────────────────────────────────────────────
+         Same progress, drawn on the object already sitting in the empty
+         state. The ring wraps whatever the host set as their logo, so the
+         thing that fills is theirs. */
+      .empty-mark { position: relative; display: grid; place-items: center; }
+      .empty-mark .ring {
+        --pct: 0;
+        position: absolute; inset: -13px;
+        border-radius: 50%;
+        background: conic-gradient(var(--blue) calc(var(--pct) * 1%), var(--surface-2) 0);
+        transition: background .35s linear;
+      }
+      .empty-mark .ring::after {
+        content: ""; position: absolute; inset: 3px;
+        border-radius: 50%; background: var(--bg);
+      }
+      .empty-mark svg, .empty-mark img { position: relative; z-index: 1; }
+
+      /* The stage, standing in for the invitation while weights arrive. */
+      .empty .stage {
+        font-family: var(--mono); font-weight: 500; font-size: 11px;
+        letter-spacing: .05em; color: var(--ink-2); margin: 0;
+      }
+      .empty .stage-bytes {
+        font-family: var(--mono); font-size: 10px; color: var(--ink-3);
+        font-variant-numeric: tabular-nums; margin: -8px 0 0;
+      }
+      .empty .stage-bytes:empty { display: none; }
+      /* The suggestions have waited for the model; let them arrive, rather than
+         appearing as though they had been there all along. */
+      .chips.appear { animation: nxis-chips-in .32s ease both; }
+      @keyframes nxis-chips-in {
+        from { opacity: 0; transform: translateY(6px); }
+        to   { opacity: 1; transform: none; }
+      }
+
+      /* The header mark carries what is left of the load once the thread is
+         open: the same ring, smaller, out of the conversation's way. */
+      .main-head .head-mark { position: relative; display: grid; place-items: center; }
+      /* The ring is absolutely positioned, so it paints above a static sibling,
+         and its ::after fills the middle with the panel colour. Without this the
+         disc covers the logo and the header shows an empty circle. */
+      .main-head .brand { position: relative; z-index: 1; }
+      .main-head .head-ring {
+        --pct: 0; position: absolute; inset: -4px; border-radius: 50%;
+        background: conic-gradient(var(--blue) calc(var(--pct) * 1%), var(--surface-2) 0);
+        transition: background .35s linear;
+      }
+      .main-head .head-ring::after {
+        content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--bg);
+      }
+      /* No numbers yet: sweep instead of sitting at zero, which reads as hung. */
+      .empty-mark .ring.indet, .main-head .head-ring.indet {
+        background: conic-gradient(from 0deg, transparent 0deg, var(--blue) 300deg, transparent 360deg);
+        animation: nxis-ring-spin 1.1s linear infinite;
+      }
+      @keyframes nxis-ring-spin { to { transform: rotate(360deg); } }
+      /*
+       * Motion carries the signal here, so removing it needs a replacement
+       * rather than a still frame: the dots hold a steady mid-opacity so the
+       * bubble still reads as pending.
+       */
+      @media (prefers-reduced-motion: reduce) {
+        /* The rings carry information, so they stay; only their easing goes. */
+        .empty-mark .ring, .main-head .head-ring, .caret { transition: none; }
+        .chips.appear { animation: none; }
+        /* A spin with the motion removed has to still say "busy": hold a
+           partial arc rather than an empty track. */
+        .empty-mark .ring.indet, .main-head .head-ring.indet {
+          animation: none;
+          background: conic-gradient(var(--blue) 25%, var(--surface-2) 0);
+        }
+        .think-dots i { animation: none; opacity: .5; }
+      }
+
+      /* Bubble styling now lives in _msgEl as Tailwind utilities. The .msg
+         class is kept only as a hook for the wrappers below, which are layout
+         rather than bubbles — so there is nothing here to undo. */
+      
+      
+      
+      .msg.tool.error { border-color: var(--red); color: var(--red); }
+      .msg.tool b { display: inline-flex; align-items: center; gap: 6px; }
+      .msg.tool svg { width: 14px; height: 14px; }
+      .msg.form, .msg.detail { align-self: flex-start; width: 100%; max-width: 380px; }
+
+      /* ── The receipt ───────────────────────────────────────────────────
+         Muted enough to scroll past, addressable when something looks wrong. */
+      /* The route, when debugging: quieter than a receipt, since it is one
+         word of provenance rather than something to read. */
+      .routeline {
+        align-self: flex-start; font-family: var(--mono); font-size: 10px;
+        letter-spacing: .06em; color: var(--ink-3); opacity: .8; padding: 1px 0;
+      }
+
+      details.trace { align-self: flex-start; max-width: 92%; }
+      details.trace > summary {
+        cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
+        font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
+        color: var(--ink-3); padding: 2px 0;
+      }
+      details.trace > summary::-webkit-details-marker { display: none; }
+      details.trace > summary:hover { color: var(--ink-2); }
+      details.trace > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
+      details.trace.err > summary { color: var(--red); }
+      .caret {
+        width: 0; height: 0; border-left: 4px solid currentColor;
+        border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
+        transition: transform .16s ease; flex-shrink: 0;
+      }
+      details.trace[open] .caret { transform: rotate(90deg); }
+      .trace-body {
+        margin-top: 7px; background: var(--surface); border: 1px solid var(--border);
+        border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 6px;
+      }
+      .trace-label {
+        font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
+        text-transform: uppercase; color: var(--ink-3);
+      }
+      .trace-body pre {
+        margin: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
+        color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
+        max-height: 160px; overflow-y: auto;
+      }
+      .trace-body pre.raw { color: var(--ink); }
+
+      .statusline { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); padding: 4px 20px 0; min-height: 15px; }
+      .statusline.err { color: var(--red); }
+      .composer { display: flex; align-items: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
+      .composer textarea {
+        flex: 1; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); resize: none;
+        background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; outline: none;
+        max-height: 140px; overflow-y: auto; transition: border-color .15s ease, box-shadow .15s ease;
+      }
+      .composer textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
+      .composer textarea::placeholder { color: var(--ink-3); }
+      .composer .go { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); border: none; background: var(--blue); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(37,99,235,.3); }
+      .composer .go:hover { background: var(--blue-strong); }
+      .composer .go:disabled { opacity: .45; cursor: not-allowed; }
+      /* Stopping is not a destructive act and does not get a red button. The
+         shape changes (arrow to square) and the fill drops back to a neutral
+         surface, which is enough to say "this does something else now" without
+         implying the turn in progress was a mistake. */
+      .composer .go.stop { background: var(--surface-2); color: var(--ink-2); box-shadow: none; border: 1px solid var(--border-strong); }
+      .composer .go.stop:hover { background: var(--surface); color: var(--ink); }
+      .composer .go.stop svg { width: 15px; height: 15px; }
+      /* A message the person sent, plus the row of things they can do to it.
+         The wrapper carries the alignment the bubble used to carry on its own. */
+      .turn { display: flex; flex-direction: column; align-items: flex-end; }
+      .turn:focus { outline: none; }
+      .turn .msg.user { align-self: flex-end; }
+      .actions { display: flex; gap: 2px; padding: 2px 2px 0; }
+      .act {
+        display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
+        background: none; border: none; border-radius: 7px; cursor: pointer;
+        color: var(--ink-3); transition: color .12s ease, background .12s ease;
+      }
+      .act:hover { color: var(--ink-2); background: var(--surface); }
+      .act:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
+      .act svg { width: 15px; height: 15px; display: block; }
+      .act.done { color: var(--green-strong); }
+
+      /* Split on hover capability, not on width: a touch laptop needs the row
+         visible and a narrow desktop window does not. Where there is no hover,
+         the actions are simply there, because no gesture will reveal them. */
+      .actions { opacity: .55; transition: opacity .13s ease; }
+      @media (hover: hover) {
+        .actions { opacity: 0; }
+        .turn:hover .actions,
+        .turn:focus-within .actions { opacity: 1; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .actions { transition: none; }
+      }
+
+      .editing {
+        align-self: flex-end; max-width: 84%; width: 84%;
+        display: flex; flex-direction: column; gap: 7px;
+        background: var(--bg); border: 1px solid var(--blue); border-radius: 12px; padding: 9px 10px;
+      }
+      .editing textarea {
+        width: 100%; border: none; outline: none; resize: none; background: transparent;
+        font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink);
+      }
+      .edit-actions { display: flex; gap: 7px; justify-content: flex-end; }
+      .ebtn {
+        font-family: var(--sans); font-size: 12px; font-weight: 500; border-radius: 8px;
+        padding: 5px 11px; cursor: pointer; border: 1px solid var(--border-strong);
+        background: var(--bg); color: var(--ink-2);
+      }
+      .ebtn:hover { border-color: var(--blue); color: var(--blue-strong); }
+      .ebtn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
+      .ebtn.primary:hover { background: var(--blue-strong); color: #fff; }
+      .edit-hint {
+        font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
+        color: var(--ink-3); align-self: flex-end; padding-top: 2px;
+      }
+
+      .stopped-note {
+        align-self: flex-start;
+        font-size: 12px;
+        color: var(--ink-3);
+        padding: 2px 0 6px;
+        letter-spacing: .01em;
+      }
+      .composer .go svg { width: 17px; height: 17px; }
+
+      /* Attribution. Quiet enough to sit under a customer's own chat surface
+         without competing with it, legible enough to be worth having. */
+      .foot { display: flex; justify-content: center; padding: 0 20px 12px; }
+      .powered {
+        display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
+        font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.1em;
+        text-transform: uppercase; color: var(--ink-3);
+        border-radius: var(--radius-pill); padding: 4px 10px;
+        transition: color .15s ease, background .15s ease;
+      }
+      .powered:hover { color: var(--ink-2); background: var(--surface); }
+      .powered:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
+      .powered svg { width: 13px; height: auto; display: block; flex-shrink: 0; }
+
+      /* ── Inline generated form ──────────────────────────────────── */
+      .genform { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 13px; }
+      .genform-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
+      .gf-tool { font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
+      .gf-desc { font-size: 13px; color: var(--ink-2); }
+      .field { display: flex; flex-direction: column; gap: 5px; }
+      .field label { font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
+      .field .req { color: var(--blue); }
+      .field input, .field select {
+        font-family: var(--sans); font-size: 14px; color: var(--ink);
+        background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 11px; outline: none;
+        transition: border-color .15s ease, box-shadow .15s ease;
+      }
+      .field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
+      .field input.invalid, .field select.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(185,28,28,.12); }
+      .field .check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
+      .field .check input { width: auto; }
+      .genform-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
+      /* Buttons — radius 10, weight 600; Action confirms a positive outcome,
+         Secondary (ghost class) is the alternative path. */
+      .btn { font-family: var(--sans); font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; transition: .15s; }
+      .btn svg { width: 16px; height: 16px; }
+      .btn.ghost { background: var(--bg); border-color: var(--border-strong); color: var(--ink); }
+      .btn.ghost:hover { border-color: var(--ink-3); }
+      /*
+       * Signal Blue, not Action Green. design.md §4 gives green to "confirm a
+       * positive outcome", which is the submitted card's badge and eyebrow,
+       * after the fact. The button is the main path before anything has
+       * happened, and that is blue. Using green on both blurred "about to
+       * happen" into "has happened".
+       *
+       * It also has to be blue to stay consistent with the A2UI cards:
+       * --a2ui-color-primary drives their primary buttons AND their
+       * ChoicePicker selection, so repointing it at green would have coloured
+       * "Water Heaters" as a positive outcome rather than a choice.
+       */
+      .btn.primary { background: var(--blue); color: #fff; }
+      .btn.primary:hover { background: var(--blue-strong); }
+      .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
+      .genform-result { display: none; font-size: 13px; align-items: center; gap: 8px; padding: 2px; }
+      .genform-result.error { display: flex; color: var(--red); }
+      .genform-result svg { width: 16px; height: 16px; flex-shrink: 0; }
+      .gf-empty { color: var(--ink-3); font-size: 14px; }
+
+      /* ── Inline detail (confirmation) card ──────────────────────── */
+      .detailcard { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
+      .dc-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--green-tint); color: var(--green-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
+      .dc-badge svg { width: 22px; height: 22px; }
+      .dc-eyebrow { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-strong); }
+      .dc-title { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
+      .dc-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
+      .dc-list { margin: 6px 0 0; border-top: 1px solid var(--border); }
+      /* Review is the before-picture of the same card. Green marks a positive
+         outcome (design.md §2), and nothing has happened yet — so the pending
+         state carries Signal Blue, the colour of the action about to be taken. */
+      .dc-badge.review { background: var(--blue-tint); color: var(--blue); }
+      .dc-eyebrow.review { color: var(--blue-strong); }
+      .dc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+      .dc-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+      .dc-row dt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex-shrink: 0; padding-top: 2px; }
+      .dc-row dd { margin: 0; font-size: 14px; color: var(--ink); text-align: right; word-break: break-word; }
+
+      /* ── Inline result cards — feature-card pattern: tinted icon chip,
+            tags, tight Manrope headline, one supporting line. ─────── */
+      .msg.results { align-self: stretch; width: 100%; }
+      .rc-head { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 2px 0 10px; }
+      .rc-empty { font-size: 13px; color: var(--ink-2); padding: 8px 0; }
+      .rc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
+      .resultcard { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
+      .resultcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
+      .rc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
+      .rc-chip { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+      .rc-chip svg, .rc-chip img { width: 21px; height: auto; display: block; }
+      .rc-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
+      .rc-tags .tag { font-size: 12px; padding: 3px 10px; }
+      .rc-title { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
+      .rc-sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 2px; }
+      .rc-list { margin: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; }
+      .rc-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4; }
+      .rc-row dt { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex-shrink: 0; padding-top: 2px; }
+      .rc-row dd { margin: 0; color: var(--ink); text-align: right; word-break: break-word; }
+      .rc-id { margin-top: 10px; min-width: 0; }
+      .rc-id code { display: block; font-family: var(--mono); font-size: 10px; color: var(--blue-strong); background: var(--inline-bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .rc-row dd a { color: var(--blue-strong); text-decoration: none; }
+      .rc-row dd a:hover { text-decoration: underline; }
+
+      /* ── Metrics panel (technical details on demand) ─────────────── */
+      .msg.metrics { align-self: stretch; width: 100%; max-width: 100%; background: none; border: none; padding: 0; white-space: normal; }
+      .metricscard { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
+      .metricscard summary { cursor: pointer; list-style: none; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); padding: 11px 16px; user-select: none; }
+      .metricscard summary::-webkit-details-marker { display: none; }
+      .metricscard summary:hover { color: var(--blue-strong); }
+      .metricscard[open] summary { border-bottom: 1px solid var(--border); }
+      .mx-table { width: calc(100% - 32px); margin: 12px 16px; border-collapse: collapse; font-size: 12px; }
+      .mx-table th { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--border); }
+      .mx-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border); color: var(--ink-2); }
+      .mx-table th.num, .mx-table td.num { text-align: right; font-family: var(--mono); font-size: 11px; }
+      .mx-table tr.total td { color: var(--ink); font-weight: 600; border-bottom: none; }
+      .mx-compare { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
+      .mx-compare-title { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
+      .mx-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
+      .mx-bar-label { font-family: var(--mono); font-size: 10px; color: var(--ink-3); width: 56px; flex-shrink: 0; }
+      .mx-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
+      .mx-bar-track i { display: block; height: 100%; border-radius: 4px; }
+      .mx-bar-track i.mcp { background: var(--blue); }
+      .mx-bar-track i.rag { background: var(--ink-3); }
+      .mx-bar-value { font-family: var(--mono); font-size: 11px; color: var(--ink-2); width: 64px; text-align: right; flex-shrink: 0; }
+      .mx-savings { align-self: flex-start; font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); padding: 4px 12px; margin-top: 2px; }
+      .mx-savings.pos { color: var(--green-strong); background: var(--green-tint); }
+      .mx-savings.neg { color: var(--red); background: #FEF2F2; }
+      .mx-note { font-size: 11px; line-height: 1.5; color: var(--ink-3); }
+
+      @media (max-width: 840px) {
+        .side { position: absolute; inset: 0 auto 0 0; z-index: 6; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 18px 48px rgba(15,23,42,.18); }
+        .overlay.nav .side { transform: none; }
+        /* Under the drawer, over the conversation: the strip of thread still
+           showing beside the drawer is what a tap to dismiss lands on. */
+        .overlay.nav .scrim {
+          display: block; position: absolute; inset: 0; z-index: 5;
+          background: rgba(15,23,42,.32);
+          animation: nx-scrim-in .2s ease;
+        }
+        @keyframes nx-scrim-in { from { opacity: 0; } to { opacity: 1; } }
+        @media (prefers-reduced-motion: reduce) {
+          .side { transition: none; }
+          .overlay.nav .scrim { animation: none; }
+        }
+        .menu { display: flex; }
+        .msg { max-width: 86%; }
+        .hist-del { opacity: 1; }
+      }
+    </style>
+    <button class="launcher" title="Open ${escapeHtml(this._name)}" aria-label="Open ${escapeHtml(this._name)}">${this._logoMarkup()}</button>
+    <div class="overlay" role="dialog" aria-label="${escapeHtml(this._name)}">
+      <div class="scrim" hidden></div>
+      <aside class="side">
+        <div class="side-head">
+          <span class="brand">${this._logoMarkup()}</span>
+          <span class="side-title">Conversations</span>
+          <button class="newchat" title="New conversation" aria-label="New conversation">${ICON_PLUS}</button>
+        </div>
+        <div class="history"></div>
+      </aside>
+      <main class="main">
+        <div class="main-head">
+          <button class="menu" aria-label="Toggle conversations">${ICON_MENU}</button>
+          <span class="head-mark"><span class="head-ring" hidden></span><span class="brand">${this._logoMarkup()}</span></span>
+          <h2>${escapeHtml(this._name)}</h2>
+          <span class="tag blue provenance"><i class="dot"></i>On-device</span>
+          <button class="close" aria-label="Close">×</button>
+        </div>
+        <div class="prog"><i></i></div>
+        <div class="thread"></div>
+        <div class="statusline"></div>
+        <div class="composer">
+          <textarea rows="1" placeholder="Message the agent…" aria-label="Message the agent"></textarea>
+          <button class="go" aria-label="Send">${ICON_ARROW}</button>
+        </div>
+        <footer class="foot">
+          <a class="powered" href="${NXIS_SITE_URL}" target="_blank" rel="noopener noreferrer">
+            ${NXIS_LOGO_SVG}<span>Powered by NxisAI</span>
+          </a>
+        </footer>
+      </main>
+    </div>`;
+    }
+}
+customElements.define('nxis-agent-fullscreen', NxisAgentFullscreen);
+//# sourceMappingURL=agent-fullscreen.js.map