@aparte/core 0.7.1 → 0.8.0

package/dist/{index-Dn7TH14G.js → index-BieFbKeW.js}

@@ -35,7 +35,7 @@ class AparteError extends Error {
     return new AparteError(message, defaultCode, void 0, error, status);
   }
 }
-const DEFAULT_ICON_FALLBACKS = {
+const APARTE_DEFAULT_ICON_FALLBACKS = {
   copy: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`,
   check: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
   send: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>`,
@@ -58,13 +58,22 @@ const DEFAULT_ICON_FALLBACKS = {
   close: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
   stop: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="2" width="12" height="12" rx="2"/></svg>`
 };
-const DEFAULT_LOCALE = {
+const APARTE_DEFAULT_LOCALE = {
   inputPlaceholder: "Type a message...",
   sendButton: "Send",
   copy: "Copy",
   copied: "Copied!",
   retry: "Retry",
   thinking: "Thinking...",
+  elicitationOther: "Other…",
+  elicitationOtherPlaceholder: "Type your answer…",
+  elicitationOtherLabel: "Custom answer",
+  submitButton: "Submit",
+  elicitationNext: "Next",
+  elicitationSkip: "Skip",
+  elicitationYes: "Yes",
+  elicitationNo: "No",
+  elicitationAnswerLabel: "Your answer",
   typing: "Typing...",
   error: "Error",
   running: "Running...",
@@ -114,7 +123,7 @@ async function parseNonStreamText(provider, response, providerId) {
   }
   return provider.parseText(json);
 }
-class DirectTransport {
+class AparteDirectTransport {
   byok;
   warnedBrowserKey = false;
   constructor(options = {}) {
@@ -161,10 +170,16 @@ class DirectTransport {
     if (this.warnedBrowserKey) return;
     this.warnedBrowserKey = true;
     console.warn(
-      `[Aparte] DirectTransport is sending the "${providerId}" API key straight from the browser — it is visible to anyone who opens devtools. Fine for BYOK or local models: pass new DirectTransport({ byok: true }) to silence this. For a server-held key, use BackendTransport so the key never reaches the client.`
+      `[Aparte] AparteDirectTransport is sending the "${providerId}" API key straight from the browser — it is visible to anyone who opens devtools. Fine for BYOK or local models: pass new AparteDirectTransport({ byok: true }) to silence this. For a server-held key, use AparteBackendTransport so the key never reaches the client.`
     );
   }
 }
+function uuid() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
 const DEFAULT_THINKING_DELIMITERS = [
   { start: "<think>", end: "</think>" },
   { start: "<thinking>", end: "</thinking>" }
@@ -301,10 +316,18 @@ class AparteStreamParser {
     }
     if (firstPattern.type === "code") {
       const res = this._startCodeBlock(buffer);
-      return res ? { segment: segmentToEmit, remaining: res.remaining } : null;
+      if (!res) {
+        if (segmentToEmit) this._state.activeSegment = segmentToEmit;
+        return null;
+      }
+      return { segment: segmentToEmit, remaining: res.remaining };
     } else if (firstPattern.type === "thinking") {
       const res = this._startThinkingBlock(buffer);
-      return res ? { segment: segmentToEmit, remaining: res.remaining } : null;
+      if (!res) {
+        if (segmentToEmit) this._state.activeSegment = segmentToEmit;
+        return null;
+      }
+      return { segment: segmentToEmit, remaining: res.remaining };
     } else {
       const res = this._startArtifactBlock(buffer);
       if (!res) {
@@ -420,9 +443,10 @@ class AparteStreamParser {
     if (tagEnd === -1) return null;
     const tag = buffer.slice(0, tagEnd + 1);
     const inner = tag.slice("<artifact".length, -1);
+    const mimeMatch = inner.match(/\bmimeType\s*=\s*(?:"([^"]*)"|'([^']*)')/i);
     const typeMatch = inner.match(/\btype\s*=\s*(?:"([^"]*)"|'([^']*)')/i);
     const titleMatch = inner.match(/\btitle\s*=\s*(?:"([^"]*)"|'([^']*)')/i);
-    const mimeType = (typeMatch && (typeMatch[1] ?? typeMatch[2])) ?? "text/plain";
+    const mimeType = (mimeMatch && (mimeMatch[1] ?? mimeMatch[2])) ?? (typeMatch && (typeMatch[1] ?? typeMatch[2])) ?? "text/plain";
     const title = titleMatch ? titleMatch[1] ?? titleMatch[2] : void 0;
     this._state.mode = "artifact";
     this._state.activeSegment = this._createArtifactSegment(mimeType, title);
@@ -477,7 +501,7 @@ class AparteStreamParser {
   }
   _generateId() {
     ++this._state.segmentCounter;
-    return `${this._options.idPrefix}-${crypto.randomUUID()}`;
+    return `${this._options.idPrefix}-${uuid()}`;
   }
   _createTextSegment(content) {
     return {
@@ -597,7 +621,7 @@ function parseAparteEventStream(stream) {
     }
   });
 }
-class BackendTransport {
+class AparteBackendTransport {
   constructor(options) {
     this.options = options;
   }
@@ -626,11 +650,9 @@ class BackendTransport {
 function createAparteChatHandler(options) {
   const doFetch = options.fetchImpl ?? fetch;
   return async function handler(req) {
-    if (options.authorize) {
-      const verdict = await options.authorize(req);
-      if (verdict instanceof Response) return verdict;
-      if (!verdict) return jsonError(401, "Unauthorized.");
-    }
+    const verdict = await options.authorize(req);
+    if (verdict instanceof Response) return verdict;
+    if (!verdict) return jsonError(401, "Unauthorized.");
     let providerId;
     let request;
     try {
@@ -675,11 +697,25 @@ function createAparteChatHandler(options) {
       return jsonError(502, `Vendor request failed: ${err?.message ?? "network error"}`);
     }
     if (!vendor.ok) {
-      const text = await vendor.text().catch(() => "");
-      return new Response(text || JSON.stringify({ error: { message: `HTTP ${vendor.status}` } }), {
-        status: vendor.status,
-        headers: { "Content-Type": vendor.headers.get("Content-Type") ?? "application/json" }
-      });
+      const raw = await vendor.text().catch(() => "");
+      let code;
+      let type;
+      try {
+        const parsed = JSON.parse(raw);
+        code = parsed?.error?.code;
+        type = parsed?.error?.type;
+      } catch {
+      }
+      return new Response(
+        JSON.stringify({
+          error: {
+            message: `Vendor request failed (HTTP ${vendor.status}).`,
+            ...typeof code === "string" ? { code } : {},
+            ...typeof type === "string" ? { type } : {}
+          }
+        }),
+        { status: vendor.status, headers: { "Content-Type": "application/json" } }
+      );
     }
     if (request.stream === false) {
       const json = await vendor.json().catch(() => ({}));
@@ -843,8 +879,15 @@ const TAG_ATTRS = {
 const URL_ATTRS = /* @__PURE__ */ new Set(["href", "src"]);
 const SAFE_URL = /^(?:https?:|mailto:|tel:|ftp:|sms:)/i;
 const RELATIVE_URL = /^(?:[#/.?]|[a-z0-9._~%+-]+(?:[/?#]|$))/i;
-const SAFE_DATA_IMG = /^data:image\/(?:png|jpe?g|gif|webp|avif|bmp|x-icon|svg\+xml)?[;,]/i;
+const SAFE_DATA_IMG = /^data:image\/(?:png|jpe?g|gif|webp|avif|bmp|x-icon|svg\+xml)[;,]/i;
 const CONTROL_WS = /[\u0000-\u0020]+/g;
+function isSafeSrcset(value, tag) {
+  const urlTag = tag === "source" ? "img" : tag;
+  for (const m of value.matchAll(/[a-z][a-z0-9+.-]*:[^\s,]*/gi)) {
+    if (!isSafeUrl(m[0], urlTag)) return false;
+  }
+  return true;
+}
 function isSafeUrl(value, tag) {
   const v = value.replace(CONTROL_WS, "");
   if (!v) return true;
@@ -877,6 +920,7 @@ function scrubStyle(value) {
     const prop = trimmed.slice(0, idx).trim().toLowerCase();
     const val = trimmed.slice(idx + 1);
     if (!val.trim() || !SAFE_STYLE_PROPS.has(prop)) continue;
+    if (val.includes("\\")) continue;
     if (/url\s*\(|expression\s*\(|javascript:|vbscript:|[<>]/i.test(val)) continue;
     kept.push(trimmed);
   }
@@ -890,7 +934,7 @@ function copyAttributes(src, dest, tag) {
     if (name.startsWith("on") || name.startsWith("formaction")) continue;
     if (!name.startsWith("data-") && !GLOBAL_ATTRS.has(name) && !(extra && extra.has(name))) continue;
     if (URL_ATTRS.has(name) && !isSafeUrl(value, tag)) continue;
-    if (name === "srcset" && /javascript:|vbscript:/i.test(value)) continue;
+    if (name === "srcset" && !isSafeSrcset(value, tag)) continue;
     if (name === "style") {
       const scrubbed = scrubStyle(value);
       if (scrubbed === null) continue;
@@ -939,19 +983,34 @@ const defaultSanitizer = (html) => {
   sanitizeChildren(doc.body, container, doc);
   return container.innerHTML;
 };
-const DEFAULT_BUBBLE_ACTIONS = {
+function escapeHtml(value) {
+  let out = "";
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch === "&") out += "&amp;";
+    else if (ch === "<") out += "&lt;";
+    else if (ch === ">") out += "&gt;";
+    else if (ch === '"') out += "&quot;";
+    else if (ch === "'") out += "&#039;";
+    else out += ch;
+  }
+  return out;
+}
+const escapeAttr = escapeHtml;
+const APARTE_DEFAULT_BUBBLE_ACTIONS = {
   copy: true,
   retry: false,
   edit: false,
   feedback: false,
   info: false
 };
-const DEFAULT_HOST_HANDLERS = {
+const APARTE_DEFAULT_HOST_HANDLERS = {
   attachmentPreview: false,
   terminalRun: false,
-  artifactRedownload: false
+  artifactRedownload: false,
+  artifactRehydrate: false
 };
-class AparteConfigClass {
+class AparteConfig {
   _markdownProvider;
   _streamingMarkdownProvider;
   _highlightProvider;
@@ -971,30 +1030,50 @@ class AparteConfigClass {
   _avatarProvider;
   _keyProvider;
   _artifactPreviewBuilder;
-  _locale = DEFAULT_LOCALE;
+  _locale = APARTE_DEFAULT_LOCALE;
   _actions = [];
   _listeners = /* @__PURE__ */ new Set();
   // AI Provider Management (BYORK)
   _aiProviders = /* @__PURE__ */ new Map();
+  /**
+   * What `refreshProviderModels()` last brought back, per provider.
+   *
+   * Without it, `getCurrentModel()` read `provider.getModels()` only — the
+   * SYNCHRONOUS, hand-declared list, which every preset of
+   * `@aparte/provider-openai-compat` leaves empty because a compat endpoint's
+   * list is fetched at runtime. So the current model resolved to `undefined`
+   * for the documented primary path, and everything that reads a capability off
+   * it silently got nothing: `AparteClient._toolsForCurrentModel()` gates tools
+   * on `capabilities.includes('function_calling')`, so NO tool was ever sent to
+   * the model. A registered tool, an approval gate, `<aparte-elicitation>` — all
+   * dead, with the model answering, correctly, that it had been given no tools.
+   */
+  _fetchedModels = /* @__PURE__ */ new Map();
   _modelConfig = {};
   /** Opt-in: gate the composer (block send + grey out) until a model is selected. */
   _requireModelSelection = false;
-  // Transport: where chat requests go + how auth is handled (DirectTransport = browser-direct).
-  _transport = new DirectTransport();
+  /** Host policy for the elicitation panel's free-text escape — see {@link setElicitationOptions}. */
+  _elicitationAllowOther = true;
+  _elicitationLayout = "stepped";
+  _elicitationFieldRenderer;
+  // Transport: where chat requests go + how auth is handled (AparteDirectTransport = browser-direct).
+  _transport = new AparteDirectTransport();
   _modelPreferenceProvider;
   // Conversation persistence (optional, agnostic)
   _conversationManager;
-  // Human-in-the-loop: presents typed input requests (ask_question,
+  // Human-in-the-loop: presents typed input requests (ask_user,
   // tool approval, forms). Set by the <aparte-elicitation> Web Component.
   _elicitationPresenter;
+  /** Warn once per config, not once per request — a tool loop can ask repeatedly. */
+  _warnedNoPresenter = false;
   // Tool Registry
   _tools = /* @__PURE__ */ new Map();
   _toolRenderers = /* @__PURE__ */ new Map();
   // Host handlers — what the app declares it can actually complete.
-  _hostHandlers = { ...DEFAULT_HOST_HANDLERS };
-  // Bubble Actions — DEFAULT_BUBBLE_ACTIONS is the single source of truth
+  _hostHandlers = { ...APARTE_DEFAULT_HOST_HANDLERS };
+  // Bubble Actions — APARTE_DEFAULT_BUBBLE_ACTIONS is the single source of truth
   // (init here, restored by reset(), and the fallback in getBubbleActions()).
-  _bubbleActionsConfig = { ...DEFAULT_BUBBLE_ACTIONS };
+  _bubbleActionsConfig = { ...APARTE_DEFAULT_BUBBLE_ACTIONS };
   // ─────────────────────────────────────────────────────────────────────────
   // Provider Setters (Dependency Injection)
   // ─────────────────────────────────────────────────────────────────────────
@@ -1036,15 +1115,15 @@ class AparteConfigClass {
   }
   /**
    * Configure which action buttons appear in message bubbles.
-   * Unset keys keep their defaults — see {@link DEFAULT_BUBBLE_ACTIONS}: `copy`
+   * Unset keys keep their defaults — see {@link APARTE_DEFAULT_BUBBLE_ACTIONS}: `copy`
    * only, because every other button needs a host to honor it.
    *
    * @example
-   * AparteConfig.setBubbleActions({ retry: true, edit: true }) // you run AparteClient
-   * AparteConfig.setBubbleActions({ feedback: true })          // you listen for aparte-feedback
-   * AparteConfig.setBubbleActions({ copy: false })             // hide everything
+   * aparteGlobalConfig.setBubbleActions({ retry: true, edit: true }) // you run AparteClient
+   * aparteGlobalConfig.setBubbleActions({ feedback: true })          // you listen for aparte-feedback
+   * aparteGlobalConfig.setBubbleActions({ copy: false })             // hide everything
    * // Explicit per-role ordered sets (replace the flag defaults for that role):
-   * AparteConfig.setBubbleActions({ user: ['edit', 'copy'], assistant: ['copy', 'thumbUp', 'thumbDown', 'retry'] })
+   * aparteGlobalConfig.setBubbleActions({ user: ['edit', 'copy'], assistant: ['copy', 'thumbUp', 'thumbDown', 'retry'] })
    */
   setBubbleActions(config) {
     this._bubbleActionsConfig = { ...this._bubbleActionsConfig, ...config };
@@ -1055,28 +1134,34 @@ class AparteConfigClass {
    * trigger only for the ones you claim — see {@link AparteHostHandlersConfig}.
    *
    * @example
-   * AparteConfig.setHostHandlers({ attachmentPreview: true, terminalRun: true });
+   * aparteGlobalConfig.setHostHandlers({ attachmentPreview: true, terminalRun: true });
    */
   setHostHandlers(config) {
     this._hostHandlers = { ...this._hostHandlers, ...config };
     this._notify();
   }
   /** Returns the resolved host-handler declarations (undeclared = false). */
+  // `Required<...>` rather than a hand-written shape: the previous signature
+  // listed the three keys literally, so adding a fourth to the interface left
+  // this method silently returning a type without it — the caller's read did not
+  // even typecheck. Derived from the interface, a new declaration cannot be
+  // forgotten here.
   getHostHandlers() {
     return {
-      attachmentPreview: this._hostHandlers.attachmentPreview ?? DEFAULT_HOST_HANDLERS.attachmentPreview,
-      terminalRun: this._hostHandlers.terminalRun ?? DEFAULT_HOST_HANDLERS.terminalRun,
-      artifactRedownload: this._hostHandlers.artifactRedownload ?? DEFAULT_HOST_HANDLERS.artifactRedownload
+      attachmentPreview: this._hostHandlers.attachmentPreview ?? APARTE_DEFAULT_HOST_HANDLERS.attachmentPreview,
+      terminalRun: this._hostHandlers.terminalRun ?? APARTE_DEFAULT_HOST_HANDLERS.terminalRun,
+      artifactRedownload: this._hostHandlers.artifactRedownload ?? APARTE_DEFAULT_HOST_HANDLERS.artifactRedownload,
+      artifactRehydrate: this._hostHandlers.artifactRehydrate ?? APARTE_DEFAULT_HOST_HANDLERS.artifactRehydrate
     };
   }
   /** Returns the resolved bubble actions config (flag defaults applied; per-role sets passed through). */
   getBubbleActions() {
     return {
-      copy: this._bubbleActionsConfig.copy ?? DEFAULT_BUBBLE_ACTIONS.copy,
-      retry: this._bubbleActionsConfig.retry ?? DEFAULT_BUBBLE_ACTIONS.retry,
-      edit: this._bubbleActionsConfig.edit ?? DEFAULT_BUBBLE_ACTIONS.edit,
-      feedback: this._bubbleActionsConfig.feedback ?? DEFAULT_BUBBLE_ACTIONS.feedback,
-      info: this._bubbleActionsConfig.info ?? DEFAULT_BUBBLE_ACTIONS.info,
+      copy: this._bubbleActionsConfig.copy ?? APARTE_DEFAULT_BUBBLE_ACTIONS.copy,
+      retry: this._bubbleActionsConfig.retry ?? APARTE_DEFAULT_BUBBLE_ACTIONS.retry,
+      edit: this._bubbleActionsConfig.edit ?? APARTE_DEFAULT_BUBBLE_ACTIONS.edit,
+      feedback: this._bubbleActionsConfig.feedback ?? APARTE_DEFAULT_BUBBLE_ACTIONS.feedback,
+      info: this._bubbleActionsConfig.info ?? APARTE_DEFAULT_BUBBLE_ACTIONS.info,
       user: this._bubbleActionsConfig.user,
       assistant: this._bubbleActionsConfig.assistant
     };
@@ -1129,9 +1214,14 @@ class AparteConfigClass {
    *   hardened coverage, or `null` to DISABLE sanitization. Disabling exposes
    *   you to XSS from LLM-authored content — only do so for content you fully
    *   trust and have already sanitized upstream.
-   * @example AparteConfig.setHtmlSanitizer((html) => DOMPurify.sanitize(html));
+   * @example aparteGlobalConfig.setHtmlSanitizer((html) => DOMPurify.sanitize(html));
    */
   setHtmlSanitizer(sanitizer) {
+    if (sanitizer === null) {
+      console.warn(
+        "[aparte] HTML sanitization is now DISABLED (setHtmlSanitizer(null)). Model-authored HTML will be inserted verbatim. Pass a sanitizer (e.g. DOMPurify.sanitize) unless you sanitize upstream yourself."
+      );
+    }
     this._sanitizer = sanitizer;
   }
   /**
@@ -1202,7 +1292,7 @@ class AparteConfigClass {
   }
   /**
    * The icon set as a **complete** provider: every name resolves, falling back
-   * to `DEFAULT_ICON_FALLBACKS` for anything the registered provider doesn't
+   * to `APARTE_DEFAULT_ICON_FALLBACKS` for anything the registered provider doesn't
    * implement. Callers (bubble action bar, composer controls) can therefore
    * invoke `icons.copy()` unconditionally.
    *
@@ -1214,9 +1304,9 @@ class AparteConfigClass {
   getIconProvider() {
     const registered = this._iconProvider;
     const complete = {};
-    for (const name of Object.keys(DEFAULT_ICON_FALLBACKS)) {
+    for (const name of Object.keys(APARTE_DEFAULT_ICON_FALLBACKS)) {
       const fn = registered?.[name];
-      complete[name] = fn ?? (() => DEFAULT_ICON_FALLBACKS[name]);
+      complete[name] = fn ?? (() => APARTE_DEFAULT_ICON_FALLBACKS[name]);
     }
     return complete;
   }
@@ -1315,12 +1405,12 @@ class AparteConfigClass {
     this._notify();
   }
   /**
-   * Restore the built-in English locale (the same `DEFAULT_LOCALE` core ships
+   * Restore the built-in English locale (the same `APARTE_DEFAULT_LOCALE` core ships
    * with). Counterpart of {@link setLocale} for language toggles — avoids
-   * having to import `DEFAULT_LOCALE` yourself.
+   * having to import `APARTE_DEFAULT_LOCALE` yourself.
    */
   resetLocale() {
-    this._locale = DEFAULT_LOCALE;
+    this._locale = APARTE_DEFAULT_LOCALE;
     this._notify();
   }
   /**
@@ -1345,7 +1435,7 @@ class AparteConfigClass {
   getIcon(name) {
     const icon = this._iconProvider?.[name];
     if (icon) return icon();
-    return DEFAULT_ICON_FALLBACKS[name];
+    return APARTE_DEFAULT_ICON_FALLBACKS[name];
   }
   /**
    * Set a custom Key provider (e.g., AparteVault override)
@@ -1372,7 +1462,9 @@ class AparteConfigClass {
     if (!provider || !provider.fetchModels) return [];
     try {
       const apiKey = await this.getKey(providerId);
-      return await provider.fetchModels(apiKey);
+      const models = await provider.fetchModels(apiKey);
+      this._fetchedModels.set(providerId, models);
+      return models;
     } catch (error) {
       console.warn(`[AparteConfig] Failed to refresh models for ${providerId}`, error);
       return [];
@@ -1385,8 +1477,8 @@ class AparteConfigClass {
    * Register one or more AI providers (e.g., OpenRouter, Gemini, Anthropic)
    * @param providers AparteAIProvider implementations
    * @example
-   * AparteConfig.registerAIProvider(OpenRouterProvider);
-   * AparteConfig.registerAIProvider(GeminiProvider, AnthropicProvider);
+   * aparteGlobalConfig.registerAIProvider(OpenRouterProvider);
+   * aparteGlobalConfig.registerAIProvider(GeminiProvider, AnthropicProvider);
    */
   registerAIProvider(...providers) {
     for (const provider of providers) {
@@ -1426,14 +1518,14 @@ class AparteConfigClass {
   }
   /**
    * Set the transport that decides where chat requests go and how auth is
-   * handled. Defaults to {@link DirectTransport} (browser-direct — BYOK/local).
-   * Use a `BackendTransport` to keep API keys server-side (recommended for
+   * handled. Defaults to {@link AparteDirectTransport} (browser-direct — BYOK/local).
+   * Use a `AparteBackendTransport` to keep API keys server-side (recommended for
    * production).
    */
   setTransport(transport) {
     this._transport = transport;
   }
-  /** Get the active transport (DirectTransport by default). */
+  /** Get the active transport (AparteDirectTransport by default). */
   getTransport() {
     return this._transport;
   }
@@ -1441,7 +1533,7 @@ class AparteConfigClass {
    * Register a model preference provider for agnostic persistence.
    * The host app decides how/where to store the selected provider & model.
    * @example
-   * AparteConfig.setModelPreferenceProvider({
+   * aparteGlobalConfig.setModelPreferenceProvider({
    *   save: (p, m) => localStorage.setItem('model', JSON.stringify({p, m})),
    *   load: () => JSON.parse(localStorage.getItem('model') ?? 'null')
    * });
@@ -1515,6 +1607,53 @@ class AparteConfigClass {
    * still fetching its list). Off by default so single-model / backend setups
    * that never select a model are unaffected.
    */
+  /**
+   * Elicitation policy: whether a choice offers a free-text "Other…" escape.
+   *
+   * This is the HOST's decision, not the model's. `ask_user` used to carry an
+   * `allow_other` field in the schema it hands the model, which meant the model
+   * decided your UX — and a small model fills a field it does not understand: one
+   * sent two questions with `allow_other: true` and no options at all, so the
+   * panel rendered a radio list whose only entry was "Other…", twice.
+   *
+   * Every serious implementation of this pattern makes the escape hatch a property
+   * of the surface rather than of the request. Default `true`, which is what the
+   * panel did before, so nothing a user sees changes — only who gets to say so.
+   * A direct `requestUserInput` caller can still set `allowOther` per field; that
+   * is the app talking, and it wins.
+   *
+   * `layout` decides how a form of SEVERAL questions is presented.
+   * `'stepped'` (default) asks them one at a time with a chip per question;
+   * `'stacked'` puts them all in the panel at once. Stacked was the only shape,
+   * inherited unexamined from MCP elicitation — which describes a FORM for
+   * collecting structured data, not two different questions asked mid-conversation.
+   * No product asks a person two questions by stacking them in one box; it is kept
+   * as an option because the form case is real, not because it was the right default.
+   */
+  setElicitationOptions(options) {
+    if (options.allowOther !== void 0) this._elicitationAllowOther = options.allowOther;
+    if (options.layout !== void 0) this._elicitationLayout = options.layout;
+    this._notify();
+  }
+  /** The elicitation policy (see {@link setElicitationOptions}). */
+  getElicitationOptions() {
+    return { allowOther: this._elicitationAllowOther, layout: this._elicitationLayout };
+  }
+  /**
+   * Render one field of the question panel yourself.
+   *
+   * See {@link AparteElicitationFieldRenderer}. Return `null` for a field to let
+   * the built-in render it, which is what makes overriding a single kind practical.
+   * Pass `null` here to remove the renderer.
+   */
+  setElicitationFieldRenderer(fn) {
+    this._elicitationFieldRenderer = fn ?? void 0;
+    this._notify();
+  }
+  /** The custom field renderer, if one is registered. */
+  getElicitationFieldRenderer() {
+    return this._elicitationFieldRenderer;
+  }
   setRequireModelSelection(required) {
     if (this._requireModelSelection === required) return;
     this._requireModelSelection = required;
@@ -1534,10 +1673,13 @@ class AparteConfigClass {
     if (!defaultProvider || !defaultModel) return void 0;
     const provider = this._aiProviders.get(defaultProvider);
     if (!provider) return void 0;
+    const fetched = this._fetchedModels.get(defaultProvider);
+    const fromFetch = fetched?.find((m) => m.id === defaultModel);
+    if (fromFetch) return fromFetch;
     const models = provider.getModels();
     if (models instanceof Promise) {
       console.warn(
-        `[AparteConfig] Provider "${defaultProvider}".getModels() returned a Promise — it is ignored here, so model capabilities (e.g. function_calling) resolve to none and tools are disabled. getModels() must return the list synchronously; implement fetchModels() for async fetching.`
+        `[AparteConfig] Provider "${defaultProvider}".getModels() returned a Promise — it is ignored here, so this model resolves to undefined and nothing can read its capabilities. getModels() must return the list synchronously; implement fetchModels() for async fetching.`
       );
       return void 0;
     }
@@ -1550,7 +1692,7 @@ class AparteConfigClass {
    * Get translated string by key
    */
   t(key) {
-    const val = this._locale[key] || DEFAULT_LOCALE[key];
+    const val = this._locale[key] || APARTE_DEFAULT_LOCALE[key];
     return val === void 0 ? "" : val;
   }
   /**
@@ -1601,7 +1743,7 @@ class AparteConfigClass {
    * Register a tool and its handler together.
    * The handler is called when the AI invokes the tool during streaming.
    * @example
-   * AparteConfig.registerTool(askQuestionTool, askQuestionHandler);
+   * aparteGlobalConfig.registerTool(askUserTool, askUserHandler);
    */
   registerTool(tool, handler) {
     this._tools.set(tool.name, { tool, handler });
@@ -1624,12 +1766,12 @@ class AparteConfigClass {
    * Use this instead of the generic `tool_call` segment renderer for tool-specific UI.
    *
    * @example
-   * // Hide the segment entirely (UI-only tool like ask_question)
-   * AparteConfig.registerToolRenderer('ask_question', { render: () => '' });
+   * // Hide the segment entirely (UI-only tool like ask_user)
+   * aparteGlobalConfig.registerToolRenderer('ask_user', { render: () => '' });
    *
    * @example
    * // Custom pill for a web-search tool
-   * AparteConfig.registerToolRenderer('web_search', { render: (seg) => `<div class="tool-pill">Searching...</div>` });
+   * aparteGlobalConfig.registerToolRenderer('web_search', { render: (seg) => `<div class="tool-pill">Searching...</div>` });
    */
   registerToolRenderer(toolName, renderer) {
     this._toolRenderers.set(toolName, renderer);
@@ -1646,13 +1788,13 @@ class AparteConfigClass {
   // Conversation Manager (optional, agnostic persistence layer)
   // ─────────────────────────────────────────────────────────────────────────
   /**
-   * Register a ConversationManager so any UI controller can persist & load
+   * Register a AparteConversationManager so any UI controller can persist & load
    * conversations without coupling to a framework wrapper.
    */
   setConversationManager(manager) {
     this._conversationManager = manager;
   }
-  /** Returns the registered ConversationManager, or undefined if none. */
+  /** Returns the registered AparteConversationManager, or undefined if none. */
   getConversationManager() {
     return this._conversationManager;
   }
@@ -1674,14 +1816,29 @@ class AparteConfigClass {
   }
   /**
    * Ask the user for typed input mid-run and await their response. This is the
-   * generic primitive behind `ask_question` and tool approval — the KIND of
+   * generic primitive behind `ask_user` and tool approval — the KIND of
    * question is the schema, not a bespoke tool. Resolves `accept` with the
    * value, `decline` when the user declines, or `cancel` when the turn is
-   * cancelled. With no presenter registered it resolves `cancel` (nothing can
-   * present it) rather than hanging.
+   * cancelled.
+   *
+   * With NO presenter registered it resolves `cancel` rather than hanging — and
+   * warns, once, because that `cancel` is otherwise a lie told quietly. The
+   * model reads it as "the user refused"; the user was never asked, and the
+   * developer sees nothing at all. The default presenter is
+   * `<aparte-elicitation>`, which registers itself from its `connectedCallback`
+   * — so it has to be IN THE DOM. A docs page of ours claimed it "installs
+   * itself — nothing to register", which is how this failure mode was found.
    */
   requestUserInput(request) {
-    if (!this._elicitationPresenter) return Promise.resolve({ action: "cancel" });
+    if (!this._elicitationPresenter) {
+      if (!this._warnedNoPresenter) {
+        this._warnedNoPresenter = true;
+        console.warn(
+          "[aparte] requestUserInput() was called with no elicitation presenter, so it resolved `cancel` — the model will read that as the user refusing, but nothing was ever shown. Add <aparte-elicitation></aparte-elicitation> inside your <aparte-chat>, or register your own by calling setElicitationPresenter() on the config this chat resolves — the scoped one if you passed a `config`, aparteGlobalConfig otherwise."
+        );
+      }
+      return Promise.resolve({ action: "cancel" });
+    }
     return this._elicitationPresenter(request);
   }
   /**
@@ -1708,28 +1865,32 @@ class AparteConfigClass {
     this._keyProvider = void 0;
     this._conversationManager = void 0;
     this._elicitationPresenter = void 0;
-    this._locale = DEFAULT_LOCALE;
+    this._locale = APARTE_DEFAULT_LOCALE;
     this._actions = [];
     this._sanitizer = defaultSanitizer;
     this._aiProviders.clear();
+    this._fetchedModels.clear();
     this._tools.clear();
     this._toolRenderers.clear();
     this._modelConfig = {};
     this._requireModelSelection = false;
+    this._elicitationAllowOther = true;
+    this._elicitationLayout = "stepped";
+    this._elicitationFieldRenderer = void 0;
     this._modelPreferenceProvider = void 0;
-    this._bubbleActionsConfig = { ...DEFAULT_BUBBLE_ACTIONS };
-    this._hostHandlers = { ...DEFAULT_HOST_HANDLERS };
+    this._bubbleActionsConfig = { ...APARTE_DEFAULT_BUBBLE_ACTIONS };
+    this._hostHandlers = { ...APARTE_DEFAULT_HOST_HANDLERS };
     this._notify();
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Default Fallbacks (Zero-dependency)
   // ─────────────────────────────────────────────────────────────────────────
   _defaultMarkdownRenderer(raw) {
-    const escaped = this._escapeHtml(raw);
+    const escaped = escapeHtml(raw);
     return escaped.replace(/\n/g, "<br>");
   }
   _defaultHighlightRenderer(code) {
-    return `<pre><code>${this._escapeHtml(code)}</code></pre>`;
+    return `<pre><code>${escapeHtml(code)}</code></pre>`;
   }
   _defaultSkeletonRenderer(type) {
     const fallbacks = {
@@ -1742,34 +1903,44 @@ class AparteConfigClass {
     };
     return fallbacks[type] || fallbacks.text;
   }
-  _escapeHtml(text) {
-    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-  }
 }
-const GLOBAL_CONFIG_KEY = "__APARTE_CONFIG_SINGLETON__";
+const GLOBAL_CONFIG_KEY = Symbol.for("aparte.globalConfig.1");
 function getGlobalConfig() {
   if (typeof window !== "undefined") {
     if (!window[GLOBAL_CONFIG_KEY]) {
-      window[GLOBAL_CONFIG_KEY] = new AparteConfigClass();
+      window[GLOBAL_CONFIG_KEY] = new AparteConfig();
     }
     return window[GLOBAL_CONFIG_KEY];
   }
-  return new AparteConfigClass();
+  return new AparteConfig();
 }
-const AparteConfig = getGlobalConfig();
+const aparteGlobalConfig = getGlobalConfig();
 const APARTE_HOST_ATTR = "data-aparte-host";
 const CONFIG_SLOT = Symbol.for("aparte.instanceConfig");
+function notifyConfigChanged(root, next, previous) {
+  if (next === previous) return;
+  const call = (el2) => {
+    const hook = el2.aparteConfigChanged;
+    if (typeof hook === "function") hook.call(el2, next, previous);
+  };
+  call(root);
+  for (const el2 of root.querySelectorAll("*")) call(el2);
+}
 function attachConfig(el2, config) {
+  const previous = el2[CONFIG_SLOT] ?? resolveConfig(el2.parentElement);
   el2[CONFIG_SLOT] = config;
   el2.setAttribute(APARTE_HOST_ATTR, "");
+  notifyConfigChanged(el2, config, previous);
 }
 function detachConfig(el2) {
+  const previous = el2[CONFIG_SLOT];
   delete el2[CONFIG_SLOT];
   el2.removeAttribute(APARTE_HOST_ATTR);
+  if (previous) notifyConfigChanged(el2, resolveConfig(el2.parentElement), previous);
 }
 function resolveConfig(el2) {
   const host = el2?.closest?.(`[${APARTE_HOST_ATTR}]`);
-  return host?.[CONFIG_SLOT] ?? AparteConfig;
+  return host?.[CONFIG_SLOT] ?? aparteGlobalConfig;
 }
 let _renderConfig = null;
 function runWithConfig(config, fn) {
@@ -1784,7 +1955,7 @@ function runWithConfig(config, fn) {
 function contextConfig(el2) {
   return _renderConfig ?? resolveConfig(el2);
 }
-const DEFAULT_SKELETON_FALLBACKS = {
+const APARTE_DEFAULT_SKELETON_FALLBACKS = {
   message: '<div class="aparte-skeleton-fallback" style="padding:16px;color:#9ca3af;">Loading...</div>',
   code: '<div class="aparte-skeleton-fallback" style="padding:16px;background:#1e293b;color:#64748b;border-radius:8px;">Loading code...</div>',
   thinking: '<div class="aparte-skeleton-fallback" style="padding:8px;color:#9ca3af;">Thinking...</div>',
@@ -1792,103 +1963,45 @@ const DEFAULT_SKELETON_FALLBACKS = {
   list: '<div class="aparte-skeleton-fallback" style="padding:16px;color:#9ca3af;">Loading items...</div>',
   text: '<div class="aparte-skeleton-fallback" style="padding:8px;color:#9ca3af;">...</div>'
 };
-function escapeHtml(str) {
-  let out = "";
-  for (let i = 0; i < str.length; i++) {
-    const ch = str[i];
-    if (ch === "&") out += "&amp;";
-    else if (ch === "<") out += "&lt;";
-    else if (ch === ">") out += "&gt;";
-    else if (ch === '"') out += "&quot;";
-    else if (ch === "'") out += "&#039;";
-    else out += ch;
-  }
-  return out;
-}
-function stripCodeFences(content) {
-  let s = content;
-  if (s.startsWith("```") || s.startsWith("~~~")) {
-    const fenceChar = s[0];
-    let i = 0;
-    while (i < s.length && s[i] === fenceChar) i++;
-    while (i < s.length && s[i] !== "\n") i++;
-    if (i < s.length && s[i] === "\n") i++;
-    s = s.slice(i);
-  }
-  const closeAt = findClosingFence(s);
-  if (closeAt !== -1) s = s.slice(0, closeAt);
-  return s.trim();
-}
-function findClosingFence(s) {
-  let i = 0;
-  while (i < s.length) {
-    const lineStart = i;
-    let k = lineStart;
-    while (k < s.length && (s[k] === " " || s[k] === "	")) k++;
-    if (k < s.length && (s[k] === "`" || s[k] === "~")) {
-      const fenceChar = s[k];
-      let runs = 0;
-      while (k < s.length && s[k] === fenceChar) {
-        runs++;
-        k++;
+function writeStreamedMarkdown(host, contentEl, content, streaming) {
+  if (streaming) {
+    if (host._aparteSmd === void 0) {
+      const renderer = contextConfig().createStreamingMarkdownRenderer(contentEl);
+      if (renderer) {
+        contentEl.textContent = "";
+        host._aparteSmd = { renderer, written: 0 };
+      } else {
+        host._aparteSmd = null;
       }
-      if (runs >= 3) {
-        let onlyWs = true;
-        while (k < s.length && s[k] !== "\n") {
-          if (s[k] !== " " && s[k] !== "	" && s[k] !== "\r") {
-            onlyWs = false;
-            break;
-          }
-          k++;
-        }
-        if (onlyWs) {
-          let cut = lineStart;
-          if (cut > 0 && s[cut - 1] === "\n") cut--;
-          return cut;
-        }
+    }
+    const smd = host._aparteSmd;
+    if (smd) {
+      const delta = content.slice(smd.written);
+      if (delta) {
+        smd.renderer.write(delta);
+        smd.written = content.length;
       }
+      return;
     }
-    while (i < s.length && s[i] !== "\n") i++;
-    if (i < s.length) i++;
-  }
-  return -1;
-}
-const renderers = /* @__PURE__ */ new Map();
-let styleElement = null;
-let defaultsInstalled = false;
-let defaultsDeclined = false;
-function registerSegmentRenderer(renderer) {
-  renderers.set(renderer.type, renderer);
-  injectRendererStyles();
-}
-function declineDefaultRenderers() {
-  defaultsDeclined = true;
-}
-function installDefaultRenderersOnce() {
-  if (defaultsInstalled || defaultsDeclined) return;
-  defaultsInstalled = true;
-  for (const renderer of DEFAULT_RENDERERS) {
-    if (!renderers.has(renderer.type)) renderers.set(renderer.type, renderer);
+  } else if (host._aparteSmd) {
+    host._aparteSmd.renderer.end();
+    host._aparteSmd = void 0;
   }
-  injectRendererStyles();
+  contentEl.innerHTML = contextConfig().renderMarkdown(content);
 }
-function unregisterSegmentRenderer(type) {
-  renderers.delete(type);
-}
-function getSegmentRenderer(type) {
-  return renderers.get(type);
-}
-function collectRendererStyles() {
-  return Array.from(renderers.values()).map((r) => r.getStyles?.() || "").filter(Boolean).join("\n");
-}
-function injectRendererStyles() {
-  if (typeof document === "undefined") return;
-  if (!styleElement) {
-    styleElement = document.createElement("style");
-    styleElement.id = "aparte-renderer-styles";
-    document.head.appendChild(styleElement);
+function highlightMarkdownFences(contentEl) {
+  const blocks = contentEl.querySelectorAll("pre > code:not([data-aparte-highlighted])");
+  for (const block of blocks) {
+    const pre = block.parentElement;
+    if (!pre) continue;
+    const lang = Array.from(block.classList).find((c) => c.startsWith("language-"))?.slice("language-".length) ?? "";
+    const source = block.textContent ?? "";
+    block.setAttribute("data-aparte-highlighted", "");
+    void contextConfig().highlightCode(source, lang).then((html) => {
+      if (pre.isConnected || pre.parentElement) pre.outerHTML = html;
+    }).catch(() => {
+    });
   }
-  styleElement.textContent = collectRendererStyles();
 }
 const textRenderer = {
   type: "text",
@@ -1896,41 +2009,41 @@ const textRenderer = {
   update: (el2, segment) => {
     const contentEl = el2.querySelector(".segment-content");
     if (!contentEl) return;
-    const host = el2;
-    const streaming = segment.isStreaming !== false;
-    if (streaming) {
-      if (host._aparteSmd === void 0) {
-        const renderer = contextConfig().createStreamingMarkdownRenderer(contentEl);
-        if (renderer) {
-          contentEl.textContent = "";
-          host._aparteSmd = { renderer, written: 0 };
-        } else {
-          host._aparteSmd = null;
-        }
-      }
-      const smd = host._aparteSmd;
-      if (smd) {
-        const delta = segment.content.slice(smd.written);
-        if (delta) {
-          smd.renderer.write(delta);
-          smd.written = segment.content.length;
-        }
-        return;
-      }
-    } else if (host._aparteSmd) {
-      host._aparteSmd.renderer.end();
-      host._aparteSmd = void 0;
-    }
-    contentEl.innerHTML = contextConfig().renderMarkdown(segment.content);
+    writeStreamedMarkdown(
+      el2,
+      contentEl,
+      segment.content,
+      segment.isStreaming !== false
+    );
   },
   getStyles: () => ``
 };
+const THINKING_ANCHOR_SLACK = 24;
 const thinkingRenderer = {
   type: "thinking",
-  render: (segment) => `<details class="segment segment-thinking" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed ? "" : "open"}><summary class="thinking-header"><span class="thinking-label">${escapeHtml(segment.label || contextConfig().t("thinking"))}</span><span class="thinking-toggle"></span></summary><div class="thinking-content">${escapeHtml(segment.content)}</div></details>`,
+  /*
+   * Markdown, like every other prose surface.
+   *
+   * The reasoning was rendered as escaped plain text in a `white-space: pre-wrap`
+   * box, so a model that formats its thinking — headings, lists, `**bold**`, a
+   * fenced snippet, which is most of them — showed its own syntax as literal
+   * characters. Nothing said that was deliberate; it read as one, because the
+   * `pre-wrap` made it look like a chosen preformatted block.
+   *
+   * `renderMarkdown` sanitizes its provider's output before it reaches innerHTML,
+   * so this is exactly the text renderer's path, with the same guarantees and no
+   * new class of risk. With no Markdown provider registered it degrades to the
+   * zero-dependency default (escape + `<br>`), which is what it used to be.
+   */
+  render: (segment) => `<details class="segment segment-thinking" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed ? "" : "open"}><summary class="thinking-header"><span class="thinking-label">${escapeHtml(segment.label || contextConfig().t("thinking"))}</span><span class="thinking-toggle"></span></summary><div class="thinking-content">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
   update: (el2, segment) => {
     const contentEl = el2.querySelector(".thinking-content");
-    if (contentEl) contentEl.textContent = segment.content;
+    if (!contentEl) return;
+    const wasAtBottom = contentEl.scrollHeight - contentEl.scrollTop - contentEl.clientHeight <= THINKING_ANCHOR_SLACK;
+    const streaming = segment.isStreaming !== false;
+    writeStreamedMarkdown(el2, contentEl, segment.content, streaming);
+    if (!streaming) highlightMarkdownFences(contentEl);
+    if (wasAtBottom) contentEl.scrollTop = contentEl.scrollHeight;
   },
   getStyles: () => ``
 };
@@ -1941,7 +2054,7 @@ const codeRenderer = {
             <div class="code-header">
                 ${segment.filename ? `<span class="code-filename">${escapeHtml(segment.filename)}</span>` : `<span class="code-header-filler"></span>`}
                 <span class="code-language">${escapeHtml(segment.language || "")}</span>
-                <button class="code-copy" data-action="copy" title="${contextConfig().t("copy")}">
+                <button class="code-copy" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}">
                     ${contextConfig().getIcon("copy")}
                 </button>
             </div>
@@ -2003,8 +2116,8 @@ const terminalRenderer = {
                 </div>
                 <code class="terminal-command">${escapeHtml(segment.command || "")}</code>
                 <div class="terminal-actions">
-                    ${segment.isRunning ? `<span class="terminal-running"><span class="spinner"></span>${contextConfig().t("running")}</span>` : contextConfig().getHostHandlers().terminalRun ? `<button class="terminal-run-btn" data-action="run" aria-label="${contextConfig().t("run")}" title="${contextConfig().t("run")}">${contextConfig().t("run")}</button>` : ""}
-                    <button class="terminal-copy-btn" data-action="copy" aria-label="${contextConfig().t("copy")}" title="${contextConfig().t("copy")}">
+                    ${segment.isRunning ? `<span class="terminal-running"><span class="spinner"></span>${contextConfig().t("running")}</span>` : contextConfig().getHostHandlers().terminalRun ? `<button class="terminal-run-btn" data-action="run" aria-label="${escapeAttr(contextConfig().t("run"))}" title="${escapeAttr(contextConfig().t("run"))}">${contextConfig().t("run")}</button>` : ""}
+                    <button class="terminal-copy-btn" data-action="copy" aria-label="${escapeAttr(contextConfig().t("copy"))}" title="${escapeAttr(contextConfig().t("copy"))}">
                         ${contextConfig().getIcon("copy")}
                     </button>
                 </div>
@@ -2131,13 +2244,13 @@ const toolCallRenderer = {
     }
     const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
     if (customRenderer) {
-      const html = customRenderer.render(segment);
-      if (html) return html;
+      const out = customRenderer.render(segment);
+      if (out) return out;
     }
     const statusIcon = status === "resolved" ? contextConfig().getIcon("check") : status === "aborted" || status === "rejected" ? contextConfig().getIcon("close") : "";
     const spinner = status === "pending" ? `<span class="tool-pill-spinner" aria-hidden="true"></span>` : "";
     return `
-            <div class="segment segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${status}">
+            <div class="segment segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}">
                 <span class="tool-pill">
                     <span class="tool-pill-icon">${contextConfig().getIcon("tool")}</span>
                     <span class="tool-pill-name">${escapeHtml(name)}</span>
@@ -2151,10 +2264,11 @@ const toolCallRenderer = {
     if (segment.status === "awaiting-approval") {
       const toolCallId = segment.toolCall?.id;
       if (!toolCallId) return;
+      const host = element.closest("[data-aparte-host], aparte-chat, aparte-chat-viewport");
       const decide = (approved) => element.dispatchEvent(new CustomEvent("aparte-tool-decision", {
         bubbles: true,
         composed: true,
-        detail: { toolCallId, approved }
+        detail: { toolCallId, approved, targetId: host?.id || void 0 }
       }));
       element.querySelector('[data-tool-decision="approve"]')?.addEventListener("click", () => decide(true));
       element.querySelector('[data-tool-decision="reject"]')?.addEventListener("click", () => decide(false));
@@ -2260,464 +2374,55 @@ const pipelineWaitingRenderer = {
         }
     `
 };
-function registerDefaultRenderers() {
-  defaultsInstalled = true;
-  for (const renderer of DEFAULT_RENDERERS) registerSegmentRenderer(renderer);
+function stripCodeFences(content) {
+  let s = content;
+  if (s.startsWith("```") || s.startsWith("~~~")) {
+    const fenceChar = s[0];
+    let i = 0;
+    while (i < s.length && s[i] === fenceChar) i++;
+    while (i < s.length && s[i] !== "\n") i++;
+    if (i < s.length && s[i] === "\n") i++;
+    s = s.slice(i);
+  }
+  const closeAt = findClosingFence(s);
+  if (closeAt !== -1) s = s.slice(0, closeAt);
+  return s.trim();
 }
-const PREVIEWABLE_KINDS = /* @__PURE__ */ new Set(["react", "html", "svg", "js", "css"]);
-const BINARY_FILE_KINDS = /* @__PURE__ */ new Set(["pdf", "xlsx", "docx"]);
-const artifactRenderer = {
-  type: "artifact",
-  render: (segment) => {
-    const kind = (segment.artifactType || "unknown").toLowerCase();
-    if (BINARY_FILE_KINDS.has(kind)) {
-      return renderBinaryFileArtifact(segment, kind);
-    }
-    const title = segment.title?.trim() || labelForKind(kind);
-    const displayLang = languageForKind(kind);
-    const isStreaming = !!segment.isStreaming;
-    const previewable = PREVIEWABLE_KINDS.has(kind);
-    const isBinary = BINARY_FILE_KINDS.has(kind);
-    const cleanContent = stripCodeFences(segment.content || "");
-    const initialTab = isStreaming || !previewable ? "code" : "preview";
-    const buildPreview = contextConfig().getArtifactPreviewBuilder() ?? buildSafePreviewDocument;
-    const previewSrcdoc = !isStreaming && previewable ? buildPreview(kind, cleanContent, title) : "";
-    return `
-            <div class="segment segment-artifact-card"
-                 data-segment-id="${escapeHtml(segment.id)}"
-                 data-artifact-type="${escapeHtml(kind)}"
-                 data-streaming="${isStreaming ? "true" : "false"}"
-                 data-tab="${initialTab}"
-                 data-previewable="${previewable ? "true" : "false"}"
-                 data-binary="${isBinary ? "true" : "false"}">
-                <header class="aparte-art-card__header">
-                    <div class="aparte-art-card__title-block">
-                        <span class="aparte-art-card__kind" data-kind="${escapeHtml(kind)}">${escapeHtml(displayLang)}</span>
-                        <span class="aparte-art-card__title">${escapeHtml(title)}</span>
-                        ${isStreaming ? '<span class="aparte-art-card__pulse" aria-label="Streaming"></span>' : ""}
-                    </div>
-                    <div class="aparte-art-card__actions">
-                        <button type="button" class="aparte-art-card__btn" data-action="copy" title="${contextConfig().t("copy")}" aria-label="Copy">
-                            ${contextConfig().getIcon("copy")}
-                        </button>
-                        <button type="button" class="aparte-art-card__btn" data-action="download" title="Download" aria-label="Download" ${isStreaming ? "disabled" : ""}>
-                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v9m0 0l-3-3m3 3l3-3M2 13h12"/></svg>
-                        </button>
-                    </div>
-                </header>
-                <nav class="aparte-art-card__tabs" role="tablist">
-                    ${previewable ? `<button type="button" role="tab" data-tab-target="preview" ${initialTab === "preview" ? 'aria-selected="true"' : ""} ${isStreaming ? "disabled" : ""}>Preview</button>` : ""}
-                    <button type="button" role="tab" data-tab-target="code" ${initialTab === "code" ? 'aria-selected="true"' : ""}>Code</button>
-                </nav>
-                <div class="aparte-art-card__body">
-                    <div class="aparte-art-card__pane" data-pane="code">
-                        <div class="code-content-wrapper">
-                            <pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>
-                        </div>
-                    </div>
-                    ${previewable ? `
-                        <div class="aparte-art-card__pane" data-pane="preview">
-                            ${previewSrcdoc ? `<iframe class="aparte-art-card__frame" sandbox="allow-scripts" referrerpolicy="no-referrer" loading="lazy" title="${escapeHtml(title)}" srcdoc="${escapeAttr(previewSrcdoc)}"></iframe>` : '<div class="aparte-art-card__pending">Generating preview…</div>'}
-                        </div>
-                    ` : ""}
-                </div>
-            </div>
-        `;
-  },
-  setup: (element, segment) => {
-    const kind = (segment.artifactType || "").toLowerCase();
-    if (BINARY_FILE_KINDS.has(kind)) {
-      setupBinaryFileArtifact(element, segment, kind);
-      return;
-    }
-    const wrapper = element.querySelector(".code-content-wrapper");
-    if (wrapper) {
-      const displayLang = languageForKind(kind);
-      const cleanContent = stripCodeFences(segment.content || "");
-      void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
-        wrapper.innerHTML = html;
-      }).catch(() => {
-      });
+function findClosingFence(s) {
+  let i = 0;
+  while (i < s.length) {
+    const lineStart = i;
+    let k = lineStart;
+    while (k < s.length && (s[k] === " " || s[k] === "	")) k++;
+    if (k < s.length && (s[k] === "`" || s[k] === "~")) {
+      const fenceChar = s[k];
+      let runs = 0;
+      while (k < s.length && s[k] === fenceChar) {
+        runs++;
+        k++;
+      }
+      if (runs >= 3) {
+        let onlyWs = true;
+        while (k < s.length && s[k] !== "\n") {
+          if (s[k] !== " " && s[k] !== "	" && s[k] !== "\r") {
+            onlyWs = false;
+            break;
+          }
+          k++;
+        }
+        if (onlyWs) {
+          let cut = lineStart;
+          if (cut > 0 && s[cut - 1] === "\n") cut--;
+          return cut;
+        }
+      }
     }
-    element.querySelectorAll("[data-tab-target]").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const target = btn.getAttribute("data-tab-target");
-        if (!target) return;
-        element.setAttribute("data-tab", target);
-        element.querySelectorAll("[data-tab-target]").forEach((b) => {
-          b.setAttribute("aria-selected", b === btn ? "true" : "false");
-        });
-      });
-    });
-    const copyBtn = element.querySelector('[data-action="copy"]');
-    if (copyBtn) {
-      copyBtn.addEventListener("click", () => {
-        const code = stripCodeFences(segment.content || "");
-        void navigator.clipboard.writeText(code).catch(() => {
-        });
-        const original = copyBtn.innerHTML;
-        copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
-        copyBtn.setAttribute("title", contextConfig(copyBtn).t("copied"));
-        setTimeout(() => {
-          copyBtn.innerHTML = original;
-          copyBtn.setAttribute("title", contextConfig(copyBtn).t("copy"));
-        }, 1500);
-      });
-    }
-    const dlBtn = element.querySelector('[data-action="download"]');
-    if (dlBtn) {
-      dlBtn.addEventListener("click", () => {
-        if (dlBtn.disabled) return;
-        const kind2 = (segment.artifactType || "").toLowerCase();
-        const isBinary = BINARY_FILE_KINDS.has(kind2);
-        if (isBinary) {
-          element.dispatchEvent(new CustomEvent("aparte-artifact-redownload", {
-            bubbles: true,
-            composed: true,
-            detail: {
-              segmentId: segment.id,
-              mimeType: segment.mimeType,
-              artifactType: segment.artifactType,
-              title: segment.title,
-              content: stripCodeFences(segment.content || "")
-            }
-          }));
-          return;
-        }
-        downloadTextArtifact(segment);
-      });
-    }
-  },
-  update: (element, segment) => {
-    const isStreaming = !!segment.isStreaming;
-    const kind = (segment.artifactType || "").toLowerCase();
-    if (BINARY_FILE_KINDS.has(kind)) {
-      updateBinaryFileArtifact(element, segment, isStreaming);
-      return;
-    }
-    const previewable = PREVIEWABLE_KINDS.has(kind);
-    const wasStreaming = element.getAttribute("data-streaming") === "true";
-    const cleanContent = stripCodeFences(segment.content || "");
-    const codeEl = element.querySelector(".code-content-wrapper code");
-    if (codeEl) {
-      codeEl.textContent = cleanContent;
-    } else {
-      const wrapper = element.querySelector(".code-content-wrapper");
-      if (wrapper) {
-        const displayLang = languageForKind(kind);
-        wrapper.innerHTML = `<pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>`;
-      }
-    }
-    if (isStreaming) {
-      const segId = element.getAttribute("data-segment-id") ?? segment.id;
-      debounceHighlight(element, ".code-content-wrapper", cleanContent, languageForKind(kind), segId);
-    }
-    if (wasStreaming && !isStreaming) {
-      element.setAttribute("data-streaming", "false");
-      const wrapper = element.querySelector(".code-content-wrapper");
-      if (wrapper) {
-        const displayLang = languageForKind(kind);
-        void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
-          wrapper.innerHTML = html;
-        }).catch(() => {
-        });
-      }
-      element.querySelectorAll("button[disabled]").forEach((b) => {
-        b.disabled = false;
-      });
-      if (previewable) {
-        const pane = element.querySelector('.aparte-art-card__pane[data-pane="preview"]');
-        if (pane) {
-          const title = segment.title?.trim() || labelForKind(kind);
-          const buildPreview = contextConfig().getArtifactPreviewBuilder() ?? buildSafePreviewDocument;
-          const srcdoc = buildPreview(kind, cleanContent, title);
-          pane.innerHTML = `<iframe class="aparte-art-card__frame" sandbox="allow-scripts" referrerpolicy="no-referrer" loading="lazy" title="${escapeAttr(title)}" srcdoc="${escapeAttr(srcdoc)}"></iframe>`;
-        }
-        const currentTab = element.getAttribute("data-tab");
-        if (currentTab !== "code") {
-          element.setAttribute("data-tab", "preview");
-          element.querySelectorAll("[data-tab-target]").forEach((b) => {
-            b.setAttribute("aria-selected", b.getAttribute("data-tab-target") === "preview" ? "true" : "false");
-          });
-        }
-      }
-    }
-  },
-  getStyles: () => `
-        .segment-artifact-card {
-            display: flex; flex-direction: column;
-            margin: 8px 0;
-            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
-            border-radius: 12px;
-            background: var(--aparte-surface, #fff);
-            overflow: hidden;
-            font: inherit;
-            color: var(--aparte-text, inherit);
-        }
-        .aparte-art-card__header {
-            display: flex; align-items: center; justify-content: space-between;
-            padding: 8px 10px;
-            border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
-            background: var(--aparte-surface-2, rgba(0,0,0,0.02));
-            min-height: 36px;
-        }
-        .aparte-art-card__title-block { display: flex; align-items: center; gap: 8px; min-width: 0; }
-        .aparte-art-card__kind {
-            font-size: 0.7rem; font-weight: 600;
-            text-transform: uppercase; letter-spacing: 0.04em;
-            padding: 2px 6px; border-radius: 4px;
-            background: var(--aparte-surface, #fff);
-            border: 1px solid var(--aparte-border, rgba(0,0,0,0.1));
-            color: var(--aparte-text-muted, rgba(0,0,0,0.6));
-        }
-        .aparte-art-card__title {
-            font-size: 0.85rem; font-weight: 500;
-            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-        }
-        .aparte-art-card__pulse {
-            width: 8px; height: 8px; border-radius: 50%;
-            background: var(--aparte-accent, #3b82f6);
-            animation: aparte-art-card-pulse 1.2s ease-in-out infinite;
-        }
-        @keyframes aparte-art-card-pulse {
-            0%, 100% { opacity: 0.35; transform: scale(0.85); }
-            50%      { opacity: 1;    transform: scale(1.1);  }
-        }
-        .aparte-art-card__actions { display: flex; gap: 4px; }
-        .aparte-art-card__btn {
-            display: inline-flex; align-items: center; justify-content: center;
-            width: 28px; height: 28px;
-            background: transparent;
-            border: 1px solid transparent;
-            border-radius: 6px;
-            color: var(--aparte-text-muted, rgba(0,0,0,0.55));
-            cursor: pointer;
-            transition: background 0.12s, border-color 0.12s, color 0.12s;
-        }
-        .aparte-art-card__btn:hover:not(:disabled) {
-            background: var(--aparte-surface-hover, rgba(0,0,0,0.04));
-            border-color: var(--aparte-border, rgba(0,0,0,0.1));
-            color: var(--aparte-text, inherit);
-        }
-        .aparte-art-card__btn:disabled { opacity: 0.4; cursor: not-allowed; }
-        .aparte-art-card__tabs {
-            display: flex; gap: 2px;
-            padding: 4px 8px 0;
-            border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
-            background: var(--aparte-surface-2, rgba(0,0,0,0.02));
-        }
-        .aparte-art-card__tabs button {
-            padding: 6px 12px;
-            font-size: 0.78rem;
-            background: transparent;
-            border: 1px solid transparent;
-            border-bottom: none;
-            border-radius: 6px 6px 0 0;
-            color: var(--aparte-text-muted, rgba(0,0,0,0.6));
-            cursor: pointer;
-            transition: background 0.12s, color 0.12s;
-        }
-        .aparte-art-card__tabs button[aria-selected="true"] {
-            background: var(--aparte-surface, #fff);
-            border-color: var(--aparte-border, rgba(0,0,0,0.08));
-            color: var(--aparte-text, inherit);
-            font-weight: 500;
-        }
-        .aparte-art-card__tabs button:disabled { opacity: 0.4; cursor: not-allowed; }
-        .aparte-art-card__body {
-            position: relative;
-            min-height: 80px;
-            max-height: 600px;
-            overflow: hidden;
-        }
-        .aparte-art-card__pane { display: none; height: 100%; }
-        .segment-artifact-card[data-tab="code"]    .aparte-art-card__pane[data-pane="code"]    { display: block; }
-        .segment-artifact-card[data-tab="preview"] .aparte-art-card__pane[data-pane="preview"] { display: block; }
-        .aparte-art-card__pane[data-pane="code"] {
-            max-height: 600px; overflow: auto;
-        }
-        .aparte-art-card__pane[data-pane="code"] pre {
-            margin: 0; padding: 12px;
-            font-size: 0.82rem;
-            background: var(--aparte-code-bg, #fafafa);
-        }
-        .aparte-art-card__frame {
-            display: block;
-            width: 100%; height: 480px;
-            border: 0;
-            background: #fff;
-        }
-        .aparte-art-card__pending {
-            display: flex; align-items: center; justify-content: center;
-            height: 120px;
-            color: var(--aparte-text-muted, rgba(0,0,0,0.5));
-            font-size: 0.85rem;
-            font-style: italic;
-        }
-        /* ── Binary file artifact (xlsx/pdf/docx) ──────────────────── */
-        .segment-artifact-file {
-            display: flex; flex-direction: column;
-            margin: 8px 0;
-            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
-            border-radius: 12px;
-            background: var(--aparte-surface, #fff);
-            overflow: hidden;
-            color: var(--aparte-text, inherit);
-            font: inherit;
-        }
-        .aparte-art-file__card {
-            display: flex; align-items: center; gap: 12px;
-            padding: 12px 14px;
-            background: var(--aparte-surface-2, rgba(0,0,0,0.02));
-            border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
-        }
-        .aparte-art-file__body {
-            position: relative;
-        }
-        .aparte-art-file__code-pane {
-            max-height: 360px; overflow: auto;
-            background: var(--aparte-code-bg, #fafafa);
-        }
-        .aparte-art-file__code-pane pre {
-            margin: 0; padding: 12px;
-            font-size: 0.82rem;
-            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-        }
-        .aparte-art-file__preview-pane {
-            max-height: 460px;
-            overflow: auto;
-            background: #fff;
-            /* Preview is a document view — force light scheme regardless of
-               the app theme, with a dark text colour so cells stay readable. */
-            color: #1f2937;
-        }
-        .aparte-art-file__icon {
-            width: 40px; height: 40px;
-            border-radius: 8px;
-            display: flex; align-items: center; justify-content: center;
-            background: linear-gradient(135deg, #1d6f42, #0f5132);
-            color: #fff;
-            font-weight: 700;
-            font-size: 0.78rem;
-            letter-spacing: 0.04em;
-            flex-shrink: 0;
-        }
-        .aparte-art-file__icon[data-kind="pdf"]  { background: linear-gradient(135deg, #c0392b, #7d1f17); }
-        .aparte-art-file__icon[data-kind="docx"] { background: linear-gradient(135deg, #1e5288, #0f3060); }
-        .aparte-art-file__meta { flex: 1 1 auto; min-width: 0; }
-        .aparte-art-file__meta-name {
-            font-weight: 600; font-size: 0.92rem;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-        }
-        .aparte-art-file__meta-sub {
-            font-size: 0.78rem;
-            color: var(--aparte-text-muted, rgba(0,0,0,0.55));
-        }
-        .aparte-art-file__actions { display: flex; gap: 6px; flex-shrink: 0; }
-        .aparte-art-file__btn {
-            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
-            background: var(--aparte-surface, #fff);
-            color: var(--aparte-text, inherit);
-            padding: 6px 10px;
-            border-radius: 6px;
-            font-size: 0.8rem;
-            cursor: pointer;
-            transition: background 0.12s ease;
-        }
-        .aparte-art-file__btn:hover { background: var(--aparte-surface-2, rgba(0,0,0,0.05)); }
-        .aparte-art-file__btn--primary {
-            background: var(--aparte-primary, #6366f1);
-            color: #fff;
-            border-color: var(--aparte-primary, #6366f1);
-        }
-        .aparte-art-file__btn--primary:hover { filter: brightness(1.07); }
-        /* Hide the download button until the sandbox has produced the buffer.
-           Avoids confusing the user with a disabled-but-styled-primary button
-           during streaming / compiling. */
-        .segment-artifact-file:not([data-state="ready"]) .aparte-art-file__btn[data-action="download"] {
-            display: none;
-        }
-        .aparte-art-file__preview-pane table {
-            border-collapse: collapse;
-            width: 100%;
-            font-size: 0.82rem;
-            font-family: inherit;
-        }
-        .aparte-art-file__preview-pane th,
-        .aparte-art-file__preview-pane td {
-            border: 1px solid rgba(0,0,0,0.10);
-            padding: 6px 10px;
-            text-align: left;
-            white-space: nowrap;
-            color: #1f2937;
-            background: #fff;
-        }
-        .aparte-art-file__preview-pane tr:nth-child(odd) td { background: #f9fafb; }
-        .aparte-art-file__preview-pane tr:first-child td {
-            background: #f3f4f6;
-            font-weight: 600;
-            position: sticky; top: 0;
-            color: #111827;
-        }
-        .aparte-art-file__preview-empty {
-            padding: 20px; text-align: center;
-            color: var(--aparte-text-muted, rgba(0,0,0,0.5));
-            font-size: 0.85rem; font-style: italic;
-        }
-        .segment-artifact-file[data-state="error"] .aparte-art-file__icon {
-            background: linear-gradient(135deg, #c0392b, #7d1f17);
-        }
-        .aparte-art-file__error {
-            padding: 16px 18px;
-            background: rgba(239, 68, 68, 0.05);
-            border-top: 1px solid rgba(239, 68, 68, 0.2);
-            color: var(--aparte-text, inherit);
-        }
-        .aparte-art-file__error-title {
-            font-weight: 600;
-            font-size: 0.9rem;
-            margin-bottom: 6px;
-            color: #b91c1c;
-        }
-        .aparte-art-file__error-msg {
-            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-            font-size: 0.78rem;
-            padding: 6px 10px;
-            background: rgba(0,0,0,0.04);
-            border-radius: 4px;
-            margin-bottom: 8px;
-            color: #7f1d1d;
-            word-break: break-word;
-        }
-        .aparte-art-file__error-hint {
-            font-size: 0.78rem;
-            color: var(--aparte-text-muted, rgba(0,0,0,0.55));
-            font-style: italic;
-        }
-    `
-};
-const FILE_ICON_LABEL = {
-  xlsx: "XLS",
-  pdf: "PDF",
-  docx: "DOC"
-};
-const _binaryArtifactCache = /* @__PURE__ */ new Map();
-const MAX_BINARY_ARTIFACTS = 24;
-function cacheBinaryArtifact(id, entry) {
-  _binaryArtifactCache.delete(id);
-  if (_binaryArtifactCache.size >= MAX_BINARY_ARTIFACTS) {
-    const oldest = _binaryArtifactCache.keys().next().value;
-    if (oldest !== void 0) _binaryArtifactCache.delete(oldest);
+    while (i < s.length && s[i] !== "\n") i++;
+    if (i < s.length) i++;
   }
-  _binaryArtifactCache.set(id, entry);
+  return -1;
 }
-const _fileGenHandlers = /* @__PURE__ */ new Map();
-const MAX_FILE_GEN_HANDLERS = 32;
-const _lastDispatchAt = /* @__PURE__ */ new Map();
-const RE_DISPATCH_DEBOUNCE_MS = 3e4;
 const _lastHighlightAt = /* @__PURE__ */ new Map();
-const HIGHLIGHT_DEBOUNCE_MS = 400;
-const MAX_THROTTLE_ENTRIES = 256;
 function markThrottle(map, id, at) {
   map.delete(id);
   if (map.size >= MAX_THROTTLE_ENTRIES) {
@@ -2737,7 +2442,137 @@ function debounceHighlight(element, paneSelector, content, lang, segId) {
   }).catch(() => {
   });
 }
-if (typeof window !== "undefined") {
+function labelForKind(kind) {
+  switch (kind) {
+    case "react":
+      return "React component";
+    case "html":
+      return "HTML document";
+    case "svg":
+      return "SVG image";
+    case "js":
+      return "JavaScript snippet";
+    case "css":
+      return "CSS stylesheet";
+    case "json":
+      return "JSON document";
+    case "markdown":
+      return "Markdown document";
+    case "csv":
+      return "CSV table";
+    case "text":
+      return "Text file";
+    case "python":
+      return "Python script";
+    case "typescript":
+      return "TypeScript file";
+    case "bash":
+      return "Bash script";
+    case "sql":
+      return "SQL query";
+    case "pdf":
+      return "PDF generator";
+    case "xlsx":
+      return "Excel generator";
+    case "docx":
+      return "Word generator";
+    default:
+      return "Artifact";
+  }
+}
+const MAX_THROTTLE_ENTRIES = 256;
+const HIGHLIGHT_DEBOUNCE_MS = 400;
+const PREVIEW_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; font-src data:";
+function withMetaCsp(doc) {
+  const meta = `<meta http-equiv="Content-Security-Policy" content="${escapeAttr(PREVIEW_CSP)}">`;
+  const doctype = doc.match(/^\s*<!doctype[^>]*>/i);
+  const at = doctype ? doctype[0].length : 0;
+  return `${doc.slice(0, at)}<head>${meta}</head>${doc.slice(at)}`;
+}
+function buildSafePreviewDocument(kind, body, title) {
+  return withMetaCsp(buildPreviewBody(kind, body, title));
+}
+function buildPreviewBody(kind, body, title) {
+  switch (kind) {
+    case "html": {
+      if (startsWithDoctype(body)) return body;
+      return `<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>${escapeAttr(title)}</title></head><body>${body}</body></html>`;
+    }
+    case "svg":
+      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
+<style>html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fff}svg{max-width:90%;max-height:90%}</style>
+</head><body>${body}</body></html>`;
+    case "js": {
+      const safeBody = escapeClosingScriptTag(body);
+      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
+<style>body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif;padding:1rem;background:#fff;color:#0f172a}</style>
+</head><body><div id="root"></div><script>
+try { ${safeBody}
+} catch (e) { document.getElementById('root').innerHTML = '<pre style="color:#b91c1c">' + (e && e.stack || e) + '</pre>'; }
+<\/script></body></html>`;
+    }
+    case "css":
+      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
+<style>${body}</style></head><body>
+<div class="demo">
+  <h1>Heading</h1>
+  <p>Paragraph with a <a href="#">link</a> and <strong>strong</strong> text.</p>
+  <button>Button</button>
+  <input placeholder="Input"/>
+  <ul><li>One</li><li>Two</li><li>Three</li></ul>
+</div></body></html>`;
+    default:
+      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
+<style>body{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:1rem;background:#fff;color:#0f172a}pre{white-space:pre-wrap;word-break:break-word;margin:0}</style>
+</head><body><pre>${escapeHtml(body)}</pre></body></html>`;
+  }
+}
+function startsWithDoctype(s) {
+  let i = 0;
+  while (i < s.length && (s[i] === " " || s[i] === "	" || s[i] === "\n" || s[i] === "\r")) i++;
+  const probe = s.slice(i, i + 9).toLowerCase();
+  return probe === "<!doctype";
+}
+function escapeClosingScriptTag(body) {
+  let out = "";
+  let i = 0;
+  while (i < body.length) {
+    if (body[i] === "<" && body.slice(i, i + 8).toLowerCase() === "<\/script") {
+      const next = body[i + 8];
+      if (next === void 0 || next === "/" || next === ">" || /\s/.test(next)) {
+        out += "<\\/script";
+        i += 8;
+        continue;
+      }
+    }
+    out += body[i];
+    i++;
+  }
+  return out;
+}
+const FILE_ICON_LABEL = {
+  xlsx: "XLS",
+  pdf: "PDF",
+  docx: "DOC"
+};
+const _binaryArtifactCache = /* @__PURE__ */ new Map();
+const MAX_BINARY_ARTIFACTS = 24;
+function cacheBinaryArtifact(id, entry) {
+  _binaryArtifactCache.delete(id);
+  if (_binaryArtifactCache.size >= MAX_BINARY_ARTIFACTS) {
+    const oldest = _binaryArtifactCache.keys().next().value;
+    if (oldest !== void 0) _binaryArtifactCache.delete(oldest);
+  }
+  _binaryArtifactCache.set(id, entry);
+}
+const _fileGenHandlers = /* @__PURE__ */ new Map();
+const MAX_FILE_GEN_HANDLERS = 32;
+const _lastDispatchAt = /* @__PURE__ */ new Map();
+const RE_DISPATCH_DEBOUNCE_MS = 3e4;
+let _artifactReadyHookInstalled = false;
+function installArtifactReadyHook() {
+  if (_artifactReadyHookInstalled || typeof window === "undefined") return;
+  _artifactReadyHookInstalled = true;
   window.addEventListener("aparte-artifact-ready", (event) => {
     const segId = event.detail?.segmentId;
     if (segId) markThrottle(_lastDispatchAt, segId, Date.now());
@@ -2865,6 +2700,7 @@ function setupBinaryFileArtifact(element, segment, kind) {
     );
     return;
   }
+  if (!contextConfig().getHostHandlers().artifactRehydrate) return;
   const lastAt = _lastDispatchAt.get(segment.id) ?? 0;
   if (Date.now() - lastAt < RE_DISPATCH_DEBOUNCE_MS) return;
   markThrottle(_lastDispatchAt, segment.id, Date.now());
@@ -2905,92 +2741,473 @@ function updateBinaryFileArtifact(element, segment, isStreaming) {
     element.setAttribute("data-state", "compiling");
     const wrapper = element.querySelector('[data-role="code-pane"]');
     if (wrapper) {
-      void contextConfig(element).highlightCode(cleanContent, "js").then((html) => {
+      void contextConfig(element).highlightCode(cleanContent, "js").then((html) => {
+        wrapper.innerHTML = html;
+      }).catch(() => {
+      });
+    }
+    const sub = element.querySelector('[data-role="file-sub"]');
+    if (sub) sub.textContent = "Running sandbox…";
+  }
+}
+function swapToPreview(element, detail, kind) {
+  element.setAttribute("data-state", "ready");
+  const codePane = element.querySelector('[data-role="code-pane"]');
+  if (codePane) codePane.hidden = true;
+  const preview = element.querySelector('[data-role="preview-pane"]');
+  if (preview) {
+    preview.innerHTML = detail.previewHtml ? contextConfig().sanitizeHtml(detail.previewHtml) : `<div class="aparte-art-file__preview-empty">Preview not available for ${escapeHtml(kind)} yet</div>`;
+    preview.hidden = false;
+  }
+  const nameEl = element.querySelector('[data-role="file-name"]');
+  if (nameEl) nameEl.textContent = detail.filename;
+  const sub = element.querySelector('[data-role="file-sub"]');
+  if (sub) sub.textContent = `${formatBytes(detail.bytes)} · ${kind.toUpperCase()}`;
+  const dlBtn = element.querySelector('[data-action="download"]');
+  if (dlBtn) dlBtn.disabled = false;
+}
+function formatBytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+}
+function showSandboxError(element, phase, errorMsg) {
+  const state = element.getAttribute("data-state");
+  if (state === "ready") return;
+  element.setAttribute("data-state", "error");
+  const sub = element.querySelector('[data-role="file-sub"]');
+  if (sub) sub.textContent = `Error (${phase})`;
+  const body = element.querySelector(".aparte-art-file__body");
+  if (body) {
+    const short = (errorMsg.split("\n")[0] ?? "").slice(0, 240);
+    body.innerHTML = `
+            <div class="aparte-art-file__error">
+                <div class="aparte-art-file__error-title">The sandbox failed during generation.</div>
+                <div class="aparte-art-file__error-msg">${escapeHtml(short)}</div>
+                <div class="aparte-art-file__error-hint">Common cause: the model produced invalid code (undefined variable, wrong argument type). Retry the request — the model may produce different code.</div>
+            </div>
+        `;
+  }
+}
+const PREVIEWABLE_KINDS = /* @__PURE__ */ new Set(["react", "html", "svg", "js", "css"]);
+const BINARY_FILE_KINDS = /* @__PURE__ */ new Set(["pdf", "xlsx", "docx"]);
+const artifactRenderer = {
+  type: "artifact",
+  render: (segment) => {
+    const kind = (segment.artifactType || "unknown").toLowerCase();
+    if (BINARY_FILE_KINDS.has(kind)) {
+      return renderBinaryFileArtifact(segment, kind);
+    }
+    const title = segment.title?.trim() || labelForKind(kind);
+    const displayLang = languageForKind(kind);
+    const isStreaming = !!segment.isStreaming;
+    const previewable = PREVIEWABLE_KINDS.has(kind);
+    const isBinary = BINARY_FILE_KINDS.has(kind);
+    const cleanContent = stripCodeFences(segment.content || "");
+    return `
+            <div class="segment segment-artifact-card"
+                 data-segment-id="${escapeHtml(segment.id)}"
+                 data-artifact-type="${escapeHtml(kind)}"
+                 data-streaming="${isStreaming ? "true" : "false"}"
+                 data-tab="code"
+                 data-previewable="${previewable ? "true" : "false"}"
+                 data-binary="${isBinary ? "true" : "false"}">
+                <header class="aparte-art-card__header">
+                    <div class="aparte-art-card__title-block">
+                        <span class="aparte-art-card__kind" data-kind="${escapeHtml(kind)}">${escapeHtml(displayLang)}</span>
+                        <span class="aparte-art-card__title">${escapeHtml(title)}</span>
+                        ${isStreaming ? '<span class="aparte-art-card__pulse" aria-label="Streaming"></span>' : ""}
+                    </div>
+                    <div class="aparte-art-card__actions">
+                        <button type="button" class="aparte-art-card__btn" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}" aria-label="Copy">
+                            ${contextConfig().getIcon("copy")}
+                        </button>
+                        <button type="button" class="aparte-art-card__btn" data-action="download" title="Download" aria-label="Download" ${isStreaming ? "disabled" : ""}>
+                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v9m0 0l-3-3m3 3l3-3M2 13h12"/></svg>
+                        </button>
+                    </div>
+                </header>
+                <nav class="aparte-art-card__tabs" role="tablist">
+                    ${previewable ? `<button type="button" role="tab" data-tab-target="preview" aria-selected="false" ${isStreaming ? "disabled" : ""}>Preview</button>` : ""}
+                    <button type="button" role="tab" data-tab-target="code" aria-selected="true">Code</button>
+                </nav>
+                <div class="aparte-art-card__body">
+                    <div class="aparte-art-card__pane" data-pane="code">
+                        <div class="code-content-wrapper">
+                            <pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>
+                        </div>
+                    </div>
+                    ${previewable ? `
+                        <div class="aparte-art-card__pane" data-pane="preview">
+                            <div class="aparte-art-card__pending">Press Preview to run this artifact.</div>
+                        </div>
+                    ` : ""}
+                </div>
+            </div>
+        `;
+  },
+  setup: (element, segment) => {
+    latestSegment.set(element, segment);
+    const kind = (segment.artifactType || "").toLowerCase();
+    if (BINARY_FILE_KINDS.has(kind)) {
+      setupBinaryFileArtifact(element, segment, kind);
+      return;
+    }
+    const wrapper = element.querySelector(".code-content-wrapper");
+    if (wrapper) {
+      const displayLang = languageForKind(kind);
+      const cleanContent = stripCodeFences(segment.content || "");
+      void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
         wrapper.innerHTML = html;
       }).catch(() => {
       });
     }
-    const sub = element.querySelector('[data-role="file-sub"]');
-    if (sub) sub.textContent = "Running sandbox…";
-  }
-}
-function swapToPreview(element, detail, kind) {
-  element.setAttribute("data-state", "ready");
-  const codePane = element.querySelector('[data-role="code-pane"]');
-  if (codePane) codePane.hidden = true;
-  const preview = element.querySelector('[data-role="preview-pane"]');
-  if (preview) {
-    preview.innerHTML = detail.previewHtml ? contextConfig().sanitizeHtml(detail.previewHtml) : `<div class="aparte-art-file__preview-empty">Preview not available for ${escapeHtml(kind)} yet</div>`;
-    preview.hidden = false;
-  }
-  const nameEl = element.querySelector('[data-role="file-name"]');
-  if (nameEl) nameEl.textContent = detail.filename;
-  const sub = element.querySelector('[data-role="file-sub"]');
-  if (sub) sub.textContent = `${formatBytes(detail.bytes)} · ${kind.toUpperCase()}`;
-  const dlBtn = element.querySelector('[data-action="download"]');
-  if (dlBtn) dlBtn.disabled = false;
-}
-function formatBytes(n) {
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
-}
-function showSandboxError(element, phase, errorMsg) {
-  const state = element.getAttribute("data-state");
-  if (state === "ready") return;
-  element.setAttribute("data-state", "error");
-  const sub = element.querySelector('[data-role="file-sub"]');
-  if (sub) sub.textContent = `Error (${phase})`;
-  const body = element.querySelector(".aparte-art-file__body");
-  if (body) {
-    const short = (errorMsg.split("\n")[0] ?? "").slice(0, 240);
-    body.innerHTML = `
-            <div class="aparte-art-file__error">
-                <div class="aparte-art-file__error-title">The sandbox failed during generation.</div>
-                <div class="aparte-art-file__error-msg">${escapeHtml(short)}</div>
-                <div class="aparte-art-file__error-hint">Common cause: the model produced invalid code (undefined variable, wrong argument type). Retry the request — the model may produce different code.</div>
-            </div>
-        `;
-  }
-}
-function labelForKind(kind) {
-  switch (kind) {
-    case "react":
-      return "React component";
-    case "html":
-      return "HTML document";
-    case "svg":
-      return "SVG image";
-    case "js":
-      return "JavaScript snippet";
-    case "css":
-      return "CSS stylesheet";
-    case "json":
-      return "JSON document";
-    case "markdown":
-      return "Markdown document";
-    case "csv":
-      return "CSV table";
-    case "text":
-      return "Text file";
-    case "python":
-      return "Python script";
-    case "typescript":
-      return "TypeScript file";
-    case "bash":
-      return "Bash script";
-    case "sql":
-      return "SQL query";
-    case "pdf":
-      return "PDF generator";
-    case "xlsx":
-      return "Excel generator";
-    case "docx":
-      return "Word generator";
-    default:
-      return "Artifact";
-  }
-}
+    element.querySelectorAll("[data-tab-target]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const target = btn.getAttribute("data-tab-target");
+        if (!target) return;
+        if (target === "preview") mountPreviewFrame(element, segment);
+        element.setAttribute("data-tab", target);
+        element.querySelectorAll("[data-tab-target]").forEach((b) => {
+          b.setAttribute("aria-selected", b === btn ? "true" : "false");
+        });
+      });
+    });
+    const copyBtn = element.querySelector('[data-action="copy"]');
+    if (copyBtn) {
+      copyBtn.addEventListener("click", () => {
+        const code = stripCodeFences(segment.content || "");
+        void navigator.clipboard.writeText(code).catch(() => {
+        });
+        const original = copyBtn.innerHTML;
+        copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
+        copyBtn.setAttribute("title", contextConfig(copyBtn).t("copied"));
+        setTimeout(() => {
+          copyBtn.innerHTML = original;
+          copyBtn.setAttribute("title", contextConfig(copyBtn).t("copy"));
+        }, 1500);
+      });
+    }
+    const dlBtn = element.querySelector('[data-action="download"]');
+    if (dlBtn) {
+      dlBtn.addEventListener("click", () => {
+        if (dlBtn.disabled) return;
+        const kind2 = (segment.artifactType || "").toLowerCase();
+        const isBinary = BINARY_FILE_KINDS.has(kind2);
+        if (isBinary) {
+          element.dispatchEvent(new CustomEvent("aparte-artifact-redownload", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              segmentId: segment.id,
+              mimeType: segment.mimeType,
+              artifactType: segment.artifactType,
+              title: segment.title,
+              content: stripCodeFences(segment.content || "")
+            }
+          }));
+          return;
+        }
+        downloadTextArtifact(segment);
+      });
+    }
+  },
+  update: (element, segment) => {
+    const previous = latestSegment.get(element);
+    latestSegment.set(element, segment);
+    if (previous && previous.content !== segment.content) {
+      element.querySelector('.aparte-art-card__pane[data-pane="preview"] iframe')?.remove();
+    }
+    const isStreaming = !!segment.isStreaming;
+    const kind = (segment.artifactType || "").toLowerCase();
+    if (BINARY_FILE_KINDS.has(kind)) {
+      updateBinaryFileArtifact(element, segment, isStreaming);
+      return;
+    }
+    const wasStreaming = element.getAttribute("data-streaming") === "true";
+    const cleanContent = stripCodeFences(segment.content || "");
+    const codeEl = element.querySelector(".code-content-wrapper code");
+    if (codeEl) {
+      codeEl.textContent = cleanContent;
+    } else {
+      const wrapper = element.querySelector(".code-content-wrapper");
+      if (wrapper) {
+        const displayLang = languageForKind(kind);
+        wrapper.innerHTML = `<pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>`;
+      }
+    }
+    if (isStreaming) {
+      const segId = element.getAttribute("data-segment-id") ?? segment.id;
+      debounceHighlight(element, ".code-content-wrapper", cleanContent, languageForKind(kind), segId);
+    }
+    if (wasStreaming && !isStreaming) {
+      element.setAttribute("data-streaming", "false");
+      const wrapper = element.querySelector(".code-content-wrapper");
+      if (wrapper) {
+        const displayLang = languageForKind(kind);
+        void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
+          wrapper.innerHTML = html;
+        }).catch(() => {
+        });
+      }
+      element.querySelectorAll("button[disabled]").forEach((b) => {
+        b.disabled = false;
+      });
+    }
+  },
+  getStyles: () => `
+        .segment-artifact-card {
+            display: flex; flex-direction: column;
+            margin: 8px 0;
+            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+            border-radius: 12px;
+            background: var(--aparte-surface, #fff);
+            overflow: hidden;
+            font: inherit;
+            color: var(--aparte-text, inherit);
+        }
+        .aparte-art-card__header {
+            display: flex; align-items: center; justify-content: space-between;
+            padding: 8px 10px;
+            border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+            background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+            min-height: 36px;
+        }
+        .aparte-art-card__title-block { display: flex; align-items: center; gap: 8px; min-width: 0; }
+        .aparte-art-card__kind {
+            font-size: 0.7rem; font-weight: 600;
+            text-transform: uppercase; letter-spacing: 0.04em;
+            padding: 2px 6px; border-radius: 4px;
+            background: var(--aparte-surface, #fff);
+            border: 1px solid var(--aparte-border, rgba(0,0,0,0.1));
+            color: var(--aparte-text-muted, rgba(0,0,0,0.6));
+        }
+        .aparte-art-card__title {
+            font-size: 0.85rem; font-weight: 500;
+            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        }
+        .aparte-art-card__pulse {
+            width: 8px; height: 8px; border-radius: 50%;
+            background: var(--aparte-accent, #3b82f6);
+            animation: aparte-art-card-pulse 1.2s ease-in-out infinite;
+        }
+        @keyframes aparte-art-card-pulse {
+            0%, 100% { opacity: 0.35; transform: scale(0.85); }
+            50%      { opacity: 1;    transform: scale(1.1);  }
+        }
+        .aparte-art-card__actions { display: flex; gap: 4px; }
+        .aparte-art-card__btn {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 28px; height: 28px;
+            background: transparent;
+            border: 1px solid transparent;
+            border-radius: 6px;
+            color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+            cursor: pointer;
+            transition: background 0.12s, border-color 0.12s, color 0.12s;
+        }
+        .aparte-art-card__btn:hover:not(:disabled) {
+            background: var(--aparte-surface-hover, rgba(0,0,0,0.04));
+            border-color: var(--aparte-border, rgba(0,0,0,0.1));
+            color: var(--aparte-text, inherit);
+        }
+        .aparte-art-card__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+        .aparte-art-card__tabs {
+            display: flex; gap: 2px;
+            padding: 4px 8px 0;
+            border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+            background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+        }
+        .aparte-art-card__tabs button {
+            padding: 6px 12px;
+            font-size: 0.78rem;
+            background: transparent;
+            border: 1px solid transparent;
+            border-bottom: none;
+            border-radius: 6px 6px 0 0;
+            color: var(--aparte-text-muted, rgba(0,0,0,0.6));
+            cursor: pointer;
+            transition: background 0.12s, color 0.12s;
+        }
+        .aparte-art-card__tabs button[aria-selected="true"] {
+            background: var(--aparte-surface, #fff);
+            border-color: var(--aparte-border, rgba(0,0,0,0.08));
+            color: var(--aparte-text, inherit);
+            font-weight: 500;
+        }
+        .aparte-art-card__tabs button:disabled { opacity: 0.4; cursor: not-allowed; }
+        .aparte-art-card__body {
+            position: relative;
+            min-height: 80px;
+            max-height: 600px;
+            overflow: hidden;
+        }
+        .aparte-art-card__pane { display: none; height: 100%; }
+        .segment-artifact-card[data-tab="code"]    .aparte-art-card__pane[data-pane="code"]    { display: block; }
+        .segment-artifact-card[data-tab="preview"] .aparte-art-card__pane[data-pane="preview"] { display: block; }
+        .aparte-art-card__pane[data-pane="code"] {
+            max-height: 600px; overflow: auto;
+        }
+        .aparte-art-card__pane[data-pane="code"] pre {
+            margin: 0; padding: 12px;
+            font-size: 0.82rem;
+            background: var(--aparte-code-bg, #fafafa);
+        }
+        .aparte-art-card__frame {
+            display: block;
+            width: 100%; height: 480px;
+            border: 0;
+            background: #fff;
+        }
+        .aparte-art-card__pending {
+            display: flex; align-items: center; justify-content: center;
+            height: 120px;
+            color: var(--aparte-text-muted, rgba(0,0,0,0.5));
+            font-size: 0.85rem;
+            font-style: italic;
+        }
+        /* ── Binary file artifact (xlsx/pdf/docx) ──────────────────── */
+        .segment-artifact-file {
+            display: flex; flex-direction: column;
+            margin: 8px 0;
+            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+            border-radius: 12px;
+            background: var(--aparte-surface, #fff);
+            overflow: hidden;
+            color: var(--aparte-text, inherit);
+            font: inherit;
+        }
+        .aparte-art-file__card {
+            display: flex; align-items: center; gap: 12px;
+            padding: 12px 14px;
+            background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+            border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+        }
+        .aparte-art-file__body {
+            position: relative;
+        }
+        .aparte-art-file__code-pane {
+            max-height: 360px; overflow: auto;
+            background: var(--aparte-code-bg, #fafafa);
+        }
+        .aparte-art-file__code-pane pre {
+            margin: 0; padding: 12px;
+            font-size: 0.82rem;
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+        }
+        .aparte-art-file__preview-pane {
+            max-height: 460px;
+            overflow: auto;
+            background: #fff;
+            /* Preview is a document view — force light scheme regardless of
+               the app theme, with a dark text colour so cells stay readable. */
+            color: #1f2937;
+        }
+        .aparte-art-file__icon {
+            width: 40px; height: 40px;
+            border-radius: 8px;
+            display: flex; align-items: center; justify-content: center;
+            background: linear-gradient(135deg, #1d6f42, #0f5132);
+            color: #fff;
+            font-weight: 700;
+            font-size: 0.78rem;
+            letter-spacing: 0.04em;
+            flex-shrink: 0;
+        }
+        .aparte-art-file__icon[data-kind="pdf"]  { background: linear-gradient(135deg, #c0392b, #7d1f17); }
+        .aparte-art-file__icon[data-kind="docx"] { background: linear-gradient(135deg, #1e5288, #0f3060); }
+        .aparte-art-file__meta { flex: 1 1 auto; min-width: 0; }
+        .aparte-art-file__meta-name {
+            font-weight: 600; font-size: 0.92rem;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        }
+        .aparte-art-file__meta-sub {
+            font-size: 0.78rem;
+            color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+        }
+        .aparte-art-file__actions { display: flex; gap: 6px; flex-shrink: 0; }
+        .aparte-art-file__btn {
+            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+            background: var(--aparte-surface, #fff);
+            color: var(--aparte-text, inherit);
+            padding: 6px 10px;
+            border-radius: 6px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: background 0.12s ease;
+        }
+        .aparte-art-file__btn:hover { background: var(--aparte-surface-2, rgba(0,0,0,0.05)); }
+        .aparte-art-file__btn--primary {
+            background: var(--aparte-primary, #6366f1);
+            color: #fff;
+            border-color: var(--aparte-primary, #6366f1);
+        }
+        .aparte-art-file__btn--primary:hover { filter: brightness(1.07); }
+        /* Hide the download button until the sandbox has produced the buffer.
+           Avoids confusing the user with a disabled-but-styled-primary button
+           during streaming / compiling. */
+        .segment-artifact-file:not([data-state="ready"]) .aparte-art-file__btn[data-action="download"] {
+            display: none;
+        }
+        .aparte-art-file__preview-pane table {
+            border-collapse: collapse;
+            width: 100%;
+            font-size: 0.82rem;
+            font-family: inherit;
+        }
+        .aparte-art-file__preview-pane th,
+        .aparte-art-file__preview-pane td {
+            border: 1px solid rgba(0,0,0,0.10);
+            padding: 6px 10px;
+            text-align: left;
+            white-space: nowrap;
+            color: #1f2937;
+            background: #fff;
+        }
+        .aparte-art-file__preview-pane tr:nth-child(odd) td { background: #f9fafb; }
+        .aparte-art-file__preview-pane tr:first-child td {
+            background: #f3f4f6;
+            font-weight: 600;
+            position: sticky; top: 0;
+            color: #111827;
+        }
+        .aparte-art-file__preview-empty {
+            padding: 20px; text-align: center;
+            color: var(--aparte-text-muted, rgba(0,0,0,0.5));
+            font-size: 0.85rem; font-style: italic;
+        }
+        .segment-artifact-file[data-state="error"] .aparte-art-file__icon {
+            background: linear-gradient(135deg, #c0392b, #7d1f17);
+        }
+        .aparte-art-file__error {
+            padding: 16px 18px;
+            background: rgba(239, 68, 68, 0.05);
+            border-top: 1px solid rgba(239, 68, 68, 0.2);
+            color: var(--aparte-text, inherit);
+        }
+        .aparte-art-file__error-title {
+            font-weight: 600;
+            font-size: 0.9rem;
+            margin-bottom: 6px;
+            color: #b91c1c;
+        }
+        .aparte-art-file__error-msg {
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+            font-size: 0.78rem;
+            padding: 6px 10px;
+            background: rgba(0,0,0,0.04);
+            border-radius: 4px;
+            margin-bottom: 8px;
+            color: #7f1d1d;
+            word-break: break-word;
+        }
+        .aparte-art-file__error-hint {
+            font-size: 0.78rem;
+            color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+            font-style: italic;
+        }
+    `
+};
 function languageForKind(kind) {
   if (kind === "react") return "jsx";
   if (kind === "markdown") return "md";
@@ -3030,19 +3247,6 @@ function downloadTextArtifact(segment) {
   document.body.removeChild(a);
   setTimeout(() => URL.revokeObjectURL(url), 1e3);
 }
-function escapeAttr(s) {
-  let out = "";
-  for (let i = 0; i < s.length; i++) {
-    const ch = s[i];
-    if (ch === "&") out += "&amp;";
-    else if (ch === '"') out += "&quot;";
-    else if (ch === "<") out += "&lt;";
-    else if (ch === ">") out += "&gt;";
-    else if (ch === "'") out += "&#039;";
-    else out += ch;
-  }
-  return out;
-}
 function slugifyForFilename(text) {
   const lower = text.trim().toLowerCase();
   let out = "";
@@ -3063,63 +3267,86 @@ function slugifyForFilename(text) {
   if (out.endsWith("-")) out = out.slice(0, -1);
   return out;
 }
-function buildSafePreviewDocument(kind, body, title) {
-  switch (kind) {
-    case "html": {
-      if (startsWithDoctype(body)) return body;
-      return `<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>${escapeAttr(title)}</title></head><body>${body}</body></html>`;
-    }
-    case "svg":
-      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
-<style>html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fff}svg{max-width:90%;max-height:90%}</style>
-</head><body>${body}</body></html>`;
-    case "js": {
-      const safeBody = escapeClosingScriptTag(body);
-      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
-<style>body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif;padding:1rem;background:#fff;color:#0f172a}</style>
-</head><body><div id="root"></div><script>
-try { ${safeBody}
-} catch (e) { document.getElementById('root').innerHTML = '<pre style="color:#b91c1c">' + (e && e.stack || e) + '</pre>'; }
-<\/script></body></html>`;
-    }
-    case "css":
-      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
-<style>${body}</style></head><body>
-<div class="demo">
-  <h1>Heading</h1>
-  <p>Paragraph with a <a href="#">link</a> and <strong>strong</strong> text.</p>
-  <button>Button</button>
-  <input placeholder="Input"/>
-  <ul><li>One</li><li>Two</li><li>Three</li></ul>
-</div></body></html>`;
-    default:
-      return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
-<style>body{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:1rem;background:#fff;color:#0f172a}pre{white-space:pre-wrap;word-break:break-word;margin:0}</style>
-</head><body><pre>${escapeHtml(body)}</pre></body></html>`;
+const latestSegment = /* @__PURE__ */ new WeakMap();
+function mountPreviewFrame(element, fallback) {
+  const pane = element.querySelector('.aparte-art-card__pane[data-pane="preview"]');
+  if (!pane || pane.querySelector("iframe")) return;
+  const segment = latestSegment.get(element) ?? fallback;
+  const kind = segment.artifactType || deriveArtifactKind(segment.mimeType ?? "", "text");
+  if (!PREVIEWABLE_KINDS.has(kind)) return;
+  const title = segment.title?.trim() || labelForKind(kind);
+  const build = contextConfig().getArtifactPreviewBuilder() ?? buildSafePreviewDocument;
+  const srcdoc = build(kind, stripCodeFences(segment.content || ""), title);
+  pane.innerHTML = `<iframe class="aparte-art-card__frame" sandbox="allow-scripts" csp="${escapeAttr(PREVIEW_CSP)}" referrerpolicy="no-referrer" loading="lazy" title="${escapeAttr(title)}" srcdoc="${escapeAttr(srcdoc)}"></iframe>`;
+}
+const registries = /* @__PURE__ */ new WeakMap();
+function registryFor(config) {
+  let reg = registries.get(config);
+  if (!reg) {
+    reg = { renderers: /* @__PURE__ */ new Map(), defaultsInstalled: false, defaultsDeclined: false };
+    registries.set(config, reg);
+  }
+  return reg;
+}
+function effectiveRenderers(config) {
+  const own = registryFor(config);
+  if (config === aparteGlobalConfig || own.defaultsDeclined) return own.renderers;
+  const merged = new Map(registryFor(aparteGlobalConfig).renderers);
+  for (const [type, renderer] of own.renderers) merged.set(type, renderer);
+  return merged;
+}
+let styleElement = null;
+function registerSegmentRenderer(renderer, config = contextConfig()) {
+  registryFor(config).renderers.set(renderer.type, renderer);
+  injectRendererStyles(config);
+}
+function declineDefaultRenderers(config = contextConfig()) {
+  registryFor(config).defaultsDeclined = true;
+}
+function installDefaultRenderersOnce(config = contextConfig()) {
+  const reg = registryFor(config);
+  if (reg.defaultsInstalled || reg.defaultsDeclined) return;
+  reg.defaultsInstalled = true;
+  for (const renderer of DEFAULT_RENDERERS) {
+    if (!reg.renderers.has(renderer.type)) reg.renderers.set(renderer.type, renderer);
   }
+  injectRendererStyles(config);
+  installArtifactReadyHook();
 }
-function startsWithDoctype(s) {
-  let i = 0;
-  while (i < s.length && (s[i] === " " || s[i] === "	" || s[i] === "\n" || s[i] === "\r")) i++;
-  const probe = s.slice(i, i + 9).toLowerCase();
-  return probe === "<!doctype";
+function unregisterSegmentRenderer(type, config = contextConfig()) {
+  registryFor(config).renderers.delete(type);
 }
-function escapeClosingScriptTag(body) {
-  let out = "";
-  let i = 0;
-  while (i < body.length) {
-    if (body[i] === "<" && body.slice(i, i + 8).toLowerCase() === "<\/script") {
-      const next = body[i + 8];
-      if (next === void 0 || next === "/" || next === ">" || /\s/.test(next)) {
-        out += "<\\/script";
-        i += 8;
-        continue;
-      }
-    }
-    out += body[i];
-    i++;
+function getSegmentRenderer(type, config = contextConfig()) {
+  return effectiveRenderers(config).get(type);
+}
+function getAllRenderers(config = contextConfig()) {
+  return Array.from(effectiveRenderers(config).values());
+}
+function collectRendererStyles(config = contextConfig()) {
+  return Array.from(registryFor(config).renderers.values()).map((r) => r.getStyles?.() || "").filter(Boolean).join("\n");
+}
+const injectedRendererStyles = /* @__PURE__ */ new Set();
+function injectRendererStyles(config = contextConfig()) {
+  if (typeof document === "undefined") return;
+  if (!styleElement || !styleElement.isConnected) {
+    styleElement = document.createElement("style");
+    styleElement.id = "aparte-renderer-styles";
+    document.head.appendChild(styleElement);
+    styleElement.textContent = Array.from(injectedRendererStyles).join("\n");
   }
-  return out;
+  let added = false;
+  for (const renderer of registryFor(config).renderers.values()) {
+    const css = renderer.getStyles?.();
+    if (!css || injectedRendererStyles.has(css)) continue;
+    injectedRendererStyles.add(css);
+    added = true;
+  }
+  if (added) styleElement.textContent = Array.from(injectedRendererStyles).join("\n");
+}
+function registerDefaultRenderers(config = contextConfig()) {
+  registryFor(config).defaultsInstalled = true;
+  for (const renderer of DEFAULT_RENDERERS) registerSegmentRenderer(renderer, config);
+  installArtifactReadyHook();
 }
 const DEFAULT_RENDERERS = [
   textRenderer,
@@ -3191,7 +3418,7 @@ function applyRetention(messages, tree, maxMessages) {
   };
   return { messages: trimmedFlat, tree: trimmedTree };
 }
-class ConversationManager {
+class AparteConversationManager {
   _adapter;
   _conversations = [];
   _activeId = null;
@@ -3243,7 +3470,7 @@ class ConversationManager {
   async createNew(title = "New Chat") {
     const now = Date.now();
     const conv = {
-      id: crypto.randomUUID(),
+      id: uuid(),
       title,
       createdAt: now,
       updatedAt: now,
@@ -3374,7 +3601,7 @@ class ConversationManager {
       try {
         l(snapshot);
       } catch (err) {
-        console.error("[ConversationManager] listener threw:", err);
+        console.error("[AparteConversationManager] listener threw:", err);
       }
     });
   }
@@ -3384,12 +3611,9 @@ class ConversationManager {
     return text.trim() || "New Chat";
   }
 }
-function attachmentId() {
-  return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-}
 function filesToAttachments(files) {
   return files.map((file) => ({
-    id: attachmentId(),
+    id: uuid(),
     name: file.name,
     type: file.type || "application/octet-stream",
     url: URL.createObjectURL(file),
@@ -3397,6 +3621,13 @@ function filesToAttachments(files) {
     blob: file
   }));
 }
+function revokeAttachmentUrls(attachments) {
+  if (!attachments?.length) return;
+  if (typeof URL === "undefined" || typeof URL.revokeObjectURL !== "function") return;
+  for (const attachment of attachments) {
+    if (attachment.url?.startsWith("blob:")) URL.revokeObjectURL(attachment.url);
+  }
+}
 class AparteConversationController {
   _binding;
   _options;
@@ -3428,7 +3659,30 @@ class AparteConversationController {
    * conversation lifecycle yet.
    */
   _manager() {
-    return this._options.manager ?? resolveConfig(this._binding.host).getConversationManager();
+    if (this._options.manager) return this._options.manager;
+    const scoped = resolveConfig(this._binding.host);
+    const manager = scoped.getConversationManager();
+    if (!manager) this._warnManagerOnTheWrongConfig(scoped);
+    return manager;
+  }
+  /**
+   * Degraded mode is legitimate — a host that never opted into the conversation
+   * lifecycle has no manager and should not be nagged. Registering one on the
+   * WRONG config is not: the four wrapper hooks used to write it to the global
+   * singleton unconditionally, so `config` + persistence looked like it worked
+   * (the optimistic UI still appends) and saved nothing at all.
+   *
+   * Warned once per controller, and only in the case that is unambiguously a
+   * mistake: no manager here, but one on the global.
+   */
+  _warnedNoManager = false;
+  _warnManagerOnTheWrongConfig(scoped) {
+    if (this._warnedNoManager) return;
+    if (scoped === aparteGlobalConfig || !aparteGlobalConfig.getConversationManager()) return;
+    this._warnedNoManager = true;
+    console.warn(
+      "[aparte] This chat resolves its own config, but the conversation manager was registered on aparteGlobalConfig — so nothing is being persisted. Pass the same config to init(): `init(adapter, myConfig)`, using the config you gave the chat."
+    );
   }
   /**
    * Attach event listeners to the binding host. Returns an unbind function.
@@ -3443,7 +3697,7 @@ class AparteConversationController {
       const files = evt.detail?.files;
       const attachments = files?.length ? filesToAttachments(files) : void 0;
       const userMsg = {
-        id: typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+        id: uuid(),
         role: "user",
         content,
         timestamp: evt.detail?.timestamp ?? Date.now(),
@@ -3510,8 +3764,12 @@ class AparteConversationController {
     return () => this.unbind();
   }
   /** Detach event listeners. */
+  /** Release handle for the hydration-retry subscription (see setConversationId). */
+  _stopHydrationRetry = null;
   unbind() {
     this._persistActive();
+    this._stopHydrationRetry?.();
+    this._stopHydrationRetry = null;
     const host = this._binding.host;
     if (this._onSendCapture) {
       host.removeEventListener("aparte-send", this._onSendCapture, { capture: true });
@@ -3589,8 +3847,10 @@ class AparteConversationController {
     const conv = manager?.conversations.find((c) => c.id === id);
     if (!manager || !conv) {
       if (manager && !manager.initialized) {
+        this._stopHydrationRetry?.();
         const stop = manager.subscribe(() => {
           stop();
+          this._stopHydrationRetry = null;
           if (manager.conversations.some((c) => c.id === id)) {
             void this.setConversationId(id);
           } else if (this._activeId === null) {
@@ -3599,6 +3859,7 @@ class AparteConversationController {
             this._binding.clearMessages();
           }
         });
+        this._stopHydrationRetry = stop;
         return;
       }
       console.warn("[ConversationController] unknown id or no manager — clearing. manager:", !!manager, "conv:", !!conv);
@@ -3680,6 +3941,9 @@ class AparteConversationController {
     await manager.addMessage(convId, userMsg);
   }
 }
+function cssEscape(value) {
+  return value.replace(/["\\]/g, "\\$&");
+}
 class AparteChatHost {
   binding;
   options;
@@ -3786,7 +4050,7 @@ class AparteChatHost {
     const convBinding = {
       hostId: this.binding.hostId,
       host,
-      // Controller-driven flushes mirror ConversationManager state, not
+      // Controller-driven flushes mirror AparteConversationManager state, not
       // user intent — deliberately NOT emitted as `messagesChange` to
       // avoid a feedback loop with hosts using a two-way `messages` input.
       setMessages: (msgs) => {
@@ -4173,7 +4437,7 @@ class AparteChatHost {
     const vp = this.binding.viewport;
     if (!vp) return null;
     return vp.querySelector(
-      `aparte-chat-bubble[message-id="${id}"]`
+      `aparte-chat-bubble[message-id="${cssEscape(id)}"]`
     );
   }
   _lastBubble() {
@@ -4257,31 +4521,34 @@ class AparteChatHost {
     });
   }
 }
-function assertNever(value) {
-  throw new Error(`Unhandled union member: ${JSON.stringify(value)}`);
-}
 function dispatchLifecycleEvent(target, name, detail) {
-  target.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
+  const id = target.id || void 0;
+  const stamped = detail && typeof detail === "object" ? { targetId: id, ...detail } : detail;
+  target.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail: stamped }));
 }
 function dispatchArtifactLifecycle(target, messageId, segment, progress, isFinal) {
   const id = segment.id;
   const content = segment.content ?? "";
-  const seen = progress.get(id);
-  if (seen === void 0) {
+  if (progress.get(id) === void 0) {
     target.dispatchEvent(new CustomEvent("aparte-artifact-start", {
       bubbles: true,
       composed: true,
-      detail: { messageId, segmentId: id, mimeType: segment.mimeType, artifactType: segment.artifactType, title: segment.title }
+      detail: {
+        messageId,
+        segmentId: id,
+        mimeType: segment.mimeType,
+        artifactType: segment.artifactType,
+        title: segment.title
+      }
     }));
     progress.set(id, 0);
   }
   const lastLen = progress.get(id) ?? 0;
   if (content.length > lastLen) {
-    const chunk = content.slice(lastLen);
     target.dispatchEvent(new CustomEvent("aparte-artifact-delta", {
       bubbles: true,
       composed: true,
-      detail: { segmentId: id, chunk }
+      detail: { segmentId: id, chunk: content.slice(lastLen) }
     }));
     progress.set(id, content.length);
   }
@@ -4289,10 +4556,187 @@ function dispatchArtifactLifecycle(target, messageId, segment, progress, isFinal
     target.dispatchEvent(new CustomEvent("aparte-artifact-ready", {
       bubbles: true,
       composed: true,
-      detail: { messageId, segmentId: id, mimeType: segment.mimeType, artifactType: segment.artifactType, title: segment.title, content }
+      detail: {
+        messageId,
+        segmentId: id,
+        mimeType: segment.mimeType,
+        artifactType: segment.artifactType,
+        title: segment.title,
+        content
+      }
     }));
   }
 }
+const INLINE_MAX_LINES = 15;
+const XML_OPEN_TAG = "<artifact";
+function partialXmlOpenTagLength(text) {
+  const max = Math.min(text.length, XML_OPEN_TAG.length - 1);
+  for (let k = max; k > 0; k--) {
+    if (text.endsWith(XML_OPEN_TAG.slice(0, k))) return k;
+  }
+  return 0;
+}
+function feedXmlArtifactDelta(delta, xml, ctx) {
+  const { targetElement, messageId, textParser, streamingSegmentIds, artifactProgress, artifactXmlHint } = ctx;
+  let remaining = delta;
+  const emitChatText = (text, syncActive = true) => {
+    if (!text) return;
+    const r = textParser.parse(text);
+    for (const seg of r.segments) {
+      if (!streamingSegmentIds.has(seg.id)) {
+        targetElement.addSegment?.(seg);
+        streamingSegmentIds.add(seg.id);
+      } else if ("content" in seg) {
+        targetElement.updateSegment?.(seg.id, { content: seg.content });
+      }
+    }
+    const active = textParser.getState().activeSegment;
+    if (syncActive && active) {
+      if (!streamingSegmentIds.has(active.id)) {
+        targetElement.addSegment?.(active);
+        streamingSegmentIds.add(active.id);
+      } else {
+        targetElement.updateSegment?.(active.id, { content: active.content });
+      }
+    } else if (!r.segments.length && !active) ;
+  };
+  while (remaining.length > 0) {
+    if (xml.state === "normal") {
+      const tagStart = remaining.indexOf(XML_OPEN_TAG);
+      if (tagStart === -1) {
+        const held = partialXmlOpenTagLength(remaining);
+        if (held > 0) {
+          emitChatText(remaining.slice(0, remaining.length - held), false);
+          xml.scanBuf = remaining.slice(remaining.length - held);
+          xml.state = "scanning";
+        } else {
+          emitChatText(remaining);
+        }
+        remaining = "";
+      } else {
+        emitChatText(remaining.slice(0, tagStart), false);
+        xml.scanBuf = "";
+        remaining = remaining.slice(tagStart);
+        xml.state = "scanning";
+      }
+    } else if (xml.state === "scanning") {
+      xml.scanBuf += remaining;
+      remaining = "";
+      const cmp = Math.min(xml.scanBuf.length, XML_OPEN_TAG.length);
+      if (xml.scanBuf.slice(0, cmp) !== XML_OPEN_TAG.slice(0, cmp)) {
+        emitChatText(xml.scanBuf);
+        xml.scanBuf = "";
+        xml.state = "normal";
+        continue;
+      }
+      const gtIdx = xml.scanBuf.indexOf(">");
+      if (gtIdx !== -1) {
+        const tag = xml.scanBuf.slice(0, gtIdx + 1);
+        const mimeMatch = /mimeType=['"]([^'"]+)['"]/.exec(tag);
+        const titleMatch = /title=['"]([^'"]+)['"]/.exec(tag);
+        xml.mime = mimeMatch?.[1] ?? artifactXmlHint.mimeType;
+        xml.title = titleMatch?.[1] ?? artifactXmlHint.kind;
+        xml.kind = deriveArtifactKind(xml.mime, artifactXmlHint.kind);
+        xml.segId = `artifact-xml-${uuid()}`;
+        xml.content = "";
+        const openSeg = {
+          id: xml.segId,
+          type: "artifact",
+          mimeType: xml.mime,
+          artifactType: xml.kind,
+          title: xml.title,
+          content: ""
+        };
+        targetElement.addSegment?.(openSeg);
+        streamingSegmentIds.add(xml.segId);
+        dispatchArtifactLifecycle(targetElement, messageId, openSeg, artifactProgress, false);
+        xml.state = "in-artifact";
+        remaining = xml.scanBuf.slice(gtIdx + 1);
+        xml.scanBuf = "";
+      }
+    } else {
+      const CLOSE = "</artifact>";
+      const combined = xml.closeBuf + remaining;
+      const closeIdx = combined.indexOf(CLOSE);
+      if (closeIdx !== -1) {
+        xml.content += combined.slice(0, closeIdx);
+        const lineCount = xml.content.split("\n").length;
+        const isInline = lineCount < INLINE_MAX_LINES;
+        const finalSeg = {
+          id: xml.segId,
+          mimeType: xml.mime,
+          artifactType: xml.kind,
+          title: xml.title,
+          content: xml.content
+        };
+        targetElement.updateSegment?.(xml.segId, { content: xml.content, inline: isInline });
+        dispatchArtifactLifecycle(targetElement, messageId, finalSeg, artifactProgress, true);
+        xml.state = "normal";
+        xml.closeBuf = "";
+        remaining = combined.slice(closeIdx + CLOSE.length);
+      } else {
+        const safeLen = Math.max(0, combined.length - CLOSE.length + 1);
+        const safe = combined.slice(0, safeLen);
+        xml.content += safe;
+        xml.closeBuf = combined.slice(safeLen);
+        remaining = "";
+        if (xml.segId) {
+          targetElement.updateSegment?.(xml.segId, { content: xml.content });
+          dispatchArtifactLifecycle(targetElement, messageId, {
+            id: xml.segId,
+            mimeType: xml.mime,
+            artifactType: xml.kind,
+            title: xml.title,
+            content: xml.content
+          }, artifactProgress, false);
+        }
+      }
+    }
+  }
+}
+function finalizeXmlArtifact(xml, ctx) {
+  const { targetElement, messageId, artifactProgress, artifactXmlHint } = ctx;
+  if (xml.state === "scanning") {
+    const held = xml.scanBuf;
+    xml.scanBuf = "";
+    xml.state = "normal";
+    if (held) {
+      const r = ctx.textParser.parse(held);
+      for (const seg of r.segments) {
+        if (!ctx.streamingSegmentIds.has(seg.id)) {
+          targetElement.addSegment?.(seg);
+          ctx.streamingSegmentIds.add(seg.id);
+        } else if ("content" in seg) {
+          targetElement.updateSegment?.(seg.id, { content: seg.content });
+        }
+      }
+      const active = ctx.textParser.getState().activeSegment;
+      if (active) {
+        if (!ctx.streamingSegmentIds.has(active.id)) {
+          targetElement.addSegment?.(active);
+          ctx.streamingSegmentIds.add(active.id);
+        } else {
+          targetElement.updateSegment?.(active.id, { content: active.content });
+        }
+      }
+    }
+    return;
+  }
+  if (artifactXmlHint && xml.state === "in-artifact" && xml.segId) {
+    xml.content += xml.closeBuf;
+    const lineCount = xml.content.split("\n").length;
+    const isInline = lineCount < INLINE_MAX_LINES;
+    targetElement.updateSegment?.(xml.segId, { content: xml.content, inline: isInline });
+    dispatchArtifactLifecycle(targetElement, messageId, {
+      id: xml.segId,
+      mimeType: xml.mime,
+      artifactType: xml.kind,
+      title: xml.title,
+      content: xml.content
+    }, artifactProgress, true);
+    console.warn("[AparteClient] XML artifact finalized without closing tag — content may be partial.");
+  }
+}
 function createStreamAdapter(opts) {
   const { target, config, messageId, artifactHint } = opts;
   let parser = new AparteStreamParser();
@@ -4322,7 +4766,7 @@ function createStreamAdapter(opts) {
         thinkingContent += e.delta;
         if (!thinkingId) {
           const seg = {
-            id: `think-${crypto.randomUUID()}`,
+            id: `think-${uuid()}`,
             type: "thinking",
             content: thinkingContent,
             collapsed: true,
@@ -4347,12 +4791,10 @@ function createStreamAdapter(opts) {
             if (!streaming.has(segment.id)) {
               target.addSegment?.(segment);
               streaming.add(segment.id);
+            } else if ("content" in segment) {
+              target.updateSegment?.(segment.id, { content: segment.content });
             }
           }
-          if (r.segments.length === 0 && !parser.getState().activeSegment) {
-            if (target.typeName) target.typeName(e.delta);
-            else target.updateLastMessage?.(e.delta, { append: true });
-          }
           break;
         }
         const result = parser.parse(e.delta);
@@ -4394,10 +4836,7 @@ function createStreamAdapter(opts) {
               dispatchArtifactLifecycle(target, messageId, active, artifactProgress, false);
             }
           }
-        } else if (result.segments.length === 0) {
-          if (target.typeName) target.typeName(e.delta);
-          else target.updateLastMessage?.(e.delta, { append: true });
-        }
+        } else if (result.segments.length === 0) ;
         break;
       }
       case "text-flush": {
@@ -4517,7 +4956,7 @@ function createStreamAdapter(opts) {
       case "turn-limit-exceeded":
         if (e.scope === "global") {
           target.addSegment?.({
-            id: `max-turns-${crypto.randomUUID()}`,
+            id: `max-turns-${uuid()}`,
             type: "error",
             content: `Stopped after ${e.limit} tool calls to prevent an infinite loop.`,
             details: "MAX_TURNS_EXCEEDED"
@@ -4527,7 +4966,7 @@ function createStreamAdapter(opts) {
         }
         break;
       case "phase-advance":
-        target.addSegment?.({ id: `pw-${crypto.randomUUID()}`, type: "pipeline-waiting" });
+        target.addSegment?.({ id: `pw-${uuid()}`, type: "pipeline-waiting" });
         break;
       case "run-aborted":
         dispatchLifecycleEvent(target, "aparte-message-aborted", { messageId });
@@ -4564,6 +5003,10 @@ function readableToAsyncIterable(stream, signal) {
         },
         async return() {
           signal.removeEventListener("abort", onAbort);
+          try {
+            await reader.cancel();
+          } catch {
+          }
           try {
             reader.releaseLock();
           } catch {
@@ -4574,7 +5017,20 @@ function readableToAsyncIterable(stream, signal) {
     }
   };
 }
-const TOOL_HANDLER_TIMEOUT_MS = 5 * 60 * 1e3;
+const DEFAULT_TOOL_HANDLER_TIMEOUT_MS = 5 * 60 * 1e3;
+function withToolTimeout(work, controller, timeoutMs) {
+  let timer;
+  const timedOut = new Promise((_resolve, reject) => {
+    timer = setTimeout(() => {
+      controller.abort();
+      reject(Object.assign(new Error(`tool handler exceeded ${timeoutMs}ms`), { name: "AbortError" }));
+    }, timeoutMs);
+  });
+  return {
+    raced: Promise.race([work(controller.signal), timedOut]),
+    done: () => clearTimeout(timer)
+  };
+}
 class AparteClient {
   _boundHandler = null;
   _boundAbortHandler = null;
@@ -4583,6 +5039,30 @@ class AparteClient {
   _boundEditHandler = null;
   _activeToolControllers = /* @__PURE__ */ new Set();
   _isAborted = false;
+  /**
+   * Does this window event belong to this client?
+   *
+   * One rule for all five handlers, because it used to be four near-copies and
+   * one omission: `aparte-compact` had no guard at all, so in the two-client
+   * layout the JSDoc documents, a single compact event made BOTH clients run —
+   * two paid summarisation calls against whichever chat the DOM scan found
+   * first, and a global reset that wiped the other conversation.
+   *
+   * A scoped client also answers only events ADDRESSED to it. The old guard let
+   * an untargeted event through to every scoped client, which turned one
+   * broadcast into an action on every chat on the page.
+   */
+  _isForThisInstance(e) {
+    if (!e) return true;
+    const detail = e.detail;
+    const scope = this.options.scopeToTargetId;
+    if (scope) return detail?.targetId === scope;
+    if (this._config === aparteGlobalConfig) return true;
+    const target = this._resolveTarget(detail?.targetId);
+    if (!target) return true;
+    const owner = resolveConfig(target);
+    return owner === this._config || owner === aparteGlobalConfig;
+  }
   /** Aborts the in-flight vendor/transport fetch when the user stops a stream. */
   _streamController = null;
   options;
@@ -4593,11 +5073,11 @@ class AparteClient {
       autoRegister: true,
       ...options
     };
-    this._config = options.config ?? AparteConfig;
+    this._config = options.config ?? aparteGlobalConfig;
     if (this.options.autoRegister) {
-      registerDefaultRenderers();
+      registerDefaultRenderers(this._config);
     } else {
-      declineDefaultRenderers();
+      declineDefaultRenderers(this._config);
     }
     this._setupListeners();
   }
@@ -4610,10 +5090,7 @@ class AparteClient {
     this._boundHandler = (e) => {
       const event = e;
       if (event.type !== "aparte-send") return;
-      if (this.options.scopeToTargetId) {
-        const evtTargetId = event.detail?.targetId;
-        if (evtTargetId && evtTargetId !== this.options.scopeToTargetId) return;
-      }
+      if (!this._isForThisInstance(event)) return;
       this._isAborted = false;
       for (const controller of this._activeToolControllers) {
         controller.abort();
@@ -4634,27 +5111,23 @@ class AparteClient {
     }
     if (!this._boundAbortHandler) {
       this._boundAbortHandler = (e) => {
-        if (this.options.scopeToTargetId) {
-          const evtTargetId = e?.detail?.targetId;
-          if (evtTargetId && evtTargetId !== this.options.scopeToTargetId) return;
-        }
+        if (!this._isForThisInstance(e)) return;
         this.abort();
       };
     }
     window.addEventListener("aparte-abort", this._boundAbortHandler);
     if (!this._boundCompactHandler) {
-      this._boundCompactHandler = () => {
-        void this.compact();
+      this._boundCompactHandler = (e) => {
+        if (!this._isForThisInstance(e)) return;
+        const detail = e.detail;
+        void this.compact(detail?.targetId);
       };
     }
     window.addEventListener("aparte-compact", this._boundCompactHandler);
     if (!this._boundRetryHandler) {
       this._boundRetryHandler = (e) => {
         const evt = e;
-        if (this.options.scopeToTargetId) {
-          const evtTargetId = evt.detail?.targetId;
-          if (evtTargetId && evtTargetId !== this.options.scopeToTargetId) return;
-        }
+        if (!this._isForThisInstance(evt)) return;
         void this._handleRetry(evt);
       };
     }
@@ -4662,10 +5135,7 @@ class AparteClient {
     if (!this._boundEditHandler) {
       this._boundEditHandler = (e) => {
         const evt = e;
-        if (this.options.scopeToTargetId) {
-          const evtTargetId = evt.detail?.targetId;
-          if (evtTargetId && evtTargetId !== this.options.scopeToTargetId) return;
-        }
+        if (!this._isForThisInstance(evt)) return;
         void this._handleEdit(evt);
       };
     }
@@ -4675,6 +5145,7 @@ class AparteClient {
    * Stop listening.
    */
   stop() {
+    this.abort();
     if (!this._boundHandler) return;
     window.removeEventListener("aparte-send", this._boundHandler);
     this._boundHandler = null;
@@ -4718,7 +5189,27 @@ class AparteClient {
    * approval to `{ approved: false }` — there is no timeout, since a human may
    * take any amount of time to decide.
    */
-  _awaitToolDecision(toolCallId, signal) {
+  /**
+   * Await the human's Approve/Reject for one tool call.
+   *
+   * `target` is not decoration: it is the scope of the consent. The listener sits
+   * on `document` and used to accept any `aparte-tool-decision` whose
+   * `detail.toolCallId` matched — and that id is the tool-call id the MODEL chose.
+   * The built-in buttons dispatch with `bubbles: true, composed: true`, so on a
+   * page with two chats a click aimed at one tool could satisfy the gate awaiting
+   * a different tool in a different conversation. The consented action and the
+   * executed action came apart, which is the entire failure mode an approval gate
+   * exists to prevent — and the handler behind it is arbitrary consumer code.
+   *
+   * The check is DOM CONTAINMENT rather than a `targetId` string comparison. A
+   * model can choose an id; it cannot choose where in the tree the click happened.
+   * It also needs no change on the dispatch side, so a consumer's own Approve
+   * button keeps working as long as it fires from inside its own chat.
+   *
+   * The request half of this handshake was hardened with `targetId` for exactly
+   * this hazard. This is its sibling, and it was missed.
+   */
+  _awaitToolDecision(toolCallId, signal, target) {
     return new Promise((resolve) => {
       if (signal.aborted) {
         resolve({ approved: false });
@@ -4731,6 +5222,7 @@ class AparteClient {
       const onDecision = (e) => {
         const detail = e.detail;
         if (detail?.toolCallId !== toolCallId) return;
+        if (target && e.target instanceof Node && e.target !== document && !target.contains(e.target)) return;
         cleanup();
         resolve({ approved: detail?.approved === true, payload: detail?.payload });
       };
@@ -4744,7 +5236,7 @@ class AparteClient {
   }
   /**
    * Resolve the auth for a provider: `options.keyResolver` takes precedence,
-   * then the AparteConfig key channel (`setKeyProvider`) so a key registered
+   * then the aparteGlobalConfig key channel (`setKeyProvider`) so a key registered
    * there reaches the request. One key source on the happy path.
    */
   async _resolveAuth(providerId) {
@@ -4781,12 +5273,24 @@ class AparteClient {
     if (baseRequest.toolChoice === "none") {
       baseRequest = { ...baseRequest, tools: void 0 };
     }
-    this._isAborted = false;
-    this._dispatchLifecycleEvent(targetElement, "aparte-message-start", { messageId, role: "assistant" });
+    if (this._isAborted) {
+      dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
+      return;
+    }
+    dispatchLifecycleEvent(targetElement, "aparte-message-start", { messageId, role: "assistant" });
     try {
       const usage = await this._streamLoop(targetElement, messageId, provider, baseRequest, authConfig);
-      this._dispatchLifecycleEvent(targetElement, "aparte-message-done", { messageId, role: "assistant", usage });
+      if (this._isAborted) {
+        this._updateMessage(targetElement, messageId, { status: "completed" });
+      } else {
+        dispatchLifecycleEvent(targetElement, "aparte-message-done", { messageId, role: "assistant", usage });
+      }
     } catch (error) {
+      if (this._isAborted) {
+        dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
+        this._updateMessage(targetElement, messageId, { status: "completed" });
+        return;
+      }
       const aparteError = AparteError.from(error, AparteErrorCode.UNKNOWN_ERROR);
       this._handleLifecycleError(targetElement, messageId, aparteError);
     }
@@ -4798,20 +5302,9 @@ class AparteClient {
    * Triggered programmatically or by dispatching `window.dispatchEvent(new CustomEvent('aparte-compact'))`.
    * Dispatches `aparte-compact-done` on window when complete, or `aparte-compact-error` on failure.
    */
-  async compact() {
-    let target = null;
-    if (this.options.targetResolver) {
-      target = this.options.targetResolver();
-    }
-    if (!target) {
-      const candidates = document.querySelectorAll("aparte-chat, [data-aparte-chat]");
-      for (const el2 of Array.from(candidates)) {
-        if (typeof el2.getMessages === "function") {
-          target = el2;
-          break;
-        }
-      }
-    }
+  async compact(targetId) {
+    let target = this._resolveTarget(targetId);
+    if (target && typeof target.getMessages !== "function") target = null;
     if (!target) {
       window.dispatchEvent(new CustomEvent("aparte-compact-error", { detail: { error: "No aparte-chat target found" } }));
       return;
@@ -4860,7 +5353,14 @@ class AparteClient {
         modelId: config.defaultModel || "",
         stream: false
       };
-      const response = await this._config.getTransport().chat(provider, summarizeRequest, authConfig, { providerId: provider.id });
+      const compactController = new AbortController();
+      this._streamController = compactController;
+      const response = await this._config.getTransport().chat(
+        provider,
+        summarizeRequest,
+        authConfig,
+        { providerId: provider.id, signal: compactController.signal }
+      );
       let summary;
       if (typeof response === "string") {
         summary = response;
@@ -4878,10 +5378,12 @@ class AparteClient {
       if (!summary.trim()) {
         throw new Error("Empty summary returned by model");
       }
-      window.dispatchEvent(new CustomEvent("aparte-reset"));
+      const clearAll = target.clearAll;
+      if (typeof clearAll === "function") clearAll.call(target);
+      else window.dispatchEvent(new CustomEvent("aparte-reset"));
       await new Promise((resolve) => setTimeout(resolve, 50));
       target.appendMessage?.({
-        id: crypto.randomUUID(),
+        id: uuid(),
         role: "assistant",
         content: `📝 **Conversation summary**
 
@@ -4904,17 +5406,41 @@ ${summary}`,
    * using the same conversation history minus the retried reply.
    */
   /**
-   * Registered tools, gated by capability: only returned when the current model
-   * declares `function_calling` support (else `[]`). Single source for the gate so
-   * send / retry / edit can't drift — the drift is exactly what shipped `tools` on
-   * the initial send while retry/edit correctly omitted them.
+   * The registered tools, unless the current model says it cannot call one.
+   *
+   * Single source for the gate, so send / retry / edit cannot drift — that drift
+   * is what once shipped `tools` on the initial send while retry and edit omitted
+   * them.
+   *
+   * The gate used to be "the model DECLARES function_calling", defaulting to
+   * stripping — and that made the whole tool surface unreachable on the primary
+   * documented path. Three things had to line up for a tool to be sent, and one
+   * never did: the app sets a model id by hand (`setModelConfig`) or a selector
+   * sets it from a fetched list, and in both cases the model's declared
+   * capabilities are commonly unknown. `undefined` capabilities then read as "no
+   * function calling", so `tools: []` went on the wire while `getTools()` held
+   * the tool the app had explicitly registered. The model answered, correctly,
+   * that it had no such tool, and nothing anywhere said why.
+   *
+   * So the question is now "did this model say it cannot", not "did it say it
+   * can". Registering a tool is an explicit act by the app; silently dropping it
+   * because a `/models` listing is terse is the library second-guessing the
+   * developer. A model that declares its capabilities and omits function calling
+   * is still honoured — that is a statement, and it is respected.
+   *
+   * Failure modes, both ways round: over-sending means a model that cannot use
+   * tools does not call one, or its own endpoint rejects the array with an error
+   * the developer can read. Under-sending was silent, total, and looked like a
+   * lying model.
    */
   _toolsForCurrentModel() {
-    const supportsFunctionCalling = this._config.getCurrentModel()?.capabilities?.includes("function_calling") ?? false;
-    return supportsFunctionCalling ? this._config.getTools() : [];
+    const capabilities = this._config.getCurrentModel()?.capabilities;
+    const declinesTools = capabilities ? !capabilities.includes("function_calling") : false;
+    return declinesTools ? [] : this._config.getTools();
   }
   async _handleRetry(event) {
     const { messageId, targetId } = event.detail ?? {};
+    this._isAborted = false;
     if (!messageId) return;
     const targetElement = this._resolveTarget(targetId);
     if (!targetElement) {
@@ -4925,9 +5451,9 @@ ${summary}`,
     const retryIdx = allMessages.findIndex((m) => m.id === messageId);
     const retryMsg = retryIdx >= 0 ? allMessages[retryIdx] : void 0;
     const sliceEnd = retryMsg?.role === "user" ? retryIdx + 1 : retryIdx;
-    const historyMessages = retryIdx > 0 ? allMessages.slice(0, sliceEnd) : allMessages;
+    const historyMessages = retryIdx >= 0 ? allMessages.slice(0, sliceEnd) : allMessages;
     const newMsg = {
-      id: crypto.randomUUID(),
+      id: uuid(),
       role: "assistant",
       content: "",
       status: "pending",
@@ -4960,6 +5486,7 @@ ${summary}`,
    */
   async _handleEdit(event) {
     const { messageId, content: newContent, targetId } = event.detail ?? {};
+    this._isAborted = false;
     if (!messageId || newContent === void 0) return;
     const targetElement = this._resolveTarget(targetId);
     if (!targetElement) {
@@ -4988,7 +5515,7 @@ ${summary}`,
     const provider = this._config.getAIProvider(providerId);
     if (!provider) return;
     const authConfig = await this._resolveAuth(providerId);
-    const newMessageId = crypto.randomUUID();
+    const newMessageId = uuid();
     targetElement.appendMessage?.({
       id: newMessageId,
       role: "assistant",
@@ -5051,6 +5578,12 @@ ${summary}`,
   }
   async _handleSend(event) {
     const { content, modelId, providerId: explicitProviderId } = event.detail;
+    if (this._config.getRequireModelSelection() && !this._config.hasSelectedModel() && !modelId) {
+      console.warn(
+        "[AparteClient] Send refused: requireModelSelection is on and no model is selected yet. The composer blocks this, but this send did not come from it — disable your own send affordances while `hasSelectedModel()` is false."
+      );
+      return;
+    }
     let targetElement = null;
     const targetId = event.detail?.targetId;
     if (targetId) {
@@ -5093,7 +5626,7 @@ ${summary}`,
       console.warn("[AparteClient] ⚠️ No target element found with appendMessage support. Provide a targetResolver in AparteClientOptions or ensure the composer has a `target` attribute.");
       return;
     }
-    const messageId = crypto.randomUUID();
+    const messageId = uuid();
     const config = this._config.getModelConfig();
     const providerId = explicitProviderId || config.defaultProvider;
     if (!providerId) {
@@ -5177,10 +5710,69 @@ ${summary}`,
       content: this._extractText(m)
     })).filter((m) => m.content.length > 0);
   }
+  /**
+   * What the model is told it said last turn — reconstructed from what was
+   * RENDERED, not from the raw-text field.
+   *
+   * The order used to be the other way round, and it silently corrupted the
+   * context on the most common opening in a coding chat: a reply starting with a
+   * code fence was sent back as three backticks and nothing else. Three
+   * correct-in-isolation decisions composed into it:
+   *
+   *  1. the parser withholds an ambiguous prefix (``` ``` ```, `` ` ``, `<`)
+   *     waiting for the next delta, and creates no active segment while it waits;
+   *  2. so `_streamLoop` sees zero segments, concludes the parser produced
+   *     nothing, and appends the raw delta straight to `message.content`;
+   *  3. and this method preferred `content`.
+   *
+   * The bubble hides its content element as soon as segments exist, so the UI was
+   * perfect and only the NEXT request showed it. No unit test, no example and
+   * no browser test could see it.
+   *
+   * `content` stays as the fallback, and that is not vestigial: a non-streaming
+   * transport writes the whole reply there and creates no segments at all.
+   */
   _extractText(message) {
+    const rendered = this._segmentsToText(message.segments);
+    if (rendered) return rendered;
     if (typeof message.content === "string" && message.content) return message.content;
-    if (!message.segments) return "";
-    return message.segments.filter((s) => s.type === "text" || s.type === "code").map((s) => s.content ?? "").join("\n").trim();
+    return "";
+  }
+  /**
+   * Segments → the text a model can read back.
+   *
+   * Fences and the language tag are kept. Without them the model re-reads its own
+   * code as prose — which is how it starts explaining a snippet it believes it
+   * wrote in English. Artifacts are included for the same reason: dropping them
+   * made an artifact the model had just produced invisible on the very next turn,
+   * so it could not be asked to change the thing it had built.
+   *
+   * `thinking` stays out on purpose — it is the model's own scratchpad, and most
+   * APIs neither want it back nor bill for it kindly.
+   */
+  _segmentsToText(segments) {
+    if (!segments?.length) return "";
+    const fence = "```";
+    const parts = [];
+    for (const segment of segments) {
+      const content = segment.content ?? "";
+      if (segment.type === "text") {
+        if (content) parts.push(content);
+      } else if (segment.type === "code") {
+        const lang = segment.language ?? "";
+        parts.push(`${fence}${lang}
+${content}
+${fence}`);
+      } else if (segment.type === "artifact") {
+        const title = segment.title ?? "artifact";
+        const kind = segment.artifactType ?? "";
+        parts.push(`${fence}${kind}
+<!-- artifact: ${title} -->
+${content}
+${fence}`);
+      }
+    }
+    return parts.join("\n").trim();
   }
   /**
    * Which of the send's pending files get inlined into the request: the
@@ -5238,135 +5830,6 @@ ${content}
     );
     return parts.filter((p) => p !== null);
   }
-  /**
-   * Stream loop: runs one provider.chat() call and repeats if a tool was called.
-   * Maintains a running messages array to inject tool_call / tool_result turns.
-   */
-  /**
-   * Feed one text delta to the Claude-style `<artifact>` XML streamer. Scans for
-   * `<artifact …>` / `</artifact>`, routing chat text through the text parser and
-   * artifact content into a dedicated artifact segment (handling tags split across
-   * deltas). Mutates `xml` in place. Extracted from _streamLoop.
-   */
-  _feedXmlArtifactDelta(delta, xml, ctx) {
-    const { targetElement, messageId, textParser, streamingSegmentIds, artifactProgress, artifactXmlHint } = ctx;
-    let remaining = delta;
-    while (remaining.length > 0) {
-      if (xml.state === "normal") {
-        const tagStart = remaining.indexOf("<artifact");
-        if (tagStart === -1) {
-          const r = textParser.parse(remaining);
-          for (const seg of r.segments) {
-            if (!streamingSegmentIds.has(seg.id)) {
-              targetElement.addSegment?.(seg);
-              streamingSegmentIds.add(seg.id);
-            } else if ("content" in seg) {
-              targetElement.updateSegment?.(seg.id, { content: seg.content });
-            }
-          }
-          const active = textParser.getState().activeSegment;
-          if (active) {
-            if (!streamingSegmentIds.has(active.id)) {
-              targetElement.addSegment?.(active);
-              streamingSegmentIds.add(active.id);
-            } else {
-              targetElement.updateSegment?.(active.id, { content: active.content });
-            }
-          } else if (!r.segments.length) {
-            if (targetElement.typeName) targetElement.typeName(remaining);
-            else targetElement.updateLastMessage?.(remaining, { append: true });
-          }
-          remaining = "";
-        } else {
-          const before = remaining.slice(0, tagStart);
-          if (before) {
-            const r = textParser.parse(before);
-            for (const seg of r.segments) {
-              if (!streamingSegmentIds.has(seg.id)) {
-                targetElement.addSegment?.(seg);
-                streamingSegmentIds.add(seg.id);
-              }
-            }
-            if (!r.segments.length && !textParser.getState().activeSegment) {
-              if (targetElement.typeName) targetElement.typeName(before);
-              else targetElement.updateLastMessage?.(before, { append: true });
-            }
-          }
-          xml.scanBuf = remaining.slice(tagStart);
-          remaining = "";
-          xml.state = "scanning";
-        }
-      } else if (xml.state === "scanning") {
-        xml.scanBuf += remaining;
-        remaining = "";
-        const gtIdx = xml.scanBuf.indexOf(">");
-        if (gtIdx !== -1) {
-          const tag = xml.scanBuf.slice(0, gtIdx + 1);
-          const mimeMatch = /mimeType=['"]([^'"]+)['"]/.exec(tag);
-          const titleMatch = /title=['"]([^'"]+)['"]/.exec(tag);
-          xml.mime = mimeMatch?.[1] ?? artifactXmlHint.mimeType;
-          xml.title = titleMatch?.[1] ?? artifactXmlHint.kind;
-          xml.kind = deriveArtifactKind(xml.mime, artifactXmlHint.kind);
-          xml.segId = `artifact-xml-${crypto.randomUUID()}`;
-          xml.content = "";
-          const openSeg = {
-            id: xml.segId,
-            type: "artifact",
-            mimeType: xml.mime,
-            artifactType: xml.kind,
-            title: xml.title,
-            content: ""
-          };
-          targetElement.addSegment?.(openSeg);
-          streamingSegmentIds.add(xml.segId);
-          this._dispatchArtifactLifecycle(targetElement, messageId, openSeg, artifactProgress, false);
-          xml.state = "in-artifact";
-          remaining = xml.scanBuf.slice(gtIdx + 1);
-          xml.scanBuf = "";
-        }
-      } else {
-        const CLOSE = "</artifact>";
-        const combined = xml.closeBuf + remaining;
-        const closeIdx = combined.indexOf(CLOSE);
-        if (closeIdx !== -1) {
-          xml.content += combined.slice(0, closeIdx);
-          const lineCount = xml.content.split("\n").length;
-          const isInline = lineCount < 15;
-          const finalSeg = {
-            id: xml.segId,
-            type: "artifact",
-            mimeType: xml.mime,
-            artifactType: xml.kind,
-            title: xml.title,
-            content: xml.content,
-            inline: isInline
-          };
-          targetElement.updateSegment?.(xml.segId, { content: xml.content, inline: isInline });
-          this._dispatchArtifactLifecycle(targetElement, messageId, finalSeg, artifactProgress, true);
-          xml.state = "normal";
-          xml.closeBuf = "";
-          remaining = combined.slice(closeIdx + CLOSE.length);
-        } else {
-          const safeLen = Math.max(0, combined.length - CLOSE.length + 1);
-          const safe = combined.slice(0, safeLen);
-          xml.content += safe;
-          xml.closeBuf = combined.slice(safeLen);
-          remaining = "";
-          if (xml.segId) {
-            targetElement.updateSegment?.(xml.segId, { content: xml.content });
-            this._dispatchArtifactLifecycle(targetElement, messageId, {
-              id: xml.segId,
-              type: "artifact",
-              mimeType: xml.mime,
-              artifactType: xml.kind,
-              title: xml.title,
-              content: xml.content
-            }, artifactProgress, false);
-          }
-        }
-      }
-    }
-  }
   /**
    * Turn-1 forced tool call. When `toolChoice = { name, input }`
    * (orchestrator-driven), execute the handler directly instead of consulting
@@ -5380,7 +5843,7 @@ ${content}
     if (!(turns === 1 && toolChoice && typeof toolChoice === "object" && toolChoice.input !== void 0)) {
       return { baseRequest, skip: false };
     }
-    const syntheticId = crypto.randomUUID();
+    const syntheticId = uuid();
     const syntheticCall = { id: syntheticId, name: toolChoice.name, input: toolChoice.input };
     const toolSeg = {
       id: `tool-${syntheticId}`,
@@ -5403,9 +5866,16 @@ ${content}
     }
     const controller = new AbortController();
     this._activeToolControllers.add(controller);
-    const timeout = setTimeout(() => controller.abort(), TOOL_HANDLER_TIMEOUT_MS);
+    const { raced, done: clearToolTimeout } = withToolTimeout(
+      (sig) => handler(syntheticCall, sig, {
+        target: targetElement,
+        config: this._config
+      }),
+      controller,
+      this.options.toolTimeoutMs ?? DEFAULT_TOOL_HANDLER_TIMEOUT_MS
+    );
     try {
-      const result = await handler(syntheticCall, controller.signal);
+      const result = await raced;
       targetElement.updateSegment?.(toolSeg.id, { status: "resolved", result: result.content });
       messages.push({ role: "tool_call", content: "", toolCalls: [syntheticCall] });
       messages.push({ role: "tool_result", content: result.content, toolCallId: syntheticId });
@@ -5417,7 +5887,7 @@ ${content}
       }
       throw err;
     } finally {
-      clearTimeout(timeout);
+      clearToolTimeout();
       this._activeToolControllers.delete(controller);
     }
   }
@@ -5435,7 +5905,7 @@ ${content}
     if (event.name === "create_artifact") {
       const input = event.input;
       const mimeType = input.mimeType ?? "text/plain";
-      const kind = mimeType.includes("react") ? "react" : mimeType.includes("html") ? "html" : mimeType.includes("javascript") ? "js" : mimeType.includes("css") ? "css" : mimeType.includes("svg") ? "svg" : mimeType.includes("json") ? "json" : mimeType.includes("csv") ? "csv" : mimeType.includes("markdown") ? "markdown" : "text";
+      const kind = deriveArtifactKind(mimeType, "text");
       const artifactSeg = {
         id: `artifact-${event.id}`,
         type: "artifact",
@@ -5445,7 +5915,7 @@ ${content}
         content: input.content ?? ""
       };
       targetElement.addSegment?.(artifactSeg);
-      this._dispatchArtifactLifecycle(targetElement, messageId, artifactSeg, artifactProgress, true);
+      dispatchArtifactLifecycle(targetElement, messageId, artifactSeg, artifactProgress, true);
       messages.push({
         role: "tool_call",
         content: "",
@@ -5499,13 +5969,13 @@ ${content}
         const approvalController = new AbortController();
         this._activeToolControllers.add(approvalController);
         targetElement.updateSegment?.(toolSeg.id, { status: "awaiting-approval" });
-        targetElement.dispatchEvent?.(new CustomEvent("aparte-tool-approval-request", {
-          bubbles: true,
-          composed: true,
-          detail: { toolCallId: event.id, toolName: event.name, input: event.input }
-        }));
+        dispatchLifecycleEvent(targetElement, "aparte-tool-approval-request", {
+          toolCallId: event.id,
+          toolName: event.name,
+          input: event.input
+        });
         let decision;
-        const resolveApproval = this.options.approvalResolver ?? ((id, sig) => this._awaitToolDecision(id, sig));
+        const resolveApproval = this.options.approvalResolver ?? ((id, sig) => this._awaitToolDecision(id, sig, targetElement));
         try {
           decision = await resolveApproval(event.id, approvalController.signal);
         } finally {
@@ -5535,12 +6005,17 @@ ${content}
       }
       const controller = new AbortController();
       this._activeToolControllers.add(controller);
-      const timeout = setTimeout(() => controller.abort(), TOOL_HANDLER_TIMEOUT_MS);
-      try {
-        const result = await handler(
+      const { raced, done: clearToolTimeout } = withToolTimeout(
+        (sig) => handler(
           { id: event.id, name: event.name, input: effectiveInput },
-          controller.signal
-        );
+          sig,
+          { target: targetElement, config: this._config }
+        ),
+        controller,
+        this.options.toolTimeoutMs ?? DEFAULT_TOOL_HANDLER_TIMEOUT_MS
+      );
+      try {
+        const result = await raced;
         targetElement.updateSegment?.(toolSeg.id, { status: "resolved", result: result.content });
         const existingToolCallMsg = messages.find(
           (m) => m.role === "tool_call" && m.toolCalls?.some((tc) => tc.id === event.id)
@@ -5566,7 +6041,7 @@ ${content}
           throw err;
         }
       } finally {
-        clearTimeout(timeout);
+        clearToolTimeout();
         this._activeToolControllers.delete(controller);
       }
     } else {
@@ -5576,7 +6051,12 @@ ${content}
     }
     return { continueLoop };
   }
+  /**
+   * Stream loop: runs one provider.chat() call and repeats if a tool was called.
+   * Maintains a running messages array to inject tool_call / tool_result turns.
+   */
   async _streamLoop(targetElement, messageId, provider, baseRequest, authConfig) {
+    this._streamController?.abort();
     const streamController = new AbortController();
     this._streamController = streamController;
     if (this.options.streamRunner) {
@@ -5595,14 +6075,14 @@ ${content}
     }
     while (continueLoop) {
       if (this._isAborted) {
-        this._dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
+        dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
         break;
       }
       turns++;
       if (turns > globalMaxTurns) {
         console.warn(`[AparteClient] maxTurns (${globalMaxTurns}) exceeded — stopping loop.`);
         targetElement.addSegment?.({
-          id: `max-turns-${crypto.randomUUID()}`,
+          id: `max-turns-${uuid()}`,
           type: "error",
           content: `Stopped after ${globalMaxTurns} tool calls to prevent an infinite loop.`,
           details: "MAX_TURNS_EXCEEDED"
@@ -5630,7 +6110,17 @@ ${content}
       const request = { ...baseRequest, messages: phaseMessages, _meta: phaseMeta };
       const response = await this._config.getTransport().chat(provider, request, authConfig, { providerId: provider.id, signal: streamController.signal });
       if (typeof response === "string") {
-        this._updateMessage(targetElement, messageId, { content: response, status: "completed" });
+        const wholeParser = new AparteStreamParser();
+        const parsed = [
+          ...wholeParser.parse(response).segments,
+          ...wholeParser.finalize()
+        ];
+        if (parsed.length > 0) {
+          for (const segment of parsed) targetElement.addSegment?.(segment);
+          this._updateMessage(targetElement, messageId, { status: "completed" });
+        } else {
+          this._updateMessage(targetElement, messageId, { content: response, status: "completed" });
+        }
         return void 0;
       }
       const reader = response.getReader();
@@ -5646,7 +6136,7 @@ ${content}
       let rawSegId = null;
       let rawContent = "";
       if (artifactRawHint) {
-        rawSegId = `artifact-raw-${crypto.randomUUID()}`;
+        rawSegId = `artifact-raw-${uuid()}`;
         const rawSeg = {
           id: rawSegId,
           type: "artifact",
@@ -5657,7 +6147,7 @@ ${content}
         };
         targetElement.addSegment?.(rawSeg);
         streamingSegmentIds.add(rawSegId);
-        this._dispatchArtifactLifecycle(targetElement, messageId, rawSeg, artifactProgress, false);
+        dispatchArtifactLifecycle(targetElement, messageId, rawSeg, artifactProgress, false);
       }
       const artifactXmlHint = baseRequest._meta?.artifactXml;
       const xmlCtx = {
@@ -5672,25 +6162,32 @@ ${content}
       };
       let precedingText = "";
       const toolCallsThisTurn = [];
+      const bailOnAbort = () => {
+        if (!this._isAborted) return false;
+        try {
+          void reader.cancel();
+        } catch {
+        }
+        dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
+        continueLoop = false;
+        return true;
+      };
+      let streamDrained = false;
       try {
         while (true) {
-          if (this._isAborted) {
-            try {
-              void reader.cancel();
-            } catch {
-            }
-            this._dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
-            continueLoop = false;
+          if (bailOnAbort()) break;
+          const { done, value: event } = await reader.read();
+          if (bailOnAbort()) break;
+          if (done) {
+            streamDrained = true;
             break;
           }
-          const { done, value: event } = await reader.read();
-          if (done) break;
           switch (event.type) {
             case "thinking": {
               thinkingContent += event.delta;
               if (!thinkingSegmentId) {
                 const seg = {
-                  id: `think-${crypto.randomUUID()}`,
+                  id: `think-${uuid()}`,
                   type: "thinking",
                   content: thinkingContent,
                   collapsed: true,
@@ -5713,7 +6210,7 @@ ${content}
               if (artifactRawHint && rawSegId) {
                 rawContent += event.delta;
                 targetElement.updateSegment?.(rawSegId, { content: rawContent });
-                this._dispatchArtifactLifecycle(targetElement, messageId, {
+                dispatchArtifactLifecycle(targetElement, messageId, {
                   id: rawSegId,
                   type: "artifact",
                   mimeType: artifactRawHint.mimeType,
@@ -5724,7 +6221,7 @@ ${content}
                 break;
               }
               if (artifactXmlHint) {
-                this._feedXmlArtifactDelta(event.delta, xmlCtx, {
+                feedXmlArtifactDelta(event.delta, xmlCtx, {
                   targetElement,
                   messageId,
                   textParser,
@@ -5756,7 +6253,7 @@ ${content}
                   targetElement.updateSegment?.(segment.id, { content: segment.content });
                 }
                 if (segment.type === "artifact") {
-                  this._dispatchArtifactLifecycle(targetElement, messageId, segment, artifactProgress, true);
+                  dispatchArtifactLifecycle(targetElement, messageId, segment, artifactProgress, true);
                 }
               }
               const active = textParser.getState().activeSegment;
@@ -5765,17 +6262,15 @@ ${content}
                   targetElement.addSegment?.(active);
                   streamingSegmentIds.add(active.id);
                   if (active.type === "artifact") {
-                    this._dispatchArtifactLifecycle(targetElement, messageId, active, artifactProgress, false);
+                    dispatchArtifactLifecycle(targetElement, messageId, active, artifactProgress, false);
                   }
                 } else {
                   targetElement.updateSegment?.(active.id, { content: active.content });
                   if (active.type === "artifact") {
-                    this._dispatchArtifactLifecycle(targetElement, messageId, active, artifactProgress, false);
+                    dispatchArtifactLifecycle(targetElement, messageId, active, artifactProgress, false);
                   }
                 }
               } else if (result.segments.length === 0) {
-                if (targetElement.typeName) targetElement.typeName(event.delta);
-                else targetElement.updateLastMessage?.(event.delta, { append: true });
               }
               break;
             }
@@ -5792,16 +6287,22 @@ ${content}
             case "done":
               if (event.usage) lastUsage = event.usage;
               break;
-            default:
-              assertNever(event);
+            default: {
+              const exhaustive = event;
+              void exhaustive;
+              this._warnUnknownStreamEvent(event);
+              break;
+            }
           }
+          if (!continueLoop) break;
         }
+        finalizeXmlArtifact(xmlCtx, { targetElement, messageId, artifactProgress, artifactXmlHint, textParser, streamingSegmentIds });
         const finals = textParser.finalize();
         if (artifactRawHint && rawSegId) {
           const lineCount = rawContent.split("\n").length;
           const isInline = lineCount < 15;
           targetElement.updateSegment?.(rawSegId, { content: rawContent, inline: isInline });
-          this._dispatchArtifactLifecycle(targetElement, messageId, {
+          dispatchArtifactLifecycle(targetElement, messageId, {
             id: rawSegId,
             type: "artifact",
             mimeType: artifactRawHint.mimeType,
@@ -5811,22 +6312,6 @@ ${content}
             inline: isInline
           }, artifactProgress, true);
         }
-        if (artifactXmlHint && xmlCtx.state === "in-artifact" && xmlCtx.segId) {
-          xmlCtx.content += xmlCtx.closeBuf;
-          const lineCount = xmlCtx.content.split("\n").length;
-          const isInline = lineCount < 15;
-          targetElement.updateSegment?.(xmlCtx.segId, { content: xmlCtx.content, inline: isInline });
-          this._dispatchArtifactLifecycle(targetElement, messageId, {
-            id: xmlCtx.segId,
-            type: "artifact",
-            mimeType: xmlCtx.mime,
-            artifactType: xmlCtx.kind,
-            title: xmlCtx.title,
-            content: xmlCtx.content,
-            inline: isInline
-          }, artifactProgress, true);
-          console.warn("[AparteClient] XML artifact finalized without closing tag — content may be partial.");
-        }
         if (artifactHint && !artifactPromoted) {
           const codeIdx = finals.findIndex((s) => s.type === "code");
           if (codeIdx !== -1) {
@@ -5853,7 +6338,7 @@ ${content}
             targetElement.updateSegment?.(s.id, { content: s.content });
           }
           if (s.type === "artifact") {
-            this._dispatchArtifactLifecycle(targetElement, messageId, s, artifactProgress, true);
+            dispatchArtifactLifecycle(targetElement, messageId, s, artifactProgress, true);
           }
         }
         if (toolCallsThisTurn.length === 0) {
@@ -5862,13 +6347,19 @@ ${content}
               messages.push({ role: "assistant", content: precedingText.trim() });
             }
             pipelineIndex++;
-            const pwId = `pw-${crypto.randomUUID()}`;
+            const pwId = `pw-${uuid()}`;
             targetElement.addSegment?.({ id: pwId, type: "pipeline-waiting" });
           } else {
             continueLoop = false;
           }
         }
       } finally {
+        if (!streamDrained) {
+          try {
+            await reader.cancel();
+          } catch {
+          }
+        }
         reader.releaseLock();
       }
     }
@@ -5908,12 +6399,17 @@ ${content}
       const response = await this._config.getTransport().chat(provider, request, authConfig, { providerId: provider.id, signal });
       return typeof response === "string" ? response : readableToAsyncIterable(response, signal);
     };
-    const toolLookup = (name) => this._config.getToolHandler(name);
+    const toolLookup = (name) => {
+      const handler = this._config.getToolHandler(name);
+      if (!handler) return void 0;
+      const context = { target: targetElement, config: this._config };
+      return (call, sig) => handler(call, sig, context);
+    };
     const toolConfigLookup = (name) => {
       const tool = this._config.getTools().find((t) => t.name === name);
       return tool ? { maxTurns: tool.maxTurns, needsApproval: tool.needsApproval } : void 0;
     };
-    const approvalResolver = this.options.approvalResolver ?? ((id, sig) => this._awaitToolDecision(id, sig));
+    const approvalResolver = this.options.approvalResolver ?? ((id, sig) => this._awaitToolDecision(id, sig, targetElement));
     const usage = await streamRunner({
       messageId,
       baseRequest,
@@ -5924,9 +6420,14 @@ ${content}
       emitter,
       signal,
       maxTurns: this.options.maxTurns,
+      // Forwarded, because the option's own JSDoc promises it means one thing
+      // whichever loop runs — and the fix that introduced it only wired the
+      // inline path, so setting it was silently ignored here. Exactly the
+      // asymmetry the option was added to remove.
+      toolTimeoutMs: this.options.toolTimeoutMs,
       // Match the inline loop's id conventions: prefixed artifact ids, but a
       // BARE uuid for the synthetic tool (the adapter renders `tool-<id>`).
-      idGen: (prefix) => prefix === "synthetic-tool" ? crypto.randomUUID() : `${prefix}-${crypto.randomUUID()}`
+      idGen: (prefix) => prefix === "synthetic-tool" ? uuid() : `${prefix}-${uuid()}`
     });
     return usage ?? void 0;
   }
@@ -5943,15 +6444,16 @@ ${content}
    */
   _handleLifecycleError(target, messageId, error) {
     const errorSegment = {
-      id: `error-${crypto.randomUUID()}`,
+      id: `error-${uuid()}`,
       type: "error",
       content: error.message,
       details: error.code
     };
     if (target.updateMessage) {
+      const rendered = target.getMessages?.()?.find((m) => m.id === messageId)?.segments ?? [];
       target.updateMessage(messageId, {
         status: "error",
-        segments: [errorSegment]
+        segments: [...rendered, errorSegment]
       });
     } else if (target.appendMessage) {
       target.appendMessage({
@@ -5962,65 +6464,17 @@ ${content}
         segments: [errorSegment]
       });
     }
-    this._dispatchLifecycleEvent(target, "aparte-message-error", { messageId, error });
-  }
-  _dispatchLifecycleEvent(target, name, detail) {
-    target.dispatchEvent(new CustomEvent(name, {
-      bubbles: true,
-      composed: true,
-      // Tag every lifecycle event with the target's id so several chats on
-      // one page stay isolated — a composer reacts only to its own host's
-      // turn (id-less single-instance pages still broadcast).
-      detail: { targetId: target.id || void 0, ...detail }
-    }));
+    dispatchLifecycleEvent(target, "aparte-message-error", { messageId, error });
   }
-  /**
-   * Dispatch the artifact lifecycle (`aparte-artifact-start` / `delta` / `ready`)
-   * on the host bubble element. Idempotent for `start` (fires once per segment id)
-   * and emits `delta` only when the body actually grew. `isFinal=true` fires `ready`.
-   */
-  _dispatchArtifactLifecycle(target, messageId, segment, progress, isFinal) {
-    const id = segment.id;
-    const content = segment.content ?? "";
-    const seen = progress.get(id);
-    if (seen === void 0) {
-      target.dispatchEvent(new CustomEvent("aparte-artifact-start", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          messageId,
-          segmentId: id,
-          mimeType: segment.mimeType,
-          artifactType: segment.artifactType,
-          title: segment.title
-        }
-      }));
-      progress.set(id, 0);
-    }
-    const lastLen = progress.get(id) ?? 0;
-    if (content.length > lastLen) {
-      const chunk = content.slice(lastLen);
-      target.dispatchEvent(new CustomEvent("aparte-artifact-delta", {
-        bubbles: true,
-        composed: true,
-        detail: { segmentId: id, chunk }
-      }));
-      progress.set(id, content.length);
-    }
-    if (isFinal) {
-      target.dispatchEvent(new CustomEvent("aparte-artifact-ready", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          messageId,
-          segmentId: id,
-          mimeType: segment.mimeType,
-          artifactType: segment.artifactType,
-          title: segment.title,
-          content
-        }
-      }));
-    }
+  /** Warn once per client for an unrecognised stream event, then carry on. */
+  _warnedUnknownEvents = /* @__PURE__ */ new Set();
+  _warnUnknownStreamEvent(event) {
+    const type = String(event?.type ?? "undefined");
+    if (this._warnedUnknownEvents.has(type)) return;
+    this._warnedUnknownEvents.add(type);
+    console.warn(
+      `[AparteClient] Ignoring unrecognised stream event "${type}". The reply is unaffected; this usually means the provider or its SDK emits a part this version of aparté does not map yet.`
+    );
   }
 }
 function findHead(node) {
@@ -6028,7 +6482,7 @@ function findHead(node) {
   if ("current" in node) return node;
   return null;
 }
-class MessageRepository {
+class AparteMessageRepository {
   _nodes = /* @__PURE__ */ new Map();
   _head = null;
   _root = { next: null, children: [] };
@@ -6095,7 +6549,7 @@ class MessageRepository {
     const existing = this._nodes.get(message.id);
     const parentNode = parentId ? this._nodes.get(parentId) : void 0;
     if (parentId !== null && parentNode === void 0) {
-      throw new Error(`MessageRepository: parent "${parentId}" not found.`);
+      throw new Error(`AparteMessageRepository: parent "${parentId}" not found.`);
     }
     const parent = parentNode ?? null;
     if (existing) {
@@ -6260,7 +6714,7 @@ class MessageRepository {
     node.next = null;
   }
 }
-const DEFAULT_UI_EVENTS = [
+const APARTE_DEFAULT_UI_EVENTS = [
   "aparte-send",
   "aparte-action",
   "aparte-retry",
@@ -6273,8 +6727,9 @@ function applyElementProps(el2, props, transformValue = (value) => value) {
   for (const [key, value] of Object.entries(props)) {
     if (key.startsWith("--")) {
       el2.style.setProperty(key, String(value));
-    } else if (key.startsWith("on") && typeof value === "function") ;
-    else if (value === null || value === void 0 || value === false) {
+    } else if (key.startsWith("on")) {
+      el2.removeAttribute(key);
+    } else if (value === null || value === void 0 || value === false) {
       el2.removeAttribute(key);
     } else if (value === true) {
       el2.setAttribute(key, "");
@@ -6295,17 +6750,30 @@ function el(tag, className, text) {
   if (text != null) node.textContent = text;
   return node;
 }
-function fieldHeader(parent, field) {
-  if (field.title) parent.appendChild(el("p", "aparte-elic-title", field.title));
+function fieldHeader(parent, field, skipTitle) {
+  let titleId;
+  if (field.title && field.title.trim() !== skipTitle?.trim()) {
+    const title = el("p", "aparte-elic-title", field.title);
+    titleId = `elic-title-${uuid()}`;
+    title.id = titleId;
+    parent.appendChild(title);
+  }
   if (field.description) parent.appendChild(el("p", "aparte-elic-desc", field.description));
+  return titleId;
 }
-function buildEnumField(field, onChange) {
+function labelGroup(list, opts) {
+  list.setAttribute("role", opts.multiple ? "group" : "radiogroup");
+  if (opts.titleId) list.setAttribute("aria-labelledby", opts.titleId);
+  else if (opts.fallbackLabel) list.setAttribute("aria-label", opts.fallbackLabel);
+}
+function buildEnumField(field, onChange, fallbackLabel) {
   const wrap = el("div", "aparte-elic-field aparte-elic-enum");
-  fieldHeader(wrap, field);
+  const titleId = fieldHeader(wrap, field, fallbackLabel);
   const list = el("div", "aparte-elic-options");
-  const name = `elic-${crypto.randomUUID()}`;
+  labelGroup(list, { multiple: field.multiple, titleId, fallbackLabel });
+  const name = `elic-${uuid()}`;
   const type = field.multiple ? "checkbox" : "radio";
-  const allowOther = field.allowOther ?? true;
+  const allowOther = field.allowOther ?? contextConfig().getElicitationOptions().allowOther;
   const defaults = new Set(Array.isArray(field.default) ? field.default : field.default != null ? [field.default] : []);
   const buildOption = (value, label, description, recommended) => {
     const row = el("label", "aparte-elic-option" + (recommended ? " aparte-elic-option--recommended" : ""));
@@ -6331,12 +6799,13 @@ function buildEnumField(field, onChange) {
     control.name = name;
     control.value = "__other__";
     const body = el("span", "aparte-elic-option-body");
-    body.appendChild(el("span", "aparte-elic-option-title", "Other…"));
+    const t = contextConfig();
+    body.appendChild(el("span", "aparte-elic-option-title", t.t("elicitationOther")));
     otherText = el("input", "aparte-elic-other-input");
     otherText.type = "text";
-    otherText.placeholder = "Type your answer…";
+    otherText.placeholder = t.t("elicitationOtherPlaceholder");
     otherText.style.display = "none";
-    otherText.setAttribute("aria-label", "Custom answer");
+    otherText.setAttribute("aria-label", t.t("elicitationOtherLabel"));
     body.appendChild(otherText);
     row.append(control, body);
     list.appendChild(row);
@@ -6374,11 +6843,12 @@ function buildEnumField(field, onChange) {
     focus: () => controls()[0]?.focus()
   };
 }
-function buildBooleanField(field, onChange) {
+function buildBooleanField(field, onChange, fallbackLabel) {
   const wrap = el("div", "aparte-elic-field aparte-elic-boolean");
-  fieldHeader(wrap, field);
+  const titleId = fieldHeader(wrap, field, fallbackLabel);
   const list = el("div", "aparte-elic-options");
-  const name = `elic-${crypto.randomUUID()}`;
+  labelGroup(list, { titleId, fallbackLabel });
+  const name = `elic-${uuid()}`;
   const mk = (val, label) => {
     const row = el("label", "aparte-elic-option");
     const control = el("input", "aparte-elic-control");
@@ -6391,8 +6861,9 @@ function buildBooleanField(field, onChange) {
     row.append(control, body);
     list.appendChild(row);
   };
-  mk("true", field.trueLabel ?? "Yes");
-  mk("false", field.falseLabel ?? "No");
+  const t = contextConfig();
+  mk("true", field.trueLabel ?? t.t("elicitationYes"));
+  mk("false", field.falseLabel ?? t.t("elicitationNo"));
   wrap.appendChild(list);
   list.addEventListener("change", onChange);
   const checked = () => list.querySelector("input:checked");
@@ -6403,15 +6874,15 @@ function buildBooleanField(field, onChange) {
     focus: () => list.querySelector("input")?.focus()
   };
 }
-function buildStringField(field, onChange) {
+function buildStringField(field, onChange, fallbackLabel) {
   const wrap = el("div", "aparte-elic-field aparte-elic-string");
-  fieldHeader(wrap, field);
+  fieldHeader(wrap, field, fallbackLabel);
   const input = field.multiline ? el("textarea", "aparte-elic-text") : el("input", "aparte-elic-text");
   if (!field.multiline) input.type = "text";
   if (field.placeholder) input.setAttribute("placeholder", field.placeholder);
   if (field.default) input.value = field.default;
   if (field.maxLength != null) input.setAttribute("maxlength", String(field.maxLength));
-  input.setAttribute("aria-label", field.title ?? field.description ?? "Your answer");
+  input.setAttribute("aria-label", field.title ?? field.description ?? fallbackLabel ?? contextConfig().t("elicitationAnswerLabel"));
   wrap.appendChild(input);
   input.addEventListener("input", onChange);
   const required = field.required ?? true;
@@ -6427,96 +6898,182 @@ function buildStringField(field, onChange) {
     focus: () => input.focus()
   };
 }
-function buildField(field, onChange) {
+function buildField(field, onChange, fallbackLabel, key) {
+  const custom = contextConfig().getElicitationFieldRenderer()?.(field, { key, notifyChange: onChange });
+  if (custom) {
+    return {
+      el: custom.el,
+      getValue: () => custom.getValue(),
+      isComplete: () => custom.isComplete(),
+      focus: () => custom.focus?.()
+    };
+  }
   switch (field.type) {
     case "enum":
-      return buildEnumField(field, onChange);
+      return buildEnumField(field, onChange, fallbackLabel);
     case "boolean":
-      return buildBooleanField(field, onChange);
+      return buildBooleanField(field, onChange, fallbackLabel);
     case "string":
-      return buildStringField(field, onChange);
+      return buildStringField(field, onChange, fallbackLabel);
   }
 }
 function buildElicitationPanel(message, schema, onChange) {
   const panel = el("div", "aparte-elic-panel");
   if (message) panel.appendChild(el("p", "aparte-elic-message", message));
+  const body = el("div", "aparte-elic-body");
+  panel.appendChild(body);
+  const dismiss = el("div", "aparte-elic-dismiss");
+  panel.appendChild(dismiss);
   if (schema.type === "object") {
+    let show = function(index) {
+      current = index;
+      fields.forEach((f, i) => {
+        f.field.el.hidden = i !== index;
+      });
+      syncNav();
+    };
     const entries = Object.entries(schema.properties);
     const requiredKeys = new Set(schema.required ?? entries.map(([k]) => k));
+    const cfg = contextConfig();
+    let syncNav = () => {
+    };
+    const notify = () => {
+      syncNav();
+      onChange();
+    };
     const fields = entries.map(([key, field2]) => {
-      const built = buildField(field2, onChange);
+      const built = buildField(field2, notify, void 0, key);
       if (!field2.title && !built.el.querySelector(".aparte-elic-title")) {
         built.el.insertBefore(el("p", "aparte-elic-title", key), built.el.firstChild);
       }
-      panel.appendChild(built.el);
-      return { key, field: built, required: requiredKeys.has(key) };
+      body.appendChild(built.el);
+      return { key, field: built, required: requiredKeys.has(key), header: field2.header };
     });
-    return {
+    const isComplete = () => fields.every((f) => !f.required || f.field.isComplete());
+    const api = {
       el: panel,
+      dismiss,
       getContent: () => Object.fromEntries(fields.map((f) => [f.key, f.field.getValue()])),
-      isComplete: () => fields.every((f) => !f.required || f.field.isComplete()),
-      focus: () => fields[0]?.field.focus()
+      isComplete,
+      focus: () => fields[0]?.field.focus(),
+      // A form of one behaves like a single field; only a real form steps.
+      mode: () => "submit",
+      canProceed: isComplete,
+      proceed: () => {
+      }
+    };
+    if (fields.length < 2 || cfg.getElicitationOptions().layout !== "stepped") return api;
+    panel.classList.add("aparte-elic-panel--stepped");
+    let current = 0;
+    const steps = el("div", "aparte-elic-steps");
+    steps.setAttribute("role", "tablist");
+    const chips = fields.map((f, i) => {
+      const chip = el("button", "aparte-elic-step");
+      chip.type = "button";
+      chip.setAttribute("role", "tab");
+      chip.textContent = f.header?.trim() || String(i + 1);
+      chip.addEventListener("click", () => {
+        show(i);
+        f.field.focus();
+      });
+      steps.appendChild(chip);
+      return chip;
+    });
+    panel.insertBefore(steps, body);
+    syncNav = () => {
+      chips.forEach((chip, i) => {
+        chip.setAttribute("aria-selected", String(i === current));
+        chip.toggleAttribute("data-answered", fields[i].field.isComplete());
+      });
+    };
+    show(0);
+    const last = () => current === fields.length - 1;
+    return {
+      ...api,
+      focus: () => fields[current]?.field.focus(),
+      mode: () => last() ? "submit" : "advance",
+      // Advancing needs only THIS question answered; submitting needs them all,
+      // which is what stops the last question from accepting a form with a hole
+      // in it.
+      canProceed: () => last() ? isComplete() : !!fields[current]?.field.isComplete(),
+      proceed: () => {
+        if (last()) return;
+        show(current + 1);
+        fields[current]?.field.focus();
+      }
     };
   }
-  const field = buildField(schema, onChange);
-  panel.appendChild(field.el);
+  const field = buildField(schema, onChange, message);
+  body.appendChild(field.el);
   return {
     el: panel,
+    dismiss,
     getContent: () => field.getValue(),
     isComplete: () => field.isComplete(),
-    focus: () => field.focus()
+    focus: () => field.focus(),
+    mode: () => "submit",
+    canProceed: () => field.isComplete(),
+    proceed: () => {
+    }
   };
 }
 function requestUserInput(request) {
   return resolveConfig(request.target ?? null).requestUserInput(request);
 }
 export {
+  uuid as $,
   APARTE_CONVERSATION_SCHEMA_VERSION as A,
-  BackendTransport as B,
-  ConversationManager as C,
-  DEFAULT_BUBBLE_ACTIONS as D,
-  filesToAttachments as E,
-  getSegmentRenderer as F,
-  isAwaitingReply as G,
-  isFormatAdapter as H,
-  isSafeUrl as I,
-  parseAparteEventStream as J,
-  parseMarkdownToSegments as K,
-  populateBubbleFromMessage as L,
-  MessageRepository as M,
-  readableToAsyncIterable as N,
-  registerDefaultRenderers as O,
-  registerSegmentRenderer as P,
-  requestUserInput as Q,
-  resolveConfig as R,
-  runWithConfig as S,
-  unregisterSegmentRenderer as T,
-  installDefaultRenderersOnce as U,
-  APARTE_HOST_ATTR as a,
-  AparteChatHost as b,
-  AparteClient as c,
-  AparteConfig as d,
-  AparteConfigClass as e,
-  AparteConversationController as f,
-  AparteError as g,
-  AparteErrorCode as h,
-  AparteStreamParser as i,
-  DEFAULT_HOST_HANDLERS as j,
-  DEFAULT_ICON_FALLBACKS as k,
-  DEFAULT_LOCALE as l,
-  DEFAULT_SKELETON_FALLBACKS as m,
-  DEFAULT_UI_EVENTS as n,
-  DirectTransport as o,
-  applyElementProps as p,
-  attachConfig as q,
-  buildElicitationPanel as r,
-  collectRendererStyles as s,
-  contentToText as t,
-  contextConfig as u,
-  createAparteChatHandler as v,
-  createStreamAdapter as w,
-  defaultSanitizer as x,
-  deriveArtifactKind as y,
-  detachConfig as z
+  createStreamAdapter as B,
+  cssEscape as C,
+  declineDefaultRenderers as D,
+  defaultSanitizer as E,
+  deriveArtifactKind as F,
+  detachConfig as G,
+  escapeAttr as H,
+  escapeHtml as I,
+  filesToAttachments as J,
+  getAllRenderers as K,
+  getSegmentRenderer as L,
+  installDefaultRenderersOnce as M,
+  isAwaitingReply as N,
+  isFormatAdapter as O,
+  isSafeUrl as P,
+  parseAparteEventStream as Q,
+  parseMarkdownToSegments as R,
+  populateBubbleFromMessage as S,
+  readableToAsyncIterable as T,
+  registerDefaultRenderers as U,
+  registerSegmentRenderer as V,
+  requestUserInput as W,
+  resolveConfig as X,
+  revokeAttachmentUrls as Y,
+  runWithConfig as Z,
+  unregisterSegmentRenderer as _,
+  APARTE_DEFAULT_BUBBLE_ACTIONS as a,
+  APARTE_DEFAULT_HOST_HANDLERS as b,
+  APARTE_DEFAULT_ICON_FALLBACKS as c,
+  APARTE_DEFAULT_LOCALE as d,
+  APARTE_DEFAULT_SKELETON_FALLBACKS as e,
+  APARTE_DEFAULT_UI_EVENTS as f,
+  APARTE_HOST_ATTR as g,
+  AparteBackendTransport as h,
+  AparteChatHost as i,
+  AparteClient as j,
+  AparteConfig as k,
+  AparteConversationController as l,
+  AparteConversationManager as m,
+  AparteDirectTransport as n,
+  AparteError as o,
+  AparteErrorCode as p,
+  AparteMessageRepository as q,
+  AparteStreamParser as r,
+  aparteGlobalConfig as s,
+  applyElementProps as t,
+  attachConfig as u,
+  buildElicitationPanel as v,
+  collectRendererStyles as w,
+  contentToText as x,
+  contextConfig as y,
+  createAparteChatHandler as z
 };
-//# sourceMappingURL=index-Dn7TH14G.js.map
+//# sourceMappingURL=index-BieFbKeW.js.map