@aparte/core 0.10.0 → 0.11.0

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

@@ -75,6 +75,16 @@ const APARTE_DEFAULT_LOCALE = {
   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.",
@@ -1024,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++) {
@@ -1050,6 +1077,8 @@ const APARTE_DEFAULT_HOST_HANDLERS = {
   artifactRedownload: false,
   artifactRehydrate: false
 };
+const NOOP = () => {
+};
 class AparteConfig {
   _markdownProvider;
   _streamingMarkdownProvider;
@@ -1106,6 +1135,23 @@ 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();
@@ -1811,7 +1857,7 @@ 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);
@@ -1908,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);
   }
   /**
@@ -1944,6 +2004,7 @@ class AparteConfig {
     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;
@@ -2094,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,
@@ -2124,17 +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 === false ? "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(".thinking-label");
+    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;
@@ -2194,38 +2255,38 @@ function streamHighlight(element, paneSelector, content, lang, segId) {
 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(".code-copy");
+    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");
@@ -2241,9 +2302,9 @@ const codeRenderer = {
   },
   update: (element, segment) => {
     if (segment.isStreaming) {
-      streamHighlight(element, ".code-content-wrapper", segment.content, segment.language || "", segment.id);
+      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;
@@ -2267,14 +2328,14 @@ 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">${escapeHtml(contextConfig().t("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>
     `;
@@ -2289,171 +2350,204 @@ const errorRenderer = {
    * language it arrived in. Relabelling it would be inventing content.
    */
   relabel: (element) => {
-    const wrap = element.querySelector(".error-icon-wrapper");
+    const wrap = element.querySelector(".aparte-error-icon-wrapper");
     if (wrap) wrap.innerHTML = contextConfig().getIcon("error") || "⚠";
-    const title = element.querySelector(".error-title");
+    const title = element.querySelector(".aparte-error-title");
     if (title) title.textContent = contextConfig().t("error");
   },
   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>`;
-  },
-  getStyles: () => ``
-};
+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 "";
+  }
+}
+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>
+        `;
   },
   /**
-   * The pill's glyphs and — when the turn is paused for a person — the two labels
-   * on the approval gate. Those are the highest-stakes strings in the library: a
-   * reader deciding whether to let a tool run should not be reading them in a
-   * language they did not choose.
+   * 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, so the buttons keep their listeners and,
-   * critically, their FOCUS — this is the one control a keyboard user may be
-   * sitting on when a config change fires.
+   * No child node is added or removed, per the relabel contract.
    */
   relabel: (element, segment) => {
     const cfg = contextConfig();
-    const icon = element.querySelector(".tool-pill-icon");
+    const icon = element.querySelector(".aparte-tool-icon");
     if (icon) icon.innerHTML = cfg.getIcon("tool");
-    const statusEl = element.querySelector(".tool-pill-status");
+    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") : "";
     }
-    const loc = cfg.getLocale();
-    const approve = element.querySelector(".tool-approve-btn");
-    if (approve) {
-      const label = loc.approveTool ?? "Approve";
-      approve.textContent = label;
-      approve.setAttribute("aria-label", label);
-    }
-    const reject = element.querySelector(".tool-reject-btn");
-    if (reject) {
-      const label = loc.rejectTool ?? "Reject";
-      reject.textContent = label;
-      reject.setAttribute("aria-label", label);
+    if (statusEl && segment.status === "awaiting-approval") {
+      statusEl.textContent = cfg.t("approvalWaiting");
     }
   },
