@nxisai/agent-harness 0.4.1 → 0.5.0

package/src/ui/agent-fullscreen.ts

@@ -0,0 +1,3984 @@
+/**
+ * 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, type MountedSurface } from '../a2ui/host.js';
+import { emitCardsSurface, type ResultCardData } 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, emitConfirm } from '../a2ui/stepper.js';
+import { AgentHarness, isAbort } from '../harness/harness.js';
+import { WebMcpTools } from '../harness/tools/webmcp.js';
+import {
+  extractResult,
+  proseAnswer,
+  missingRequired,
+  toolSchema,
+} from '../harness/tools/schema.js';
+import type { ModelProvider } from '../providers/types.js';
+import { connectTools } from '../harness/tools/source.js';
+import {
+  handoffFor,
+  isSiteTool,
+  withoutSiteSuffix,
+  HANDOFF_RESULT,
+} from '../harness/tools/action-tools.js';
+import { resumePendingAction } from '../harness/tools/resume.js';
+import { savePendingVisit, setConversationSource, takePendingVisit } from '../harness/tools/pending-action.js';
+import { pageForEntity, type SitePage } from '../harness/tools/site-pages.js';
+import { OPEN_PAGE_TOOL } from '../harness/tools/open-page.js';
+import { onJourneyChange, recordStep, restoreJourney, type AgentStep } from '../harness/steps.js';
+import { viewJourney } from './journey.js';
+import { AgentCoordinator } from '../harness/router/coordinator.js';
+import type { RouteRule } from '../harness/router/rules.js';
+import type { AskRequest, ConfirmRequest, HarnessRenderer, StreamingBubble as HStreamingBubble } from '../harness/renderer.js';
+import {
+  LocalGemmaProvider,
+  parseToolCall,
+  stripMarkers,
+  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,
+  type ChatMessage,
+  type ProgressDetail,
+  type PreloadMode,
+} from '../engine.js';
+import {
+  DEFAULT_SYSTEM_PROMPT,
+  DEFAULT_SUGGESTIONS,
+  DEFAULT_EMPTY_STATE,
+  DEFAULT_AGENT_NAME,
+  DEFAULT_LOGO,
+  THEME_TOKENS,
+  PROFILE_ALIASES,
+  type AgentTheme,
+} from './config.js';
+import type { JsonSchema, ModelContextToolInfo, ModelContextToolResponse } from '../types.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
+
+interface MetricsRound {
+  round: number;
+  promptTokens: number;
+  outputTokens: number;
+  toolCalls: number;
+  toolResultTokens: number;
+  results: number;
+}
+
+function estimateRagTokens(rounds: MetricsRound[]): {
+  ragInput: number;
+  ragOutput: number;
+  numResults: number;
+  ragChunks: number;
+} {
+  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: number) => 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: number): string {
+  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);
+
+/**
+ * Names for the retrieval tools the package itself bridges in.
+ *
+ * `nxis_query` is a fine name for a model and a poor one for a visitor, and a
+ * native registry may strip any title we attach, so the few tools this package
+ * registers are named here.
+ */
+const FRIENDLY_TOOL_NAMES: Record<string, string> = {
+  nxis_query: 'Search records',
+  nxis_get: 'Get a record',
+  nxis_list_types: 'List record types',
+};
+
+const svg = (body: string) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+/** A plug: the tools the agent can reach. */
+const ICON_TOOLS = svg('<path d="M7 3v4M13 3v4M5 7h10v3a5 5 0 0 1-10 0V7ZM10 15v3"/>');
+const ICON_LOCK = svg('<rect x="4.5" y="9" width="11" height="8" rx="2"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9"/>');
+const ICON_FORM = svg('<rect x="4" y="3.5" width="12" height="13" rx="2"/><path d="M7 8h6M7 11h6M7 14h3"/>');
+const ICON_SEARCH = svg('<circle cx="9" cy="9" r="4.8"/><path d="m13 13 3.5 3.5"/>');
+const ICON_GLOBE = svg('<circle cx="10" cy="10" r="6.5"/><path d="M3.5 10h13M10 3.5c2 2 2 11 0 13M10 3.5c-2 2-2 11 0 13"/>');
+
+/**
+ * Split a message into prose and code.
+ *
+ * Two things read as code: a fenced block, and a message that is nothing but
+ * JSON — which is what a tool result looks like when something hands one back
+ * raw. Wrapped as prose it becomes a wall of text that breaks at the wrong
+ * places, taking any URL inside it with it.
+ *
+ * @param text - The message.
+ * @returns The parts in order, each marked as code or not.
+ */
+function splitCode(text: string): { text: string; code: boolean }[] {
+  const fenced = text.split(/```[a-zA-Z]*\n?/);
+  // An opening and a closing fence produce at least three parts; the odd ones
+  // are what sat between them.
+  if (fenced.length > 2) {
+    return fenced.map((part, i) => ({ text: i % 2 ? part.replace(/\n$/, '') : part, code: i % 2 === 1 }));
+  }
+  const trimmed = text.trim();
+  if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+    try {
+      return [{ text: JSON.stringify(JSON.parse(trimmed), null, 2), code: true }];
+    } catch {
+      // Starts like JSON without being it — ordinary prose.
+    }
+  }
+  return [{ text, code: false }];
+}
+
+/** Machine output rather than something someone wrote: JSON, most often raw. */
+function looksMachine(text: string): boolean {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) return false;
+  try {
+    JSON.parse(trimmed);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Longer than this, a block is folded away rather than filling the thread. */
+const FOLD_LINES = 10;
+
+/**
+ * Write a message into its bubble, keeping code as code.
+ *
+ * A long block is folded behind a summary: output worth keeping, but not
+ * worth scrolling past every time. Everything is written as text rather than
+ * markup — a message may carry a tool's output, which is not ours to trust
+ * as HTML.
+ */
+function fillMessage(el: HTMLElement, text: string): void {
+  for (const part of splitCode(text)) {
+    if (part.code) {
+      const pre = document.createElement('pre');
+      pre.className = 'codeblock';
+      const code = document.createElement('code');
+      code.textContent = part.text;
+      pre.appendChild(code);
+
+      const lines = part.text.split('\n').length;
+      if (lines > FOLD_LINES) {
+        const fold = document.createElement('details');
+        fold.className = 'codefold';
+        const summary = document.createElement('summary');
+        summary.textContent = `${lines} lines`;
+        fold.append(summary, pre);
+        el.appendChild(fold);
+      } else {
+        el.appendChild(pre);
+      }
+    } else if (part.text) {
+      el.appendChild(document.createTextNode(part.text));
+    }
+  }
+}
+
+/**
+ * Stored values the agent reuses across turns, exposed as `element.preferences`.
+ *
+ * The host page supplies what it already knows about the visitor, and the agent
+ * uses it to fill forms and to answer in context.
+ */
+export interface AgentPreferences {
+  /** All values, or one by key. */
+  get(): Record<string, string>;
+  get(key: string): string | undefined;
+  /** Set one key, or merge an object. An empty value clears the key. */
+  set(key: string, value: string): void;
+  set(values: Record<string, string>): void;
+  /** Forget one key, or everything. */
+  clear(key?: string): void;
+  /** Keys the agent can map onto form fields. */
+  keys(): string[];
+  /** Survive reloads. Off by default — see the `preferences` getter. */
+  persist: boolean;
+}
+
+interface DetailRow {
+  label: string;
+  value: string;
+  /** Optional link target (e.g. tel: for phone numbers). */
+  href?: string;
+}
+
+interface ResultCard {
+  title: string;
+  /** schema.org @type — rendered as a blue tag. */
+  type: string;
+  /** Aggregate rating summary — rendered as a green (positive-outcome) tag. */
+  rating?: string;
+  /** Open 24/7 (00:00–23:59 opening hours) — rendered as a green tag. */
+  emergency?: boolean;
+  /** One supporting line under the headline (feature-card pattern). */
+  sub?: string;
+  rows: DetailRow[];
+  id?: string;
+  /** The page on this site the record came from, when it can be told. */
+  page?: { url: string; label: string };
+}
+
+type ThreadItem =
+  | { kind: 'msg'; role: string; text: string }
+  | { kind: 'tool'; name: string; text: string; isError: boolean }
+  | { kind: 'trace'; name: string; args: Record<string, unknown>; text: string; isError: boolean; count?: number }
+  | { kind: 'route'; agent: string; via: string }
+  | { kind: 'detail'; title: string; note: string; rows: DetailRow[] }
+  | { kind: 'results'; title: string; note: string; cards: ResultCard[] }
+  | { kind: 'metrics'; rounds: MetricsRound[] }
+  | { kind: 'form' }
+  /** A turn the person called off. Kept so the thread explains its own gap. */
+  | { kind: 'stopped' }
+  /**
+   * What the agent did about a request: its steps, kept with the conversation
+   * so a second request does not erase the first, and so a card survives the
+   * page change a cross-page action makes.
+   */
+  | { kind: 'journey'; id: string; steps: AgentStep[] };
+
+interface Conversation {
+  id: string;
+  title: string;
+  messages: ChatMessage[];
+  items: ThreadItem[];
+  /** Real Gemma tokenizer counts per generation round (drives the metrics panel). */
+  metrics?: MetricsRound[];
+}
+
+interface FullscreenEls {
+  launcher: HTMLElement;
+  overlay: HTMLElement;
+  close: HTMLElement;
+  menu: HTMLElement;
+  /** Dismisses the conversation drawer where it overlaps the panel. */
+  scrim: HTMLElement;
+  newchat: HTMLElement;
+  history: HTMLElement;
+  thread: HTMLElement;
+  status: HTMLElement;
+  bar: HTMLElement;
+  /** Names the running step while its card is scrolled out of view. */
+  jstatus: HTMLButtonElement;
+  input: HTMLTextAreaElement;
+  go: HTMLButtonElement;
+  /** Opens the list of tools the agent can use. */
+  toolsBtn: HTMLButtonElement;
+  toolsPop: HTMLElement;
+  toolsCount: HTMLElement;
+  /** Which model is answering, beside the input. */
+  model: HTMLElement;
+}
+
+/**
+ * One specialist agent, as declared by the host page.
+ *
+ * The prompt and the tool filter are what specialise it. The description is
+ * read only when the model is asked to route a turn.
+ */
+export interface AgentDefinition {
+  systemPrompt?: string;
+  tools?(tool: ModelContextToolInfo): boolean;
+  description?: string;
+  /**
+   * What this agent says when its tools are not on the page.
+   *
+   * Worth writing: the useful sentence names what cannot be done and where it
+   * can be, and it is the difference between an agent that admits a limit and
+   * one that answers a booking request by searching the site.
+   */
+  unavailable?: string;
+}
+
+type StreamingBubble = HStreamingBubble;
+
+/** Progress is pushed at the bubble from outside the turn loop — see `_liveBubble`. */
+type SetProgress = (pct: number, detail?: ProgressDetail) => void;
+
+class NxisAgentFullscreen extends HTMLElement {
+  private _turnActive: boolean;
+  /** True while the turn in flight can still be called off. */
+  private _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.
+   */
+  private _turnDone: Promise<void> | null = null;
+  private _tool: ModelContextToolInfo | null;
+  private _formEl: HTMLElement | null;
+  /** Render thread components through A2UI. Off with a2ui="false". */
+  private _useA2ui!: boolean;
+  /** Live A2UI surfaces, disposed when the thread is re-rendered. */
+  private _surfaces!: MountedSurface[];
+  /** Stops listening to the journal. */
+  private _offJourney: (() => void) | null = null;
+  /** Whether the tools menu is showing. */
+  private _toolsOpen = false;
+  /** Closes the tools menu on a press outside it. An arrow, so it can be removed. */
+  private _onOutsidePress = (e: PointerEvent): void => {
+    if (!this._toolsOpen) return;
+    const path = e.composedPath();
+    if (path.includes(this._els.toolsPop) || path.includes(this._els.toolsBtn)) return;
+    this._toggleTools(false);
+  };
+  /** Watches whether the running journey's card is on screen. */
+  private _journeyObserver: IntersectionObserver | null = null;
+  /** The turn loop. This element is only its renderer. */
+  private _harness!: AgentHarness;
+  /** Built only when the host defines agents — otherwise there is one harness. */
+  private _coordinator: AgentCoordinator | null = null;
+  private _agentDefs: Record<string, AgentDefinition> | null = null;
+  private _routes: RouteRule[] = [];
+  private _fallbackAgent = '';
+  /** The live ask/confirm surface, if one is open. */
+  private _prompt: MountedSurface | null = null;
+  private _profile: Record<string, string>;
+  private _persistPrefs = false;
+  private _systemPrompt: string = DEFAULT_SYSTEM_PROMPT;
+  private _suggestions: string[] = DEFAULT_SUGGESTIONS;
+  private _emptyState: string = DEFAULT_EMPTY_STATE;
+  private _name: string = DEFAULT_AGENT_NAME;
+  private _logo: string = DEFAULT_LOGO;
+  private _theme: AgentTheme = {};
+  /** The pending bubble currently on screen, if any — the target for progress. */
+  private _liveBubble: (StreamingBubble & { setProgress: SetProgress }) | null = null;
+  /** The engine's current phase name, shown in the empty state while loading. */
+  private _stage = '';
+  /** The one discovery run, kicked off on first open and awaited before a turn. */
+  private _connect: Promise<void> | null = null;
+  /** The site's pages, for linking results to where they came from. */
+  private _sitePages: SitePage[] = [];
+  private _loadPct = 0;
+  private _loadDetail: ProgressDetail | undefined;
+  /**
+   * 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.
+   */
+  private _emptyLoading: boolean | null = null;
+  private _prefsApi!: AgentPreferences;
+  private _conversations: Conversation[];
+  private _activeId: string | null;
+  private _els!: FullscreenEls;
+  private provider!: ModelProvider;
+  private toolSource!: WebMcpTools;
+  /** A provider the host supplied, used instead of the local model. */
+  private _provider: ModelProvider | null = null;
+
+  constructor() {
+    super();
+    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(): void {
+    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')! as HTMLElement,
+      newchat: root.querySelector('.newchat')!,
+      history: root.querySelector('.history')!,
+      thread: root.querySelector('.thread')!,
+      status: root.querySelector('.statusline')!,
+      bar: root.querySelector('.prog > i')!,
+      jstatus: root.querySelector('.jstatus')!,
+      input: root.querySelector('.composer textarea')!,
+      go: root.querySelector('.composer .go')!,
+      toolsBtn: root.querySelector('.tools-btn')!,
+      toolsPop: root.querySelector('.tools-pop')!,
+      toolsCount: root.querySelector('.tools-count')!,
+      model: root.querySelector('.composer .model')!,
+    };
+
+    this._applyMode();
+
+    // 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 as JsonSchema),
+      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();
+
+    // Journey cards follow the journal rather than the renderer, because the
+    // steps that finish a cross-page action are recorded by the resume below,
+    // before any turn — and so before any renderer call — exists on this page.
+    this._offJourney?.();
+    this._offJourney = onJourneyChange((_step, all) => this._onJourney(all));
+    this._els.toolsBtn.addEventListener('click', () => this._toggleTools());
+    this._els.toolsPop.addEventListener('keydown', (e) => {
+      if (e.key !== 'Escape') return;
+      e.stopPropagation();
+      this._toggleTools(false);
+      this._els.toolsBtn.focus();
+    });
+    // Outside the menu closes it. On the document, with the composed path,
+    // so a press anywhere on the host page counts as outside too.
+    document.removeEventListener('pointerdown', this._onOutsidePress);
+    document.addEventListener('pointerdown', this._onOutsidePress);
+
+    this._els.jstatus.addEventListener('click', () => {
+      const cards = this._els.thread.querySelectorAll<HTMLElement>('.journey.is-running');
+      cards[cards.length - 1]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    });
+
+    // Whoever builds the tools, a call that leaves this page reports back to
+    // the thread it was made in.
+    setConversationSource(() => this._activeId ?? undefined);
+
+    // A form confirmed on another page submits here, now that the page it
+    // belongs to is the one open.
+    void this._resumePendingAction();
+    this._resumePendingVisit();
+
+    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();
+  }
+
+  private _navOpen(): boolean {
+    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.
+   */
+  private _setNav(open: boolean): void {
+    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();
+  }
+
+  disconnectedCallback(): void {
+    document.removeEventListener('pointerdown', this._onOutsidePress);
+    // Moved or removed: nothing left on screen to keep in step with the journal.
+    this._offJourney?.();
+    this._offJourney = null;
+    this._journeyObserver?.disconnect();
+    this._journeyObserver = null;
+  }
+
+  /** Programmatic open (used by pages that dock the agent full-page). */
+  open(): void {
+    this._open();
+  }
+
+  private _open(): void {
+    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 ──────────────────────────────────────────────────────────
+  private _loadConversations(): void {
+    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();
+  }
+
+  private _saveConversations(): void {
+    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 */
+    }
+  }
+
+  private _active(): Conversation | null {
+    return this._conversations.find((c) => c.id === this._activeId) || null;
+  }
+
+  private _newConversation(): void {
+    const conv: Conversation = {
+      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();
+  }
+
+  private _switchConversation(id: string): void {
+    if (id === this._activeId) return;
+    this._activeId = id;
+    this._tool = null;
+    this._formEl = null;
+    this._syncProfileContext();
+    this._setNav(false);
+    this._renderHistory();
+    this._renderThread();
+  }
+
+  private _renderHistory(): void {
+    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 as HTMLElement).dataset.id!)),
+    );
+    this._els.history.querySelectorAll('.hist-del').forEach((b) =>
+      b.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this._deleteConversation((b as HTMLElement).dataset.id!);
+      }),
+    );
+  }
+
+  private _deleteConversation(id: string): void {
+    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 ───────────────────────────────────────────────────────
+  private _renderThread(): void {
+    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 as HTMLElement).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));
+      else if (it.kind === 'journey') this._els.thread.appendChild(this._journeyEl(it));
+    }
+    this._scroll();
+    this._watchRunningJourney();
+  }
+
+  private _clearEmpty(): void {
+    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.
+   */
+  private _msgEl(role: string, text: string): HTMLElement {
+    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}`;
+    fillMessage(el, 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).
+   */
+  private _toolEl(name: string, text: string, isError: boolean): HTMLElement {
+    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');
+    const head = document.createElement('b');
+    head.className =
+      'flex items-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em]';
+    head.innerHTML = `${isError ? ICON_WARN : ICON_CHECK}${escapeHtml(name)}`;
+
+    const body = document.createElement('div');
+    body.className = 'mt-1 font-sans text-[13px] leading-normal text-ink-2';
+    // A tool's own sentence is worth showing; its raw payload is for whoever
+    // is building the agent, and lives in the trace, which `debug` governs.
+    const shown =
+      this.debug || !looksMachine(text)
+        ? text
+        : `${humanize(name)} could not be completed.`;
+    fillMessage(body, shown);
+
+    el.append(head, body);
+    return el;
+  }
+
+  private _detailEl(item: { title: string; note: string; rows?: DetailRow[] }): HTMLElement {
+    const rows = (item.rows || [])
+      .map(
+        (r) =>
+          // Focusable, so a keyboard can open a truncated row the way a pointer does.
+          `<div class="dc-row" tabindex="0"><dt title="${escapeHtml(r.label)}">${escapeHtml(r.label)}</dt>` +
+          `<dd title="${escapeHtml(r.value)}">${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.
+   */
+  private _paintMsg(role: string, text: string, index?: number): HTMLElement {
+    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. */
+  private _actionBar(index: number, text: string): HTMLElement {
+    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<HTMLButtonElement>('[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.
+   */
+  private _editMessage(index: number, text: string): void {
+    const turn = this._els.thread.querySelector<HTMLElement>(`.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.
+   */
+  private async _rerunFrom(index: number, text: string): Promise<void> {
+    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.
+   */
+  private _truncateFrom(index: number): void {
+    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.
+   */
+  private _traceEl(item: Extract<ThreadItem, { kind: 'trace' }>): HTMLElement {
+    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;
+  }
+
+  /**
+   * A journey as a card in the thread.
+   *
+   * Open while it runs, so the step being taken is on screen; folded to one
+   * line once it finishes, so the thread reads as a record rather than a wall
+   * of finished checklists. A `<details>` either way, so a folded journey can
+   * still be opened.
+   */
+  private _journeyEl(item: Extract<ThreadItem, { kind: 'journey' }>): HTMLDetailsElement {
+    const view = viewJourney(item.steps);
+    const el = document.createElement('details');
+    el.className = `msg journey is-${view?.outcome ?? 'running'}`;
+    el.dataset.journey = item.id;
+    el.open = view?.outcome === 'running';
+    if (view?.active) el.dataset.active = view.active.label;
+
+    const summary = document.createElement('summary');
+    const mark = document.createElement('span');
+    mark.className = 'j-sum-mark';
+    mark.setAttribute('aria-hidden', 'true');
+    if (view?.outcome === 'done') mark.textContent = '✓';
+    if (view?.outcome === 'failed') mark.textContent = '!';
+    const title = document.createElement('span');
+    title.className = 'j-title';
+    title.textContent = view?.title ?? 'Working on it';
+    const state = document.createElement('span');
+    state.className = 'j-state';
+    // Running, the header says what is happening now; finished, it says how
+    // it ended, which is the one thing a folded card has to carry.
+    state.textContent =
+      view?.outcome === 'running' ? (view.active?.label ?? '') : (view?.summary.split(' · ')[1] ?? '');
+    summary.append(mark, title, state);
+    el.appendChild(summary);
+
+    const list = document.createElement('ol');
+    list.className = 'j-steps';
+    (view?.steps ?? []).forEach((step, i) => {
+      const li = document.createElement('li');
+      li.className = `j-step is-${step.status}`;
+      const m = document.createElement('span');
+      m.className = 'j-mark';
+      m.textContent = step.status === 'done' ? '✓' : step.status === 'failed' ? '!' : String(i + 1);
+      const label = document.createElement('span');
+      label.className = 'j-label';
+      // Text throughout: a label can carry a business name from the site's data.
+      label.textContent = step.label;
+      label.title = step.detail ? `${step.label} — ${step.detail}` : step.label;
+      if (step.detail) {
+        const small = document.createElement('small');
+        small.textContent = step.detail;
+        label.appendChild(small);
+      }
+      li.append(m, label);
+      list.appendChild(li);
+    });
+    el.appendChild(list);
+    return el;
+  }
+
+  /**
+   * Keep a journey's card, and its record in the conversation, up to date.
+   *
+   * Looks for the journey in every conversation before assuming it is new:
+   * on arrival after a page change the resume records steps before the
+   * conversation they came from has been reopened, and those steps belong
+   * with the card saved on the page before, not in whichever thread is open.
+   */
+  private _onJourney(all: AgentStep[]): void {
+    const view = viewJourney(all);
+    if (!view?.id) return;
+
+    type JourneyItem = Extract<ThreadItem, { kind: 'journey' }>;
+    const isThis = (it: ThreadItem): it is JourneyItem => it.kind === 'journey' && it.id === view.id;
+    let conv = this._conversations.find((c) => c.items.some(isThis));
+    let item = conv?.items.find(isThis);
+    if (conv && item) {
+      item.steps = all;
+    } else {
+      conv = this._active() ?? undefined;
+      if (!conv) return;
+      item = { kind: 'journey', id: view.id, steps: all };
+      conv.items.push(item);
+    }
+
+    if (conv.id === this._activeId && this._els?.thread) {
+      const fresh = this._journeyEl(item);
+      const old = this._els.thread.querySelector(`[data-journey="${CSS.escape(view.id)}"]`);
+      if (old) {
+        // Keep a folded card open if someone opened it to read.
+        if ((old as HTMLDetailsElement).open && view.outcome !== 'running') fresh.open = true;
+        old.replaceWith(fresh);
+      } else {
+        this._clearEmpty();
+        this._els.thread.appendChild(fresh);
+        this._scroll();
+      }
+      this._watchRunningJourney();
+    }
+    this._saveConversations();
+  }
+
+  /**
+   * Show the status line only while the running journey is out of view.
+   *
+   * The card is where the steps are; the line exists for the moment a long
+   * reply pushes it off the top of the thread mid-action, and hides again as
+   * soon as the card is back.
+   */
+  private _watchRunningJourney(): void {
+    this._journeyObserver?.disconnect();
+    this._journeyObserver = null;
+    const bar = this._els?.jstatus;
+    if (!bar) return;
+    const cards = this._els.thread.querySelectorAll<HTMLElement>('.journey.is-running');
+    const card = cards[cards.length - 1];
+    if (!card || typeof IntersectionObserver === 'undefined') {
+      bar.hidden = true;
+      return;
+    }
+    (bar.querySelector('.js-label') as HTMLElement).textContent = card.dataset.active ?? '';
+    this._journeyObserver = new IntersectionObserver(
+      (entries) => {
+        bar.hidden = entries[entries.length - 1].isIntersecting;
+      },
+      { root: this._els.thread, threshold: 0.2 },
+    );
+    this._journeyObserver.observe(card);
+  }
+
+  private _paintToolResult(name: string, text: string, isError: boolean): HTMLElement {
+    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.
+   */
+  private _stopTurn(): void {
+    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();
+  }
+
+  private _paintStopped(): HTMLElement {
+    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. */
+  private _setStoppable(canStop: boolean): void {
+    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');
+    // The model's dot pulses while it is working, so the two controls agree.
+    this._els.model.classList.toggle('busy', canStop);
+    // Enabled either way: disabling it during a turn would disable the very
+    // control needed to stop that turn.
+    go.disabled = false;
+  }
+
+  private _appendMsg(role: string, text: string): HTMLElement {
+    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.
+   */
+  private _appendStreaming(): StreamingBubble {
+    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?: string) => {
+      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: number, detail?: ProgressDetail) => {
+      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: StreamingBubble & { setProgress: typeof setProgress } = {
+      // 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 ──────────────────────────────────────────────────────────────
+  private async _onSend(): Promise<void> {
+    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!: () => void;
+    this._turnDone = new Promise<void>((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);
+      // A remote endpoint reports which model answered; the name beside the
+      // input follows it rather than keeping whatever was configured.
+      this._paintProvenance();
+    } 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.
+   */
+  private _renderer(): HarnessRenderer {
+    return {
+      message: (role, text) => this._appendMsg(role, text),
+      streaming: (): HStreamingBubble => 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);
+        // A read that answers in words — "you are on the home page", "already open" — has no records
+        // to draw, and an empty result card reading "No results found." contradicts the answer it
+        // just gave. Say what it said.
+        const prose = item.cards.length ? '' : proseAnswer(res);
+        if (prose) {
+          this._appendMsg('assistant', prose);
+          this._upsertMetrics();
+          this._saveConversations();
+          this._scroll();
+          return;
+        }
+        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: Extract<ThreadItem, { kind: 'trace' }> = {
+          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),
+    };
+  }
+
+  private _dismissPrompt(): void {
+    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. */
+  private _mountPrompt(
+    messages: ReturnType<typeof emitAsk>,
+    onAction: (name: string, ctx: Record<string, unknown>) => void,
+  ): MountedSurface | null {
+    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: any) => {
+      const name = event?.event?.name ?? event?.name ?? '';
+      const ctx = (event?.event?.context ?? event?.context ?? {}) as Record<string, unknown>;
+      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. */
+  private _renderAsk(req: AskRequest): void {
+    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') ?? {}) as Record<string, unknown>;
+          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') ?? {}) as Record<string, unknown>;
+          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.
+   */
+  private _renderConfirm(req: ConfirmRequest): void {
+    this._clearEmpty();
+    this._dismissPrompt();
+
+    const rows = req.slots
+      .map((sl) => {
+        const label = escapeHtml(sl.schema.description || humanize(sl.name));
+        const value = escapeHtml(String(sl.value ?? ''));
+        return `<div class="dc-row" tabindex="0"><dt title="${label}">${label}</dt><dd title="${value}">${value}</dd></div>`;
+      })
+      .join('');
+    // Where pressing submit leads, when that is another page. Said here in a
+    // sentence so the button itself can stay short enough for a narrow card.
+    const sub = req.destination
+      ? `Submitting opens the page for ${escapeHtml(req.destination)} and sends it from there.`
+      : 'Review these details, then submit.';
+
+    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">${sub}</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">${escapeHtml(
+            req.submitLabel ?? '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"]') as HTMLButtonElement;
+      btn.disabled = true;
+      req.onSubmit(req.values);
+    });
+
+    this._els.thread.appendChild(wrap);
+    this._formEl = wrap;
+    this._scroll();
+  }
+
+  // ── Inline generated form (from JSON-Schema) ───────────────────────────────
+  private _renderForm(tool: ModelContextToolInfo, args: Record<string, unknown>): void {
+    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. */
+  private _renderFormA2ui(tool: ModelContextToolInfo, args: Record<string, unknown>): void {
+    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: any) => {
+      const name = event?.event?.name ?? event?.name;
+      if (name === 'nxis.cancel') {
+        this._cancelForm();
+        return;
+      }
+      if (name !== 'nxis.submit') return;
+
+      const values = (mounted?.read('form') ?? {}) as Record<string, unknown>;
+      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, () => { /* button state lives in the surface */ });
+    });
+
+    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();
+  }
+
+  private _renderFormLegacy(tool: ModelContextToolInfo, args: Record<string, unknown>): void {
+    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') as HTMLFormElement;
+    form.querySelector('[data-act="cancel"]')!.addEventListener('click', () => this._cancelForm());
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      this._submitForm(tool, form);
+    });
+    const clearInvalid = (e: Event) =>
+      (e.target as HTMLElement).classList && (e.target as HTMLElement).classList.remove('invalid');
+    form.addEventListener('input', clearInvalid);
+    form.addEventListener('change', clearInvalid);
+    this._scroll();
+  }
+
+  private _cancelForm(): void {
+    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. */
+  private _control(id: string, name: string, spec: JsonSchema, value: unknown): string {
+    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}">`;
+  }
+
+  private _collect(form: HTMLElement): Record<string, unknown> {
+    const out: Record<string, unknown> = {};
+    form.querySelectorAll('[data-name]').forEach((node) => {
+      const el = node as HTMLInputElement | HTMLSelectElement;
+      const name = (el as HTMLElement).dataset.name!;
+      if ((el as HTMLInputElement).type === 'checkbox') {
+        out[name] = (el as HTMLInputElement).checked;
+        return;
+      }
+      const v = el.value;
+      if (v !== '' && v != null) out[name] = (el as HTMLInputElement).type === 'number' ? Number(v) : v;
+    });
+    return out;
+  }
+
+  private async _submitForm(tool: ModelContextToolInfo, form: HTMLFormElement): Promise<void> {
+    const result = form.querySelector('.genform-result') as HTMLElement;
+    const submitBtn = form.querySelector('button[type="submit"]') as HTMLButtonElement;
+    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: Element | null = 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));
+  }
+
+  private _showFormError(result: HTMLElement, msg: string): void {
+    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.
+   */
+  private async _submitValues(
+    tool: ModelContextToolInfo,
+    values: Record<string, unknown>,
+    result: HTMLElement,
+    setBusy: (busy: boolean) => void,
+  ): Promise<void> {
+    const submitBtn = { set disabled(b: boolean) { setBusy(b); } } as { disabled: boolean };
+    submitBtn.disabled = true;
+    result.className = 'genform-result';
+    result.textContent = 'Submitting…';
+    // Read before the call: a registry may return only the response's text,
+    // and the annotations already say whether this call leaves the page.
+    const leaving = handoffFor(tool, values);
+    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;
+      }
+      // A call that left for another page has filled in nothing yet, so it
+      // must not become a "Submitted" card. The page it is opening finishes
+      // the job and draws the card there.
+      if (leaving || res?.structuredContent?.[HANDOFF_RESULT]) {
+        this._dismissPrompt();
+        // From what we know, not from the response: a registry may hand back
+        // the whole response object as JSON.
+        this._appendMsg(
+          'assistant',
+          leaving
+            ? `Opening ${leaving.label} to submit this…`
+            : 'Opening the page that can submit this…',
+        );
+        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: ThreadItem;
+      let card: HTMLElement;
+      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 as Error).message || e))}</span>`;
+      submitBtn.disabled = false;
+    }
+  }
+
+  private _buildDetailItem(
+    tool: ModelContextToolInfo,
+    values: Record<string, unknown>,
+    resultText: string,
+  ): Extract<ThreadItem, { kind: 'detail' }> {
+    const schema = toolSchema(tool);
+    const props = schema.properties || {};
+    const order = [...Object.keys(props), ...Object.keys(values).filter((k) => !(k in props))];
+    const rows: DetailRow[] = order
+      .filter((k) => values[k] !== undefined && values[k] !== null && values[k] !== '')
+      .map((k) => {
+        const spec = props[k] || {};
+        let v: unknown = 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. */
+  private _extractItems(res: ModelContextToolResponse | string | null): Record<string, unknown>[] {
+    const sources: unknown[] = [];
+    // 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: unknown, depth = 0): void => {
+      if (raw == null || depth > 5) return;
+      const val: unknown = raw;
+      if (typeof val === 'string') {
+        const t = val.trim();
+        if (!t) return;
+        let parsed: unknown;
+        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 as Record<string, unknown>;
+      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 as Record<string, unknown>).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. */
+  private _itemsFrom(data: unknown): Record<string, unknown>[] {
+    const objs = (arr: unknown[]) =>
+      arr.filter((x) => x && typeof x === 'object') as Record<string, unknown>[];
+    if (Array.isArray(data)) return objs(data);
+    if (!data || typeof data !== 'object') return [];
+    const d = data as Record<string, unknown>;
+    for (const key of ['results', 'types', 'items', 'entities', 'data']) {
+      if (Array.isArray(d[key])) return objs(d[key] as unknown[]);
+    }
+    if (d.result && typeof d.result === 'object') return [d.result as Record<string, unknown>];
+    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). */
+  private _entityCard(entity: Record<string, unknown>): ResultCard {
+    const str = (v: unknown) => (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: string | undefined;
+    const ar = entity.aggregateRating as Record<string, unknown> | undefined;
+    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 as Record<string, unknown>).opens) === '00:00' &&
+          String((h as Record<string, unknown>).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: DetailRow[] = [];
+    const push = (label: string, value: unknown, href?: string) => {
+      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 as Record<string, unknown> | undefined;
+    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;
+    const found = pageForEntity(entity, this._sitePages, location.origin);
+    const page = found ? { url: found.url, label: found.name } : undefined;
+    return { title, type, rating, emergency, sub, rows, id, ...(page ? { page } : {}) };
+  }
+
+  private _buildResultsItem(
+    tool: ModelContextToolInfo,
+    res: ModelContextToolResponse,
+  ): Extract<ThreadItem, { kind: 'results' }> {
+    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.
+   */
+  private _toA2uiCards(cards: ResultCard[]): ResultCardData[] {
+    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. */
+  private _resultsElA2ui(item: Extract<ThreadItem, { kind: 'results' }>): HTMLElement {
+    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.
+   */
+  private _resultsEl(item: Extract<ThreadItem, { kind: 'results' }>): HTMLElement {
+    return this.getAttribute('a2ui') === 'a2ui-results'
+      ? this._resultsElA2ui(item)
+      : this._resultsElLegacy(item);
+  }
+
+  private _resultsElLegacy(item: Extract<ThreadItem, { kind: 'results' }>): HTMLElement {
+    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 title="${escapeHtml(r.label)}">${escapeHtml(r.label)}</dt>` +
+              `<dd title="${escapeHtml(r.value)}">${
+                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" title="${escapeHtml(c.title)}">${escapeHtml(c.title)}</div>
+          ${c.sub ? `<div class="rc-sub" title="${escapeHtml(c.sub)}">${escapeHtml(c.sub)}</div>` : ''}
+          ${rows ? `<dl class="rc-list">${rows}</dl>` : ''}
+          ${c.id ? `<div class="rc-id"><code>${escapeHtml(c.id)}</code></div>` : ''}
+          ${
+            c.page
+              ? `<a class="rc-open" href="${escapeHtml(c.page.url)}" data-label="${escapeHtml(c.page.label)}" ` +
+                `title="${escapeHtml(c.page.url)}">Open page<span aria-hidden="true">→</span></a>`
+              : ''
+          }
+        </div>`;
+      })
+      .join('');
+    wrap.innerHTML = `<div class="rc-head">${escapeHtml(item.note)}</div><div class="rc-cards">${cardsHtml}</div>`;
+    // An ordinary link, so it opens in a new tab when asked to. Followed in
+    // this one, the conversation goes with it.
+    wrap.addEventListener('click', (e) => {
+      const link = (e.target as Element).closest<HTMLAnchorElement>('a.rc-open');
+      if (!link || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      savePendingVisit({ pageUrl: link.href, label: link.dataset.label ?? '', conversationId: this._activeId ?? undefined });
+    });
+    return wrap;
+  }
+
+  // ── Metrics panel (real Gemma tokenizer counts vs a RAG estimate) ──────────
+  /** Keep one 'metrics' thread item, always at the end of the thread. */
+  private _upsertMetrics(): void {
+    // 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: Extract<ThreadItem, { kind: 'metrics' }> = { 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));
+  }
+
+  private _metricsEl(item: Extract<ThreadItem, { kind: 'metrics' }>): HTMLElement {
+    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: string, value: number, cls: string) =>
+      `<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(): AgentPreferences {
+    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(): string {
+    return this._systemPrompt;
+  }
+  set systemPrompt(prompt: string) {
+    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(): string {
+    return this._emptyState;
+  }
+  set emptyState(text: string) {
+    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(): string {
+    return this._name;
+  }
+  set name(value: string) {
+    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(): string {
+    return this._logo;
+  }
+  set logo(value: string) {
+    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(): AgentTheme {
+    return { ...this._theme };
+  }
+  set theme(next: AgentTheme) {
+    this._theme = { ...next };
+    this._applyTheme();
+  }
+
+  /** Empty-state chips. Set to [] to show none. */
+  get suggestions(): string[] {
+    return [...this._suggestions];
+  }
+  set suggestions(next: string[]) {
+    this._suggestions = [...next];
+    if (this._els?.thread) this._renderThread();
+  }
+
+  private _loadProfile(): Record<string, string> {
+    try {
+      return JSON.parse(localStorage.getItem(PROFILE_KEY) || 'null') || {};
+    } catch {
+      return {};
+    }
+  }
+
+  /** Persist only when asked; otherwise leave storage untouched. */
+  private _persistProfile(): void {
+    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.
+   */
+  private _applyPreferences(next: Record<string, string>): void {
+    this._profile = next;
+    this._persistProfile();
+    this._syncProfileContext();
+    this._saveConversations();
+    this.dispatchEvent(
+      new CustomEvent('nxis-preferences-change', {
+        detail: { preferences: { ...next } },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _buildPreferencesApi(): AgentPreferences {
+    const self = this;
+    return {
+      get persist() {
+        return self._persistPrefs;
+      },
+      set persist(on: boolean) {
+        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?: string) =>
+        key === undefined ? { ...self._profile } : self._profile[key]) as AgentPreferences['get'],
+      set: ((keyOrValues: string | Record<string, string>, value?: string) => {
+        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);
+      }) as AgentPreferences['set'],
+      clear(key?: string) {
+        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(): string[] {
+        return Object.keys(PROFILE_ALIASES);
+      },
+    };
+  }
+
+  /** Map the saved profile onto a tool's schema property names. */
+  private _profileForSchema(schema: JsonSchema): Record<string, string> {
+    const props = schema && schema.properties ? Object.keys(schema.properties) : [];
+    if (!props.length) return {};
+    const norm = (s: string) => String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
+    const out: Record<string, string> = {};
+    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. */
+  private _syncProfileContext(): void {
+    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 ────────────────────────────────────────────────────────────────
+  private _setStatus(text: string, isError = false): void {
+    // 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();
+    }
+  }
+  private _setBar(pct: number): void {
+    this._els.bar.style.width = `${Math.max(0, Math.min(100, pct))}%`;
+  }
+  private _scroll(): void {
+    this._els.thread.scrollTop = this._els.thread.scrollHeight;
+  }
+
+  private _autosize(): void {
+    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.
+   */
+  private _buildAgents(): void {
+    if (!this.provider || !this._agentDefs) {
+      this._coordinator = null;
+      return;
+    }
+    const names = Object.keys(this._agentDefs);
+    const agents: Record<string, AgentHarness> = {};
+    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 as JsonSchema),
+        onMessages: () => this._saveConversations(),
+        systemPrompt: def.systemPrompt,
+        tools: def.tools,
+        name,
+        unavailable: def.unavailable,
+      });
+    }
+
+    const descriptions: Record<string, string> = {};
+    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. */
+  private async countTokens(text: string): Promise<number> {
+    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.
+   */
+  private _paintRoute(agent: string, via: string): void {
+    if (!this.debug) return;
+    const item: Extract<ThreadItem, { kind: 'route' }> = { kind: 'route', agent, via };
+    this._active()?.items.push(item);
+    this._els.thread.appendChild(this._routeEl(item));
+    this._saveConversations();
+    this._scroll();
+  }
+
+  private _routeEl(item: Extract<ThreadItem, { kind: 'route' }>): HTMLElement {
+    const el = document.createElement('div');
+    el.className = 'routeline';
+    el.textContent = `routed to ${item.agent} · ${item.via}`;
+    return el;
+  }
+
+  /**
+   * Submit a form that was confirmed on another page.
+   *
+   * An action runs by filling the form on its own page, so a call made
+   * elsewhere was confirmed there and carried here. The values were already
+   * reviewed and pressed, which is why this submits rather than asking again —
+   * the button that started it said it would open this page and submit.
+   *
+   * Nothing waiting is the ordinary case, and costs a single storage read.
+   */
+  /**
+   * Continue the conversation that opened this page, and say it is open.
+   *
+   * Reached when the agent opened it or a result card's link was followed.
+   * The thread is the one the visitor was in: by id, or failing that the one
+   * holding the journey that left, so a visit saved without an id still
+   * lands where it started rather than in whichever thread loaded first.
+   */
+  private _resumePendingVisit(): void {
+    const visit = takePendingVisit();
+    if (!visit) return;
+    const journey = visit.steps?.find((s) => s.journey)?.journey;
+    const conv =
+      this._conversations.find((c) => c.id === visit.conversationId) ??
+      (journey
+        ? this._conversations.find((c) => c.items.some((it) => it.kind === 'journey' && it.id === journey))
+        : undefined) ??
+      this._active();
+    if (!conv) return;
+    this._activeId = conv.id;
+    this._renderHistory();
+    this._renderThread();
+    // Finished before the line below, so the card reads done above it.
+    if (visit.steps?.length) {
+      restoreJourney(visit.steps);
+      recordStep({ id: 'navigate', label: `Opened ${visit.label}`, status: 'done' });
+      recordStep({ id: 'submit', label: 'Arrived', status: 'done' });
+    }
+    const label = visit.label || 'the page';
+    this._appendMsg('assistant', `You're on ${label} now.`);
+    // What the model needs to know to answer "what is on this page".
+    conv.messages.push({ role: 'user', content: `[${OPEN_PAGE_TOOL} opened ${label}: ${visit.pageUrl}]` });
+    this._saveConversations();
+    this._scroll();
+    // Covering the page just opened would hide what was asked for.
+    if (this.mode !== 'fullscreen') this._open();
+  }
+
+  private async _resumePendingAction(): Promise<void> {
+    const outcome = await resumePendingAction({
+      onStart: (pending) => {
+        // Back to the conversation it was started in, so the result lands
+        // under the question that prompted it rather than in a fresh thread.
+        const conv = this._conversations.find((c) => c.id === pending.conversationId);
+        if (conv) {
+          this._activeId = conv.id;
+          this._renderHistory();
+          this._renderThread();
+        }
+        this._open();
+        this._setStatus('Submitting the details you confirmed…');
+      },
+      exec: (tool, values) => this.toolSource.execTool(tool, tool.name, values),
+    });
+    if (outcome.status !== 'none') this._setStatus('');
+
+    switch (outcome.status) {
+      case 'none':
+        return;
+
+      // Either way the form is out of reach, and saying which of the two
+      // failed would describe our plumbing rather than their situation.
+      case 'no-registry':
+      case 'no-tool':
+        this._appendMsg(
+          'assistant',
+          `I could not find the ${humanize(outcome.pending.pageToolName)} on this page, so ` +
+            'nothing was submitted. Ask me again and I will fill it in from here.',
+        );
+        return;
+
+      case 'incomplete':
+        this._appendMsg(
+          'assistant',
+          `I brought your details over. This form also needs ${outcome.missing
+            .map((m) => humanize(m).toLowerCase())
+            .join(', ')}.`,
+        );
+        this._renderForm(outcome.tool, outcome.pending.values);
+        return;
+
+      case 'rejected':
+        this._appendMsg('assistant', outcome.text || 'That form did not accept the details.');
+        return;
+
+      case 'failed':
+        this._appendMsg('assistant', `That form could not be submitted: ${outcome.error}`);
+        return;
+
+      case 'submitted': {
+        const active = this._active();
+        const item = this._buildDetailItem(outcome.tool, outcome.pending.values, outcome.text);
+        active?.items.push(item);
+        active?.messages.push({
+          role: 'user',
+          content:
+            `[${outcome.tool.name} submitted with: ${JSON.stringify(outcome.pending.values)}]. ` +
+            'Keep these unless I ask to change them.',
+        });
+        this._els.thread.appendChild(this._detailEl(item));
+        this._saveConversations();
+        this._scroll();
+      }
+    }
+  }
+
+  /**
+   * 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. The
+   * same connection lists the actions on the site's other pages, unless
+   * `site-actions="false"`.
+   *
+   * 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.
+   */
+  private _connectTools(): Promise<void> {
+    if (this._connect) return this._connect;
+    if (this.getAttribute('discover') === 'false') {
+      this._connect = Promise.resolve();
+      return this._connect;
+    }
+    // No credential is passed, and the element takes none: a key in markup or
+    // in a page global is served to every visitor and readable by every script
+    // on the origin. Private tools belong behind an endpoint you host — see
+    // `createProxyProvider` for the same decision on the model key.
+    this._connect = connectTools(undefined, {
+      // Short, because this blocks the first turn: a provider that has not
+      // appeared within a few seconds is not going to.
+      timeout: 4000,
+      siteActions: this.getAttribute('site-actions') !== 'false',
+    })
+      .then(({ remoteTools, siteActions, siteTools, sitePages, warning }) => {
+        this._sitePages = sitePages;
+        if (warning) console.warn('[nxis-agent]', warning);
+        if (remoteTools.length) {
+          console.info(`[nxis-agent] discovered remote tools: ${remoteTools.join(', ')}`);
+        }
+        if (siteActions.length) {
+          console.info(
+            `[nxis-agent] ${siteActions.length} site action(s) → ` +
+              `${siteTools.length} tool(s): ${siteTools.join(', ')}`,
+          );
+        }
+        void this._refreshToolCount();
+        // The page's own script can register after we connect, and a native
+        // registry announces it. Keep the count honest as it does.
+        this.toolSource.modelContext()?.addEventListener('toolchange', () => {
+          void this._refreshToolCount();
+          if (this._toolsOpen) void this._renderTools();
+        });
+      })
+      .catch((err) => console.warn('[nxis-agent] tool discovery failed:', err));
+    return this._connect;
+  }
+
+  // ── Tools menu ─────────────────────────────────────────────────────────────
+
+  /** Open or close the list of tools the agent can use. */
+  private _toggleTools(open = !this._toolsOpen): void {
+    this._toolsOpen = open;
+    this._els.toolsBtn.setAttribute('aria-expanded', String(open));
+    this._els.toolsPop.hidden = !open;
+    if (open) void this._renderTools();
+  }
+
+  /** The number on the tools button, from what the agent would be offered now. */
+  private async _refreshToolCount(): Promise<void> {
+    const tools = await this._harness.offeredTools();
+    this._els.toolsCount.textContent = String(tools.length);
+    this._els.toolsCount.hidden = tools.length === 0;
+    this._els.toolsBtn.setAttribute(
+      'aria-label',
+      tools.length ? `Tools on this page, ${tools.length}` : 'Tools on this page',
+    );
+  }
+
+  /**
+   * Draw the tools menu.
+   *
+   * Lists what the agent would be offered, not every tool registered: that
+   * is the honest answer to "what can it do here". Grouped by where a tool
+   * reaches — this page's own forms, then what works across the site — which
+   * is what explains why a form from another listing is on the list. Every
+   * row is disabled: the site provides these, and they are not the visitor's
+   * to switch off.
+   */
+  private async _renderTools(): Promise<void> {
+    const pop = this._els.toolsPop;
+    const head =
+      '<div class="tp-head"><div class="tp-title">What the agent can use here</div>' +
+      '<div class="tp-sub">This site provides these tools. They load with the page and cannot be turned off.</div></div>';
+    pop.innerHTML = `${head}<div class="tp-empty">Looking for tools…</div>`;
+
+    const tools = await this._harness.offeredTools();
+    if (!this._toolsOpen) return;
+    this._els.toolsCount.textContent = String(tools.length);
+    this._els.toolsCount.hidden = tools.length === 0;
+
+    pop.innerHTML = head;
+    if (!tools.length) {
+      pop.insertAdjacentHTML('beforeend', '<div class="tp-empty">No tools on this page yet.</div>');
+      return;
+    }
+
+    const readOnly = (t: ModelContextToolInfo) => !!t.annotations?.readOnlyHint;
+    const onPage = tools.filter((t) => !isSiteTool(t) && !readOnly(t));
+    const acrossSite = tools.filter((t) => isSiteTool(t) || readOnly(t));
+    const group = (label: string, list: ModelContextToolInfo[]) => {
+      if (!list.length) return;
+      const title = document.createElement('div');
+      title.className = 'tp-grp';
+      title.textContent = label;
+      pop.appendChild(title);
+      for (const tool of list) pop.appendChild(this._toolRow(tool));
+    };
+    group('On this page', onPage);
+    group('Across the site', acrossSite);
+
+    if (tools.some((t) => !readOnly(t))) {
+      pop.insertAdjacentHTML(
+        'beforeend',
+        '<div class="tp-foot">Anything that submits a form asks you first.</div>',
+      );
+    }
+  }
+
+  /** One tool in the menu: what it is, whether it writes, and a lock. */
+  private _toolRow(tool: ModelContextToolInfo): HTMLElement {
+    const site = isSiteTool(tool);
+    const reads = !!tool.annotations?.readOnlyHint;
+    const base = FRIENDLY_TOOL_NAMES[tool.name] ?? humanize(withoutSiteSuffix(tool.name));
+    const name = (base.charAt(0).toUpperCase() + base.slice(1)) + (site ? ' · any page' : '');
+    const desc = (tool.description ?? '').split(/(?<=[.!?])\s/)[0] ?? '';
+
+    const row = document.createElement('div');
+    row.className = 'tp-tool';
+    row.setAttribute('aria-disabled', 'true');
+    row.title = desc ? `${name} — ${desc}` : name;
+
+    const icon = document.createElement('span');
+    icon.className = 'tp-ti';
+    icon.innerHTML = site ? ICON_GLOBE : reads ? ICON_SEARCH : ICON_FORM;
+
+    const text = document.createElement('span');
+    text.className = 'tp-tn';
+    const n = document.createElement('span');
+    n.className = 'tp-name';
+    // Text, not markup: names and descriptions come from the site's data.
+    n.textContent = name;
+    text.appendChild(n);
+    if (desc) {
+      const d = document.createElement('span');
+      d.className = 'tp-desc';
+      d.textContent = desc;
+      text.appendChild(d);
+    }
+
+    const kind = document.createElement('span');
+    kind.className = 'tp-kind';
+    kind.textContent = reads ? 'reads' : 'asks first';
+
+    const lock = document.createElement('span');
+    lock.className = 'tp-lock';
+    lock.innerHTML = ICON_LOCK;
+
+    row.append(icon, text, kind, lock);
+    return row;
+  }
+
+  /**
+   * 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.
+   */
+  private _reportEngineError(err: unknown): void {
+    const raw = String((err as Error)?.message || err || 'Unknown error');
+    let human: string;
+    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.
+   */
+  private _paintLoad(): void {
+    // 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') as HTMLElement | null;
+    const head = this.shadowRoot?.querySelector('.head-ring') as HTMLElement | null;
+
+    for (const [node, show] of [
+      [ring, loading],
+      // The header only takes over once the empty state is gone.
+      [head, loading && !ring],
+    ] as const) {
+      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(): Record<string, AgentDefinition> | null {
+    return this._agentDefs;
+  }
+  set agents(defs: Record<string, AgentDefinition> | null) {
+    this._agentDefs = defs && Object.keys(defs).length ? defs : null;
+    this._buildAgents();
+  }
+
+  /** The routing table. Ignored unless `agents` is set. */
+  get routes(): RouteRule[] {
+    return this._routes;
+  }
+  set routes(rules: RouteRule[]) {
+    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(): string {
+    return this._fallbackAgent;
+  }
+  set fallback(name: string) {
+    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(): ModelProvider | null {
+    return this._provider;
+  }
+  set modelProvider(next: ModelProvider | null) {
+    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.
+   */
+  /**
+   * How much of the page the agent takes when open.
+   *
+   * `'fullscreen'` covers the page, which suits a site where the agent is the
+   * experience. `'window'` docks it in the corner at
+   * `--window-w` × `--window-h` (400 × 620 by default), for a site whose own
+   * content should stay visible and usable beside it. Below 520px a window
+   * covers the page anyway, since at that width the two are the same thing.
+   *
+   * `'inline'` fills the box the host puts the element in and is always
+   * open — for a copilot rail or a sidebar the host lays out itself. The
+   * element does not position itself or move the page; the host does both.
+   */
+  get mode(): 'fullscreen' | 'window' | 'inline' {
+    const raw = this.getAttribute('mode');
+    return raw === 'window' || raw === 'inline' ? raw : 'fullscreen';
+  }
+  set mode(next: 'fullscreen' | 'window' | 'inline') {
+    this.setAttribute('mode', next === 'window' || next === 'inline' ? next : 'fullscreen');
+    this._applyMode();
+  }
+
+  /** Put the overlay in the shape {@link mode} asks for. */
+  private _applyMode(): void {
+    const overlay = this._els?.overlay;
+    if (!overlay) return;
+    const mode = this.mode;
+    overlay.classList.toggle('window', mode === 'window');
+    overlay.classList.toggle('inline', mode === 'inline');
+    if (mode === 'inline') {
+      // Always on screen, so it has to be ready without an open. Tools are
+      // cheap to connect; the model still waits for `preload` or a first
+      // message, so a rail on every page does not cost every visitor 3.4 GB.
+      overlay.classList.add('show');
+      void this._connectTools();
+    }
+  }
+
+  get debug(): boolean {
+    const raw = (this.getAttribute('debug') || '').toLowerCase();
+    if (!this.hasAttribute('debug')) return false;
+    return raw !== 'false' && raw !== '0' && raw !== 'off';
+  }
+  set debug(on: boolean) {
+    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(): PreloadMode {
+    const raw = (this.getAttribute('preload') || '').toLowerCase();
+    if (raw === 'eager') return 'eager';
+    if (raw === 'false' || raw === 'none') return 'none';
+    return 'idle';
+  }
+  set preload(mode: PreloadMode) {
+    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.
+   */
+  private _logoMarkup(): string {
+    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.
+   */
+  private _applyIdentity(): void {
+    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.
+   */
+  private _paintProvenance(): void {
+    const local = this.provider?.local ?? true;
+    // Beside the input: which model is answering, and where it runs.
+    const model = this.shadowRoot?.querySelector('.composer .model');
+    if (model) {
+      const label = this.provider?.label || this.provider?.name || 'Model';
+      (model.querySelector('.model-name') as HTMLElement).textContent = label;
+      (model.querySelector('.model-where') as HTMLElement).textContent = local ? 'on-device' : 'remote';
+      model.setAttribute('title', `${label}, ${local ? 'running in this browser' : 'running on a server'}`);
+    }
+    const badge = this.shadowRoot?.querySelector('.provenance');
+    if (!badge?.lastChild) return;
+    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. */
+  private _applyTheme(): void {
+    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 as keyof AgentTheme];
+      if (!props || !value) continue;
+      for (const prop of props) this.style.setProperty(prop, value);
+    }
+  }
+
+  private _template(): string {
+    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; --stop:#DC2626; --stop-strong:#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; } }
+
+      /* ── Window mode ────────────────────────────────────────────
+         The same panel, docked in a corner rather than covering the
+         page — for a site that wants an assistant beside its content
+         instead of in front of it. The host sets the size through
+         --window-w and --window-h. */
+      .overlay.window {
+        inset: auto; right: 20px; bottom: 20px;
+        width: min(var(--window-w, 400px), calc(100vw - 32px));
+        height: min(var(--window-h, 620px), calc(100vh - 32px));
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius);
+        box-shadow: 0 24px 60px rgba(15,23,42,.22);
+        overflow: hidden;
+      }
+      /* ── Inline mode ────────────────────────────────────────────
+         Fills whatever box the host puts it in — a copilot rail, a sidebar,
+         a column — and leaves where that box goes, and what the page does
+         to make room, to the host. Always open: there is no launcher to
+         press and nothing to close back to. */
+      :host([mode="inline"]) { display: block; position: relative; height: 100%; }
+      :host([mode="inline"]) .launcher { display: none; }
+      /* overflow: hidden is what keeps the conversation drawer inside the
+         host's box. Closed, the drawer waits just off the left edge; without
+         the clip it sits on top of the host's page, and pressing the menu
+         only slides it between two visible places. */
+      .overlay.inline { position: absolute; inset: 0; z-index: auto; animation: none; overflow: hidden; }
+      .overlay.inline .close { display: none; }
+
+      /* The conversation list cannot sit beside a narrow thread, so in a
+         window or a rail it behaves as the drawer the narrow layout already
+         defines, whatever the viewport is doing. */
+      .overlay.window .side, .overlay.inline .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.window.nav .side, .overlay.inline.nav .side { transform: none; }
+      .overlay.window.nav .scrim, .overlay.inline.nav .scrim {
+        display: block; position: absolute; inset: 0; z-index: 5;
+        background: rgba(15,23,42,.32);
+      }
+      .overlay.window .menu, .overlay.inline .menu { display: flex; }
+      .overlay.window .msg, .overlay.inline .msg { max-width: 88%; }
+      .overlay.window .hist-del, .overlay.inline .hist-del { opacity: 1; }
+      .overlay.window .main-head, .overlay.inline .main-head { padding: 12px 14px; }
+      .overlay.window .thread, .overlay.inline .thread { padding: 14px; }
+      @media (prefers-reduced-motion: reduce) {
+        .overlay.window .side, .overlay.inline .side { transition: none; }
+      }
+
+      /* ── Journeys ───────────────────────────────────────────────
+         What the agent did about a request, as a card under it. */
+      .msg.journey { align-self: stretch; max-width: 100%; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
+      .msg.journey > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); }
+      .msg.journey > summary::-webkit-details-marker { display: none; }
+      .msg.journey > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
+      .msg.journey[open] > summary { background: var(--surface); border-bottom: 1px solid var(--border); }
+      .j-title { font-family: var(--display); font-weight: 700; color: var(--ink); white-space: nowrap; }
+      .j-state { margin-left: auto; min-width: 0; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .j-sum-mark { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
+      .is-running .j-sum-mark { border: 2px solid var(--blue); border-right-color: transparent; animation: jspin 1s linear infinite; }
+      .is-done .j-sum-mark { background: var(--green-tint); color: var(--green-strong); }
+      .is-failed .j-sum-mark { background: rgba(185,28,28,.1); color: var(--red); }
+      .is-failed .j-state { color: var(--red); }
+      @keyframes jspin { to { transform: rotate(360deg); } }
+      .j-steps { list-style: none; margin: 0; padding: 12px; display: grid; }
+      .j-step { display: grid; grid-template-columns: 20px 1fr; gap: 10px; position: relative; padding-bottom: 10px; font-size: 12.5px; }
+      .j-step:last-child { padding-bottom: 0; }
+      .j-step:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 21px; bottom: 1px; width: 1px; background: var(--border-strong); }
+      .j-mark { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink-3); font-size: 10px; display: grid; place-items: center; z-index: 1; }
+      .j-step.is-done .j-mark { background: var(--green-tint); border-color: var(--green-strong); color: var(--green-strong); }
+      .j-step.is-active .j-mark { background: var(--blue); border-color: var(--blue); color: #fff; }
+      .j-step.is-failed .j-mark { background: rgba(185,28,28,.1); border-color: var(--red); color: var(--red); }
+      .j-label { color: var(--ink-2); line-height: 1.35; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .j-label small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .j-step:hover .j-label, .j-step:hover .j-label small { white-space: normal; overflow: visible; }
+      .j-step.is-done .j-label, .j-step.is-active .j-label { color: var(--ink); }
+      .j-step.is-active .j-label { font-weight: 600; }
+      .j-label small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
+
+      /* The running step, while its card is scrolled out of view. */
+      .jstatus { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: var(--blue-tint); color: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 8px 20px; cursor: pointer; text-align: left; }
+      .jstatus[hidden] { display: none; }
+      .jstatus:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
+      .js-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--blue); border-right-color: transparent; animation: jspin 1s linear infinite; }
+      .js-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .js-go { margin-left: auto; font-weight: 500; color: var(--blue-strong); }
+      .overlay.window .jstatus, .overlay.inline .jstatus { padding: 8px 14px; }
+      @media (prefers-reduced-motion: reduce) { .is-running .j-sum-mark, .js-spin { animation: none; } }
+      /* Narrower than the card, a card is the viewport: drop the chrome
+         rather than leaving a 16px frame around a full-height panel. */
+      @media (max-width: 520px) {
+        .overlay.window { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; }
+      }
+
+      /* ── 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: the input, with a bar beneath it ─────────────
+         Tools on the left, the model beside them, send or stop on the
+         right. One box around both, so the bar reads as part of the input
+         rather than a second control strip. */
+      .composer { padding: 12px 20px 14px; border-top: 1px solid var(--border); }
+      .overlay.window .composer, .overlay.inline .composer { padding: 10px 12px 12px; }
+      .cbox { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg); padding: 8px 8px 8px 12px; transition: border-color .15s ease, box-shadow .15s ease; }
+      .cbox:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
+      .composer textarea {
+        display: block; width: 100%; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); resize: none;
+        background: transparent; border: 0; padding: 2px 2px 8px; outline: none; max-height: 140px; overflow-y: auto;
+      }
+      .composer textarea::placeholder { color: var(--ink-3); }
+      .cbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
+      .composer .go { margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; 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; }
+      /* Stop is red, with a filled white square: while a prompt runs this is
+         the one control that matters, and it has to be found at a glance. */
+      .composer .go.stop { background: var(--stop); color: #fff; border: 0; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
+      .composer .go.stop:hover { background: var(--stop-strong); }
+      .composer .go.stop svg { width: 15px; height: 15px; }
+      .composer .go.stop svg path { fill: currentColor; }
+      .composer .go:focus-visible, .tools-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
+
+      .model { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
+      .model-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green); }
+      .model.busy .model-dot { background: var(--blue); animation: mpulse 1.2s ease-in-out infinite; }
+      @keyframes mpulse { 50% { opacity: .35; } }
+      .model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+      .model-where { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); }
+
+      /* ── Tools menu ── */
+      .tools { position: relative; flex: none; }
+      .tools-btn { position: relative; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
+      .tools-btn:hover { color: var(--ink); border-color: var(--ink-3); }
+      .tools-btn[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
+      .tools-btn svg { width: 17px; height: 17px; }
+      .tools-count { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 600; display: grid; place-items: center; border: 2px solid var(--bg); }
+      .tools-count[hidden] { display: none; }
+      .tools-pop { position: absolute; left: -4px; bottom: calc(100% + 12px); z-index: 20; width: 320px; max-width: calc(100vw - 48px); max-height: 380px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 13px; box-shadow: 0 14px 36px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06); padding: 6px; }
+      .tools-pop[hidden] { display: none; }
+      .overlay.window .tools-pop, .overlay.inline .tools-pop { width: 296px; }
+      .tp-head { padding: 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
+      .tp-title { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); }
+      .tp-sub { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); margin-top: 2px; }
+      .tp-grp { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 3px; }
+      /* Greyed and locked: visible, not the visitor's to change. */
+      .tp-tool { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; cursor: default; }
+      .tp-ti { width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; opacity: .75; }
+      .tp-ti svg { width: 13px; height: 13px; }
+      .tp-tn { min-width: 0; flex: 1; }
+      .tp-name { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .tp-desc { display: block; font-size: 11px; color: var(--ink-3); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .tp-kind { flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
+      .tp-lock { flex: none; width: 13px; height: 13px; color: var(--ink-3); opacity: .7; display: grid; }
+      .tp-lock svg { width: 13px; height: 13px; }
+      .tp-empty { padding: 12px 10px; font-size: 12px; color: var(--ink-3); }
+      .tp-foot { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 11px; color: var(--ink-3); }
+      @media (prefers-reduced-motion: reduce) { .model.busy .model-dot { animation: none; } }
+      /* 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); }
+      /* One line per row, truncated. A card in a window or a rail is too
+         narrow for a long value to wrap without becoming a column of
+         fragments. The whole row comes back on hover or keyboard focus, and
+         every cell carries its full text as a title too. */
+      .dc-row dt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; flex: 0 1 auto; min-width: 0; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .dc-row dd { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .dc-row:hover dt, .dc-row:hover dd, .dc-row:focus-within dt, .dc-row:focus-within dd { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
+      .dc-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
+      /* Buttons keep their words on one line and wrap as whole buttons. */
+      .dc-actions { flex-wrap: wrap; }
+      .dc-actions .btn { white-space: nowrap; }
+      .overlay.window .dc-actions .btn, .overlay.inline .dc-actions .btn { padding: 9px 14px; font-size: 13px; }
+
+      /* Code inside a message: monospace, and scrolled rather than wrapped,
+         so a long line does not break at arbitrary places. */
+      .msg .codeblock { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; max-width: 100%; }
+      .msg .codeblock:first-child { margin-top: 0; }
+      .msg .codeblock code { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre; color: var(--ink); }
+      .msg.user .codeblock { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
+      .msg.user .codeblock code { color: #fff; }
+
+      /* A long block folds away: kept, but not filling the thread. */
+      .codefold { margin-top: 6px; }
+      .codefold > summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 2px 0; }
+      .codefold > summary::-webkit-details-marker { display: none; }
+      .codefold > summary::before { content: '▸ '; }
+      .codefold[open] > summary::before { content: '▾ '; }
+      .codefold > summary:hover { color: var(--ink-2); }
+      .codefold > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
+      .codefold .codeblock { margin-top: 4px; }
+
+      /* ── 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: 0 1 auto; min-width: 0; max-width: 45%; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .rc-row dd { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .rc-row:hover dt, .rc-row:hover dd, .rc-row:focus-within dt, .rc-row:focus-within dd { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
+      /* The headline and its supporting line truncate too, and come back
+         when the card is hovered or focused. */
+      .rc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .rc-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+      .resultcard:hover .rc-title, .resultcard:focus-within .rc-title { white-space: normal; overflow: visible; }
+      .resultcard:hover .rc-sub, .resultcard:focus-within .rc-sub { -webkit-line-clamp: unset; overflow: visible; }
+      .rc-id { margin-top: 10px; min-width: 0; }
+      .rc-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--blue-strong); text-decoration: none; }
+      .rc-open span { transition: transform 120ms ease; }
+      .rc-open:hover { text-decoration: underline; }
+      .rc-open:hover span { transform: translateX(2px); }
+      .rc-open:focus-visible { outline: 2px solid var(--blue-strong); outline-offset: 2px; border-radius: 4px; }
+      .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>
+        <button class="jstatus" type="button" hidden>
+          <span class="js-spin" aria-hidden="true"></span><span class="js-label"></span><span class="js-go">Show</span>
+        </button>
+        <div class="thread"></div>
+        <div class="statusline"></div>
+        <div class="composer">
+          <div class="cbox">
+            <textarea rows="1" placeholder="Message the agent…" aria-label="Message the agent"></textarea>
+            <div class="cbar">
+              <div class="tools">
+                <button class="tools-btn" type="button" aria-haspopup="dialog" aria-expanded="false" aria-label="Tools on this page">${ICON_TOOLS}<span class="tools-count" hidden></span></button>
+                <div class="tools-pop" role="dialog" aria-label="What the agent can use here" hidden></div>
+              </div>
+              <span class="model"><i class="model-dot" aria-hidden="true"></i><span class="model-name"></span><span class="model-where"></span></span>
+              <button class="go" aria-label="Send">${ICON_ARROW}</button>
+            </div>
+          </div>
+        </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);