@aparte/core 0.23.0 → 0.25.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a1 as resolveConfig, aa as eventOrigin, ab as activeElementIn, a6 as subscribeConfigChange, a3 as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, ac as gateGlide, L as escapeAttr, ad as renderingVersionOf, H as cssEscape, ae as mergeSegmentUpdate, M as escapeHtml, V as isSegmentSettled, af as writeStreamedMarkdown, U as isSafeUrl, C as copyText, P as getSegmentRenderer, Q as installDefaultRenderersOnce, r as AparteMessageRepository, ag as stampSegmentActivity, ah as stampSegmentOnInsert, ai as stampSegmentOnUpdate, aj as renumberSegments, ak as openSegmentIds, al as isTerminalStatus, am as adoptMessageSegments, S as isAwaitingReply, Y as populateBubbleFromMessage, a9 as uuid, a2 as revokeAttachmentUrls, X as parseMarkdownToSegments, an as APARTE_DERIVED_SEGMENTS, e as APARTE_DEFAULT_LOCALE, ao as chatBoundaryOf, ap as rootOf, R as installDialogTriggersOnce } from "./dialog-triggers-3G9TqG9g.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, W, Z, _, $, a0, a4, a5, a7, a8 } from "./dialog-triggers-3G9TqG9g.js";
+import { K as deferHydrationOf, a6 as resolveConfig, ag as eventOrigin, ah as activeElementIn, ab as subscribeConfigChange, a8 as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, ai as gateGlide, O as escapeAttr, aj as toolCallRenderer, ak as toolRendererThatDrew, t as aparteGlobalConfig, al as isMountedRenderer, am as renderingVersionOf, H as cssEscape, an as onRenderersChange, ao as mergeSegmentUpdate, P as escapeHtml, Y as isSegmentSettled, ap as writeStreamedMarkdown, X as isSafeUrl, C as copyText, S as getSegmentRenderer, T as installDefaultRenderersOnce, r as AparteMessageRepository, aq as stampSegmentActivity, ar as stampSegmentOnInsert, as as stampSegmentOnUpdate, at as renumberSegments, au as openSegmentIds, av as isTerminalStatus, aw as adoptMessageSegments, V as isAwaitingReply, a0 as populateBubbleFromMessage, af as uuid, a7 as revokeAttachmentUrls, $ as parseMarkdownToSegments, ax as APARTE_DERIVED_SEGMENTS, ay as rememberConversationStatus, az as tellConversationStatus, aA as conversationStatusOf, e as APARTE_DEFAULT_LOCALE, aB as chatBoundaryOf, aC as rootOf, U as installDialogTriggersOnce } from "./defer-hydration-BwMqeRHq.js";
+import { A, a, b, c, d, f, g, h, i, j, k, l, m, n, p, q, s, u, v, y, z, B, D, E, F, G, I, J, L, M, N, Q, R, W, Z, _, a1, a2, a3, a4, a5, a9, aa, ac, ad, ae } from "./defer-hydration-BwMqeRHq.js";
 function presenceOn(value) {
   return value === "" ? true : Boolean(value);
 }
@@ -64,6 +64,7 @@ class AparteOption extends HTMLElement {
     dot.setAttribute("data-status", status);
   }
 }
+deferHydrationOf(AparteOption);
 if (!customElements.get("aparte-option")) {
   customElements.define("aparte-option", AparteOption);
 }
@@ -173,6 +174,7 @@ class AparteOptgroup extends HTMLElement {
     });
   }
 }
+deferHydrationOf(AparteOptgroup);
 if (!customElements.get("aparte-optgroup")) {
   customElements.define("aparte-optgroup", AparteOptgroup);
 }
@@ -726,6 +728,7 @@ function optionLabelText(option) {
   }
   return text.trim();
 }
+deferHydrationOf(AparteSelect);
 if (!customElements.get("aparte-select")) {
   customElements.define("aparte-select", AparteSelect);
 }
