@aparte/core 0.10.0 → 0.12.0

package/dist/{index-BnKBciDG.js → is-awaiting-reply-CxWRISBC.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++) {
@@ -1038,6 +1065,19 @@ function escapeHtml(value) {
   return out;
 }
 const escapeAttr = escapeHtml;
+function isChatBoundary(el2) {
+  if (!el2) return false;
+  const tag = el2.tagName?.toLowerCase();
+  return tag === "aparte-chat" || tag === "aparte-chat-component" || el2.hasAttribute?.("data-aparte-chat") === true;
+}
+function chatBoundaryOf(el2) {
+  let node = el2 ?? null;
+  while (node) {
+    if (isChatBoundary(node)) return node;
+    node = node.parentElement;
+  }
+  return null;
+}
 const APARTE_DEFAULT_BUBBLE_ACTIONS = {
   copy: true,
   retry: false,
@@ -1050,6 +1090,8 @@ const APARTE_DEFAULT_HOST_HANDLERS = {
   artifactRedownload: false,
   artifactRehydrate: false
 };
+const NOOP = () => {
+};
 class AparteConfig {
   _markdownProvider;
   _streamingMarkdownProvider;
@@ -1101,11 +1143,46 @@ class AparteConfig {
   _modelPreferenceProvider;
   // Conversation persistence (optional, agnostic)
   _conversationManager;
-  // Human-in-the-loop: presents typed input requests (ask_user,
-  // tool approval, forms). Set by the <aparte-elicitation> Web Component.
-  _elicitationPresenter;
+  /*
+   * Human-in-the-loop: presents typed input requests (ask_user, tool approval,
+   * forms). Registered by the `<aparte-elicitation>` Web Component.
+   *
+   * A STACK, not one slot, and that is the fix for two real failures. Since
+   * `<aparte-elicitation>` entered `<aparte-chat>`'s default composition, two plain
+   * `<aparte-chat>` elements on a page each register one on the same global config:
+   *
+   *   - the second clobbered the first, so chat A's approval opened under chat B, and
+   *     answering it under B decided A's tool call;
+   *   - and when B unmounted it cleared the slot, leaving chat A mounted with a
+   *     perfectly good presenter that never re-registered — every later approval and
+   *     every `ask_user` in A rejected `no-presenter` for the life of the page,
+   *     silently, because the warning fires at most once per config.
+   *
+   * Each entry carries the element that registered it, so a request naming a `target`
+   * is routed to the presenter in the SAME chat. `AparteElicitationRequest.target` was
+   * already documented as "used to resolve WHICH instance presents"; the single slot
+   * is what made that impossible.
+   */
+  _elicitationPresenters = [];
   /** 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();
@@ -1175,7 +1252,7 @@ class AparteConfig {
    * trigger only for the ones you claim — see {@link AparteHostHandlersConfig}.
    *
    * @example
-   * aparteGlobalConfig.setHostHandlers({ attachmentPreview: true, terminalRun: true });
+   * aparteGlobalConfig.setHostHandlers({ attachmentPreview: true, artifactRedownload: true });
    */
   setHostHandlers(config) {
     this._hostHandlers = { ...this._hostHandlers, ...config };
@@ -1811,7 +1888,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);
@@ -1885,39 +1962,112 @@ class AparteConfig {
    * The `<aparte-elicitation>` Web Component registers itself here; an app can
    * override with its own framework-native presenter. Pass `null` to clear.
    */
-  setElicitationPresenter(presenter) {
-    this._elicitationPresenter = presenter ?? void 0;
+  setElicitationPresenter(presenter, owner) {
+    if (presenter === null) {
+      this._elicitationPresenters = [];
+      return;
+    }
+    this._elicitationPresenters = this._elicitationPresenters.filter((e) => e.fn !== presenter);
+    this._elicitationPresenters.push(owner === void 0 ? { fn: presenter } : { fn: presenter, owner });
+  }
+  /**
+   * Withdraw ONE presenter, named, leaving any others registered.
+   *
+   * This is what an unmounting `<aparte-elicitation>` needs and what
+   * `setElicitationPresenter(null)` could not express: clearing the slot took every
+   * other mounted chat's presenter down with it. Removing a presenter that is not
+   * registered is a no-op.
+   */
+  removeElicitationPresenter(presenter) {
+    this._elicitationPresenters = this._elicitationPresenters.filter((e) => e.fn !== presenter);
   }
-  /** The registered elicitation presenter, or undefined if none. */
+  /**
+   * The presenter a request with no `target` would reach — the most recently
+   * registered one. Kept for the callers that ask "is anybody able to present?".
+   */
   getElicitationPresenter() {
-    return this._elicitationPresenter;
+    return this._elicitationPresenters[this._elicitationPresenters.length - 1]?.fn;
+  }
+  /**
+   * The presenter that should handle THIS request.
+   *
+   * A `target` is an element inside the asking chat, so the presenter registered from
+   * the same chat is the right one — found by comparing chat boundaries rather than by
+   * `contains`, because the presenter is a sibling of the transcript, not an ancestor
+   * of it. With no target, no match, or no boundary to compare, the top of the stack
+   * is the answer, which is exactly the old single-slot behaviour.
+   */
+  _presenterFor(target) {
+    const stack = this._elicitationPresenters;
+    if (stack.length === 0) return void 0;
+    if (target) {
+      const wanted = chatBoundaryOf(target);
+      if (wanted) {
+        for (let i = stack.length - 1; i >= 0; i -= 1) {
+          const entry = stack[i];
+          if (entry.owner && chatBoundaryOf(entry.owner) === wanted) return entry.fn;
+        }
+      }
+    }
+    return stack[stack.length - 1]?.fn;
   }
   /**
    * Ask the user for typed input mid-run and await their response. This is the
    * generic primitive behind `ask_user` and tool approval — the KIND of
-   * question is the schema, not a bespoke tool. Resolves `accept` with the
-   * value, `decline` when the user declines, or `cancel` when the turn is
-   * cancelled.
+   * question is the schema, not a bespoke tool.
+   *
+   * **Resolves** `accept` with the value, or `decline` when the user declines.
    *
-   * With NO presenter registered it resolves `cancel` rather than hanging — and
-   * warns, once, because that `cancel` is otherwise a lie told quietly. The
-   * model reads it as "the user refused"; the user was never asked, and the
-   * developer sees nothing at all. The default presenter is
-   * `<aparte-elicitation>`, which registers itself from its `connectedCallback`
-   * — so it has to be IN THE DOM. A docs page of ours claimed it "installs
-   * itself — nothing to register", which is how this failure mode was found.
+   * **Rejects** — it does not resolve — when the request ends without an answer, with
+   * an {@link AparteElicitationAbortError} whose `name` is `'AbortError'` and whose
+   * `reason` is `'aborted'` (the turn was stopped, the signal fired, or another request
+   * took the question away) or `'no-presenter'` (nothing was mounted to ask it). So
+   * `await` it inside a `try`, or attach a `.catch()`.
+   *
+   * That is a change, and this block described the old behaviour for a whole release:
+   * "resolves `cancel` when the turn is cancelled", and "with NO presenter registered it
+   * resolves `cancel` rather than hanging". Both were false the moment `cancel` was
+   * removed — and the second is the one that bites, because a developer who reads
+   * "rather than hanging" writes no `.catch()` and gets an unhandled rejection. It ships
+   * in the `.d.ts` and in the custom-elements manifest, which is the API surface the
+   * docs site renders, so it was the most-read wrong sentence in the library.
+   *
+   * A value was removed rather than renamed on purpose: `cancel` was easy to handle as
+   * though it were an answer, and the approval gate did exactly that — it read a stopped
+   * turn as the user refusing a tool they were never shown.
+   *
+   * With no presenter it rejects `'no-presenter'` and warns once, because a request
+   * nobody could see is a setup mistake only the developer can fix. The default
+   * presenter is `<aparte-elicitation>`, which registers itself from its
+   * `connectedCallback` — so it has to be IN THE DOM. A docs page of ours claimed it
+   * "installs itself — nothing to register", which is how that was found.
    */
   requestUserInput(request) {
-    if (!this._elicitationPresenter) {
+    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) {
+    const presenter = this._presenterFor(request.target);
+    if (!presenter) {
       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"));
     }
-    return this._elicitationPresenter(request);
+    if (request.signal?.aborted) return Promise.reject(new AparteElicitationAbortError("aborted"));
+    return presenter(request);
   }
   /**
    * Reset ALL configuration back to defaults — providers, registries, model
@@ -1943,7 +2093,8 @@ class AparteConfig {
     this._artifactPreviewBuilder = void 0;
     this._keyProvider = void 0;
     this._conversationManager = void 0;
-    this._elicitationPresenter = void 0;
+    this._elicitationPresenters = [];
+    this._elicitationQueue = null;
     this._locale = APARTE_DEFAULT_LOCALE;
     this._actions = [];
     this._sanitizer = defaultSanitizer;
@@ -2094,9 +2245,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 +2275,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 +2345,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 +2392,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 +2418,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 +2440,198 @@ 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");
-    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);
-    }
+    const statusEl = element.querySelector(".aparte-tool-state");
+    if (statusEl) statusEl.innerHTML = stateBadge(segment);
   },
-  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 +2656,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 +2862,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 +2888,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 +3083,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 +3111,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 +3162,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 +3237,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 +3253,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 +3266,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 +3420,6 @@ const DEFAULT_RENDERERS = [
   thinkingRenderer,
   codeRenderer,
   errorRenderer,
-  progressRenderer,
   toolCallRenderer,
   artifactRenderer,
   pipelineWaitingRenderer
@@ -3575,7 +3446,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,38 +5234,415 @@ 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);
+let _relabels = null;
+function onRelabel(fn) {
+  _relabels?.push(fn);
+}
+function el$1(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function fieldHeader(parent, field, skipTitle) {
+  let titleId;
+  if (field.title && field.title.trim() !== skipTitle?.trim()) {
+    const title = el$1("p", "aparte-elic-title", field.title);
+    titleId = `elic-title-${uuid()}`;
+    title.id = titleId;
+    parent.appendChild(title);
+  }
+  if (field.description) parent.appendChild(el$1("p", "aparte-elic-desc", field.description));
+  return titleId;
+}
+function labelGroup(list, opts) {
+  list.setAttribute("role", opts.multiple ? "group" : "radiogroup");
+  if (opts.titleId) list.setAttribute("aria-labelledby", opts.titleId);
+  else if (opts.fallbackLabel) list.setAttribute("aria-label", opts.fallbackLabel);
+}
+function buildEnumField(field, onChange, fallbackLabel) {
+  const wrap = el$1("div", "aparte-elic-field aparte-elic-enum");
+  const titleId = fieldHeader(wrap, field, fallbackLabel);
+  const list = el$1("div", "aparte-elic-options");
+  labelGroup(list, { multiple: field.multiple, titleId, fallbackLabel });
+  const name = `elic-${uuid()}`;
+  const type = field.multiple ? "checkbox" : "radio";
+  const allowOther = field.allowOther ?? contextConfig().getElicitationOptions().allowOther;
+  const defaults = new Set(Array.isArray(field.default) ? field.default : field.default != null ? [field.default] : []);
+  const buildOption = (value, label, description, recommended) => {
+    const row = el$1("label", "aparte-elic-option" + (recommended ? " aparte-elic-option--recommended" : ""));
+    const control = el$1("input", "aparte-elic-control");
+    control.type = type;
+    control.name = name;
+    control.value = value;
+    if (defaults.has(value)) control.checked = true;
+    const body = el$1("span", "aparte-elic-option-body");
+    body.appendChild(el$1("span", "aparte-elic-option-title", label));
+    if (description) body.appendChild(el$1("span", "aparte-elic-option-desc", description));
+    row.append(control, body);
+    return row;
+  };
+  for (const opt of field.options) {
+    list.appendChild(buildOption(opt.value, opt.label ?? opt.value, opt.description, opt.recommended));
+  }
+  let otherText = null;
+  if (allowOther) {
+    const row = el$1("label", "aparte-elic-option aparte-elic-option--other");
+    const control = el$1("input", "aparte-elic-control");
+    control.type = type;
+    control.name = name;
+    control.value = "__other__";
+    const body = el$1("span", "aparte-elic-option-body");
+    const t = contextConfig();
+    const otherTitle = el$1("span", "aparte-elic-option-title", t.t("elicitationOther"));
+    body.appendChild(otherTitle);
+    otherText = el$1("input", "aparte-elic-other-input");
+    otherText.type = "text";
+    otherText.placeholder = t.t("elicitationOtherPlaceholder");
+    otherText.style.display = "none";
+    otherText.setAttribute("aria-label", t.t("elicitationOtherLabel"));
+    const otherInput = otherText;
+    onRelabel(() => {
+      const now = contextConfig();
+      otherTitle.textContent = now.t("elicitationOther");
+      otherInput.placeholder = now.t("elicitationOtherPlaceholder");
+      otherInput.setAttribute("aria-label", now.t("elicitationOtherLabel"));
+    });
+    body.appendChild(otherText);
+    row.append(control, body);
+    list.appendChild(row);
+  }
+  wrap.appendChild(list);
+  const controls = () => Array.from(list.querySelectorAll(".aparte-elic-control"));
+  const other = () => list.querySelector('input[value="__other__"]');
+  list.addEventListener("change", () => {
+    const o = other();
+    if (o && otherText) {
+      otherText.style.display = o.checked ? "" : "none";
+      if (o.checked) otherText.focus();
+    }
+    onChange();
   });
+  otherText?.addEventListener("input", onChange);
+  const getValue = () => {
+    const otherVal = other()?.checked && otherText?.value.trim() ? otherText.value.trim() : "";
+    if (field.multiple) {
+      const vals = controls().filter((c) => c.checked && c.value !== "__other__").map((c) => c.value);
+      if (otherVal) vals.push(otherVal);
+      return vals;
+    }
+    const checked = controls().find((c) => c.checked);
+    if (!checked) return "";
+    return checked.value === "__other__" ? otherVal : checked.value;
+  };
   return {
-    raced: Promise.race([work(controller.signal), timedOut]),
-    done: () => clearTimeout(timer)
+    el: wrap,
+    getValue,
+    isComplete: () => {
+      const v = getValue();
+      return field.multiple ? v.length > 0 : v !== "";
+    },
+    focus: () => controls()[0]?.focus()
   };
 }
-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
+function buildBooleanField(field, onChange, fallbackLabel) {
+  const wrap = el$1("div", "aparte-elic-field aparte-elic-boolean");
+  const titleId = fieldHeader(wrap, field, fallbackLabel);
+  const list = el$1("div", "aparte-elic-options");
+  labelGroup(list, { titleId, fallbackLabel });
+  const name = `elic-${uuid()}`;
+  const mk = (val, label, defaulted) => {
+    const row = el$1("label", "aparte-elic-option");
+    const control = el$1("input", "aparte-elic-control");
+    control.type = "radio";
+    control.name = name;
+    control.value = val;
+    if (field.default != null && String(field.default) === val) control.checked = true;
+    const body = el$1("span", "aparte-elic-option-body");
+    const title = el$1("span", "aparte-elic-option-title", label);
+    if (defaulted) onRelabel(() => {
+      title.textContent = contextConfig().t(defaulted);
+    });
+    body.appendChild(title);
+    row.append(control, body);
+    list.appendChild(row);
+  };
+  const t = contextConfig();
+  mk("true", field.trueLabel ?? t.t("elicitationYes"), field.trueLabel ? void 0 : "elicitationYes");
+  mk("false", field.falseLabel ?? t.t("elicitationNo"), field.falseLabel ? void 0 : "elicitationNo");
+  wrap.appendChild(list);
+  list.addEventListener("change", onChange);
+  const checked = () => list.querySelector("input:checked");
+  return {
+    el: wrap,
+    getValue: () => checked()?.value === "true",
+    isComplete: () => checked() != null,
+    focus: () => list.querySelector("input")?.focus()
+  };
+}
+function buildStringField(field, onChange, fallbackLabel) {
+  const wrap = el$1("div", "aparte-elic-field aparte-elic-string");
+  fieldHeader(wrap, field, fallbackLabel);
+  const input = field.multiline ? el$1("textarea", "aparte-elic-text") : el$1("input", "aparte-elic-text");
+  if (!field.multiline) input.type = "text";
+  if (field.placeholder) input.setAttribute("placeholder", field.placeholder);
+  if (field.default) input.value = field.default;
+  if (field.maxLength != null) input.setAttribute("maxlength", String(field.maxLength));
+  const ownName = field.title || field.description || fallbackLabel || void 0;
+  input.setAttribute("aria-label", ownName ?? contextConfig().t("elicitationAnswerLabel"));
+  if (ownName == null) {
+    const named = input;
+    onRelabel(() => {
+      named.setAttribute("aria-label", contextConfig().t("elicitationAnswerLabel"));
+    });
+  }
+  wrap.appendChild(input);
+  input.addEventListener("input", onChange);
+  const required = field.required ?? true;
+  const value = () => input.value;
+  return {
+    el: wrap,
+    getValue: () => value(),
+    isComplete: () => {
+      const v = value().trim();
+      if (!required && v === "") return true;
+      return v.length >= (field.minLength ?? 1);
+    },
+    focus: () => input.focus()
+  };
+}
+function buildField(field, onChange, fallbackLabel, key) {
+  const custom = contextConfig().getElicitationFieldRenderer()?.(field, { key, notifyChange: onChange });
+  if (custom) {
+    return {
+      el: custom.el,
+      getValue: () => custom.getValue(),
+      isComplete: () => custom.isComplete(),
+      focus: () => custom.focus?.()
+    };
+  }
+  switch (field.type) {
+    case "enum":
+      return buildEnumField(field, onChange, fallbackLabel);
+    case "boolean":
+      return buildBooleanField(field, onChange, fallbackLabel);
+    case "string":
+      return buildStringField(field, onChange, fallbackLabel);
+  }
+}
+function buildElicitationPanel(message, schema, onChange) {
+  const relabels = [];
+  const outer = _relabels;
+  _relabels = relabels;
+  try {
+    const built = buildPanel(message, schema, onChange);
+    return { ...built, relabel: () => {
+      for (const fn of relabels) fn();
+    } };
+  } finally {
+    _relabels = outer;
+  }
+}
+function buildPanel(message, schema, onChange) {
+  const panel = el$1("div", "aparte-elic-panel");
+  const asked = typeof message === "function" ? message() : message;
+  if (asked) panel.appendChild(el$1("p", "aparte-elic-message", asked));
+  const body = el$1("div", "aparte-elic-body");
+  panel.appendChild(body);
+  const dismiss = el$1("div", "aparte-elic-dismiss");
+  panel.appendChild(dismiss);
+  if (schema.type === "object") {
+    let show = function(index) {
+      current = index;
+      fields.forEach((f, i) => {
+        f.field.el.hidden = i !== index;
+      });
+      syncNav();
+    };
+    const entries = Object.entries(schema.properties);
+    const requiredKeys = new Set(schema.required ?? entries.map(([k]) => k));
+    const cfg = contextConfig();
+    let syncNav = () => {
+    };
+    const notify = () => {
+      syncNav();
+      onChange();
+    };
+    const fields = entries.map(([key, field2]) => {
+      const built = buildField(field2, notify, void 0, key);
+      if (!field2.title && !built.el.querySelector(".aparte-elic-title")) {
+        built.el.insertBefore(el$1("p", "aparte-elic-title", key), built.el.firstChild);
+      }
+      body.appendChild(built.el);
+      return { key, field: built, required: requiredKeys.has(key), header: field2.header };
+    });
+    const isComplete = () => fields.every((f) => !f.required || f.field.isComplete());
+    const api = {
+      el: panel,
+      dismiss,
+      getContent: () => Object.fromEntries(fields.map((f) => [f.key, f.field.getValue()])),
+      isComplete,
+      focus: () => fields[0]?.field.focus(),
+      // A form of one behaves like a single field; only a real form steps.
+      mode: () => "submit",
+      canProceed: isComplete,
+      proceed: () => {
+      }
+    };
+    if (fields.length < 2 || cfg.getElicitationOptions().layout !== "stepped") return api;
+    panel.classList.add("aparte-elic-panel--stepped");
+    let current = 0;
+    const steps = el$1("div", "aparte-elic-steps");
+    steps.setAttribute("role", "tablist");
+    const chips = fields.map((f, i) => {
+      const chip = el$1("button", "aparte-elic-step");
+      chip.type = "button";
+      chip.setAttribute("role", "tab");
+      chip.textContent = f.header?.trim() || String(i + 1);
+      chip.addEventListener("click", () => {
+        show(i);
+        f.field.focus();
+      });
+      steps.appendChild(chip);
+      return chip;
+    });
+    panel.insertBefore(steps, body);
+    syncNav = () => {
+      chips.forEach((chip, i) => {
+        chip.setAttribute("aria-selected", String(i === current));
+        chip.toggleAttribute("data-answered", fields[i].field.isComplete());
+      });
+    };
+    show(0);
+    const last = () => current === fields.length - 1;
+    return {
+      ...api,
+      focus: () => fields[current]?.field.focus(),
+      mode: () => last() ? "submit" : "advance",
+      // Advancing needs only THIS question answered; submitting needs them all,
+      // which is what stops the last question from accepting a form with a hole
+      // in it.
+      canProceed: () => last() ? isComplete() : !!fields[current]?.field.isComplete(),
+      proceed: () => {
+        if (last()) return;
+        show(current + 1);
+        fields[current]?.field.focus();
+      }
+    };
+  }
+  const field = buildField(schema, onChange, asked);
+  body.appendChild(field.el);
+  return {
+    el: panel,
+    dismiss,
+    getContent: () => field.getValue(),
+    isComplete: () => field.isComplete(),
+    focus: () => field.focus(),
+    mode: () => "submit",
+    canProceed: () => field.isComplete(),
+    proceed: () => {
+    }
+  };
+}
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function buildApprovalPanel(message, options, onChange) {
+  const cfg = contextConfig();
+  const panel = el("div", "aparte-elic-panel aparte-approval-panel");
+  const askText = () => typeof message === "function" ? message() : message;
+  const ask = askText() ? el("p", "aparte-elic-message", askText()) : null;
+  if (ask) panel.appendChild(ask);
+  const dismiss = el("div", "aparte-elic-dismiss");
+  panel.appendChild(dismiss);
+  let settle = null;
+  let done = false;
+  const fire = (answer) => {
+    if (done) return;
+    done = true;
+    settle?.(answer);
+  };
+  const row = el("div", "aparte-approval-options");
+  row.setAttribute("role", "group");
+  row.setAttribute("aria-label", cfg.t("approvalOptionsLabel"));
+  const labelled = [];
+  const textOf = (option) => typeof option.label === "function" ? option.label() : option.label;
+  for (const option of options) {
+    const button = el("button", `aparte-approval-option aparte-approval-option--${option.tone ?? "affirm"}`);
+    button.type = "button";
+    button.textContent = textOf(option);
+    button.addEventListener("click", () => fire({ option: option.value }));
+    row.appendChild(button);
+    labelled.push({ button, option });
+  }
+  panel.appendChild(row);
+  const instruction = el("textarea", "aparte-approval-instruction");
+  instruction.rows = 1;
+  instruction.placeholder = cfg.t("approvalInstructionPlaceholder");
+  instruction.setAttribute("aria-label", cfg.t("approvalInstructionPlaceholder"));
+  instruction.addEventListener("input", onChange);
+  panel.appendChild(instruction);
+  const typed = () => instruction.value.trim();
+  return {
+    el: panel,
+    dismiss,
+    onSettle: (cb) => {
+      settle = cb;
+    },
+    getContent: () => ({ instruction: typed() }),
+    isComplete: () => typed().length > 0,
+    focus: () => {
+      panel.querySelector(".aparte-approval-option")?.focus();
+    },
+    relabel: () => {
+      const now = contextConfig();
+      const label = now.t("approvalInstructionPlaceholder");
+      instruction.placeholder = label;
+      instruction.setAttribute("aria-label", label);
+      row.setAttribute("aria-label", now.t("approvalOptionsLabel"));
+      if (ask) ask.textContent = askText();
+      for (const { button, option } of labelled) button.textContent = textOf(option);
+    }
+  };
+}
+function requestUserInput(request) {
+  return resolveConfig(request.target ?? null).requestUserInput(request);
+}
+const DEFAULT_TOOL_HANDLER_TIMEOUT_MS = 5 * 60 * 1e3;
+function withToolTimeout(work, controller, timeoutMs) {
+  let timer;
+  const timedOut = new Promise((_resolve, reject) => {
+    timer = setTimeout(() => {
+      controller.abort();
+      reject(Object.assign(new Error(`tool handler exceeded ${timeoutMs}ms`), { name: "AbortError" }));
+    }, timeoutMs);
+  });
+  return {
+    raced: Promise.race([work(controller.signal), timedOut]),
+    done: () => clearTimeout(timer)
+  };
+}
+class AparteClient {
+  _boundHandler = null;
+  _boundAbortHandler = null;
+  _boundCompactHandler = null;
+  _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.
    */
@@ -5523,61 +5772,66 @@ class AparteClient {
     }
     this._activeToolControllers.clear();
   }
-  /**
-   * Human-in-the-loop: wait for an `aparte-tool-decision` event matching this
-   * tool call (dispatched by the built-in Approve/Reject UI or an app-level
-   * approval surface). Resolves `{ approved, payload }` — `approved` is `true`
-   * only on an explicit approve, and `payload` carries any arbitrary data a
-   * custom approval UI attached to the decision (the built-in gate sends
-   * none). The `signal` (an AbortController registered in
-   * `_activeToolControllers`) lets `abort()` cleanly resolve a pending
-   * approval to `{ approved: false }` — there is no timeout, since a human may
-   * take any amount of time to decide.
+  /*
+   * Two docblocks stood here, both describing `_awaitToolDecision` — the method
+   * this replaced. Deleting a method and leaving its documentation is worse than
+   * leaving the method: only the LAST comment before a declaration is its JSDoc,
+   * so those two were floating prose, and one of them explained a DOM-containment
+   * check as a live security property. It was the fix for a cross-chat hazard that
+   * only existed because the decision travelled as a bubbling `document` event.
+   * Routing through `requestUserInput` removed the hazard rather than guarding it,
+   * so the guard is gone too — and a reader who found that comment would have
+   * believed a containment check was still protecting them.
    */
   /**
-   * Await the human's Approve/Reject for one tool call.
+   * Ask the human at the COMPOSER, and report what they decided.
    *
-   * `target` is not decoration: it is the scope of the consent. The listener sits
-   * on `document` and used to accept any `aparte-tool-decision` whose
-   * `detail.toolCallId` matched — and that id is the tool-call id the MODEL chose.
-   * The built-in buttons dispatch with `bubbles: true, composed: true`, so on a
-   * page with two chats a click aimed at one tool could satisfy the gate awaiting
-   * a different tool in a different conversation. The consented action and the
-   * executed action came apart, which is the entire failure mode an approval gate
-   * exists to prevent — and the handler behind it is arbitrary consumer code.
+   * The default channel, replacing a `document` listener for `aparte-tool-decision`
+   * that existed only because the buttons lived in a segment renderer with no
+   * reference to this client. Routing through `requestUserInput` puts the decision
+   * where every other request for the user already goes, which is the whole point:
+   * one queue, one panel slot, one teardown, and the same behaviour whether the
+   * request came from a tool handler or from this gate.
    *
-   * The check is DOM CONTAINMENT rather than a `targetId` string comparison. A
-   * model can choose an id; it cannot choose where in the tree the click happened.
-   * It also needs no change on the dispatch side, so a consumer's own Approve
-   * button keeps working as long as it fires from inside its own chat.
+   * The tool NAME is the question; the arguments stay in the transcript, on the pill
+   * this request is anchored to. A panel capped at 50vh cannot hold a diff or a plan,
+   * and the transcript is already scrollable, copyable and persisted.
    *
-   * The request half of this handshake was hardened with `targetId` for exactly
-   * this hazard. This is its sibling, and it was missed.
+   * `aparte-tool-decision` is GONE with the buttons that dispatched it, and so is the
+   * `document` listener that answered it. It existed only because a segment renderer
+   * has no reference to this client; two seams that can disagree about who answers a
+   * decision are one seam too many, and the ratified elicitation rule already said so
+   * — "a typed presenter registered per config instance, never window events". A host
+   * that wants to answer programmatically registers an `approvalResolver` (headless,
+   * no DOM) or its own presenter, both strictly more capable than an id on an event.
    */
-  _awaitToolDecision(toolCallId, signal, target) {
-    return new Promise((resolve) => {
-      if (signal.aborted) {
-        resolve({ approved: false });
-        return;
-      }
-      const cleanup = () => {
-        document.removeEventListener("aparte-tool-decision", onDecision);
-        signal.removeEventListener("abort", onAbort);
-      };
-      const onDecision = (e) => {
-        const detail = e.detail;
-        if (detail?.toolCallId !== toolCallId) return;
-        if (target && e.target instanceof Node && e.target !== document && !target.contains(e.target)) return;
-        cleanup();
-        resolve({ approved: detail?.approved === true, payload: detail?.payload });
-      };
-      const onAbort = () => {
-        cleanup();
-        resolve({ approved: false });
-      };
-      document.addEventListener("aparte-tool-decision", onDecision);
-      signal.addEventListener("abort", onAbort, { once: true });
+  async _askForApproval(event, signal, target) {
+    const answer = await requestUserInput({
+      kind: "approval",
+      /*
+       * A function, like the option labels below, and for the same reason: the
+       * FRAME is locale text and follows a language switch while the question is
+       * open. The tool's NAME is substituted into it and never translated — it is
+       * wire format, the identifier the model called.
+       */
+      message: () => {
+        const loc = this._config.getLocale();
+        return (loc.approvalAsk ?? "Run {tool}?").replace("{tool}", event.name);
+      },
+      // Functions, not strings, same as the question: these follow a language
+      // switch while the request is open, which a resolved string cannot.
+      options: [
+        { value: "allow", label: () => this._config.getLocale().approveTool ?? "Approve", tone: "affirm" },
+        { value: "deny", label: () => this._config.getLocale().rejectTool ?? "Reject", tone: "deny" }
+      ],
+      signal,
+      target
     });
+    if (answer.action !== "accept") return { approved: false };
+    const content = answer.content;
+    const instruction = content?.instruction?.trim();
+    if (instruction) return { approved: false, instruction };
+    return { approved: content?.option === "allow" };
   }
   /**
    * Resolve the auth for a provider: `options.keyResolver` takes precedence,
@@ -6236,16 +6490,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 +6536,7 @@ ${content}
         content: "Artifact created successfully.",
         toolCallId: event.id
       });
-      return { continueLoop: true };
+      return { flow: "continue" };
     }
     const toolSeg = {
       id: `tool-${event.id}`,
@@ -6305,7 +6570,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 +6585,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 +6616,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 +6656,7 @@ ${content}
       } catch (err) {
         if (err?.name === "AbortError") {
           targetElement.updateSegment?.(toolSeg.id, { status: "aborted" });
-          continueLoop = false;
+          flow = "halt";
         } else {
           throw err;
         }
@@ -6392,9 +6667,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 +6694,7 @@ ${content}
       targetElement.addSegment?.(seg);
     }
     while (continueLoop) {
+      let endTurnEarly = false;
       if (this._isAborted) {
         dispatchLifecycleEvent(targetElement, "aparte-message-aborted", { messageId });
         break;
@@ -6624,7 +6900,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 +6916,7 @@ ${content}
               break;
             }
           }
-          if (!continueLoop) break;
+          if (endTurnEarly) break;
         }
         finalizeXmlArtifact(xmlCtx, { targetElement, messageId, artifactProgress, artifactXmlHint, textParser, streamingSegmentIds });
         const finals = textParser.finalize();
@@ -6754,7 +7031,7 @@ ${content}
       const tool = this._config.getTools().find((t) => t.name === name);
       return tool ? { maxTurns: tool.maxTurns, needsApproval: tool.needsApproval } : void 0;
     };
-    const approvalResolver = this.options.approvalResolver ?? ((id, sig) => this._awaitToolDecision(id, sig, targetElement));
+    const approvalResolver = this.options.approvalResolver ?? ((call, sig) => this._askForApproval(call, sig, targetElement));
     const usage = await streamRunner({
       messageId,
       baseRequest,
@@ -7060,22 +7337,47 @@ class AparteMessageRepository {
   }
 }
 const APARTE_DEFAULT_UI_EVENTS = [
+  // <aparte-composer> and its parts
   "aparte-send",
+  "aparte-cancel",
+  "aparte-composer-change",
+  "aparte-composer-submit",
+  "aparte-action-click",
+  "aparte-attachment-preview",
+  // <aparte-chat-bubble>
   "aparte-action",
   "aparte-retry",
   "aparte-edit",
+  "aparte-feedback",
+  "aparte-message-info",
   "aparte-branch-navigate",
-  "aparte-composer-change",
-  "aparte-path-changed"
+  // <aparte-chat-viewport>
+  "aparte-segment-update",
+  "aparte-reset-done",
+  "aparte-path-changed",
+  // <aparte-conversation-list>
+  "aparte-select-conversation",
+  "aparte-delete-conversation",
+  "aparte-archive-conversation",
+  "aparte-unarchive-conversation",
+  // the select primitives
+  "aparte-select-change",
+  "aparte-select-open",
+  "aparte-select-close",
+  "aparte-optgroup-toggle"
 ];
 function applyElementProps(el2, props, transformValue = (value) => value) {
   for (const [key, value] of Object.entries(props)) {
     if (key.startsWith("--")) {
-      el2.style.setProperty(key, String(value));
+      if (value === null || value === void 0) el2.style.removeProperty(key);
+      else if (typeof value === "object" || typeof value === "function") el2.style.removeProperty(key);
+      else 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 (typeof value === "number" && Number.isNaN(value)) {
+      el2.removeAttribute(key);
     } else if (value === true) {
       el2.setAttribute(key, "");
     } else if (typeof value === "object" || typeof value === "function") {
@@ -7089,361 +7391,51 @@ 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);
-  }
-  if (field.description) parent.appendChild(el("p", "aparte-elic-desc", field.description));
-  return titleId;
-}
-function labelGroup(list, opts) {
-  list.setAttribute("role", opts.multiple ? "group" : "radiogroup");
-  if (opts.titleId) list.setAttribute("aria-labelledby", opts.titleId);
-  else if (opts.fallbackLabel) list.setAttribute("aria-label", opts.fallbackLabel);
-}
-function buildEnumField(field, onChange, fallbackLabel) {
-  const wrap = el("div", "aparte-elic-field aparte-elic-enum");
-  const titleId = fieldHeader(wrap, field, fallbackLabel);
-  const list = el("div", "aparte-elic-options");
-  labelGroup(list, { multiple: field.multiple, titleId, fallbackLabel });
-  const name = `elic-${uuid()}`;
-  const type = field.multiple ? "checkbox" : "radio";
-  const allowOther = field.allowOther ?? contextConfig().getElicitationOptions().allowOther;
-  const defaults = new Set(Array.isArray(field.default) ? field.default : field.default != null ? [field.default] : []);
-  const buildOption = (value, label, description, recommended) => {
-    const row = el("label", "aparte-elic-option" + (recommended ? " aparte-elic-option--recommended" : ""));
-    const control = el("input", "aparte-elic-control");
-    control.type = type;
-    control.name = name;
-    control.value = value;
-    if (defaults.has(value)) control.checked = true;
-    const body = el("span", "aparte-elic-option-body");
-    body.appendChild(el("span", "aparte-elic-option-title", label));
-    if (description) body.appendChild(el("span", "aparte-elic-option-desc", description));
-    row.append(control, body);
-    return row;
-  };
-  for (const opt of field.options) {
-    list.appendChild(buildOption(opt.value, opt.label ?? opt.value, opt.description, opt.recommended));
-  }
-  let otherText = null;
-  if (allowOther) {
-    const row = el("label", "aparte-elic-option aparte-elic-option--other");
-    const control = el("input", "aparte-elic-control");
-    control.type = type;
-    control.name = name;
-    control.value = "__other__";
-    const body = el("span", "aparte-elic-option-body");
-    const t = contextConfig();
-    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);
-  }
-  wrap.appendChild(list);
-  const controls = () => Array.from(list.querySelectorAll(".aparte-elic-control"));
-  const other = () => list.querySelector('input[value="__other__"]');
-  list.addEventListener("change", () => {
-    const o = other();
-    if (o && otherText) {
-      otherText.style.display = o.checked ? "" : "none";
-      if (o.checked) otherText.focus();
-    }
-    onChange();
-  });
-  otherText?.addEventListener("input", onChange);
-  const getValue = () => {
-    const otherVal = other()?.checked && otherText?.value.trim() ? otherText.value.trim() : "";
-    if (field.multiple) {
-      const vals = controls().filter((c) => c.checked && c.value !== "__other__").map((c) => c.value);
-      if (otherVal) vals.push(otherVal);
-      return vals;
-    }
-    const checked = controls().find((c) => c.checked);
-    if (!checked) return "";
-    return checked.value === "__other__" ? otherVal : checked.value;
-  };
-  return {
-    el: wrap,
-    getValue,
-    isComplete: () => {
-      const v = getValue();
-      return field.multiple ? v.length > 0 : v !== "";
-    },
-    focus: () => controls()[0]?.focus()
-  };
-}
-function buildBooleanField(field, onChange, fallbackLabel) {
-  const wrap = el("div", "aparte-elic-field aparte-elic-boolean");
-  const titleId = fieldHeader(wrap, field, fallbackLabel);
-  const list = el("div", "aparte-elic-options");
-  labelGroup(list, { titleId, fallbackLabel });
-  const name = `elic-${uuid()}`;
-  const mk = (val, label, 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"));
-    });
-  }
-  wrap.appendChild(input);
-  input.addEventListener("input", onChange);
-  const required = field.required ?? true;
-  const value = () => input.value;
-  return {
-    el: wrap,
-    getValue: () => value(),
-    isComplete: () => {
-      const v = value().trim();
-      if (!required && v === "") return true;
-      return v.length >= (field.minLength ?? 1);
-    },
-    focus: () => input.focus()
-  };
-}
-function buildField(field, onChange, fallbackLabel, key) {
-  const custom = contextConfig().getElicitationFieldRenderer()?.(field, { key, notifyChange: onChange });
-  if (custom) {
-    return {
-      el: custom.el,
-      getValue: () => custom.getValue(),
-      isComplete: () => custom.isComplete(),
-      focus: () => custom.focus?.()
-    };
-  }
-  switch (field.type) {
-    case "enum":
-      return buildEnumField(field, onChange, fallbackLabel);
-    case "boolean":
-      return buildBooleanField(field, onChange, fallbackLabel);
-    case "string":
-      return buildStringField(field, onChange, fallbackLabel);
-  }
-}
-function buildElicitationPanel(message, schema, onChange) {
-  const relabels = [];
-  const outer = _relabels;
-  _relabels = relabels;
-  try {
-    const built = buildPanel(message, schema, onChange);
-    return { ...built, relabel: () => {
-      for (const fn of relabels) fn();
-    } };
-  } finally {
-    _relabels = outer;
-  }
-}
-function buildPanel(message, schema, onChange) {
-  const panel = el("div", "aparte-elic-panel");
-  if (message) panel.appendChild(el("p", "aparte-elic-message", message));
-  const body = el("div", "aparte-elic-body");
-  panel.appendChild(body);
-  const dismiss = el("div", "aparte-elic-dismiss");
-  panel.appendChild(dismiss);
-  if (schema.type === "object") {
-    let show = function(index) {
-      current = index;
-      fields.forEach((f, i) => {
-        f.field.el.hidden = i !== index;
-      });
-      syncNav();
-    };
-    const entries = Object.entries(schema.properties);
-    const requiredKeys = new Set(schema.required ?? entries.map(([k]) => k));
-    const cfg = contextConfig();
-    let syncNav = () => {
-    };
-    const notify = () => {
-      syncNav();
-      onChange();
-    };
-    const fields = entries.map(([key, field2]) => {
-      const built = buildField(field2, notify, void 0, key);
-      if (!field2.title && !built.el.querySelector(".aparte-elic-title")) {
-        built.el.insertBefore(el("p", "aparte-elic-title", key), built.el.firstChild);
-      }
-      body.appendChild(built.el);
-      return { key, field: built, required: requiredKeys.has(key), header: field2.header };
-    });
-    const isComplete = () => fields.every((f) => !f.required || f.field.isComplete());
-    const api = {
-      el: panel,
-      dismiss,
-      getContent: () => Object.fromEntries(fields.map((f) => [f.key, f.field.getValue()])),
-      isComplete,
-      focus: () => fields[0]?.field.focus(),
-      // A form of one behaves like a single field; only a real form steps.
-      mode: () => "submit",
-      canProceed: isComplete,
-      proceed: () => {
-      }
-    };
-    if (fields.length < 2 || cfg.getElicitationOptions().layout !== "stepped") return api;
-    panel.classList.add("aparte-elic-panel--stepped");
-    let current = 0;
-    const steps = el("div", "aparte-elic-steps");
-    steps.setAttribute("role", "tablist");
-    const chips = fields.map((f, i) => {
-      const chip = el("button", "aparte-elic-step");
-      chip.type = "button";
-      chip.setAttribute("role", "tab");
-      chip.textContent = f.header?.trim() || String(i + 1);
-      chip.addEventListener("click", () => {
-        show(i);
-        f.field.focus();
-      });
-      steps.appendChild(chip);
-      return chip;
-    });
-    panel.insertBefore(steps, body);
-    syncNav = () => {
-      chips.forEach((chip, i) => {
-        chip.setAttribute("aria-selected", String(i === current));
-        chip.toggleAttribute("data-answered", fields[i].field.isComplete());
-      });
-    };
-    show(0);
-    const last = () => current === fields.length - 1;
-    return {
-      ...api,
-      focus: () => fields[current]?.field.focus(),
-      mode: () => last() ? "submit" : "advance",
-      // Advancing needs only THIS question answered; submitting needs them all,
-      // which is what stops the last question from accepting a form with a hole
-      // in it.
-      canProceed: () => last() ? isComplete() : !!fields[current]?.field.isComplete(),
-      proceed: () => {
-        if (last()) return;
-        show(current + 1);
-        fields[current]?.field.focus();
-      }
-    };
-  }
-  const field = buildField(schema, onChange, message);
-  body.appendChild(field.el);
-  return {
-    el: panel,
-    dismiss,
-    getContent: () => field.getValue(),
-    isComplete: () => field.isComplete(),
-    focus: () => field.focus(),
-    mode: () => "submit",
-    canProceed: () => field.isComplete(),
-    proceed: () => {
-    }
-  };
-}
-function requestUserInput(request) {
-  return resolveConfig(request.target ?? null).requestUserInput(request);
-}
 export {
-  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 +7450,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-CxWRISBC.js.map