@aparte/core 0.9.0 → 0.11.0

package/dist/{index-hQQljwfX.js → is-awaiting-reply-Cb7H3YfN.js}

@@ -69,11 +69,31 @@ const APARTE_DEFAULT_LOCALE = {
   elicitationOtherPlaceholder: "Type your answer…",
   elicitationOtherLabel: "Custom answer",
   submitButton: "Submit",
+  stopButton: "Stop",
   elicitationNext: "Next",
   elicitationSkip: "Skip",
   elicitationYes: "Yes",
   elicitationNo: "No",
   elicitationAnswerLabel: "Your answer",
+  approvalInstructionPlaceholder: "Or tell it what to do instead…",
+  approvalAsk: "Run {tool}?",
+  approvalWaiting: "waiting for you",
+  toolRunning: "Running",
+  toolCompleted: "Done",
+  toolRejected: "Rejected",
+  toolStopped: "Stopped",
+  toolInput: "Input",
+  toolOutput: "Output",
+  approvalOptionsLabel: "Your decision",
+  actionUpload: "Attach file",
+  download: "Download",
+  previewPending: "Press Preview to run this artifact.",
+  sandboxError: "The sandbox failed during generation.",
+  sandboxErrorHint: "Common cause: the model produced invalid code (undefined variable, wrong argument type). Retry the request — the model may produce different code.",
+  preview: "Preview",
+  code: "Code",
+  generating: "Generating…",
+  rebuildingPreview: "Rebuilding preview…",
   typing: "Typing...",
   error: "Error",
   running: "Running...",
@@ -551,7 +571,6 @@ class AparteStreamParser {
       id: this._options.autoGenerateIds ? this._generateId() : "",
       type: "thinking",
       content,
-      collapsed: false,
       label: "Thinking"
     };
   }
@@ -939,6 +958,9 @@ const SAFE_STYLE_PROPS = /* @__PURE__ */ new Set([
   "text-decoration-style",
   "white-space"
 ]);