-  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));
+  /**
+   * 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="${escapeAttr(waitingLabel())}" 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: () => {
@@ -2478,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;
@@ -2704,7 +2778,7 @@ function renderBinaryFileArtifact(segment, kind) {
   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">
@@ -2730,7 +2804,7 @@ function renderBinaryFileArtifact(segment, kind) {
   const cleanContent = stripCodeFences(segment.content || "");
   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"}">
@@ -2925,7 +2999,7 @@ const artifactRenderer = {
     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"}"
@@ -2953,7 +3027,7 @@ const artifactRenderer = {
                 </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>
@@ -3004,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 || "");
@@ -3079,13 +3153,13 @@ const artifactRenderer = {
     const cleanContent = stripCodeFences(segment.content || "");
     if (isStreaming) {
       const segId = element.getAttribute("data-segment-id") ?? segment.id;
-      streamHighlight(element, ".code-content-wrapper", cleanContent, languageForKind(kind), segId);
+      streamHighlight(element, ".aparte-code-content-wrapper", cleanContent, languageForKind(kind), segId);
     } else {
-      const codeEl = element.querySelector(".code-content-wrapper code");
+      const codeEl = element.querySelector(".aparte-code-content-wrapper code");
       if (codeEl) {
         codeEl.textContent = cleanContent;
       } else {
-        const wrapper = element.querySelector(".code-content-wrapper");
+        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>`;
@@ -3095,7 +3169,7 @@ const artifactRenderer = {
     if (wasStreaming && !isStreaming) {
       element.setAttribute("data-streaming", "false");
       element.querySelector(".aparte-art-card__pulse")?.remove();
-      const wrapper = element.querySelector(".code-content-wrapper");
+      const wrapper = element.querySelector(".aparte-code-content-wrapper");
       if (wrapper) {
         const displayLang = languageForKind(kind);
         void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
@@ -3108,296 +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 {
-            /* justify-content and the padding are DECLARED, not left to a default.
-               Core is light DOM on purpose - no shadow root, no ::part(), any selector
-               reaches in - and the corollary is that a component must state what its
-               layout depends on, because an undeclared property has nothing to override
-               a host rule with. A consuming page with a bare nav selector setting
-               justify-content: space-between and padding-top (this library's own docs
-               site had exactly that) otherwise pushes these two tabs to opposite ends of
-               the card and pads the row out. No backticks in here: this block is a JS
-               template literal, and one of them ended it.
-
-               flex-end, and Code first in the DOM. The card OPENS on Code - mounting the
-               preview would execute model-authored code with no gesture (ratified
-               decision #8) - and a selected tab sitting second reads backwards. Right,
-               because the header above puts the artifact's identity on the left and its
-               copy/download buttons on the right, so this keeps every control in one
-               column. DOM order is also keyboard order, so the tab a reader lands on
-               first is the one already showing. */
-            display: flex; justify-content: flex-end; align-items: stretch; 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; }
-        /* The card's heights, as variables with ONE owner each.
-           They were four hardcoded numbers in the only part of this card that did not
-           use a variable - everything else here already reads var(--aparte-code-bg) and
-           friends - and two of them had to agree while a third contradicted a fourth:
-           the code pane repeated the body's 600px, and the "press Preview" placeholder
-           was 120px tall inside a body whose min-height said 80, so that minimum applied
-           to nothing.
-           The frame stays a FIXED height rather than an aspect ratio, which is what
-           embeds of arbitrary HTML actually do - CodeSandbox documents 500px, StackBlitz
-           takes a height parameter - because a frame with an opaque origin cannot be
-           measured and a 16/10 ratio on a wide card is enormous. The vh cap is the part
-           that was missing: a fixed 480px should not own a phone screen.
-           Each default lives in its read, as var(--x, literal), the way every other
-           value in this file already does - not in a declaration block on top of the
-           fallbacks, which would be two owners of one number again. It also means the
-           docs' CSS-variable generator finds them: its sweep looks for reads that
-           carry a fallback, so a read without one is a public knob nobody documents. */
-        .aparte-art-card__body {
-            position: relative;
-            /* The placeholder is the tallest thing this box can hold while empty, so it
-               IS the minimum - one number instead of two that disagreed. */
-            min-height: var(--aparte-artifact-pending-height, 120px);
-            max-height: var(--aparte-artifact-body-max, 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"] {
-            /* The body already caps this; repeating the number was the second owner. */
-            max-height: var(--aparte-artifact-body-max, 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: min(var(--aparte-artifact-frame-height, 480px), var(--aparte-artifact-frame-max, 70vh));
-            border: 0;
-            background: #fff;
-        }
-        .aparte-art-card__pending {
-            display: flex; align-items: center; justify-content: center;
-            height: var(--aparte-artifact-pending-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: var(--aparte-artifact-file-code-max, 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: var(--aparte-artifact-file-preview-max, 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";
@@ -3548,7 +3336,6 @@ const DEFAULT_RENDERERS = [
   thinkingRenderer,
   codeRenderer,
   errorRenderer,
-  progressRenderer,
   toolCallRenderer,
   artifactRenderer,
   pipelineWaitingRenderer
@@ -3575,7 +3362,8 @@ function adoptSegment(segments, segment, messageId) {
     ...segment,
     messageId,
     index: segments.length,
-    isStreaming: false
+    isStreaming: false,
+    ...segment.type === "tool_call" && segment.status === "awaiting-approval" ? { status: "aborted" } : {}
   };
 }
 const RESERVED = /* @__PURE__ */ new Set(["id", "type", "messageId", "index"]);
@@ -5362,344 +5150,726 @@ 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 {
-  _boundHandler = null;
-  _boundAbortHandler = null;
-  _boundCompactHandler = null;
-  _boundRetryHandler = null;
-  _boundEditHandler = null;
-  _activeToolControllers = /* @__PURE__ */ new Set();
-  _isAborted = false;
-  /**
-   * Does this window event belong to this client?
-   *
-   * One rule for all five handlers, because it used to be four near-copies and
-   * one omission: `aparte-compact` had no guard at all, so in the two-client
-   * layout the JSDoc documents, a single compact event made BOTH clients run —
-   * two paid summarisation calls against whichever chat the DOM scan found
-   * first, and a global reset that wiped the other conversation.
-   *
-   * A scoped client also answers only events ADDRESSED to it. The old guard let
-   * an untargeted event through to every scoped client, which turned one
-   * broadcast into an action on every chat on the page.
-   */
-  _isForThisInstance(e) {
-    if (!e) return true;
-    const detail = e.detail;
-    const scope = this.options.scopeToTargetId;
-    if (scope) return detail?.targetId === scope;
-    if (this._config === aparteGlobalConfig) return true;
-    const target = this._resolveTarget(detail?.targetId);
-    if (!target) return true;
-    const owner = resolveConfig(target);
-    return owner === this._config || owner === aparteGlobalConfig;
+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);
   }
-  /** Aborts the in-flight vendor/transport fetch when the user stops a stream. */
-  _streamController = null;
-  options;
-  /** Config read by this client — an instance config, or the global default. */
-  _config;
-  constructor(options = {}) {
-    this.options = {
-      autoRegister: true,
-      ...options
-    };
-    this._config = options.config ?? aparteGlobalConfig;
-    if (this.options.autoRegister) {
-      registerDefaultRenderers(this._config);
-    } else {
-      declineDefaultRenderers(this._config);
-    }
-    this._setupListeners();
+  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));
   }
-  /**
-   * Sets up the event listeners.
-   * This is called once in the constructor.
-   */
-  _setupListeners() {
-    if (this._boundHandler) return;
-    this._boundHandler = (e) => {
-      const event = e;
-      if (event.type !== "aparte-send") return;
-      if (!this._isForThisInstance(event)) return;
-      this._isAborted = false;
-      for (const controller of this._activeToolControllers) {
-        controller.abort();
-      }
-      this._activeToolControllers.clear();
-      void this._handleSend(event);
-    };
+  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);
   }
-  /**
-   * Start listening for aparte-send events on the window.
-   */
-  start() {
-    if (!this._boundHandler) {
-      this._setupListeners();
-    }
-    if (this._boundHandler) {
-      window.addEventListener("aparte-send", this._boundHandler);
-    }
-    if (!this._boundAbortHandler) {
-      this._boundAbortHandler = (e) => {
-        if (!this._isForThisInstance(e)) return;
-        this.abort();
-      };
-    }
-    window.addEventListener("aparte-abort", this._boundAbortHandler);
-    if (!this._boundCompactHandler) {
-      this._boundCompactHandler = (e) => {
-        if (!this._isForThisInstance(e)) return;
-        const detail = e.detail;
-        void this.compact(detail?.targetId);
-      };
-    }
-    window.addEventListener("aparte-compact", this._boundCompactHandler);
-    if (!this._boundRetryHandler) {
-      this._boundRetryHandler = (e) => {
-        const evt = e;
-        if (!this._isForThisInstance(evt)) return;
-        void this._handleRetry(evt);
-      };
-    }
-    window.addEventListener("aparte-retry", this._boundRetryHandler);
-    if (!this._boundEditHandler) {
-      this._boundEditHandler = (e) => {
-        const evt = e;
-        if (!this._isForThisInstance(evt)) return;
-        void this._handleEdit(evt);
-      };
-    }
-    window.addEventListener("aparte-edit", this._boundEditHandler);
-  }
-  /**
-   * Stop listening.
-   */
-  stop() {
-    this.abort();
-    if (!this._boundHandler) return;
-    window.removeEventListener("aparte-send", this._boundHandler);
-    this._boundHandler = null;
-    if (this._boundAbortHandler) {
-      window.removeEventListener("aparte-abort", this._boundAbortHandler);
-      this._boundAbortHandler = null;
-    }
-    if (this._boundCompactHandler) {
-      window.removeEventListener("aparte-compact", this._boundCompactHandler);
-      this._boundCompactHandler = null;
-    }
-    if (this._boundRetryHandler) {
-      window.removeEventListener("aparte-retry", this._boundRetryHandler);
-      this._boundRetryHandler = null;
+  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();
     }
-    if (this._boundEditHandler) {
-      window.removeEventListener("aparte-edit", this._boundEditHandler);
-      this._boundEditHandler = null;
+    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"));
+    });
   }
-  /**
-   * Abort the current streaming response and all active tool calls.
-   * Dispatches `aparte-message-aborted` on the target element.
-   */
-  abort() {
-    this._isAborted = true;
-    this._streamController?.abort();
-    for (const controller of this._activeToolControllers) {
-      controller.abort();
-    }
-    this._activeToolControllers.clear();
+  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?.()
+    };
   }
-  /**
-   * 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.
-   */
-  /**
-   * Await the human's Approve/Reject for one tool call.
-   *
-   * `target` is not decoration: it is the scope of the consent. The listener sits
-   * on `document` and used to accept any `aparte-tool-decision` whose
-   * `detail.toolCallId` matched — and that id is the tool-call id the MODEL chose.
-   * The built-in buttons dispatch with `bubbles: true, composed: true`, so on a
-   * page with two chats a click aimed at one tool could satisfy the gate awaiting
-   * a different tool in a different conversation. The consented action and the
-   * executed action came apart, which is the entire failure mode an approval gate
-   * exists to prevent — and the handler behind it is arbitrary consumer code.
-   *
-   * The check is DOM CONTAINMENT rather than a `targetId` string comparison. A
-   * model can choose an id; it cannot choose where in the tree the click happened.
-   * It also needs no change on the dispatch side, so a consumer's own Approve
-   * button keeps working as long as it fires from inside its own chat.
-   *
-   * The request half of this handshake was hardened with `targetId` for exactly
-   * this hazard. This is its sibling, and it was missed.
-   */
-  _awaitToolDecision(toolCallId, signal, target) {
-    return new Promise((resolve) => {
-      if (signal.aborted) {
-        resolve({ approved: false });
-        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 });
-    });
+  switch (field.type) {
+    case "enum":
+      return buildEnumField(field, onChange, fallbackLabel);
+    case "boolean":
+      return buildBooleanField(field, onChange, fallbackLabel);
+    case "string":
+      return buildStringField(field, onChange, fallbackLabel);
   }
-  /**
-   * Resolve the auth for a provider: `options.keyResolver` takes precedence,
-   * then the aparteGlobalConfig key channel (`setKeyProvider`) so a key registered
-   * there reaches the request. One key source on the happy path.
-   */
-  async _resolveAuth(providerId) {
-    if (this.options.keyResolver) {
-      const resolved = await this.options.keyResolver(providerId);
-      if (resolved) return resolved;
-    }
-    const key = await this._config.getKey(providerId);
-    return key || void 0;
+}
+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;
   }
