@aparte/core 0.7.1 → 0.9.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { R as resolveConfig, S as runWithConfig, F as getSegmentRenderer, U as installDefaultRenderersOnce, M as MessageRepository, G as isAwaitingReply, L as populateBubbleFromMessage, d as AparteConfig, r as buildElicitationPanel } from "./index-Dn7TH14G.js";
-import { A, a, b, c, e, f, g, h, i, B, C, D, j, k, l, m, n, o, p, q, s, t, u, v, w, x, y, z, E, H, I, J, K, N, O, P, Q, T } from "./index-Dn7TH14G.js";
+import { H as escapeAttr, Y as resolveConfig, C as cssEscape, _ as runWithConfig, I as escapeHtml, L as getSegmentRenderer, M as installDefaultRenderersOnce, q as AparteMessageRepository, a2 as stampSegmentActivity, a3 as stampSegmentOnInsert, a4 as stampSegmentOnUpdate, a5 as renumberSegments, a6 as openSegmentIds, a7 as isTerminalStatus, N as isAwaitingReply, T as populateBubbleFromMessage, a1 as uuid, Z as revokeAttachmentUrls, v as buildElicitationPanel } from "./index-hQQljwfX.js";
+import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, r, s, t, u, w, x, y, z, B, D, E, F, G, J, K, O, P, Q, R, S, U, V, W, X, $, a0 } from "./index-hQQljwfX.js";
 class AparteOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected", "data-status"];
