@aparte/core 0.23.0 → 0.25.0

package/dist/{dialog-triggers-3G9TqG9g.js → defer-hydration-BwMqeRHq.js}

@@ -1,5 +1,5 @@
 import { toolRefusal as toolRefusal$1, unansweredTail, runStreamAgent } from "@aparte/engine";
-import { A as APARTE_ICON_GLYPHS } from "./glyphs-C8z2oJUg.js";
+import { A as APARTE_ICON_GLYPHS } from "./glyphs-2bym5jl5.js";
 function contentToText(content) {
   if (typeof content === "string") return content;
   return content.filter((p) => p.type === "text").map((p) => p.text).join("");
@@ -173,6 +173,8 @@ const APARTE_DEFAULT_LOCALE = {
   archiveConversation: "Archive",
   unarchiveConversation: "Unarchive",
   conversationActions: "Conversation actions",
+  conversationRunning: "Answering",
+  conversationWaiting: "Waiting for you",
   renameConversation: "Rename",
   conversationTitle: "Conversation title",
   pinConversation: "Pin",
@@ -948,13 +950,13 @@ function stampSegmentOnInsert(segments, segment, messageId, defaults) {
     ...timingPatch(base, { startedAt: segmentTiming(segment)?.startedAt ?? Date.now() })
   };
 }
-function adoptSegment(segments, segment, messageId, live = false) {
+function adoptSegment(segments, segment, messageId, live2 = false) {
   return {
     ...segment,
     messageId,
     index: segments.length,
     isStreaming: false,
-    ...segment.type === "tool_call" && (segment.status === "awaiting-approval" || segment.status === "pending" && !live) && !segment.deferred?.ticket ? { status: "aborted" } : {}
+    ...segment.type === "tool_call" && (segment.status === "awaiting-approval" || segment.status === "pending" && !live2) && !segment.deferred?.ticket ? { status: "aborted" } : {}
   };
 }
 const RESERVED = /* @__PURE__ */ new Set(["id", "type", "messageId", "index"]);
@@ -1028,11 +1030,11 @@ function openSegmentIds(segments) {
 }
 function adoptMessageSegments(message) {
   if (!message.segments?.length) return { ...message };
-  const live = message.status === "streaming" || message.status === "pending";
+  const live2 = message.status === "streaming" || message.status === "pending";
   return {
     ...message,
     segments: message.segments.reduce((acc, segment) => {
-      acc.push(adoptSegment(acc, segment, message.id, live));
+      acc.push(adoptSegment(acc, segment, message.id, live2));
       return acc;
     }, [])
   };
@@ -1068,8 +1070,8 @@ function detachConfig(el2) {
   if (previous) notifyConfigChanged(el2, resolveConfig(el2.parentElement), previous);
 }
 function resolveConfig(el2) {
-  const host = el2?.closest?.(`[${APARTE_HOST_ATTR}]`);
-  return host?.[CONFIG_SLOT] ?? aparteGlobalConfig;
+  const host2 = el2?.closest?.(`[${APARTE_HOST_ATTR}]`);
+  return host2?.[CONFIG_SLOT] ?? aparteGlobalConfig;
 }
 let _renderConfig = null;
 function runWithConfig(config, fn) {
@@ -1102,12 +1104,20 @@ function createStreamAdapter(opts) {
   };
   let thinkingContent = "";
   let thinkingCollapsed = false;
+  const settleThinking = (fold) => {
+    if (!thinkingId || thinkingCollapsed) return;
+    const chatConfig = typeof Element !== "undefined" && target instanceof Element ? resolveConfig(target) : config;
+    const keepOpen = !fold || chatConfig.getSegmentDefaults("thinking")?.collapsed === false;
+    target.updateSegment?.(thinkingId, keepOpen ? { isStreaming: false } : { collapsed: true, isStreaming: false });
+    thinkingCollapsed = true;
+  };
   return (e) => {
     switch (e.type) {
       case "run-start":
         target.updateMessage?.(messageId, { status: "streaming" });
         break;
       case "turn-start":
+        settleThinking(false);
         parser = new AparteStreamParser({ blocks: config.getStreamBlocks() });
         streaming = /* @__PURE__ */ new Set();
         thinkingId = null;
@@ -1120,7 +1130,8 @@ function createStreamAdapter(opts) {
           const seg = {
             id: `think-${uuid()}`,
             type: "thinking",
-            content: thinkingContent
+            content: thinkingContent,
+            isStreaming: true
           };
           thinkingId = seg.id;
           streaming.add(seg.id);
@@ -1131,12 +1142,7 @@ function createStreamAdapter(opts) {
         break;
       }
       case "text-delta": {
-        if (thinkingId && !thinkingCollapsed) {
-          const chatConfig = typeof Element !== "undefined" && target instanceof Element ? resolveConfig(target) : config;
-          const keepOpen = chatConfig.getSegmentDefaults("thinking")?.collapsed === false;
-          target.updateSegment?.(thinkingId, keepOpen ? { isStreaming: false } : { collapsed: true, isStreaming: false });
-          thinkingCollapsed = true;
-        }
+        settleThinking(true);
         const result = parser.parse(e.delta);
         for (const segment of result.segments) {
           if (!streaming.has(segment.id)) {
@@ -1166,6 +1172,7 @@ function createStreamAdapter(opts) {
         break;
       }
       case "tool-start": {
+        settleThinking(false);
         const toolSeg = {
           id: `tool-${e.toolCallId}`,
           type: "tool_call",
@@ -1890,6 +1897,12 @@ class ToolTable {
     }
     return this.any !== void 0 ? { value: this.any, level: "any" } : void 0;
   }
+  /** Every value registered, whatever its matcher. */
+  values() {
+    const out = [...this.exact.values(), ...[...this.patterns.values()].map((p) => p.value)];
+    if (this.any !== void 0) out.push(this.any);
+    return out;
+  }
   clear() {
     this.exact.clear();
     this.patterns.clear();
@@ -1915,6 +1928,34 @@ function renderingVersionOf(cfg) {
 function bumpRenderingVersion(cfg) {
   renderingVersions.set(cfg, renderingVersionOf(cfg) + 1);
 }
+const rendererListeners = /* @__PURE__ */ new Set();
+const pendingRendererChanges = /* @__PURE__ */ new Set();
+function onRenderersChange(listener) {
+  rendererListeners.add(listener);
+  return () => {
+    rendererListeners.delete(listener);
+  };
+}
+function notifyRenderersChanged(cfg) {
+  if (pendingRendererChanges.size === 0) {
+    queueMicrotask(() => {
+      const changed = [...pendingRendererChanges];
+      pendingRendererChanges.clear();
+      for (const config of changed) {
+        for (const listener of [...rendererListeners]) {
+          try {
+            listener(config);
+          } catch (err) {
+            console.error("[aparte] a renderer-change listener threw", err);
+          }
+        }
+      }
+    });
+  }
+  pendingRendererChanges.add(cfg);
+}
+const matcherKey = (match) => match instanceof RegExp ? `re:${String(match)}` : `name:${match}`;
+const ELEMENT_SHAPING = ["hidden", "open", "details", "quiet"];
 function drawingOf(provider, name) {
   if (!provider || !(name in provider) || name in Object.prototype) return void 0;
   const fn = provider[name];
@@ -2025,6 +2066,11 @@ class AparteConfig {
   _tools = /* @__PURE__ */ new Map();
   // By exact name, pattern or '*' — see `tool-table.ts` for the one resolution rule.
   _toolRenderers = new ToolTable();
+  /** {@link overrideToolRenderer}'s stacks: what each matcher held below every override. */
+  /** Per matcher: what it held below every override, then one entry per override — an object of its own, so two overrides of the same renderer are told apart. */
+  _toolRendererOverrides = /* @__PURE__ */ new Map();
+  /** Bumped by `reset()`: a restore function from before it must not undo what came after. */
+  _overrideGeneration = 0;
   _toolDisplays = new ToolTable();
   /** Tagged blocks the stream parser recognises in the prose — see {@link registerStreamBlock}. */
   _streamBlocks = /* @__PURE__ */ new Map();
@@ -2866,12 +2912,64 @@ class AparteConfig {
    * // Custom pill for a web-search tool
    * aparteGlobalConfig.registerToolRenderer('web_search', { render: (seg) => `<div class="aparte-tool-label">Searching...</div>` });
    *
+   * Calls already on screen follow: those this registration now draws are drawn again
+   * by it (the renderer that drew them before gets its `cleanup`), and nothing else on
+   * the page is touched.
+   *
    * @example
    * // One look for every tool an MCP server brings
    * aparteGlobalConfig.registerToolRenderer(/^mcp__/, { render: (seg) => myMcpCard(seg) });
    */
   registerToolRenderer(match, renderer) {
+    if (this._toolRenderers.get(match) === renderer) return;
     this._toolRenderers.set(match, renderer);
+    notifyRenderersChanged(this);
+  }
+  /**
+   * Put `renderer` over whatever this matcher holds, and get back the function that takes
+   * it off again — the registration a component makes for as long as it is mounted.
+   *
+   * Overrides stack per matcher. The function restores what was there before THIS
+   * override, and taking off an override that is no longer on top changes nothing on
+   * screen: two components declaring the same tool, the newer wins, and unmounting the
+   * older does not take the newer's away. When the last one goes, the matcher holds what
+   * it held before the first — another registration, or nothing. Calls on screen follow
+   * each change, as with {@link registerToolRenderer}. The returned function is safe to
+   * call twice.
+   *
+   * @example
+   * const restore = aparteGlobalConfig.overrideToolRenderer('get_weather', weatherCard);
+   * // …later, when the component that declared it unmounts:
+   * restore();
+   */
+  overrideToolRenderer(match, renderer) {
+    const key = matcherKey(match);
+    const current = this._toolRenderers.get(match);
+    let stack = this._toolRendererOverrides.get(key);
+    if (!stack) {
+      stack = [{ renderer: current }];
+      this._toolRendererOverrides.set(key, stack);
+    } else if (stack[stack.length - 1].renderer !== current) {
+      stack.splice(0, stack.length, { renderer: current });
+    }
+    const entry = { renderer };
+    stack.push(entry);
+    this.registerToolRenderer(match, renderer);
+    const generation = this._overrideGeneration;
+    let restored = false;
+    return () => {
+      if (restored || generation !== this._overrideGeneration) return;
+      restored = true;
+      const i = stack.indexOf(entry);
+      if (i <= 0) return;
+      const wasTop = i === stack.length - 1;
+      stack.splice(i, 1);
+      if (stack.length === 1 && this._toolRendererOverrides.get(key) === stack) this._toolRendererOverrides.delete(key);
+      if (!wasTop || this._toolRenderers.get(match) !== renderer) return;
+      const top = stack[stack.length - 1].renderer;
+      if (top) this.registerToolRenderer(match, top);
+      else this.unregisterToolRenderer(match);
+    };
   }
   /**
    * Field defaults for a segment TYPE, filled in when a segment enters a message.
@@ -2911,9 +3009,11 @@ class AparteConfig {
   clearSegmentDefaults(type) {
     this._segmentDefaults.delete(type);
   }
-  /** Unregister the renderer registered under this matcher. */
+  /** Unregister the renderer registered under this matcher. Calls on screen it drew go back to core's row. */
   unregisterToolRenderer(match) {
+    if (this._toolRenderers.get(match) === void 0) return;
     this._toolRenderers.delete(match);
+    notifyRenderersChanged(this);
   }
   /** The renderer that draws a tool named `toolName` — exact, pattern or `'*'` — or undefined. */
   getToolRenderer(toolName) {
@@ -2943,21 +3043,35 @@ class AparteConfig {
    * @example
    * // A consumer chat: the reply is what matters; the calls stay in the history.
    * aparteGlobalConfig.registerToolDisplay('*', { hidden: true });
+   *
+   * @example
+   * // The line, and no raw JSON behind it: nothing, or a detail of the app's own.
+   * aparteGlobalConfig.registerToolDisplay('read_file', { label: 'Reading a file', details: false });
+   * aparteGlobalConfig.registerToolDisplay('web_search', {
+   *     label: 'Searched the web',
+   *     details: (segment) => sourcesList(segment.result),
+   * });
    */
   registerToolDisplay(match, display) {
     const before = this._toolDisplays.get(match);
     const next = { ...before, ...display };
     this._toolDisplays.set(match, next);
-    if (before?.hidden !== next.hidden || before?.open !== next.open) bumpRenderingVersion(this);
+    const shapes = ELEMENT_SHAPING.some((field) => before?.[field] !== next[field]) || before === void 0 && this._anotherShapes(next);
+    if (shapes) bumpRenderingVersion(this);
     this._notify();
   }
   /** Forget the display registered under this matcher. */
   unregisterToolDisplay(match) {
     const before = this._toolDisplays.get(match);
     this._toolDisplays.delete(match);
-    if (before?.hidden !== void 0 || before?.open !== void 0) bumpRenderingVersion(this);
+    const shapes = ELEMENT_SHAPING.some((field) => before?.[field] !== void 0) || before !== void 0 && this._anotherShapes(before);
+    if (shapes) bumpRenderingVersion(this);
     this._notify();
   }
+  /** Whether an entry other than `own` sets a field that shapes a row. */
+  _anotherShapes(own) {
+    return this._toolDisplays.values().some((entry) => entry !== own && ELEMENT_SHAPING.some((field) => entry[field] !== void 0));
+  }
   /** How a tool named `toolName` is shown — the entry that applies to it — or undefined. */
   getToolDisplay(toolName) {
     return this._toolDisplays.resolve(toolName)?.value;
@@ -3250,6 +3364,9 @@ class AparteConfig {
     this._fetchedModels.clear();
     this._tools.clear();
     this._toolRenderers.clear();
+    this._toolRendererOverrides.clear();
+    this._overrideGeneration++;
+    notifyRenderersChanged(this);
     this._toolDisplays.clear();
     this._streamBlocks.clear();
     this._modelConfig = {};
@@ -3301,19 +3418,19 @@ const ONE_SHOT_PROBE = "<i>a</i>";
 function hasOneShotMarkdownProvider() {
   return contextConfig().renderMarkdown(ONE_SHOT_PROBE) !== escapeHtml(ONE_SHOT_PROBE);
 }
-function writeStreamedMarkdown(host, contentEl, content, streaming) {
+function writeStreamedMarkdown(host2, contentEl, content, streaming) {
   if (streaming) {
-    if (host._aparteSmd === void 0) {
+    if (host2._aparteSmd === void 0) {
       settledFromParser.delete(contentEl);
       const renderer = contextConfig().createStreamingMarkdownRenderer(contentEl);
       if (renderer) {
         contentEl.textContent = "";
-        host._aparteSmd = { renderer, written: 0 };
+        host2._aparteSmd = { renderer, written: 0 };
       } else {
-        host._aparteSmd = null;
+        host2._aparteSmd = null;
       }
     }
-    const smd = host._aparteSmd;
+    const smd = host2._aparteSmd;
     if (smd) {
       const delta = content.slice(smd.written);
       if (delta) {
@@ -3322,15 +3439,15 @@ function writeStreamedMarkdown(host, contentEl, content, streaming) {
       }
       return;
     }
-  } else if (host._aparteSmd) {
-    const smd = host._aparteSmd;
+  } else if (host2._aparteSmd) {
+    const smd = host2._aparteSmd;
     const tail = content.slice(smd.written);
     if (tail) {
       smd.renderer.write(tail);
       smd.written = content.length;
     }
     smd.renderer.end();
-    host._aparteSmd = void 0;
+    host2._aparteSmd = void 0;
     if (!hasOneShotMarkdownProvider()) {
       contentEl.innerHTML = contextConfig().sanitizeHtml(contentEl.innerHTML);
       settledFromParser.set(contentEl, content);
@@ -3406,10 +3523,12 @@ function labelOf(segment) {
   if (ms === void 0) return cfg.t("thought");
   return cfg.t("thoughtFor").replace("{duration}", () => formatDuration(ms, cfg.getLocale().tag || void 0));
 }
+const arriving = (segment) => segment.isStreaming === true;
 function setLabel(el2, segment) {
   const text = labelOf(segment);
   const label = el2.querySelector(".aparte-thinking-label");
   if (label && label.textContent !== text) label.textContent = text;
+  label?.classList.toggle("aparte-shimmer", arriving(segment));
   el2.querySelector(".aparte-thinking-content")?.setAttribute("aria-label", text);
 }
 const thinkingRenderer = {
@@ -3442,7 +3561,7 @@ const thinkingRenderer = {
    * only part that is genuinely about reasoning rather than about disclosure.
    * `.aparte-thinking-label` stays too: `relabel` below queries it.
    */
-  render: (segment) => `<details class="aparte-segment aparte-segment-thinking aparte-accordion__item" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed === false ? "open" : ""}><summary class="aparte-accordion__header aparte-thinking-header"><span class="aparte-thinking-label">${escapeHtml(labelOf(segment))}</span><span class="aparte-accordion__icon">${contextConfig().getIcon("expand")}</span></summary><div class="aparte-accordion__panel aparte-thinking-content" role="region" tabindex="0" aria-label="${escapeAttr(labelOf(segment))}">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
+  render: (segment) => `<details class="aparte-segment aparte-segment-thinking aparte-accordion__item" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed === false ? "open" : ""}><summary class="aparte-accordion__header aparte-thinking-header"><span class="aparte-thinking-label${escapeAttr(arriving(segment) ? " aparte-shimmer" : "")}">${escapeHtml(labelOf(segment))}</span><span class="aparte-accordion__icon">${contextConfig().getIcon("expand")}</span></summary><div class="aparte-accordion__panel aparte-thinking-content" role="region" tabindex="0" aria-label="${escapeAttr(labelOf(segment))}">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
   /**
    * The default label is the only config-derived text here — and `segment.label`
    * still wins, exactly as in `render`, because that string is the app's.
@@ -3557,16 +3676,16 @@ function streamHighlight(element, paneSelector, content, lang, segId) {
   if (now - (_lastHighlightAt.get(segId) ?? 0) < HIGHLIGHT_DEBOUNCE_MS) return;
   markThrottle(_lastHighlightAt, segId, now);
   void contextConfig(element).highlightCode(content.slice(0, cut), lang).then((html) => {
-    const live = element.querySelector(paneSelector);
-    if (!live) return;
-    if (cut <= highlightedLen(live)) return;
-    live.innerHTML = html;
-    const codeEl = live.querySelector("code") ?? live;
+    const live2 = element.querySelector(paneSelector);
+    if (!live2) return;
+    if (cut <= highlightedLen(live2)) return;
+    live2.innerHTML = html;
+    const codeEl = live2.querySelector("code") ?? live2;
     const span = document.createElement("span");
     span.dataset.aparteTail = "";
     span.textContent = content.slice(cut);
     codeEl.appendChild(span);
-    live.dataset.aparteHlLen = String(cut);
+    live2.dataset.aparteHlLen = String(cut);
   }).catch(() => {
   });
 }
@@ -3742,6 +3861,72 @@ function outcomeOf(segment) {
   if (segment.status === "rejected" && segment.refusal) return null;
   return { key: "toolOutput", text };
 }
+function behindOf(segment) {
+  const details = contextConfig().getToolDisplay(segment.toolCall?.name ?? "")?.details;
+  if (details === false) return { kind: "none" };
+  if (typeof details !== "function") return { kind: "parts" };
+  try {
+    const out = details(segment);
+    if (!out) return { kind: "none" };
+    return { kind: "body", body: typeof out === "string" ? contextConfig().sanitizeHtml(out) : out };
+  } catch {
+    return { kind: "none" };
+  }
+}
+const appDetailOf = (element) => element.querySelector(':scope > .aparte-tool-detail[data-details="app"]');
+function setBody(element, body) {
+  const detail = element.querySelector(".aparte-tool-detail");
+  if (!detail) return;
+  if (typeof body === "string") detail.innerHTML = body;
+  else detail.replaceChildren(body);
+  drawnBodies.set(detail, serialized(body));
+}
+const drawnBodies = /* @__PURE__ */ new WeakMap();
+const serialized = (body) => typeof body === "string" ? body : body.outerHTML;
+function relabelBody(detail, body) {
+  if (typeof body !== "string" && detail.contains(body)) {
+    drawnBodies.set(detail, body.outerHTML);
+    return;
+  }
+  const before = drawnBodies.get(detail);
+  const now = serialized(body);
+  if (before === now) return;
+  const next = document.createElement("div");
+  if (typeof body === "string") next.innerHTML = body;
+  else next.append(body);
+  const prev = document.createElement("div");
+  if (before !== void 0) prev.innerHTML = before;
+  if (before !== void 0 && sameShape(prev, next) && sameShape(prev, detail)) patchChanges(detail, prev, next);
+  else detail.replaceChildren(...Array.from(next.childNodes));
+  drawnBodies.set(detail, now);
+}
+function sameShape(a, b) {
+  if (a.childNodes.length !== b.childNodes.length) return false;
+  for (let i = 0; i < a.childNodes.length; i++) {
+    const x = a.childNodes[i];
+    const y = b.childNodes[i];
+    if (x.nodeType !== y.nodeType || x.nodeName !== y.nodeName || !sameShape(x, y)) return false;
+  }
+  return true;
+}
+function patchChanges(live2, prev, next) {
+  for (let i = 0; i < live2.childNodes.length; i++) {
+    const l = live2.childNodes[i];
+    const p = prev.childNodes[i];
+    const n = next.childNodes[i];
+    if (l instanceof Element && p instanceof Element && n instanceof Element) {
+      for (const { name, value } of Array.from(n.attributes)) {
+        if (p.getAttribute(name) !== value) l.setAttribute(name, value);
+      }
+      for (const { name } of Array.from(p.attributes)) {
+        if (!n.hasAttribute(name)) l.removeAttribute(name);
+      }
+      patchChanges(l, p, n);
+    } else if (p.nodeValue !== n.nodeValue) {
+      l.nodeValue = n.nodeValue;
+    }
+  }
+}
 function setNote(element, segment) {
   const el2 = element.querySelector(".aparte-tool-note");
   if (!el2) return;
@@ -3848,6 +4033,23 @@ function iconOf(segment) {
   const key = cfg.getToolDisplay(segment.toolCall?.name ?? "")?.icon;
   return (key ? cfg.getIcon(key) : void 0) || cfg.getIcon("tool");
 }
+const isQuiet = (segment) => contextConfig().getToolDisplay(segment.toolCall?.name ?? "")?.quiet === true;
+function quietOf(segment) {
+  const status = segment.status ?? "pending";
+  const quiet = isQuiet(segment);
+  return {
+    shimmer: quiet && status === "pending",
+    spinner: !quiet && status === "pending",
+    stateHidden: quiet && (status === "pending" || status === "resolved")
+  };
+}
+function setQuiet(element, segment) {
+  const quiet = quietOf(segment);
+  element.toggleAttribute("data-quiet", isQuiet(segment));
+  element.querySelector(".aparte-tool-spinner")?.toggleAttribute("hidden", !quiet.spinner);
+  element.querySelector(".aparte-tool-name")?.classList.toggle("aparte-shimmer", quiet.shimmer);
+  element.querySelector(".aparte-tool-state")?.classList.toggle("aparte-sr-only", quiet.stateHidden);
+}
 function setName(element, segment) {
   const el2 = element.querySelector(".aparte-tool-name");
   if (!el2) return;
@@ -3855,68 +4057,100 @@ function setName(element, segment) {
   if (el2.textContent !== text) el2.textContent = text;
   el2.classList.toggle("aparte-tool-name--label", isLabel);
 }
-function pillMarkup(segment, status) {
+function pillMarkup(segment) {
   const badge = stateBadge(segment);
   const icon = iconOf(segment);
   const target = toolTarget(segment);
   const note = noteOf(segment);
   const name = nameOf(segment);
+  const quiet = quietOf(segment);
   return `
                 <span class="aparte-tool-label">
                     <span class="aparte-tool-icon">${icon}</span>
-                    <span class="aparte-tool-name${name.isLabel ? " aparte-tool-name--label" : ""}">${escapeHtml(name.text)}</span>
+                    <span class="aparte-tool-name${name.isLabel ? " aparte-tool-name--label" : ""}${quiet.shimmer ? " aparte-shimmer" : ""}">${escapeHtml(name.text)}</span>
                     <span class="aparte-tool-target"${target ? "" : " hidden"}>${escapeHtml(target)}</span>
                 </span>
-                <span class="aparte-spinner aparte-tool-spinner" aria-hidden="true"${status === "pending" ? "" : " hidden"}></span>
-                <span class="aparte-tool-state">${badge}</span>
+                <span class="aparte-spinner aparte-tool-spinner" aria-hidden="true"${quiet.spinner ? "" : " hidden"}></span>
+                <span class="aparte-tool-state${quiet.stateHidden ? " aparte-sr-only" : ""}">${badge}</span>
                 <span class="aparte-tool-note"${note ? ` title="${escapeAttr(note)}"` : " hidden"}>${escapeHtml(note)}</span>`;
 }
 function placeholderMarkup(segment) {
   return `<div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(segment.status ?? "pending")}" data-tool-call-id="${escapeAttr(segment.toolCall?.id ?? "")}" data-tool-name="${escapeAttr(segment.toolCall?.name ?? "tool")}" hidden></div>`;
 }
 const isPlaceholder = (element) => element.hidden && element.classList.contains("aparte-segment-tool-call") && element.childElementCount === 0;
+const drawnBy = /* @__PURE__ */ new WeakMap();
+const behind = /* @__PURE__ */ new WeakMap();
+function toolRendererThatDrew(element) {
+  return behind.get(element) ?? null;
+}
+function drawerOf(element, current) {
+  const recorded = drawnBy.get(element);
+  if (recorded) return recorded;
+  return element.classList.contains("aparte-segment-tool-call") ? null : current;
+}
+function drawDefault(segment, behind2) {
+  const name = segment.toolCall?.name ?? "tool";
+  const status = segment.status ?? "pending";
+  const toolCallId = segment.toolCall?.id ?? "";
+  const pill = pillMarkup(segment);
+  const quiet = isQuiet(segment) ? " data-quiet" : "";
+  const toggle = contextConfig().getIcon("expand");
+  const input = behind2.kind === "parts" ? describeInput(segment) : "";
+  const outcome = behind2.kind === "parts" ? outcomeOf(segment) : null;
+  if (behind2.kind === "none" || behind2.kind === "parts" && !input && !outcome) {
+    return `
+        <div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}><div class="aparte-tool-line">${pill}</div>
+        </div>
+    `;
+  }
+  const cfg = contextConfig();
+  const copy = copyButtonMarkup("aparte-tool-copy");
+  const open = segment.collapsed !== void 0 ? !segment.collapsed : cfg.getToolDisplay(name)?.open === true;
+  if (behind2.kind === "body") {
+    const tpl = document.createElement("template");
+    tpl.innerHTML = `
+        <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}${open ? " open" : ""}>
+            <summary class="aparte-tool-summary"><span class="aparte-tool-toggle">${toggle}</span>${pill}</summary>
+            <div class="aparte-tool-detail" data-details="app"></div>
+        </details>`.trim();
+    const row = tpl.content.firstElementChild;
+    setBody(row, behind2.body);
+    return row;
+  }
+  return `
+        <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}${open ? " open" : ""}>
+            <summary class="aparte-tool-summary"><span class="aparte-tool-toggle">${toggle}</span>${pill}</summary>
+            <div class="aparte-tool-detail">
+                ${input ? `
+                <div class="aparte-tool-part" data-part="input">
+                    <div class="aparte-tool-part-head"><span class="aparte-tool-part-label">${escapeHtml(cfg.t("toolInput"))}</span>${copy}</div>
+                    <div class="aparte-tool-part-body" role="region" tabindex="0" aria-label="${escapeAttr(cfg.t("toolInput"))}"><pre><code>${escapeHtml(input)}</code></pre></div>
+                </div>` : ""}
+                ${outcome ? `
+                <div class="aparte-tool-part" data-part="output">
+                    <div class="aparte-tool-part-head"><span class="aparte-tool-part-label">${escapeHtml(cfg.t(outcome.key))}</span>${copy}</div>
+                    <div class="aparte-tool-part-body" role="region" tabindex="0" aria-label="${escapeAttr(cfg.t(outcome.key))}"><pre><code>${escapeHtml(outcome.text)}</code></pre></div>
+                </div>` : ""}
+            </div>
+        </details>
+    `;
+}
 const toolCallRenderer = {
   type: "tool_call",
   render: (segment) => {
     const name = segment.toolCall?.name ?? "tool";
-    const status = segment.status ?? "pending";
-    const toolCallId = segment.toolCall?.id ?? "";
     if (contextConfig().isToolHidden(name)) return placeholderMarkup(segment);
     const customRenderer = contextConfig().getToolRenderer(name);
     if (customRenderer) {
       injectToolRendererStyles(name, customRenderer);
-      return customRenderer.render(segment) || placeholderMarkup(segment);
-    }
-    const pill = pillMarkup(segment, status);
-    const toggle = contextConfig().getIcon("expand");
-    const input = describeInput(segment);
-    const outcome = outcomeOf(segment);
-    if (!input && !outcome) {
-      return `
-            <div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}">${pill}
-            </div>
-        `;
+      const out = customRenderer.render(segment);
+      if (out instanceof HTMLElement) {
+        drawnBy.set(out, customRenderer);
+        behind.set(out, customRenderer);
+      }
+      return out || placeholderMarkup(segment);
     }
-    const cfg = contextConfig();
-    const copy = copyButtonMarkup("aparte-tool-copy");
-    const open = segment.collapsed !== void 0 ? !segment.collapsed : cfg.getToolDisplay(name)?.open === true;
-    return `
-            <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${open ? " open" : ""}>
-                <summary class="aparte-tool-summary"><span class="aparte-tool-toggle">${toggle}</span>${pill}</summary>
-                <div class="aparte-tool-detail">
-                    ${input ? `
-                    <div class="aparte-tool-part" data-part="input">
-                        <div class="aparte-tool-part-head"><span class="aparte-tool-part-label">${escapeHtml(cfg.t("toolInput"))}</span>${copy}</div>
-                        <div class="aparte-tool-part-body" role="region" tabindex="0" aria-label="${escapeAttr(cfg.t("toolInput"))}"><pre><code>${escapeHtml(input)}</code></pre></div>
-                    </div>` : ""}
-                    ${outcome ? `
-                    <div class="aparte-tool-part" data-part="output">
-                        <div class="aparte-tool-part-head"><span class="aparte-tool-part-label">${escapeHtml(cfg.t(outcome.key))}</span>${copy}</div>
-                        <div class="aparte-tool-part-body" role="region" tabindex="0" aria-label="${escapeAttr(cfg.t(outcome.key))}"><pre><code>${escapeHtml(outcome.text)}</code></pre></div>
-                    </div>` : ""}
-                </div>
-            </details>
-        `;
+    return drawDefault(segment, behindOf(segment));
   },
   /**
    * The pill's glyphs, and the label it wears while a person is deciding.
@@ -3931,7 +4165,7 @@ const toolCallRenderer = {
   relabel: (element, segment) => {
     if (isPlaceholder(element)) return;
     const cfg = contextConfig();
-    const custom = cfg.getToolRenderer(segment.toolCall?.name);
+    const custom = drawerOf(element, cfg.getToolRenderer(segment.toolCall?.name) ?? null);
     if (custom) {
       custom.relabel?.(element, segment);
       return;
@@ -3949,8 +4183,14 @@ const toolCallRenderer = {
     if (outputLabel && outcome) outputLabel.textContent = cfg.t(outcome.key);
     if (outcome) element.querySelector('[data-part="output"] .aparte-tool-part-body')?.setAttribute("aria-label", cfg.t(outcome.key));
     for (const button of element.querySelectorAll(".aparte-tool-copy")) relabelCopyButton(button);
+    const appDetail = appDetailOf(element);
+    if (appDetail) {
+      const behind2 = behindOf(segment);
+      if (behind2.kind === "body") relabelBody(appDetail, behind2.body);
+    }
     const statusEl = element.querySelector(".aparte-tool-state");
     if (statusEl) statusEl.innerHTML = stateBadge(segment);
+    setQuiet(element, segment);
   },
   /**
    * Patch in place. NEVER re-render, and never touch `open`.
@@ -3972,43 +4212,77 @@ const toolCallRenderer = {
       element.setAttribute("data-status", status);
       return;
     }
-    const input = describeInput(segment);
-    const outcome = outcomeOf(segment);
-    const wantsDetail = !!input || !!outcome;
-    const custom = contextConfig().getToolRenderer(segment.toolCall?.name);
-    if (custom?.update && !hidden && !isPlaceholder(element)) {
-      custom.update(element, segment);
+    const custom = hidden ? null : contextConfig().getToolRenderer(segment.toolCall?.name) ?? null;
+    const drawn = isPlaceholder(element) ? null : drawerOf(element, custom);
+    if (drawn && drawn === custom && drawn.update && !isPlaceholder(element)) {
+      drawn.update(element, segment);
       return;
     }
-    if (custom || hidden || isPlaceholder(element) || wantsDetail !== (element.tagName === "DETAILS")) {
-      const out = toolCallRenderer.render(segment);
+    const rebuild = (out) => {
       const tpl = document.createElement("template");
       tpl.innerHTML = typeof out === "string" ? out.trim() : "";
       const rebuilt = typeof out === "string" ? tpl.content.firstElementChild : out;
       if (rebuilt) {
+        if (!rebuilt.hasAttribute("data-segment-id")) rebuilt.setAttribute("data-segment-id", segment.id);
+        toolCallRenderer.cleanup?.(element, segment);
         element.replaceWith(rebuilt);
         toolCallRenderer.setup?.(rebuilt, segment);
       }
+    };
+    if (custom || drawn || hidden || isPlaceholder(element)) {
+      rebuild(toolCallRenderer.render(segment));
+      return;
+    }
+    const behind2 = behindOf(segment);
+    const input = behind2.kind === "parts" ? describeInput(segment) : "";
+    const outcome = behind2.kind === "parts" ? outcomeOf(segment) : null;
+    const wantsDetail = behind2.kind === "body" || !!input || !!outcome;
+    const holdsAppDetail = !!appDetailOf(element);
+    if (wantsDetail !== (element.tagName === "DETAILS") || wantsDetail && behind2.kind === "body" !== holdsAppDetail) {
+      rebuild(drawDefault(segment, behind2));
       return;
     }
     element.setAttribute("data-status", status);
     const badge = element.querySelector(".aparte-tool-state");
     if (badge) badge.innerHTML = stateBadge(segment);
-    element.querySelector(".aparte-tool-spinner")?.toggleAttribute("hidden", status !== "pending");
+    setQuiet(element, segment);
     setName(element, segment);
     setTarget(element, segment);
     setNote(element, segment);
+    if (behind2.kind === "body") {
+      setBody(element, behind2.body);
+      return;
+    }
     setPart(element, "input", input, "toolInput");
     setPart(element, "output", outcome?.text ?? "", outcome?.key ?? "toolOutput");
     highlightParts(element);
   },
   setup: (element, segment) => {
+    const hidden = contextConfig().isToolHidden(segment.toolCall?.name ?? "tool");
+    const customRenderer = hidden ? void 0 : contextConfig().getToolRenderer(segment.toolCall?.name);
+    if (customRenderer) behind.set(element, customRenderer);
     if (isPlaceholder(element)) return;
     wireParts(element);
     highlightParts(element);
-    const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
+    if (customRenderer) drawnBy.set(element, customRenderer);
     customRenderer?.setup?.(element, segment);
   },
+  /**
+   * The row leaves for good: the registered renderer that drew it, if any, cleans up. A
+   * cleanup that throws is reported and goes no further: the row is replaced or removed
+   * all the same, and the stream that caused it is not interrupted.
+   */
+  cleanup: (element, segment) => {
+    behind.delete(element);
+    const custom = drawnBy.get(element);
+    if (!custom) return;
+    drawnBy.delete(element);
+    try {
+      custom.cleanup?.(element, segment);
+    } catch (err) {
+      console.error("[aparte] a tool renderer's cleanup threw", err);
+    }
+  },
   // CSS lives in styles/segment/ — see that folder for why a
   // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
   // has no other way onto the page.
@@ -4032,8 +4306,51 @@ function effectiveRenderers(config) {
 }
 let styleElement = null;
 function registerSegmentRenderer(renderer, config = contextConfig()) {
-  registryFor(config).renderers.set(renderer.type, renderer);
+  const reg = registryFor(config);
+  if (reg.renderers.get(renderer.type) === renderer) return;
+  reg.renderers.set(renderer.type, renderer);
   injectRendererStyles(config);
+  notifyRenderersChanged(config);
+}
+const overrideStacks = /* @__PURE__ */ new WeakMap();
+function overrideSegmentRenderer(renderer, config = contextConfig()) {
+  const type = renderer.type;
+  const reg = registryFor(config);
+  let byType = overrideStacks.get(config);
+  if (!byType) {
+    byType = /* @__PURE__ */ new Map();
+    overrideStacks.set(config, byType);
+  }
+  const current = reg.renderers.get(type);
+  let stack = byType.get(type);
+  if (!stack) {
+    stack = [{ renderer: current }];
+    byType.set(type, stack);
+  } else if (stack[stack.length - 1].renderer !== current) stack.splice(0, stack.length, { renderer: current });
+  const entry = { renderer };
+  stack.push(entry);
+  registerSegmentRenderer(renderer, config);
+  let restored = false;
+  return () => {
+    if (restored) return;
+    restored = true;
+    const i = stack.indexOf(entry);
+    if (i <= 0) return;
+    const wasTop = i === stack.length - 1;
+    stack.splice(i, 1);
+    if (stack.length === 1 && byType.get(type) === stack) byType.delete(type);
+    if (!wasTop || reg.renderers.get(type) !== renderer) return;
+    const top = stack[stack.length - 1].renderer;
+    if (top) {
+      registerSegmentRenderer(top, config);
+      return;
+    }
+    unregisterSegmentRenderer(type, config);
+    if (!effectiveRenderers(config).has(type) && reg.defaultsInstalled && !reg.defaultsDeclined) {
+      const builtIn = DEFAULT_RENDERERS.find((r) => r.type === type);
+      if (builtIn) registerSegmentRenderer(builtIn, config);
+    }
+  };
 }
 function declineDefaultRenderers(config = contextConfig()) {
   registryFor(config).defaultsDeclined = true;
@@ -4048,7 +4365,10 @@ function installDefaultRenderersOnce(config = contextConfig()) {
   injectRendererStyles(config);
 }
 function unregisterSegmentRenderer(type, config = contextConfig()) {
-  registryFor(config).renderers.delete(type);
+  const reg = registryFor(config);
+  if (!reg.renderers.has(type)) return;
+  reg.renderers.delete(type);
+  notifyRenderersChanged(config);
 }
 function getSegmentRenderer(type, config = contextConfig()) {
   return effectiveRenderers(config).get(type);
@@ -4108,6 +4428,71 @@ const DEFAULT_RENDERERS = [
   errorRenderer,
   toolCallRenderer
 ];
+const mountedRenderers = /* @__PURE__ */ new WeakSet();
+function isMountedRenderer(renderer) {
+  return !!renderer && mountedRenderers.has(renderer);
+}
+function toToolCallView(segment) {
+  return {
+    id: segment.toolCall?.id ?? segment.id,
+    name: segment.toolCall?.name ?? "tool",
+    input: segment.toolCall?.input,
+    status: segment.status ?? "pending",
+    result: segment.result,
+    structuredResult: segment.structuredResult,
+    deferred: segment.deferred,
+    refusal: segment.refusal,
+    abortCause: segment.abortCause,
+    segment
+  };
+}
+function host(className, segmentId) {
+  const el2 = document.createElement("div");
+  el2.className = className;
+  el2.setAttribute("data-segment-id", segmentId);
+  return el2;
+}
+function defineMountedToolRenderer(mount) {
+  const mounted = /* @__PURE__ */ new WeakMap();
+  const renderer = {
+    render: (segment) => host("aparte-tool-ui", segment.id),
+    setup: (el2, segment) => {
+      if (!mounted.has(el2)) mounted.set(el2, mount(el2, toToolCallView(segment)));
+    },
+    update: (el2, segment) => {
+      mounted.get(el2)?.update(toToolCallView(segment));
+    },
+    cleanup: (el2) => {
+      const view = mounted.get(el2);
+      if (!view) return;
+      mounted.delete(el2);
+      view.destroy();
+    }
+  };
+  mountedRenderers.add(renderer);
+  return renderer;
+}
+function defineMountedSegmentRenderer(type, mount) {
+  const mounted = /* @__PURE__ */ new WeakMap();
+  const renderer = {
+    type,
+    render: (segment) => host("aparte-segment-ui", segment.id),
+    setup: (el2, segment) => {
+      if (!mounted.has(el2)) mounted.set(el2, mount(el2, segment));
+    },
+    update: (el2, segment) => {
+      mounted.get(el2)?.update(segment);
+    },
+    cleanup: (el2) => {
+      const view = mounted.get(el2);
+      if (!view) return;
+      mounted.delete(el2);
+      view.destroy();
+    }
+  };
+  mountedRenderers.add(renderer);
+  return renderer;
+}
 function populateBubbleFromMessage(bubble, message, siblingInfo) {
   if (message.segments && message.segments.length > 0) {
     const existing = bubble.getSegments?.() ?? [];
@@ -4607,6 +4992,21 @@ function revokeAttachmentUrls(attachments) {
     if (attachment.url?.startsWith("blob:")) URL.revokeObjectURL(attachment.url);
   }
 }
+const known = /* @__PURE__ */ new Map();
+function rememberConversationStatus(id, status) {
+  if (status) known.set(id, status);
+  else known.delete(id);
+}
+function tellConversationStatus(id, status) {
+  rememberConversationStatus(id, status);
+  try {
+    window.dispatchEvent(new CustomEvent("aparte-conversation-status", { detail: { id, status } }));
+  } catch {
+  }
+}
+function conversationStatusOf(id) {
+  return known.get(id) ?? null;
+}
 const MAX_COMPACTION_SAVE_WAITS = 6;
 class AparteConversationController {
   _binding;
@@ -4615,6 +5015,10 @@ class AparteConversationController {
   _isStreaming = false;
   _isLoadingConversation = false;
   _ensureInFlight = null;
+  /** The conversation the turn in flight started in, and what the lists were told of it. */
+  _turn = null;
+  /** The reply the turn in flight writes into, from its `aparte-message-start`. */
+  _turnMessage = null;
   _onSendCapture = null;
   _onPathChanged = null;
   _onMessageStart = null;
@@ -4622,6 +5026,7 @@ class AparteConversationController {
   _onMessageError = null;
   _onMessageAborted = null;
   _onMessagePaused = null;
+  _onMessageResumed = null;
   _onSelectConversation = null;
   _onCompactDone = null;
   _unsubscribeManager = null;
@@ -4702,11 +5107,38 @@ class AparteConversationController {
       "[aparte] This chat resolves its own config, but the conversation manager was registered on aparteGlobalConfig — so nothing is being persisted. Pass the same config to init(): `init(adapter, myConfig)`, using the config you gave the chat."
     );
   }
+  /**
+   * Tell every conversation list on the page what the turn is doing, through
+   * `aparte-conversation-status` on `window` — the mirror of the list's
+   * `aparte-conversation-select`, which this controller hears. Always about the
+   * conversation the turn started in: the person may have opened another since. A turn
+   * that starts before its conversation exists (a first message) is told once it does.
+   */
+  _setTurn(status) {
+    if (!status) {
+      if (this._turn) tellConversationStatus(this._turn.id, null);
+      this._turn = null;
+      return;
+    }
+    const id = this._turn?.id ?? (status === "running" ? this._activeId ?? this._manager()?.activeId ?? null : null);
+    if (!id) return;
+    this._turn = { id, status };
+    tellConversationStatus(id, status);
+  }
+  /**
+   * Whether a lifecycle event is about the turn in flight. A turn a newer send replaced
+   * (a chip, a retry, an edit) says it stopped AFTER the new one started: its end must not
+   * end the new turn's state. An event without a message id is taken as this turn's.
+   */
+  _ofThisTurn(e) {
+    const id = e.detail?.messageId;
+    return !id || !this._turnMessage || id === this._turnMessage;
+  }
   /**
    * Attach event listeners to the binding host. Returns an unbind function.
    */
   bind() {
-    const host = this._binding.host;
+    const host2 = this._binding.host;
     this._onSendCapture = (e) => {
       const evt = e;
       const targetId = evt.detail?.targetId;
@@ -4725,36 +5157,49 @@ class AparteConversationController {
       evt.detail.echoed = true;
       void this._ensureConversationAndPersist(userMsg);
     };
-    host.addEventListener("aparte-send", this._onSendCapture, { capture: true });
+    host2.addEventListener("aparte-send", this._onSendCapture, { capture: true });
     this._onPathChanged = () => {
       if (!this._isLoadingConversation) {
         this._persistActive();
       }
     };
-    host.addEventListener("aparte-path-changed", this._onPathChanged);
-    this._onMessageStart = () => {
+    host2.addEventListener("aparte-path-changed", this._onPathChanged);
+    this._onMessageStart = (e) => {
       this._isStreaming = true;
+      this._turnMessage = e.detail?.messageId ?? null;
+      this._setTurn("running");
     };
-    this._onMessageDone = () => {
+    const ended = (e) => {
+      if (!this._ofThisTurn(e)) return;
       this._isStreaming = false;
+      this._setTurn(null);
+      this._turnMessage = null;
+    };
+    this._onMessageDone = (e) => {
+      ended(e);
       queueMicrotask(() => this._persistActive());
     };
-    this._onMessageError = () => {
-      this._isStreaming = false;
+    this._onMessageError = (e) => {
+      ended(e);
       queueMicrotask(() => this._persistActive());
     };
-    this._onMessageAborted = () => {
-      this._isStreaming = false;
+    this._onMessageAborted = (e) => {
+      ended(e);
       queueMicrotask(() => this._persistActive());
     };
-    this._onMessagePaused = () => {
+    this._onMessagePaused = (e) => {
+      if (this._ofThisTurn(e)) this._setTurn("waiting");
       queueMicrotask(() => this._persistActive());
     };
-    host.addEventListener("aparte-message-start", this._onMessageStart);
-    host.addEventListener("aparte-message-done", this._onMessageDone);
-    host.addEventListener("aparte-message-error", this._onMessageError);
-    host.addEventListener("aparte-message-aborted", this._onMessageAborted);
-    host.addEventListener("aparte-message-paused", this._onMessagePaused);
+    this._onMessageResumed = (e) => {
+      if (this._ofThisTurn(e)) this._setTurn("running");
+    };
+    host2.addEventListener("aparte-message-start", this._onMessageStart);
+    host2.addEventListener("aparte-message-done", this._onMessageDone);
+    host2.addEventListener("aparte-message-error", this._onMessageError);
+    host2.addEventListener("aparte-message-aborted", this._onMessageAborted);
+    host2.addEventListener("aparte-message-paused", this._onMessagePaused);
+    host2.addEventListener("aparte-message-resumed", this._onMessageResumed);
     this._onSelectConversation = (e) => {
       const evt = e;
       const targetId = evt.detail?.targetId;
@@ -4781,37 +5226,44 @@ class AparteConversationController {
     this._bound = false;
     this._subscribedTo = null;
     this._persistActive();
+    if (this._turn?.status === "running") this._setTurn(null);
+    this._turn = null;
+    this._turnMessage = null;
     this._stopHydrationRetry?.();
     this._stopHydrationRetry = null;
-    const host = this._binding.host;
+    const host2 = this._binding.host;
     if (this._onSendCapture) {
-      host.removeEventListener("aparte-send", this._onSendCapture, { capture: true });
+      host2.removeEventListener("aparte-send", this._onSendCapture, { capture: true });
       this._onSendCapture = null;
     }
     if (this._onPathChanged) {
-      host.removeEventListener("aparte-path-changed", this._onPathChanged);
+      host2.removeEventListener("aparte-path-changed", this._onPathChanged);
       this._onPathChanged = null;
     }
     if (this._onMessageStart) {
-      host.removeEventListener("aparte-message-start", this._onMessageStart);
+      host2.removeEventListener("aparte-message-start", this._onMessageStart);
       this._onMessageStart = null;
     }
     if (this._onMessageDone) {
-      host.removeEventListener("aparte-message-done", this._onMessageDone);
+      host2.removeEventListener("aparte-message-done", this._onMessageDone);
       this._onMessageDone = null;
     }
     if (this._onMessageError) {
-      host.removeEventListener("aparte-message-error", this._onMessageError);
+      host2.removeEventListener("aparte-message-error", this._onMessageError);
       this._onMessageError = null;
     }
     if (this._onMessageAborted) {
-      host.removeEventListener("aparte-message-aborted", this._onMessageAborted);
+      host2.removeEventListener("aparte-message-aborted", this._onMessageAborted);
       this._onMessageAborted = null;
     }
     if (this._onMessagePaused) {
-      host.removeEventListener("aparte-message-paused", this._onMessagePaused);
+      host2.removeEventListener("aparte-message-paused", this._onMessagePaused);
       this._onMessagePaused = null;
     }
+    if (this._onMessageResumed) {
+      host2.removeEventListener("aparte-message-resumed", this._onMessageResumed);
+      this._onMessageResumed = null;
+    }
     if (this._onCompactDone && typeof window !== "undefined") {
       window.removeEventListener("aparte-compact-done", this._onCompactDone);
       this._onCompactDone = null;
@@ -4840,6 +5292,8 @@ class AparteConversationController {
     const isSwitch = id !== this._activeId;
     const manager = this._manager();
     if (isSwitch && this._isStreaming) {
+      if (this._turn?.status === "waiting") this._turn = null;
+      else this._setTurn(null);
       this._persistActive();
       try {
         window.dispatchEvent(new CustomEvent("aparte-abort", {
@@ -5021,6 +5475,7 @@ class AparteConversationController {
       }
       this._activeId = convId;
       this._options.onConversationCreated?.(convId);
+      if (this._isStreaming && !this._turn) this._setTurn("running");
     } else if (this._activeId !== null && this._activeId !== convId) {
       await manager.addMessage(convId, userMsg).catch(() => {
       });
@@ -5083,6 +5538,12 @@ class AparteChatHost {
   _tokenBuffer = null;
   /** Handle of the scheduled coalesced sync, or null when none is pending. */
   _flushHandle = null;
+  /**
+   * Lists reported through `onMessagesChange` that the parent has not handed back yet, oldest
+   * first — what {@link takeEcho} recognises. Bounded: a parent that never hands a list back
+   * (an uncontrolled chat) must not make it grow for the life of the page.
+   */
+  _pendingEchoes = [];
   _conversationId = null;
   _controller;
   _teardown = [];
@@ -5092,6 +5553,34 @@ class AparteChatHost {
     this.options = options;
     this._conversationId = options.conversationId ?? null;
   }
+  /** Every report goes through here, so {@link takeEcho} knows what the parent may hand back. */
+  _report(next) {
+    this._pendingEchoes.push(next);
+    if (this._pendingEchoes.length > 64) this._pendingEchoes.shift();
+    this.binding.onMessagesChange?.(next);
+  }
+  /**
+   * Whether a list the parent hands back is this host's own report coming back — the echo of
+   * `onMessagesChange` through a two-way binding (`bind:messages`, `v-model:messages`,
+   * `[(messages)]`, a controlled React prop). A wrapper asks before applying the list it is
+   * given, because applying an echo rolls back what the host did since without reporting (an
+   * optimistic append).
+   *
+   * True for a list reported and not handed back yet, however late it lands — a parent whose
+   * render comes after the host's next write hands back an EARLIER report — and that list and
+   * every older one are taken. False for any other list, the parent's own word, which clears
+   * them: a list the parent restores later (a reopened conversation, an undo) is applied,
+   * where remembering every list ever reported swallowed it.
+   */
+  takeEcho(list) {
+    const i = this._pendingEchoes.indexOf(list);
+    if (i < 0) {
+      this._pendingEchoes.length = 0;
+      return false;
+    }
+    this._pendingEchoes.splice(0, i + 1);
+    return true;
+  }
   // ── lifecycle ──────────────────────────────────────────────────────────
   /**
    * Install the host-method surface + event listeners and create the
@@ -5101,19 +5590,19 @@ class AparteChatHost {
   bind() {
     if (this._bound) return () => this.unbind();
     this._bound = true;
-    const host = this.binding.host;
-    if (!host.id) host.id = this.binding.hostId;
+    const host2 = this.binding.host;
+    if (!host2.id) host2.id = this.binding.hostId;
     if (this.options.config) attachConfig(this.binding.host, this.options.config);
     const vp = this._vp();
     vp?.setFrameworkManagedDOM?.(true);
     if (this.options.layoutTransitionMs && this.options.layoutTransitionMs > 0) {
       vp?.configure?.({ layoutTransitionMs: this.options.layoutTransitionMs });
     }
-    this._installHostMethods(host);
-    this._installLifecycleListeners(host);
-    this._teardown.push(gateGlide(host));
+    this._installHostMethods(host2);
+    this._installLifecycleListeners(host2);
+    this._teardown.push(gateGlide(host2));
     this._installViewportListeners();
-    this._createController(host);
+    this._createController(host2);
     return () => this.unbind();
   }
   unbind() {
@@ -5159,10 +5648,10 @@ class AparteChatHost {
     return this._controller?.setConversationId(id) ?? Promise.resolve();
   }
   _unbindController;
-  _createController(host) {
+  _createController(host2) {
     const convBinding = {
       hostId: this.binding.hostId,
-      host,
+      host: host2,
       // Controller-driven flushes mirror AparteConversationManager state, not
       // user intent — deliberately NOT emitted as `messagesChange` to
       // avoid a feedback loop with hosts using a two-way `messages` input.
@@ -5269,7 +5758,7 @@ class AparteChatHost {
     const merged = { ...next[index], ...updates };
     next[index] = merged;
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
     if (updates.status) {
       this._bubbleById(messageId)?.updateMessage?.({ status: updates.status });
     }
@@ -5289,7 +5778,7 @@ class AparteChatHost {
     const newContent = options?.append ? (last.content || "") + content : content;
     const next = [...msgs.slice(0, -1), { ...last, content: newContent }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Add a segment to the last message (immediate bubble + state sync). */
   addSegment(segment) {
@@ -5314,7 +5803,7 @@ class AparteChatHost {
     const segments = [...last.segments || [], stamped];
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Update a segment in the last message in place. */
   updateSegment(segmentId, updates) {
@@ -5331,7 +5820,7 @@ class AparteChatHost {
     );
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Remove a transient segment (a status row the host added itself). */
   removeSegment(segmentId) {
@@ -5345,7 +5834,7 @@ class AparteChatHost {
     renumberSegments(segments);
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /**
    * Append text to a segment's content in the last message — the streaming path
@@ -5401,8 +5890,8 @@ class AparteChatHost {
       this._flushHandle = null;
     }
     const tokens = this._tokenBuffer;
-    const pending = this._segmentBuffer.size > 0 ? new Map(this._segmentBuffer) : null;
-    if (!tokens && !pending) return;
+    const pending2 = this._segmentBuffer.size > 0 ? new Map(this._segmentBuffer) : null;
+    if (!tokens && !pending2) return;
     this._tokenBuffer = null;
     this._segmentBuffer.clear();
     let msgs = this.binding.getMessages();
@@ -5416,11 +5905,11 @@ class AparteChatHost {
         changed = true;
       }
     }
-    if (pending) {
+    if (pending2) {
       const last = msgs[msgs.length - 1];
       if (last?.segments) {
         const segments = last.segments.map((s) => {
-          const buffered = pending.get(s.id);
+          const buffered = pending2.get(s.id);
           if (buffered === void 0 || !("content" in s)) return s;
           return {
             ...s,
@@ -5434,7 +5923,7 @@ class AparteChatHost {
     }
     if (!changed) return;
     this.binding.setMessages(msgs);
-    this.binding.onMessagesChange?.(msgs);
+    this._report(msgs);
   }
   /** Read the current message list. */
   getMessages() {
@@ -5467,7 +5956,7 @@ class AparteChatHost {
     const idx = msgs.findIndex((m) => m.id === messageId);
     const next = idx >= 0 ? msgs.slice(0, idx) : msgs;
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Keep up to and including a user message, drop later responses (retry). */
   truncateResponsesAfter(userMessageId) {
@@ -5476,7 +5965,7 @@ class AparteChatHost {
     const idx = msgs.findIndex((m) => m.id === userMessageId);
     const next = idx >= 0 ? msgs.slice(0, idx + 1) : msgs;
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   // ── manual token streaming (agnostic core of injectTokenStream) ─────────
   /**
@@ -5504,14 +5993,14 @@ class AparteChatHost {
       }
       ac.signal.addEventListener("abort", () => resolve("aborted"), { once: true });
     });
-    const { host, hostId } = this.binding;
+    const { host: host2, hostId } = this.binding;
     const onAbort = (e) => {
       const target = e.detail?.targetId;
       if ((!target || target === hostId) && this._streamAbort === ac) this.stopTokenStream();
     };
     window.addEventListener("aparte-abort", onAbort);
     const replaced = () => this._streamAbort !== void 0 && this._streamAbort !== ac;
-    dispatchLifecycleEvent(host, "aparte-message-start", { messageId, role: "assistant" }, hostId);
+    dispatchLifecycleEvent(host2, "aparte-message-start", { messageId, role: "assistant" }, hostId);
     try {
       for (; ; ) {
         const res = await Promise.race([iterator.next(), aborted]);
@@ -5524,7 +6013,7 @@ class AparteChatHost {
       if (!replaced()) {
         this._setStreamingId(null);
         dispatchLifecycleEvent(
-          host,
+          host2,
           ac.signal.aborted ? "aparte-message-aborted" : "aparte-message-done",
           ac.signal.aborted ? { messageId } : { messageId, role: "assistant" },
           hostId
@@ -5534,7 +6023,7 @@ class AparteChatHost {
       this._flushStreamState();
       if (!replaced()) {
         this._setStreamingId(null);
-        dispatchLifecycleEvent(host, "aparte-message-error", { messageId, error: err }, hostId);
+        dispatchLifecycleEvent(host2, "aparte-message-error", { messageId, error: err }, hostId);
       }
       throw err;
     } finally {
@@ -5692,22 +6181,22 @@ class AparteChatHost {
     const all = vp.querySelectorAll("aparte-chat-bubble");
     return all.length ? all[all.length - 1] : null;
   }
-  _installHostMethods(host) {
-    host["appendMessage"] = (m) => this.appendMessage(m);
-    host["updateMessage"] = (id, u) => this.updateMessage(id, u);
-    host["updateLastMessage"] = (c, o) => this.updateLastMessage(c, o);
-    host["addSegment"] = (s) => this.addSegment(s);
-    host["updateSegment"] = (id, u) => this.updateSegment(id, u);
-    host["removeSegment"] = (id) => this.removeSegment(id);
-    host["appendToSegment"] = (id, c) => this.appendToSegment(id, c);
-    host["getMessages"] = () => this.getMessages();
-    host["addBranch"] = (id) => this.addBranch(id);
-    host["addSiblingOf"] = (id, m) => this.addSiblingOf(id, m);
-    host["truncateFrom"] = (id) => this.truncateFrom(id);
-    host["truncateResponsesAfter"] = (id) => this.truncateResponsesAfter(id);
-    host["clearAll"] = (options) => this.clearMessages(options);
-  }
-  _installLifecycleListeners(host) {
+  _installHostMethods(host2) {
+    host2["appendMessage"] = (m) => this.appendMessage(m);
+    host2["updateMessage"] = (id, u) => this.updateMessage(id, u);
+    host2["updateLastMessage"] = (c, o) => this.updateLastMessage(c, o);
+    host2["addSegment"] = (s) => this.addSegment(s);
+    host2["updateSegment"] = (id, u) => this.updateSegment(id, u);
+    host2["removeSegment"] = (id) => this.removeSegment(id);
+    host2["appendToSegment"] = (id, c) => this.appendToSegment(id, c);
+    host2["getMessages"] = () => this.getMessages();
+    host2["addBranch"] = (id) => this.addBranch(id);
+    host2["addSiblingOf"] = (id, m) => this.addSiblingOf(id, m);
+    host2["truncateFrom"] = (id) => this.truncateFrom(id);
+    host2["truncateResponsesAfter"] = (id) => this.truncateResponsesAfter(id);
+    host2["clearAll"] = (options) => this.clearMessages(options);
+  }
+  _installLifecycleListeners(host2) {
     const onStart = (e) => {
       const d = e?.detail;
       if (d?.messageId) this._setStreamingId(d.messageId);
@@ -5727,7 +6216,7 @@ class AparteChatHost {
         (m) => m.id === d.messageId ? { ...m, usage: d.usage } : m
       );
       this.binding.setMessages(next);
-      this.binding.onMessagesChange?.(next);
+      this._report(next);
       this._bubbleById(d.messageId)?.setUsage?.(d.usage);
     };
     const onEnd = (e) => {
@@ -5735,15 +6224,15 @@ class AparteChatHost {
       this.binding.onTypingChange?.(false);
       this._setStreamingId(null);
     };
-    host.addEventListener("aparte-message-start", onStart);
-    host.addEventListener("aparte-message-done", onDone);
-    host.addEventListener("aparte-message-error", onEnd);
-    host.addEventListener("aparte-message-aborted", onEnd);
+    host2.addEventListener("aparte-message-start", onStart);
+    host2.addEventListener("aparte-message-done", onDone);
+    host2.addEventListener("aparte-message-error", onEnd);
+    host2.addEventListener("aparte-message-aborted", onEnd);
     this._teardown.push(() => {
-      host.removeEventListener("aparte-message-start", onStart);
-      host.removeEventListener("aparte-message-done", onDone);
-      host.removeEventListener("aparte-message-error", onEnd);
-      host.removeEventListener("aparte-message-aborted", onEnd);
+      host2.removeEventListener("aparte-message-start", onStart);
+      host2.removeEventListener("aparte-message-done", onDone);
+      host2.removeEventListener("aparte-message-error", onEnd);
+      host2.removeEventListener("aparte-message-aborted", onEnd);
     });
   }
   _installViewportListeners() {
@@ -5760,7 +6249,7 @@ class AparteChatHost {
         return old?.usage !== void 0 ? { ...m, usage: old.usage } : m;
       });
       this.binding.setMessages(merged);
-      this.binding.onMessagesChange?.(merged);
+      this._report(merged);
       if (evt.detail.siblings.some((s) => s.count > 1)) {
         this._pendingSiblings = evt.detail.siblings;
         this.binding.afterRender(() => this._applyPendingSiblings());
@@ -6381,6 +6870,9 @@ function remoteProvider(id) {
 }
 class AparteClient {
   _boundHandler = null;
+  /** Between `start()` and `stop()`: the listeners are on `window`. The send handler alone is
+   *  not the sign — the constructor prepares it without listening. */
+  _listening = false;
   _boundAbortHandler = null;
   _boundLoadedHandler = null;
   _boundRetryHandler = null;
@@ -6515,11 +7007,12 @@ class AparteClient {
     if (!this._boundLoadedHandler) {
       this._boundLoadedHandler = (e) => {
         if (!this._isForThisInstance(e)) return;
-        const host = e.target instanceof HTMLElement ? e.target : void 0;
-        void this.resumeDeferred(host ?? e.detail?.targetId);
+        const host2 = e.target instanceof HTMLElement ? e.target : void 0;
+        void this.resumeDeferred(host2 ?? e.detail?.targetId);
       };
     }
     window.addEventListener("aparte-conversation-loaded", this._boundLoadedHandler);
+    this._listening = true;
   }
   /**
    * Stop answering: abort the reply in flight, take this client's `keyResolver` off the
@@ -6529,7 +7022,8 @@ class AparteClient {
     this.abort();
     this._releaseKeyResolver?.();
     this._releaseKeyResolver = null;
-    if (!this._boundHandler) return;
+    if (!this._listening || !this._boundHandler) return;
+    this._listening = false;
     window.removeEventListener("aparte-send", this._boundHandler);
     this._boundHandler = null;
     if (this._boundAbortHandler) {
@@ -6685,6 +7179,7 @@ class AparteClient {
       return;
     }
     dispatchLifecycleEvent(targetElement, "aparte-message-start", { messageId, role: "assistant" }, chatId);
+    if (opts?.resume) dispatchLifecycleEvent(targetElement, "aparte-message-paused", { messageId }, chatId);
     if (!opts?.resume && provider.id) {
       this._updateMessage(targetElement, messageId, {
         model: {
@@ -6697,6 +7192,7 @@ class AparteClient {
     const streamController = new AbortController();
     if (this._streamController !== streamController) this._streamController?.abort();
     this._streamController = streamController;
+    this._turnsInFlight.add(messageId);
     try {
       let result = opts?.resume ? { usage: void 0, suspended: opts.resume } : await this._streamLoop(targetElement, messageId, provider, baseRequest, authConfig, streamController);
       const maxResumes = this.options.maxTurns ?? 10;
@@ -6728,6 +7224,7 @@ class AparteClient {
         };
         const messages2 = this._resumeMessages(targetElement, messageId, baseRequest.messages);
         this._spendPause(targetElement, messageId);
+        dispatchLifecycleEvent(targetElement, "aparte-message-resumed", { messageId }, chatId);
         result = await this._streamLoop(
           targetElement,
           messageId,
@@ -6754,8 +7251,15 @@ class AparteClient {
       }
       const aparteError = AparteError.from(error, AparteErrorCode.UNKNOWN_ERROR);
       this._handleLifecycleError(targetElement, messageId, aparteError);
+    } finally {
+      this._turnsInFlight.delete(messageId);
     }
   }
+  /**
+   * Replies a turn is running into right now, a pause it waits on included: a second
+   * load of their conversation must not start them again (`resumeDeferred`).
+   */
+  _turnsInFlight = /* @__PURE__ */ new Set();
   /**
    * Handle aparte-retry — add a sibling branch to the assistant message and re-stream
    * using the same conversation history minus the retried reply.
@@ -7452,15 +7956,15 @@ ${content}
    * nobody answered — the turn was stopped, or the channel gave up — and there is no
    * resume. A channel that CRASHES fails the turn, as it does for a run in the page.
    */
-  async _answerDeferred(targetElement, pending, signal, rowEvents, approvedBefore = /* @__PURE__ */ new Set(), approvedNow = /* @__PURE__ */ new Set()) {
+  async _answerDeferred(targetElement, pending2, signal, rowEvents, approvedBefore = /* @__PURE__ */ new Set(), approvedNow = /* @__PURE__ */ new Set()) {
     const outcomes = {};
     const resolver = this._approvalResolverFor(targetElement, true);
     const refuseTheRest = (after) => {
-      for (const rest of pending.slice(after + 1)) {
+      for (const rest of pending2.slice(after + 1)) {
         outcomes[rest.toolCallId] = { kind: "decision", approved: false, reason: NOT_RUN_AFTER_A_REFUSAL, by: "earlier-refusal" };
       }
     };
-    for (const [index, p] of pending.entries()) {
+    for (const [index, p] of pending2.entries()) {
       if (signal.aborted) break;
       const call = { id: p.toolCallId, name: p.name, input: p.input ?? {} };
       if (p.reason === "approval") {
@@ -7620,14 +8124,14 @@ ${content}
    * @param target The chat — an element, or its id. Defaults to the one `targetResolver` names, else the first on the page.
    */
   async resumeDeferred(target) {
-    const host = typeof target === "string" ? this._byId(target) : target ?? this.options.targetResolver?.() ?? null;
-    const targetElement = host ? this._asRenderTarget(host) : this._scanForTarget();
+    const host2 = typeof target === "string" ? this._byId(target) : target ?? this.options.targetResolver?.() ?? null;
+    const targetElement = host2 ? this._asRenderTarget(host2) : this._scanForTarget();
     if (!targetElement) return false;
     const messages = targetElement.getMessages?.() ?? [];
     const last = [...messages].reverse().find((m) => m.role === "assistant");
     const open = (last?.segments ?? []).filter(isOpenDeferred);
     const ticket = open.find((s) => s.deferred?.ticket)?.deferred?.ticket;
-    if (!last || open.length === 0 || !ticket || this._resuming.has(last.id)) return false;
+    if (!last || open.length === 0 || !ticket || this._resuming.has(last.id) || this._turnsInFlight.has(last.id)) return false;
     const config = this._config.getModelConfig();
     const recorded = last.model && this._config.getAIProvider(last.model.providerId) ? last.model : void 0;
     const providerId = recorded?.providerId ?? config.defaultProvider;
@@ -7640,7 +8144,7 @@ ${content}
     this._resuming.add(last.id);
     try {
       const authConfig = provider.id ? await this._resolveAuth(provider.id) : void 0;
-      const pending = open.map((s) => ({
+      const pending2 = open.map((s) => ({
         toolCallId: s.toolCall.id,
         name: s.toolCall.name,
         input: s.toolCall.input,
@@ -7648,7 +8152,7 @@ ${content}
       }));
       const base = this._resumeBase(messages, messages.indexOf(last));
       await this._streamTurn(targetElement, last.id, provider, base, recorded?.modelId ?? config.defaultModel ?? "", authConfig, {
-        resume: { pending, ticket },
+        resume: { pending: pending2, ticket },
         ...recorded?.temperature !== void 0 ? { temperature: recorded.temperature } : {}
       });
     } finally {
@@ -8060,6 +8564,7 @@ const APARTE_DEFAULT_UI_EVENTS = [
   "aparte-message-error",
   "aparte-message-aborted",
   "aparte-message-paused",
+  "aparte-message-resumed",
   "aparte-tool-approval-request"
 ];
 function applyElementProps(el2, props, transformValue = (value) => value) {
@@ -8134,8 +8639,95 @@ function installDialogTriggersOnce(doc = document) {
   doc.addEventListener("pointerup", onPointerUp, true);
   doc.addEventListener("click", onClick);
 }
+const ATTR = "defer-hydration";
+const waiting = /* @__PURE__ */ new WeakMap();
+const holderOf = /* @__PURE__ */ new WeakMap();
+const pending = /* @__PURE__ */ new WeakSet();
+const live = /* @__PURE__ */ new WeakSet();
+const observers = /* @__PURE__ */ new WeakMap();
+const patched = /* @__PURE__ */ new WeakSet();
+function isHeld(el2) {
+  if (live.has(el2)) return false;
+  if (holderOf.has(el2)) return true;
+  const holder = el2.closest(`[${ATTR}]`);
+  if (!holder) return false;
+  holderOf.set(el2, holder);
+  let list = waiting.get(holder);
+  if (!list) {
+    list = [];
+    waiting.set(holder, list);
+    const observer = new MutationObserver(() => {
+      if (!holder.hasAttribute(ATTR)) release(holder);
+    });
+    observer.observe(holder, { attributes: true, attributeFilter: [ATTR] });
+    observers.set(holder, observer);
+  }
+  list.push(el2);
+  return true;
+}
+function release(holder) {
+  observers.get(holder)?.disconnect();
+  observers.delete(holder);
+  const list = waiting.get(holder) ?? [];
+  waiting.delete(holder);
+  for (const el2 of list) {
+    holderOf.delete(el2);
+    if (el2.isConnected && !live.has(el2)) el2.connectedCallback?.();
+  }
+}
+function releaseDeferredHydration(root) {
+  if (!root) return;
+  if (root.hasAttribute(ATTR)) root.removeAttribute(ATTR);
+  else if (!waiting.has(root)) return;
+  release(root);
+}
+function deferHydrationOf(ctor) {
+  if (patched.has(ctor)) return;
+  patched.add(ctor);
+  const proto = ctor.prototype;
+  const connected = proto.connectedCallback;
+  const changed = proto.attributeChangedCallback;
+  const disconnected = proto.disconnectedCallback;
+  const observed = ctor.observedAttributes ?? [];
+  proto.connectedCallback = function() {
+    if (isHeld(this)) {
+      pending.add(this);
+      return;
+    }
+    if (pending.has(this)) {
+      pending.delete(this);
+      for (const name of observed) {
+        const value = this.getAttribute(name);
+        if (value !== null) changed?.call(this, name, null, value);
+      }
+    }
+    live.add(this);
+    connected?.call(this);
+  };
+  if (changed) {
+    proto.attributeChangedCallback = function(name, oldValue, newValue) {
+      if (isHeld(this)) {
+        pending.add(this);
+        return;
+      }
+      changed.call(this, name, oldValue, newValue);
+    };
+  }
+  proto.disconnectedCallback = function() {
+    const holder = holderOf.get(this);
+    if (holder) {
+      holderOf.delete(this);
+      const list = waiting.get(holder);
+      if (list) list.splice(list.indexOf(this), 1);
+      return;
+    }
+    if (pending.has(this)) return;
+    live.delete(this);
+    disconnected?.call(this);
+  };
+}
 export {
-  registerSegmentRenderer as $,
+  parseMarkdownToSegments as $,
   APARTE_CONFIG_CHANGE as A,
   contextConfig as B,
   copyText as C,
@@ -8146,50 +8738,63 @@ export {
   cssEscape as H,
   declineDefaultRenderers as I,
   defaultSanitizer as J,
-  detachConfig as K,
-  escapeAttr as L,
-  escapeHtml as M,
-  filesToAttachments as N,
-  getAllRenderers as O,
-  getSegmentRenderer as P,
-  installDefaultRenderersOnce as Q,
-  installDialogTriggersOnce as R,
-  isAwaitingReply as S,
-  isFormatAdapter as T,
-  isSafeUrl as U,
-  isSegmentSettled as V,
-  parseAparteEventStream as W,
-  parseMarkdownToSegments as X,
-  populateBubbleFromMessage as Y,
-  readableToAsyncIterable as Z,
-  registerDefaultRenderers as _,
+  deferHydrationOf as K,
+  defineMountedSegmentRenderer as L,
+  defineMountedToolRenderer as M,
+  detachConfig as N,
+  escapeAttr as O,
+  escapeHtml as P,
+  filesToAttachments as Q,
+  getAllRenderers as R,
+  getSegmentRenderer as S,
+  installDefaultRenderersOnce as T,
+  installDialogTriggersOnce as U,
+  isAwaitingReply as V,
+  isFormatAdapter as W,
+  isSafeUrl as X,
+  isSegmentSettled as Y,
+  overrideSegmentRenderer as Z,
+  parseAparteEventStream as _,
   APARTE_CONVERSATION_SCHEMA_VERSION as a,
-  requestUserInput as a0,
-  resolveConfig as a1,
-  revokeAttachmentUrls as a2,
-  runWithConfig as a3,
-  segmentDuration as a4,
-  segmentTiming as a5,
-  subscribeConfigChange as a6,
-  toolRefusal as a7,
-  unregisterSegmentRenderer as a8,
-  uuid as a9,
-  eventOrigin as aa,
-  activeElementIn as ab,
-  gateGlide as ac,
-  renderingVersionOf as ad,
-  mergeSegmentUpdate as ae,
-  writeStreamedMarkdown as af,
-  stampSegmentActivity as ag,
-  stampSegmentOnInsert as ah,
-  stampSegmentOnUpdate as ai,
-  renumberSegments as aj,
-  openSegmentIds as ak,
-  isTerminalStatus as al,
-  adoptMessageSegments as am,
-  APARTE_DERIVED_SEGMENTS as an,
-  chatBoundaryOf as ao,
-  rootOf as ap,
+  populateBubbleFromMessage as a0,
+  readableToAsyncIterable as a1,
+  registerDefaultRenderers as a2,
+  registerSegmentRenderer as a3,
+  releaseDeferredHydration as a4,
+  requestUserInput as a5,
+  resolveConfig as a6,
+  revokeAttachmentUrls as a7,
+  runWithConfig as a8,
+  segmentDuration as a9,
+  conversationStatusOf as aA,
+  chatBoundaryOf as aB,
+  rootOf as aC,
+  segmentTiming as aa,
+  subscribeConfigChange as ab,
+  toToolCallView as ac,
+  toolRefusal as ad,
+  unregisterSegmentRenderer as ae,
+  uuid as af,
+  eventOrigin as ag,
+  activeElementIn as ah,
+  gateGlide as ai,
+  toolCallRenderer as aj,
+  toolRendererThatDrew as ak,
+  isMountedRenderer as al,
+  renderingVersionOf as am,
+  onRenderersChange as an,
+  mergeSegmentUpdate as ao,
+  writeStreamedMarkdown as ap,
+  stampSegmentActivity as aq,
+  stampSegmentOnInsert as ar,
+  stampSegmentOnUpdate as as,
+  renumberSegments as at,
+  openSegmentIds as au,
+  isTerminalStatus as av,
+  adoptMessageSegments as aw,
+  APARTE_DERIVED_SEGMENTS as ax,
+  rememberConversationStatus as ay,
+  tellConversationStatus as az,
   APARTE_DEFAULT_BUBBLE_ACTIONS as b,
   APARTE_DEFAULT_HOST_HANDLERS as c,
   APARTE_DEFAULT_ICON_FALLBACKS as d,
@@ -8216,4 +8821,4 @@ export {
   collectRendererStyles as y,
   contentToText as z
 };
-//# sourceMappingURL=dialog-triggers-3G9TqG9g.js.map
+//# sourceMappingURL=defer-hydration-BwMqeRHq.js.map