@aparte/core 0.19.3 → 0.21.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a1 as resolveConfig, a9 as eventOrigin, aa as activeElementIn, a6 as subscribeConfigChange, a3 as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, L as escapeAttr, H as cssEscape, ab as mergeSegmentUpdate, M as escapeHtml, ac as writeStreamedMarkdown, U as isSafeUrl, C as copyText, P as getSegmentRenderer, Q as installDefaultRenderersOnce, r as AparteMessageRepository, ad as stampSegmentActivity, ae as stampSegmentOnInsert, af as stampSegmentOnUpdate, ag as renumberSegments, ah as openSegmentIds, ai as isTerminalStatus, aj as adoptMessageSegments, S as isAwaitingReply, Y as populateBubbleFromMessage, a8 as uuid, a2 as revokeAttachmentUrls, X as parseMarkdownToSegments, ak as APARTE_DERIVED_SEGMENTS, e as APARTE_DEFAULT_LOCALE, al as chatBoundaryOf, am as rootOf, R as installDialogTriggersOnce } from "./dialog-triggers-ChnPFG9M.js";
-import { A, a, b, c, d, f, g, h, i, j, k, l, m, n, p, q, s, t, u, v, y, z, B, D, E, F, G, I, J, K, N, O, T, V, W, Z, _, $, a0, a4, a5, a7 } from "./dialog-triggers-ChnPFG9M.js";
+import { a1 as resolveConfig, a9 as eventOrigin, aa as activeElementIn, a6 as subscribeConfigChange, a3 as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, ab as gateGlide, L as escapeAttr, ac as renderingVersionOf, H as cssEscape, ad as mergeSegmentUpdate, M as escapeHtml, ae as writeStreamedMarkdown, U as isSafeUrl, C as copyText, P as getSegmentRenderer, Q as installDefaultRenderersOnce, r as AparteMessageRepository, af as stampSegmentActivity, ag as stampSegmentOnInsert, ah as stampSegmentOnUpdate, ai as renumberSegments, aj as openSegmentIds, ak as isTerminalStatus, al as adoptMessageSegments, S as isAwaitingReply, Y as populateBubbleFromMessage, a8 as uuid, a2 as revokeAttachmentUrls, X as parseMarkdownToSegments, am as APARTE_DERIVED_SEGMENTS, e as APARTE_DEFAULT_LOCALE, an as chatBoundaryOf, ao as rootOf, R as installDialogTriggersOnce } from "./dialog-triggers-3Rk7PuZa.js";
+import { A, a, b, c, d, f, g, h, i, j, k, l, m, n, p, q, s, t, u, v, y, z, B, D, E, F, G, I, J, K, N, O, T, V, W, Z, _, $, a0, a4, a5, a7 } from "./dialog-triggers-3Rk7PuZa.js";
 function presenceOn(value) {
   return value === "" ? true : Boolean(value);
 }