-  /**
-   * The shared tail of send / retry / edit: attach the current tools, run the
-   * request interceptor, honour `toolChoice: 'none'`, reset the abort flag,
-   * dispatch `aparte-message-start`, run the agentic `_streamLoop`, then dispatch
-   * `aparte-message-done` or route the error to the lifecycle handler.
-   *
-   * Callers own only their turn-specific prep (target resolution, history
-   * building, appending the assistant placeholder) and hand the fully-built
-   * `messages` here — one place for the provider→interceptor→toolChoice→stream
-   * sequence, so it can't drift between the three entry points.
-   */
-  async _streamTurn(targetElement, messageId, provider, messages, modelId, authConfig, opts) {
-    const registeredTools = this._toolsForCurrentModel();
-    let baseRequest = {
-      messages,
-      modelId,
-      stream: true,
-      tools: registeredTools.length ? registeredTools : void 0,
-      ...opts?.temperature !== void 0 ? { temperature: opts.temperature } : {}
+}
+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();
     };
-    if (this.options.requestInterceptor) {
-      baseRequest = await this.options.requestInterceptor(baseRequest);
-    }
-    if (baseRequest.toolChoice === "none") {
-      baseRequest = { ...baseRequest, tools: void 0 };
-    }
-    if (this._isAborted) {
-      dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
-      return;
-    }
-    dispatchLifecycleEvent(targetElement, "aparte-message-start", { messageId, role: "assistant" });
-    try {
-      const usage = await this._streamLoop(targetElement, messageId, provider, baseRequest, authConfig);
-      if (this._isAborted) {
-        this._updateMessage(targetElement, messageId, { status: "completed" });
-      } else {
-        dispatchLifecycleEvent(targetElement, "aparte-message-done", { messageId, role: "assistant", usage });
-      }
-    } catch (error) {
-      if (this._isAborted) {
-        dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
-        this._updateMessage(targetElement, messageId, { status: "completed" });
-        return;
+    const 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);
       }
-      const aparteError = AparteError.from(error, AparteErrorCode.UNKNOWN_ERROR);
-      this._handleLifecycleError(targetElement, messageId, aparteError);
-    }
+      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;
+  _boundRetryHandler = null;
+  _boundEditHandler = null;
+  _activeToolControllers = /* @__PURE__ */ new Set();
+  _isAborted = false;
   /**
-   * Compact the current conversation: summarize all messages via the AI,
-   * clear the viewport, then inject the summary as a single context message.
+   * Does this window event belong to this client?
    *
-   * Triggered programmatically or by dispatching `window.dispatchEvent(new CustomEvent('aparte-compact'))`.
-   * Dispatches `aparte-compact-done` on window when complete, or `aparte-compact-error` on failure.
+   * One rule for all five handlers, because it used to be four near-copies and
+   * one omission: `aparte-compact` had no guard at all, so in the two-client
+   * layout the JSDoc documents, a single compact event made BOTH clients run —
+   * two paid summarisation calls against whichever chat the DOM scan found
+   * first, and a global reset that wiped the other conversation.
+   *
+   * A scoped client also answers only events ADDRESSED to it. The old guard let
+   * an untargeted event through to every scoped client, which turned one
+   * broadcast into an action on every chat on the page.
    */