@@ -192,6 +192,22 @@ class AparteSelect extends HTMLElement {
   _searchInput = null;
   _observer = null;
   // Bound handlers for cleanup
+  /**
+   * Bound, like its two neighbours below — because an inline arrow on `this` can
+   * never be removed.
+   *
+   * `_setupEventListeners()` runs on EVERY `connectedCallback`, and `_render()`'s
+   * idempotency guard means the host element survives a re-connect. So each move
+   * of the element (a portal, a Vue teleport, any framework re-parent) added
+   * another option-click listener: measured, one click fired the change handler
+   * FIVE times after five re-connects. `disconnectedCallback` removed the two
+   * document-level handlers and could not touch this one.
+   *
+   * This is verbatim the bug class `aparte-chat-viewport` documents having fixed
+   * for its own listeners; a repo sweep found this as the last inline-arrow
+   * listener on a persistent node.
+   */
+  _boundHandleOptionClick = this._handleOptionClick.bind(this);
   _boundHandleDocumentClick = this._handleDocumentClick.bind(this);
   _boundHandleKeydown = this._handleKeydown.bind(this);
   static get observedAttributes() {
@@ -205,6 +221,7 @@ class AparteSelect extends HTMLElement {
     this._setupMutationObserver();
   }
   disconnectedCallback() {
+    this.removeEventListener("click", this._boundHandleOptionClick);
     document.removeEventListener("click", this._boundHandleDocumentClick);
     document.removeEventListener("keydown", this._boundHandleKeydown);
     this._observer?.disconnect();
@@ -368,12 +385,8 @@ class AparteSelect extends HTMLElement {
         this._openDropdown();
       }
     });
-    this.addEventListener("click", (e2) => {
-      const option = e2.target.closest("aparte-option");
-      if (option && !option.hasAttribute("disabled")) {
-        this._selectOption(option);
-      }
-    });
+    this.removeEventListener("click", this._boundHandleOptionClick);
+    this.addEventListener("click", this._boundHandleOptionClick);
     this._searchInput?.addEventListener("input", (e2) => {
       const query = e2.target.value.toLowerCase();
       this._filterOptions(query);
@@ -381,6 +394,12 @@ class AparteSelect extends HTMLElement {
     document.addEventListener("click", this._boundHandleDocumentClick);
     document.addEventListener("keydown", this._boundHandleKeydown);
   }
+  _handleOptionClick(e2) {
+    const option = e2.target.closest("aparte-option");
+    if (option && !option.hasAttribute("disabled")) {
+      this._selectOption(option);
+    }
+  }
   _handleDocumentClick(e2) {
     if (!this.contains(e2.target)) {
       this._closeDropdown();
@@ -660,7 +679,7 @@ class AparteChat extends HTMLElement {
     if (this.hasAttribute("framework-managed")) return;
     if (this.querySelector("aparte-chat-viewport")) return;
     const placeholder = this.getAttribute("placeholder");
-    const composerAttrs = (placeholder !== null ? ` placeholder="${this._escapeAttr(placeholder)}"` : "") + (this.hasAttribute("disabled") ? " disabled" : "");
+    const composerAttrs = (placeholder !== null ? ` placeholder="${escapeAttr(placeholder)}"` : "") + (this.hasAttribute("disabled") ? " disabled" : "");
     const attachments = this.hasAttribute("attachments");
     this.innerHTML = `
       <aparte-chat-viewport></aparte-chat-viewport>
@@ -723,27 +742,21 @@ class AparteChat extends HTMLElement {
     const empty = !viewport || !viewport.querySelector("aparte-chat-bubble");
     this.toggleAttribute("data-empty", empty);
   }
-  _escapeAttr(value) {
-    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
-  }
 }
 if (!customElements.get("aparte-chat")) {
   customElements.define("aparte-chat", AparteChat);
 }
-function cssEscape(value) {
-  return value.replace(/["\\]/g, "\\$&");
-}
 let _warnedNoRenderer = false;
 function warnMissingRenderer(type) {
   if (_warnedNoRenderer) return;
   _warnedNoRenderer = true;
   console.warn(`[aparte] No renderer for segment "${type}". Register one with registerSegmentRenderer({ type: '${type}', render }) from @aparte/core — see https://apartejs.dev/guides/customization/#custom-segment-types`);
 }
-function resolveSegmentRenderer(type) {
-  const renderer = getSegmentRenderer(type);
+function resolveSegmentRenderer(type, config) {
+  const renderer = getSegmentRenderer(type, config);
   if (renderer) return renderer;
-  installDefaultRenderersOnce();
-  return getSegmentRenderer(type);
+  installDefaultRenderersOnce(config);
+  return getSegmentRenderer(type, config);
 }
 function segmentRenderResultToElement(result) {
   if (result instanceof HTMLElement) return result;
@@ -820,9 +833,11 @@ class AparteChatBubble extends HTMLElement {
     this._updateContent();
     this._updateTimestamp(this.getAttribute("timestamp"));
     window.addEventListener("aparte-config-change", this._onConfigChange);
+    this.addEventListener("click", this._onBranchPickerClick);
   }
   disconnectedCallback() {
     window.removeEventListener("aparte-config-change", this._onConfigChange);
+    this.removeEventListener("click", this._onBranchPickerClick);
     if (this._avatarCleanup) {
       try {
         this._avatarCleanup();
@@ -909,12 +924,26 @@ class AparteChatBubble extends HTMLElement {
     return [...this._segments];
   }
   /** Remove a segment by id (e.g. to discard a transient waiting indicator) */
+  /**
+   * Scoped to DIRECT children on purpose.
+   *
+   * Segments are appended as direct children of the container, but a descendant
+   * query returns the first match in document order — and sanitized model
+   * markdown renders inside that same container, with `data-*` attributes
+   * deliberately preserved (they are inert). So a decoy `data-segment-id` planted
+   * in an earlier segment's prose used to win over the real segment element.
+   *
+   * Parser ids are unguessable UUIDs, but a tool segment is `tool-${toolCallId}`
+   * and the MODEL chooses that id — so this was reachable, and pointing an update
+   * at a decoy left a rejected tool rendering as still-running: a spoof against
+   * the human-in-the-loop control.
+   */
   removeSegment(segmentId) {
     const index = this._segments.findIndex((s2) => s2.id === segmentId);
     if (index !== -1) {
       this._segments.splice(index, 1);
     }
-    const el = this._segmentsEl?.querySelector(`[data-segment-id="${cssEscape(segmentId)}"]`);
+    const el = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
     el?.remove();
     this._updateWaiting();
   }
@@ -928,7 +957,7 @@ class AparteChatBubble extends HTMLElement {
    *
    * This is the *precondition* for the info ("i") action, not the trigger: the
    * button appears only if the app also declared it wants it —
-   * `AparteConfig.setBubbleActions({ info: true })` — because the stats popover it
+   * `aparteGlobalConfig.setBubbleActions({ info: true })` — because the stats popover it
    * opens (`aparte-message-info`) is the app's, and core has none. Without usage
    * there is nothing to show, so the button never renders either way.
    */
@@ -983,7 +1012,7 @@ class AparteChatBubble extends HTMLElement {
       console.warn(`[AparteChatBubble] _appendSegmentEl ABORT: _segmentsEl is null`);
       return;
     }
-    const renderer = resolveSegmentRenderer(segment.type);
+    const renderer = resolveSegmentRenderer(segment.type, this._cfg);
     if (renderer) {
       const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
       if (el) {
@@ -1001,12 +1030,12 @@ class AparteChatBubble extends HTMLElement {
     this._reflectError();
   }
   _applySegmentUpdate(segmentId, segment, updates) {
-    const el = this._segmentsEl?.querySelector(`[data-segment-id="${cssEscape(segmentId)}"]`);
+    const el = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
     if (!el) {
       this._renderSegments();
       return;
     }
-    const renderer = resolveSegmentRenderer(segment.type);
+    const renderer = resolveSegmentRenderer(segment.type, this._cfg);
     if (!renderer) return;
     if (renderer.update) {
       runWithConfig(this._cfg, () => renderer.update(el, segment));
@@ -1056,11 +1085,11 @@ class AparteChatBubble extends HTMLElement {
       else this.innerHTML = out;
     } else {
       this.innerHTML = `
-      <div class="aparte-message" data-role="${role}" role="article" aria-label="${this._getAriaLabel()}">
-        <div class="aparte-avatar" data-role="${role}"></div>
+      <div class="aparte-message" data-role="${escapeAttr(role)}" role="article" aria-label="${escapeAttr(this._getAriaLabel())}">
+        <div class="aparte-avatar" data-role="${escapeAttr(role)}"></div>
         <div class="aparte-body">
           <div class="aparte-header">
-            <span class="aparte-name">${this._escapeHtml(displayName)}</span>
+            <span class="aparte-name">${escapeHtml(displayName)}</span>
             <span class="aparte-timestamp"></span>
           </div>
           <div class="aparte-attachments" hidden></div>
@@ -1074,11 +1103,11 @@ class AparteChatBubble extends HTMLElement {
           </div>
           <div class="aparte-footer">
             <div class="aparte-branch-picker" hidden>
-              <button class="aparte-branch-prev" aria-label="${this._cfg.getLocale().previousResponse ?? "Previous response"}">&#8249;</button>
+              <button class="aparte-branch-prev" aria-label="${escapeAttr(this._cfg.getLocale().previousResponse ?? "Previous response")}">&#8249;</button>
               <span class="aparte-branch-label">1 / 1</span>
-              <button class="aparte-branch-next" aria-label="${this._cfg.getLocale().nextResponse ?? "Next response"}">&#8250;</button>
+              <button class="aparte-branch-next" aria-label="${escapeAttr(this._cfg.getLocale().nextResponse ?? "Next response")}">&#8250;</button>
             </div>
-            <div class="aparte-action-bar" role="toolbar" aria-label="${this._cfg.getLocale().messageActions ?? "Message actions"}"></div>
+            <div class="aparte-action-bar" role="toolbar" aria-label="${escapeAttr(this._cfg.getLocale().messageActions ?? "Message actions")}"></div>
           </div>
         </div>
       </div>
@@ -1090,7 +1119,6 @@ class AparteChatBubble extends HTMLElement {
     this._actionBarEl = this.querySelector(".aparte-action-bar");
     this._branchPickerEl = this.querySelector(".aparte-branch-picker");
     this._footerEl = this.querySelector(".aparte-footer");
-    this._setupBranchPickerListeners();
     this._updateActionBar();
     this._renderAvatar();
     if (this._streaming) this._updateStreaming(true);
@@ -1204,7 +1232,7 @@ class AparteChatBubble extends HTMLElement {
     if (!this._segmentsEl) return;
     this._segmentsEl.innerHTML = "";
     for (const segment of this._segments) {
-      const renderer = resolveSegmentRenderer(segment.type);
+      const renderer = resolveSegmentRenderer(segment.type, this._cfg);
       if (renderer) {
         const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
         if (el) {
@@ -1276,11 +1304,11 @@ class AparteChatBubble extends HTMLElement {
       return;
     }
     this._attachmentsEl.innerHTML = this._attachments.map((a2) => {
-      const name = this._escapeHtml(a2.name);
+      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="${this._escapeHtml(a2.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
+        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>`;
       }
-      return `<div class="aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${this._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(a2.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) => {
@@ -1312,22 +1340,39 @@ class AparteChatBubble extends HTMLElement {
   // ─────────────────────────────────────────────────────────────────────────
   // Branch Picker
   // ─────────────────────────────────────────────────────────────────────────
-  _setupBranchPickerListeners() {
-    const prevBtn = this._branchPickerEl?.querySelector(".aparte-branch-prev");
-    const nextBtn = this._branchPickerEl?.querySelector(".aparte-branch-next");
-    const dispatchNav = (direction) => {
-      const messageId = this.getAttribute("message-id");
-      if (!messageId) return;
-      const detail = { messageId, direction };
-      this.dispatchEvent(new CustomEvent("aparte-branch-navigate", {
-        bubbles: true,
-        composed: true,
-        detail
-      }));
-    };
-    prevBtn?.addEventListener("click", () => dispatchNav("prev"));
-    nextBtn?.addEventListener("click", () => dispatchNav("next"));
-  }
+  /**
+   * The branch arrows are handled by DELEGATION, on this element, bound once.
+   *
+   * They used to get a fresh listener each, attached by `_render()` to the buttons
+   * `_render()` had just created. So a click that landed while a re-render was
+   * swapping those nodes hit an element about to be discarded, and did nothing at
+   * all — not late, nothing. Invisible on a fast machine; reproducible on
+   * WebKit-Linux in CI, where `‹` left the picker on "2 / 2" and a 20-second
+   * assertion watched it stay there.
+   *
+   * Delegation makes `_render()` irrelevant to it: the listener lives on the host,
+   * which is never replaced, and `closest()` finds whichever button exists at the
+   * moment of the click. It is also less work — one listener per bubble instead of
+   * two per bubble per render.
+   *
+   * Bound in `connectedCallback` and removed in `disconnectedCallback` as a stable
+   * field, because an inline arrow re-added on every re-connect is how this repo has
+   * stacked listeners twice before (the viewport, and `aparte-select`).
+   */
+  _onBranchPickerClick = (event) => {
+    const target = event.target;
+    const button = target?.closest?.(".aparte-branch-prev, .aparte-branch-next");
+    if (!button || !this.contains(button)) return;
+    const direction = button.classList.contains("aparte-branch-prev") ? "prev" : "next";
+    const messageId = this.getAttribute("message-id");
+    if (!messageId) return;
+    const detail = { messageId, direction };
+    this.dispatchEvent(new CustomEvent("aparte-branch-navigate", {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+  };
   _updateBranchPicker() {
     if (!this._branchPickerEl) return;
     if (this._siblingCount <= 1 || this._role !== "assistant") {
@@ -1428,28 +1473,28 @@ class AparteChatBubble extends HTMLElement {
     switch (action) {
       case "copy": {
         const l2 = locale.copy ?? "Copy";
-        return `<button class="aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${l2}" title="${l2}">${icons.copy()}</button>`;
+        return `<button class="aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.copy()}</button>`;
       }
       case "edit": {
         const l2 = locale.edit ?? "Edit message";
-        return `<button class="aparte-action-btn aparte-action-edit" data-action="edit" aria-label="${l2}" title="${l2}">${icons.edit()}</button>`;
+        return `<button class="aparte-action-btn aparte-action-edit" data-action="edit" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.edit()}</button>`;
       }
       case "retry": {
         const l2 = locale.retry ?? "Retry";
-        return `<button class="aparte-action-btn aparte-action-retry" data-action="retry" aria-label="${l2}" title="${l2}">${icons.retry()}</button>`;
+        return `<button class="aparte-action-btn aparte-action-retry" data-action="retry" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.retry()}</button>`;
       }
       case "thumbUp": {
         const l2 = locale.feedbackPositive ?? "Good response";
-        return `<button class="aparte-action-btn aparte-action-feedback-pos" data-action="feedback-positive" aria-label="${l2}" title="${l2}">${icons.thumbUp()}</button>`;
+        return `<button class="aparte-action-btn aparte-action-feedback-pos" data-action="feedback-positive" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbUp()}</button>`;
       }
       case "thumbDown": {
         const l2 = locale.feedbackNegative ?? "Bad response";
-        return `<button class="aparte-action-btn aparte-action-feedback-neg" data-action="feedback-negative" aria-label="${l2}" title="${l2}">${icons.thumbDown()}</button>`;
+        return `<button class="aparte-action-btn aparte-action-feedback-neg" data-action="feedback-negative" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbDown()}</button>`;
       }
       case "info": {
         if (!this._usage) return "";
         const l2 = locale.messageInfo ?? "Details";
-        return `<button class="aparte-action-btn aparte-action-info" data-action="info" aria-label="${l2}" title="${l2}">${INFO_ICON_SVG}</button>`;
+        return `<button class="aparte-action-btn aparte-action-info" data-action="info" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${INFO_ICON_SVG}</button>`;
       }
       default:
         return "";
@@ -1461,7 +1506,7 @@ class AparteChatBubble extends HTMLElement {
     const locale = this._cfg.getLocale();
     const saveLabel = locale.editConfirm ?? "Save";
     const cancelLabel = locale.editCancel ?? "Cancel";
-    this._actionBarEl.innerHTML = `<button class="aparte-action-btn aparte-action-edit-save" data-action="edit-save" aria-label="${saveLabel}" title="${saveLabel}">${this._cfg.getIcon("check")}</button><button class="aparte-action-btn aparte-action-edit-cancel" data-action="edit-cancel" aria-label="${cancelLabel}" title="${cancelLabel}">${this._cfg.getIcon("close")}</button>`;
+    this._actionBarEl.innerHTML = `<button class="aparte-action-btn aparte-action-edit-save" data-action="edit-save" aria-label="${escapeAttr(saveLabel)}" title="${escapeAttr(saveLabel)}">${this._cfg.getIcon("check")}</button><button class="aparte-action-btn aparte-action-edit-cancel" data-action="edit-cancel" aria-label="${escapeAttr(cancelLabel)}" title="${escapeAttr(cancelLabel)}">${this._cfg.getIcon("close")}</button>`;
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
       btn.addEventListener("click", (e2) => this._handleActionClick(e2));
     });
@@ -1636,9 +1681,6 @@ class AparteChatBubble extends HTMLElement {
   // ─────────────────────────────────────────────────────────────────────────
   // Utilities
   // ─────────────────────────────────────────────────────────────────────────
-  _escapeHtml(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-  }
   _updateStreaming(streaming) {
     const wasStreaming = this._streaming;
     this._streaming = streaming;
@@ -1664,12 +1706,20 @@ class AparteChatStatus extends HTMLElement {
   static get observedAttributes() {
     return ["visible", "text"];
   }
-  _cfg;
+  /**
+   * Resolved LIVE, not cached. Caching it at connect made this element
+   * permanently deaf to its own instance: `_onConfigChange` filters on
+   * `detail.config !== this._cfg`, so once `_cfg` had latched the global config no
+   * change for the real instance ever matched, and the filter meant to isolate
+   * chats became the thing that silenced one.
+   */
+  get _cfg() {
+    return resolveConfig(this);
+  }
   constructor() {
     super();
   }
   connectedCallback() {
-    this._cfg = resolveConfig(this);
     this._render();
     window.addEventListener("aparte-config-change", this._onConfigChange);
   }
@@ -1792,7 +1842,7 @@ class AparteChatViewport extends HTMLElement {
   _spacerRafId = null;
   _spacerFrozenUntil = 0;
   _layoutTransitionMs = 0;
-  _repo = new MessageRepository();
+  _repo = new AparteMessageRepository();
   _isAutoScrollEnabled = true;
   _scrollThreshold = 50;
   /** When true, the next _autoScroll() call uses smooth instead of instant, then resets. */
@@ -1928,7 +1978,13 @@ class AparteChatViewport extends HTMLElement {
     if (segment && "content" in segment) {
       message.segments[index] = {
         ...segment,
-        content: segment.content + chunk
+        content: segment.content + chunk,
+        // Content arriving IS the segment's activity, so this is what
+        // `endedAt` measures. Without it a thinking block's end would be
+        // whenever someone happened to notice it had stopped — the end of
+        // the turn, or the start of the next segment — and both of those
+        // silently fold the waiting that followed into the duration.
+        ...stampSegmentActivity(segment)
       };
     }
     this.dispatchEvent(new CustomEvent("aparte-segment-update", {
@@ -1947,7 +2003,17 @@ class AparteChatViewport extends HTMLElement {
    * framework wrapper's host element.
    */
   _activeMessageId() {
-    return this._repo.headId;
+    const head = this._repo.headId;
+    const streaming = this._streamingMessageId();
+    if (streaming !== null && streaming !== head) return null;
+    return head;
+  }
+  /** The id of the message currently streaming, if any. */
+  _streamingMessageId() {
+    for (const message of this._repo.getMessages()) {
+      if (message.isStreaming) return message.id;
+    }
+    return null;
   }
   addSegment(messageIdOrSegment, maybeSegment) {
     const messageId = typeof messageIdOrSegment === "string" ? messageIdOrSegment : this._activeMessageId();
@@ -1957,8 +2023,9 @@ class AparteChatViewport extends HTMLElement {
     if (!message.segments) {
       message.segments = [];
     }
-    message.segments.push(segment);
-    this._notifyBubble(messageId, "addSegment", segment);
+    const stamped = stampSegmentOnInsert(message.segments, segment, messageId);
+    message.segments.push(stamped);
+    this._notifyBubble(messageId, "addSegment", stamped);
     this._autoScroll();
   }
   updateSegment(a2, b2, c2) {
@@ -1971,11 +2038,13 @@ class AparteChatViewport extends HTMLElement {
     if (!message?.segments) return;
     const segmentIndex = message.segments.findIndex((s2) => s2.id === segmentId);
     if (segmentIndex !== -1) {
+      const current = message.segments[segmentIndex];
+      const stamped = stampSegmentOnUpdate(current, updates);
       message.segments[segmentIndex] = {
-        ...message.segments[segmentIndex],
-        ...updates
+        ...current,
+        ...stamped
       };
-      this._notifyBubble(messageId, "updateSegment", { segmentId, updates });
+      this._notifyBubble(messageId, "updateSegment", { segmentId, updates: stamped });
     }
   }
   removeSegment(a2, b2) {
@@ -1986,7 +2055,10 @@ class AparteChatViewport extends HTMLElement {
     const message = this._repo.getMessageById(messageId);
     if (message?.segments) {
       const idx = message.segments.findIndex((s2) => s2.id === segmentId);
-      if (idx !== -1) message.segments.splice(idx, 1);
+      if (idx !== -1) {
+        message.segments.splice(idx, 1);
+        renumberSegments(message.segments);
+      }
     }
     this._notifyBubble(messageId, "removeSegment", segmentId);
   }
@@ -2007,7 +2079,7 @@ class AparteChatViewport extends HTMLElement {
   /**
    * Persist token usage on a message and propagate to the live bubble, which is
    * what allows the info ("i") action to render — provided the app declared it
-   * with `AparteConfig.setBubbleActions({ info: true })`; it is off by default,
+   * with `aparteGlobalConfig.setBubbleActions({ info: true })`; it is off by default,
    * since the popover it opens belongs to the app.
    */
   setUsage(messageId, usage) {
@@ -2026,13 +2098,26 @@ class AparteChatViewport extends HTMLElement {
     if (message) {
       message.isStreaming = false;
       message.status = "completed";
-      message.segments?.forEach((s2) => {
-        s2.isStreaming = false;
-      });
+      this._settleSegments(messageId, message);
       this._notifyBubble(messageId, "complete", { status: "completed" });
       this._recalculateSpacer();
     }
   }
+  /**
+   * Close a finished message's still-open segments, one `updateSegment` each.
+   *
+   * Deliberately NOT a loop that writes `isStreaming` onto the objects: that path
+   * stamps the model and tells the bubble nothing, so a renderer never learns its
+   * segment settled — no `endedAt` in the rendered label, and no final Markdown
+   * flush either. Going through `updateSegment` reuses the one path that does
+   * both.
+   */
+  _settleSegments(messageId, message) {
+    if (!message.segments) return;
+    for (const id of openSegmentIds(message.segments)) {
+      this.updateSegment(messageId, id, { isStreaming: false });
+    }
+  }
   /**
    * Atomic update for a message by ID
    * Supports updating content, status, segments, and other metadata
@@ -2043,6 +2128,7 @@ class AparteChatViewport extends HTMLElement {
     Object.assign(message, updates);
     if (updates.status) {
       message.isStreaming = updates.status === "streaming" || updates.status === "pending";
+      if (isTerminalStatus(updates.status)) this._settleSegments(messageId, message);
     }
     this._notifyBubble(messageId, "update", updates);
     this._autoScroll();
@@ -2125,7 +2211,7 @@ class AparteChatViewport extends HTMLElement {
     const meta = this._repo.getMessage(messageId);
     if (!meta) return 0;
     const newMsg = {
-      id: crypto.randomUUID(),
+      id: uuid(),
       role: "assistant",
       content: "",
       status: "pending",
@@ -2235,7 +2321,7 @@ class AparteChatViewport extends HTMLElement {
    *   branch arrows on already-rendered bubbles.
    */
   importTree(tree) {
-    this.clearAll();
+    this.clearAll({ revokeAttachments: false });
     this._repo.import(tree);
     this._reRenderActivePath();
   }
@@ -2248,7 +2334,12 @@ class AparteChatViewport extends HTMLElement {
    * so desynchronises the framework's view tree from the live DOM and the
    * next change-detection pass throws `NotFoundError` on insertBefore.
    */
-  clearAll() {
+  clearAll(options) {
+    if (options?.revokeAttachments !== false) {
+      for (const message of this._repo.getMessages()) {
+        revokeAttachmentUrls(message.attachments);
+      }
+    }
     this._repo.clear();
     if (!this._frameworkManagedDOM) {
       const wrapper = this.querySelector(".aparte-messages-wrapper");
@@ -2277,7 +2368,7 @@ class AparteChatViewport extends HTMLElement {
    * build chat history).
    */
   setMessages(messages) {
-    this.clearAll();
+    this.clearAll({ revokeAttachments: false });
     for (const m2 of messages) {
       this.appendMessage(m2);
     }
@@ -2535,18 +2626,27 @@ class AparteChatViewport extends HTMLElement {
       this._bottomSpacer.style.height = `${px}px`;
     }
   }
+  // Bound fields, not inline arrows: a custom element is re-connected every
+  // time it is MOVED in the DOM (a portal, a dialog, a framework re-parenting),
+  // so `_setupEventListeners` runs again each time. An inline arrow can never
+  // be handed to `removeEventListener`, so it just accumulates — one branch
+  // click then ran N handlers, N active-path re-renders and N storage writes
+  // through the conversation controller. The window listeners next to these
+  // were always removed properly; these two, attached to `this`, were not.
+  _onScrollBtnClick = () => {
+    this._isAutoScrollEnabled = true;
+    this._smoothScrollToBottom();
+    this._updateScrollButton();
+  };
+  _onBranchNavigate = (e2) => {
+    const evt = e2;
+    evt.stopPropagation();
+    this.navigateBranch(evt.detail.messageId, evt.detail.direction);
+  };
   _setupEventListeners() {
     this._container?.addEventListener("scroll", this._handleScroll, { passive: true });
-    this._scrollBtn?.addEventListener("click", () => {
-      this._isAutoScrollEnabled = true;
-      this._smoothScrollToBottom();
-      this._updateScrollButton();
-    });
-    this.addEventListener("aparte-branch-navigate", (e2) => {
-      const evt = e2;
-      evt.stopPropagation();
-      this.navigateBranch(evt.detail.messageId, evt.detail.direction);
-    });
+    this._scrollBtn?.addEventListener("click", this._onScrollBtnClick);
+    this.addEventListener("aparte-branch-navigate", this._onBranchNavigate);
   }
   _setupObservers() {
     this._resizeObserver = new ResizeObserver(() => {
@@ -2592,6 +2692,41 @@ class AparteChatViewport extends HTMLElement {
   _scrollToBottom() {
     if (!this._container) return;
     this._container.scrollTop = this._container.scrollHeight;
+    this._settleAtBottom(4);
+  }
+  /**
+   * Confirm over the next few frames that we actually reached the bottom.
+   *
+   * One assignment is not enough, and the reason is measured rather than guessed.
+   * A timeline of a streamed turn on Safari (framework mode) recorded the content
+   * settling in TWO layout passes — 1118 → 1121 → 1152 px. `scrollTop =
+   * scrollHeight` ran against the middle one, clamped to that layout's max (603),
+   * and nothing ran afterwards: the last 31px never closed. Auto-follow stayed
+   * armed the whole time, so the component was not disarmed — it was SATISFIED.
+   * `_isAtBottom()` answers "yes" for any gap under `_scrollThreshold` (50), which
+   * is the right rule for keeping auto-follow armed and the wrong one as a
+   * definition of "anchored".
+   *
+   * Ruled out on the way here, so nobody pays for it twice: not a WebKit
+   * padding-accounting difference (a probe writing `scrollTop = 1e7` reached
+   * exactly `scrollHeight - clientHeight`), not a missing `characterData`
+   * mutation, and not a child resize a ResizeObserver could see.
+   *
+   * A BOUNDED retry, not one corrective frame: a single frame lands on the same
+   * stale layout and was measured leaving a wider gap than doing nothing. Bounded
+   * so it always terminates; re-reads `_isAutoScrollEnabled` every frame so a
+   * reader who scrolls away mid-settle is left alone; stops as soon as the gap is
+   * closed, so the common case costs one frame that does nothing.
+   */
+  _settleAtBottom(framesLeft) {
+    if (framesLeft <= 0) return;
+    requestAnimationFrame(() => {
+      if (!this._container || !this._isAutoScrollEnabled) return;
+      const max = this._container.scrollHeight - this._container.clientHeight;
+      if (max - this._container.scrollTop <= 1) return;
+      this._container.scrollTop = max;
+      this._settleAtBottom(framesLeft - 1);
+    });
   }
   _smoothScrollToBottom() {
     if (!this._container) return;
@@ -2684,7 +2819,7 @@ class AparteChatViewport extends HTMLElement {
    * Cap the number of rendered bubbles in the DOM (perf ceiling only).
    *
    * Drops the oldest `<aparte-chat-bubble>` elements beyond `_maxRenderedBubbles`
-   * from the DOM. It **never** touches the MessageRepository — the conversation
+   * from the DOM. It **never** touches the AparteMessageRepository — the conversation
    * model and its persistence snapshot stay complete (retention/eviction is a
    * consumer/persistence concern, not the viewport's). No-op when a framework
    * owns the DOM.
@@ -2703,11 +2838,13 @@ class AparteChatViewport extends HTMLElement {
     if (this._warnedMaxMessagesDeprecation) return;
     this._warnedMaxMessagesDeprecation = true;
     console.warn(
-      "[Aparte] `maxMessages` / `max-messages` on aparte-chat-viewport is deprecated: it used to silently evict messages from the conversation model. It now only caps rendered bubbles in the DOM — use `maxRenderedBubbles` / `max-rendered-bubbles`. For actual history retention, configure it on your ConversationManager instead."
+      "[Aparte] `maxMessages` / `max-messages` on aparte-chat-viewport is deprecated: it used to silently evict messages from the conversation model. It now only caps rendered bubbles in the DOM — use `maxRenderedBubbles` / `max-rendered-bubbles`. For actual history retention, configure it on your AparteConversationManager instead."
     );
   }
   _cleanup() {
     this._container?.removeEventListener("scroll", this._handleScroll);
+    this._scrollBtn?.removeEventListener("click", this._onScrollBtnClick);
+    this.removeEventListener("aparte-branch-navigate", this._onBranchNavigate);
     this._resizeObserver?.disconnect();
     this._mutationObserver?.disconnect();
     this._resizeObserver = null;
@@ -2727,6 +2864,8 @@ class AparteComposer extends HTMLElement {
   _attachments = [];
   _listeners = /* @__PURE__ */ new Map();
   _panelActive = false;
+  /** What the send button means while a panel is up — see `showPanel`. */
+  _panelMode = "submit";
   _panelSubmitEnabled = false;
   _panelOnSubmit = null;
   // Internal bus events that represent an observable STATE change — these are
@@ -2743,8 +2882,25 @@ class AparteComposer extends HTMLElement {
   _onMessageStart = this._handleMessageStart.bind(this);
   _onMessageDone = this._handleMessageDone.bind(this);
   /** Config governing THIS composer (nearest instance boundary, else global). */
-  _cfg = AparteConfig;
-  _configUnsub = null;
+  /**
+   * Resolved LIVE, not cached at connect.
+   *
+   * A wrapper runs `AparteChatHost.bind()` — which calls `attachConfig` — from its
+   * POST-mount hook, so this element connects BEFORE the boundary exists. Caching
+   * here latched the global config forever: an instance `config` carrying an RTL
+   * locale flipped the transcript and not the composer, and the
+   * `requireModelSelection` gate was read off the wrong object. `aparte-chat-bubble`
+   * has always resolved live, and its JSDoc names this exact race.
+   */
+  get _cfg() {
+    return resolveConfig(this);
+  }
+  /** Only OUR config: a change on another chat's instance must not touch us. */
+  _onConfigChangeEvent = (e2) => {
+    const detail = e2.detail;
+    if (detail?.config && detail.config !== this._cfg) return;
+    this._onConfigChange();
+  };
   /** True while `requireModelSelection` is on AND no model is selected — blocks send. */
   _modelGated = false;
   _onConfigChange = () => {
@@ -2776,8 +2932,7 @@ class AparteComposer extends HTMLElement {
     window.addEventListener("aparte-message-done", this._onMessageDone);
     window.addEventListener("aparte-message-error", this._onMessageDone);
     window.addEventListener("aparte-message-aborted", this._onMessageDone);
-    this._cfg = resolveConfig(this);
-    this._configUnsub = this._cfg.subscribe(this._onConfigChange);
+    window.addEventListener("aparte-config-change", this._onConfigChangeEvent);
     this._evaluateModelGate();
     this._applyDirection();
   }
@@ -2786,8 +2941,7 @@ class AparteComposer extends HTMLElement {
     window.removeEventListener("aparte-message-done", this._onMessageDone);
     window.removeEventListener("aparte-message-error", this._onMessageDone);
     window.removeEventListener("aparte-message-aborted", this._onMessageDone);
-    this._configUnsub?.();
-    this._configUnsub = null;
+    window.removeEventListener("aparte-config-change", this._onConfigChangeEvent);
     this._listeners.clear();
   }
   attributeChangedCallback(name, _old, value) {
@@ -2863,11 +3017,29 @@ class AparteComposer extends HTMLElement {
     this._attachments = [];
     this._emit("attachments-change", { attachments: [] });
   }
-  /** Inject a panel into the composer, hiding the text input. The send button calls onSubmit when clicked. */
+  /**
+   * Inject a panel into the composer. The send button calls `onSubmit` when clicked.
+   *
+   * While a panel is up, the composer is answering a QUESTION, not composing a
+   * message — so the affordances that lead nowhere go away with the text input:
+   * the attachment picker above all, which stayed clickable while the user was
+   * being asked something ("on voyait encore l'icône de upload", reported from a
+   * real session). Ratified decision #8: an affordance nothing can honour is not
+   * rendered.
+   *
+   * What STAYS, deliberately: the attachments strip, because pending attachments
+   * are the user's state and not an action to offer — hiding them would look like
+   * losing them; and the toolbar, because switching model still does something.
+   *
+   * Declared with an attribute + CSS rather than the inline `style.display` this
+   * 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).
+   */
   showPanel(panel, options) {
     this.hidePanel();
     const inputEl = this.querySelector("aparte-composer-input");
-    if (inputEl) inputEl.style.display = "none";
+    this.setAttribute("data-panel-active", "");
     panel.dataset["apartePanel"] = "true";
     if (inputEl) {
       inputEl.insertAdjacentElement("afterend", panel);
@@ -2876,26 +3048,35 @@ class AparteComposer extends HTMLElement {
     }
     this._panelActive = true;
     this._panelSubmitEnabled = options?.submitEnabled ?? false;
+    this._panelMode = options?.mode ?? "submit";
     this._panelOnSubmit = options?.onSubmit ?? null;
-    this._emit("panel-change", { active: true, submitEnabled: this._panelSubmitEnabled });
+    this._emit("panel-change", { active: true, submitEnabled: this._panelSubmitEnabled, mode: this._panelMode });
   }
-  /** Remove the panel and restore the text input. */
+  /** Remove the panel and restore the composer's own controls. */
   hidePanel() {
     const existing = this.querySelector("[data-aparte-panel]");
     if (existing) existing.remove();
-    const inputEl = this.querySelector("aparte-composer-input");
-    if (inputEl) inputEl.style.display = "";
+    this.removeAttribute("data-panel-active");
     this._panelActive = false;
     this._panelSubmitEnabled = false;
+    this._panelMode = "submit";
     this._panelOnSubmit = null;
-    this._emit("panel-change", { active: false, submitEnabled: false });
+    this._emit("panel-change", { active: false, submitEnabled: false, mode: "submit" });
     this.focus();
   }
-  /** Update the send button enabled state while a panel is active. */
-  setPanelSubmitEnabled(enabled) {
+  /**
+   * Update the send button's state while a panel is active.
+   *
+   * `mode` moves with it because both change on the same event — answering the
+   * question you are on can enable the button AND turn it from "advance" into
+   * "submit" (when it was the last one), and two separate calls would flash a
+   * wrong icon between them.
+   */
+  setPanelSubmitEnabled(enabled, mode) {
     if (!this._panelActive) return;
     this._panelSubmitEnabled = enabled;
-    this._emit("panel-change", { active: true, submitEnabled: enabled });
+    if (mode) this._panelMode = mode;
+    this._emit("panel-change", { active: true, submitEnabled: enabled, mode: this._panelMode });
   }
   get panelActive() {
     return this._panelActive;
@@ -2986,7 +3167,36 @@ class AparteComposer extends HTMLElement {
    *  Without this filter, streaming in one chat flips every composer's state. */
   _isForThisComposer(e2) {
     const evtTargetId = e2.detail?.targetId;
-    return !evtTargetId || !this.targetId || evtTargetId === this.targetId;
+    return !evtTargetId || !this._ownTargetId() || evtTargetId === this._ownTargetId();
+  }
+  /**
+   * Which chat this composer belongs to: its `target` attribute, or the id of the
+   * chat host above it.
+   *
+   * All four wrappers set `target` themselves, so the attribute alone identified a
+   * composer there. In RAW core — the documented quick start, where the markup is
+   * hand-written — nothing sets it, so `!this.targetId` was true and this composer
+   * accepted every chat's lifecycle events: on a two-chat page, one chat's Stop
+   * tore down the other's open elicitation panel while its tool call kept waiting,
+   * i.e. the question vanished and the turn hung.
+   *
+   * Found by a two-chat test written for the elicitation presenter, which is the
+   * only reason it surfaced: raw core with two chats is a shape nothing exercised.
+   * The hosts matched are the ones `aparte-chat-bubble._resolveTargetId()` matches,
+   * for the reason written there — Angular's wrapper root IS `<aparte-chat>`, the
+   * other three render a `[data-aparte-chat]` div.
+   */
+  _ownTargetId() {
+    const attr = this.targetId;
+    if (attr) return attr;
+    let el = this.parentElement;
+    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;
   }
   _handleMessageStart(e2) {
     if (!this._isForThisComposer(e2)) return;
@@ -3093,7 +3303,7 @@ class AparteComposerInput extends HTMLElement {
   _render() {
     if (this.querySelector(".aparte-ci-editor")) return;
     const disabled = this.hasAttribute("disabled") || this._getRoot()?.disabled || false;
-    const placeholder = this._escapeAttr(this._getPlaceholder());
+    const placeholder = escapeAttr(this._getPlaceholder());
     this.innerHTML = `<div
             class="aparte-ci-editor"
             contenteditable="${!disabled}"
@@ -3217,9 +3427,6 @@ class AparteComposerInput extends HTMLElement {
     this._editor.setAttribute("aria-disabled", String(disabled));
   }
   /** Escape a value before it lands in a double-quoted HTML attribute. */
-  _escapeAttr(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-  }
 }
 if (!customElements.get("aparte-composer-input")) {
   customElements.define("aparte-composer-input", AparteComposerInput);
@@ -3250,8 +3457,8 @@ class AparteComposerSend extends HTMLElement {
     const disabled = !root || root.disabled || root.value.trim() === "";
     this.innerHTML = `<button
             class="aparte-cs-button aparte-send-button"
-            aria-label="${label}"
-            title="${label}"
+            aria-label="${escapeAttr(label)}"
+            title="${escapeAttr(label)}"
             ${disabled ? "disabled" : ""}
         >${icon}</button>`;
     this._button = this.querySelector(".aparte-cs-button");
@@ -3276,12 +3483,14 @@ class AparteComposerSend extends HTMLElement {
       root._on("attachments-change", () => this._syncState())
     );
     this._unsubscribes.push(
-      root._on("panel-change", ({ active, submitEnabled }) => {
+      root._on("panel-change", ({ active, submitEnabled, mode }) => {
         if (!this._button) return;
         if (active) {
           this._button.disabled = !submitEnabled;
-          this._button.innerHTML = this._getSendIcon();
-          const label = resolveConfig(this).t("submitButton") || "Submit";
+          const cfg = resolveConfig(this);
+          const advancing = mode === "advance";
+          this._button.innerHTML = advancing ? cfg.getIcon("nextBranch") : this._getSubmitIcon();
+          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");
@@ -3324,6 +3533,13 @@ class AparteComposerSend extends HTMLElement {
       this._syncState();
     }
   }
+  /**
+   * The icon for submitting an ANSWER, which is not the same act as sending a
+   * message — one button, two meanings, and it has to say which one it is.
+   */
+  _getSubmitIcon() {
+    return resolveConfig(this).getIcon("check");
+  }
   _getSendIcon() {
     return resolveConfig(this).getIcon("send") || "Send";
   }
@@ -3358,8 +3574,8 @@ class AparteComposerCancel extends HTMLElement {
     const icon = this._getStopIcon();
     this.innerHTML = `<button
             class="aparte-cc-button"
-            aria-label="${label}"
-            title="${label}"
+            aria-label="${escapeAttr(label)}"
+            title="${escapeAttr(label)}"
             hidden
         >${icon}</button>`;
     this._button = this.querySelector(".aparte-cc-button");
@@ -3426,9 +3642,9 @@ class AparteComposerAttachments extends HTMLElement {
       if (file.type.startsWith("image/")) {
         const url = URL.createObjectURL(file);
         this._objectUrls.push(url);
-        return `<div class="aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${url}" alt="${name}" /><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
+        return `<div class="aparte-thumb aparte-thumb--image" title="${escapeAttr(name)}"><img class="aparte-thumb__img" src="${escapeAttr(url)}" alt="${escapeAttr(name)}" /><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
       }
-      return `<div class="aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${this._escape(this._ext(file.name))}</span><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
+      return `<div class="aparte-thumb aparte-thumb--file" title="${escapeAttr(name)}"><span class="aparte-thumb__ext">${this._escape(this._ext(file.name))}</span><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
     }).join("");
     this.querySelectorAll(".aparte-thumb__remove").forEach((btn, i2) => {
       btn.addEventListener("click", (e2) => {
@@ -3507,8 +3723,8 @@ class AparteComposerAddAttachment extends HTMLElement {
     const disabled = this.hasAttribute("disabled") || this._getRoot()?.disabled || false;
     this.innerHTML = `<button
             class="aparte-caa-button aparte-action-button"
-            aria-label="${label}"
-            title="${label}"
+            aria-label="${escapeAttr(label)}"
+            title="${escapeAttr(label)}"
             type="button"
             ${disabled ? "disabled" : ""}
         >${icon}</button>`;
@@ -3618,7 +3834,7 @@ class AparteComposerAction extends HTMLElement {
   }
   _render() {
     if (this.querySelector(".aparte-cact-button")) return;
-    const label = this._escapeAttr(this.getAttribute("label") ?? "");
+    const label = escapeAttr(this.getAttribute("label") ?? "");
     const icon = this._resolveIcon(this.getAttribute("icon") ?? "");
     const disabled = this.hasAttribute("disabled") || this._getRoot()?.disabled || false;
     this.innerHTML = `<button
@@ -3658,9 +3874,6 @@ class AparteComposerAction extends HTMLElement {
     return resolveConfig(this).getIcon(icon) ?? icon;
   }
   /** Escape a value before it lands in a double-quoted HTML attribute. */
-  _escapeAttr(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-  }
 }
 if (!customElements.get("aparte-composer-action")) {
   customElements.define("aparte-composer-action", AparteComposerAction);
@@ -3776,8 +3989,8 @@ class AparteConversationList extends HTMLElement {
     class="aparte-conv-item__archive"
     type="button"
     data-archive-id="${escapedId}"
-    data-archive-action="${archiveAction}"
-    aria-label="${archiveAriaLabel}"
+    data-archive-action="${escapeAttr(archiveAction)}"
+    aria-label="${escapeAttr(archiveAriaLabel)}"
     tabindex="0"
   >${archiveIcon}</button>
   <button
@@ -3856,14 +4069,49 @@ class AparteConversationList extends HTMLElement {
 if (!customElements.get("aparte-conversation-list")) customElements.define("aparte-conversation-list", AparteConversationList);
 class AparteElicitation extends HTMLElement {
   _pending = null;
-  _onTurnEnd = () => this._cancelPending();
+  /**
+   * 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();
+  };
   connectedCallback() {
     this.style.display = "none";
-    this._injectStyles();
     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);
@@ -3891,22 +4139,26 @@ class AparteElicitation extends HTMLElement {
         }
         request.signal.addEventListener("abort", () => settle({ action: "cancel" }), { once: true });
       }
-      const panel = buildElicitationPanel(request.message, request.schema, () => {
-        composer.setPanelSubmitEnabled(panel.isComplete());
-      });
-      const footer = document.createElement("div");
-      footer.className = "aparte-elic-footer";
+      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 = "Skip";
+      skip.textContent = cfg.t("elicitationSkip");
       skip.addEventListener("click", () => settle({ action: "decline" }));
-      footer.appendChild(skip);
-      panel.el.appendChild(footer);
+      panel.dismiss.appendChild(skip);
       this._pending = { settle, composer };
       composer.showPanel(panel.el, {
-        submitEnabled: panel.isComplete(),
+        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() });
         }
       });
@@ -3916,43 +4168,56 @@ class AparteElicitation extends HTMLElement {
   _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;
     }
-    const doc = document.querySelector("aparte-composer");
-    return doc && typeof doc.showPanel === "function" ? doc : null;
-  }
-  _injectStyles() {
-    const id = "aparte-elicitation-styles";
-    if (document.getElementById(id)) return;
-    const style = document.createElement("style");
-    style.id = id;
-    style.textContent = `
-.aparte-elic-panel { display:flex; flex-direction:column; gap:6px; padding:6px 4px; width:100%; box-sizing:border-box; max-height:50vh; overflow-y:auto; }
-.aparte-elic-message { margin:0 6px 6px; font-size:.82rem; font-weight:600; color:var(--aparte-text); line-height:1.4; }
-.aparte-elic-field + .aparte-elic-field { margin-top:8px; padding-top:8px; border-top:1px solid var(--aparte-border, rgba(128,128,128,0.12)); }
-.aparte-elic-title { margin:0 6px 4px; font-size:.8rem; font-weight:600; color:var(--aparte-text); }
-.aparte-elic-desc { margin:0 6px 6px; font-size:.76rem; color:var(--aparte-text-muted, rgba(128,128,128,0.75)); }
-.aparte-elic-options { display:flex; flex-direction:column; gap:1px; }
-.aparte-elic-option { display:flex; align-items:flex-start; gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; border:1px solid transparent; transition:background .12s,border-color .12s; }
-.aparte-elic-option:hover { background:var(--aparte-surface-2, rgba(128,128,128,0.08)); border-color:var(--aparte-border, rgba(128,128,128,0.15)); }
-.aparte-elic-control { margin-top:3px; flex-shrink:0; accent-color:var(--aparte-primary, #6366f1); width:15px; height:15px; cursor:pointer; }
-.aparte-elic-option-body { display:flex; flex-direction:column; gap:2px; flex:1; }
-.aparte-elic-option-title { font-size:.875rem; font-weight:500; color:var(--aparte-text, inherit); line-height:1.4; }
-.aparte-elic-option-desc { font-size:.78rem; color:var(--aparte-text-muted, rgba(128,128,128,0.75)); line-height:1.4; }
-.aparte-elic-other-input, .aparte-elic-text { margin-top:4px; width:100%; padding:6px 8px; border:1px solid var(--aparte-border, rgba(128,128,128,0.2)); border-radius:6px; font-size:.875rem; background:var(--aparte-surface-2, rgba(128,128,128,0.06)); color:var(--aparte-text, inherit); outline:none; box-sizing:border-box; font-family:inherit; }
-textarea.aparte-elic-text { min-height:64px; resize:vertical; }
-.aparte-elic-other-input:focus, .aparte-elic-text:focus { border-color:var(--aparte-primary, #6366f1); }
-.aparte-elic-option--recommended { border-color:var(--aparte-primary, #6366f1) !important; background:color-mix(in srgb, var(--aparte-primary, #6366f1) 6%, transparent); }
-.aparte-elic-footer { display:flex; justify-content:flex-end; margin-top:6px; }
-.aparte-elic-skip { border:none; background:transparent; color:var(--aparte-text-muted, rgba(128,128,128,0.75)); font-size:.8rem; cursor:pointer; padding:4px 8px; border-radius:6px; font-family:inherit; }
-.aparte-elic-skip:hover { background:var(--aparte-surface-2, rgba(128,128,128,0.08)); color:var(--aparte-text); }
-`;
-    document.head.appendChild(style);
+    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")) {
@@ -3969,13 +4234,20 @@ function registerAllComponents() {
 }
 export {
   A as APARTE_CONVERSATION_SCHEMA_VERSION,
-  a as APARTE_HOST_ATTR,
+  a as APARTE_DEFAULT_BUBBLE_ACTIONS,
+  b as APARTE_DEFAULT_HOST_HANDLERS,
+  c as APARTE_DEFAULT_ICON_FALLBACKS,
+  d as APARTE_DEFAULT_LOCALE,
+  e as APARTE_DEFAULT_SKELETON_FALLBACKS,
+  f as APARTE_DEFAULT_UI_EVENTS,
+  g as APARTE_HOST_ATTR,
+  h as AparteBackendTransport,
   AparteChat,
   AparteChatBubble,
-  b as AparteChatHost,
+  i as AparteChatHost,
   AparteChatStatus,
   AparteChatViewport,
-  c as AparteClient,
+  j as AparteClient,
   AparteComposer,
   AparteComposerAction,
   AparteComposerAddAttachment,
@@ -3984,54 +4256,57 @@ export {
   AparteComposerInput,
   AparteComposerSend,
   AparteComposerToolbar,
-  AparteConfig,
-  e as AparteConfigClass,
-  f as AparteConversationController,
+  k as AparteConfig,
+  l as AparteConversationController,
   AparteConversationList,
+  m as AparteConversationManager,
+  n as AparteDirectTransport,
   AparteElicitation,
-  g as AparteError,
-  h as AparteErrorCode,
+  o as AparteError,
+  p as AparteErrorCode,
+  AparteMessageRepository,
   AparteOptgroup,
   AparteOption,
   AparteProgressSpinner,
   AparteSelect,
-  i as AparteStreamParser,
-  B as BackendTransport,
-  C as ConversationManager,
-  D as DEFAULT_BUBBLE_ACTIONS,
-  j as DEFAULT_HOST_HANDLERS,
-  k as DEFAULT_ICON_FALLBACKS,
-  l as DEFAULT_LOCALE,
-  m as DEFAULT_SKELETON_FALLBACKS,
-  n as DEFAULT_UI_EVENTS,
-  o as DirectTransport,
-  MessageRepository,
-  p as applyElementProps,
-  q as attachConfig,
+  r as AparteStreamParser,
+  s as aparteGlobalConfig,
+  t as applyElementProps,
+  u as attachConfig,
   buildElicitationPanel,
-  s as collectRendererStyles,
-  t as contentToText,
-  u as contextConfig,
-  v as createAparteChatHandler,
-  w as createStreamAdapter,
-  x as defaultSanitizer,
-  y as deriveArtifactKind,
-  z as detachConfig,
-  E as filesToAttachments,
+  w as collectRendererStyles,
+  x as contentToText,
+  y as contextConfig,
+  z as createAparteChatHandler,
+  B as createStreamAdapter,
+  cssEscape,
+  D as declineDefaultRenderers,
+  E as defaultSanitizer,
+  F as deriveArtifactKind,
+  G as detachConfig,
+  escapeAttr,
+  escapeHtml,
+  J as filesToAttachments,
+  K as getAllRenderers,
   getSegmentRenderer,
+  installDefaultRenderersOnce,
   isAwaitingReply,
-  H as isFormatAdapter,
-  I as isSafeUrl,
-  J as parseAparteEventStream,
-  K as parseMarkdownToSegments,
+  O as isFormatAdapter,
+  P as isSafeUrl,
+  Q as isSegmentSettled,
+  R as parseAparteEventStream,
+  S as parseMarkdownToSegments,
   populateBubbleFromMessage,
-  N as readableToAsyncIterable,
+  U as readableToAsyncIterable,
   registerAllComponents,
-  O as registerDefaultRenderers,
-  P as registerSegmentRenderer,
-  Q as requestUserInput,
+  V as registerDefaultRenderers,
+  W as registerSegmentRenderer,
+  X as requestUserInput,
   resolveConfig,
+  revokeAttachmentUrls,
   runWithConfig,
-  T as unregisterSegmentRenderer
+  $ as segmentDuration,
+  a0 as unregisterSegmentRenderer,
+  uuid
 };
 //# sourceMappingURL=index.js.map