@@ -194,24 +194,19 @@ class AparteSelect extends HTMLElement {
    *
    * `_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.
+   * of the element (a portal, a Vue teleport, any framework re-parent) would add
+   * another option-click listener and one click would fire the change handler once
+   * per re-connect, unless the same bound reference is removed and re-added.
    */
   _boundHandleOptionClick = this._handleOptionClick.bind(this);
   _boundHandleDocumentClick = this._handleDocumentClick.bind(this);
   _boundHandleKeydown = this._handleKeydown.bind(this);
   /**
-   * The trigger's own three, bound for the same reason and left inline for a whole
-   * release: they were arrows on `this`, so nothing could ever remove them, and the
-   * trigger element survives a re-connect. One re-parent made a click toggle twice —
-   * open and shut inside the same click, i.e. a control that looks dead — and two made
-   * it announce `aparte-select-open` twice. The docblock above describes exactly this,
-   * fixed for the option click and not for its neighbours.
+   * The trigger's own three, bound for the same reason as the option click: the
+   * trigger element survives a re-connect, so listeners that cannot be removed would
+   * stack. One re-parent would make a click toggle twice — open and shut inside the
+   * same click, i.e. a control that looks dead — and announce `aparte-select-open`
+   * twice.
    */
   _boundHandleTriggerClick = () => {
     this._toggle();
@@ -237,6 +232,7 @@ class AparteSelect extends HTMLElement {
     this._value = this.getAttribute("value") || "";
     const wantsOpen = this.hasAttribute("open") && !this._isOpen;
     this._render();
+    this._applySearchable();
     this._applyDisabled();
     this._setupEventListeners();
     this._setupMutationObserver();
@@ -264,6 +260,7 @@ class AparteSelect extends HTMLElement {
     if (name === "placeholder") {
       this._updateTriggerLabel();
     }
+    if (name === "searchable") this._applySearchable();
     if (name === "disabled") {
       this._applyDisabled();
       if (!this.hasAttribute("disabled") && this.hasAttribute("open")) this._openDropdown();
@@ -292,6 +289,45 @@ class AparteSelect extends HTMLElement {
   // ─────────────────────────────────────────────────────────────────────────
   // Rendering
   // ─────────────────────────────────────────────────────────────────────────
+  /** The filter field: the combobox of a `searchable` select, since it takes the focus. */
+  _buildSearchInput(cfg) {
+    const searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.className = "aparte-select-search";
+    searchInput.placeholder = cfg.t("selectSearchPlaceholder") || "Search…";
+    searchInput.setAttribute("aria-label", cfg.t("selectSearchLabel") || "Search options");
+    searchInput.setAttribute("role", "combobox");
+    searchInput.setAttribute("aria-haspopup", "listbox");
+    searchInput.setAttribute("aria-autocomplete", "list");
+    searchInput.setAttribute("aria-expanded", String(this._isOpen));
+    return searchInput;
+  }
+  /**
+   * `searchable` set or removed after the first render: the field comes or goes, and the
+   * combobox moves with it, so a framework that
+   * binds it a beat late — Angular's `[searchable]` inside an `@if` — still gets a field.
+   */
+  _applySearchable() {
+    if (!this._dropdown || !this._trigger) return;
+    const wanted = this.hasAttribute("searchable");
+    if (wanted === Boolean(this._searchInput)) return;
+    if (this._isOpen) this._closeDropdown();
+    const listboxId = this._trigger.getAttribute("aria-controls");
+    if (wanted) {
+      const input = this._buildSearchInput(resolveConfig(this));
+      if (listboxId) input.setAttribute("aria-controls", listboxId);
+      this._dropdown.prepend(input);
+      this._searchInput = input;
+      input.addEventListener("input", this._boundHandleSearchInput);
+      this._trigger.setAttribute("role", "button");
+    } else {
+      this._searchInput.removeEventListener("input", this._boundHandleSearchInput);
+      this._searchInput.remove();
+      this._searchInput = null;
+      this._trigger.setAttribute("role", "combobox");
+    }
+    this._updateNames();
+  }
   _render() {
     const placeholder = this.getAttribute("placeholder") || "Select...";
     const searchable = this.hasAttribute("searchable");
@@ -324,19 +360,8 @@ class AparteSelect extends HTMLElement {
     const dropdown = document.createElement("div");
     dropdown.className = "aparte-select-dropdown";
     dropdown.hidden = !this._isOpen;
-    let searchInput = null;
-    if (searchable) {
-      searchInput = document.createElement("input");
-      searchInput.type = "text";
-      searchInput.className = "aparte-select-search";
-      searchInput.placeholder = cfg.t("selectSearchPlaceholder") || "Search…";
-      searchInput.setAttribute("aria-label", cfg.t("selectSearchLabel") || "Search options");
-      searchInput.setAttribute("role", "combobox");
-      searchInput.setAttribute("aria-haspopup", "listbox");
-      searchInput.setAttribute("aria-autocomplete", "list");
-      searchInput.setAttribute("aria-expanded", String(this._isOpen));
-      dropdown.appendChild(searchInput);
-    }
+    const searchInput = searchable ? this._buildSearchInput(cfg) : null;
+    if (searchInput) dropdown.appendChild(searchInput);
     const optionsContainer = document.createElement("div");
     optionsContainer.className = "aparte-select-options";
     optionsContainer.setAttribute("role", "listbox");
@@ -375,9 +400,9 @@ class AparteSelect extends HTMLElement {
    * Put the roving highlight back after the options changed underneath it.
    *
    * `data-active` lives on an option ELEMENT, so replacing the list throws it
-   * away while `_activeIndex` still claims a position: the highlight disappeared,
-   * `aria-activedescendant` kept pointing at an id no longer in the document, and
-   * the next ArrowDown moved from the stale index — skipping an option. Only when
+   * away while `_activeIndex` still claims a position: without this the highlight
+   * disappears, `aria-activedescendant` points at an id no longer in the document, and
+   * the next ArrowDown moves from the stale index — skipping an option. Only when
    * open and only when a position was held, so a refresh never invents one.
    */
   _restoreActive() {
@@ -603,8 +628,8 @@ class AparteSelect extends HTMLElement {
    * A `combobox` is NAMED by that attribute and VALUED by its visible label span, so
    * the name is the control and nothing else. A `button` — the shape a `searchable`
    * trigger takes, since the filter field is then the combobox — is named by its
-   * CONTENT, which this very attribute overrides: the searchable trigger announced
-   * "Pick a model, button" and never said which model was selected. So the button's
+   * CONTENT, which this very attribute overrides: a name of just the placeholder
+   * ("Pick a model, button") would never say which model is selected. So the button's
    * name carries both halves, and drops the second when it would only repeat the
    * first (nothing selected: the value IS the placeholder).
    */
@@ -644,7 +669,7 @@ class AparteSelect extends HTMLElement {
     }
     const sizer = this._trigger?.querySelector(".aparte-select-label-sizer");
     if (sizer) {
-      const labels = [placeholder, ...Array.from(this.querySelectorAll("aparte-option"), (o) => o.textContent?.trim() || "")];
+      const labels = [placeholder, ...Array.from(this.querySelectorAll("aparte-option"), (o) => optionLabelText(o))];
       const current = Array.from(sizer.children, (s2) => s2.textContent ?? "");
       if (labels.length !== current.length || labels.some((l2, i2) => l2 !== current[i2])) {
         sizer.replaceChildren(...labels.map((text) => {
@@ -667,7 +692,7 @@ class AparteSelect extends HTMLElement {
   }
   _getSelectedLabel() {
     for (const opt of this.querySelectorAll("aparte-option")) {
-      if (opt.getAttribute("value") === this._value) return opt.textContent?.trim() || "";
+      if (opt.getAttribute("value") === this._value) return optionLabelText(opt);
     }
     return "";
   }
@@ -693,6 +718,14 @@ class AparteSelect extends HTMLElement {
     }));
   }
 }
+function optionLabelText(option) {
+  let text = "";
+  for (const node of option.childNodes) {
+    if (node.nodeType === Node.ELEMENT_NODE && node.matches(".aparte-option__meta, .aparte-status-dot")) continue;
+    text += node.textContent ?? "";
+  }
+  return text.trim();
+}
 if (!customElements.get("aparte-select")) {
   customElements.define("aparte-select", AparteSelect);
 }
@@ -748,7 +781,7 @@ class AparteIcon extends HTMLElement {
   }
   _render() {
     const name = this.getAttribute("name");
-    const glyph = name ? resolveConfig(this).getIconProvider()[name]?.() : null;
+    const glyph = name ? resolveConfig(this).getIcon(name) : null;
     this.innerHTML = glyph ?? "";
     this.firstElementChild?.setAttribute("aria-hidden", "true");
   }
@@ -767,17 +800,48 @@ function isWithin(node, ancestor) {
   }
   return false;
 }
+function addRetract(panelEl, corner, cfg, reopen, onToggle) {
+  const hide = document.createElement("button");
+  hide.type = "button";
+  hide.className = "aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--ghost aparte-elic-hide";
+  hide.setAttribute("aria-expanded", "true");
+  hide.innerHTML = cfg.getIcon("expand");
+  const reveal = document.createElement("button");
+  reveal.type = "button";
+  reveal.className = "aparte-btn aparte-btn--ghost aparte-elic-reveal";
+  reveal.setAttribute("aria-expanded", "false");
+  const revealText = document.createElement("span");
+  reveal.append(revealText);
+  reveal.insertAdjacentHTML("beforeend", cfg.getIcon("collapse"));
+  const relabel = (next) => {
+    const label = next.t("elicitationHide");
+    hide.setAttribute("aria-label", label);
+    hide.title = label;
+    revealText.textContent = next.t("elicitationWaiting");
+  };
+  relabel(cfg);
+  hide.addEventListener("click", () => {
+    panelEl.setAttribute("data-collapsed", "");
+    onToggle();
+    reveal.focus();
+  });
+  reveal.addEventListener("click", () => {
+    panelEl.removeAttribute("data-collapsed");
+    onToggle();
+    reopen();
+  });
+  corner.prepend(hide);
+  panelEl.append(reveal);
+  return { relabel };
+}
 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.
+   * These two listeners sit on `window`, so they filter by instance: a Stop (or an
+   * error) in one chat must not cancel the question a DIFFERENT chat is waiting on,
+   * whose model would be told the user refused a question they were still looking at.
    *
    * 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
@@ -913,12 +977,20 @@ class AparteElicitation extends HTMLElement {
       }
       const cfg = resolveConfig(this);
       if (request.kind === "approval") {
-        const approvalMode = () => panel2.isComplete() ? "submit" : "none";
-        const panel2 = runWithConfig(cfg, () => buildApprovalPanel(request.message, request.options ?? [], () => {
-          composer.setPanelSubmitEnabled(panel2.isComplete(), approvalMode());
-        }, request.details));
+        const sendable = () => panel2.isComplete() && !panel2.el.hasAttribute("data-collapsed");
+        const approvalMode = () => sendable() ? "submit" : "none";
+        const syncSubmit2 = () => composer.setPanelSubmitEnabled(sendable(), approvalMode());
+        const panel2 = runWithConfig(cfg, () => buildApprovalPanel(request.message, request.options ?? [], syncSubmit2, request.details));
         panel2.onSettle((answer) => settle({ action: "accept", content: answer }));
-        this._pending = { abort: () => fail(), composer, relabel: () => panel2.relabel() };
+        const retract2 = addRetract(panel2.el, panel2.dismiss, cfg, () => panel2.focus(), syncSubmit2);
+        this._pending = {
+          abort: () => fail(),
+          composer,
+          relabel: () => {
+            panel2.relabel();
+            retract2.relabel(resolveConfig(this));
+          }
+        };
         slot.token = composer.showPanel(panel2.el, {
           submitEnabled: panel2.isComplete(),
           mode: approvalMode(),
@@ -931,22 +1003,27 @@ class AparteElicitation extends HTMLElement {
         return;
       }
       const schema = request.schema ?? { type: "string" };
-      const panel = runWithConfig(cfg, () => buildElicitationPanel(request.message, schema, () => {
-        composer.setPanelSubmitEnabled(panel.canProceed(), panel.mode());
-      }));
+      const syncSubmit = () => {
+        const aside = panel.el.hasAttribute("data-collapsed");
+        composer.setPanelSubmitEnabled(!aside && panel.canProceed(), aside ? "none" : panel.mode());
+      };
+      const panel = runWithConfig(cfg, () => buildElicitationPanel(request.message, schema, syncSubmit));
       const skip = document.createElement("button");
       skip.type = "button";
       skip.className = "aparte-btn aparte-elic-skip";
       skip.textContent = cfg.t("elicitationSkip");
       skip.addEventListener("click", () => settle({ action: "decline" }));
       panel.dismiss.appendChild(skip);
+      const retract = addRetract(panel.el, panel.dismiss, cfg, () => panel.focus(), syncSubmit);
       panel.onSettle((content) => settle({ action: "accept", content }));
       this._pending = {
         abort: () => fail(),
         composer,
         relabel: () => {
           panel.relabel();
-          skip.textContent = resolveConfig(this).t("elicitationSkip");
+          const now = resolveConfig(this);
+          skip.textContent = now.t("elicitationSkip");
+          retract.relabel(now);
         }
       };
       slot.token = composer.showPanel(panel.el, {
@@ -957,8 +1034,8 @@ class AparteElicitation extends HTMLElement {
          * 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.
+         * for the life of the page. A rejection (`aborted`), not `decline`:
+         * nobody declined anything, the question was taken away.
          */
         onEvict: () => fail(),
         onSubmit: () => {
@@ -995,12 +1072,11 @@ class AparteElicitation extends HTMLElement {
    * 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.
+   * There is no `document.querySelector('aparte-composer')` fallback: on a page with
+   * two chats, an elicitation that could not find its own composer would mount its
+   * panel in the OTHER chat's, so one conversation's question would appear under the
+   * other conversation, and answering it would resolve a tool call belonging to a
+   * chat the user was not looking at.
    *
    * Returning `null` instead REJECTS the request, which is honest: nothing was
    * shown, so nothing was answered. The warning names the fix, because this is a
@@ -1035,6 +1111,7 @@ class AparteChat extends HTMLElement {
   }
   _observer = null;
   _loadingObserver = null;
+  _offGlide = null;
   /** Waits for a `<aparte-chat-viewport>` child to appear — see `_watchForViewport`. */
   _childObserver = null;
   /** The viewport is loading and the gate is on — see `_applyLoadingGate`. */
@@ -1055,8 +1132,12 @@ class AparteChat extends HTMLElement {
     this._syncEmptyWatch();
     this._syncLoadingWatch();
     this._watchForViewport();
+    this._offGlide?.();
+    this._offGlide = gateGlide(this);
   }
   disconnectedCallback() {
+    this._offGlide?.();
+    this._offGlide = null;
     this._observer?.disconnect();
     this._observer = null;
     this._loadingObserver?.disconnect();
@@ -1139,11 +1220,10 @@ class AparteChat extends HTMLElement {
   /**
    * Watch the viewport so `data-empty` follows the conversation.
    *
-   * It used to run only under `center-empty`, which made the chat's one statement of
-   * "this conversation is empty" a by-product of a layout option: an app that wanted
-   * starters on an empty thread, or a welcome of its own, had to count messages itself.
-   * Every selector core writes against it still requires `[center-empty]`, so reflecting
-   * it everywhere moves no layout.
+   * Runs whether or not `center-empty` is set, so an app that wants starters on an
+   * empty thread, or a welcome of its own, can read `data-empty` instead of counting
+   * messages itself. Every selector core writes against it requires `[center-empty]`,
+   * so reflecting it everywhere moves no layout.
    */
   _syncEmptyWatch() {
     this._observer?.disconnect();
@@ -1170,12 +1250,11 @@ class AparteChat extends HTMLElement {
     this._loadingObserver.observe(viewport, { attributes: true, attributeFilter: ["loading"] });
   }
   /**
-   * Both watches above need a viewport to observe, and they were installed once, at
-   * connect, when there might not be one yet: `<aparte-chat framework-managed>` IS
-   * Angular's host element — upgraded on insert, filled by the template afterwards — and
-   * hand-written markup upgrades before its children are parsed. Neither ever got its
-   * observer, so the documented "every chat gates" was inert on exactly the chats whose
-   * transcript is fetched. This waits for the child to arrive, installs them, and stops.
+   * Both watches above need a viewport to observe, and there might not be one at
+   * connect: `<aparte-chat framework-managed>` IS Angular's host element — upgraded on
+   * insert, filled by the template afterwards — and hand-written markup upgrades before
+   * its children are parsed. This waits for the child to arrive, installs them, and
+   * stops, so every chat gates, including those whose transcript is fetched.
    */
   _watchForViewport() {
     this._childObserver?.disconnect();
@@ -1210,8 +1289,8 @@ class AparteChat extends HTMLElement {
   }
   /**
    * Empty means no message AND none on its way. A viewport that says `loading` holds
-   * no bubble yet, and it used to count as empty: the welcome and the centred composer
-   * showed while a conversation was being fetched.
+   * no bubble yet but does not count as empty, so the welcome and the centred composer
+   * stay hidden while a conversation is being fetched.
    */
   _updateEmpty() {
     const viewport = this.querySelector("aparte-chat-viewport");
@@ -1253,6 +1332,16 @@ function segmentRenderResultToElement(result, segment) {
   if (el2 && segment && !el2.hasAttribute("data-segment-id")) el2.setAttribute("data-segment-id", segment.id);
   return el2;
 }
+const pendingAvatarMarks = /* @__PURE__ */ new Map();
+function flushAvatarMarks() {
+  const batch = [...pendingAvatarMarks].filter(([avatar]) => !avatar.firstChild);
+  pendingAvatarMarks.clear();
+  const shown = batch.map(([, { bubble, role }]) => {
+    const image = getComputedStyle(bubble).getPropertyValue(`--aparte-avatar-image-${role}`).trim();
+    return image !== "" && image !== "none";
+  });
+  batch.forEach(([avatar], i2) => avatar.toggleAttribute("data-image", shown[i2]));
+}
 class AparteChatBubble extends HTMLElement {
   _contentEl = null;
   _segmentsEl = null;
@@ -1268,8 +1357,20 @@ class AparteChatBubble extends HTMLElement {
   _usage = null;
   /** Cleanup returned by the avatar provider — called on disconnect/re-render. */
   _avatarCleanup = null;
+  /** Whether the avatar slot holds what a provider drew, which goes when the provider does. */
+  _avatarFromProvider = false;
   /** Sibling count for tree-based branch navigation (set by setSiblings()) */
   _siblingCount = 1;
+  /**
+   * Which accessible names the bubble wrote itself, and so may refresh on a language switch
+   * or a name change. A custom shell's own are its author's: refreshed, a root's or a bar's
+   * label of their own became "Assistant response" or "Message actions" at the first notify.
+   */
+  _wroteRootLabel = false;
+  _wroteBarLabel = false;
+  _wroteArrowLabels = false;
+  /** The shell renderer the bubble was last drawn with (`null`: the default frame). */
+  _drawnShell = null;
   /** Sibling index for tree-based branch navigation (set by setSiblings()) */
   _siblingIndex = 0;
   /** True while the user-message inline editor is open. */
@@ -1301,7 +1402,29 @@ class AparteChatBubble extends HTMLElement {
     this._renderAvatar();
     this._relabelSegments();
     this._updateTimestamp(this.getAttribute("timestamp"));
+    if (!this._redrawQueued) {
+      this._redrawQueued = true;
+      queueMicrotask(() => {
+        this._redrawQueued = false;
+        if (this.isConnected) this._redrawIfStale();
+      });
+    }
   };
+  /** A {@link _redrawIfStale} is queued for the end of the current task. */
+  _redrawQueued = false;
+  /** The {@link renderingVersionOf} count the content was last drawn with. */
+  _drawnWithVersion = 0;
+  /**
+   * A Markdown or highlight provider set after this message was drawn: draw it again.
+   * Not mid-stream — the stream reads the providers as it goes, and its end redraws — and
+   * not mid-edit, where the drawn message is hidden behind the editor and drawing it would
+   * show it again beside the editor; leaving the edit calls this.
+   */
+  _redrawIfStale() {
+    if (this._streaming || this._editing || renderingVersionOf(this._cfg) === this._drawnWithVersion) return;
+    if (this._segments.length > 0) this._renderSegments();
+    else this._updateContent();
+  }
   /**
    * Ask every rendered segment to re-read its config-derived text.
    *
@@ -1339,9 +1462,11 @@ class AparteChatBubble extends HTMLElement {
     const set = (selector, label) => {
       this.querySelector(selector)?.setAttribute("aria-label", label);
     };
-    set(".aparte-branch-prev", locale.previousResponse ?? "Previous response");
-    set(".aparte-branch-next", locale.nextResponse ?? "Next response");
-    set(".aparte-action-bar", locale.messageActions ?? "Message actions");
+    if (this._wroteArrowLabels) {
+      set(".aparte-branch-prev", locale.previousResponse ?? "Previous response");
+      set(".aparte-branch-next", locale.nextResponse ?? "Next response");
+    }
+    if (this._wroteBarLabel) set(".aparte-action-bar", locale.messageActions ?? "Message actions");
   }
   /**
    * Config governing this bubble: the instance config of the nearest
@@ -1361,6 +1486,40 @@ class AparteChatBubble extends HTMLElement {
     this.addEventListener("click", this._onBranchPickerClick);
     this.addEventListener("click", this._onLinkClick);
   }
+  /**
+   * The boundary above this bubble changed — under every wrapper the chat's own config is
+   * attached AFTER the first messages are drawn. When that brings another frame
+   * (`setBubbleShellRenderer`), the bubble is drawn again in it and its content put back,
+   * so every message wears the chat's frame.
+   *
+   * Deferred to a microtask: a wrapper detaches the boundary as it unmounts (Vue's
+   * `onBeforeUnmount`, Svelte's `onDestroy`), while the bubbles are still in the page, and
+   * redrawing every one of them just before their removal would cost a frame per message.
+   * After the microtask a removed bubble is no longer connected, and repeated notices fold
+   * into one.
+   */
+  aparteConfigChanged() {
+    queueMicrotask(() => this._redrawFrameIfChanged());
+  }
+  _redrawFrameIfChanged() {
+    if (!this.isConnected || this._editing) return;
+    if ((this._cfg.getBubbleShellRenderer?.() ?? null) === this._drawnShell) return;
+    if (this._avatarCleanup) {
+      try {
+        this._avatarCleanup();
+      } catch {
+      }
+      this._avatarCleanup = null;
+    }
+    this._resetMarkdownStream();
+    this.replaceChildren();
+    this._render();
+    this._updateContent();
+    if (this._segments.length > 0) this._renderSegments();
+    this._updateAttachments();
+    this._updateTimestamp(this.getAttribute("timestamp"));
+    this._updateBranchPicker();
+  }
   disconnectedCallback() {
     window.removeEventListener("aparte-config-change", this._onConfigChange);
     this.removeEventListener("click", this._onBranchPickerClick);
@@ -1473,11 +1632,11 @@ class AparteChatBubble extends HTMLElement {
    * 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.
+   * in an earlier segment's prose would 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
+   * and the MODEL chooses that id — so a decoy could point an update at the wrong
+   * element and leave a rejected tool rendering as still-running: a spoof against
    * the human-in-the-loop control.
    */
   removeSegment(segmentId) {
@@ -1557,6 +1716,7 @@ class AparteChatBubble extends HTMLElement {
       console.warn(`[AparteChatBubble] _appendSegmentEl ABORT: _segmentsEl is null`);
       return;
     }
+    if (this._segments.length === 1) this._drawnWithVersion = renderingVersionOf(this._cfg);
     const renderer = resolveSegmentRenderer(segment.type, this._cfg);
     if (renderer) {
       const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)), segment);
@@ -1619,6 +1779,9 @@ class AparteChatBubble extends HTMLElement {
     const displayName = this._getDisplayName();
     const initial = this._getAvatarInitial();
     const shell = this._cfg.getBubbleShellRenderer?.();
+    this._drawnShell = shell ?? null;
+    this._avatarFromProvider = false;
+    this._wroteRootLabel = this._wroteBarLabel = this._wroteArrowLabels = !shell;
     if (shell) {
       const out = runWithConfig(this._cfg, () => shell({ role: this._role, name: displayName, avatarInitial: initial }));
       if (out instanceof HTMLElement) this.replaceChildren(out);
@@ -1664,11 +1827,39 @@ class AparteChatBubble extends HTMLElement {
     if (messageEl && !messageEl.hasAttribute("role")) {
       messageEl.setAttribute("role", "article");
       messageEl.setAttribute("aria-label", this._getAriaLabel());
+      this._wroteRootLabel = true;
     }
     this._contentEl = this.querySelector(".aparte-content");
     this._segmentsEl = this.querySelector(".aparte-segments");
     this._attachmentsEl = this.querySelector(".aparte-attachments");
     this._actionBarEl = this.querySelector(".aparte-action-bar");
+    if (this._actionBarEl && !this._actionBarEl.hasAttribute("role")) {
+      this._actionBarEl.setAttribute("role", "toolbar");
+      if (!this._actionBarEl.hasAttribute("aria-label")) {
+        this._actionBarEl.setAttribute("aria-label", this._cfg.getLocale().messageActions ?? "Message actions");
+        this._wroteBarLabel = true;
+      }
+    }
+    if (shell) {
+      const prev = this.querySelector(".aparte-branch-prev");
+      const next = this.querySelector(".aparte-branch-next");
+      const audible = (arrow) => {
+        let text = "";
+        const walker = arrow.ownerDocument.createTreeWalker(arrow, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          const hidden = node.parentElement?.closest('[aria-hidden="true"], [hidden]');
+          if (!hidden || !arrow.contains(hidden)) text += node.textContent ?? "";
+        }
+        return text;
+      };
+      const named = (arrow) => !!arrow && (arrow.hasAttribute("aria-label") || arrow.hasAttribute("aria-labelledby") || arrow.hasAttribute("title") || /\p{L}/u.test(audible(arrow)));
+      if ((prev || next) && !named(prev) && !named(next)) {
+        const locale = this._cfg.getLocale();
+        prev?.setAttribute("aria-label", locale.previousResponse ?? "Previous response");
+        next?.setAttribute("aria-label", locale.nextResponse ?? "Next response");
+        this._wroteArrowLabels = true;
+      }
+    }
     this._actionBarEl?.addEventListener("keydown", this._onActionBarKeydown);
     this._branchPickerEl = this.querySelector(".aparte-branch-picker");
     this._footerEl = this.querySelector(".aparte-footer");
@@ -1680,8 +1871,7 @@ class AparteChatBubble extends HTMLElement {
   }
   /**
    * Show the built-in waiting indicator while this bubble is in flight and has
-   * nothing to show yet — the gap between "user sends" and the first token, which
-   * used to be a bubble with a name and an empty body.
+   * nothing to show yet — the gap between "user sends" and the first token.
    *
    * The dots are CSS (no per-token work, themable, honours reduced-motion); the
    * accessible name is `locale.typing`, next to the `aria-busy` the streaming state
@@ -1708,11 +1898,10 @@ class AparteChatBubble extends HTMLElement {
   /**
    * Hand the avatar host element off to the registered AvatarProvider, if any.
    *
-   * With no provider the slot is left exactly as the shell rendered it — which for
-   * the default shell means EMPTY, and hidden by `.aparte-avatar:empty`. This used
-   * to claim it "falls back to the default initial rendered by `_render()`"; there
-   * is no such initial, and believing there was is what made `_updateRole` write
-   * one.
+   * With no provider the slot keeps what the shell rendered — for the default shell,
+   * nothing, hidden while empty — and loses what a provider drew there before. An empty
+   * slot still shows when the stylesheet names a picture for its role
+   * (`--aparte-avatar-image-user` / `-assistant`): see `_markAvatarImage`.
    */
   _renderAvatar() {
     const avatar = this.querySelector(".aparte-avatar");
@@ -1725,10 +1914,34 @@ class AparteChatBubble extends HTMLElement {
       this._avatarCleanup = null;
     }
     const provider = this._cfg.getAvatarProvider();
-    if (!provider) return;
+    if (!provider) {
+      if (this._avatarFromProvider) {
+        avatar.replaceChildren();
+        this._avatarFromProvider = false;
+      }
+      this._markAvatarImage(avatar);
+      return;
+    }
     avatar.textContent = "";
     const cleanup = provider.render(this._role, avatar);
+    this._avatarFromProvider = true;
     if (typeof cleanup === "function") this._avatarCleanup = cleanup;
+    this._markAvatarImage(avatar);
+  }
+  /**
+   * A picture from the stylesheet alone: an empty slot whose role's `--aparte-avatar-image-*`
+   * names an image gets `data-image`, which lifts the rule that hides an empty slot. Hidden
+   * while empty, the token painted nothing. Read when the message is drawn and on every
+   * config change, in a batch with the other bubbles' (see `pendingAvatarMarks`).
+   */
+  _markAvatarImage(avatar) {
+    if (avatar.firstChild) {
+      pendingAvatarMarks.delete(avatar);
+      avatar.removeAttribute("data-image");
+      return;
+    }
+    if (pendingAvatarMarks.size === 0) queueMicrotask(flushAvatarMarks);
+    pendingAvatarMarks.set(avatar, { bubble: this, role: this._role });
   }
   _updateRole() {
     const message = this.querySelector(".aparte-message");
@@ -1736,13 +1949,13 @@ class AparteChatBubble extends HTMLElement {
     const nameEl = this.querySelector(".aparte-name");
     if (message) {
       message.setAttribute("data-role", this._role);
-      if (message.getAttribute("role") === "article") {
+      if (this._wroteRootLabel && message.getAttribute("role") === "article") {
         message.setAttribute("aria-label", this._getAriaLabel());
       }
     }
     if (avatar) {
       avatar.setAttribute("data-role", this._role);
-      if (avatar.textContent) avatar.textContent = this._getAvatarInitial();
+      if (avatar.textContent && !this._avatarFromProvider) avatar.textContent = this._getAvatarInitial();
     }
     if (nameEl) {
       nameEl.textContent = this._getDisplayName();
@@ -1753,10 +1966,12 @@ class AparteChatBubble extends HTMLElement {
   _updateName() {
     const avatar = this.querySelector(".aparte-avatar");
     const nameEl = this.querySelector(".aparte-name");
-    if (avatar && avatar.textContent && !this._cfg.getAvatarProvider()) {
+    if (avatar && avatar.textContent && !this._cfg.getAvatarProvider() && !this._avatarFromProvider) {
       avatar.textContent = this._getAvatarInitial();
     }
     if (nameEl) nameEl.textContent = this._getDisplayName();
+    const message = this.querySelector(".aparte-message");
+    if (this._wroteRootLabel && message?.getAttribute("role") === "article") message.setAttribute("aria-label", this._getAriaLabel());
   }
   _updateContent() {
     if (!this._contentEl) return;
@@ -1765,6 +1980,7 @@ class AparteChatBubble extends HTMLElement {
       this._updateWaiting();
       return;
     }
+    this._drawnWithVersion = renderingVersionOf(this._cfg);
     this._contentEl.style.display = "";
     runWithConfig(
       this._cfg,
@@ -1802,6 +2018,7 @@ class AparteChatBubble extends HTMLElement {
   }
   _renderSegments() {
     if (!this._segmentsEl) return;
+    this._drawnWithVersion = renderingVersionOf(this._cfg);
     this._segmentsEl.innerHTML = "";
     for (const segment of this._segments) {
       const renderer = resolveSegmentRenderer(segment.type, this._cfg);
@@ -1848,8 +2065,16 @@ class AparteChatBubble extends HTMLElement {
       timestampEl.textContent = "";
     }
   }
+  /**
+   * Named after its author when it has one: a `name` on the bubble is who wrote it (a human
+   * agent answering on the assistant's side, a second assistant), and naming every one of
+   * them "Assistant response" told a screen-reader user the opposite of what the page shows.
+   * Without a name, the role names it.
+   */
   _getAriaLabel() {
     const locale = this._cfg.getLocale();
+    const name = this.getAttribute("name");
+    if (name) return (locale.messageFrom || "Message from {name}").replace("{name}", () => name);
     return this._role === "user" ? locale.yourMessage ?? "Your message" : locale.assistantResponse ?? "Assistant response";
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -1907,9 +2132,9 @@ class AparteChatBubble extends HTMLElement {
    *
    * An attachment's `url` is documented as "URL or data URI" and a storage adapter
    * re-mints it when a conversation is restored, so it is the app's value, not the
-   * composer's — it was escaped and written, where every other URL core emits is
-   * asked whether its SCHEME is allowed at all. A picture whose URL is refused is
-   * not half-rendered: it falls back to the file chip, which still names the file.
+   * composer's — and, like every other URL core emits, it is asked whether its SCHEME
+   * is allowed at all. A picture whose URL is refused is not half-rendered: it falls
+   * back to the file chip, which still names the file.
    *
    * `blob:` is added because it is the shape core itself mints — `filesToAttachments`
    * calls `URL.createObjectURL`, and `AparteMessage.attachments` documents the same
@@ -1930,21 +2155,12 @@ class AparteChatBubble extends HTMLElement {
   /**
    * 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.
+   * The listener lives on the host, which is never replaced, and `closest()` finds
+   * whichever button exists at the moment of the click — so a click that lands while
+   * a re-render is swapping the buttons is not lost.
    *
    * 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`).
