@aparte/core 0.10.0 → 0.11.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { I as escapeAttr, D as cssEscape, $ as runWithConfig, Z as resolveConfig, a5 as mergeSegmentUpdate, J as escapeHtml, M as getSegmentRenderer, N as installDefaultRenderersOnce, r as AparteMessageRepository, a6 as stampSegmentActivity, a7 as stampSegmentOnInsert, a8 as stampSegmentOnUpdate, a9 as renumberSegments, aa as openSegmentIds, ab as isTerminalStatus, ac as adoptMessageSegments, O as isAwaitingReply, U as populateBubbleFromMessage, a4 as uuid, _ as revokeAttachmentUrls, a2 as subscribeConfigChange, w as buildElicitationPanel } from "./index-BnKBciDG.js";
-import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, s, t, u, v, x, y, z, B, C, E, F, G, H, K, L, P, Q, R, S, T, V, W, X, Y, a0, a1, a3 } from "./index-BnKBciDG.js";
+import { a4 as subscribeConfigChange, $ as resolveConfig, a1 as runWithConfig, p as AparteElicitationAbortError, x as buildApprovalPanel, y as buildElicitationPanel, K as escapeAttr, F as cssEscape, a7 as mergeSegmentUpdate, L as escapeHtml, O as getSegmentRenderer, P as installDefaultRenderersOnce, s as AparteMessageRepository, a8 as stampSegmentActivity, a9 as stampSegmentOnInsert, aa as stampSegmentOnUpdate, ab as renumberSegments, ac as openSegmentIds, ad as isTerminalStatus, ae as adoptMessageSegments, Q as isAwaitingReply, W as populateBubbleFromMessage, a6 as uuid, a0 as revokeAttachmentUrls } from "./is-awaiting-reply-Cb7H3YfN.js";
+import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, q, r, t, u, v, w, z, B, C, D, E, G, H, I, J, M, N, R, S, T, U, V, X, Y, Z, _, a2, a3, a5 } from "./is-awaiting-reply-Cb7H3YfN.js";
 class AparteOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected", "data-status"];