-  async compact(targetId) {
-    let target = this._resolveTarget(targetId);
-    if (target && typeof target.getMessages !== "function") target = null;
-    if (!target) {
-      window.dispatchEvent(new CustomEvent("aparte-compact-error", { detail: { error: "No aparte-chat target found" } }));
-      return;
-    }
-    const messages = target.getMessages?.() ?? [];
-    if (messages.length === 0) {
-      window.dispatchEvent(new CustomEvent("aparte-compact-done", { detail: { skipped: true } }));
-      return;
+  _isForThisInstance(e) {
+    if (!e) return true;
+    const detail = e.detail;
+    const scope = this.options.scopeToTargetId;
+    if (scope) return detail?.targetId === scope;
+    if (this._config === aparteGlobalConfig) return true;
+    const target = this._resolveTarget(detail?.targetId);
+    if (!target) return true;
+    const owner = resolveConfig(target);
+    return owner === this._config || owner === aparteGlobalConfig;
+  }
+  /** Aborts the in-flight vendor/transport fetch when the user stops a stream. */
+  _streamController = null;
+  options;
+  /** Config read by this client — an instance config, or the global default. */
+  _config;
+  constructor(options = {}) {
+    this.options = {
+      autoRegister: true,
+      ...options
+    };
+    this._config = options.config ?? aparteGlobalConfig;
+    if (this.options.autoRegister) {
+      registerDefaultRenderers(this._config);
+    } else {
+      declineDefaultRenderers(this._config);
     }
-    const selector = this.options.compactionSelector ?? ((m) => ({ keep: [], drop: m }));
-    const { keep, drop } = selector(messages);
-    if (drop.length === 0) {
-      window.dispatchEvent(new CustomEvent("aparte-compact-done", { detail: { skipped: true } }));
-      return;
+    this._setupListeners();
+  }
+  /**
+   * Sets up the event listeners.
+   * This is called once in the constructor.
+   */
+  _setupListeners() {
+    if (this._boundHandler) return;
+    this._boundHandler = (e) => {
+      const event = e;
+      if (event.type !== "aparte-send") return;
+      if (!this._isForThisInstance(event)) return;
+      this._isAborted = false;
+      for (const controller of this._activeToolControllers) {
+        controller.abort();
+      }
+      this._activeToolControllers.clear();
+      void this._handleSend(event);
+    };
+  }
+  /**
+   * Start listening for aparte-send events on the window.
+   */
+  start() {
+    if (!this._boundHandler) {
+      this._setupListeners();
     }
-    const config = this._config.getModelConfig();
-    const providerId = config.defaultProvider;
-    if (!providerId) {
-      window.dispatchEvent(new CustomEvent("aparte-compact-error", { detail: { error: "No provider configured" } }));
-      return;
+    if (this._boundHandler) {
+      window.addEventListener("aparte-send", this._boundHandler);
     }
-    const provider = this._config.getAIProvider(providerId);
-    if (!provider) {
-      window.dispatchEvent(new CustomEvent("aparte-compact-error", { detail: { error: `Provider '${providerId}' not found` } }));
-      return;
+    if (!this._boundAbortHandler) {
+      this._boundAbortHandler = (e) => {
+        if (!this._isForThisInstance(e)) return;
+        this.abort();
+      };
     }
-    window.dispatchEvent(new CustomEvent("aparte-compact-start"));
-    try {
-      const authConfig = await this._resolveAuth(providerId);
-      const historyMessages = drop.filter((m) => m.role === "user" || m.role === "assistant" && m.status === "completed").map((m) => ({
-        role: m.role,
-        content: this._extractText(m)
-      })).filter((m) => contentToText(m.content).length > 0);
-      const summarizeRequest = {
-        messages: [
-          {
-            role: "system",
-            content: "You are a conversation summarizer. Create a concise but complete summary of the conversation below. Capture: key topics, conclusions, decisions, ongoing tasks, and any context needed to continue the conversation. Write in third person. Be factual and brief. No preamble, just the summary."
-          },
-          ...historyMessages,
-          {
-            role: "user",
-            content: "Please summarize this conversation."
-          }
-        ],
-        modelId: config.defaultModel || "",
-        stream: false
+    window.addEventListener("aparte-abort", this._boundAbortHandler);
+    if (!this._boundCompactHandler) {
+      this._boundCompactHandler = (e) => {
+        if (!this._isForThisInstance(e)) return;
+        const detail = e.detail;
+        void this.compact(detail?.targetId);
       };
-      const compactController = new AbortController();
-      this._streamController = compactController;
+    }
+    window.addEventListener("aparte-compact", this._boundCompactHandler);
+    if (!this._boundRetryHandler) {
+      this._boundRetryHandler = (e) => {
+        const evt = e;
+        if (!this._isForThisInstance(evt)) return;
+        void this._handleRetry(evt);
+      };
+    }
+    window.addEventListener("aparte-retry", this._boundRetryHandler);
+    if (!this._boundEditHandler) {
+      this._boundEditHandler = (e) => {
+        const evt = e;
+        if (!this._isForThisInstance(evt)) return;
+        void this._handleEdit(evt);
+      };
+    }
+    window.addEventListener("aparte-edit", this._boundEditHandler);
+  }
+  /**
+   * Stop listening.
+   */
+  stop() {
+    this.abort();
+    if (!this._boundHandler) return;
+    window.removeEventListener("aparte-send", this._boundHandler);
+    this._boundHandler = null;
+    if (this._boundAbortHandler) {
+      window.removeEventListener("aparte-abort", this._boundAbortHandler);
+      this._boundAbortHandler = null;
+    }
+    if (this._boundCompactHandler) {
+      window.removeEventListener("aparte-compact", this._boundCompactHandler);
+      this._boundCompactHandler = null;
+    }
+    if (this._boundRetryHandler) {
+      window.removeEventListener("aparte-retry", this._boundRetryHandler);
+      this._boundRetryHandler = null;
+    }
+    if (this._boundEditHandler) {
+      window.removeEventListener("aparte-edit", this._boundEditHandler);
+      this._boundEditHandler = null;
+    }
+  }
+  /**
+   * Abort the current streaming response and all active tool calls.
+   * Dispatches `aparte-message-aborted` on the target element.
+   */
+  abort() {
+    this._isAborted = true;
+    this._streamController?.abort();
+    for (const controller of this._activeToolControllers) {
+      controller.abort();
+    }
+    this._activeToolControllers.clear();
+  }
+  /*
+   * 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.
+   */
+  /**
+   * Ask the human at the COMPOSER, and report what they decided.
+   *
+   * 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 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.
+   *
+   * `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.
+   */
+  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,
+   * then the aparteGlobalConfig key channel (`setKeyProvider`) so a key registered
+   * there reaches the request. One key source on the happy path.
+   */
+  async _resolveAuth(providerId) {
+    if (this.options.keyResolver) {
+      const resolved = await this.options.keyResolver(providerId);
+      if (resolved) return resolved;
+    }
+    const key = await this._config.getKey(providerId);
+    return key || void 0;
+  }
+  /**
+   * The shared tail of send / retry / edit: attach the current tools, run the
+   * request interceptor, honour `toolChoice: 'none'`, reset the abort flag,
+   * dispatch `aparte-message-start`, run the agentic `_streamLoop`, then dispatch
+   * `aparte-message-done` or route the error to the lifecycle handler.
+   *
+   * Callers own only their turn-specific prep (target resolution, history
+   * building, appending the assistant placeholder) and hand the fully-built
+   * `messages` here — one place for the provider→interceptor→toolChoice→stream
+   * sequence, so it can't drift between the three entry points.
+   */
+  async _streamTurn(targetElement, messageId, provider, messages, modelId, authConfig, opts) {
+    const registeredTools = this._toolsForCurrentModel();
+    let baseRequest = {
+      messages,
+      modelId,
+      stream: true,
+      tools: registeredTools.length ? registeredTools : void 0,
+      ...opts?.temperature !== void 0 ? { temperature: opts.temperature } : {}
+    };
+    if (this.options.requestInterceptor) {
+      baseRequest = await this.options.requestInterceptor(baseRequest);
+    }
+    if (baseRequest.toolChoice === "none") {
+      baseRequest = { ...baseRequest, tools: void 0 };
+    }
+    if (this._isAborted) {
+      dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
+      return;
+    }
+    dispatchLifecycleEvent(targetElement, "aparte-message-start", { messageId, role: "assistant" });
+    try {
+      const usage = await this._streamLoop(targetElement, messageId, provider, baseRequest, authConfig);
+      if (this._isAborted) {
+        this._updateMessage(targetElement, messageId, { status: "completed" });
+      } else {
+        dispatchLifecycleEvent(targetElement, "aparte-message-done", { messageId, role: "assistant", usage });
+      }
+    } catch (error) {
+      if (this._isAborted) {
+        dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
+        this._updateMessage(targetElement, messageId, { status: "completed" });
+        return;
+      }
+      const aparteError = AparteError.from(error, AparteErrorCode.UNKNOWN_ERROR);
+      this._handleLifecycleError(targetElement, messageId, aparteError);
+    }
+  }
+  /**
+   * Compact the current conversation: summarize all messages via the AI,
+   * clear the viewport, then inject the summary as a single context message.
+   *
+   * Triggered programmatically or by dispatching `window.dispatchEvent(new CustomEvent('aparte-compact'))`.
+   * Dispatches `aparte-compact-done` on window when complete, or `aparte-compact-error` on failure.
+   */
+  async compact(targetId) {
+    let target = this._resolveTarget(targetId);
+    if (target && typeof target.getMessages !== "function") target = null;
+    if (!target) {
+      window.dispatchEvent(new CustomEvent("aparte-compact-error", { detail: { error: "No aparte-chat target found" } }));
+      return;
+    }
+    const messages = target.getMessages?.() ?? [];
+    if (messages.length === 0) {
+      window.dispatchEvent(new CustomEvent("aparte-compact-done", { detail: { skipped: true } }));
+      return;
+    }
+    const selector = this.options.compactionSelector ?? ((m) => ({ keep: [], drop: m }));
+    const { keep, drop } = selector(messages);
+    if (drop.length === 0) {
+      window.dispatchEvent(new CustomEvent("aparte-compact-done", { detail: { skipped: true } }));
+      return;
+    }
+    const config = this._config.getModelConfig();
+    const providerId = config.defaultProvider;
+    if (!providerId) {
+      window.dispatchEvent(new CustomEvent("aparte-compact-error", { detail: { error: "No provider configured" } }));
+      return;
+    }
+    const provider = this._config.getAIProvider(providerId);
+    if (!provider) {
+      window.dispatchEvent(new CustomEvent("aparte-compact-error", { detail: { error: `Provider '${providerId}' not found` } }));
+      return;
+    }
+    window.dispatchEvent(new CustomEvent("aparte-compact-start"));
+    try {
+      const authConfig = await this._resolveAuth(providerId);
+      const historyMessages = drop.filter((m) => m.role === "user" || m.role === "assistant" && m.status === "completed").map((m) => ({
+        role: m.role,
+        content: this._extractText(m)
+      })).filter((m) => contentToText(m.content).length > 0);
+      const summarizeRequest = {
+        messages: [
+          {
+            role: "system",
+            content: "You are a conversation summarizer. Create a concise but complete summary of the conversation below. Capture: key topics, conclusions, decisions, ongoing tasks, and any context needed to continue the conversation. Write in third person. Be factual and brief. No preamble, just the summary."
+          },
+          ...historyMessages,
+          {
+            role: "user",
+            content: "Please summarize this conversation."
+          }
+        ],
+        modelId: config.defaultModel || "",
+        stream: false
+      };
+      const compactController = new AbortController();
+      this._streamController = compactController;
       const response = await this._config.getTransport().chat(
         provider,
         summarizeRequest,
@@ -6236,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;
@@ -6271,7 +6452,7 @@ ${content}
         content: "Artifact created successfully.",
         toolCallId: event.id
       });
-      return { continueLoop: true };
+      return { flow: "continue" };
     }
     const toolSeg = {
       id: `tool-${event.id}`,
@@ -6305,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) {
@@ -6320,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)
@@ -6341,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 };
@@ -6381,7 +6572,7 @@ ${content}
       } catch (err) {
         if (err?.name === "AbortError") {
           targetElement.updateSegment?.(toolSeg.id, { status: "aborted" });
-          continueLoop = false;
+          flow = "halt";
         } else {
           throw err;
         }
@@ -6392,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.
@@ -6419,6 +6610,7 @@ ${content}
       targetElement.addSegment?.(seg);
     }
     while (continueLoop) {
+      let endTurnEarly = false;
       if (this._isAborted) {
         dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
         break;
@@ -6624,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":
@@ -6639,7 +6832,7 @@ ${content}
               break;
             }
           }
-          if (!continueLoop) break;
+          if (endTurnEarly) break;
         }
         finalizeXmlArtifact(xmlCtx, { targetElement, messageId, artifactProgress, artifactXmlHint, textParser, streamingSegmentIds });
         const finals = textParser.finalize();
@@ -6681,769 +6874,480 @@ ${content}
             targetElement.addSegment?.(s);
           } else if ("content" in s) {
             targetElement.updateSegment?.(s.id, segmentContentUpdate(s));
-          }
-          if (s.type === "artifact") {
-            dispatchArtifactLifecycle(targetElement, messageId, s, artifactProgress, true);
-          }
-        }
-        if (toolCallsThisTurn.length === 0) {
-          if (pipeline && pipelineIndex < pipeline.length - 1) {
-            if (precedingText.trim()) {
-              messages.push({ role: "assistant", content: precedingText.trim() });
-            }
-            pipelineIndex++;
-            const pwId = `pw-${uuid()}`;
-            targetElement.addSegment?.({ id: pwId, type: "pipeline-waiting" });
-          } else {
-            continueLoop = false;
-          }
-        }
-      } finally {
-        if (!streamDrained) {
-          try {
-            await reader.cancel();
-          } catch {
-          }
-        }
-        reader.releaseLock();
-      }
-    }
-    this._updateMessage(targetElement, messageId, { status: "completed" });
-    if (lastUsage) {
-      try {
-        targetElement.setUsage?.(messageId, lastUsage);
-      } catch {
-      }
-    }
-    return lastUsage;
-  }
-  /**
-   * Delegate `_streamLoop`'s agentic loop to an injected {@link AparteStreamRunner},
-   * rendering its DOM-free events through {@link createStreamAdapter}.
-   * Builds the runner's dependencies from this client's config / provider /
-   * transport; the adapter reproduces the inline loop's `targetElement.*` calls
-   * (validated by the engine `stream-parity` suite). Leading writes (status
-   * streaming, prefix segments) mirror the inline path; the runner's `run-start`
-   * re-asserts `streaming` idempotently.
-   */
-  async _runViaStreamRunner(streamRunner, targetElement, messageId, provider, baseRequest, authConfig, streamController) {
-    const signal = streamController.signal;
-    this._updateMessage(targetElement, messageId, { status: "streaming" });
-    const prefixSegments = baseRequest._meta?.["prefixSegments"];
-    if (prefixSegments?.length) {
-      for (const seg of prefixSegments) targetElement.addSegment?.(seg);
-    }
-    const artifactHint = baseRequest._meta?.artifactHint;
-    const emitter = createStreamAdapter({
-      target: targetElement,
-      config: this._config,
-      messageId,
-      artifactHint
-    });
-    const transportCall = async (request) => {
-      const response = await this._config.getTransport().chat(provider, request, authConfig, { providerId: provider.id, signal });
-      return typeof response === "string" ? response : readableToAsyncIterable(response, signal);
-    };
-    const toolLookup = (name) => {
-      const handler = this._config.getToolHandler(name);
-      if (!handler) return void 0;
-      const context = { target: targetElement, config: this._config };
-      return (call, sig) => handler(call, sig, context);
-    };
-    const toolConfigLookup = (name) => {
-      const tool = this._config.getTools().find((t) => t.name === name);
-      return tool ? { maxTurns: tool.maxTurns, needsApproval: tool.needsApproval } : void 0;
-    };
-    const approvalResolver = this.options.approvalResolver ?? ((id, sig) => this._awaitToolDecision(id, sig, targetElement));
-    const usage = await streamRunner({
-      messageId,
-      baseRequest,
-      transportCall,
-      toolLookup,
-      toolConfigLookup,
-      approvalResolver,
-      emitter,
-      signal,
-      maxTurns: this.options.maxTurns,
-      // Forwarded, because the option's own JSDoc promises it means one thing
-      // whichever loop runs — and the fix that introduced it only wired the
-      // inline path, so setting it was silently ignored here. Exactly the
-      // asymmetry the option was added to remove.
-      toolTimeoutMs: this.options.toolTimeoutMs,
-      // Match the inline loop's id conventions: prefixed artifact ids, but a
-      // BARE uuid for the synthetic tool (the adapter renders `tool-<id>`).
-      idGen: (prefix) => prefix === "synthetic-tool" ? uuid() : `${prefix}-${uuid()}`
-    });
-    return usage ?? void 0;
-  }
-  /**
-   * Updates an existing message or appends a new error if ID lookup fails
-   */
-  _updateMessage(target, messageId, updates) {
-    if (target.updateMessage) {
-      target.updateMessage(messageId, updates);
-    }
-  }
-  /**
-   * Gracefully handles errors by updating the current message instead of duplicating it
-   */
-  _handleLifecycleError(target, messageId, error) {
-    const errorSegment = {
-      id: `error-${uuid()}`,
-      type: "error",
-      content: error.message,
-      details: error.code
-    };
-    if (target.updateMessage) {
-      const rendered = target.getMessages?.()?.find((m) => m.id === messageId)?.segments ?? [];
-      target.updateMessage(messageId, {
-        status: "error",
-        segments: [...rendered, errorSegment]
-      });
-    } else if (target.appendMessage) {
-      target.appendMessage({
-        id: messageId,
-        role: "assistant",
-        status: "error",
-        timestamp: Date.now(),
-        segments: [errorSegment]
-      });
-    }
-    dispatchLifecycleEvent(target, "aparte-message-error", { messageId, error });
-  }
-  /** Warn once per client for an unrecognised stream event, then carry on. */
-  _warnedUnknownEvents = /* @__PURE__ */ new Set();
-  _warnUnknownStreamEvent(event) {
-    const type = String(event?.type ?? "undefined");
-    if (this._warnedUnknownEvents.has(type)) return;
-    this._warnedUnknownEvents.add(type);
-    console.warn(
-      `[AparteClient] Ignoring unrecognised stream event "${type}". The reply is unaffected; this usually means the provider or its SDK emits a part this version of aparté does not map yet.`
-    );
-  }
-}
-function findHead(node) {
-  if (node.next) return findHead(node.next);
-  if ("current" in node) return node;
-  return null;
-}
-class AparteMessageRepository {
-  _nodes = /* @__PURE__ */ new Map();
-  _head = null;
-  _root = { next: null, children: [] };
-  // ─── Public read API ────────────────────────────────────────────────────
-  /** ID of the currently active leaf message */
-  get headId() {
-    return this._head?.current.id ?? null;
-  }
-  /**
-   * Returns the messages on the currently active path, root → head.
-   * O(depth).
-   */
-  getMessages() {
-    const depth = this._head?.level ?? -1;
-    if (depth < 0) return [];
-    const messages = new Array(depth + 1);
-    for (let cur = this._head; cur; cur = cur.prev) {
-      messages[cur.level] = cur.current;
-    }
-    return messages;
-  }
-  /**
-   * Returns metadata about a specific message, or `undefined` if not found.
-   *
-   * Read methods (`getMessage`, `getMessageById`, `getBranches`) all return
-   * `undefined` / `[]` for unknown ids — never throw — so callers can do a
-   * single existence check at the top of a flow rather than wrapping every
-   * call in try/catch.
-   */
-  getMessage(id) {
-    const node = this._nodes.get(id);
-    if (!node) return void 0;
-    return {
-      parentId: node.prev?.current.id ?? null,
-      message: node.current,
-      index: node.level
-    };
-  }
-  /**
-   * Returns the mutable message reference, or `undefined` if not found.
-   * Mutations to the returned object are reflected in `getMessages()`.
-   */
-  getMessageById(id) {
-    return this._nodes.get(id)?.current;
-  }
-  /**
-   * Returns the IDs of all siblings of `messageId`
-   * (i.e. all children of its parent, including itself).
-   * Use this to build branch-picker UI.
-   */
-  getBranches(messageId) {
-    const node = this._nodes.get(messageId);
-    if (!node) return [];
-    const parent = node.prev ?? this._root;
-    return [...parent.children];
-  }
-  // ─── Public write API ───────────────────────────────────────────────────
-  /**
-   * Add a new message as a child of `parentId` (null = root).
-   * If a message with the same id already exists, updates its data
-   * and re-links it under the correct parent.
-   */
-  addOrUpdateMessage(parentId, message) {
-    const existing = this._nodes.get(message.id);
-    const parentNode = parentId ? this._nodes.get(parentId) : void 0;
-    if (parentId !== null && parentNode === void 0) {
-      throw new Error(`AparteMessageRepository: parent "${parentId}" not found.`);
-    }
-    const parent = parentNode ?? null;
-    if (existing) {
-      existing.current = message;
-      this._relink(parent, existing);
-      return;
-    }
-    const node = {
-      prev: parent,
-      next: null,
-      children: [],
-      current: message,
-      level: parent ? parent.level + 1 : 0
-    };
-    this._nodes.set(message.id, node);
-    this._link(parent, node);
-    if (this._head === parent || this._head === null && parent === null) {
-      this._head = node;
-    }
-  }
-  /**
-   * Switch the active branch to `messageId`.
-   * Updates `next` on the parent chain so getMessages() reflects the change.
-   * Advances `head` to the deepest active node in the new branch.
-   *
-   * Silent no-op for unknown ids — mutation methods (`switchToBranch`,
-   * `resetHead`, `updateMessage`, `clearChildren`) never throw.
-   */
-  switchToBranch(messageId) {
-    const node = this._nodes.get(messageId);
-    if (!node) return;
-    const parentOrRoot = node.prev ?? this._root;
-    parentOrRoot.next = node;
-    this._head = findHead(node);
-  }
-  /**
-   * Remove all descendants of `messageId` (inclusive) and set `head` to
-   * the parent of `messageId`. Used by edit/truncate flows.
-   *
-   * @param messageId  The first message to remove
-   * @param newParentId  Optional explicit parent to set head to
-   */
-  resetHead(messageId) {
-    const node = this._nodes.get(messageId);
-    if (!node) return;
-    this._deleteDescendants(node);
-    const parentOrRoot = node.prev ?? this._root;
-    parentOrRoot.children = parentOrRoot.children.filter((id) => id !== messageId);
-    if (parentOrRoot.next === node) {
-      parentOrRoot.next = null;
+          }
+          if (s.type === "artifact") {
+            dispatchArtifactLifecycle(targetElement, messageId, s, artifactProgress, true);
+          }
+        }
+        if (toolCallsThisTurn.length === 0) {
+          if (pipeline && pipelineIndex < pipeline.length - 1) {
+            if (precedingText.trim()) {
+              messages.push({ role: "assistant", content: precedingText.trim() });
+            }
+            pipelineIndex++;
+            const pwId = `pw-${uuid()}`;
+            targetElement.addSegment?.({ id: pwId, type: "pipeline-waiting" });
+          } else {
+            continueLoop = false;
+          }
+        }
+      } finally {
+        if (!streamDrained) {
+          try {
+            await reader.cancel();
+          } catch {
+          }
+        }
+        reader.releaseLock();
+      }
     }