+   * field, so a re-connect never stacks listeners.
    */
   _onBranchPickerClick = (event) => {
     const target = event.target;
@@ -1963,7 +2179,7 @@ class AparteChatBubble extends HTMLElement {
   /**
    * A link the MODEL wrote is about to be followed. Announced as a cancelable event
    * before the browser acts, so a host can route it — an external browser, a
-   * confirmation, an embedded view — without intercepting the DOM (issue #38). With
+   * confirmation, an embedded view — without intercepting the DOM. With
    * no listener the browser follows it, which the sanitizer has already made open in
    * a new tab for an external URL; `preventDefault()` on the event cancels the click.
    *
@@ -2092,7 +2308,7 @@ class AparteChatBubble extends HTMLElement {
     }
     this._actionBarEl.innerHTML = buttons.join("");
     this._syncCopyAction();
-    this._appendCustomActions(icons);
+    this._appendCustomActions();
     this._applyTranscriptBusy();
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
       btn.addEventListener("click", (e) => this._handleActionClick(e));
@@ -2102,18 +2318,14 @@ class AparteChatBubble extends HTMLElement {
   /**
    * `role="toolbar"` promises a keyboard model. This is it.
    *
-   * The bar has announced itself as a toolbar since it existed, and a toolbar is ONE
-   * tab stop whose members are reached with the arrow keys — that is the whole of what
-   * the role means to a screen-reader user. What shipped was five independent tab
-   * stops per message, so the role described a behaviour that did not exist: a reader
-   * told to press Right heard nothing move, and tabbing through a long transcript
-   * walked every button of every message.
+   * A toolbar is ONE tab stop whose members are reached with the arrow keys — that is
+   * the whole of what the role means to a screen-reader user. Without it, tabbing
+   * through a long transcript would walk every button of every message.
    *
    * The roving index is re-applied from `_syncFooterVisibility`, which is the single
-   * funnel all three build paths already run through (the flag-driven bar, the edit
-   * bar, and the branch picker's own visibility pass). Re-deriving it there rather
-   * than in each builder is what keeps the invariant true after a `setBubbleActions`
-   * rebuild — the drift this pattern usually dies of.
+   * funnel all three build paths run through (the flag-driven bar, the edit bar, and
+   * the branch picker's own visibility pass). Re-deriving it there rather than in each
+   * builder keeps the invariant true after a `setBubbleActions` rebuild.
    *
    * DISABLED buttons are skipped, not merely un-tabbable: while the transcript is busy
    * retry and edit are disabled, and a toolbar whose arrows stop on a dead control
@@ -2161,9 +2373,9 @@ class AparteChatBubble extends HTMLElement {
     buttons[next]?.focus();
   };
   /**
-   * An empty action bar is not a bar: with every action off it was still a
-   * `role="toolbar"` with nothing in it (announced as such), and it still reserved
-   * its fixed height plus the footer's under every bubble. So both follow their
+   * An empty action bar is not a bar: with every action off it would be a
+   * `role="toolbar"` with nothing in it (announced as such) that still reserves its
+   * fixed height plus the footer's under every bubble. So both follow their
    * contents — the footer stays as long as the branch picker or the bar has
    * something to show.
    */
@@ -2177,7 +2389,7 @@ class AparteChatBubble extends HTMLElement {
     this.querySelector(".aparte-message")?.toggleAttribute("data-branches", !pickerHidden);
   }
   /** Append the registered custom action buttons for this bubble's role. */
-  _appendCustomActions(icons) {
+  _appendCustomActions() {
     if (!this._actionBarEl) return;
     for (const a2 of this._cfg.getActions("bubble")) {
       const roles = a2.bubble?.roles ?? ["user", "assistant"];
@@ -2188,8 +2400,7 @@ class AparteChatBubble extends HTMLElement {
       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.innerHTML = a2.icon.startsWith("<") ? a2.icon : this._cfg.getIcon(a2.icon) ?? a2.iconFallback ?? "";
       this._actionBarEl.appendChild(btn);
     }
   }
@@ -2378,6 +2589,8 @@ class AparteChatBubble extends HTMLElement {
     if (this._contentEl) this._contentEl.style.display = "";
     this.querySelector(".aparte-message")?.removeAttribute("data-editing");
     this._editing = false;
+    this._redrawFrameIfChanged();
+    this._redrawIfStale();
     this._updateActionBar();
     const returnTo = this._editReturnAction;
     this._editReturnAction = null;
@@ -2434,6 +2647,9 @@ class AparteChatBubble extends HTMLElement {
     }
     this._updateWaiting();
     if (wasStreaming && !streaming) this._updateContent();
+    if (wasStreaming && !streaming && this._segments.length > 0 && renderingVersionOf(this._cfg) !== this._drawnWithVersion) {
+      this._renderSegments();
+    }
   }
 }
 if (!customElements.get("aparte-chat-bubble")) {
@@ -2596,6 +2812,15 @@ class AparteChatStatus extends HTMLElement {
   _updateText(text) {
     const container = this.querySelector(".aparte-status-container");
     if (!container) return;
+    const custom = this._cfg?.getStatusRenderer?.();
+    if (custom) {
+      const next = text || this._word();
+      container.setAttribute("aria-label", next);
+      const result = runWithConfig(this._cfg, () => custom(next));
+      if (result instanceof HTMLElement) container.replaceChildren(result);
+      else container.innerHTML = result;
+      return;
+    }
     this._writeText(text);
     container.setAttribute("aria-label", text || this._word());
   }
@@ -2655,17 +2880,14 @@ class AparteChatViewport extends HTMLElement {
    *  Not `readonly`: a test shortens it to run past the window's end in a few frames. */
   _settleWindowMs = 400;
   /**
-   * Until when a smooth scroll of ours is in flight (#57). A user send glides to the
-   * bottom with `scrollTo({ behavior: 'smooth' })`; the assistant placeholder and the
-   * first tokens used to land INSIDE that glide through the streaming path — an instant
-   * `scrollTop = scrollHeight` plus the settle chain — and an instant write cancels a
-   * running smooth scroll in every engine. Measured before the fix: five instant writes
-   * in the send's own frame (the spacer recalculation scrolls synchronously, the
-   * mutation observer queues another), so there never was a glide to cut — the view
-   * teleported. While this deadline is ahead, every bottom-pin RE-TARGETS the glide
-   * (a second smooth `scrollTo` is continuous) instead of writing `scrollTop`; the
-   * browser's `scrollend` closes it early where supported. Streaming is instant again
-   * after that, as it must be to keep up with token bursts.
+   * Until when a smooth scroll of ours is in flight. A user send glides to the
+   * bottom with `scrollTo({ behavior: 'smooth' })`, and the assistant placeholder and
+   * first tokens land inside that glide. An instant `scrollTop = scrollHeight` write
+   * cancels a running smooth scroll in every engine, so while this deadline is ahead
+   * every bottom-pin RE-TARGETS the glide (a second smooth `scrollTo` is continuous)
+   * instead of writing `scrollTop`; the browser's `scrollend` closes it early where
+   * supported. Streaming is instant after that, as it must be to keep up with token
+   * bursts.
    */
   _glideUntil = 0;
   /** The glide's budget when `scrollend` is not there to close it: Chromium's smooth scroll over a viewport takes ~300–500 ms. */
@@ -2689,11 +2911,22 @@ class AparteChatViewport extends HTMLElement {
   _maxRenderedBubbles = 1e3;
   _resizeObserver = null;
   _mutationObserver = null;
+  /**
+   * Watches the size of the bubbles the bottom spacer measures — the last question and
+   * everything after it. A bubble that has never been on screen measures its
+   * `content-visibility` fallback (320px) until it is shown, and taking its real height
+   * is neither a mutation nor a resize of the scroll container: without this, a spacer
+   * sized from two fallbacks stayed wrong once they came into view.
+   */
+  _tailObserver = null;
+  _tail = [];
+  /** Each tail bubble's border-box height, as measured when it started being watched and as last reported. */
+  _tailHeights = /* @__PURE__ */ new WeakMap();
   /**
    * Opening or closing a `<details>` — a tool row, a reasoning block, an artifact card, a host's
    * own — changes the transcript's height through an ATTRIBUTE, which neither observer sees: the
    * mutation observer watches children, and the resize observer leaves the wrapper out on
-   * purpose. `toggle` does not bubble, so it is caught on the way down (#105).
+   * purpose. `toggle` does not bubble, so it is caught on the way down.
    */
   _onDisclosureToggle = () => {
     this._scheduleSpacerUpdate();
@@ -2778,8 +3011,8 @@ class AparteChatViewport extends HTMLElement {
     window.addEventListener("aparte-config-change", this._onConfigChange);
   }
   /**
-   * A locale switch changes the reading direction, and `dir` was applied once at
-   * render — so a chat already on screen never flipped to RTL until a reload.
+   * A locale switch changes the reading direction, and `dir` follows it, so a chat
+   * already on screen flips to RTL without a reload.
    * Only OUR config: an instance-scoped change elsewhere must not touch us.
    */
   _onConfigChange = (e) => {
@@ -2796,15 +3029,14 @@ class AparteChatViewport extends HTMLElement {
    * A scrollable region that no element can hold focus in cannot be scrolled from
    * the keyboard in WebKit: Chromium and Firefox hand an unfocusable overflow box a
    * caret or a "scroller" tab stop of their own, Safari does not. So a plain-text
-   * transcript — no links, no code blocks, nothing focusable inside — was unreadable
-   * past the first screen for a Safari keyboard user, with no error and nothing on
-   * screen to say so.
+   * transcript — no links, no code blocks, nothing focusable inside — would be
+   * unreadable past the first screen for a Safari keyboard user, with no error and
+   * nothing on screen to say so.
    *
-   * `tabindex="0"` on the surface itself, in BOTH DOM modes. The framework mode
-   * appeared to work already, and only by accident: the scroll button is inside the
-   * host and stays tabbable while it is visually hidden, so Tab happened to land
-   * somewhere that scrolled. A tab stop that exists because a hidden button happens
-   * to sit there is not an affordance, it is a coincidence.
+   * `tabindex="0"` on the surface itself, in BOTH DOM modes. In framework mode the
+   * scroll button is inside the host and stays tabbable while it is visually hidden,
+   * but a tab stop that exists because a hidden button happens to sit there is a
+   * coincidence, not an affordance.
    *
    * The name ships WITH the tab stop rather than after it: a focusable `role="log"`
    * with no accessible name is announced as an unnamed region, which is a worse
@@ -2933,10 +3165,10 @@ class AparteChatViewport extends HTMLElement {
    * The id of the message currently streaming, if any — searched across the whole
    * TREE, and answering with an OFF-HEAD one first when there are two.
    *
-   * It used to scan `getMessages()`, the active path. A retry or an edit on an
+   * Not a scan of `getMessages()`, the active path: a retry or an edit on an
    * earlier bubble calls `addSiblingOf`, which switches the branch to the new pending
-   * reply: the turn still being written leaves the path, the scan found nothing, and
-   * the rest of that turn was appended to the message that had just replaced it.
+   * reply, so the turn still being written leaves the path and a path scan would find
+   * nothing, appending the rest of that turn to the message that just replaced it.
    *
    * A new pending reply is itself marked streaming, so "the first one found" would
    * answer the head and let the write through — the very case this exists to refuse.
@@ -2959,10 +3191,10 @@ class AparteChatViewport extends HTMLElement {
   /**
    * While a reply streams, the transcript is read-only except for Stop.
    *
-   * The streaming message's own footer was already hidden; every OTHER message kept
-   * its branch picker and its retry/edit buttons live. Swapping a branch mid-stream
-   * re-rendered the active path under the reply being written, and a retry cut that
-   * reply off to start another — both seen on the landing page. The state that
+   * The streaming message's own footer is hidden, and the branch picker and the
+   * retry/edit buttons of every OTHER message are disabled: swapping a branch mid-stream would
+   * re-render the active path under the reply being written, and a retry would cut
+   * that reply off to start another. The state that
    * decides it is the whole transcript's, so it lives on the viewport (`data-busy`)
    * and is pushed to the bubbles it holds; a bubble mounted later, under a
    * framework's DOM, reads the attribute itself when it connects.
@@ -3417,10 +3649,13 @@ class AparteChatViewport extends HTMLElement {
     }
   }
   /**
-   * Enable or disable auto-scroll
+   * Enable or disable auto-scroll. Turned off, it stays off through the scroll that comes
+   * next — a jump of the page's own, smooth or not — and comes back once the reader is at
+   * the bottom again.
    */
   setAutoScroll(enabled) {
     this._isAutoScrollEnabled = enabled;
+    if (!enabled) this._readerInputAt = performance.now();
   }
   /**
    * Signal that a framework (e.g. Angular) manages the bubble DOM.
@@ -3769,7 +4004,19 @@ class AparteChatViewport extends HTMLElement {
         });
       }
       this._scheduleSpacerUpdate();
+      const movesBubbles = (nodes) => Array.from(nodes).some((n2) => n2 instanceof Element && (n2.tagName === "APARTE-CHAT-BUBBLE" || n2.querySelector("aparte-chat-bubble") !== null));
+      if (mutations.some((m2) => movesBubbles(m2.addedNodes) || movesBubbles(m2.removedNodes))) this._observeTail();
     });
+    this._tailObserver = new ResizeObserver((entries) => {
+      let changed = false;
+      for (const entry of entries) {
+        const height = Math.round(entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height);
+        if (this._tailHeights.get(entry.target) !== height) changed = true;
+        this._tailHeights.set(entry.target, height);
+      }
+      if (changed) this._scheduleSpacerUpdate();
+    });
+    this._observeTail();
     this.addEventListener("toggle", this._onDisclosureToggle, true);
     const observeTarget = this._frameworkManagedDOM ? this : wrapper;
     if (observeTarget) {
@@ -3822,10 +4069,9 @@ class AparteChatViewport extends HTMLElement {
    * the transcript's padding plus the scrollbar gutter the scroller reserves on both
    * edges, at whatever step its container query has taken — as
    * `--aparte-transcript-inset`. The composer pads by it (composer.css), so its box
-   * lands on the row's box at every width. The two used to be independent stacks: the
-   * composer cannot know the gutter and a container query cannot reach it, so they sat
-   * 10px apart at 768 and the gutter's half apart at 1280, and the reading-column demo
-   * showed three left edges 12px apart. Written only when the value changes, for the
+   * lands on the row's box at every width. The composer cannot know the gutter
+   * and a container query cannot reach it, so this is the one place both boxes read
+   * it from. Written only when the value changes, for the
    * same reason `_updateOverlayInset` is. On the HOST, not on this element: the
    * composer is a sibling, and a custom property only travels down.
    */
@@ -3856,7 +4102,8 @@ class AparteChatViewport extends HTMLElement {
     const drop = this._lastScrollTop - top;
     const churn = Math.abs(height - this._lastScrollHeight);
     const now = performance.now();
-    const afterMutation = now - this._lastMutationAt < this._settleShadowMs && drop <= this._settleBoundPx;
+    const shrank = height < this._lastScrollHeight - 1;
+    const afterMutation = now - this._lastMutationAt < this._settleShadowMs && (drop <= this._settleBoundPx || shrank);
     const settlingOurs = now - this._ownScrollAt < this._ownScrollWindowMs && now - this._readerInputAt >= this._ownScrollWindowMs && !this._pointerHeld && (drop <= churn + 2 || afterMutation);
     const readerWentUp = drop > 1 && !settlingOurs;
     const readerHandOnIt = drop > 1 && now - this._readerInputAt < this._ownScrollWindowMs;
@@ -3899,9 +4146,8 @@ class AparteChatViewport extends HTMLElement {
    * The browser says a scroll came to rest — the glide is over ONLY if it rested at the
    * bottom. WebKit fires `scrollend` when a smooth scroll is REPLACED by another (our own
    * re-target), 45–60 ms into the glide and hundreds of pixels short; taken at its word,
-   * that closed the window and the next pin was the cut this guard exists to prevent
-   * (react-webkit and vanilla-webkit, 2 of 2). Short of the bottom, the budget keeps
-   * bounding the window.
+   * that would close the window and the next pin would be the cut this guard exists
+   * to prevent. Short of the bottom, the budget keeps bounding the window.
    */
   _handleScrollEnd() {
     if (!this._container) return;
@@ -3911,37 +4157,27 @@ class AparteChatViewport extends HTMLElement {
   /**
    * 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.
+   * One assignment is not enough. Content can settle in several layout passes
+   * (1118 → 1121 → 1152 px on Safari in framework mode), and `scrollTop =
+   * scrollHeight` run against a middle pass clamps to that layout's max and leaves
+   * the rest unclosed. Auto-follow stays armed the whole time, so the component is
+   * not disarmed — it is 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".
    *
    * 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.
+   * stale layout and can leave 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.
    *
-   * Bounded by TIME, and it does not stop at the first closed gap — both of those
-   * were the second half of the same bug. It used to be four frames (~64ms on an
-   * idle 60Hz machine) and to return permanently the frame the gap first closed.
-   * A branch swap at the bottom of a long transcript on react-webkit falsified
-   * both at once: the rebuild's scrollable max churned 891 -> 1091 -> 891, the gap
-   * WAS closed for a frame against the tall layout, the chain returned, the height
-   * fell back with WebKit holding `scrollTop` at 720 — and the transcript stood
-   * 171px short with auto-follow still armed. A frame count is a proxy for time
-   * that fails exactly on the slow engine, so the budget is real milliseconds now,
-   * and a closed gap only ends the chain when the window is over. One chain, not
-   * one per call: during a stream every token used to start its own.
+   * Bounded by TIME, and it does not stop at the first closed gap. A branch swap at
+   * the bottom of a long transcript churns the scrollable max (891 -> 1091 -> 891):
+   * the gap is closed for a frame against the tall layout, the height falls back with
+   * WebKit holding `scrollTop`, and the transcript would stand short with auto-follow
+   * still armed. A frame count is a proxy for time that fails exactly on the slow
+   * engine, so the budget is real milliseconds, and a closed gap only ends the chain
+   * when the window is over. One chain, not one per call: during a stream every token
+   * would otherwise start its own.
    */
   _settleAtBottom() {
     this._settleUntil = performance.now() + this._settleWindowMs;
@@ -3973,6 +4209,7 @@ class AparteChatViewport extends HTMLElement {
         this._glideSettleTimer = null;
         if (!this._container || !this._isAutoScrollEnabled || this._gliding()) return;
         const max = this._container.scrollHeight - this._container.clientHeight;
+        if (this._container.scrollTop < this._lastScrollTop - 1) return;
         if (max - this._container.scrollTop > 1) this._scrollToBottom();
       }, this._glideWindowMs + 16);
     } else {
@@ -3988,10 +4225,10 @@ class AparteChatViewport extends HTMLElement {
    *
    * The two answer different questions: the flag is intent ("should new content
    * pull the view down"), the button is a fact ("is there anything below the
-   * fold"). Mirroring the flag made the button lie whenever the two diverged —
+   * fold"). Mirroring the flag would make the button lie whenever the two diverge —
    * `navigateBranch` deliberately disarms auto-follow, so swapping a branch while
-   * already at the bottom of a scrollable transcript left the button offering to
-   * scroll nowhere (reported from a React consumer). Re-derived on scroll, on the
+   * already at the bottom of a scrollable transcript would leave the button offering
+   * to scroll nowhere. Re-derived on scroll, on the
    * post-mutation frame and after a path swap, so it converges to the truth
    * whatever a framework's render timing does in between.
    */
@@ -4044,13 +4281,29 @@ class AparteChatViewport extends HTMLElement {
       return;
     }
     const contentBelowUserTop = scrollHeightWithoutSpacer - userTopInContent;
-    const needed = this._container.clientHeight - contentBelowUserTop;
+    const covered = parseFloat(getComputedStyle(this._container).scrollPaddingTop) || 0;
+    const needed = this._container.clientHeight - covered - contentBelowUserTop;
     const maxSpacer = this._container.clientHeight;
     this._setSpacerHeight(Math.min(Math.max(0, needed), maxSpacer));
     if (this._isAutoScrollEnabled) {
       this._scrollToBottom();
     }
   }
+  /** Point `_tailObserver` at the last question and the bubbles after it, and only those. */
+  _observeTail() {
+    if (!this._tailObserver) return;
+    const bubbles = Array.from(this.querySelectorAll("aparte-chat-bubble"));
+    let from = bubbles.length;
+    while (from > 0 && bubbles[from - 1].getAttribute("data-role") !== "user") from--;
+    const tail = from > 0 ? bubbles.slice(from - 1) : [];
+    for (const el2 of this._tail) if (!tail.includes(el2)) this._tailObserver.unobserve(el2);
+    for (const el2 of tail) {
+      if (this._tail.includes(el2)) continue;
+      this._tailHeights.set(el2, Math.round(el2.offsetHeight));
+      this._tailObserver.observe(el2, { box: "border-box" });
+    }
+    this._tail = tail;
+  }
   /**
    * Schedule a spacer recalculation on the next animation frame.
    * Batches multiple rapid calls (e.g. during token streaming) into one.
@@ -4106,6 +4359,9 @@ class AparteChatViewport extends HTMLElement {
     this.removeEventListener("aparte-branch-navigate", this._onBranchNavigate);
     this._resizeObserver?.disconnect();
     this._mutationObserver?.disconnect();
+    this._tailObserver?.disconnect();
+    this._tailObserver = null;
+    this._tail = [];
     this.removeEventListener("toggle", this._onDisclosureToggle, true);
     this._overlayObserver?.disconnect();
     this._overlayObserver = null;
@@ -4141,14 +4397,11 @@ class AparteComposer extends HTMLElement {
   /**
    * 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.
+   * There is exactly one slot and `showPanel` empties it unconditionally, so every
+   * path that closes a panel whose owner is still awaiting an answer — a second
+   * `showPanel`, `hidePanel` without the owner's token, `_handleMessageDone` (which
+   * fires on EVERY turn end) — must tell the owner. An owner that is not told keeps
+   * its request pending, and every later request is short-circuited behind it.
    */
   _panelToken = null;
   _panelOnEvict = null;
@@ -4171,10 +4424,10 @@ class AparteComposer extends HTMLElement {
    *
    * 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.
+   * would latch the global config forever: an instance `config` carrying an RTL
+   * locale would flip the transcript and not the composer, and the
+   * `requireModelSelection` gate would be read off the wrong object.
+   * `aparte-chat-bubble` resolves live too, and its JSDoc names this race.
    */
   get _cfg() {
     return resolveConfig(this);
@@ -4195,10 +4448,10 @@ class AparteComposer extends HTMLElement {
    * Mirror `locale.direction` onto ourselves, so everything inside — input, buttons,
    * the toolbar row and whatever the consumer put in it — inherits it.
    *
-   * The direction used to stop at the transcript: only the viewport applied `dir`, so
-   * an RTL locale flipped the conversation and left the composer left-to-right. It is
-   * also what makes the toolbar's placement idiom real: `margin-inline-start: auto` in
-   * a subtree that inherits no direction is just `margin-left`.
+   * Without it an RTL locale flips the conversation and leaves the composer
+   * left-to-right. It is also what makes the toolbar's placement idiom real:
+   * `margin-inline-start: auto` in a subtree that inherits no direction is just
+   * `margin-left`.
    *
    * One attribute on the host rather than a stamp per child: inheritance is the
    * mechanism, so nothing needs to know about the consumer's markup.
@@ -4252,9 +4505,9 @@ class AparteComposer extends HTMLElement {
   /**
    * The attribute is the state, so the property writes it. It has to exist: React 19
    * and Svelte assign the PROPERTY whenever the element has one of that name, and a
-   * getter alone made `<aparte-composer disabled="">` — a spelling the wrappers type
-   * as valid — throw and take the render down. `presenceOn` because `''` is what
-   * those templates hand a presence property (#62).
+   * getter alone would make `<aparte-composer disabled="">` — a spelling the wrappers
+   * type as valid — throw and take the render down. `presenceOn` because `''` is what
+   * those templates hand a presence property.
    */
   set disabled(value) {
     this.toggleAttribute("disabled", presenceOn(value));
@@ -4340,27 +4593,23 @@ class AparteComposer extends HTMLElement {
    *
    * 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.
+   * the attachment picker above all, which would otherwise stay clickable while the
+   * user is being asked something. 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.
    *
    * The send button is the part the PANEL decides, through `mode`. `'submit'`
-   * keeps it; `'none'` says this panel has no act for it and it is not drawn. That third value is what a panel whose options settle on the first click
-   * needs — a single-choice question, an approval — and until it existed such a
-   * panel left a permanently disabled button beside options that never routed
-   * through it. Flip between them at any time with {@link setPanelSubmitEnabled},
-   * which is how a panel that grows an act (an "Other…" field, a written
-   * instruction) turns the button back on.
+   * keeps it; `'none'` says this panel has no act for it and it is not drawn. `'none'`
+   * is what a panel whose options settle on the first click needs — a single-choice
+   * question, an approval. Flip between them at any time with
+   * {@link setPanelSubmitEnabled}, which is how a panel that grows an act (an
+   * "Other…" field, a written instruction) turns the button back on.
    *
-   * 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).
+   * The mode is declared with an attribute + CSS rather than inline `style.display`
+   * on a child: an attribute is themeable, is visible to a consumer's own rules, and
+   * does not clobber a `display` the consumer set.
    *
    * 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
@@ -4399,18 +4648,6 @@ class AparteComposer extends HTMLElement {
    * no token it closes whatever is there, which is what a consumer driving the
    * composer directly means.
    *
-   * BOTH forms notify. The no-token form used to call `_teardownPanel` directly,
-   * which nulls `_panelOnEvict` without ever calling it — so the documented public
-   * `hidePanel()` closed an open approval panel and left its request pending
-   * forever. The turn hung on "waiting for you", and because
-   * `AparteConfig.requestUserInput` chains each request on the previous one, NO
-   * further question or approval on that config was ever presented again, for the
-   * life of the page.
-   *
-   * The old JSDoc justified the silent branch as "what `reset()` needs". It was not:
-   * `reset()` calls `_evictPanel()`, which notifies. The branch had no consumer and
-   * one failure mode.
-   *
    * The two forms differ on purpose, and the difference is who already knows:
    *
    * - **With a matching token** the OWNER is closing its own panel, which is what
@@ -4470,10 +4707,10 @@ class AparteComposer extends HTMLElement {
   /**
    * Publish the panel mode as an attribute, so CSS can act on it.
    *
-   * The same reasoning `data-panel-active` is set for and the same one that took
-   * the old `style.display` off a child: an attribute is themeable, is visible to
-   * a consumer's own rules, and does not clobber what the consumer set. It is what
-   * lets `'none'` remove the send button without this component reaching into it.
+   * The same reasoning `data-panel-active` is set for: an attribute is themeable, is
+   * visible to a consumer's own rules, and does not clobber what the consumer set. It
+   * is what lets `'none'` remove the send button without this component reaching
+   * into it.
    */
   _reflectPanelMode() {
     if (this._panelActive) this.setAttribute("data-panel-mode", this._panelMode);
@@ -4583,15 +4820,12 @@ class AparteComposer extends HTMLElement {
    * 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.
+   * All four wrappers set `target` themselves. In RAW core — the documented quick
+   * start, where the markup is hand-written — nothing sets it, so the chat host above
+   * is what identifies the composer; without either, it would accept every chat's
+   * lifecycle events and, on a two-chat page, one chat's Stop would tear down the
+   * other's open elicitation panel.
    *
-   * 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.
@@ -4629,11 +4863,11 @@ class AparteComposer extends HTMLElement {
    * Whether a terminal event ends the turn this composer is following.
    *
    * `_isForThisComposer` answers "is this chat's?", and both turns of a retry belong
-   * to the same chat: the client aborts the superseded reply, the engine emits
-   * `run-aborted` for it, and that unwind turned Stop back into Send while the new
-   * reply was still streaming — and evicted the open panel, i.e. the approval question
-   * a tool was still waiting on. An event with no `messageId` still ends the turn: a
-   * loop of one's own saying "done" has always meant this one.
+   * to the same chat: the client aborts the superseded reply and the engine emits
+   * `run-aborted` for it, which must not turn Stop back into Send while the new reply
+   * is still streaming, nor evict the open panel (the approval question a tool is
+   * still waiting on). An event with no `messageId` still ends the turn: a loop of
+   * one's own saying "done" means this one.
    */
   _isForThisTurn(e) {
     const id = e.detail?.messageId;
@@ -4661,11 +4895,7 @@ class AparteComposerInput extends HTMLElement {
   _maxHeight = 200;
   _minHeight = 44;
   /**
-   * Re-measures the editor when its WIDTH changes (#55). The three fixed instants
-   * (connect, next frame, fonts.ready) all miss the same case: a box not yet laid
-   * out — the placeholder wraps in a 0 px column, `scrollHeight` reads ~300 px, and
-   * that became the inline height until the first keystroke. Width is the variable
-   * none of them watched.
+   * Re-measures the editor when its WIDTH changes.
    */
   _resizeObserver = null;
   _unsubscribes = [];
@@ -4850,9 +5080,10 @@ class AparteComposerInput extends HTMLElement {
     e.preventDefault();
     const cd = e.clipboardData;
     if (!cd) return;
-    const imageFile = Array.from(cd.items).find((i2) => i2.type.startsWith("image/"))?.getAsFile();
+    const root = this._getRoot();
+    const imageFile = root?.querySelector("aparte-composer-add-attachment") ? Array.from(cd.items).find((i2) => i2.type.startsWith("image/"))?.getAsFile() : void 0;
     if (imageFile) {
-      this._getRoot()?.addAttachments([imageFile]);
+      root?.addAttachments([imageFile]);
       return;
     }
     const text = cd.getData("text/plain");
@@ -4914,9 +5145,8 @@ class AparteComposerSend extends HTMLElement {
    *
    * This button has four meanings — send, stop, submit an answer, advance to the
    * next question — and three of them are decided by state it does not own: the
-   * root's `streaming`, and this payload. It was read straight out of the event's
-   * arguments and thrown away, so nothing could recompute the button's chrome
-   * afterwards; a config change had no way to know which of the four to write.
+   * root's `streaming`, and this payload. It is kept so the button's chrome can be
+   * recomputed after the event, for example on a config change.
    */
   _panel = null;
   // Bound handler
@@ -4999,14 +5229,13 @@ class AparteComposerSend extends HTMLElement {
     this._syncState();
   }
   /**
-   * Panel open: this one button now means "submit the answer".
+   * Panel open: this one button means "submit the answer".
    *
-   * The icon has to move with the meaning: it drew a paper plane while the label
-   * already said "Submit", so it read as "send a message" while it meant "answer
-   * this question". It used to draw a chevron too, while a form had questions
-   * ahead, and turn into a "Next" — a second way to do what the panel's chips do,
-   * and a button whose meaning changed under the pointer. It is disabled instead
-   * until every question has an answer, which is what the chips' marks explain.
+   * The icon moves with the meaning: a paper plane would read as "send a message"
+   * while the label says "Submit". The button never turns into a "Next" while a form
+   * has questions ahead (the panel's chips do that, and a button whose meaning
+   * changed under the pointer would be a second way to do it). It is disabled
+   * instead until every question has an answer, which is what the chips' marks explain.
    */
   _syncPanelState() {
     const panel = this._panel;
@@ -5171,7 +5400,7 @@ class AparteComposerAttachments extends HTMLElement {
     this.hidden = files.length === 0;
     this._revokeUrls();
     const cfg = resolveConfig(this);
-    const removeLabel = (file) => (cfg.t("removeAttachment") || "Remove {name}").replace("{name}", file.name);
+    const removeLabel = (file) => (cfg.t("removeAttachment") || "Remove {name}").replace("{name}", () => file.name);
     this.innerHTML = files.map((file) => {
       const name = escapeHtml(file.name);
       const remove = `<button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-thumb__remove" type="button" aria-label="${escapeAttr(removeLabel(file))}">${cfg.getIcon("close")}</button>`;
@@ -5468,6 +5697,21 @@ class AparteComposerToolbar extends HTMLElement {
 if (!customElements.get("aparte-composer-toolbar")) {
   customElements.define("aparte-composer-toolbar", AparteComposerToolbar);
 }
+function foldText(text) {
+  return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
+}
+function filterConversationRows(root, needle) {
+  let matches = 0;
+  for (const row of root.querySelectorAll("[data-conv-id]")) {
+    const title = row.querySelector(".aparte-conv-item__title")?.textContent ?? row.textContent ?? "";
+    row.hidden = needle !== "" && !foldText(title).includes(needle);
+    if (!row.hidden) matches++;
+  }
+  for (const group of root.querySelectorAll(".aparte-conv-group")) {
+    group.hidden = needle !== "" && !Array.from(group.querySelectorAll("[data-conv-id]")).some((r) => !r.hidden);
+  }
+  return matches;
+}
 function rowSelector(attr, id) {
   return `[${attr}="${cssEscape(id)}"]`;
 }
@@ -5499,11 +5743,10 @@ class AparteConversationList extends HTMLElement {
    * Let the list finish the gesture through the registered conversation manager.
    * Reflected as the `manage` attribute.
    *
-   * The property is not a nicety here: this is the attribute that authorises a WRITE,
-   * and Vue and both Sveltes stringify a bound `false` onto an element that has no
-   * property of that name — `manage="false"`, which `hasAttribute` reads as on. So
-   * turning management off turned it on, and a delete the host meant to handle itself
-   * was also done by the list. `presenceOn`, like `loading` above it.
+   * The property exists because this is the attribute that authorises a WRITE, and Vue
+   * and both Sveltes stringify a bound `false` onto an element that has no property of
+   * that name — `manage="false"`, which `hasAttribute` reads as on. Without it,
+   * turning management off would turn it on. `presenceOn`, like `loading` above it.
    */
   get manage() {
     return this.hasAttribute("manage");
@@ -5571,13 +5814,12 @@ class AparteConversationList extends HTMLElement {
   /**
    * A press holds every render until its click has landed. The host re-assigns
    * `conversations` on every manager change (a save moves a row, a select marks one),
-   * and a row replaced between `mousedown` and `mouseup` lost its click: Chromium sent
-   * it to the list, where the delegated handler matched nothing, and WebKit sent none.
-   * A conversation clicked while the list settled did not open. Keeping the row node
-   * would not have saved it: a row moved to its new place leaves the document on the
-   * way, and the row that moves is often the one pressed (the conversation just
-   * saved). So nothing changes under a pointer that is down, and the render runs once,
-   * after the click.
+   * and a row replaced between `mousedown` and `mouseup` loses its click: Chromium
+   * sends it to the list, where the delegated handler matches nothing, and WebKit
+   * sends none. Keeping the row node would not help: a row moved to its new place
+   * leaves the document on the way, and the row that moves is often the one pressed
+   * (the conversation just saved). So nothing changes under a pointer that is down,
+   * and the render runs once, after the click.
    */
   _pressed = false;
   _renderAfterPress = false;
@@ -5615,10 +5857,12 @@ class AparteConversationList extends HTMLElement {
     const held = focused && this.contains(focused) ? focused.closest("[data-select-id], [data-more-id]") : null;
     const restore = held?.dataset["selectId"] ? rowSelector("data-select-id", held.dataset["selectId"]) : held?.dataset["moreId"] ? rowSelector("data-more-id", held.dataset["moreId"]) : null;
     const heldRow = held?.closest("[data-conv-id]") ?? null;
-    const heldIndex = heldRow ? Array.from(this.querySelectorAll("[data-conv-id]")).indexOf(heldRow) : -1;
+    const visible = (el2) => !el2.closest("[hidden]");
+    const heldIndex = heldRow ? Array.from(this.querySelectorAll("[data-conv-id]")).filter(visible).indexOf(heldRow) : -1;
     const loading = this.hasAttribute("loading");
     this.setAttribute("aria-busy", loading ? "true" : "false");
     if (loading) {
+      this.removeAttribute("data-no-match");
       const row = '<span class="aparte-skeleton aparte-skeleton--text"></span>';
       this.innerHTML = '<div class="aparte-conv-list-loading" aria-hidden="true">' + row + row + row + row + row + row + '</div><span class="aparte-conv-list-loading-status aparte-sr-only" role="status"></span>';
       const status = this.querySelector(".aparte-conv-list-loading-status");
@@ -5629,14 +5873,22 @@ class AparteConversationList extends HTMLElement {
       else say();
       return;
     }
-    this.innerHTML = this._groups().map((g2) => this._renderGroup(g2)).join("");
+    const line = this.querySelector(":scope > .aparte-conv-list-no-match");
+    const groups = this._groups().map((g2) => this._renderGroup(g2)).join("");
+    if (line) {
+      for (const child of Array.from(this.childNodes)) if (child !== line) child.remove();
+      line.insertAdjacentHTML("beforebegin", groups);
+    } else {
+      this.innerHTML = groups;
+    }
+    this._applyFilter();
     if (!restore) return;
     const back = this.querySelector(restore);
-    if (back) {
+    if (back && visible(back)) {
       back.focus();
       return;
     }
-    const rows = Array.from(this.querySelectorAll("[data-select-id]"));
+    const rows = Array.from(this.querySelectorAll("[data-select-id]")).filter(visible);
     const next = heldIndex >= 0 ? rows[heldIndex] ?? rows[rows.length - 1] : null;
     if (next) {
       next.focus();
@@ -5648,6 +5900,41 @@ class AparteConversationList extends HTMLElement {
     }
     this.focus();
   }
+  /** The query `filter()` holds, folded; re-applied on every render, so new rows obey it. */
+  _query = "";
+  /**
+   * Show only the conversations whose title contains `query`, case- and
+   * accent-insensitive, and the date groups that still hold one; return how many match.
+   * An empty query shows everything. The query is kept through every render — a new
+   * conversation, a rename — and when nothing matches the list says so in a status line
+   * (the locale's `conversationSearchEmpty`) and carries `data-no-match`.
+   */
+  filter(query) {
+    this._query = foldText(query);
+    return this._applyFilter();
+  }
+  _applyFilter() {
+    const needle = this._query;
+    if (this.hasAttribute("loading")) return 0;
+    const matches = filterConversationRows(this, needle);
+    const noMatch = needle !== "" && matches === 0;
+    this.toggleAttribute("data-no-match", noMatch);
+    let line = this.querySelector(":scope > .aparte-conv-list-no-match");
+    const born = !line;
+    if (!line) {
+      line = document.createElement("p");
+      line.className = "aparte-conv-list-no-match";
+      line.setAttribute("role", "status");
+      this.appendChild(line);
+    }
+    const text = noMatch ? this._t("conversationSearchEmpty") : "";
+    const write = () => {
+      if (line.isConnected && line.textContent !== text) line.textContent = text;
+    };
+    if (born && text && typeof requestAnimationFrame === "function") requestAnimationFrame(write);
+    else write();
+    return matches;
+  }
   _t(key) {
     const locale = resolveConfig(this).getLocale();
     return locale[key] ?? APARTE_DEFAULT_LOCALE[key] ?? "";
@@ -5765,7 +6052,7 @@ class AparteConversationList extends HTMLElement {
   }
   /** The question the confirm step asks — the popover's accessible name while it asks it. */
   _confirmQuestion(conv) {
-    return this._t("deleteConversationConfirm").replace("{title}", conv.title || this._t("newChat"));
+    return this._t("deleteConversationConfirm").replace("{title}", () => conv.title || this._t("newChat"));
   }
   _confirmMarkup(conv) {
     const question = escapeHtml(this._confirmQuestion(conv));
@@ -6141,10 +6428,9 @@ class AparteSuggestions extends HTMLElement {
   /** `hidden` was written by this element, so it is this element's to lift. */
   _hidOwn = false;
   /*
-   * `empty-only` used to read the send alone: hidden on the first one, and never shown
-   * again. Over a restored thread (nothing sent yet) the starters sat on top of the
-   * transcript, and after a new chat they never came back. The transcript is the
-   * signal now; the send stays as the other half, because it comes first — the row
+   * `empty-only` follows the transcript: shown while it is empty, hidden once it has
+   * messages, so a restored thread (nothing sent yet) has no starters on top of it
+   * and a new chat brings them back. The send is the other half, because it comes first — the row
    * hides on the click rather than a frame later when the bubble lands — and because
    * it is all there is to read when the messages are not `<aparte-chat-bubble>`s
    * (a wrapper's `renderBubble`) or there is no transcript at all. A transcript seen
@@ -6175,9 +6461,8 @@ class AparteSuggestions extends HTMLElement {
    *
    * Both, because both arrive: React 19 and Svelte assign the PROPERTY whenever the
    * element has one of that name, so `<aparte-suggestions suggestions='[…]'>` — the
-   * documented spelling, typed valid by both wrappers — reached this setter as a
-   * string, `Array.isArray` said no, and the row rendered nothing while the attribute
-   * (and so `attributeChangedCallback`) was never written.
+   * documented spelling, typed valid by both wrappers — reaches this setter as a
+   * string while the attribute (and so `attributeChangedCallback`) is never written.
    */
   set suggestions(value) {
     this._suggestions = typeof value === "string" ? parseSuggestions(value) : Array.isArray(value) ? value.filter(isSuggestion) : [];
@@ -6372,7 +6657,7 @@ const ringSvg = () => {
 };
 class AparteContext extends HTMLElement {
   static get observedAttributes() {
-    return ["window", "warn", "danger", "target", "variant"];
+    return ["window", "warn", "danger", "target", "variant", "used"];
   }
   _used = null;
   _level = null;
@@ -6406,10 +6691,18 @@ class AparteContext extends HTMLElement {
     this._compactRequested = false;
   };
   _onRerender = () => this._render();
-  /** Tokens the last turn reported, or `null` before the first turn. */
+  /** Tokens the last turn reported — or `used` set, until a turn reports — else `null`. */
   get used() {
     return this._used;
   }
+  /**
+   * Writes the `used` attribute: a reading for a conversation restored without a turn of
+   * this page, which had nothing to report until the next one. `null` clears it.
+   */
+  set used(value) {
+    if (value === null || value === void 0) this.removeAttribute("used");
+    else this.setAttribute("used", String(value));
+  }
   /** The window in force — the attribute, else the current model's. */
   get window() {
     return this._window();
@@ -6442,7 +6735,11 @@ class AparteContext extends HTMLElement {
     window.removeEventListener("aparte-compact-error", this._onCompactError);
     window.removeEventListener("aparte-config-change", this._onRerender);
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(name) {
+    if (name === "used") {
+      const n2 = Number(this.getAttribute("used"));
+      this._used = this.hasAttribute("used") && Number.isFinite(n2) && n2 >= 0 ? n2 : null;
+    }
     if (this.isConnected) this._render();
   }
   _window() {
@@ -6748,12 +7045,11 @@ class AparteScrollRail extends HTMLElement {
    * intersection observer reports which bubbles reach a reading band — the top 30% of
    * the surface, from its very top so that the bubble a jump aligned there counts. The
    * rule is a scrollspy's: the LAST question that has reached the band is the one the
-   * reader is under. "The largest visible share" was the rule before, and at the bottom
-   * of a thread of short turns, where three questions sit in the band, it named the
-   * first of them. Scroll arithmetic was the alternative, and every scroll-position
-   * rule in the viewport carries a regression note; the one read here is the bottom,
-   * because at the bottom the reader is under the latest question whatever the band
-   * holds, and the observer has nothing to report on the last few pixels.
+   * reader is under. (The largest visible share would name the first of three questions
+   * sitting in the band at the bottom of a thread of short turns.) The one scroll
+   * position read is the bottom, because there the reader is under the latest question
+   * whatever the band holds, and the observer has nothing to report on the last few
+   * pixels.
    */
   _observe(bubbles) {
     this._unobserve();
@@ -6925,14 +7221,13 @@ class AparteScrollRail extends HTMLElement {
    * Scroll the transcript to a message. Announced first, cancelable; then a
    * `scrollIntoView` on the bubble, smooth unless the reader prefers reduced motion.
    * The clicked tick is the mark until the transcript has stopped moving: while a
-   * smooth scroll crosses other questions the band would name each in turn, and it
-   * ended on the wrong one two times in three before this hold.
+   * smooth scroll crosses other questions the band would name each in turn.
    *
    * Where the scroll lands is checked once it has settled, and corrected. The bubbles
    * carry `content-visibility: auto`, so a bubble far from the reader has an estimated
    * height until it is rendered: the scroll aims at an estimate, the bubbles above it
-   * take their real size on the way, and the message ends up above or below the top —
-   * measured from 36px to 1,213px off, in all three engines, the further the worse.
+   * take their real size on the way, and the message ends up above or below the top,
+   * the further away the worse.
    * A second `scrollIntoView` from a rendered neighbourhood lands; a few are allowed.
    */
   jumpTo(messageId) {
@@ -6945,6 +7240,7 @@ class AparteScrollRail extends HTMLElement {
     if (!announced) return;
     const bubble = this._bubbleOf(messageId);
     if (!bubble) return;
+    this._viewport()?.setAutoScroll?.(false);
     this._scrollTo(bubble);
     this._setCurrent(messageId);
     this._hold(messageId);
@@ -6975,7 +7271,8 @@ class AparteScrollRail extends HTMLElement {
     const surface = this._settleSurface;
     const bubble = id ? this._bubbleOf(id) : null;
     if (id && bubble && surface && this._alignPasses < MAX_ALIGN_PASSES) {
-      const off = bubble.getBoundingClientRect().top - surface.getBoundingClientRect().top;
+      const aim = surface.getBoundingClientRect().top + (parseFloat(getComputedStyle(surface).scrollPaddingTop) || 0);
+      const off = bubble.getBoundingClientRect().top - aim;
       if (Math.abs(off) > ALIGN_TOLERANCE) {
         this._alignPasses++;
         this._scrollTo(bubble);
@@ -7046,6 +7343,10 @@ class AparteSidebar extends HTMLElement {
    * Same convention as `_relabel`, which leaves a host-authored `aria-label` alone.
    */
   _ownHidden = false;
+  /** The query `filter()` was last given, kept so the sidebar's no-match can follow its lists. */
+  _query = "";
+  /** Watches the lists' own `data-no-match` and `loading`, which change with their renders. */
+  _listWatch = null;
   /** Whether the sidebar is collapsed (hidden in the flow, or closed as a drawer). */
   get collapsed() {
     return this.hasAttribute("collapsed");
@@ -7066,6 +7367,12 @@ class AparteSidebar extends HTMLElement {
       this._hostIntentSeeded = true;
     }
     this.addEventListener("input", this._onInput);
+    if (typeof MutationObserver === "function") {
+      this._listWatch = new MutationObserver((records) => {
+        if (records.some((r) => r.target !== this)) this._syncNoMatch();
+      });
+      this._listWatch.observe(this, { subtree: true, attributes: true, attributeFilter: ["data-no-match", "loading"] });
+    }
     document.addEventListener("keydown", this._onKeydown);
     document.addEventListener("click", this._onDocumentClick);
     window.addEventListener("aparte-config-change", this._onConfigChange);
@@ -7097,6 +7404,8 @@ class AparteSidebar extends HTMLElement {
   }
   disconnectedCallback() {
     this.removeEventListener("input", this._onInput);
+    this._listWatch?.disconnect();
+    this._listWatch = null;
     document.removeEventListener("keydown", this._onKeydown);
     document.removeEventListener("click", this._onDocumentClick);
     window.removeEventListener("aparte-config-change", this._onConfigChange);
@@ -7275,20 +7584,43 @@ class AparteSidebar extends HTMLElement {
     this.filter(input.value);
   };
   /**
-   * Hide the conversation rows whose title does not contain `query`, and the date
-   * groups left empty. Case- and accent-insensitive. An empty query shows everything.
+   * Filter the conversation lists inside by title (case- and accent-insensitive; an
+   * empty query shows everything), and return how many conversations match. Each list
+   * keeps the query through its own renders and says when nothing matches; the
+   * sidebar carries `data-no-match` then too.
    */
   filter(query) {
-    const needle = fold(query);
-    for (const list of this.querySelectorAll("aparte-conversation-list")) {
-      for (const row of list.querySelectorAll("[data-conv-id]")) {
-        const title = row.querySelector(".aparte-conv-item__title")?.textContent ?? row.textContent ?? "";
-        row.hidden = needle !== "" && !fold(title).includes(needle);
-      }
-      for (const group of list.querySelectorAll(".aparte-conv-group")) {
-        group.hidden = needle !== "" && !Array.from(group.querySelectorAll("[data-conv-id]")).some((r) => !r.hidden);
+    this._query = query;
+    let matches = 0;
+    let waiting = false;
+    for (const list of this._lists()) {
+      if (typeof list.filter === "function") matches += list.filter(query);
+      else {
+        matches += filterConversationRows(list, foldText(query));
+        waiting = true;
       }
     }
+    if (waiting && typeof customElements !== "undefined") {
+      void customElements.whenDefined("aparte-conversation-list").then(() => {
+        if (this._query === query) for (const list of this._lists()) list.filter?.(query);
+        this._syncNoMatch();
+      });
+    }
+    this._syncNoMatch();
+    return matches;
+  }
+  _lists() {
+    return Array.from(this.querySelectorAll("aparte-conversation-list"));
+  }
+  /**
+   * `data-no-match` while the held query matches nothing in any list — read from the lists
+   * themselves, so it follows their renders (a conversation that matches arriving, the last
+   * match leaving) and is never set while one of them is still loading.
+   */
+  _syncNoMatch() {
+    const needle = foldText(this._query);
+    const none = needle !== "" && this._lists().every((list) => typeof list.filter === "function" ? list.hasAttribute("data-no-match") : !list.hasAttribute("loading") && filterConversationRows(list, needle) === 0);
+    this.toggleAttribute("data-no-match", none);
   }
   // ─── Locale ───────────────────────────────────────────────────────────
   _onConfigChange = () => this._relabel();
@@ -7314,9 +7646,6 @@ function visibleFocusable(root) {
 function nearestSidebar(control) {
   return control.closest("aparte-sidebar") ?? rootOf(control).querySelector("aparte-sidebar") ?? document.querySelector("aparte-sidebar");
 }
-function fold(text) {
-  return text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
-}
 if (!customElements.get("aparte-sidebar")) {
   customElements.define("aparte-sidebar", AparteSidebar);
 }
@@ -7468,7 +7797,7 @@ class AparteSplit extends HTMLElement {
   get stacked() {
     return this.hasAttribute("data-stacked") || this.hasAttribute("single") || this.classList.contains("aparte-split--only-start") || this.classList.contains("aparte-split--only-end");
   }
-  /** One pane on demand, whatever the width (#54). Reflected. */
+  /** One pane on demand, whatever the width. Reflected. */
   get single() {
     return this.hasAttribute("single");
   }
@@ -7539,6 +7868,7 @@ class AparteSplit extends HTMLElement {
     this._watchBreakpoint();
     this._watchSize();
     this._ready = true;
+    this._syncPaneControls();
   }
   disconnectedCallback() {
     this._handle?.removeEventListener("pointerdown", this._onPointerDown);
@@ -7590,6 +7920,7 @@ class AparteSplit extends HTMLElement {
       }
       case "pane": {
         const pane = this.pane;
+        this._syncPaneControls();
         if (pane === this._lastPane) return;
         this._lastPane = pane;
         this._commit();
@@ -7607,6 +7938,7 @@ class AparteSplit extends HTMLElement {
       case "single":
         if (this.single && this._dragging) this._endDrag("pointer", this._dragStartPercent);
         this._stampHandle();
+        this._syncPaneControls();
         return;
       case "breakpoint":
         this._watchBreakpoint();
@@ -7689,8 +8021,8 @@ class AparteSplit extends HTMLElement {
    *
    * While STACKED there is nothing to read: one pane is `display: none` and the other
    * spans the single track, so the ratio is 0 or 100 whatever the seam was set to.
-   * Measuring it there is how tapping "Preview" on a phone used to write `position="0"`
-   * into the attribute, the event and the host's storage.
+   * Measuring it there would write `position="0"` into the attribute, the event and the
+   * host's storage when "Preview" is tapped on a phone.
    */
   _achievedPercent() {
     if (this.stacked) return this._position;
@@ -8021,6 +8353,7 @@ class AparteSplit extends HTMLElement {
     const was = this.hasAttribute("data-stacked");
     if (stacked && !was && this._dragging) this._endDrag("pointer", this._dragStartPercent);
     this.toggleAttribute("data-stacked", stacked);
+    if (stacked !== was) this._syncPaneControls();
     if (stacked && !was) {
       if (!this.hasAttribute("pane")) this.showPane("start");
     } else if (!stacked && was) {
@@ -8052,6 +8385,28 @@ class AparteSplit extends HTMLElement {
     }
     this.showPane(which ?? (this.pane === "start" ? "end" : "start"));
   };
+  /**
+   * The two-button switch says which pane it shows: `aria-pressed` on every
+   * `[data-aparte-split-pane="start"|"end"]` that reaches this split, true on the one
+   * naming the pane in view, while the split is stacked; side by side both panes are in
+   * view and neither button is pressed, so none carries it. A toggle (an id, or empty) is
+   * an action and gets none. Read when the split connects, whenever `pane` changes and
+   * when it stacks or unstacks, so a control added later is stamped at the next switch.
+   */
+  _syncPaneControls() {
+    const roots = /* @__PURE__ */ new Set([rootOf(this), document]);
+    for (const root of roots) {
+      for (const control of root.querySelectorAll("[data-aparte-split-pane]")) {
+        const which = (control.getAttribute("data-aparte-split-pane") ?? "").trim();
+        if (which !== "start" && which !== "end") continue;
+        if (control.localName !== "button" && control.getAttribute("role") !== "button") continue;
+        const target = control.closest("aparte-split") ?? rootOf(control).querySelector("aparte-split") ?? document.querySelector("aparte-split");
+        if (target !== this) continue;
+        if (this.stacked) control.setAttribute("aria-pressed", String(which === this.pane));
+        else control.removeAttribute("aria-pressed");
+      }
+    }
+  }
   // ─── Locale ───────────────────────────────────────────────────────────
   _onConfigChange = () => this._relabel();
   /**