@@ -631,6 +631,222 @@ class AparteProgressSpinner extends HTMLElement {
 if (!customElements.get("aparte-progress-spinner")) {
   customElements.define("aparte-progress-spinner", AparteProgressSpinner);
 }
+class AparteElicitation extends HTMLElement {
+  _pending = null;
+  /**
+   * A turn ended — cancel the open question only if it was OUR turn.
+   *
+   * These two listeners sit on `window` and had no instance filter at all, so a
+   * Stop (or an error) in one chat cancelled the question a DIFFERENT chat was
+   * waiting on — and that chat's model was told the user had refused a question
+   * the user was still looking at. Same defect as the `compact()` handler that
+   * emptied both chats, which its four sibling handlers in `AparteClient` already
+   * guarded against.
+   *
+   * The leniency rule is the composer's, deliberately: an event with no
+   * `targetId` is for everyone (a single-chat app never sets one), and a chat we
+   * cannot identify accepts everything rather than becoming deaf. Only a
+   * MISMATCH is ignored.
+   */
+  _onTurnEnd = (e2) => {
+    const evtTargetId = e2.detail?.targetId;
+    const own = this._pendingTargetId();
+    if (evtTargetId && own && evtTargetId !== own) return;
+    this._cancelPending();
+  };
+  _unsubscribeConfig = null;
+  connectedCallback() {
+    this.style.display = "none";
+    this._unsubscribeConfig = subscribeConfigChange(this, () => this._relabelPending());
+    resolveConfig(this).setElicitationPresenter(this._present);
+    window.addEventListener("aparte-message-aborted", this._onTurnEnd);
+    window.addEventListener("aparte-message-error", this._onTurnEnd);
+  }
+  /**
+   * The boundary above us appeared, changed, or went away — move the
+   * registration with it.
+   *
+   * `connectedCallback` alone is not enough and cannot be: registering is a
+   * WRITE, and under all four wrappers it happens before `attachConfig` runs, so
+   * it lands on the global singleton. `requestUserInput()` then resolves the
+   * instance config, finds nothing, and answers the model `cancel` — the model
+   * hears the user refuse a question the user never saw.
+   *
+   * See {@link AparteConfigAware}.
+   */
+  aparteConfigChanged(next, previous) {
+    if (previous.getElicitationPresenter() === this._present) previous.setElicitationPresenter(null);
+    next.setElicitationPresenter(this._present);
+  }
+  disconnectedCallback() {
+    const cfg = resolveConfig(this);
+    if (cfg.getElicitationPresenter() === this._present) cfg.setElicitationPresenter(null);
+    window.removeEventListener("aparte-message-aborted", this._onTurnEnd);
+    window.removeEventListener("aparte-message-error", this._onTurnEnd);
+    this._unsubscribeConfig?.();
+    this._unsubscribeConfig = null;
+    this._cancelPending();
+  }
+  /**
+   * Re-apply the open question's strings, in place.
+   *
+   * Two owners, and both have to move or the panel goes bilingual: the panel's own
+   * defaults (`relabel`), and the Skip button, which this file builds and this file
+   * therefore has to re-text. The composer's one button is a third, and it already
+   * follows — `aparte-composer-send` remembers the panel state it was given.
+   */
+  _relabelPending() {
+    if (!this._pending) return;
+    const cfg = resolveConfig(this);
+    runWithConfig(cfg, () => this._pending.relabel());
+  }
+  _present = (request) => {
+    const composer = this._getComposer();
+    if (!composer) return Promise.reject(new AparteElicitationAbortError("no-presenter"));
+    return new Promise((resolve, reject) => {
+      let done = false;
+      const slot = {};
+      const close = () => {
+        if (done) return false;
+        done = true;
+        this._pending = null;
+        composer.hidePanel(slot.token);
+        return true;
+      };
+      const settle = (result) => {
+        if (close()) resolve(result);
+      };
+      const fail = (reason = "aborted") => {
+        if (close()) reject(new AparteElicitationAbortError(reason));
+      };
+      if (request.signal) {
+        if (request.signal.aborted) {
+          fail();
+          return;
+        }
+        request.signal.addEventListener("abort", () => fail(), { once: true });
+      }
+      const cfg = resolveConfig(this);
+      if (request.kind === "approval") {
+        const panel2 = runWithConfig(cfg, () => buildApprovalPanel(request.message, request.options ?? [], () => {
+          composer.setPanelSubmitEnabled(panel2.isComplete(), "submit");
+        }));
+        panel2.onSettle((answer) => settle({ action: "accept", content: answer }));
+        this._pending = { abort: () => fail(), composer, relabel: () => panel2.relabel() };
+        slot.token = composer.showPanel(panel2.el, {
+          submitEnabled: panel2.isComplete(),
+          mode: "submit",
+          // The composer's button carries the INSTRUCTION, which is written
+          // text — exactly the act that button already means. The options
+          // never route through it: a decision is its own click.
+          onSubmit: () => {
+            if (panel2.isComplete()) settle({ action: "accept", content: panel2.getContent() });
+          },
+          onEvict: () => fail()
+        });
+        panel2.focus();
+        return;
+      }
+      const schema = request.schema ?? { type: "string" };
+      const panel = runWithConfig(cfg, () => buildElicitationPanel(request.message, schema, () => {
+        composer.setPanelSubmitEnabled(panel.canProceed(), panel.mode());
+      }));
+      const skip = document.createElement("button");
+      skip.type = "button";
+      skip.className = "aparte-elic-skip";
+      skip.textContent = cfg.t("elicitationSkip");
+      skip.addEventListener("click", () => settle({ action: "decline" }));
+      panel.dismiss.appendChild(skip);
+      this._pending = {
+        abort: () => fail(),
+        composer,
+        relabel: () => {
+          panel.relabel();
+          skip.textContent = resolveConfig(this).t("elicitationSkip");
+        }
+      };
+      slot.token = composer.showPanel(panel.el, {
+        submitEnabled: panel.canProceed(),
+        mode: panel.mode(),
+        /*
+         * Something else took the slot — another request, a conversation switch,
+         * or a turn ending. The composer tears the panel down either way; only
+         * this callback can settle the promise, and without it the request hung
+         * AND `_pending` stayed set, so every later question was short-circuited
+         * for the life of the page. `cancel`, not `decline`: nobody declined
+         * anything, the question was taken away.
+         */
+        onEvict: () => fail(),
+        onSubmit: () => {
+          if (panel.mode() === "advance") {
+            panel.proceed();
+            composer.setPanelSubmitEnabled(panel.canProceed(), panel.mode());
+            return;
+          }
+          if (panel.isComplete()) settle({ action: "accept", content: panel.getContent() });
+        }
+      });
+      panel.focus();
+    });
+  };
+  _cancelPending() {
+    this._pending?.abort();
+  }
+  /**
+   * The host id of the chat whose composer holds the open panel.
+   *
+   * Walks up from the composer rather than from `this`, because the panel lives in
+   * the composer and that is what the turn belongs to. Matches the hosts
+   * `aparte-chat-bubble._resolveTargetId()` matches, for the reason written there:
+   * Angular's wrapper root IS the `<aparte-chat>` element, while the plain-root
+   * wrappers render a `[data-aparte-chat]` div instead, so matching only the tag
+   * resolves `undefined` on three wrappers out of four.
+   */
+  _pendingTargetId() {
+    let el = this._pending?.composer ?? null;
+    while (el) {
+      const tag = el.tagName?.toLowerCase();
+      const isHost = tag === "aparte-chat" || tag === "aparte-chat-component" || el.hasAttribute?.("data-aparte-chat");
+      if (isHost && el.id) return el.id;
+      el = el.parentElement;
+    }
+    return void 0;
+  }
+  /**
+   * The composer to present in: the nearest one in an ancestor subtree, and
+   * nothing else.
+   *
+   * There used to be a `document.querySelector('aparte-composer')` fallback, which
+   * is the "first chat on the page" bug this repo has now fixed in four other
+   * places: on a page with two chats, an elicitation that could not find its own
+   * composer mounted its panel in the OTHER chat's — so one conversation's question
+   * appeared under the other conversation, and answering it resolved a tool call
+   * belonging to a chat the user was not looking at.
+   *
+   * Returning `null` instead resolves `cancel`, which is honest: nothing was
+   * shown, so nothing was answered. The warning names the fix, because this is a
+   * setup mistake and only the developer can correct it — the guide's own example
+   * puts `<aparte-elicitation>` inside `<aparte-chat>`.
+   */
+  _getComposer() {
+    let node = this.parentElement;
+    while (node) {
+      const composer = node.querySelector("aparte-composer");
+      if (composer && typeof composer.showPanel === "function") return composer;
+      const tag = node.tagName?.toLowerCase();
+      const isChatBoundary = tag === "aparte-chat" || tag === "aparte-chat-component" || node.hasAttribute?.("data-aparte-chat");
+      if (isChatBoundary) break;
+      node = node.parentElement;
+    }
+    console.warn(
+      "[aparte-elicitation] No <aparte-composer> in this element's subtree, so the request was cancelled — the model will read that as a refusal. Move <aparte-elicitation> inside the <aparte-chat> it belongs to. It is deliberately NOT borrowing another chat's composer: on a page with two chats that put the question under the wrong one."
+    );
+    return null;
+  }
+}
+if (typeof customElements !== "undefined" && !customElements.get("aparte-elicitation")) {
+  customElements.define("aparte-elicitation", AparteElicitation);
+}
 class AparteChat extends HTMLElement {
   static get observedAttributes() {
     return ["placeholder", "disabled", "center-empty", "attachments"];
@@ -683,6 +899,7 @@ class AparteChat extends HTMLElement {
     const attachments = this.hasAttribute("attachments");
     this.innerHTML = `
       <aparte-chat-viewport></aparte-chat-viewport>
+      <aparte-elicitation></aparte-elicitation>
       <aparte-composer${composerAttrs}>
         <div class="aparte-composer-shell">
           ${attachments ? "<aparte-composer-attachments></aparte-composer-attachments>" : ""}
@@ -935,7 +1152,7 @@ class AparteChatBubble extends HTMLElement {
   }
   /** Update a specific segment */
   updateSegment(segmentId, updates) {
-    const index = this._segments.findIndex((s2) => s2.id === segmentId);
+    const index = this._segments.findIndex((s) => s.id === segmentId);
     if (index !== -1) {
       const updated = mergeSegmentUpdate(this._segments[index], updates);
       this._segments[index] = updated;
@@ -944,7 +1161,7 @@ class AparteChatBubble extends HTMLElement {
   }
   /** Append content to a segment */
   appendToSegment(segmentId, content) {
-    const segment = this._segments.find((s2) => s2.id === segmentId);
+    const segment = this._segments.find((s) => s.id === segmentId);
     if (segment && "content" in segment) {
       segment.content += content;
       this._applySegmentUpdate(segmentId, segment, { content: segment.content });
@@ -970,7 +1187,7 @@ class AparteChatBubble extends HTMLElement {
    * the human-in-the-loop control.
    */
   removeSegment(segmentId) {
-    const index = this._segments.findIndex((s2) => s2.id === segmentId);
+    const index = this._segments.findIndex((s) => s.id === segmentId);
     if (index !== -1) {
       this._segments.splice(index, 1);
     }
@@ -1053,7 +1270,7 @@ class AparteChatBubble extends HTMLElement {
     } else {
       warnMissingRenderer(segment.type);
       const fallback = document.createElement("div");
-      fallback.className = "segment segment-unknown";
+      fallback.className = "segment aparte-segment-unknown";
       fallback.textContent = `[Unknown segment type: ${segment.type}]`;
       this._segmentsEl.appendChild(fallback);
     }
@@ -1282,7 +1499,7 @@ class AparteChatBubble extends HTMLElement {
       } else {
         warnMissingRenderer(segment.type);
         const fallback = document.createElement("div");
-        fallback.className = "segment segment-unknown";
+        fallback.className = "segment aparte-segment-unknown";
         fallback.textContent = `[Unknown segment type: ${segment.type}]`;
         this._segmentsEl.appendChild(fallback);
       }
@@ -1302,7 +1519,7 @@ class AparteChatBubble extends HTMLElement {
   _reflectError() {
     const message = this.querySelector(".aparte-message");
     if (!message) return;
-    const hasError = this._segments.some((s2) => s2.type === "error");
+    const hasError = this._segments.some((s) => s.type === "error");
     if (hasError) message.setAttribute("data-error", "");
     else message.removeAttribute("data-error");
   }
@@ -1337,18 +1554,18 @@ class AparteChatBubble extends HTMLElement {
     const customAttachment = this._cfg.getAttachmentRenderer?.();
     if (customAttachment) {
       this._attachmentsEl.replaceChildren();
-      for (const a2 of this._attachments) {
-        const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a2)));
+      for (const a4 of this._attachments) {
+        const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a4)));
         if (el) this._attachmentsEl.appendChild(el);
       }
       return;
     }
-    this._attachmentsEl.innerHTML = this._attachments.map((a2) => {
-      const name = escapeHtml(a2.name);
-      if (a2.type.startsWith("image/")) {
-        return `<div class="aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${escapeHtml(a2.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
+    this._attachmentsEl.innerHTML = this._attachments.map((a4) => {
+      const name = escapeHtml(a4.name);
+      if (a4.type.startsWith("image/")) {
+        return `<div class="aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${escapeHtml(a4.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
       }
-      return `<div class="aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${escapeHtml(this._fileExt(a2.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
+      return `<div class="aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${escapeHtml(this._fileExt(a4.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
     }).join("");
     if (!this._cfg.getHostHandlers().attachmentPreview) return;
     this._attachmentsEl.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
@@ -1453,14 +1670,14 @@ class AparteChatBubble extends HTMLElement {
     const buttons = [];
     if (this._role === "user") {
       if (config.user) {
-        for (const a2 of config.user) buttons.push(this._actionButtonHtml(a2, icons, locale));
+        for (const a4 of config.user) buttons.push(this._actionButtonHtml(a4, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.edit) buttons.push(this._actionButtonHtml("edit", icons, locale));
       }
     } else if (this._role === "assistant") {
       if (config.assistant) {
-        for (const a2 of config.assistant) buttons.push(this._actionButtonHtml(a2, icons, locale));
+        for (const a4 of config.assistant) buttons.push(this._actionButtonHtml(a4, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.retry) buttons.push(this._actionButtonHtml("retry", icons, locale));
@@ -1495,16 +1712,16 @@ class AparteChatBubble extends HTMLElement {
   /** Append the registered custom action buttons for this bubble's role. */
   _appendCustomActions(icons) {
     if (!this._actionBarEl) return;
-    for (const a2 of this._cfg.getActions("bubble")) {
-      const roles = a2.bubble?.roles ?? ["user", "assistant"];
+    for (const a4 of this._cfg.getActions("bubble")) {
+      const roles = a4.bubble?.roles ?? ["user", "assistant"];
       if (!roles.includes(this._role)) continue;
       const btn = document.createElement("button");
       btn.className = "aparte-action-btn aparte-action-custom";
-      btn.dataset["action"] = `custom:${a2.id}`;
-      btn.setAttribute("aria-label", a2.label);
-      btn.setAttribute("title", a2.label);
-      const fromProvider = icons[a2.icon];
-      btn.innerHTML = a2.icon.startsWith("<") ? a2.icon : typeof fromProvider === "function" ? fromProvider() : a2.iconFallback ?? "";
+      btn.dataset["action"] = `custom:${a4.id}`;
+      btn.setAttribute("aria-label", a4.label);
+      btn.setAttribute("title", a4.label);
+      const fromProvider = icons[a4.icon];
+      btn.innerHTML = a4.icon.startsWith("<") ? a4.icon : typeof fromProvider === "function" ? fromProvider() : a4.iconFallback ?? "";
       this._actionBarEl.appendChild(btn);
     }
   }
@@ -1570,12 +1787,12 @@ class AparteChatBubble extends HTMLElement {
         composed: true,
         detail
       }));
-      this._cfg.getActions("bubble").find((x2) => x2.id === actionId)?.onClick?.(e2);
+      this._cfg.getActions("bubble").find((x) => x.id === actionId)?.onClick?.(e2);
       return;
     }
     switch (action) {
       case "copy": {
-        const text = this._content || this._segments.map((s2) => s2.content ?? "").join("\n");
+        const text = this._content || this._segments.map((s) => s.content ?? "").join("\n");
         const icons = this._cfg.getIconProvider();
         const locale = this._cfg.getLocale();
         navigator.clipboard.writeText(text).then(() => {
@@ -2013,7 +2230,7 @@ class AparteChatViewport extends HTMLElement {
     if (!message.segments) {
       message.segments = [];
     }
-    const index = message.segments.findIndex((s2) => s2.id === segmentId);
+    const index = message.segments.findIndex((s) => s.id === segmentId);
     const segment = index === -1 ? void 0 : message.segments[index];
     if (segment && "content" in segment) {
       message.segments[index] = {
@@ -2075,15 +2292,15 @@ class AparteChatViewport extends HTMLElement {
     this._notifyBubble(messageId, "addSegment", stamped);
     this._autoScroll();
   }
-  updateSegment(a2, b2, c2) {
+  updateSegment(a4, b2, c2) {
     const clientForm = c2 === void 0 && typeof b2 === "object";
-    const messageId = clientForm ? this._activeMessageId() : a2;
-    const segmentId = clientForm ? a2 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a4;
+    const segmentId = clientForm ? a4 : b2;
     const updates = clientForm ? b2 : c2;
     if (!messageId) return;
     const message = this._repo.getMessageById(messageId);
     if (!message?.segments) return;
-    const segmentIndex = message.segments.findIndex((s2) => s2.id === segmentId);
+    const segmentIndex = message.segments.findIndex((s) => s.id === segmentId);
     if (segmentIndex !== -1) {
       const current = message.segments[segmentIndex];
       const stamped = stampSegmentOnUpdate(current, updates);
@@ -2091,14 +2308,14 @@ class AparteChatViewport extends HTMLElement {
       this._notifyBubble(messageId, "updateSegment", { segmentId, updates: stamped });
     }
   }
-  removeSegment(a2, b2) {
+  removeSegment(a4, b2) {
     const clientForm = b2 === void 0;
-    const messageId = clientForm ? this._activeMessageId() : a2;
-    const segmentId = clientForm ? a2 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a4;
+    const segmentId = clientForm ? a4 : b2;
     if (!messageId || !segmentId) return;
     const message = this._repo.getMessageById(messageId);
     if (message?.segments) {
-      const idx = message.segments.findIndex((s2) => s2.id === segmentId);
+      const idx = message.segments.findIndex((s) => s.id === segmentId);
       if (idx !== -1) {
         message.segments.splice(idx, 1);
         renumberSegments(message.segments);
@@ -2930,6 +3147,20 @@ class AparteComposer extends HTMLElement {
   _panelMode = "submit";
   _panelSubmitEnabled = false;
   _panelOnSubmit = null;
+  /**
+   * Who owns the one panel slot, and how to tell them they lost it.
+   *
+   * There is exactly one slot, `showPanel` empties it unconditionally, and nothing
+   * used to say whose it was. Three paths therefore closed a panel whose owner was
+   * still awaiting an answer, and none of them told the owner: a second `showPanel`,
+   * the owner-of-record's own `hidePanel`, and — the one that actually bit —
+   * `_handleMessageDone`, which fires on EVERY turn end. A question still open when a
+   * turn finished lost its panel while `<aparte-elicitation>` kept `_pending` set,
+   * so the request never settled AND every later request was short-circuited for the
+   * life of the page.
+   */
+  _panelToken = null;
+  _panelOnEvict = null;
   // Internal bus events that represent an observable STATE change — these are
   // mirrored to the public `aparte-composer-change` DOM event. `submit`/`cancel`
   // are actions, not state, and are covered by `aparte-send`/`aparte-cancel`.
@@ -3097,9 +3328,14 @@ class AparteComposer extends HTMLElement {
    * used to set on a child: an attribute is themeable, is visible to a consumer's
    * own rules, and does not clobber a `display` the consumer had set (the restore
    * wrote `''`, not the previous value).
+   *
+   * Returns the TOKEN for this panel. Pass it back to `hidePanel` so a presenter
+   * that has already lost the slot cannot close the panel that replaced it, and
+   * supply `onEvict` to be told when that happens — an owner that is not told is an
+   * owner whose promise nobody can settle.
    */
   showPanel(panel, options) {
-    this.hidePanel();
+    this._evictPanel();
     const inputEl = this.querySelector("aparte-composer-input");
     this.setAttribute("data-panel-active", "");
     panel.dataset["apartePanel"] = "true";
@@ -3112,10 +3348,31 @@ class AparteComposer extends HTMLElement {
     this._panelSubmitEnabled = options?.submitEnabled ?? false;
     this._panelMode = options?.mode ?? "submit";
     this._panelOnSubmit = options?.onSubmit ?? null;
+    this._panelOnEvict = options?.onEvict ?? null;
+    const token = Symbol("aparte-composer-panel");
+    this._panelToken = token;
     this._emit("panel-change", { active: true, submitEnabled: this._panelSubmitEnabled, mode: this._panelMode });
+    return token;
   }
-  /** Remove the panel and restore the composer's own controls. */
-  hidePanel() {
+  /**
+   * Remove the panel and restore the composer's own controls.
+   *
+   * With a `token`, this closes the panel only if that token still owns the slot —
+   * so a presenter settling late cannot tear down the panel that replaced it. With
+   * no token it closes whatever is there, which is what a consumer driving the
+   * composer directly means, and what `reset()` needs.
+   */
+  hidePanel(token) {
+    if (token !== void 0 && token !== this._panelToken) return;
+    this._teardownPanel();
+  }
+  /** Close the panel AND tell its owner, so a pending request never orphans. */
+  _evictPanel() {
+    const onEvict = this._panelOnEvict;
+    this._teardownPanel();
+    onEvict?.();
+  }
+  _teardownPanel() {
     const existing = this.querySelector("[data-aparte-panel]");
     if (existing) existing.remove();
     this.removeAttribute("data-panel-active");
@@ -3123,6 +3380,8 @@ class AparteComposer extends HTMLElement {
     this._panelSubmitEnabled = false;
     this._panelMode = "submit";
     this._panelOnSubmit = null;
+    this._panelOnEvict = null;
+    this._panelToken = null;
     this._emit("panel-change", { active: false, submitEnabled: false, mode: "submit" });
     this.focus();
   }
@@ -3200,7 +3459,7 @@ class AparteComposer extends HTMLElement {
   reset() {
     this.setValue("");
     this.clearAttachments();
-    if (this._panelActive) this.hidePanel();
+    if (this._panelActive) this._evictPanel();
   }
   /** Focus the input primitive inside this composer. */
   focus() {
@@ -3269,7 +3528,7 @@ class AparteComposer extends HTMLElement {
     if (!this._isForThisComposer(e2)) return;
     this._streaming = false;
     this._emit("streaming-change", { streaming: false });
-    if (this._panelActive) this.hidePanel();
+    if (this._panelActive) this._evictPanel();
   }
 }
 if (!customElements.get("aparte-composer")) {
@@ -3431,10 +3690,10 @@ class AparteComposerInput extends HTMLElement {
     }
   }
   _handleFocus() {
-    this.classList.add("is-focused");
+    this.classList.add("aparte-is-focused");
   }
   _handleBlur() {
-    this.classList.remove("is-focused");
+    this.classList.remove("aparte-is-focused");
   }
   _handlePaste(e2) {
     e2.preventDefault();
@@ -3477,9 +3736,9 @@ class AparteComposerInput extends HTMLElement {
   }
   _updatePlaceholder() {
     if (this._editor) {
-      const p2 = this._getPlaceholder();
-      this._editor.setAttribute("data-placeholder", p2);
-      this._editor.setAttribute("aria-label", p2);
+      const p = this._getPlaceholder();
+      this._editor.setAttribute("data-placeholder", p);
+      this._editor.setAttribute("aria-label", p);
     }
   }
   _updatePlaceholderVisibility() {
@@ -3605,7 +3864,7 @@ class AparteComposerSend extends HTMLElement {
     const label = advancing ? cfg.t("elicitationNext") || "Next" : cfg.t("submitButton") || "Submit";
     this._button.setAttribute("aria-label", label);
     this._button.setAttribute("title", label);
-    this._button.classList.remove("is-streaming");
+    this._button.classList.remove("aparte-is-streaming");
   }
   _handleClick(e2) {
     e2.preventDefault();
@@ -3621,7 +3880,7 @@ class AparteComposerSend extends HTMLElement {
     const label = resolveConfig(this).t("sendButton") || "Send";
     this._button.setAttribute("aria-label", label);
     this._button.setAttribute("title", label);
-    this._button.classList.remove("is-streaming");
+    this._button.classList.remove("aparte-is-streaming");
   }
   _syncStreamingState(streaming) {
     if (!this._button) return;
@@ -3631,7 +3890,7 @@ class AparteComposerSend extends HTMLElement {
       const label = resolveConfig(this).t("stopButton") || "Stop";
       this._button.setAttribute("aria-label", label);
       this._button.setAttribute("title", label);
-      this._button.classList.add("is-streaming");
+      this._button.classList.add("aparte-is-streaming");
     } else {
       this._syncState();
     }
@@ -3906,15 +4165,15 @@ class AparteComposerAddAttachment extends HTMLElement {
     const onDragOver = (e2) => {
       if (root.disabled) return;
       prevent(e2);
-      root.classList.add("is-dragover");
+      root.classList.add("aparte-is-dragover");
     };
     const onDragLeave = (e2) => {
       prevent(e2);
-      root.classList.remove("is-dragover");
+      root.classList.remove("aparte-is-dragover");
     };
     const onDrop = (e2) => {
       prevent(e2);
-      root.classList.remove("is-dragover");
+      root.classList.remove("aparte-is-dragover");
       if (root.disabled) return;
       const files = e2.dataTransfer?.files;
       if (files?.length) this._getRoot()?.addAttachments(files);
@@ -4207,180 +4466,6 @@ class AparteConversationList extends HTMLElement {
   }
 }
 if (!customElements.get("aparte-conversation-list")) customElements.define("aparte-conversation-list", AparteConversationList);
-class AparteElicitation extends HTMLElement {
-  _pending = null;
-  /**
-   * A turn ended — cancel the open question only if it was OUR turn.
-   *
-   * These two listeners sit on `window` and had no instance filter at all, so a
-   * Stop (or an error) in one chat cancelled the question a DIFFERENT chat was
-   * waiting on — and that chat's model was told the user had refused a question
-   * the user was still looking at. Same defect as the `compact()` handler that
-   * emptied both chats, which its four sibling handlers in `AparteClient` already
-   * guarded against.
-   *
-   * The leniency rule is the composer's, deliberately: an event with no
-   * `targetId` is for everyone (a single-chat app never sets one), and a chat we
-   * cannot identify accepts everything rather than becoming deaf. Only a
-   * MISMATCH is ignored.
-   */
-  _onTurnEnd = (e2) => {
-    const evtTargetId = e2.detail?.targetId;
-    const own = this._pendingTargetId();
-    if (evtTargetId && own && evtTargetId !== own) return;
-    this._cancelPending();
-  };
-  _unsubscribeConfig = null;
-  connectedCallback() {
-    this.style.display = "none";
-    this._unsubscribeConfig = subscribeConfigChange(this, () => this._relabelPending());
-    resolveConfig(this).setElicitationPresenter(this._present);
-    window.addEventListener("aparte-message-aborted", this._onTurnEnd);
-    window.addEventListener("aparte-message-error", this._onTurnEnd);
-  }
-  /**
-   * The boundary above us appeared, changed, or went away — move the
-   * registration with it.
-   *
-   * `connectedCallback` alone is not enough and cannot be: registering is a
-   * WRITE, and under all four wrappers it happens before `attachConfig` runs, so
-   * it lands on the global singleton. `requestUserInput()` then resolves the
-   * instance config, finds nothing, and answers the model `cancel` — the model
-   * hears the user refuse a question the user never saw.
-   *
-   * See {@link AparteConfigAware}.
-   */
-  aparteConfigChanged(next, previous) {
-    if (previous.getElicitationPresenter() === this._present) previous.setElicitationPresenter(null);
-    next.setElicitationPresenter(this._present);
-  }
-  disconnectedCallback() {
-    const cfg = resolveConfig(this);
-    if (cfg.getElicitationPresenter() === this._present) cfg.setElicitationPresenter(null);
-    window.removeEventListener("aparte-message-aborted", this._onTurnEnd);
-    window.removeEventListener("aparte-message-error", this._onTurnEnd);
-    this._unsubscribeConfig?.();
-    this._unsubscribeConfig = null;
-    this._cancelPending();
-  }
-  /**
-   * Re-apply the open question's strings, in place.
-   *
-   * Two owners, and both have to move or the panel goes bilingual: the panel's own
-   * defaults (`relabel`), and the Skip button, which this file builds and this file
-   * therefore has to re-text. The composer's one button is a third, and it already
-   * follows — `aparte-composer-send` remembers the panel state it was given.
-   */
-  _relabelPending() {
-    if (!this._pending) return;
-    const cfg = resolveConfig(this);
-    runWithConfig(cfg, () => this._pending.panel.relabel());
-    this._pending.skip.textContent = cfg.t("elicitationSkip");
-  }
-  _present = (request) => {
-    if (this._pending) return Promise.resolve({ action: "cancel" });
-    const composer = this._getComposer();
-    if (!composer) return Promise.resolve({ action: "cancel" });
-    return new Promise((resolve) => {
-      let done = false;
-      const settle = (result) => {
-        if (done) return;
-        done = true;
-        this._pending = null;
-        composer.hidePanel();
-        resolve(result);
-      };
-      if (request.signal) {
-        if (request.signal.aborted) {
-          settle({ action: "cancel" });
-          return;
-        }
-        request.signal.addEventListener("abort", () => settle({ action: "cancel" }), { once: true });
-      }
-      const cfg = resolveConfig(this);
-      const panel = runWithConfig(cfg, () => buildElicitationPanel(request.message, request.schema, () => {
-        composer.setPanelSubmitEnabled(panel.canProceed(), panel.mode());
-      }));
-      const skip = document.createElement("button");
-      skip.type = "button";
-      skip.className = "aparte-elic-skip";
-      skip.textContent = cfg.t("elicitationSkip");
-      skip.addEventListener("click", () => settle({ action: "decline" }));
-      panel.dismiss.appendChild(skip);
-      this._pending = { settle, composer, panel, skip };
-      composer.showPanel(panel.el, {
-        submitEnabled: panel.canProceed(),
-        mode: panel.mode(),
-        onSubmit: () => {
-          if (panel.mode() === "advance") {
-            panel.proceed();
-            composer.setPanelSubmitEnabled(panel.canProceed(), panel.mode());
-            return;
-          }
-          if (panel.isComplete()) settle({ action: "accept", content: panel.getContent() });
-        }
-      });
-      panel.focus();
-    });
-  };
-  _cancelPending() {
-    this._pending?.settle({ action: "cancel" });
-  }
-  /**
-   * The host id of the chat whose composer holds the open panel.
-   *
-   * Walks up from the composer rather than from `this`, because the panel lives in
-   * the composer and that is what the turn belongs to. Matches the hosts
-   * `aparte-chat-bubble._resolveTargetId()` matches, for the reason written there:
-   * Angular's wrapper root IS the `<aparte-chat>` element, while the plain-root
-   * wrappers render a `[data-aparte-chat]` div instead, so matching only the tag
-   * resolves `undefined` on three wrappers out of four.
-   */
-  _pendingTargetId() {
-    let el = this._pending?.composer ?? null;
-    while (el) {
-      const tag = el.tagName?.toLowerCase();
-      const isHost = tag === "aparte-chat" || tag === "aparte-chat-component" || el.hasAttribute?.("data-aparte-chat");
-      if (isHost && el.id) return el.id;
-      el = el.parentElement;
-    }
-    return void 0;
-  }
-  /**
-   * The composer to present in: the nearest one in an ancestor subtree, and
-   * nothing else.
-   *
-   * There used to be a `document.querySelector('aparte-composer')` fallback, which
-   * is the "first chat on the page" bug this repo has now fixed in four other
-   * places: on a page with two chats, an elicitation that could not find its own
-   * composer mounted its panel in the OTHER chat's — so one conversation's question
-   * appeared under the other conversation, and answering it resolved a tool call
-   * belonging to a chat the user was not looking at.
-   *
-   * Returning `null` instead resolves `cancel`, which is honest: nothing was
-   * shown, so nothing was answered. The warning names the fix, because this is a
-   * setup mistake and only the developer can correct it — the guide's own example
-   * puts `<aparte-elicitation>` inside `<aparte-chat>`.
-   */
-  _getComposer() {
-    let node = this.parentElement;
-    while (node) {
-      const composer = node.querySelector("aparte-composer");
-      if (composer && typeof composer.showPanel === "function") return composer;
-      const tag = node.tagName?.toLowerCase();
-      const isChatBoundary = tag === "aparte-chat" || tag === "aparte-chat-component" || node.hasAttribute?.("data-aparte-chat");
-      if (isChatBoundary) break;
-      node = node.parentElement;
-    }
-    console.warn(
-      "[aparte-elicitation] No <aparte-composer> in this element's subtree, so the request was cancelled — the model will read that as a refusal. Move <aparte-elicitation> inside the <aparte-chat> it belongs to. It is deliberately NOT borrowing another chat's composer: on a page with two chats that put the question under the wrong one."
-    );
-    return null;
-  }
-}
-if (typeof customElements !== "undefined" && !customElements.get("aparte-elicitation")) {
-  customElements.define("aparte-elicitation", AparteElicitation);
-}
 function registerAllComponents() {
   const _chat = customElements.get("aparte-chat");
   const _viewport = customElements.get("aparte-chat-viewport");
@@ -4421,53 +4506,55 @@ export {
   n as AparteConversationManager,
   o as AparteDirectTransport,
   AparteElicitation,
-  p as AparteError,
-  q as AparteErrorCode,
+  AparteElicitationAbortError,
+  q as AparteError,
+  r as AparteErrorCode,
   AparteMessageRepository,
   AparteOptgroup,
   AparteOption,
   AparteProgressSpinner,
   AparteSelect,
-  s as AparteStreamParser,
-  t as aparteGlobalConfig,
-  u as applyElementProps,
-  v as attachConfig,
+  t as AparteStreamParser,
+  u as aparteGlobalConfig,
+  v as applyElementProps,
+  w as attachConfig,
+  buildApprovalPanel,
   buildElicitationPanel,
-  x as collectRendererStyles,
-  y as contentToText,
-  z as contextConfig,
-  B as createAparteChatHandler,
-  C as createStreamAdapter,
+  z as collectRendererStyles,
+  B as contentToText,
+  C as contextConfig,
+  D as createAparteChatHandler,
+  E as createStreamAdapter,
   cssEscape,
-  E as declineDefaultRenderers,
-  F as defaultSanitizer,
-  G as deriveArtifactKind,
-  H as detachConfig,
+  G as declineDefaultRenderers,
+  H as defaultSanitizer,
+  I as deriveArtifactKind,
+  J as detachConfig,
   escapeAttr,
   escapeHtml,
-  K as filesToAttachments,
-  L as getAllRenderers,
+  M as filesToAttachments,
+  N as getAllRenderers,
   getSegmentRenderer,
   installDefaultRenderersOnce,
   isAwaitingReply,
-  P as isFormatAdapter,
-  Q as isSafeUrl,
-  R as isSegmentSettled,
-  S as parseAparteEventStream,
-  T as parseMarkdownToSegments,
+  R as isFormatAdapter,
+  S as isSafeUrl,
+  T as isSegmentSettled,
+  U as parseAparteEventStream,
+  V as parseMarkdownToSegments,
   populateBubbleFromMessage,
-  V as readableToAsyncIterable,
+  X as readableToAsyncIterable,
   registerAllComponents,
-  W as registerDefaultRenderers,
-  X as registerSegmentRenderer,
-  Y as requestUserInput,
+  Y as registerDefaultRenderers,
+  Z as registerSegmentRenderer,
+  _ as requestUserInput,
   resolveConfig,
   revokeAttachmentUrls,
   runWithConfig,
-  a0 as segmentDuration,
-  a1 as segmentTiming,
+  a2 as segmentDuration,
+  a3 as segmentTiming,
   subscribeConfigChange,
-  a3 as unregisterSegmentRenderer,
+  a5 as unregisterSegmentRenderer,
   uuid
 };
 //# sourceMappingURL=index.js.map