+function isSafeCustomProperty(prop) {
+  return prop.startsWith("--") && !prop.startsWith("--aparte-");
+}
 function scrubStyle(value) {
   const kept = [];
   for (const decl of value.split(";")) {
@@ -947,7 +969,8 @@ function scrubStyle(value) {
     if (idx === -1) continue;
     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.trim()) continue;
+    if (!SAFE_STYLE_PROPS.has(prop) && !isSafeCustomProperty(prop)) continue;
     if (val.includes("\\")) continue;
     if (/url\s*\(|expression\s*\(|javascript:|vbscript:|[<>]/i.test(val)) continue;
     kept.push(trimmed);
@@ -1011,6 +1034,23 @@ const defaultSanitizer = (html) => {
   sanitizeChildren(doc.body, container, doc);
   return container.innerHTML;
 };
+class AparteElicitationAbortError extends DOMException {
+  /**
+   * Which of the two ways it ended.
+   *
+   * `'no-presenter'` is a developer's setup problem and `'aborted'` is a person
+   * stopping something; a host that reports them the same way reports a bug as a
+   * user action. The distinction is why this carries a field at all.
+   */
+  reason;
+  constructor(reason = "aborted") {
+    super(
+      reason === "no-presenter" ? "No elicitation presenter is mounted, so the request could not be shown." : "The request ended without an answer.",
+      "AbortError"
+    );
+    this.reason = reason;
+  }
+}
 function escapeHtml(value) {
   let out = "";
   for (let i = 0; i < value.length; i++) {
@@ -1034,10 +1074,11 @@ const APARTE_DEFAULT_BUBBLE_ACTIONS = {
 };
 const APARTE_DEFAULT_HOST_HANDLERS = {
   attachmentPreview: false,
-  terminalRun: false,
   artifactRedownload: false,
   artifactRehydrate: false
 };
+const NOOP = () => {
+};
 class AparteConfig {
   _markdownProvider;
   _streamingMarkdownProvider;
@@ -1094,9 +1135,27 @@ class AparteConfig {
   _elicitationPresenter;
   /** Warn once per config, not once per request — a tool loop can ask repeatedly. */
   _warnedNoPresenter = false;
+  /**
+   * The tail of the queue of requests waiting for the human, or `null` when none is.
+   *
+   * One request reaches the presenter at a time — not because a presenter could not
+   * cope, but because the COMPOSER cannot: it has one panel slot, and a second
+   * request used to clobber the first's DOM. The previous protection lived in the
+   * default presenter, which answered the second request `cancel` on the spot; that
+   * is a refusal invented for a question nobody was ever shown, the same class of
+   * lie as telling the model a stopped turn was refused. WAITING is the honest
+   * behaviour.
+   *
+   * Here rather than in the presenter because this is the only place that sees
+   * EVERY request whatever raised it — a tool handler, an app's own button, and
+   * (soon) the tool-approval gate. A custom presenter registered by a consumer gets
+   * the same protection for free, which it previously had none of.
+   */
+  _elicitationQueue = null;
   // Tool Registry
   _tools = /* @__PURE__ */ new Map();
   _toolRenderers = /* @__PURE__ */ new Map();
+  _segmentDefaults = /* @__PURE__ */ new Map();
   // Host handlers — what the app declares it can actually complete.
   _hostHandlers = { ...APARTE_DEFAULT_HOST_HANDLERS };
   // Bubble Actions — APARTE_DEFAULT_BUBBLE_ACTIONS is the single source of truth
@@ -1177,7 +1236,6 @@ class AparteConfig {
   getHostHandlers() {
     return {
       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
     };
@@ -1799,11 +1857,49 @@ class AparteConfig {
    *
    * @example
    * // Custom pill for a web-search tool
-   * aparteGlobalConfig.registerToolRenderer('web_search', { render: (seg) => `<div class="tool-pill">Searching...</div>` });
+   * aparteGlobalConfig.registerToolRenderer('web_search', { render: (seg) => `<div class="aparte-tool-label">Searching...</div>` });
    */
   registerToolRenderer(toolName, renderer) {
     this._toolRenderers.set(toolName, renderer);
   }
+  /**
+   * Field defaults for a segment TYPE, filled in when a segment enters a message.
+   *
+   * One function for every type rather than one per field: a `setThinkingOpen()`
+   * would need a sibling the next time any type wanted a default, and the type key
+   * is a string, so a consumer's own segment type is covered by the same call.
+   *
+   * The problem it solves: a consumer streaming a reply does not CONSTRUCT its
+   * segments — the parser does — so there was no hook at all for "reasoning blocks
+   * open in my app". Per-segment fields only reach segments you build yourself.
+   *
+   * Applied where identity is stamped (`utils/segments.ts`), so it covers every
+   * path a segment can arrive by — the parser, `addSegment`, and the segments
+   * seeded on an `appendMessage` — and no renderer has to look anything up.
+   *
+   * A field the producer set always wins, and identity is never defaulted. Read at
+   * insertion and baked in: changing a default later does not reach segments already
+   * on screen, because a block the reader opened has state the data does not.
+   *
+   * @example
+   * // Reasoning blocks arrive open in this app, streaming or settled.
+   * aparteGlobalConfig.setSegmentDefaults('thinking', { collapsed: false });
+   *
+   * @example
+   * // A consumer's own type, same call.
+   * aparteGlobalConfig.setSegmentDefaults('my-chart', { theme: 'dark' });
+   */
+  setSegmentDefaults(type, defaults) {
+    this._segmentDefaults.set(type, { ...defaults });
+  }
+  /** The defaults registered for a type, or undefined. */
+  getSegmentDefaults(type) {
+    return this._segmentDefaults.get(type);
+  }
+  /** Drop the defaults for a type. */
+  clearSegmentDefaults(type) {
+    this._segmentDefaults.delete(type);
+  }
   /** Unregister a per-tool renderer */
   unregisterToolRenderer(toolName) {
     this._toolRenderers.delete(toolName);
@@ -1858,15 +1954,29 @@ class AparteConfig {
    * itself — nothing to register", which is how this failure mode was found.
    */
   requestUserInput(request) {
+    const previous = this._elicitationQueue;
+    const settled = previous === null ? this._present(request) : previous.then(
+      () => this._present(request),
+      () => this._present(request)
+    );
+    const mine = settled.then(NOOP, NOOP).then(() => {
+      if (this._elicitationQueue === mine) this._elicitationQueue = null;
+    });
+    this._elicitationQueue = mine;
+    return settled;
+  }
+  /** Hand ONE request to the presenter. Called only from the queue. */
+  _present(request) {
     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."
+          "[aparte] requestUserInput() was called with no elicitation presenter, so it rejected with an AbortError — nothing was ever shown to anybody. 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 Promise.reject(new AparteElicitationAbortError("no-presenter"));
     }
+    if (request.signal?.aborted) return Promise.reject(new AparteElicitationAbortError("aborted"));
     return this._elicitationPresenter(request);
   }
   /**
@@ -1888,11 +1998,13 @@ class AparteConfig {
     this._siblingNavRenderer = void 0;
     this._bubbleShellRenderer = void 0;
     this._iconProvider = void 0;
+    this._segmentDefaults.clear();
     this._avatarProvider = void 0;
     this._artifactPreviewBuilder = void 0;
     this._keyProvider = void 0;
     this._conversationManager = void 0;
     this._elicitationPresenter = void 0;
+    this._elicitationQueue = null;
     this._locale = APARTE_DEFAULT_LOCALE;
     this._actions = [];
     this._sanitizer = defaultSanitizer;
@@ -1983,6 +2095,16 @@ function runWithConfig(config, fn) {
 function contextConfig(el2) {
   return _renderConfig ?? resolveConfig(el2);
 }
+const APARTE_CONFIG_CHANGE = "aparte-config-change";
+function subscribeConfigChange(el2, handler) {
+  const listener = (e) => {
+    const detail = e.detail;
+    if (detail?.config && detail.config !== resolveConfig(el2)) return;
+    handler();
+  };
+  window.addEventListener(APARTE_CONFIG_CHANGE, listener);
+  return () => window.removeEventListener(APARTE_CONFIG_CHANGE, listener);
+}
 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>',
@@ -2033,9 +2155,9 @@ function highlightMarkdownFences(contentEl) {
 }
 const textRenderer = {
   type: "text",
-  render: (segment) => `<div class="segment segment-text" data-segment-id="${escapeHtml(segment.id)}"><div class="segment-content">${contextConfig().renderMarkdown(segment.content)}</div></div>`,
+  render: (segment) => `<div class="aparte-segment aparte-segment-text" data-segment-id="${escapeHtml(segment.id)}"><div class="aparte-segment-content">${contextConfig().renderMarkdown(segment.content)}</div></div>`,
   update: (el2, segment) => {
-    const contentEl = el2.querySelector(".segment-content");
+    const contentEl = el2.querySelector(".aparte-segment-content");
     if (!contentEl) return;
     writeStreamedMarkdown(
       el2,
@@ -2063,9 +2185,17 @@ const thinkingRenderer = {
    * 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>`,
+  render: (segment) => `<details class="aparte-segment aparte-segment-thinking" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed === false ? "open" : ""}><summary class="aparte-thinking-header"><span class="aparte-thinking-label">${escapeHtml(segment.label || contextConfig().t("thinking"))}</span><span class="aparte-thinking-toggle"></span></summary><div class="aparte-thinking-content">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
+  /**
+   * The default label is the only config-derived text here — and `segment.label`
+   * still wins, exactly as in `render`, because that string is the app's.
+   */
+  relabel: (el2, segment) => {
+    const label = el2.querySelector(".aparte-thinking-label");
+    if (label) label.textContent = segment.label || contextConfig().t("thinking");
+  },
   update: (el2, segment) => {
-    const contentEl = el2.querySelector(".thinking-content");
+    const contentEl = el2.querySelector(".aparte-thinking-content");
     if (!contentEl) return;
     const wasAtBottom = contentEl.scrollHeight - contentEl.scrollTop - contentEl.clientHeight <= THINKING_ANCHOR_SLACK;
     const streaming = segment.isStreaming !== false;
@@ -2075,56 +2205,106 @@ const thinkingRenderer = {
   },
   getStyles: () => ``
 };
+const HIGHLIGHT_DEBOUNCE_MS = 400;
+const MAX_THROTTLE_ENTRIES = 256;
+const _lastHighlightAt = /* @__PURE__ */ new Map();
+function markThrottle(map, id, at) {
+  map.delete(id);
+  if (map.size >= MAX_THROTTLE_ENTRIES) {
+    const oldest = map.keys().next().value;
+    if (oldest !== void 0) map.delete(oldest);
+  }
+  map.set(id, at);
+}
+function highlightedLen(pane) {
+  const n = Number(pane.dataset.aparteHlLen);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
+function streamHighlight(element, paneSelector, content, lang, segId) {
+  const pane = element.querySelector(paneSelector);
+  if (!pane) return;
+  const tail = pane.querySelector("[data-aparte-tail]");
+  const hlLen = highlightedLen(pane);
+  if (tail && hlLen <= content.length) {
+    tail.textContent = content.slice(hlLen);
+  } else {
+    delete pane.dataset.aparteHlLen;
+    const codeEl = pane.querySelector("code");
+    if (codeEl) codeEl.textContent = content;
+    else pane.innerHTML = `<pre><code class="language-${escapeHtml(lang || "text")}">${escapeHtml(content)}</code></pre>`;
+  }
+  const cut = content.lastIndexOf("\n") + 1;
+  if (cut <= hlLen) return;
+  const now = Date.now();
+  if (now - (_lastHighlightAt.get(segId) ?? 0) < HIGHLIGHT_DEBOUNCE_MS) return;
+  markThrottle(_lastHighlightAt, segId, now);
+  void contextConfig(element).highlightCode(content.slice(0, cut), lang).then((html) => {
+    const live = element.querySelector(paneSelector);
+    if (!live) return;
+    if (cut <= highlightedLen(live)) return;
+    live.innerHTML = html;
+    const codeEl = live.querySelector("code") ?? live;
+    const span = document.createElement("span");
+    span.dataset.aparteTail = "";
+    span.textContent = content.slice(cut);
+    codeEl.appendChild(span);
+    live.dataset.aparteHlLen = String(cut);
+  }).catch(() => {
+  });
+}
 const codeRenderer = {
   type: "code",
   render: (segment) => `
-        <div class="segment segment-code" data-segment-id="${escapeHtml(segment.id)}">
-            <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="${escapeAttr(contextConfig().t("copy"))}">
+        <div class="aparte-segment aparte-segment-code" data-segment-id="${escapeHtml(segment.id)}">
+            <div class="aparte-code-header">
+                ${segment.filename ? `<span class="aparte-code-filename">${escapeHtml(segment.filename)}</span>` : `<span class="aparte-code-header-filler"></span>`}
+                <span class="aparte-code-language">${escapeHtml(segment.language || "")}</span>
+                <button class="aparte-code-copy" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}">
                     ${contextConfig().getIcon("copy")}
                 </button>
             </div>
-            <div class="code-content-wrapper">
+            <div class="aparte-code-content-wrapper">
                 <pre><code class="language-${escapeHtml(segment.language || "text")}">${escapeHtml(segment.content)}</code></pre>
             </div>
         </div>
     `,
+  /** The copy button's icon and tooltip — nothing else here comes from config. */
+  relabel: (element) => {
+    const copyBtn = element.querySelector(".aparte-code-copy");
+    if (!copyBtn || copyBtn.dataset.copied) return;
+    copyBtn.setAttribute("title", contextConfig().t("copy"));
+    copyBtn.innerHTML = contextConfig().getIcon("copy");
+  },
   setup: (element, segment) => {
-    const wrapper = element.querySelector(".code-content-wrapper");
+    const wrapper = element.querySelector(".aparte-code-content-wrapper");
     if (wrapper) {
       void contextConfig().highlightCode(segment.content, segment.language || "").then((html) => {
         wrapper.innerHTML = html;
       }).catch(() => {
       });
     }
-    const copyBtn = element.querySelector(".code-copy");
+    const copyBtn = element.querySelector(".aparte-code-copy");
     if (copyBtn) {
       copyBtn.addEventListener("click", () => {
-        const source = element.querySelector(".code-content-wrapper")?.textContent ?? "";
+        const source = element.querySelector(".aparte-code-content-wrapper")?.textContent ?? "";
         void navigator.clipboard.writeText(source).catch(() => {
         });
         copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
         copyBtn.setAttribute("title", contextConfig(copyBtn).t("copied"));
+        copyBtn.dataset.copied = "1";
         setTimeout(() => {
           copyBtn.innerHTML = contextConfig(copyBtn).getIcon("copy");
           copyBtn.setAttribute("title", contextConfig(copyBtn).t("copy"));
+          delete copyBtn.dataset.copied;
         }, 1500);
       });
     }
   },
   update: (element, segment) => {
     if (segment.isStreaming) {
-      const codeEl = element.querySelector(".code-content-wrapper code");
-      if (codeEl) {
-        codeEl.textContent = segment.content;
-      } else {
-        const wrapper = element.querySelector(".code-content-wrapper");
-        if (wrapper) wrapper.innerHTML = `<pre><code class="language-${escapeHtml(segment.language || "text")}">${escapeHtml(segment.content)}</code></pre>`;
-      }
+      streamHighlight(element, ".aparte-code-content-wrapper", segment.content, segment.language || "", segment.id);
     } else {
-      const wrapper = element.querySelector(".code-content-wrapper");
+      const wrapper = element.querySelector(".aparte-code-content-wrapper");
       if (wrapper) {
         void contextConfig().highlightCode(segment.content, segment.language || "").then((html) => {
           wrapper.innerHTML = html;
@@ -2135,58 +2315,6 @@ const codeRenderer = {
   },
   getStyles: () => ``
 };
-const terminalRenderer = {
-  type: "terminal",
-  render: (segment) => `
-        <div class="segment segment-terminal" data-segment-id="${escapeHtml(segment.id)}">
-            <div class="terminal-command-block">
-                <div class="terminal-icon">
-                    ${contextConfig().getIcon("terminal")}
-                </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="${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>
-            </div>
-            ${segment.output ? `<div class="terminal-output">${escapeHtml(segment.output)}</div>` : ""}
-            ${segment.exitCode !== void 0 && segment.exitCode !== 0 ? `<div class="terminal-error">Command failed with exit code ${segment.exitCode}</div>` : ""}
-        </div>
-    `,
-  setup: (element, segment) => {
-    const copyBtn = element.querySelector(".terminal-copy-btn");
-    const command = element.querySelector(".terminal-command");
-    if (copyBtn && command) {
-      copyBtn.addEventListener("click", () => {
-        void navigator.clipboard.writeText(command.textContent || "").catch(() => {
-        });
-        copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
-        copyBtn.setAttribute("title", contextConfig(copyBtn).t("copied"));
-        setTimeout(() => {
-          copyBtn.innerHTML = contextConfig(copyBtn).getIcon("copy");
-          copyBtn.setAttribute("title", contextConfig(copyBtn).t("copy"));
-        }, 1500);
-      });
-    }
-    const runBtn = element.querySelector(".terminal-run-btn");
-    if (runBtn) {
-      runBtn.addEventListener("click", () => {
-        element.dispatchEvent(new CustomEvent("aparte-terminal-run", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            segmentId: segment.id,
-            messageId: segment.messageId,
-            command: command?.textContent || ""
-          }
-        }));
-      });
-    }
-  },
-  getStyles: () => ``
-};
 const errorRenderer = {
   type: "error",
   render: (segment) => {
@@ -2200,173 +2328,239 @@ const errorRenderer = {
       return out;
     }
     return `
-        <div class="segment segment-error" data-segment-id="${escapeHtml(segment.id)}">
-            <div class="error-icon-wrapper">
+        <div class="aparte-segment aparte-segment-error" data-segment-id="${escapeHtml(segment.id)}">
+            <div class="aparte-error-icon-wrapper">
                 ${contextConfig().getIcon("error") || "⚠"}
             </div>
-            <div class="error-content">
-                <div class="error-title">Error</div>
-                <div class="error-message">${escapeHtml(segment.content)}</div>
-                ${segment.details ? `<div class="error-details">${escapeHtml(segment.details)}</div>` : ""}
+            <div class="aparte-error-content">
+                <div class="aparte-error-title">${escapeHtml(contextConfig().t("error"))}</div>
+                <div class="aparte-error-message">${escapeHtml(segment.content)}</div>
+                ${segment.details ? `<div class="aparte-error-details">${escapeHtml(segment.details)}</div>` : ""}
             </div>
         </div>
     `;
   },
-  getStyles: () => ``
-};
-const progressRenderer = {
-  type: "progress",
-  render: (segment) => {
-    const label = escapeHtml(segment.label || "Progress");
-    const pct = Math.round(segment.percent || 0);
-    return `<div class="segment segment-progress" data-segment-id="${escapeHtml(segment.id)}"><div class="progress-header"><span class="progress-label">${label}</span><span class="progress-value">${pct}%</span></div><div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${pct}" aria-label="${label}"><div class="progress-fill" style="width: ${pct}%"></div></div></div>`;
+  /**
+   * The icon and the heading. The heading used to be the hardcoded literal `Error`
+   * while `locale.error` — a REQUIRED key, documented, and already translated to
+   * "Erreur" — was read by nothing at all. A translated string with no consumer and
+   * a literal with no translation, in the same card.
+   *
+   * Not the message: that is the model's or the transport's text, in whatever
+   * language it arrived in. Relabelling it would be inventing content.
+   */
+  relabel: (element) => {
+    const wrap = element.querySelector(".aparte-error-icon-wrapper");
+    if (wrap) wrap.innerHTML = contextConfig().getIcon("error") || "⚠";
+    const title = element.querySelector(".aparte-error-title");
+    if (title) title.textContent = contextConfig().t("error");
   },
   getStyles: () => ``
 };
-function renderFileNode(node, depth = 0) {
-  const indent = depth * 16;
-  const icon = node.type === "directory" ? "📁" : "📄";
-  const statusClass = node.status ? `file-status-${escapeHtml(node.status)}` : "";
-  let html = `<div class="file-node ${statusClass}" style="padding-left: ${indent}px"><span class="file-icon">${icon}</span><span class="file-name">${escapeHtml(node.name)}</span></div>`;
-  if (node.children) {
-    for (const child of node.children) {
-      html += renderFileNode(child, depth + 1);
-    }
+function describeInput(segment) {
+  const input = segment.toolCall?.input;
+  if (!input || typeof input !== "object" || Object.keys(input).length === 0) return "";
+  try {
+    return JSON.stringify(input, null, 2);
+  } catch {
+    return "";
   }
-  return html;
 }
-const fileTreeRenderer = {
-  type: "file-tree",
-  render: (segment) => {
-    let filesHtml = "";
-    if (segment.files) {
-      for (const file of segment.files) {
-        filesHtml += renderFileNode(file, 0);
-      }
-    }
-    return `<div class="segment segment-file-tree" data-segment-id="${escapeHtml(segment.id)}">${segment.title ? `<div class="file-tree-title">${escapeHtml(segment.title)}</div>` : ""}<div class="file-tree-content">${filesHtml}</div></div>`;
-  },
-  getStyles: () => ``
-};
+function stateBadge(segment) {
+  const cfg = contextConfig();
+  const status = segment.status ?? "pending";
+  const word = (key) => escapeHtml(cfg.t(key));
+  if (status === "awaiting-approval") return word("approvalWaiting");
+  if (status === "pending") return word("toolRunning");
+  if (status === "resolved") return `${cfg.getIcon("check")}${word("toolCompleted")}`;
+  if (status === "rejected") return `${cfg.getIcon("close")}${word("toolRejected")}`;
+  if (status === "aborted") return `${cfg.getIcon("close")}${word("toolStopped")}`;
+  return "";
+}
+function setPart(element, part, text) {
+  const existing = element.querySelector(`[data-part="${part}"]`);
+  if (!text) {
+    existing?.remove();
+    return;
+  }
+  if (existing) {
+    const code2 = existing.querySelector("code");
+    if (code2 && code2.textContent !== text) code2.textContent = text;
+    return;
+  }
+  const detail = element.querySelector(".aparte-tool-detail");
+  if (!detail) return;
+  const cfg = contextConfig();
+  const wrap = document.createElement("div");
+  wrap.className = "aparte-tool-part";
+  wrap.dataset["part"] = part;
+  const label = document.createElement("span");
+  label.className = "aparte-tool-part-label";
+  label.textContent = cfg.t(part === "input" ? "toolInput" : "toolOutput");
+  const body = document.createElement("div");
+  body.className = "aparte-tool-part-body";
+  const pre = document.createElement("pre");
+  const code = document.createElement("code");
+  code.textContent = text;
+  pre.appendChild(code);
+  body.appendChild(pre);
+  wrap.append(label, body);
+  if (part === "input") detail.prepend(wrap);
+  else detail.appendChild(wrap);
+}
+function highlightParts(element) {
+  const cfg = contextConfig();
+  for (const body of element.querySelectorAll(".aparte-tool-part-body")) {
+    const text = body.querySelector("code")?.textContent ?? "";
+    if (!text) continue;
+    void cfg.highlightCode(text, "json").then((html) => {
+      if ((body.querySelector("code")?.textContent ?? "") !== text) return;
+      body.innerHTML = html;
+    }).catch(() => {
+    });
+  }
+}
+function pillMarkup(segment, name, status) {
+  const badge = stateBadge(segment);
+  return `
+                <span class="aparte-tool-label">
+                    <span class="aparte-tool-icon">${contextConfig().getIcon("tool")}</span>
+                    <span class="aparte-tool-name">${escapeHtml(name)}</span>
+                </span>
+                <span class="aparte-tool-spinner" aria-hidden="true"${status === "pending" ? "" : " hidden"}></span>
+                <span class="aparte-tool-state">${badge}</span>`;
+}
 const toolCallRenderer = {
   type: "tool_call",
   render: (segment) => {
     const name = segment.toolCall?.name ?? "tool";
     const status = segment.status ?? "pending";
     const toolCallId = segment.toolCall?.id ?? "";
-    if (status === "awaiting-approval") {
-      const loc = contextConfig().getLocale();
-      const approve = loc.approveTool ?? "Approve";
-      const reject = loc.rejectTool ?? "Reject";
-      return `
-            <div class="segment segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="awaiting-approval" data-tool-call-id="${escapeAttr(toolCallId)}">
-                <span class="tool-pill">
-                    <span class="tool-pill-icon">${contextConfig().getIcon("tool")}</span>
-                    <span class="tool-pill-name">${escapeHtml(name)}</span>
-                </span>
-                <span class="tool-approval" role="group" aria-label="${escapeAttr(name)}">
-                    <button type="button" class="tool-approve-btn" data-tool-decision="approve" aria-label="${escapeAttr(approve)}">${escapeHtml(approve)}</button>
-                    <button type="button" class="tool-reject-btn" data-tool-decision="reject" aria-label="${escapeAttr(reject)}">${escapeHtml(reject)}</button>
-                </span>
-            </div>
-            `;
-    }
     const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
     if (customRenderer) {
       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="${escapeAttr(status)}">
-                <span class="tool-pill">
-                    <span class="tool-pill-icon">${contextConfig().getIcon("tool")}</span>
-                    <span class="tool-pill-name">${escapeHtml(name)}</span>
-                    ${spinner}
-                    ${statusIcon ? `<span class="tool-pill-status">${statusIcon}</span>` : ""}
-                </span>
+    const pill = pillMarkup(segment, name, status);
+    const input = describeInput(segment);
+    const result = segment.result;
+    if (!input && !result) {
+      return `
+            <div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}">${pill}
             </div>
         `;
+    }
+    const cfg = contextConfig();
+    return `
+            <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}">
+                <summary class="aparte-tool-summary"><span class="aparte-tool-toggle"></span>${pill}</summary>
+                <div class="aparte-tool-detail">
+                    ${input ? `
+                    <div class="aparte-tool-part" data-part="input">
+                        <span class="aparte-tool-part-label">${escapeHtml(cfg.t("toolInput"))}</span>
+                        <div class="aparte-tool-part-body"><pre><code>${escapeHtml(input)}</code></pre></div>
+                    </div>` : ""}
+                    ${result ? `
+                    <div class="aparte-tool-part" data-part="output">
+                        <span class="aparte-tool-part-label">${escapeHtml(cfg.t("toolOutput"))}</span>
+                        <div class="aparte-tool-part-body"><pre><code>${escapeHtml(result)}</code></pre></div>
+                    </div>` : ""}
+                </div>
+            </details>
+        `;
   },
-  setup: (element, segment) => {
-    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, 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));
+  /**
+   * The pill's glyphs, and the label it wears while a person is deciding.
+   *
+   * The two highest-stakes strings in the library — the approval labels — are no
+   * longer here: they are on the panel, which relabels itself. This still matters
+   * though, because the request the pill describes stays open for as long as
+   * somebody takes to decide, which is exactly long enough for a language switch.
+   *
+   * No child node is added or removed, per the relabel contract.
+   */
+  relabel: (element, segment) => {
+    const cfg = contextConfig();
+    const icon = element.querySelector(".aparte-tool-icon");
+    if (icon) icon.innerHTML = cfg.getIcon("tool");
+    const statusEl = element.querySelector(".aparte-tool-state");
+    if (statusEl) {
+      const s = segment.status;
+      statusEl.innerHTML = s === "resolved" ? cfg.getIcon("check") : s === "aborted" || s === "rejected" ? cfg.getIcon("close") : "";
+    }
+    if (statusEl && segment.status === "awaiting-approval") {
+      statusEl.textContent = cfg.t("approvalWaiting");
+    }
+  },
+  /**
+   * Patch in place. NEVER re-render, and never touch `open`.
+   *
+   * Without an `update` the bubble replaces the element wholesale — and a tool call
+   * changes status several times per turn, so a disclosure the reader opened would
+   * slam shut under them every time. The same rule the reasoning block has, for the
+   * same reason: `collapsed` is honoured only when an update explicitly carries it.
+   *
+   * The one case that cannot be patched is a change of ELEMENT: a call that had
+   * neither arguments nor a result rendered as a plain pill, and gaining a result
+   * makes it a `<details>`. That falls back to a rebuild, which costs nothing because
+   * there was no disclosure to lose.
+   */
+  update: (element, segment) => {
+    const status = segment.status ?? "pending";
+    const input = describeInput(segment);
+    const wantsDetail = !!input || !!segment.result;
+    const custom = contextConfig().getToolRenderer(segment.toolCall?.name);
+    if (custom || wantsDetail !== (element.tagName === "DETAILS")) {
+      const out = toolCallRenderer.render(segment);
+      const tpl = document.createElement("template");
+      tpl.innerHTML = typeof out === "string" ? out.trim() : "";
+      const rebuilt = typeof out === "string" ? tpl.content.firstElementChild : out;
+      if (rebuilt) {
+        element.replaceWith(rebuilt);
+        toolCallRenderer.setup?.(rebuilt, segment);
+      }
       return;
     }
+    element.setAttribute("data-status", status);
+    const badge = element.querySelector(".aparte-tool-state");
+    if (badge) badge.innerHTML = stateBadge(segment);
+    element.querySelector(".aparte-tool-spinner")?.toggleAttribute("hidden", status !== "pending");
+    setPart(element, "input", input);
+    setPart(element, "output", segment.result ?? "");
+    highlightParts(element);
+  },
+  setup: (element, segment) => {
+    highlightParts(element);
     const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
     customRenderer?.setup?.(element, segment);
   },
-  getStyles: () => `
-        .segment-tool-call { display: flex; padding: 2px 0; }
-        .tool-pill {
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
-            padding: 3px 10px 3px 7px;
-            border-radius: 99px;
-            font-size: 0.78rem;
-            font-weight: 500;
-            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
-            background: var(--aparte-surface, #f8f8f8);
-            color: var(--aparte-text-secondary, rgba(0,0,0,0.55));
-            user-select: none;
-        }
-        [data-status="resolved"] .tool-pill {
-            border-color: var(--aparte-success-border, rgba(34,197,94,0.3));
-            background: var(--aparte-success-surface, rgba(34,197,94,0.06));
-            color: var(--aparte-success, rgb(21,128,61));
-        }
-        [data-status="aborted"] .tool-pill,
-        [data-status="rejected"] .tool-pill {
-            border-color: var(--aparte-error-border, rgba(239,68,68,0.3));
-            background: var(--aparte-error-surface, rgba(239,68,68,0.06));
-            color: var(--aparte-error, rgb(185,28,28));
-        }
-        .tool-approval { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
-        .tool-approve-btn, .tool-reject-btn {
-            font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1;
-            padding: 4px 12px; border-radius: 99px; cursor: pointer;
-            border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
-            background: var(--aparte-surface, #f8f8f8);
-        }
-        .tool-approve-btn { color: var(--aparte-success, rgb(21,128,61)); border-color: var(--aparte-success-border, rgba(34,197,94,0.4)); }
-        .tool-reject-btn { color: var(--aparte-error, rgb(185,28,28)); border-color: var(--aparte-error-border, rgba(239,68,68,0.4)); }
-        .tool-approve-btn:hover { background: var(--aparte-success-surface, rgba(34,197,94,0.1)); }
-        .tool-reject-btn:hover { background: var(--aparte-error-surface, rgba(239,68,68,0.1)); }
-        .tool-pill-spinner {
-            width: 10px; height: 10px;
-            border: 1.5px solid currentColor;
-            border-top-color: transparent;
-            border-radius: 50%;
-            display: inline-block;
-            animation: tool-spin 0.7s linear infinite;
-        }
-        .tool-pill-status { font-size: 0.75rem; }
-        @keyframes tool-spin { to { transform: rotate(360deg); } }
-    `
+  // CSS lives in styles/aparte.css — see its "Segment renderers" section for why a
+  // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
+  // has no other way onto the page.
+  getStyles: () => ""
 };
+const waitingLabel = () => contextConfig().t("generating");
 const pipelineWaitingRenderer = {
   type: "pipeline-waiting",
   render: (segment) => {
     return `
-        <div class="segment segment-pipeline-waiting" data-segment-id="${escapeHtml(segment.id)}" aria-label="Generating…" role="status">
-            <span class="pw-dot"></span>
-            <span class="pw-dot"></span>
-            <span class="pw-dot"></span>
+        <div class="aparte-segment aparte-segment-pipeline-waiting" data-segment-id="${escapeHtml(segment.id)}" aria-label="${escapeAttr(waitingLabel())}" role="status">
+            <span class="aparte-pw-dot"></span>
+            <span class="aparte-pw-dot"></span>
+            <span class="aparte-pw-dot"></span>
         </div>`;
   },
   update: () => {
   },
+  /**
+   * Three dots and an accessible name. The dots are CSS; the name is the whole
+   * content as far as a screen reader is concerned, and it was hardcoded English in
+   * every locale — the one string in this library where being untranslated is
+   * invisible to everyone who can see the screen.
+   */
+  relabel: (element) => {
+    element.setAttribute("aria-label", waitingLabel());
+  },
   setup: (el2) => {
     const parent = el2.parentElement;
     if (!parent) return;
@@ -2378,30 +2572,10 @@ const pipelineWaitingRenderer = {
     });
     observer.observe(parent, { childList: true });
   },
-  getStyles: () => `
-        .segment-pipeline-waiting {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            padding: 6px 2px;
-            min-height: 28px;
-        }
-        .pw-dot {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--aparte-text-muted, #6b7280);
-            opacity: 0.3;
-            animation: pw-pulse 1.2s ease-in-out infinite;
-        }
-        .pw-dot:nth-child(2) { animation-delay: 0.2s; }
-        .pw-dot:nth-child(3) { animation-delay: 0.4s; }
-        @keyframes pw-pulse {
-            0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
-            40%            { opacity: 1;   transform: scale(1.1);  }
-        }
-    `
+  // CSS lives in styles/aparte.css — see its "Segment renderers" section for why a
+  // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
+  // has no other way onto the page.
+  getStyles: () => ""
 };
 function stripCodeFences(content) {
   let s = content;
@@ -2451,26 +2625,6 @@ function findClosingFence(s) {
   }
   return -1;
 }
-const _lastHighlightAt = /* @__PURE__ */ new Map();
-function markThrottle(map, id, at) {
-  map.delete(id);
-  if (map.size >= MAX_THROTTLE_ENTRIES) {
-    const oldest = map.keys().next().value;
-    if (oldest !== void 0) map.delete(oldest);
-  }
-  map.set(id, at);
-}
-function debounceHighlight(element, paneSelector, content, lang, segId) {
-  const now = Date.now();
-  const last = _lastHighlightAt.get(segId) ?? 0;
-  if (now - last < HIGHLIGHT_DEBOUNCE_MS) return;
-  markThrottle(_lastHighlightAt, segId, now);
-  void contextConfig(element).highlightCode(content, lang).then((html) => {
-    const wrapper = element.querySelector(paneSelector);
-    if (wrapper) wrapper.innerHTML = html;
-  }).catch(() => {
-  });
-}
 function labelForKind(kind) {
   switch (kind) {
     case "react":
@@ -2509,8 +2663,6 @@ function labelForKind(kind) {
       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)}">`;
@@ -2527,9 +2679,18 @@ function buildPreviewBody(kind, body, title) {
       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>`;
     }
+    // An SVG with only a `viewBox` — the recommended, responsive form, and the one
+    // a model writes most often — has NO intrinsic size. As a flex item its cross
+    // size then collapses to zero and the frame is blank: the preview worked for an
+    // SVG that declared `width`/`height` and silently showed nothing for the
+    // idiomatic one. Reported from the landing the moment its demo payload became a
+    // real file instead of a hand-written chart with dimensions on it.
+    //
+    // The rule is narrowed by attribute selector rather than applied to every SVG,
+    // so an SVG that DOES state its size keeps the size it asked for.
     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>
+<style>html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fff}svg{max-width:90%;max-height:90%}svg:not([width]):not([height]){width:90%;height:90%}</style>
 </head><body>${body}</body></html>`;
     case "js": {
       const safeBody = escapeClosingScriptTag(body);
@@ -2612,11 +2773,12 @@ function renderBinaryFileArtifact(segment, kind) {
   const iconLabel = FILE_ICON_LABEL[kind] ?? kind.toUpperCase();
   const isStreaming = !!segment.isStreaming;
   const canRedownload = contextConfig().getHostHandlers().artifactRedownload;
+  const downloadLabel = escapeHtml(contextConfig().t("download"));
   const cached = _binaryArtifactCache.get(segment.id);
   if (cached && !isStreaming) {
     const previewBody = cached.previewHtml ? contextConfig().sanitizeHtml(cached.previewHtml) : `<div class="aparte-art-file__preview-empty">Preview not available for ${escapeHtml(kind)} yet</div>`;
     return `
-            <div class="segment segment-artifact-file"
+            <div class="aparte-segment aparte-segment-artifact-file"
                  data-segment-id="${escapeHtml(segment.id)}"
                  data-artifact-type="${escapeHtml(kind)}"
                  data-state="ready">
@@ -2627,7 +2789,7 @@ function renderBinaryFileArtifact(segment, kind) {
                         <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(formatBytes(cached.bytes))} · ${escapeHtml(kind.toUpperCase())}</div>
                     </div>
                     <div class="aparte-art-file__actions">
-                        ${canRedownload ? '<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download">Download</button>' : ""}
+                        ${canRedownload ? `<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download">${downloadLabel}</button>` : ""}
                     </div>
                 </div>
                 <div class="aparte-art-file__body">
@@ -2640,9 +2802,9 @@ function renderBinaryFileArtifact(segment, kind) {
         `;
   }
   const cleanContent = stripCodeFences(segment.content || "");
-  const subText = isStreaming ? "Generating…" : "Rebuilding preview…";
+  const subText = isStreaming ? contextConfig().t("generating") : contextConfig().t("rebuildingPreview");
   return `
-        <div class="segment segment-artifact-file"
+        <div class="aparte-segment aparte-segment-artifact-file"
              data-segment-id="${escapeHtml(segment.id)}"
              data-artifact-type="${escapeHtml(kind)}"
              data-state="${isStreaming ? "streaming" : "compiling"}">
@@ -2653,7 +2815,7 @@ function renderBinaryFileArtifact(segment, kind) {
                     <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(subText)}</div>
                 </div>
                 <div class="aparte-art-file__actions">
-                    ${canRedownload ? '<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download" disabled>Download</button>' : ""}
+                    ${canRedownload ? `<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download" disabled>${downloadLabel}</button>` : ""}
                 </div>
             </div>
             <div class="aparte-art-file__body">
@@ -2759,12 +2921,11 @@ function updateBinaryFileArtifact(element, segment, isStreaming) {
   const state = element.getAttribute("data-state");
   if (state === "ready") return;
   const cleanContent = stripCodeFences(segment.content || "");
-  const codeEl = element.querySelector('[data-role="code-pane"] code');
-  if (codeEl) {
-    codeEl.textContent = cleanContent;
-  }
   if (isStreaming) {
-    debounceHighlight(element, '[data-role="code-pane"]', cleanContent, "js", segment.id);
+    streamHighlight(element, '[data-role="code-pane"]', cleanContent, "js", segment.id);
+  } else {
+    const codeEl = element.querySelector('[data-role="code-pane"] code');
+    if (codeEl) codeEl.textContent = cleanContent;
   }
   if (!isStreaming && state === "streaming") {
     element.setAttribute("data-state", "compiling");
@@ -2811,9 +2972,9 @@ function showSandboxError(element, phase, errorMsg) {
     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-title">${escapeHtml(contextConfig().t("sandboxError"))}</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 class="aparte-art-file__error-hint">${escapeHtml(contextConfig().t("sandboxErrorHint"))}</div>
             </div>
         `;
   }
@@ -2831,10 +2992,14 @@ const artifactRenderer = {
     const displayLang = languageForKind(kind);
     const isStreaming = !!segment.isStreaming;
     const previewable = PREVIEWABLE_KINDS.has(kind);
+    const cfg = contextConfig();
+    const downloadLabel = cfg.t("download");
+    const previewLabel = cfg.t("preview");
+    const codeLabel = cfg.t("code");
     const isBinary = BINARY_FILE_KINDS.has(kind);
     const cleanContent = stripCodeFences(segment.content || "");
     return `
-            <div class="segment segment-artifact-card"
+            <div class="aparte-segment aparte-segment-artifact-card"
                  data-segment-id="${escapeHtml(segment.id)}"
                  data-artifact-type="${escapeHtml(kind)}"
                  data-streaming="${isStreaming ? "true" : "false"}"
@@ -2848,33 +3013,64 @@ const artifactRenderer = {
                         ${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">
+                        <button type="button" class="aparte-art-card__btn" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}" aria-label="${escapeAttr(contextConfig().t("copy"))}">
                             ${contextConfig().getIcon("copy")}
                         </button>
-                        <button type="button" class="aparte-art-card__btn" data-action="download" title="Download" aria-label="Download" ${isStreaming ? "disabled" : ""}>
+                        <button type="button" class="aparte-art-card__btn" data-action="download" title="${escapeAttr(downloadLabel)}" aria-label="${escapeAttr(downloadLabel)}" ${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>
+                    <button type="button" role="tab" data-tab-target="code" aria-selected="true">${escapeHtml(codeLabel)}</button>
+                    ${previewable ? `<button type="button" role="tab" data-tab-target="preview" aria-selected="false" ${isStreaming ? "disabled" : ""}>${escapeHtml(previewLabel)}</button>` : ""}
                 </nav>
                 <div class="aparte-art-card__body">
                     <div class="aparte-art-card__pane" data-pane="code">
-                        <div class="code-content-wrapper">
+                        <div class="aparte-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 class="aparte-art-card__pending">${escapeHtml(cfg.t("previewPending"))}</div>
                         </div>
                     ` : ""}
                 </div>
             </div>
         `;
   },
+  /**
+   * Every string this card shows: the copy button's tooltip, glyph and accessible
+   * name, the download button's title and label, and the two tab names. They were
+   * all hardcoded literals until they got locale keys — including the copy button's
+   * `aria-label`, which said "Copy" while its own `title` one attribute away already
+   * went through `t('copy')`, so a French reader got a French tooltip and an English
+   * announcement.
+   *
+   * Nothing here touches the tab state or the preview pane: a mounted iframe is
+   * running model-authored code, and re-rendering this card is exactly what the
+   * hook exists to avoid.
+   */
+  relabel: (element) => {
+    const cfg = contextConfig();
+    const copyBtn = element.querySelector('.aparte-art-card__btn[data-action="copy"]');
+    if (copyBtn) {
+      copyBtn.setAttribute("title", cfg.t("copy"));
+      copyBtn.setAttribute("aria-label", cfg.t("copy"));
+      copyBtn.innerHTML = cfg.getIcon("copy");
+    }
+    const dl = element.querySelector('.aparte-art-card__btn[data-action="download"]');
+    if (dl) {
+      const label = cfg.t("download");
+      dl.setAttribute("title", label);
+      dl.setAttribute("aria-label", label);
+    }
+    const previewTab = element.querySelector('[data-tab-target="preview"]');
+    if (previewTab) previewTab.textContent = cfg.t("preview");
+    const codeTab = element.querySelector('[data-tab-target="code"]');
+    if (codeTab) codeTab.textContent = cfg.t("code");
+  },
   setup: (element, segment) => {
     latestSegment.set(element, segment);
     const kind = (segment.artifactType || "").toLowerCase();
@@ -2882,7 +3078,7 @@ const artifactRenderer = {
       setupBinaryFileArtifact(element, segment, kind);
       return;
     }
-    const wrapper = element.querySelector(".code-content-wrapper");
+    const wrapper = element.querySelector(".aparte-code-content-wrapper");
     if (wrapper) {
       const displayLang = languageForKind(kind);
       const cleanContent = stripCodeFences(segment.content || "");
@@ -2955,23 +3151,25 @@ const artifactRenderer = {
     }
     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);
+      streamHighlight(element, ".aparte-code-content-wrapper", cleanContent, languageForKind(kind), segId);
+    } else {
+      const codeEl = element.querySelector(".aparte-code-content-wrapper code");
+      if (codeEl) {
+        codeEl.textContent = cleanContent;
+      } else {
+        const wrapper = element.querySelector(".aparte-code-content-wrapper");
+        if (wrapper) {
+          const displayLang = languageForKind(kind);
+          wrapper.innerHTML = `<pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>`;
+        }
+      }
     }
     if (wasStreaming && !isStreaming) {
       element.setAttribute("data-streaming", "false");
-      const wrapper = element.querySelector(".code-content-wrapper");
+      element.querySelector(".aparte-art-card__pulse")?.remove();
+      const wrapper = element.querySelector(".aparte-code-content-wrapper");
       if (wrapper) {
         const displayLang = languageForKind(kind);
         void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
@@ -2984,258 +3182,10 @@ const artifactRenderer = {
       });
     }
   },
-  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;
-        }
-    `
+  // CSS lives in styles/aparte.css — see its "Segment renderers" section for why a
+  // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
+  // has no other way onto the page.
+  getStyles: () => ""
 };
 function languageForKind(kind) {
   if (kind === "react") return "jsx";
@@ -3385,10 +3335,7 @@ const DEFAULT_RENDERERS = [
   textRenderer,
   thinkingRenderer,
   codeRenderer,
-  terminalRenderer,
   errorRenderer,
-  progressRenderer,
-  fileTreeRenderer,
   toolCallRenderer,
   artifactRenderer,
   pipelineWaitingRenderer
@@ -3398,14 +3345,48 @@ const ACTIVITY_KEYS = ["content", "output", "result"];
 function isActivity(updates) {
   return ACTIVITY_KEYS.some((key) => key in updates);
 }
-function stampSegmentOnInsert(segments, segment, messageId) {
+function stampSegmentOnInsert(segments, segment, messageId, defaults) {
+  const base = applyDefaults(segment, defaults);
   return {
-    ...segment,
+    ...base,
     messageId: segment.messageId ?? messageId,
     index: segment.index ?? segments.length,
-    startedAt: segment.startedAt ?? Date.now()
+    // A start already present is kept — a segment a consumer rebuilt from their own
+    // storage keeps the number it was persisted with. `adoptSegment` is the path
+    // that never writes one at all.
+    ...timingPatch(base, { startedAt: segmentTiming(segment)?.startedAt ?? Date.now() })
+  };
+}
+function adoptSegment(segments, segment, messageId) {
+  return {
+    ...segment,
+    messageId,
+    index: segments.length,
+    isStreaming: false,
+    ...segment.type === "tool_call" && segment.status === "awaiting-approval" ? { status: "aborted" } : {}
   };
 }
+const RESERVED = /* @__PURE__ */ new Set(["id", "type", "messageId", "index"]);
+function segmentTiming(segment) {
+  return segment.meta?.aparte;
+}
+function timingPatch(segment, timing) {
+  return { meta: { ...segment.meta, aparte: { ...segment.meta?.aparte, ...timing } } };
+}
+function applyDefaults(segment, defaults) {
+  if (!defaults) return segment;
+  const out = { ...segment };
+  for (const [key, value] of Object.entries(defaults)) {
+    if (RESERVED.has(key) || key in segment) continue;
+    if (key === "meta") {
+      const { aparte: _forged, ...rest } = value ?? {};
+      out.meta = rest;
+      continue;
+    }
+    out[key] = value;
+  }
+  return out;
+}
 function isSegmentSettled(segment) {
   if (segment.type === "tool_call") return !OPEN_TOOL_STATUSES.has(segment.status);
   return segment.isStreaming === false;
@@ -3414,17 +3395,32 @@ function stampSegmentOnUpdate(segment, updates) {
   if (isSegmentSettled(segment)) return updates;
   const merged = { ...segment, ...updates };
   if (isSegmentSettled(merged)) {
-    return { ...updates, endedAt: segment.endedAt ?? Date.now() };
+    const ended = segmentTiming(segment)?.endedAt;
+    return { ...updates, ...timingPatch(segment, { endedAt: ended ?? Date.now() }) };
   }
-  return isActivity(updates) ? { ...updates, endedAt: Date.now() } : updates;
+  return isActivity(updates) ? { ...updates, ...timingPatch(segment, { endedAt: Date.now() }) } : updates;
+}
+function mergeSegmentUpdate(segment, updates) {
+  const merged = { ...segment, ...updates };
+  if (!("meta" in updates)) return merged;
+  return {
+    ...merged,
+    meta: {
+      ...segment.meta,
+      ...updates.meta,
+      // Neither side's timing wins by accident: whichever one carries it, wins,
+      // and a consumer writing `meta` without an `aparte` key keeps ours.
+      ...segment.meta?.aparte || updates.meta?.aparte ? { aparte: { ...segment.meta?.aparte, ...updates.meta?.aparte } } : {}
+    }
+  };
 }
 function segmentDuration(segment) {
-  const { startedAt, endedAt } = segment;
+  const { startedAt, endedAt } = segmentTiming(segment) ?? {};
   if (startedAt == null || endedAt == null) return void 0;
   return endedAt - startedAt;
 }
 function stampSegmentActivity(segment) {
-  return isSegmentSettled(segment) ? {} : { endedAt: Date.now() };
+  return isSegmentSettled(segment) ? {} : timingPatch(segment, { endedAt: Date.now() });
 }
 function segmentContentUpdate(segment) {
   const content = segment.content;
@@ -3439,6 +3435,16 @@ function isTerminalStatus(status) {
 function openSegmentIds(segments) {
   return segments.filter((segment) => !isSegmentSettled(segment)).map((segment) => segment.id);
 }
+function adoptMessageSegments(message) {
+  if (!message.segments?.length) return { ...message };
+  return {
+    ...message,
+    segments: message.segments.reduce((acc, segment) => {
+      acc.push(adoptSegment(acc, segment, message.id));
+      return acc;
+    }, [])
+  };
+}
 function renumberSegments(segments) {
   for (let i = 0; i < segments.length; i++) {
     const segment = segments[i];
@@ -4139,10 +4145,14 @@ class AparteChatHost {
       // 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.
+      // Adopted here rather than passed through: this is the conversation
+      // controller handing back a stored list, and it goes STRAIGHT to the
+      // framework's own reactive setter — so in every wrapper it never met the
+      // stamping seam at all, tree or no tree.
       setMessages: (msgs) => {
         this._beginConversationSwap();
         this._vp()?.resetSpacer?.();
-        this.binding.setMessages([...msgs]);
+        this.binding.setMessages(msgs.map(adoptMessageSegments));
       },
       appendMessage: (msg) => this.appendMessage(msg),
       getMessages: () => this.binding.getMessages(),
@@ -4193,11 +4203,23 @@ class AparteChatHost {
    * spec guards ("optimistic-append + parent-push race"). `onMessageAppended`
    * is the append-specific signal instead.
    */
-  appendMessage(message) {
+  appendMessage(message, options) {
     this._flushStreamState();
     if (message.role === "user") this._vp()?.setAutoScroll?.(true);
-    this.binding.setMessages([...this.binding.getMessages(), message]);
-    this.binding.onMessageAppended?.(message);
+    const stored = options?.historical ? adoptMessageSegments(message) : message.segments?.length ? {
+      ...message,
+      segments: message.segments.reduce((acc, segment) => {
+        acc.push(stampSegmentOnInsert(
+          acc,
+          segment,
+          message.id,
+          resolveConfig(this.binding.host).getSegmentDefaults(segment.type)
+        ));
+        return acc;
+      }, [])
+    } : message;
+    this.binding.setMessages([...this.binding.getMessages(), stored]);
+    this.binding.onMessageAppended?.(stored);
   }
   /** Atomic partial update of a message by id. */
   updateMessage(messageId, updates) {
@@ -4240,7 +4262,15 @@ class AparteChatHost {
     this.binding.onTypingChange?.(false);
     const msgs = before;
     const last = target;
-    const stamped = last ? stampSegmentOnInsert(last.segments || [], segment, last.id) : segment;
+    const stamped = last ? stampSegmentOnInsert(
+      last.segments || [],
+      segment,
+      last.id,
+      // The host attaches its config to `binding.host`, so resolving from
+      // that element is what gives a framework-managed chat its OWN
+      // defaults rather than the page's.
+      resolveConfig(this.binding.host).getSegmentDefaults(segment.type)
+    ) : segment;
     this._lastBubble()?.addSegment?.(stamped);
     if (!last) return;
     const segments = [...last.segments || [], stamped];
@@ -4259,7 +4289,7 @@ class AparteChatHost {
     this._lastBubble()?.updateSegment?.(segmentId, stamped);
     if (!last || !last.segments) return;
     const segments = last.segments.map(
-      (s) => s.id === segmentId ? { ...s, ...stamped } : s
+      (s) => s.id === segmentId ? mergeSegmentUpdate(s, stamped) : s
     );
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
@@ -5120,21 +5150,398 @@ function readableToAsyncIterable(stream, signal) {
     }
   };
 }
-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)
-  };
+let _relabels = null;
+function onRelabel(fn) {
+  _relabels?.push(fn);
 }
-class AparteClient {
+function el$1(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function fieldHeader(parent, field, skipTitle) {
+  let titleId;
+  if (field.title && field.title.trim() !== skipTitle?.trim()) {
+    const title = el$1("p", "aparte-elic-title", field.title);
+    titleId = `elic-title-${uuid()}`;
+    title.id = titleId;
+    parent.appendChild(title);
+  }
+  if (field.description) parent.appendChild(el$1("p", "aparte-elic-desc", field.description));
+  return titleId;
+}
+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$1("div", "aparte-elic-field aparte-elic-enum");
+  const titleId = fieldHeader(wrap, field, fallbackLabel);
+  const list = el$1("div", "aparte-elic-options");
+  labelGroup(list, { multiple: field.multiple, titleId, fallbackLabel });
+  const name = `elic-${uuid()}`;
+  const type = field.multiple ? "checkbox" : "radio";
+  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$1("label", "aparte-elic-option" + (recommended ? " aparte-elic-option--recommended" : ""));
+    const control = el$1("input", "aparte-elic-control");
+    control.type = type;
+    control.name = name;
+    control.value = value;
+    if (defaults.has(value)) control.checked = true;
+    const body = el$1("span", "aparte-elic-option-body");
+    body.appendChild(el$1("span", "aparte-elic-option-title", label));
+    if (description) body.appendChild(el$1("span", "aparte-elic-option-desc", description));
+    row.append(control, body);
+    return row;
+  };
+  for (const opt of field.options) {
+    list.appendChild(buildOption(opt.value, opt.label ?? opt.value, opt.description, opt.recommended));
+  }
+  let otherText = null;
+  if (allowOther) {
+    const row = el$1("label", "aparte-elic-option aparte-elic-option--other");
+    const control = el$1("input", "aparte-elic-control");
+    control.type = type;
+    control.name = name;
+    control.value = "__other__";
+    const body = el$1("span", "aparte-elic-option-body");
+    const t = contextConfig();
+    const otherTitle = el$1("span", "aparte-elic-option-title", t.t("elicitationOther"));
+    body.appendChild(otherTitle);
+    otherText = el$1("input", "aparte-elic-other-input");
+    otherText.type = "text";
+    otherText.placeholder = t.t("elicitationOtherPlaceholder");
+    otherText.style.display = "none";
+    otherText.setAttribute("aria-label", t.t("elicitationOtherLabel"));
+    const otherInput = otherText;
+    onRelabel(() => {
+      const now = contextConfig();
+      otherTitle.textContent = now.t("elicitationOther");
+      otherInput.placeholder = now.t("elicitationOtherPlaceholder");
+      otherInput.setAttribute("aria-label", now.t("elicitationOtherLabel"));
+    });
+    body.appendChild(otherText);
+    row.append(control, body);
+    list.appendChild(row);
+  }
+  wrap.appendChild(list);
+  const controls = () => Array.from(list.querySelectorAll(".aparte-elic-control"));
+  const other = () => list.querySelector('input[value="__other__"]');
+  list.addEventListener("change", () => {
+    const o = other();
+    if (o && otherText) {
+      otherText.style.display = o.checked ? "" : "none";
+      if (o.checked) otherText.focus();
+    }
+    onChange();
+  });
+  otherText?.addEventListener("input", onChange);
+  const getValue = () => {
+    const otherVal = other()?.checked && otherText?.value.trim() ? otherText.value.trim() : "";
+    if (field.multiple) {
+      const vals = controls().filter((c) => c.checked && c.value !== "__other__").map((c) => c.value);
+      if (otherVal) vals.push(otherVal);
+      return vals;
+    }
+    const checked = controls().find((c) => c.checked);
+    if (!checked) return "";
+    return checked.value === "__other__" ? otherVal : checked.value;
+  };
+  return {
+    el: wrap,
+    getValue,
+    isComplete: () => {
+      const v = getValue();
+      return field.multiple ? v.length > 0 : v !== "";
+    },
+    focus: () => controls()[0]?.focus()
+  };
+}
+function buildBooleanField(field, onChange, fallbackLabel) {
+  const wrap = el$1("div", "aparte-elic-field aparte-elic-boolean");
+  const titleId = fieldHeader(wrap, field, fallbackLabel);
+  const list = el$1("div", "aparte-elic-options");
+  labelGroup(list, { titleId, fallbackLabel });
+  const name = `elic-${uuid()}`;
+  const mk = (val, label, defaulted) => {
+    const row = el$1("label", "aparte-elic-option");
+    const control = el$1("input", "aparte-elic-control");
+    control.type = "radio";
+    control.name = name;
+    control.value = val;
+    if (field.default != null && String(field.default) === val) control.checked = true;
+    const body = el$1("span", "aparte-elic-option-body");
+    const title = el$1("span", "aparte-elic-option-title", label);
+    if (defaulted) onRelabel(() => {
+      title.textContent = contextConfig().t(defaulted);
+    });
+    body.appendChild(title);
+    row.append(control, body);
+    list.appendChild(row);
+  };
+  const t = contextConfig();
+  mk("true", field.trueLabel ?? t.t("elicitationYes"), field.trueLabel ? void 0 : "elicitationYes");
+  mk("false", field.falseLabel ?? t.t("elicitationNo"), field.falseLabel ? void 0 : "elicitationNo");
+  wrap.appendChild(list);
+  list.addEventListener("change", onChange);
+  const checked = () => list.querySelector("input:checked");
+  return {
+    el: wrap,
+    getValue: () => checked()?.value === "true",
+    isComplete: () => checked() != null,
+    focus: () => list.querySelector("input")?.focus()
+  };
+}
+function buildStringField(field, onChange, fallbackLabel) {
+  const wrap = el$1("div", "aparte-elic-field aparte-elic-string");
+  fieldHeader(wrap, field, fallbackLabel);
+  const input = field.multiline ? el$1("textarea", "aparte-elic-text") : el$1("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));
+  const ownName = field.title || field.description || fallbackLabel || void 0;
+  input.setAttribute("aria-label", ownName ?? contextConfig().t("elicitationAnswerLabel"));
+  if (ownName == null) {
+    const named = input;
+    onRelabel(() => {
+      named.setAttribute("aria-label", contextConfig().t("elicitationAnswerLabel"));
+    });
+  }
+  wrap.appendChild(input);
+  input.addEventListener("input", onChange);
+  const required = field.required ?? true;
+  const value = () => input.value;
+  return {
+    el: wrap,
+    getValue: () => value(),
+    isComplete: () => {
+      const v = value().trim();
+      if (!required && v === "") return true;
+      return v.length >= (field.minLength ?? 1);
+    },
+    focus: () => input.focus()
+  };
+}
+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, fallbackLabel);
+    case "boolean":
+      return buildBooleanField(field, onChange, fallbackLabel);
+    case "string":
+      return buildStringField(field, onChange, fallbackLabel);
+  }
+}
+function buildElicitationPanel(message, schema, onChange) {
+  const relabels = [];
+  const outer = _relabels;
+  _relabels = relabels;
+  try {
+    const built = buildPanel(message, schema, onChange);
+    return { ...built, relabel: () => {
+      for (const fn of relabels) fn();
+    } };
+  } finally {
+    _relabels = outer;
+  }
+}
+function buildPanel(message, schema, onChange) {
+  const panel = el$1("div", "aparte-elic-panel");
+  const asked = typeof message === "function" ? message() : message;
+  if (asked) panel.appendChild(el$1("p", "aparte-elic-message", asked));
+  const body = el$1("div", "aparte-elic-body");
+  panel.appendChild(body);
+  const dismiss = el$1("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, notify, void 0, key);
+      if (!field2.title && !built.el.querySelector(".aparte-elic-title")) {
+        built.el.insertBefore(el$1("p", "aparte-elic-title", key), built.el.firstChild);
+      }
+      body.appendChild(built.el);
+      return { key, field: built, required: requiredKeys.has(key), header: field2.header };
+    });
+    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,
+      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$1("div", "aparte-elic-steps");
+    steps.setAttribute("role", "tablist");
+    const chips = fields.map((f, i) => {
+      const chip = el$1("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, asked);
+  body.appendChild(field.el);
+  return {
+    el: panel,
+    dismiss,
+    getContent: () => field.getValue(),
+    isComplete: () => field.isComplete(),
+    focus: () => field.focus(),
+    mode: () => "submit",
+    canProceed: () => field.isComplete(),
+    proceed: () => {
+    }
+  };
+}
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function buildApprovalPanel(message, options, onChange) {
+  const cfg = contextConfig();
+  const panel = el("div", "aparte-elic-panel aparte-approval-panel");
+  const askText = () => typeof message === "function" ? message() : message;
+  const ask = askText() ? el("p", "aparte-elic-message", askText()) : null;
+  if (ask) panel.appendChild(ask);
+  const dismiss = el("div", "aparte-elic-dismiss");
+  panel.appendChild(dismiss);
+  let settle = null;
+  let done = false;
+  const fire = (answer) => {
+    if (done) return;
+    done = true;
+    settle?.(answer);
+  };
+  const row = el("div", "aparte-approval-options");
+  row.setAttribute("role", "group");
+  row.setAttribute("aria-label", cfg.t("approvalOptionsLabel"));
+  const labelled = [];
+  const textOf = (option) => typeof option.label === "function" ? option.label() : option.label;
+  for (const option of options) {
+    const button = el("button", `aparte-approval-option aparte-approval-option--${option.tone ?? "affirm"}`);
+    button.type = "button";
+    button.textContent = textOf(option);
+    button.addEventListener("click", () => fire({ option: option.value }));
+    row.appendChild(button);
+    labelled.push({ button, option });
+  }
+  panel.appendChild(row);
+  const instruction = el("textarea", "aparte-approval-instruction");
+  instruction.rows = 1;
+  instruction.placeholder = cfg.t("approvalInstructionPlaceholder");
+  instruction.setAttribute("aria-label", cfg.t("approvalInstructionPlaceholder"));
+  instruction.addEventListener("input", onChange);
+  panel.appendChild(instruction);
+  const typed = () => instruction.value.trim();
+  return {
+    el: panel,
+    dismiss,
+    onSettle: (cb) => {
+      settle = cb;
+    },
+    getContent: () => ({ instruction: typed() }),
+    isComplete: () => typed().length > 0,
+    focus: () => {
+      panel.querySelector(".aparte-approval-option")?.focus();
+    },
+    relabel: () => {
+      const now = contextConfig();
+      const label = now.t("approvalInstructionPlaceholder");
+      instruction.placeholder = label;
+      instruction.setAttribute("aria-label", label);
+      row.setAttribute("aria-label", now.t("approvalOptionsLabel"));
+      if (ask) ask.textContent = askText();
+      for (const { button, option } of labelled) button.textContent = textOf(option);
+    }
+  };
+}
+function requestUserInput(request) {
+  return resolveConfig(request.target ?? null).requestUserInput(request);
+}
+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;
   _boundCompactHandler = null;
@@ -5281,61 +5688,66 @@ class AparteClient {
     }
     this._activeToolControllers.clear();
   }
-  /**
-   * Human-in-the-loop: wait for an `aparte-tool-decision` event matching this
-   * tool call (dispatched by the built-in Approve/Reject UI or an app-level
-   * approval surface). Resolves `{ approved, payload }` — `approved` is `true`
-   * only on an explicit approve, and `payload` carries any arbitrary data a
-   * custom approval UI attached to the decision (the built-in gate sends
-   * none). The `signal` (an AbortController registered in
-   * `_activeToolControllers`) lets `abort()` cleanly resolve a pending
-   * approval to `{ approved: false }` — there is no timeout, since a human may
-   * take any amount of time to decide.
+  /*
+   * Two docblocks stood here, both describing `_awaitToolDecision` — the method
+   * this replaced. Deleting a method and leaving its documentation is worse than
+   * leaving the method: only the LAST comment before a declaration is its JSDoc,
+   * so those two were floating prose, and one of them explained a DOM-containment
+   * check as a live security property. It was the fix for a cross-chat hazard that
+   * only existed because the decision travelled as a bubbling `document` event.
+   * Routing through `requestUserInput` removed the hazard rather than guarding it,
+   * so the guard is gone too — and a reader who found that comment would have
+   * believed a containment check was still protecting them.
    */
   /**
-   * Await the human's Approve/Reject for one tool call.
+   * Ask the human at the COMPOSER, and report what they decided.
    *
-   * `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 default channel, replacing a `document` listener for `aparte-tool-decision`
+   * that existed only because the buttons lived in a segment renderer with no
+   * reference to this client. Routing through `requestUserInput` puts the decision
+   * where every other request for the user already goes, which is the whole point:
+   * one queue, one panel slot, one teardown, and the same behaviour whether the
+   * request came from a tool handler or from this gate.
    *
-   * 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 tool NAME is the question; the arguments stay in the transcript, on the pill
+   * this request is anchored to. A panel capped at 50vh cannot hold a diff or a plan,
+   * and the transcript is already scrollable, copyable and persisted.
    *
-   * The request half of this handshake was hardened with `targetId` for exactly
-   * this hazard. This is its sibling, and it was missed.
+   * `aparte-tool-decision` is GONE with the buttons that dispatched it, and so is the
+   * `document` listener that answered it. It existed only because a segment renderer
+   * has no reference to this client; two seams that can disagree about who answers a
+   * decision are one seam too many, and the ratified elicitation rule already said so
+   * — "a typed presenter registered per config instance, never window events". A host
+   * that wants to answer programmatically registers an `approvalResolver` (headless,
+   * no DOM) or its own presenter, both strictly more capable than an id on an event.
    */
-  _awaitToolDecision(toolCallId, signal, target) {
-    return new Promise((resolve) => {
-      if (signal.aborted) {
-        resolve({ approved: false });
-        return;
-      }
-      const cleanup = () => {
-        document.removeEventListener("aparte-tool-decision", onDecision);
-        signal.removeEventListener("abort", onAbort);
-      };
-      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 });
-      };
-      const onAbort = () => {
-        cleanup();
-        resolve({ approved: false });
-      };
-      document.addEventListener("aparte-tool-decision", onDecision);
-      signal.addEventListener("abort", onAbort, { once: true });
+  async _askForApproval(event, signal, target) {
+    const answer = await requestUserInput({
+      kind: "approval",
+      /*
+       * A function, like the option labels below, and for the same reason: the
+       * FRAME is locale text and follows a language switch while the question is
+       * open. The tool's NAME is substituted into it and never translated — it is
+       * wire format, the identifier the model called.
+       */
+      message: () => {
+        const loc = this._config.getLocale();
+        return (loc.approvalAsk ?? "Run {tool}?").replace("{tool}", event.name);
+      },
+      // Functions, not strings, same as the question: these follow a language
+      // switch while the request is open, which a resolved string cannot.
+      options: [
+        { value: "allow", label: () => this._config.getLocale().approveTool ?? "Approve", tone: "affirm" },
+        { value: "deny", label: () => this._config.getLocale().rejectTool ?? "Reject", tone: "deny" }
+      ],
+      signal,
+      target
     });
+    if (answer.action !== "accept") return { approved: false };
+    const content = answer.content;
+    const instruction = content?.instruction?.trim();
+    if (instruction) return { approved: false, instruction };
+    return { approved: content?.option === "allow" };
   }
   /**
    * Resolve the auth for a provider: `options.keyResolver` takes precedence,
@@ -5994,16 +6406,27 @@ ${content}
       this._activeToolControllers.delete(controller);
     }
   }
+  /**
+   * What the loop does after one tool call. THREE outcomes, because a boolean
+   * conflated two questions that a refusal answers differently.
+   *
+   * - `'continue'` — run the next tool call of this turn.
+   * - `'respond'`  — skip this turn's remaining calls, then take another turn so the
+   *                  model reads what happened. A human refusal: the model asked for
+   *                  several calls and refusing one cannot license the others, but a
+   *                  refusal it never reads is one the user has to retype as a message.
+   * - `'halt'`     — the run is over: an abort, a turn limit, a missing handler.
+   */
   /**
    * Handle one `tool_use` stream event from {@link _streamLoop}: the built-in
    * `create_artifact`, per-tool renderer selection, the human-in-the-loop
    * approval gate, and running the registered handler (timeout / abort).
    * Mutates the shared `messages` / `toolCallsThisTurn` history in place and
-   * returns whether the agentic loop should keep going.
+   * returns what the loop should do next.
    */
   async _handleToolUseEvent(event, ctx) {
     const { targetElement, messageId, messages, toolCallsThisTurn, precedingText, artifactProgress, turns, globalMaxTurns } = ctx;
-    let continueLoop = true;
+    let flow = "continue";
     toolCallsThisTurn.push({ id: event.id, name: event.name, input: event.input });
     if (event.name === "create_artifact") {
       const input = event.input;
@@ -6029,7 +6452,7 @@ ${content}
         content: "Artifact created successfully.",
         toolCallId: event.id
       });
-      return { continueLoop: true };
+      return { flow: "continue" };
     }
     const toolSeg = {
       id: `tool-${event.id}`,
@@ -6063,7 +6486,7 @@ ${content}
     if (turns >= effectiveMaxTurns) {
       console.warn(`[AparteClient] Tool "${event.name}" maxTurns (${effectiveMaxTurns}) reached.`);
       targetElement.updateSegment?.(toolSeg.id, { status: "aborted" });
-      return { continueLoop: false };
+      return { flow: "halt" };
     }
     const handler = this._config.getToolHandler(event.name);
     if (handler) {
@@ -6078,14 +6501,24 @@ ${content}
           input: event.input
         });
         let decision;
-        const resolveApproval = this.options.approvalResolver ?? ((id, sig) => this._awaitToolDecision(id, sig, targetElement));
+        const resolveApproval = this.options.approvalResolver ?? ((call, sig) => this._askForApproval(call, sig, targetElement));
         try {
-          decision = await resolveApproval(event.id, approvalController.signal);
+          decision = await resolveApproval(event, approvalController.signal);
+        } catch (err) {
+          if (err?.name === "AbortError") {
+            targetElement.updateSegment?.(toolSeg.id, { status: "aborted" });
+            return { flow: "halt" };
+          }
+          throw err;
         } finally {
           this._activeToolControllers.delete(approvalController);
         }
+        if (approvalController.signal.aborted) {
+          targetElement.updateSegment?.(toolSeg.id, { status: "aborted" });
+          return { flow: "halt" };
+        }
         if (!decision.approved) {
-          const rejection = "Tool execution was rejected by the user.";
+          const rejection = decision.instruction ? `The user rejected this tool call and said: ${decision.instruction}` : "Tool execution was rejected by the user.";
           targetElement.updateSegment?.(toolSeg.id, { status: "rejected", result: rejection });
           const existingToolCallMsg = messages.find(
             (m) => m.role === "tool_call" && m.toolCalls?.some((tc) => tc.id === event.id)
@@ -6099,7 +6532,7 @@ ${content}
             });
           }
           messages.push({ role: "tool_result", content: rejection, toolCallId: event.id });
-          return { continueLoop: false };
+          return { flow: "respond" };
         }
         if (decision.payload && typeof decision.payload === "object" && !Array.isArray(decision.payload)) {
           effectiveInput = { ...event.input, ...decision.payload };
@@ -6139,7 +6572,7 @@ ${content}
       } catch (err) {
         if (err?.name === "AbortError") {
           targetElement.updateSegment?.(toolSeg.id, { status: "aborted" });
-          continueLoop = false;
+          flow = "halt";
         } else {
           throw err;
         }
@@ -6150,9 +6583,9 @@ ${content}
     } else {
       console.warn(`[AparteClient] No handler registered for tool "${event.name}"`);
       targetElement.updateSegment?.(toolSeg.id, { status: "aborted" });
-      continueLoop = false;
+      flow = "halt";
     }
-    return { continueLoop };
+    return { flow };
   }
   /**
    * Stream loop: runs one provider.chat() call and repeats if a tool was called.
@@ -6177,6 +6610,7 @@ ${content}
       targetElement.addSegment?.(seg);
     }
     while (continueLoop) {
+      let endTurnEarly = false;
       if (this._isAborted) {
         dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
         break;
@@ -6382,7 +6816,8 @@ ${content}
                 { id: event.id, name: event.name, input: event.input },
                 { targetElement, messageId, messages, toolCallsThisTurn, precedingText, artifactProgress, turns, globalMaxTurns }
               );
-              if (!toolResult.continueLoop) continueLoop = false;
+              if (toolResult.flow !== "continue") endTurnEarly = true;
+              if (toolResult.flow === "halt") continueLoop = false;
               break;
             }
             case "error":
@@ -6397,7 +6832,7 @@ ${content}
               break;
             }
           }
-          if (!continueLoop) break;
+          if (endTurnEarly) break;
         }
         finalizeXmlArtifact(xmlCtx, { targetElement, messageId, artifactProgress, artifactXmlHint, textParser, streamingSegmentIds });
         const finals = textParser.finalize();
@@ -6512,7 +6947,7 @@ ${content}
       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, targetElement));
+    const approvalResolver = this.options.approvalResolver ?? ((call, sig) => this._askForApproval(call, sig, targetElement));
     const usage = await streamRunner({
       messageId,
       baseRequest,
@@ -6818,13 +7253,34 @@ class AparteMessageRepository {
   }
 }
 const APARTE_DEFAULT_UI_EVENTS = [
+  // <aparte-composer> and its parts
   "aparte-send",
+  "aparte-cancel",
+  "aparte-composer-change",
+  "aparte-composer-submit",
+  "aparte-action-click",
+  "aparte-attachment-preview",
+  // <aparte-chat-bubble>
   "aparte-action",
   "aparte-retry",
   "aparte-edit",
+  "aparte-feedback",
+  "aparte-message-info",
   "aparte-branch-navigate",
-  "aparte-composer-change",
-  "aparte-path-changed"
+  // <aparte-chat-viewport>
+  "aparte-segment-update",
+  "aparte-reset-done",
+  "aparte-path-changed",
+  // <aparte-conversation-list>
+  "aparte-select-conversation",
+  "aparte-delete-conversation",
+  "aparte-archive-conversation",
+  "aparte-unarchive-conversation",
+  // the select primitives
+  "aparte-select-change",
+  "aparte-select-open",
+  "aparte-select-close",
+  "aparte-optgroup-toggle"
 ];
 function applyElementProps(el2, props, transformValue = (value) => value) {
   for (const [key, value] of Object.entries(props)) {
@@ -6847,344 +7303,75 @@ function isAwaitingReply(message) {
   if (message.status === "streaming" || message.status === "pending") return true;
   return message.status === void 0 && message.role === "assistant" && !message.content?.trim() && !message.segments?.length;
 }
-function el(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text != null) node.textContent = text;
-  return node;
-}
-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 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");
-  const titleId = fieldHeader(wrap, field, fallbackLabel);
-  const list = el("div", "aparte-elic-options");
-  labelGroup(list, { multiple: field.multiple, titleId, fallbackLabel });
-  const name = `elic-${uuid()}`;
-  const type = field.multiple ? "checkbox" : "radio";
-  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" : ""));
-    const control = el("input", "aparte-elic-control");
-    control.type = type;
-    control.name = name;
-    control.value = value;
-    if (defaults.has(value)) control.checked = true;
-    const body = el("span", "aparte-elic-option-body");
-    body.appendChild(el("span", "aparte-elic-option-title", label));
-    if (description) body.appendChild(el("span", "aparte-elic-option-desc", description));
-    row.append(control, body);
-    return row;
-  };
-  for (const opt of field.options) {
-    list.appendChild(buildOption(opt.value, opt.label ?? opt.value, opt.description, opt.recommended));
-  }
-  let otherText = null;
-  if (allowOther) {
-    const row = el("label", "aparte-elic-option aparte-elic-option--other");
-    const control = el("input", "aparte-elic-control");
-    control.type = type;
-    control.name = name;
-    control.value = "__other__";
-    const body = el("span", "aparte-elic-option-body");
-    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 = t.t("elicitationOtherPlaceholder");
-    otherText.style.display = "none";
-    otherText.setAttribute("aria-label", t.t("elicitationOtherLabel"));
-    body.appendChild(otherText);
-    row.append(control, body);
-    list.appendChild(row);
-  }
-  wrap.appendChild(list);
-  const controls = () => Array.from(list.querySelectorAll(".aparte-elic-control"));
-  const other = () => list.querySelector('input[value="__other__"]');
-  list.addEventListener("change", () => {
-    const o = other();
-    if (o && otherText) {
-      otherText.style.display = o.checked ? "" : "none";
-      if (o.checked) otherText.focus();
-    }
-    onChange();
-  });
-  otherText?.addEventListener("input", onChange);
-  const getValue = () => {
-    const otherVal = other()?.checked && otherText?.value.trim() ? otherText.value.trim() : "";
-    if (field.multiple) {
-      const vals = controls().filter((c) => c.checked && c.value !== "__other__").map((c) => c.value);
-      if (otherVal) vals.push(otherVal);
-      return vals;
-    }
-    const checked = controls().find((c) => c.checked);
-    if (!checked) return "";
-    return checked.value === "__other__" ? otherVal : checked.value;
-  };
-  return {
-    el: wrap,
-    getValue,
-    isComplete: () => {
-      const v = getValue();
-      return field.multiple ? v.length > 0 : v !== "";
-    },
-    focus: () => controls()[0]?.focus()
-  };
-}
-function buildBooleanField(field, onChange, fallbackLabel) {
-  const wrap = el("div", "aparte-elic-field aparte-elic-boolean");
-  const titleId = fieldHeader(wrap, field, fallbackLabel);
-  const list = el("div", "aparte-elic-options");
-  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");
-    control.type = "radio";
-    control.name = name;
-    control.value = val;
-    if (field.default != null && String(field.default) === val) control.checked = true;
-    const body = el("span", "aparte-elic-option-body");
-    body.appendChild(el("span", "aparte-elic-option-title", label));
-    row.append(control, body);
-    list.appendChild(row);
-  };
-  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");
-  return {
-    el: wrap,
-    getValue: () => checked()?.value === "true",
-    isComplete: () => checked() != null,
-    focus: () => list.querySelector("input")?.focus()
-  };
-}
-function buildStringField(field, onChange, fallbackLabel) {
-  const wrap = el("div", "aparte-elic-field aparte-elic-string");
-  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 ?? fallbackLabel ?? contextConfig().t("elicitationAnswerLabel"));
-  wrap.appendChild(input);
-  input.addEventListener("input", onChange);
-  const required = field.required ?? true;
-  const value = () => input.value;
-  return {
-    el: wrap,
-    getValue: () => value(),
-    isComplete: () => {
-      const v = value().trim();
-      if (!required && v === "") return true;
-      return v.length >= (field.minLength ?? 1);
-    },
-    focus: () => input.focus()
-  };
-}
-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, fallbackLabel);
-    case "boolean":
-      return buildBooleanField(field, onChange, fallbackLabel);
-    case "string":
-      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, 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);
-      }
-      body.appendChild(built.el);
-      return { key, field: built, required: requiredKeys.has(key), header: field2.header };
-    });
-    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,
-      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, message);
-  body.appendChild(field.el);
-  return {
-    el: panel,
-    dismiss,
-    getContent: () => field.getValue(),
-    isComplete: () => field.isComplete(),
-    focus: () => field.focus(),
-    mode: () => "submit",
-    canProceed: () => field.isComplete(),
-    proceed: () => {
-    }
-  };
-}
-function requestUserInput(request) {
-  return resolveConfig(request.target ?? null).requestUserInput(request);
-}
 export {
-  segmentDuration as $,
-  APARTE_CONVERSATION_SCHEMA_VERSION as A,
-  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,
-  isSegmentSettled as Q,
-  parseAparteEventStream as R,
-  parseMarkdownToSegments as S,
-  populateBubbleFromMessage as T,
-  readableToAsyncIterable as U,
-  registerDefaultRenderers as V,
-  registerSegmentRenderer as W,
-  requestUserInput as X,
-  resolveConfig as Y,
-  revokeAttachmentUrls as Z,
-  runWithConfig as _,
-  APARTE_DEFAULT_BUBBLE_ACTIONS as a,
-  unregisterSegmentRenderer as a0,
-  uuid as a1,
-  stampSegmentActivity as a2,
-  stampSegmentOnInsert as a3,
-  stampSegmentOnUpdate as a4,
-  renumberSegments as a5,
-  openSegmentIds as a6,
-  isTerminalStatus as a7,
-  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
+  resolveConfig as $,
+  APARTE_CONFIG_CHANGE as A,
+  contentToText as B,
+  contextConfig as C,
+  createAparteChatHandler as D,
+  createStreamAdapter as E,
+  cssEscape as F,
+  declineDefaultRenderers as G,
+  defaultSanitizer as H,
+  deriveArtifactKind as I,
+  detachConfig as J,
+  escapeAttr as K,
+  escapeHtml as L,
+  filesToAttachments as M,
+  getAllRenderers as N,
+  getSegmentRenderer as O,
+  installDefaultRenderersOnce as P,
+  isAwaitingReply as Q,
+  isFormatAdapter as R,
+  isSafeUrl as S,
+  isSegmentSettled as T,
+  parseAparteEventStream as U,
+  parseMarkdownToSegments as V,
+  populateBubbleFromMessage as W,
+  readableToAsyncIterable as X,
+  registerDefaultRenderers as Y,
+  registerSegmentRenderer as Z,
+  requestUserInput as _,
+  APARTE_CONVERSATION_SCHEMA_VERSION as a,
+  revokeAttachmentUrls as a0,
+  runWithConfig as a1,
+  segmentDuration as a2,
+  segmentTiming as a3,
+  subscribeConfigChange as a4,
+  unregisterSegmentRenderer as a5,
+  uuid as a6,
+  mergeSegmentUpdate as a7,
+  stampSegmentActivity as a8,
+  stampSegmentOnInsert as a9,
+  stampSegmentOnUpdate as aa,
+  renumberSegments as ab,
+  openSegmentIds as ac,
+  isTerminalStatus as ad,
+  adoptMessageSegments as ae,
+  APARTE_DEFAULT_BUBBLE_ACTIONS as b,
+  APARTE_DEFAULT_HOST_HANDLERS as c,
+  APARTE_DEFAULT_ICON_FALLBACKS as d,
+  APARTE_DEFAULT_LOCALE as e,
+  APARTE_DEFAULT_SKELETON_FALLBACKS as f,
+  APARTE_DEFAULT_UI_EVENTS as g,
+  APARTE_HOST_ATTR as h,
+  AparteBackendTransport as i,
+  AparteChatHost as j,
+  AparteClient as k,
+  AparteConfig as l,
+  AparteConversationController as m,
+  AparteConversationManager as n,
+  AparteDirectTransport as o,
+  AparteElicitationAbortError as p,
+  AparteError as q,
+  AparteErrorCode as r,
+  AparteMessageRepository as s,
+  AparteStreamParser as t,
+  aparteGlobalConfig as u,
+  applyElementProps as v,
+  attachConfig as w,
+  buildApprovalPanel as x,
+  buildElicitationPanel as y,
+  collectRendererStyles as z
 };
-//# sourceMappingURL=index-hQQljwfX.js.map
+//# sourceMappingURL=is-awaiting-reply-Cb7H3YfN.js.map