-    this._nodes.delete(messageId);
-    this._head = node.prev;
-  }
-  /**
-   * Update a message's data without changing its position in the tree.
-   */
-  updateMessage(messageId, updates) {
-    const node = this._nodes.get(messageId);
-    if (!node) return;
-    node.current = { ...node.current, ...updates };
+    this._updateMessage(targetElement, messageId, { status: "completed" });
+    if (lastUsage) {
+      try {
+        targetElement.setUsage?.(messageId, lastUsage);
+      } catch {
+      }
+    }
+    return lastUsage;
   }
   /**
-   * Remove ALL children of `parentId` (and their descendants) and set head
-   * to `parentId`. Used by edit to discard every previous response before
-   * re-generating — ensures the new response starts with sibling count = 1.
+   * Delegate `_streamLoop`'s agentic loop to an injected {@link AparteStreamRunner},
+   * rendering its DOM-free events through {@link createStreamAdapter}.
+   * Builds the runner's dependencies from this client's config / provider /
+   * transport; the adapter reproduces the inline loop's `targetElement.*` calls
+   * (validated by the engine `stream-parity` suite). Leading writes (status
+   * streaming, prefix segments) mirror the inline path; the runner's `run-start`
+   * re-asserts `streaming` idempotently.
    */
-  clearChildren(parentId) {
-    const parent = this._nodes.get(parentId);
-    if (!parent) return;
-    for (const childId of [...parent.children]) {
-      const child = this._nodes.get(childId);
-      if (child) {
-        this._deleteDescendants(child);
-        this._nodes.delete(childId);
-      }
+  async _runViaStreamRunner(streamRunner, targetElement, messageId, provider, baseRequest, authConfig, streamController) {
+    const signal = streamController.signal;
+    this._updateMessage(targetElement, messageId, { status: "streaming" });
+    const prefixSegments = baseRequest._meta?.["prefixSegments"];
+    if (prefixSegments?.length) {
+      for (const seg of prefixSegments) targetElement.addSegment?.(seg);
     }
-    parent.children = [];
-    parent.next = null;
-    this._head = parent;
-  }
-  /** Remove all messages and reset to empty state. */
-  clear() {
-    this._nodes.clear();
-    this._head = null;
-    this._root = { next: null, children: [] };
+    const artifactHint = baseRequest._meta?.artifactHint;
+    const emitter = createStreamAdapter({
+      target: targetElement,
+      config: this._config,
+      messageId,
+      artifactHint
+    });
+    const transportCall = async (request) => {
+      const response = await this._config.getTransport().chat(provider, request, authConfig, { providerId: provider.id, signal });
+      return typeof response === "string" ? response : readableToAsyncIterable(response, signal);
+    };
+    const toolLookup = (name) => {
+      const handler = this._config.getToolHandler(name);
+      if (!handler) return void 0;
+      const context = { target: targetElement, config: this._config };
+      return (call, sig) => handler(call, sig, context);
+    };
+    const toolConfigLookup = (name) => {
+      const tool = this._config.getTools().find((t) => t.name === name);
+      return tool ? { maxTurns: tool.maxTurns, needsApproval: tool.needsApproval } : void 0;
+    };
+    const approvalResolver = this.options.approvalResolver ?? ((call, sig) => this._askForApproval(call, sig, targetElement));
+    const usage = await streamRunner({
+      messageId,
+      baseRequest,
+      transportCall,
+      toolLookup,
+      toolConfigLookup,
+      approvalResolver,
+      emitter,
+      signal,
+      maxTurns: this.options.maxTurns,
+      // Forwarded, because the option's own JSDoc promises it means one thing
+      // whichever loop runs — and the fix that introduced it only wired the
+      // inline path, so setting it was silently ignored here. Exactly the
+      // asymmetry the option was added to remove.
+      toolTimeoutMs: this.options.toolTimeoutMs,
+      // Match the inline loop's id conventions: prefixed artifact ids, but a
+      // BARE uuid for the synthetic tool (the adapter renders `tool-<id>`).
+      idGen: (prefix) => prefix === "synthetic-tool" ? uuid() : `${prefix}-${uuid()}`
+    });
+    return usage ?? void 0;
   }
   /**
-   * Import a previously-exported snapshot, rebuilding the full tree and
-   * restoring the active head. Replaces any existing content (calls `clear()`
-   * first). Messages must be in topological order (parent before child) —
-   * this is guaranteed by `export()` since `_nodes` is an insertion-order
-   * Map and parents are always inserted before their children.
+   * Updates an existing message or appends a new error if ID lookup fails
    */
-  import(exported) {
-    this.clear();
-    for (const { message, parentId } of exported.messages) {
-      this.addOrUpdateMessage(parentId, message);
-    }
-    if (exported.headId) {
-      this.switchToBranch(exported.headId);
+  _updateMessage(target, messageId, updates) {
+    if (target.updateMessage) {
+      target.updateMessage(messageId, updates);
     }
   }
   /**
-   * Export the full tree for serialisation or debugging.
-   * Compatible with the assistant-ui ExportedMessageRepository format.
+   * Gracefully handles errors by updating the current message instead of duplicating it
    */
-  export() {
-    const messages = [];
-    this._nodes.forEach((node) => {
-      messages.push({
-        message: node.current,
-        parentId: node.prev?.current.id ?? null
+  _handleLifecycleError(target, messageId, error) {
+    const errorSegment = {
+      id: `error-${uuid()}`,
+      type: "error",
+      content: error.message,
+      details: error.code
+    };
+    if (target.updateMessage) {
+      const rendered = target.getMessages?.()?.find((m) => m.id === messageId)?.segments ?? [];
+      target.updateMessage(messageId, {
+        status: "error",
+        segments: [...rendered, errorSegment]
       });
-    });
-    return { headId: this.headId, messages };
-  }
-  // ─── Private helpers ────────────────────────────────────────────────────
-  _link(parent, child) {
-    const parentOrRoot = parent ?? this._root;
-    parentOrRoot.children = [...parentOrRoot.children, child.current.id];
-    if (parentOrRoot.next === null) {
-      parentOrRoot.next = child;
-    }
-    child.prev = parent;
-  }
-  _relink(newParent, child) {
-    const oldParentOrRoot = child.prev ?? this._root;
-    if (oldParentOrRoot !== (newParent ?? this._root)) {
-      oldParentOrRoot.children = oldParentOrRoot.children.filter((id) => id !== child.current.id);
-      if (oldParentOrRoot.next === child) {
-        const nextId = oldParentOrRoot.children[0];
-        oldParentOrRoot.next = nextId ? this._nodes.get(nextId) ?? null : null;
-      }
-    }
-    child.prev = newParent;
-    const newParentOrRoot = newParent ?? this._root;
-    if (!newParentOrRoot.children.includes(child.current.id)) {
-      newParentOrRoot.children = [...newParentOrRoot.children, child.current.id];
-    }
-    if (newParentOrRoot.next === null) {
-      newParentOrRoot.next = child;
-    }
-    this._updateLevels(child, newParent ? newParent.level + 1 : 0);
-  }
-  _updateLevels(node, newLevel) {
-    node.level = newLevel;
-    for (const childId of node.children) {
-      const childNode = this._nodes.get(childId);
-      if (childNode) this._updateLevels(childNode, newLevel + 1);
-    }
-  }
-  _deleteDescendants(node) {
-    for (const childId of node.children) {
-      const child = this._nodes.get(childId);
-      if (child) {
-        this._deleteDescendants(child);
-        this._nodes.delete(childId);
-      }
-    }
-    node.children = [];
-    node.next = null;
-  }
-}
-const APARTE_DEFAULT_UI_EVENTS = [
-  "aparte-send",
-  "aparte-action",
-  "aparte-retry",
-  "aparte-edit",
-  "aparte-branch-navigate",
-  "aparte-composer-change",
-  "aparte-path-changed"
-];
-function applyElementProps(el2, props, transformValue = (value) => value) {
-  for (const [key, value] of Object.entries(props)) {
-    if (key.startsWith("--")) {
-      el2.style.setProperty(key, String(value));
-    } else if (key.startsWith("on")) {
-      el2.removeAttribute(key);
-    } else if (value === null || value === void 0 || value === false) {
-      el2.removeAttribute(key);
-    } else if (value === true) {
-      el2.setAttribute(key, "");
-    } else if (typeof value === "object" || typeof value === "function") {
-      el2[key] = transformValue(value);
-    } else {
-      el2.setAttribute(key, String(value));
-    }
-  }
-}
-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;
-}
-let _relabels = null;
-function onRelabel(fn) {
-  _relabels?.push(fn);
-}
-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);
+    } else if (target.appendMessage) {
+      target.appendMessage({
+        id: messageId,
+        role: "assistant",
+        status: "error",
+        timestamp: Date.now(),
+        segments: [errorSegment]
+      });
+    }
+    dispatchLifecycleEvent(target, "aparte-message-error", { messageId, error });
+  }
+  /** Warn once per client for an unrecognised stream event, then carry on. */
+  _warnedUnknownEvents = /* @__PURE__ */ new Set();
+  _warnUnknownStreamEvent(event) {
+    const type = String(event?.type ?? "undefined");
+    if (this._warnedUnknownEvents.has(type)) return;
+    this._warnedUnknownEvents.add(type);
+    console.warn(
+      `[AparteClient] Ignoring unrecognised stream event "${type}". The reply is unaffected; this usually means the provider or its SDK emits a part this version of aparté does not map yet.`
+    );
   }
-  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 findHead(node) {
+  if (node.next) return findHead(node.next);
+  if ("current" in node) return node;
+  return null;
 }
-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));
+class AparteMessageRepository {
+  _nodes = /* @__PURE__ */ new Map();
+  _head = null;
+  _root = { next: null, children: [] };
+  // ─── Public read API ────────────────────────────────────────────────────
+  /** ID of the currently active leaf message */
+  get headId() {
+    return this._head?.current.id ?? null;
   }
-  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();
-    const otherTitle = el("span", "aparte-elic-option-title", t.t("elicitationOther"));
-    body.appendChild(otherTitle);
-    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"));
-    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);
+  /**
+   * Returns the messages on the currently active path, root → head.
+   * O(depth).
+   */
+  getMessages() {
+    const depth = this._head?.level ?? -1;
+    if (depth < 0) return [];
+    const messages = new Array(depth + 1);
+    for (let cur = this._head; cur; cur = cur.prev) {
+      messages[cur.level] = cur.current;
+    }
+    return messages;
   }
-  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();
+  /**
+   * Returns metadata about a specific message, or `undefined` if not found.
+   *
+   * Read methods (`getMessage`, `getMessageById`, `getBranches`) all return
+   * `undefined` / `[]` for unknown ids — never throw — so callers can do a
+   * single existence check at the top of a flow rather than wrapping every
+   * call in try/catch.
+   */
+  getMessage(id) {
+    const node = this._nodes.get(id);
+    if (!node) return void 0;
+    return {
+      parentId: node.prev?.current.id ?? null,
+      message: node.current,
+      index: node.level
+    };
+  }
+  /**
+   * Returns the mutable message reference, or `undefined` if not found.
+   * Mutations to the returned object are reflected in `getMessages()`.
+   */
+  getMessageById(id) {
+    return this._nodes.get(id)?.current;
+  }
+  /**
+   * Returns the IDs of all siblings of `messageId`
+   * (i.e. all children of its parent, including itself).
+   * Use this to build branch-picker UI.
+   */
+  getBranches(messageId) {
+    const node = this._nodes.get(messageId);
+    if (!node) return [];
+    const parent = node.prev ?? this._root;
+    return [...parent.children];
+  }
+  // ─── Public write API ───────────────────────────────────────────────────
+  /**
+   * Add a new message as a child of `parentId` (null = root).
+   * If a message with the same id already exists, updates its data
+   * and re-links it under the correct parent.
+   */
+  addOrUpdateMessage(parentId, message) {
+    const existing = this._nodes.get(message.id);
+    const parentNode = parentId ? this._nodes.get(parentId) : void 0;
+    if (parentId !== null && parentNode === void 0) {
+      throw new Error(`AparteMessageRepository: parent "${parentId}" not found.`);
     }
-    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 parent = parentNode ?? null;
+    if (existing) {
+      existing.current = message;
+      this._relink(parent, existing);
+      return;
     }
-    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, defaulted) => {
-    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");
-    const title = el("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("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));
-  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"));
-    });
+    const node = {
+      prev: parent,
+      next: null,
+      children: [],
+      current: message,
+      level: parent ? parent.level + 1 : 0
+    };
+    this._nodes.set(message.id, node);
+    this._link(parent, node);
+    if (this._head === parent || this._head === null && parent === null) {
+      this._head = node;
+    }
+  }
+  /**
+   * Switch the active branch to `messageId`.
+   * Updates `next` on the parent chain so getMessages() reflects the change.
+   * Advances `head` to the deepest active node in the new branch.
+   *
+   * Silent no-op for unknown ids — mutation methods (`switchToBranch`,
+   * `resetHead`, `updateMessage`, `clearChildren`) never throw.
+   */
+  switchToBranch(messageId) {
+    const node = this._nodes.get(messageId);
+    if (!node) return;
+    const parentOrRoot = node.prev ?? this._root;
+    parentOrRoot.next = node;
+    this._head = findHead(node);
+  }
+  /**
+   * Remove all descendants of `messageId` (inclusive) and set `head` to
+   * the parent of `messageId`. Used by edit/truncate flows.
+   *
+   * @param messageId  The first message to remove
+   * @param newParentId  Optional explicit parent to set head to
+   */
+  resetHead(messageId) {
+    const node = this._nodes.get(messageId);
+    if (!node) return;
+    this._deleteDescendants(node);
+    const parentOrRoot = node.prev ?? this._root;
+    parentOrRoot.children = parentOrRoot.children.filter((id) => id !== messageId);
+    if (parentOrRoot.next === node) {
+      parentOrRoot.next = null;
+    }
+    this._nodes.delete(messageId);
+    this._head = node.prev;
+  }
+  /**
+   * Update a message's data without changing its position in the tree.
+   */
+  updateMessage(messageId, updates) {
+    const node = this._nodes.get(messageId);
+    if (!node) return;
+    node.current = { ...node.current, ...updates };
   }