@@ -760,6 +763,7 @@ class AparteProgressSpinner extends HTMLElement {
     this.innerHTML = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="aparte-spinner-track" cx="12" cy="12" r="${this._r}"/><circle class="aparte-spinner-fill" cx="12" cy="12" r="${this._r}" stroke-dasharray="${dasharray}" stroke-dashoffset="${dashoffset.toFixed(2)}"/></svg>`;
   }
 }
+deferHydrationOf(AparteProgressSpinner);
 if (!customElements.get("aparte-progress-spinner")) {
   customElements.define("aparte-progress-spinner", AparteProgressSpinner);
 }
@@ -786,6 +790,7 @@ class AparteIcon extends HTMLElement {
     this.firstElementChild?.setAttribute("aria-hidden", "true");
   }
 }
+deferHydrationOf(AparteIcon);
 if (!customElements.get("aparte-icon")) {
   customElements.define("aparte-icon", AparteIcon);
 }
@@ -1100,6 +1105,7 @@ class AparteElicitation extends HTMLElement {
   }
 }
 if (typeof customElements !== "undefined" && !customElements.get("aparte-elicitation")) {
+  deferHydrationOf(AparteElicitation);
   customElements.define("aparte-elicitation", AparteElicitation);
 }
 function isTranscriptEmpty(viewport) {
@@ -1297,6 +1303,7 @@ class AparteChat extends HTMLElement {
     this.toggleAttribute("data-empty", !viewport || isTranscriptEmpty(viewport));
   }
 }
+deferHydrationOf(AparteChat);
 if (!customElements.get("aparte-chat")) {
   customElements.define("aparte-chat", AparteChat);
 }
@@ -1400,6 +1407,7 @@ class AparteChatBubble extends HTMLElement {
     this._updateLocalizedLabels();
     this._updateWaiting();
     this._renderAvatar();
+    this._redrawSegmentsWhoseRendererChanged();
     this._relabelSegments();
     this._updateTimestamp(this.getAttribute("timestamp"));
     if (!this._redrawQueued) {
@@ -1414,16 +1422,151 @@ class AparteChatBubble extends HTMLElement {
   _redrawQueued = false;
   /** The {@link renderingVersionOf} count the content was last drawn with. */
   _drawnWithVersion = 0;
+  /** Every segment on screen, by id: see {@link DrawnSegment}. */
+  _drawn = /* @__PURE__ */ new Map();
+  /** The segments were released because the bubble was still out of the page at the next microtask. */
+  _releasedWhileDetached = false;
+  /** A {@link _scheduleReleaseCheck} is queued. */
+  _releaseCheckQueued = false;
+  /** Unsubscribes from the renderer registries' channel; set while connected. */
+  _offRenderers = null;
+  /** The tool renderer in effect for a call: none for a hidden call or another segment. */
+  _toolRendererFor(segment) {
+    if (segment.type !== "tool_call") return null;
+    const cfg = this._cfg;
+    if (resolveSegmentRenderer("tool_call", cfg) !== toolCallRenderer) return null;
+    const name = segment.toolCall?.name;
+    if (!name || cfg.isToolHidden(name)) return null;
+    return cfg.getToolRenderer(name) ?? null;
+  }
+  /**
+   * Record a segment as drawn, set it up, then read back which tool renderer is behind the
+   * row (tool-call.ts records it as the row is set up — one record, not a second lookup).
+   * Recorded BEFORE `setup`: a setup that throws (a framework mount) leaves an element that
+   * will still be cleaned up. The same id drawn twice releases the first element.
+   */
+  _install(segment, el2, renderer) {
+    const previous = this._drawn.get(segment.id);
+    if (previous && previous.el !== el2) this._release(segment.id);
+    const drawn = { el: el2, renderer, tool: null, segment };
+    this._drawn.set(segment.id, drawn);
+    if (!this.isConnected) this._scheduleReleaseCheck();
+    if (renderer?.setup) runWithConfig(this._cfg, () => renderer.setup(el2, segment));
+    if (segment.type === "tool_call") drawn.tool = toolRendererThatDrew(el2);
+  }
+  /**
+   * The segment's element leaves for good: its renderer's `cleanup`, once. A cleanup that
+   * throws is reported and costs nothing else — the element still goes, and the others
+   * are still released.
+   */
+  _release(id) {
+    const drawn = this._drawn.get(id);
+    if (!drawn) return;
+    this._drawn.delete(id);
+    const cleanup = drawn.renderer?.cleanup;
+    if (!cleanup) return;
+    try {
+      runWithConfig(this._cfg, () => cleanup.call(drawn.renderer, drawn.el, drawn.segment));
+    } catch (err) {
+      console.error("[aparte] a segment renderer's cleanup threw", err);
+    }
+  }
+  _releaseAll() {
+    for (const id of [...this._drawn.keys()]) this._release(id);
+  }
+  /**
+   * Gone for good, or only moved? A keyed list moving a row takes it out and puts it back
+   * before the next microtask, and must not unmount what its segments hold: decide then.
+   */
+  _scheduleReleaseCheck() {
+    if (this._releaseCheckQueued) return;
+    this._releaseCheckQueued = true;
+    queueMicrotask(() => {
+      this._releaseCheckQueued = false;
+      if (this.isConnected || this._drawn.size === 0) return;
+      this._releaseAll();
+      this._releasedWhileDetached = true;
+    });
+  }
+  /** One segment drawn again in place: its renderer cleans up, the current one draws. False when it was never drawn. */
+  _redrawSegment(segment) {
+    const drawn = this._drawn.get(segment.id);
+    if (!drawn) return false;
+    const cfg = this._cfg;
+    const renderer = resolveSegmentRenderer(segment.type, cfg);
+    const old = drawn.el;
+    this._release(segment.id);
+    const el2 = renderer ? segmentRenderResultToElement(runWithConfig(cfg, () => renderer.render(segment)), segment) : unrenderedSegment(segment);
+    if (!el2) {
+      old.remove();
+      return true;
+    }
+    old.replaceWith(el2);
+    this._install(segment, el2, renderer);
+    return true;
+  }
+  /** The renderer that drew this segment is still the one in effect (for a tool call, the tool renderer too). */
+  _stillDrawnByCurrent(segment, drawn) {
+    return resolveSegmentRenderer(segment.type, this._cfg) === drawn.renderer && this._toolRendererFor(segment) === drawn.tool;
+  }
+  /**
+   * A renderer registered, unregistered or overridden since these segments were drawn: draw
+   * again only the segments whose renderer is no longer the one that drew them (for a tool
+   * call, the tool renderer counts), in place. The others keep their elements — and with
+   * them anything mounted in them, which a redraw of the whole message would unmount.
+   */
+  _redrawSegmentsWhoseRendererChanged() {
+    if (!this.isConnected || !this._segmentsEl || this._drawn.size === 0) return;
+    for (const segment of this._segments) {
+      const drawn = this._drawn.get(segment.id);
+      if (!drawn || this._stillDrawnByCurrent(segment, drawn)) continue;
+      this._redrawSegment(segment);
+    }
+  }
+  /**
+   * The registries' channel: a renderer changed on our config — or on the global one, whose
+   * segment renderers a chat with its own config inherits.
+   */
+  _onRenderersChange = (cfg) => {
+    if (cfg !== this._cfg && cfg !== aparteGlobalConfig) return;
+    this._redrawSegmentsWhoseRendererChanged();
+  };
+  /**
+   * A card a mounted renderer keeps (a framework component): its drawing reads none of the
+   * providers a rendering-version bump announces, so it stays mounted through one — as long
+   * as that renderer is still the one in effect.
+   */
+  _keepsItsDrawing(segment, drawn) {
+    const mounted = isMountedRenderer(drawn.renderer) || segment.type === "tool_call" && isMountedRenderer(drawn.tool);
+    return mounted && this._stillDrawnByCurrent(segment, drawn);
+  }
   /**
    * 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.
+   *
+   * Segment by segment, keeping the cards a mounted renderer holds: a highlighter that loads
+   * after the first answer must not remount every card on the page and lose its state.
    */
   _redrawIfStale() {
     if (this._streaming || this._editing || renderingVersionOf(this._cfg) === this._drawnWithVersion) return;
-    if (this._segments.length > 0) this._renderSegments();
-    else this._updateContent();
+    if (this._segments.length === 0) {
+      this._updateContent();
+      return;
+    }
+    if (this._segments.some((s2) => !this._drawn.has(s2.id))) {
+      this._renderSegments();
+      return;
+    }
+    this._drawnWithVersion = renderingVersionOf(this._cfg);
+    for (const segment of this._segments) {
+      const drawn = this._drawn.get(segment.id);
+      if (this._keepsItsDrawing(segment, drawn)) continue;
+      this._redrawSegment(segment);
+    }
+    this._reflectError();
+    this._syncCopyAction();
   }
   /**
    * Ask every rendered segment to re-read its config-derived text.
@@ -1482,7 +1625,12 @@ class AparteChatBubble extends HTMLElement {
     this._render();
     this._updateContent();
     this._updateTimestamp(this.getAttribute("timestamp"));
+    if (this._releasedWhileDetached) {
+      this._releasedWhileDetached = false;
+      if (this._segments.length > 0) this._renderSegments();
+    }
     window.addEventListener("aparte-config-change", this._onConfigChange);
+    this._offRenderers ??= onRenderersChange(this._onRenderersChange);
     this.addEventListener("click", this._onBranchPickerClick);
     this.addEventListener("click", this._onLinkClick);
   }
@@ -1499,7 +1647,10 @@ class AparteChatBubble extends HTMLElement {
    * into one.
    */
   aparteConfigChanged() {
-    queueMicrotask(() => this._redrawFrameIfChanged());
+    queueMicrotask(() => {
+      this._redrawFrameIfChanged();
+      this._redrawSegmentsWhoseRendererChanged();
+    });
   }
   _redrawFrameIfChanged() {
     if (!this.isConnected || this._editing) return;
@@ -1512,6 +1663,7 @@ class AparteChatBubble extends HTMLElement {
       this._avatarCleanup = null;
     }
     this._resetMarkdownStream();
+    this._releaseAll();
     this.replaceChildren();
     this._render();
     this._updateContent();
@@ -1522,6 +1674,8 @@ class AparteChatBubble extends HTMLElement {
   }
   disconnectedCallback() {
     window.removeEventListener("aparte-config-change", this._onConfigChange);
+    this._offRenderers?.();
+    this._offRenderers = null;
     this.removeEventListener("click", this._onBranchPickerClick);
     this.removeEventListener("click", this._onLinkClick);
     if (this._avatarCleanup) {
@@ -1531,6 +1685,7 @@ class AparteChatBubble extends HTMLElement {
       }
       this._avatarCleanup = null;
     }
+    this._scheduleReleaseCheck();
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
@@ -1591,10 +1746,38 @@ class AparteChatBubble extends HTMLElement {
   }
   /** Set segments for rich content */
   setSegments(segments) {
-    this._segments = [...segments];
-    this._renderSegments();
+    this._replaceSegments(segments);
     this._updateWaiting();
   }
+  /** A whole new list, from `setSegments` or `updateMessage({ segments })`: copied in, then drawn. */
+  _replaceSegments(segments) {
+    const next = [...segments];
+    if (this._resyncKeepingCards(next)) return;
+    this._segments = next;
+    this._renderSegments();
+  }
+  /**
+   * The same segments again, in the same order — the host re-syncing a message when its turn
+   * ends — while a mounted renderer holds one of them: the cards it holds are handed the new
+   * state, and only the other segments are drawn again, in place. Drawing everything again
+   * unmounted every framework card at the end of every turn and lost its state. False, and
+   * nothing touched, in every other case: those keep the full redraw.
+   */
+  _resyncKeepingCards(next) {
+    if (!this._segmentsEl || next.length !== this._segments.length) return false;
+    if (next.some((s2, i2) => s2.id !== this._segments[i2].id || !this._drawn.has(s2.id))) return false;
+    const kept = new Set(next.filter((s2) => this._keepsItsDrawing(s2, this._drawn.get(s2.id))).map((s2) => s2.id));
+    if (kept.size === 0) return false;
+    this._segments = next;
+    this._drawnWithVersion = renderingVersionOf(this._cfg);
+    for (const segment of next) {
+      if (kept.has(segment.id)) this._applySegmentUpdate(segment.id, segment, segment);
+      else this._redrawSegment(segment);
+    }
+    this._reflectError();
+    this._syncCopyAction();
+    return true;
+  }
   /** Add a segment */
   addSegment(segment) {
     this._segments.push(segment);
@@ -1645,6 +1828,7 @@ class AparteChatBubble extends HTMLElement {
     if (index !== -1) {
       this._segments.splice(index, 1);
     }
+    this._release(segmentId);
     const el2 = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
     el2?.remove();
     this._updateWaiting();
@@ -1693,8 +1877,7 @@ class AparteChatBubble extends HTMLElement {
       this._updateContent();
     }
     if ("segments" in updates) {
-      this._segments = [...updates.segments];
-      this._renderSegments();
+      this._replaceSegments(updates.segments);
     }
     if ("timestamp" in updates) {
       this._updateTimestamp(updates.timestamp);
@@ -1723,10 +1906,12 @@ class AparteChatBubble extends HTMLElement {
       const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)), segment);
       if (el2) {
         this._segmentsEl.appendChild(el2);
-        runWithConfig(this._cfg, () => renderer.setup?.(el2, segment));
+        this._install(segment, el2, renderer);
       }
     } else {
-      this._segmentsEl.appendChild(unrenderedSegment(segment));
+      const el2 = unrenderedSegment(segment);
+      this._segmentsEl.appendChild(el2);
+      this._install(segment, el2, void 0);
     }
     if (this._contentEl) this._contentEl.style.display = "none";
     this._reflectError();
@@ -1737,15 +1922,32 @@ class AparteChatBubble extends HTMLElement {
       this._renderSegments();
       return;
     }
+    if (this._releasedWhileDetached) return;
     const renderer = resolveSegmentRenderer(segment.type, this._cfg);
     if (!renderer) return;
+    const drawnBefore = this._drawn.get(segmentId);
+    if (drawnBefore && drawnBefore.renderer !== renderer) {
+      drawnBefore.segment = segment;
+      this._redrawSegment(segment);
+      return;
+    }
     if (renderer.update) {
       runWithConfig(this._cfg, () => renderer.update(el2, segment));
+      const drawn = this._drawn.get(segmentId);
+      if (drawn) {
+        drawn.segment = segment;
+        const now = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
+        if (now && now !== drawn.el) {
+          drawn.el = now;
+          drawn.tool = segment.type === "tool_call" ? toolRendererThatDrew(now) : null;
+        }
+      }
     } else {
       const newEl = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)), segment);
       if (newEl) {
+        this._release(segmentId);
         el2.replaceWith(newEl);
-        runWithConfig(this._cfg, () => renderer.setup?.(newEl, segment));
+        this._install(segment, newEl, renderer);
       }
     }
     if ("collapsed" in updates) {
@@ -2025,6 +2227,7 @@ class AparteChatBubble extends HTMLElement {
   _renderSegments() {
     if (!this._segmentsEl) return;
     this._drawnWithVersion = renderingVersionOf(this._cfg);
+    this._releaseAll();
     this._segmentsEl.innerHTML = "";
     for (const segment of this._segments) {
       const renderer = resolveSegmentRenderer(segment.type, this._cfg);
@@ -2032,10 +2235,12 @@ class AparteChatBubble extends HTMLElement {
         const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)), segment);
         if (el2) {
           this._segmentsEl.appendChild(el2);
-          runWithConfig(this._cfg, () => renderer.setup?.(el2, segment));
+          this._install(segment, el2, renderer);
         }
       } else {
-        this._segmentsEl.appendChild(unrenderedSegment(segment));
+        const el2 = unrenderedSegment(segment);
+        this._segmentsEl.appendChild(el2);
+        this._install(segment, el2, void 0);
       }
     }
     if (this._contentEl) {
@@ -2097,18 +2302,18 @@ class AparteChatBubble extends HTMLElement {
     const customAttachment = this._cfg.getAttachmentRenderer?.();
     if (customAttachment) {
       this._attachmentsEl.replaceChildren();
-      for (const a2 of this._attachments) {
-        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a2)));
+      for (const a6 of this._attachments) {
+        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a6)));
         if (el2) this._attachmentsEl.appendChild(el2);
       }
       return;
     }
-    this._attachmentsEl.innerHTML = this._attachments.map((a2) => {
-      const name = escapeHtml(a2.name);
-      if (a2.type.startsWith("image/") && this._isShowableUrl(a2.url)) {
-        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumbnail__image" src="${escapeHtml(a2.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
+    this._attachmentsEl.innerHTML = this._attachments.map((a6) => {
+      const name = escapeHtml(a6.name);
+      if (a6.type.startsWith("image/") && this._isShowableUrl(a6.url)) {
+        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumbnail__image" src="${escapeHtml(a6.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
       }
-      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumbnail__label">${escapeHtml(this._fileExt(a2.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
+      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumbnail__label">${escapeHtml(this._fileExt(a6.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
     }).join("");
     if (!this._cfg.getHostHandlers().attachmentPreview) return;
     this._attachmentsEl.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
@@ -2294,14 +2499,14 @@ class AparteChatBubble extends HTMLElement {
     const buttons = [];
     if (this._role === "user") {
       if (config.user) {
-        for (const a2 of config.user) buttons.push(this._actionButtonHtml(a2, icons, locale));
+        for (const a6 of config.user) buttons.push(this._actionButtonHtml(a6, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.edit) buttons.push(this._actionButtonHtml("edit", icons, locale));
       }
     } else if (this._role === "assistant") {
       if (config.assistant) {
-        for (const a2 of config.assistant) buttons.push(this._actionButtonHtml(a2, icons, locale));
+        for (const a6 of config.assistant) buttons.push(this._actionButtonHtml(a6, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.retry) buttons.push(this._actionButtonHtml("retry", icons, locale));
@@ -2397,16 +2602,16 @@ class AparteChatBubble extends HTMLElement {
   /** Append the registered custom action buttons for this bubble's role. */
   _appendCustomActions() {
     if (!this._actionBarEl) return;
-    for (const a2 of this._cfg.getActions("bubble")) {
-      const roles = a2.bubble?.roles ?? ["user", "assistant"];
+    for (const a6 of this._cfg.getActions("bubble")) {
+      const roles = a6.bubble?.roles ?? ["user", "assistant"];
       if (!roles.includes(this._role)) continue;
       const btn = document.createElement("button");
       btn.type = "button";
       btn.className = "aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-custom";
-      btn.dataset["action"] = `custom:${a2.id}`;
-      btn.setAttribute("aria-label", a2.label);
-      btn.setAttribute("title", a2.label);
-      btn.innerHTML = a2.icon.startsWith("<") ? a2.icon : this._cfg.getIcon(a2.icon) ?? a2.iconFallback ?? "";
+      btn.dataset["action"] = `custom:${a6.id}`;
+      btn.setAttribute("aria-label", a6.label);
+      btn.setAttribute("title", a6.label);
+      btn.innerHTML = a6.icon.startsWith("<") ? a6.icon : this._cfg.getIcon(a6.icon) ?? a6.iconFallback ?? "";
       this._actionBarEl.appendChild(btn);
     }
   }
@@ -2653,11 +2858,10 @@ 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 (wasStreaming && !streaming && this._segments.length > 0) this._redrawIfStale();
   }
 }
+deferHydrationOf(AparteChatBubble);
 if (!customElements.get("aparte-chat-bubble")) {
   customElements.define("aparte-chat-bubble", AparteChatBubble);
 }
@@ -2831,6 +3035,7 @@ class AparteChatStatus extends HTMLElement {
     container.setAttribute("aria-label", text || this._word());
   }
 }
+deferHydrationOf(AparteChatStatus);
 if (!customElements.get("aparte-chat-status")) {
   customElements.define("aparte-chat-status", AparteChatStatus);
 }
@@ -3243,10 +3448,10 @@ class AparteChatViewport extends HTMLElement {
     this._notifyBubble(messageId, "addSegment", stamped);
     this._autoScroll();
   }
-  updateSegment(a2, b2, c2) {
+  updateSegment(a6, b2, c2) {
     const clientForm = c2 === void 0 && typeof b2 === "object";
-    const messageId = clientForm ? this._activeMessageId() : a2;
-    const segmentId = clientForm ? a2 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a6;
+    const segmentId = clientForm ? a6 : b2;
     const updates = clientForm ? b2 : c2;
     if (!messageId) return;
     const message = this._repo.getMessageById(messageId);
@@ -3259,10 +3464,10 @@ class AparteChatViewport extends HTMLElement {
       this._notifyBubble(messageId, "updateSegment", { segmentId, updates: stamped });
     }
   }
-  removeSegment(a2, b2) {
+  removeSegment(a6, b2) {
     const clientForm = b2 === void 0;
-    const messageId = clientForm ? this._activeMessageId() : a2;
-    const segmentId = clientForm ? a2 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a6;
+    const segmentId = clientForm ? a6 : b2;
     if (!messageId || !segmentId) return;
     const message = this._repo.getMessageById(messageId);
     if (message?.segments) {
@@ -4399,6 +4604,7 @@ class AparteChatViewport extends HTMLElement {
     this._settleUntil = 0;
   }
 }
+deferHydrationOf(AparteChatViewport);
 if (!customElements.get("aparte-chat-viewport")) {
   customElements.define("aparte-chat-viewport", AparteChatViewport);
 }
@@ -4905,6 +5111,7 @@ class AparteComposer extends HTMLElement {
     if (this._panelActive) this._evictPanel();
   }
 }
+deferHydrationOf(AparteComposer);
 if (!customElements.get("aparte-composer")) {
   customElements.define("aparte-composer", AparteComposer);
 }
@@ -5152,6 +5359,7 @@ class AparteComposerInput extends HTMLElement {
   }
   /** Escape a value before it lands in a double-quoted HTML attribute. */
 }
+deferHydrationOf(AparteComposerInput);
 if (!customElements.get("aparte-composer-input")) {
   customElements.define("aparte-composer-input", AparteComposerInput);
 }
@@ -5313,6 +5521,7 @@ class AparteComposerSend extends HTMLElement {
     return resolveConfig(this).getIcon("stop");
   }
 }
+deferHydrationOf(AparteComposerSend);
 if (!customElements.get("aparte-composer-send")) {
   customElements.define("aparte-composer-send", AparteComposerSend);
 }
@@ -5381,6 +5590,7 @@ class AparteComposerCancel extends HTMLElement {
     return resolveConfig(this).getIcon("stop");
   }
 }
+deferHydrationOf(AparteComposerCancel);
 if (!customElements.get("aparte-composer-cancel")) {
   customElements.define("aparte-composer-cancel", AparteComposerCancel);
 }
@@ -5466,6 +5676,7 @@ class AparteComposerAttachments extends HTMLElement {
     return dot > 0 ? filename.slice(dot + 1).toUpperCase().slice(0, 4) : "FILE";
   }
 }
+deferHydrationOf(AparteComposerAttachments);
 if (!customElements.get("aparte-composer-attachments")) {
   customElements.define("aparte-composer-attachments", AparteComposerAttachments);
 }
@@ -5592,6 +5803,7 @@ class AparteComposerAddAttachment extends HTMLElement {
     };
   }
 }
+deferHydrationOf(AparteComposerAddAttachment);
 if (!customElements.get("aparte-composer-add-attachment")) {
   customElements.define("aparte-composer-add-attachment", AparteComposerAddAttachment);
 }
@@ -5674,6 +5886,7 @@ class AparteComposerAction extends HTMLElement {
     return resolveConfig(this).getIcon(icon) ?? icon;
   }
 }
+deferHydrationOf(AparteComposerAction);
 if (!customElements.get("aparte-composer-action")) {
   customElements.define("aparte-composer-action", AparteComposerAction);
 }
@@ -5712,6 +5925,7 @@ class AparteComposerToolbar extends HTMLElement {
     else this.setAttribute("data-empty", "");
   }
 }
+deferHydrationOf(AparteComposerToolbar);
 if (!customElements.get("aparte-composer-toolbar")) {
   customElements.define("aparte-composer-toolbar", AparteComposerToolbar);
 }
@@ -5730,6 +5944,7 @@ function filterConversationRows(root, needle) {
   }
   return matches;
 }
+const statusOf = (value) => value === "running" || value === "waiting" ? value : null;
 function rowSelector(attr, id) {
   return `[${attr}="${cssEscape(id)}"]`;
 }
@@ -5786,6 +6001,7 @@ class AparteConversationList extends HTMLElement {
     this.addEventListener("pointerdown", this._onPress);
     this._render();
     window.addEventListener("aparte-config-change", this._onConfigChange);
+    window.addEventListener("aparte-conversation-status", this._onStatus);
   }
   disconnectedCallback() {
     this._closeMenu();
@@ -5798,6 +6014,7 @@ class AparteConversationList extends HTMLElement {
     this._pressed = false;
     this._renderAfterPress = false;
     window.removeEventListener("aparte-config-change", this._onConfigChange);
+    window.removeEventListener("aparte-conversation-status", this._onStatus);
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
@@ -5819,7 +6036,54 @@ class AparteConversationList extends HTMLElement {
     if (detail?.config && detail.config !== resolveConfig(this)) return;
     this._render();
   };
+  /**
+   * `aparte-conversation-status`, on `window`: the controller's, a list's, or an app's own.
+   * Kept page-wide too (an app may dispatch the event itself), then drawn on this row.
+   */
+  _onStatus = (e) => {
+    const detail = e.detail;
+    if (typeof detail?.id !== "string") return;
+    rememberConversationStatus(detail.id, statusOf(detail.status));
+    const row = this.querySelector(rowSelector("data-conv-id", detail.id));
+    if (row) this._applyStatus(row, detail.id);
+  };
   // ─── Public API ───────────────────────────────────────────────────────
+  /**
+   * Say what a conversation is doing: `running` while an AI answers in it, `waiting`
+   * while its turn waits for the person, `null` for neither. The row carries it as
+   * `data-status`, a running title wears `aparte-shimmer`, a waiting row shows its mark
+   * (`.aparte-conv-item__status`, an empty slot otherwise), and a screen reader hears
+   * the state with the title. The look is CSS on `data-status`: a site that wants a dot
+   * for `running` draws it in the slot and takes the shimmer off.
+   *
+   * A state is about a conversation, not about this list: it is kept page-wide and every
+   * list on the page draws it, one that connects later included. Patched in place, and
+   * kept across re-renders and for rows not drawn yet. The conversation controller sets
+   * it on its own through `aparte-conversation-status`.
+   */
+  setConversationStatus(id, status) {
+    tellConversationStatus(id, statusOf(status));
+  }
+  /** What a conversation is doing, as last told; `null` for neither. */
+  getConversationStatus(id) {
+    return conversationStatusOf(id);
+  }
+  /** Write a conversation's state onto its row — the same three things `_renderItem` draws. */
+  _applyStatus(row, id) {
+    const status = conversationStatusOf(id);
+    if (status) row.setAttribute("data-status", status);
+    else row.removeAttribute("data-status");
+    const answering = status === "running";
+    row.querySelector(".aparte-conv-item__title")?.classList.toggle("aparte-shimmer", answering);
+    const heard = row.querySelector(".aparte-conv-item__state");
+    if (heard) heard.textContent = this._statusWords(status);
+  }
+  /** The words a screen reader hears for a state. Literal `t('…')` reads, for the locale guard. */
+  _statusWords(status) {
+    if (status === "running") return this._t("conversationRunning");
+    if (status === "waiting") return this._t("conversationWaiting");
+    return "";
+  }
   /** Set the list of conversations to display. Triggers a re-render. */
   set conversations(items) {
     this._conversations = Array.isArray(items) ? items : [];
@@ -6003,7 +6267,7 @@ class AparteConversationList extends HTMLElement {
       }
     }
     const fixed = ["pinned", "today", "yesterday", "week", "month"].map((k2) => buckets.get(k2)).filter((g2) => !!g2);
-    const months = [...buckets.keys()].filter((k2) => k2.startsWith("m-")).sort((a2, b2) => b2.localeCompare(a2)).map((k2) => buckets.get(k2));
+    const months = [...buckets.keys()].filter((k2) => k2.startsWith("m-")).sort((a6, b2) => b2.localeCompare(a6)).map((k2) => buckets.get(k2));
     const undated = buckets.get("undated");
     return [...fixed, ...months, ...undated ? [undated] : []];
   }
@@ -6031,14 +6295,18 @@ class AparteConversationList extends HTMLElement {
     const title = escapeHtml(conv.title || this._t("newChat"));
     const actionsLabel = escapeAttr(this._t("conversationActions"));
     const moreGlyph = resolveConfig(this).getIcon("more");
+    const status = conversationStatusOf(conv.id);
+    const statusAttr = status ? ` data-status="${escapeAttr(status)}"` : "";
+    const titleClass = escapeAttr(status === "running" ? "aparte-conv-item__title aparte-shimmer" : "aparte-conv-item__title");
+    const heard = escapeHtml(this._statusWords(status));
     return `
-<div class="${escapeAttr(classes)}" data-conv-id="${escapedId}">
+<div class="${escapeAttr(classes)}" data-conv-id="${escapedId}"${statusAttr}>
   <button
     class="aparte-conv-item__select"
     type="button"
     data-select-id="${escapedId}"
     aria-current="${isActive ? "page" : "false"}"
-  ><span class="aparte-conv-item__title">${title}</span></button>
+  ><span class="${titleClass}">${title}</span><span class="aparte-conv-item__status" aria-hidden="true"></span><span class="aparte-conv-item__state aparte-sr-only">${heard}</span></button>
   <button
     class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-conv-item__more"
     type="button"
@@ -6418,6 +6686,7 @@ class AparteConversationList extends HTMLElement {
     });
   }
 }