-  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?.()
-    };
+  /**
+   * Remove ALL children of `parentId` (and their descendants) and set head
+   * to `parentId`. Used by edit to discard every previous response before
+   * re-generating — ensures the new response starts with sibling count = 1.
+   */
+  clearChildren(parentId) {
+    const parent = this._nodes.get(parentId);
+    if (!parent) return;
+    for (const childId of [...parent.children]) {
+      const child = this._nodes.get(childId);
+      if (child) {
+        this._deleteDescendants(child);
+        this._nodes.delete(childId);
+      }
+    }
+    parent.children = [];
+    parent.next = null;
+    this._head = parent;
   }
-  switch (field.type) {
-    case "enum":
-      return buildEnumField(field, onChange, fallbackLabel);
-    case "boolean":
-      return buildBooleanField(field, onChange, fallbackLabel);
-    case "string":
-      return buildStringField(field, onChange, fallbackLabel);
+  /** Remove all messages and reset to empty state. */
+  clear() {
+    this._nodes.clear();
+    this._head = null;
+    this._root = { next: null, children: [] };
   }
-}
-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;
+  /**
+   * Import a previously-exported snapshot, rebuilding the full tree and
+   * restoring the active head. Replaces any existing content (calls `clear()`
+   * first). Messages must be in topological order (parent before child) —
+   * this is guaranteed by `export()` since `_nodes` is an insertion-order
+   * Map and parents are always inserted before their children.
+   */
+  import(exported) {
+    this.clear();
+    for (const { message, parentId } of exported.messages) {
+      this.addOrUpdateMessage(parentId, message);
+    }
+    if (exported.headId) {
+      this.switchToBranch(exported.headId);
+    }
   }
-}
-function buildPanel(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;
+  /**
+   * Export the full tree for serialisation or debugging.
+   * Compatible with the assistant-ui ExportedMessageRepository format.
+   */
+  export() {
+    const messages = [];
+    this._nodes.forEach((node) => {
+      messages.push({
+        message: node.current,
+        parentId: node.prev?.current.id ?? null
       });
-      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: () => {
+    return { headId: this.headId, messages };
+  }
+  // ─── Private helpers ────────────────────────────────────────────────────
+  _link(parent, child) {
+    const parentOrRoot = parent ?? this._root;
+    parentOrRoot.children = [...parentOrRoot.children, child.current.id];
+    if (parentOrRoot.next === null) {
+      parentOrRoot.next = child;
+    }
+    child.prev = parent;
+  }
+  _relink(newParent, child) {
+    const oldParentOrRoot = child.prev ?? this._root;
+    if (oldParentOrRoot !== (newParent ?? this._root)) {
+      oldParentOrRoot.children = oldParentOrRoot.children.filter((id) => id !== child.current.id);
+      if (oldParentOrRoot.next === child) {
+        const nextId = oldParentOrRoot.children[0];
+        oldParentOrRoot.next = nextId ? this._nodes.get(nextId) ?? null : null;
       }
-    };
-    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();
+    }
+    child.prev = newParent;
+    const newParentOrRoot = newParent ?? this._root;
+    if (!newParentOrRoot.children.includes(child.current.id)) {
+      newParentOrRoot.children = [...newParentOrRoot.children, child.current.id];
+    }
+    if (newParentOrRoot.next === null) {
+      newParentOrRoot.next = child;
+    }
+    this._updateLevels(child, newParent ? newParent.level + 1 : 0);
+  }
+  _updateLevels(node, newLevel) {
+    node.level = newLevel;
+    for (const childId of node.children) {
+      const childNode = this._nodes.get(childId);
+      if (childNode) this._updateLevels(childNode, newLevel + 1);
+    }
+  }
+  _deleteDescendants(node) {
+    for (const childId of node.children) {
+      const child = this._nodes.get(childId);
+      if (child) {
+        this._deleteDescendants(child);
+        this._nodes.delete(childId);
       }
-    };
+    }
+    node.children = [];
+    node.next = null;
   }
-  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: () => {
+}
+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-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)) {
+    if (key.startsWith("--")) {
+      el2.style.setProperty(key, String(value));
+    } else if (key.startsWith("on")) {
+      el2.removeAttribute(key);
+    } else if (value === null || value === void 0 || value === false) {
+      el2.removeAttribute(key);
+    } else if (value === true) {
+      el2.setAttribute(key, "");
+    } else if (typeof value === "object" || typeof value === "function") {
+      el2[key] = transformValue(value);
+    } else {
+      el2.setAttribute(key, String(value));
     }
-  };
+  }
 }