+deferHydrationOf(AparteConversationList);
 if (!customElements.get("aparte-conversation-list")) customElements.define("aparte-conversation-list", AparteConversationList);
 const isSuggestion = (value) => typeof value === "string" || typeof value === "object" && value !== null && typeof value.label === "string";
 const parseSuggestions = (raw) => {
@@ -6645,6 +6914,7 @@ class AparteSuggestions extends HTMLElement {
     }
   }
 }
+deferHydrationOf(AparteSuggestions);
 if (!customElements.get("aparte-suggestions")) {
   customElements.define("aparte-suggestions", AparteSuggestions);
 }
@@ -6847,6 +7117,7 @@ class AparteContext extends HTMLElement {
     }
   }
 }
+deferHydrationOf(AparteContext);
 if (!customElements.get("aparte-context")) {
   customElements.define("aparte-context", AparteContext);
 }
@@ -7309,11 +7580,12 @@ class AparteScrollRail extends HTMLElement {
     this._held = null;
   }
 }
-function sameElements(a2, b2) {
-  if (a2.length !== b2.length) return false;
-  for (let i2 = 0; i2 < a2.length; i2++) if (a2[i2] !== b2[i2]) return false;
+function sameElements(a6, b2) {
+  if (a6.length !== b2.length) return false;
+  for (let i2 = 0; i2 < a6.length; i2++) if (a6[i2] !== b2[i2]) return false;
   return true;
 }
+deferHydrationOf(AparteScrollRail);
 if (!customElements.get("aparte-scroll-rail")) {
   customElements.define("aparte-scroll-rail", AparteScrollRail);
 }
@@ -7664,6 +7936,7 @@ function visibleFocusable(root) {
 function nearestSidebar(control) {
   return control.closest("aparte-sidebar") ?? rootOf(control).querySelector("aparte-sidebar") ?? document.querySelector("aparte-sidebar");
 }
+deferHydrationOf(AparteSidebar);
 if (!customElements.get("aparte-sidebar")) {
   customElements.define("aparte-sidebar", AparteSidebar);
 }
@@ -8442,6 +8715,7 @@ class AparteSplit extends HTMLElement {
     handle.dataset["ownLabel"] = "locale";
   }
 }
+deferHydrationOf(AparteSplit);
 if (!customElements.get("aparte-split")) {
   customElements.define("aparte-split", AparteSplit);
 }
@@ -8529,7 +8803,7 @@ export {
   AparteSplit,
   s as AparteStreamParser,
   AparteSuggestions,
-  t as aparteGlobalConfig,
+  aparteGlobalConfig,
   u as applyElementProps,
   v as attachConfig,
   buildApprovalPanel,
@@ -8545,34 +8819,40 @@ export {
   cssEscape,
   I as declineDefaultRenderers,
   J as defaultSanitizer,
-  K as detachConfig,
+  deferHydrationOf,
+  L as defineMountedSegmentRenderer,
+  M as defineMountedToolRenderer,
+  N as detachConfig,
   escapeAttr,
   escapeHtml,
-  N as filesToAttachments,
-  O as getAllRenderers,
+  Q as filesToAttachments,
+  R as getAllRenderers,
   getSegmentRenderer,
   installDefaultRenderersOnce,
   installDialogTriggersOnce,
   isAwaitingReply,
-  T as isFormatAdapter,
+  W as isFormatAdapter,
   isSafeUrl,
   isSegmentSettled,
-  W as parseAparteEventStream,
+  Z as overrideSegmentRenderer,
+  _ as parseAparteEventStream,
   parseMarkdownToSegments,
   populateBubbleFromMessage,
-  Z as readableToAsyncIterable,
+  a1 as readableToAsyncIterable,
   registerAllComponents,
-  _ as registerDefaultRenderers,
-  $ as registerSegmentRenderer,
-  a0 as requestUserInput,
+  a2 as registerDefaultRenderers,
+  a3 as registerSegmentRenderer,
+  a4 as releaseDeferredHydration,
+  a5 as requestUserInput,
   resolveConfig,
   revokeAttachmentUrls,
   runWithConfig,
-  a4 as segmentDuration,
-  a5 as segmentTiming,
+  a9 as segmentDuration,
+  aa as segmentTiming,
   subscribeConfigChange,
-  a7 as toolRefusal,
-  a8 as unregisterSegmentRenderer,
+  ac as toToolCallView,
+  ad as toolRefusal,
+  ae as unregisterSegmentRenderer,
   uuid
 };
 //# sourceMappingURL=index.js.map