-function requestUserInput(request) {
-  return resolveConfig(request.target ?? null).requestUserInput(request);
+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;
 }
 export {
-  runWithConfig as $,
+  resolveConfig as $,
   APARTE_CONFIG_CHANGE as A,
-  createAparteChatHandler as B,
-  createStreamAdapter as C,
-  cssEscape as D,
-  declineDefaultRenderers as E,
-  defaultSanitizer as F,
-  deriveArtifactKind as G,
-  detachConfig as H,
-  escapeAttr as I,
-  escapeHtml as J,
-  filesToAttachments as K,
-  getAllRenderers as L,
-  getSegmentRenderer as M,
-  installDefaultRenderersOnce as N,
-  isAwaitingReply as O,
-  isFormatAdapter as P,
-  isSafeUrl as Q,
-  isSegmentSettled as R,
-  parseAparteEventStream as S,
-  parseMarkdownToSegments as T,
-  populateBubbleFromMessage as U,
-  readableToAsyncIterable as V,
-  registerDefaultRenderers as W,
-  registerSegmentRenderer as X,
-  requestUserInput as Y,
-  resolveConfig as Z,
-  revokeAttachmentUrls as _,
+  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,
-  segmentDuration as a0,
-  segmentTiming as a1,
-  subscribeConfigChange as a2,
-  unregisterSegmentRenderer as a3,
-  uuid as a4,
-  mergeSegmentUpdate as a5,
-  stampSegmentActivity as a6,
-  stampSegmentOnInsert as a7,
-  stampSegmentOnUpdate as a8,
-  renumberSegments as a9,
-  openSegmentIds as aa,
-  isTerminalStatus as ab,
-  adoptMessageSegments as ac,
+  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,
@@ -7458,16 +7362,16 @@ export {
   AparteConversationController as m,
   AparteConversationManager as n,
   AparteDirectTransport as o,
-  AparteError as p,
-  AparteErrorCode as q,
-  AparteMessageRepository as r,
-  AparteStreamParser as s,
-  aparteGlobalConfig as t,
-  applyElementProps as u,
-  attachConfig as v,
-  buildElicitationPanel as w,
-  collectRendererStyles as x,
-  contentToText as y,
-  contextConfig as z
+  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-BnKBciDG.js.map
+//# sourceMappingURL=is-awaiting-reply-Cb7H3YfN.js.map