@aparte/core 0.24.0 → 0.26.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, ao as rememberConversationStatus, ap as tellConversationStatus, aq as conversationStatusOf, e as APARTE_DEFAULT_LOCALE, ar as chatBoundaryOf, as as rootOf, R as installDialogTriggersOnce } from "./dialog-triggers-BqXRdHWZ.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-BqXRdHWZ.js";
+import { K as deferHydrationOf, aa as resolveConfig, ak as eventOrigin, al as activeElementIn, af as subscribeConfigChange, ac as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, am as gateGlide, O as escapeAttr, an as chatBoundaryOf, ao as toolCallRenderer, ap as toolRendererThatDrew, t as aparteGlobalConfig, aq as isMountedRenderer, ar as renderingVersionOf, H as cssEscape, as as onRenderersChange, at as mergeSegmentUpdate, P as escapeHtml, $ as isSegmentSettled, au as writeStreamedMarkdown, _ as isSafeUrl, C as copyText, U as getSegmentRenderer, W as installDefaultRenderersOnce, r as AparteMessageRepository, av as CheckpointStateWatcher, aw as chatIdOf, ax as stampSegmentActivity, ay as stampSegmentOnInsert, az as stampSegmentOnUpdate, aA as renumberSegments, aB as openSegmentIds, aC as isTerminalStatus, aD as adoptMessageSegments, Y as isAwaitingReply, a4 as populateBubbleFromMessage, aj as uuid, ab as revokeAttachmentUrls, a3 as parseMarkdownToSegments, aE as APARTE_DERIVED_SEGMENTS, aF as rememberConversationStatus, aG as tellConversationStatus, aH as conversationStatusOf, e as APARTE_DEFAULT_LOCALE, aI as usageTokens, q as AparteErrorCode, a0 as measureContext, aJ as rootOf, X as installDialogTriggersOnce } from "./defer-hydration-8vI8xNNx.js";
+import { A, a, b, c, d, f, g, h, i, j, k, l, m, n, p, s, u, v, y, z, B, D, E, F, G, I, J, L, M, N, Q, R, S, T, V, Z, a1, a2, a5, a6, a7, a8, a9, ad, ae, ag, ah, ai } from "./defer-hydration-8vI8xNNx.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,9 +1303,100 @@ class AparteChat extends HTMLElement {
     this.toggleAttribute("data-empty", !viewport || isTranscriptEmpty(viewport));
   }
 }
+deferHydrationOf(AparteChat);
 if (!customElements.get("aparte-chat")) {
   customElements.define("aparte-chat", AparteChat);
 }
+const isStore = (candidate) => !!candidate && typeof candidate.getMessages === "function" && typeof candidate.updateMessage === "function";
+function storeOf(from) {
+  const boundary = chatBoundaryOf(from);
+  if (isStore(boundary)) return boundary;
+  const viewport = from.closest("aparte-chat-viewport");
+  return isStore(viewport) ? viewport : null;
+}
+function restoreContext(from, detail) {
+  const store = storeOf(from);
+  if (!store) return 0;
+  const carrying = store.getMessages().filter((m2) => m2.contextSummary !== void 0).map((m2) => m2.id);
+  for (const id of carrying) store.updateMessage(id, { contextSummary: void 0 });
+  const done = { restored: true };
+  if (detail.messageId) done.messageId = detail.messageId;
+  if (detail.targetId) done.targetId = detail.targetId;
+  window.dispatchEvent(new CustomEvent("aparte-compact-done", { detail: done }));
+  return carrying.length;
+}
+function el$1(tag, className, text) {
+  const node = document.createElement(tag);
+  node.className = className;
+  if (text !== void 0) node.textContent = text;
+  return node;
+}
+function action(name, label) {
+  const button = el$1("button", "aparte-btn aparte-btn--ghost aparte-btn--sm aparte-checkpoint__action", label);
+  button.type = "button";
+  button.setAttribute("data-checkpoint-action", name);
+  return button;
+}
+function buildCheckpointSeparator(options) {
+  const { kind, locale } = options;
+  const root = el$1("div", "aparte-checkpoint");
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", locale.checkpointGroup ?? "Context summary");
+  root.setAttribute("data-state", kind);
+  const row = el$1("div", "aparte-checkpoint__row aparte-divider aparte-divider--label");
+  const label = el$1("div", "aparte-checkpoint__label");
+  row.appendChild(label);
+  root.appendChild(row);
+  let sentence;
+  if (kind === "done") {
+    const n2 = options.count ?? 0;
+    sentence = n2 === 1 ? locale.checkpointCountOne ?? "1 message summarised for the model" : (locale.checkpointCount ?? "{n} messages summarised for the model").replace("{n}", () => String(n2));
+  } else if (kind === "legacy") {
+    sentence = locale.checkpointLegacy ?? "Earlier messages were summarised";
+  } else if (kind === "pending") {
+    sentence = locale.checkpointPending ?? "Summarising the context…";
+  } else {
+    sentence = locale.checkpointFailed ?? "Couldn't summarise the context";
+  }
+  const text = el$1("span", "aparte-checkpoint__text", sentence);
+  if (kind === "pending") {
+    text.classList.add("aparte-shimmer");
+    text.setAttribute("role", "status");
+  } else if (kind === "failed") {
+    text.setAttribute("role", "status");
+    if (options.reason) {
+      text.title = options.reason;
+      text.appendChild(el$1("span", "aparte-sr-only", `: ${options.reason}`));
+    }
+  }
+  label.appendChild(text);
+  if (kind === "done" || kind === "legacy") {
+    if (options.confirming && kind === "done") {
+      const confirm = el$1("span", "aparte-checkpoint__confirm");
+      const question = el$1("span", "aparte-checkpoint__question", locale.checkpointRestoreConfirm ?? "Send the original messages to the model again?");
+      question.id = `${options.summaryId}-question`;
+      const yes = action("restore-confirm", locale.checkpointRestore ?? "Restore");
+      yes.setAttribute("aria-describedby", question.id);
+      confirm.append(question, yes, action("restore-cancel", locale.cancel ?? "Cancel"));
+      label.appendChild(confirm);
+    } else {
+      const toggle = action("toggle", options.open ? locale.checkpointHide ?? "Hide summary" : locale.checkpointShow ?? "Show summary");
+      toggle.setAttribute("aria-expanded", String(options.open));
+      toggle.setAttribute("aria-controls", options.summaryId);
+      label.appendChild(toggle);
+      if (kind === "done") label.appendChild(action("restore", locale.checkpointRestore ?? "Restore"));
+    }
+  } else if (kind === "failed") {
+    label.appendChild(action("retry", locale.retry ?? "Retry"));
+  }
+  if (kind === "done" || kind === "legacy") {
+    const panel = el$1("div", "aparte-checkpoint__summary aparte-segment-content");
+    panel.id = options.summaryId;
+    if (!options.open) panel.hidden = true;
+    root.appendChild(panel);
+  }
+  return root;
+}
 let _warnedNoRenderer = false;
 function warnMissingRenderer(type) {
   if (_warnedNoRenderer) return;
@@ -1342,6 +1439,7 @@ function flushAvatarMarks() {
   });
   batch.forEach(([avatar], i2) => avatar.toggleAttribute("data-image", shown[i2]));
 }
+let checkpointIds = 0;
 class AparteChatBubble extends HTMLElement {
   _contentEl = null;
   _segmentsEl = null;
@@ -1355,6 +1453,23 @@ class AparteChatBubble extends HTMLElement {
   _role = "assistant";
   _attachments = [];
   _usage = null;
+  _finishReason = null;
+  /** The checkpoint this message carries: the separator above it is drawn from it. */
+  _contextSummary = null;
+  /**
+   * This message is one an older compaction wrote (`compaction: true`), as the host told
+   * us. `null` until told: the `data-kind="compaction"` attribute the viewport and the
+   * wrappers stamp from the same flag answers meanwhile.
+   */
+  _legacyCompaction = null;
+  /** The summary panel under the separator is open. Kept here, not in the DOM, because a redraw rebuilds the DOM. */
+  _checkpointOpen = false;
+  /** Restore asked for confirmation and has not been answered. */
+  _confirmingRestore = false;
+  /** What the separator was last drawn from, so a re-sync that changes nothing leaves it (and a focused button) alone. */
+  _checkpointDrawn = "";
+  /** Names the separator's panel for `aria-controls`, unique on the page without needing a message id. */
+  _checkpointId = `aparte-checkpoint-${++checkpointIds}`;
   /** Cleanup returned by the avatar provider — called on disconnect/re-render. */
   _avatarCleanup = null;
   /** Whether the avatar slot holds what a provider drew, which goes when the provider does. */
@@ -1384,7 +1499,7 @@ class AparteChatBubble extends HTMLElement {
    */
   _editReturnAction = null;
   static get observedAttributes() {
-    return ["data-role", "content", "timestamp", "message-id", "streaming", "name"];
+    return ["data-role", "content", "timestamp", "message-id", "streaming", "name", "data-checkpoint", "data-checkpoint-reason"];
   }
   constructor() {
     super();
@@ -1399,7 +1514,11 @@ class AparteChatBubble extends HTMLElement {
     this._updateName();
     this._updateLocalizedLabels();
     this._updateWaiting();
+    this._updateFinishNote();
+    this._checkpointDrawn = "";
+    this._updateCheckpoint();
     this._renderAvatar();
+    this._redrawSegmentsWhoseRendererChanged();
     this._relabelSegments();
     this._updateTimestamp(this.getAttribute("timestamp"));
     if (!this._redrawQueued) {
@@ -1414,16 +1533,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,9 +1736,16 @@ 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);
+    this.addEventListener("click", this._onCheckpointClick);
+    this.addEventListener("keydown", this._onCheckpointKeydown);
   }
   /**
    * The boundary above this bubble changed — under every wrapper the chat's own config is
@@ -1499,7 +1760,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 +1776,7 @@ class AparteChatBubble extends HTMLElement {
       this._avatarCleanup = null;
     }
     this._resetMarkdownStream();
+    this._releaseAll();
     this.replaceChildren();
     this._render();
     this._updateContent();
@@ -1519,11 +1784,16 @@ class AparteChatBubble extends HTMLElement {
     this._updateAttachments();
     this._updateTimestamp(this.getAttribute("timestamp"));
     this._updateBranchPicker();
+    this._updateCheckpoint();
   }
   disconnectedCallback() {
     window.removeEventListener("aparte-config-change", this._onConfigChange);
+    this._offRenderers?.();
+    this._offRenderers = null;
     this.removeEventListener("click", this._onBranchPickerClick);
     this.removeEventListener("click", this._onLinkClick);
+    this.removeEventListener("click", this._onCheckpointClick);
+    this.removeEventListener("keydown", this._onCheckpointKeydown);
     if (this._avatarCleanup) {
       try {
         this._avatarCleanup();
@@ -1531,6 +1801,7 @@ class AparteChatBubble extends HTMLElement {
       }
       this._avatarCleanup = null;
     }
+    this._scheduleReleaseCheck();
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
@@ -1549,6 +1820,12 @@ class AparteChatBubble extends HTMLElement {
       case "timestamp":
         this._updateTimestamp(newValue);
         break;
+      case "data-checkpoint":
+        this._updateCheckpoint();
+        break;
+      case "data-checkpoint-reason":
+        if (this.getAttribute("data-checkpoint") === "failed") this._updateCheckpoint();
+        break;
       case "streaming":
         this._updateStreaming(newValue !== null && newValue !== "false");
         break;
@@ -1591,10 +1868,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 +1950,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();
@@ -1669,6 +1975,38 @@ class AparteChatBubble extends HTMLElement {
     this._usage = usage ?? null;
     this._updateActionBar();
   }
+  /**
+   * Say why the model stopped writing this reply (assistant only).
+   *
+   * Only `'length'` draws anything: a quiet note after the content that the reply was cut
+   * off, because otherwise a truncated answer reads as a finished one. Every other reason
+   * is the ordinary end of a turn and says nothing. The note waits for the turn to settle.
+   */
+  setFinishReason(reason) {
+    this._finishReason = reason ?? null;
+    this._updateFinishNote();
+  }
+  /**
+   * Say that the messages before this one were summarised for the model, or that they no
+   * longer are (`null`).
+   *
+   * Draws, or removes, the separator above the message: "{n} messages summarised for the
+   * model", with Show summary and Restore. The separator sits OUTSIDE `.aparte-message`
+   * and inside this element, so it is not part of the message's frame and survives the
+   * frame being drawn again. `legacy: true` says the message is itself the summary an
+   * older compaction wrote (`compaction: true`): it is replaced by the separator, which
+   * then has no count and no Restore. Omit `legacy` to leave what the host last said (or
+   * the `data-kind="compaction"` attribute) in force.
+   */
+  setContextSummary(summary, options) {
+    this._contextSummary = summary ?? null;
+    if (options?.legacy !== void 0) this._legacyCompaction = options.legacy;
+    if (!this._contextSummary) {
+      this._confirmingRestore = false;
+      if (!this._isLegacyCompaction()) this._checkpointOpen = false;
+    }
+    this._updateCheckpoint();
+  }
   /**
    * Update the branch picker UI for tree-based navigation.
    * The viewport calls this after a branch switch or re-render.
@@ -1693,8 +2031,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);
@@ -1708,7 +2045,170 @@ class AparteChatBubble extends HTMLElement {
       this._updateAttachments();
       this._updateWaiting();
     }
+    if ("finishReason" in updates) this.setFinishReason(updates.finishReason);
+    if ("contextSummary" in updates || "compaction" in updates) {
+      this.setContextSummary(
+        "contextSummary" in updates ? updates.contextSummary : this._contextSummary,
+        "compaction" in updates ? { legacy: updates.compaction === true } : void 0
+      );
+    }
+  }
+  /**
+   * Draw, or remove, the note under a reply cut off at the model's length limit.
+   *
+   * Created here rather than in the shell markup: a custom shell written from the contract
+   * has no such region, and the note is only ever wanted next to the content it qualifies.
+   * A shell with no content region simply shows none (the same null-guarded degradation as
+   * the other regions).
+   */
+  _updateFinishNote() {
+    const show = this._finishReason === "length" && !this._streaming && this._role !== "user";
+    let note = this.querySelector(".aparte-finish-note");
+    if (!show) {
+      note?.remove();
+      return;
+    }
+    if (!note) {
+      const region = this.querySelector(".aparte-message-content");
+      if (!region) return;
+      note = document.createElement("div");
+      note.className = "aparte-finish-note";
+      region.after(note);
+    }
+    note.textContent = this._cfg.getLocale().responseCutOff ?? "Cut off at the model's length limit.";
+  }
+  /** This message was written by an older compaction, as the host said or as its `data-kind` stamp says. */
+  _isLegacyCompaction() {
+    return this._legacyCompaction ?? this.getAttribute("data-kind") === "compaction";
+  }
+  /**
+   * What the separator should say, or `null` for none. A compaction in progress or
+   * failed outranks what the message already carries: it is what is happening now.
+   */
+  _checkpointKind() {
+    const run = this.getAttribute("data-checkpoint");
+    if (run === "pending" || run === "failed") return run;
+    if (this._contextSummary) return "done";
+    return this._isLegacyCompaction() ? "legacy" : null;
+  }
+  /** The text the summary panel shows: the checkpoint's summary, or the older compaction message itself. */
+  _checkpointSummaryText() {
+    return this._contextSummary ? this._contextSummary.summary : this._content;
   }
+  /**
+   * Draw the separator above the message, or take it off.
+   *
+   * Written into the light DOM as the FIRST child of the bubble, outside `.aparte-message`:
+   * a custom shell roots at that class and is free to be anything, and the separator is not
+   * its to carry. Drawn from `_render` (so every frame gets it) and from every setter that
+   * changes what it says. A re-sync that changes nothing — the framework host calls this on
+   * every render of every bubble — finds the same signature and the element in place and
+   * leaves both alone, so a keyboard user's focus and a scrolled summary are not lost to a
+   * rebuild; one that does change something rebuilds it and puts the focus back on the
+   * button that had it (or on `focus`, which a click that swaps the buttons names).
+   *
+   * A message an older compaction wrote is marked `data-superseded` on its own row: it
+   * stays in the DOM and does not paint (bubble.css), the separator speaking for it.
+   */
+  _updateCheckpoint(focus) {
+    const frame = this.querySelector(".aparte-message");
+    if (!frame) return;
+    const kind = this._checkpointKind();
+    frame.toggleAttribute("data-superseded", this._isLegacyCompaction() && !this._contextSummary);
+    const current = this.querySelector(":scope > .aparte-checkpoint");
+    if (!kind) {
+      const holdsFocus = current && document.activeElement && current.contains(document.activeElement);
+      current?.remove();
+      this._checkpointDrawn = "";
+      if (holdsFocus) {
+        if (!frame.hasAttribute("tabindex")) frame.setAttribute("tabindex", "-1");
+        frame.focus({ preventScroll: true });
+      }
+      return;
+    }
+    const reason = this.getAttribute("data-checkpoint-reason") ?? "";
+    const summary = this._checkpointSummaryText();
+    const signature = JSON.stringify([
+      kind,
+      this._contextSummary?.count,
+      this._contextSummary?.createdAt,
+      reason,
+      this._checkpointOpen,
+      this._confirmingRestore,
+      this._checkpointOpen ? summary : ""
+    ]);
+    if (current && !focus && signature === this._checkpointDrawn) return;
+    const active = document.activeElement;
+    const hadFocus = current && active && current.contains(active) ? active.getAttribute("data-checkpoint-action") : null;
+    const next = buildCheckpointSeparator({
+      kind,
+      count: this._contextSummary?.count,
+      reason,
+      open: this._checkpointOpen,
+      confirming: this._confirmingRestore,
+      summaryId: this._checkpointId,
+      locale: this._cfg.getLocale()
+    });
+    if (this._checkpointOpen && (kind === "done" || kind === "legacy")) {
+      const panel = next.querySelector(".aparte-checkpoint__summary");
+      if (panel) panel.innerHTML = this._cfg.renderMarkdown(summary);
+    }
+    if (current) current.replaceWith(next);
+    else this.prepend(next);
+    this._checkpointDrawn = signature;
+    const wanted = focus ?? hadFocus;
+    if (wanted) next.querySelector(`[data-checkpoint-action="${cssEscape(wanted)}"]`)?.focus();
+  }
+  /**
+   * The separator's buttons. One delegated listener on the bubble, for the reason the branch
+   * picker has one: the separator is rebuilt on every change, and a listener per button would
+   * be lost with it.
+   */
+  _onCheckpointClick = (event) => {
+    const button = event.target?.closest?.("[data-checkpoint-action]");
+    const separator = button?.closest(".aparte-checkpoint");
+    if (!button || !separator || separator.parentElement !== this) return;
+    switch (button.getAttribute("data-checkpoint-action")) {
+      case "toggle":
+        this._checkpointOpen = !this._checkpointOpen;
+        this._updateCheckpoint("toggle");
+        break;
+      case "restore":
+        this._confirmingRestore = true;
+        this._updateCheckpoint("restore-confirm");
+        break;
+      case "restore-cancel":
+        this._confirmingRestore = false;
+        this._updateCheckpoint("restore");
+        break;
+      case "restore-confirm": {
+        this._confirmingRestore = false;
+        const messageId = this.getAttribute("message-id") ?? void 0;
+        restoreContext(this, { messageId, targetId: this._resolveTargetId() });
+        this.setContextSummary(null);
+        break;
+      }
+      case "retry": {
+        const targetId = this._resolveTargetId();
+        const compactor = this._cfg.getCompactor();
+        if (compactor) {
+          void compactor.compact({ target: chatBoundaryOf(this), ...targetId ? { targetId } : {}, force: true, reason: "retry" });
+        } else {
+          window.dispatchEvent(new CustomEvent("aparte-compact", { detail: { targetId } }));
+        }
+        break;
+      }
+    }
+  };
+  /** Escape withdraws Restore's question, the way it closes every other inline prompt here. */
+  _onCheckpointKeydown = (event) => {
+    if (event.key !== "Escape" || !this._confirmingRestore) return;
+    const separator = event.target?.closest?.(".aparte-checkpoint");
+    if (!separator || separator.parentElement !== this) return;
+    event.stopPropagation();
+    this._confirmingRestore = false;
+    this._updateCheckpoint("restore");
+  };
   // ─────────────────────────────────────────────────────────────────────────
   // Private Methods
   // ─────────────────────────────────────────────────────────────────────────
@@ -1723,10 +2223,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 +2239,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) {
@@ -1869,6 +2388,8 @@ class AparteChatBubble extends HTMLElement {
     this._renderAvatar();
     if (this._streaming) this._updateStreaming(true);
     this._updateWaiting();
+    this._updateFinishNote();
+    this._updateCheckpoint();
   }
   /**
    * Show the built-in waiting indicator while this bubble is in flight and has
@@ -2025,6 +2546,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 +2554,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 +2621,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 a3 of this._attachments) {
+        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a3)));
         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((a3) => {
+      const name = escapeHtml(a3.name);
+      if (a3.type.startsWith("image/") && this._isShowableUrl(a3.url)) {
+        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumbnail__image" src="${escapeHtml(a3.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(a3.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) => {
@@ -2264,7 +2788,7 @@ class AparteChatBubble extends HTMLElement {
   /**
    * What the copy action copies: the reply, not the reasoning. A `thinking` segment is
    * the model's scratchpad, and the client already keeps it out of the history it sends
-   * back (`_segmentsToText`) for the same reason — copying it along with the answer
+   * back (`segmentsToWireText`) for the same reason — copying it along with the answer
    * pasted a paragraph of deliberation above every reply, which no assistant on the
    * market does. Segments with no `content` (a tool call) contribute nothing, so a
    * turn made only of those copies as `''` — and the action bar reads this to decide
@@ -2294,14 +2818,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 a3 of config.user) buttons.push(this._actionButtonHtml(a3, 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 a3 of config.assistant) buttons.push(this._actionButtonHtml(a3, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.retry) buttons.push(this._actionButtonHtml("retry", icons, locale));
@@ -2397,22 +2921,22 @@ 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 a3 of this._cfg.getActions("bubble")) {
+      const roles = a3.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:${a3.id}`;
+      btn.setAttribute("aria-label", a3.label);
+      btn.setAttribute("title", a3.label);
+      btn.innerHTML = a3.icon.startsWith("<") ? a3.icon : this._cfg.getIcon(a3.icon) ?? a3.iconFallback ?? "";
       this._actionBarEl.appendChild(btn);
     }
   }
   /** Build the `<button>` HTML for a single named action (shared by flag + per-role rendering). */
-  _actionButtonHtml(action, icons, locale) {
-    switch (action) {
+  _actionButtonHtml(action2, icons, locale) {
+    switch (action2) {
       case "copy": {
         const l2 = locale.copy ?? "Copy";
         return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.copy()}</button>`;
@@ -2456,10 +2980,10 @@ class AparteChatBubble extends HTMLElement {
   }
   _handleActionClick(e) {
     const btn = e.currentTarget;
-    const action = btn.dataset["action"];
+    const action2 = btn.dataset["action"];
     const messageId = this.getAttribute("message-id");
-    if (action?.startsWith("custom:") && messageId) {
-      const actionId = action.slice("custom:".length);
+    if (action2?.startsWith("custom:") && messageId) {
+      const actionId = action2.slice("custom:".length);
       const detail = {
         actionId,
         zone: "bubble",
@@ -2475,7 +2999,7 @@ class AparteChatBubble extends HTMLElement {
       this._cfg.getActions("bubble").find((x) => x.id === actionId)?.onClick?.(e);
       return;
     }
-    switch (action) {
+    switch (action2) {
       case "copy": {
         const text = this._copyableText();
         const icons = this._cfg.getIconProvider();
@@ -2524,7 +3048,7 @@ class AparteChatBubble extends HTMLElement {
       case "feedback-positive":
       case "feedback-negative": {
         if (!messageId) break;
-        const value = action === "feedback-positive" ? "positive" : "negative";
+        const value = action2 === "feedback-positive" ? "positive" : "negative";
         btn.setAttribute("data-submitted", "");
         const detail = { messageId, value };
         this.dispatchEvent(new CustomEvent("aparte-feedback", {
@@ -2652,12 +3176,12 @@ class AparteChatBubble extends HTMLElement {
       }
     }
     this._updateWaiting();
+    this._updateFinishNote();
     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 +3355,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);
 }
@@ -2946,6 +3471,13 @@ class AparteChatViewport extends HTMLElement {
   /** Last `--aparte-transcript-inset` written on the host, in px — same write-on-change rule. */
   _transcriptInset = -1;
   _boundResetHandler = null;
+  /**
+   * Marks the bubble a compaction is writing its checkpoint onto (`data-checkpoint`). The
+   * vanilla viewport's job: under a wrapper the transcript is the framework's, and the
+   * host answers for it instead (`active` below).
+   */
+  _checkpointState = null;
+  _stopCheckpointState = null;
   /**
    * When true, _reRenderActivePath() only dispatches aparte-path-changed without
    * touching the DOM. Set via setFrameworkManagedDOM(true) when a framework
@@ -3015,6 +3547,16 @@ class AparteChatViewport extends HTMLElement {
     this._boundResetHandler = () => this.clearAll();
     window.addEventListener("aparte-reset", this._boundResetHandler);
     window.addEventListener("aparte-config-change", this._onConfigChange);
+    this._checkpointState ??= new CheckpointStateWatcher({
+      // A bare `<aparte-chat-viewport id="…">` with no named host around it is its own
+      // chat: the client names its events with that id (`_targetIdOf` falls back to the
+      // element's own), so the watcher answers to it too, or every event is someone else's.
+      ownId: () => chatIdOf(this) ?? (this.id || void 0),
+      bubbleOf: (id) => this.querySelector(`aparte-chat-bubble[message-id="${cssEscape(id)}"]`),
+      owns: (id) => !!this.getMessage(id),
+      active: () => !this._frameworkManagedDOM
+    });
+    this._stopCheckpointState ??= this._checkpointState.start();
   }
   /**
    * A locale switch changes the reading direction, and `dir` follows it, so a chat
@@ -3071,6 +3613,8 @@ class AparteChatViewport extends HTMLElement {
       window.removeEventListener("aparte-reset", this._boundResetHandler);
       this._boundResetHandler = null;
     }
+    this._stopCheckpointState?.();
+    this._stopCheckpointState = null;
     this._cleanup();
   }
   attributeChangedCallback(name, oldValue, newValue) {
@@ -3243,10 +3787,10 @@ class AparteChatViewport extends HTMLElement {
     this._notifyBubble(messageId, "addSegment", stamped);
     this._autoScroll();
   }
-  updateSegment(a2, b2, c2) {
+  updateSegment(a3, 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() : a3;
+    const segmentId = clientForm ? a3 : b2;
     const updates = clientForm ? b2 : c2;
     if (!messageId) return;
     const message = this._repo.getMessageById(messageId);
@@ -3259,10 +3803,10 @@ class AparteChatViewport extends HTMLElement {
       this._notifyBubble(messageId, "updateSegment", { segmentId, updates: stamped });
     }
   }
-  removeSegment(a2, b2) {
+  removeSegment(a3, b2) {
     const clientForm = b2 === void 0;
-    const messageId = clientForm ? this._activeMessageId() : a2;
-    const segmentId = clientForm ? a2 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a3;
+    const segmentId = clientForm ? a3 : b2;
     if (!messageId || !segmentId) return;
     const message = this._repo.getMessageById(messageId);
     if (message?.segments) {
@@ -3613,6 +4157,7 @@ class AparteChatViewport extends HTMLElement {
     this._setSpacerHeight(0);
     this._isAutoScrollEnabled = true;
     this._updateScrollButton();
+    this._checkpointState?.clear();
     this.dispatchEvent(new CustomEvent("aparte-reset-done", { bubbles: true, composed: true }));
   }
   /**
@@ -3688,12 +4233,12 @@ class AparteChatViewport extends HTMLElement {
     this._repo.addOrUpdateMessage(this._repo.headId, message);
     return message;
   }
-  _notifyBubble(messageId, action, payload, segmentId) {
+  _notifyBubble(messageId, action2, payload, segmentId) {
     const bubble = this.querySelector(
       `aparte-chat-bubble[message-id="${cssEscape(messageId)}"], [data-aparte-bubble][message-id="${cssEscape(messageId)}"]`
     );
     if (!bubble) return;
-    switch (action) {
+    switch (action2) {
       case "appendToken":
         bubble.appendToken?.(payload);
         break;
@@ -3716,7 +4261,7 @@ class AparteChatViewport extends HTMLElement {
         break;
       case "update": {
         const updates = payload;
-        const renderable = ["status", "segments", "content", "attachments", "usage"];
+        const renderable = ["status", "segments", "content", "attachments", "usage", "finishReason", "contextSummary", "compaction"];
         if (renderable.some((key) => key in updates)) {
           bubble.updateMessage?.(payload);
         }
@@ -3767,6 +4312,7 @@ class AparteChatViewport extends HTMLElement {
     }
     this._dispatchPathChanged(activeMessages, siblingsInfo);
     this._syncBusy();
+    this._checkpointState?.reapply();
     this._recalculateSpacer();
   }
   _dispatchPathChanged(messages, siblings) {
@@ -4399,6 +4945,7 @@ class AparteChatViewport extends HTMLElement {
     this._settleUntil = 0;
   }
 }
+deferHydrationOf(AparteChatViewport);
 if (!customElements.get("aparte-chat-viewport")) {
   customElements.define("aparte-chat-viewport", AparteChatViewport);
 }
@@ -4905,6 +5452,7 @@ class AparteComposer extends HTMLElement {
     if (this._panelActive) this._evictPanel();
   }
 }
+deferHydrationOf(AparteComposer);
 if (!customElements.get("aparte-composer")) {
   customElements.define("aparte-composer", AparteComposer);
 }
@@ -5152,6 +5700,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 +5862,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 +5931,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 +6017,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 +6144,7 @@ class AparteComposerAddAttachment extends HTMLElement {
     };
   }
 }
+deferHydrationOf(AparteComposerAddAttachment);
 if (!customElements.get("aparte-composer-add-attachment")) {
   customElements.define("aparte-composer-add-attachment", AparteComposerAddAttachment);
 }
@@ -5674,6 +6227,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 +6266,7 @@ class AparteComposerToolbar extends HTMLElement {
     else this.setAttribute("data-empty", "");
   }
 }
+deferHydrationOf(AparteComposerToolbar);
 if (!customElements.get("aparte-composer-toolbar")) {
   customElements.define("aparte-composer-toolbar", AparteComposerToolbar);
 }
@@ -6053,7 +6608,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((a3, b2) => b2.localeCompare(a3)).map((k2) => buckets.get(k2));
     const undated = buckets.get("undated");
     return [...fixed, ...months, ...undated ? [undated] : []];
   }
@@ -6251,7 +6806,7 @@ class AparteConversationList extends HTMLElement {
       console.warn("[aparte-conversation-list] the conversation manager refused the change:", err);
     });
   }
-  _onMenuAction(action) {
+  _onMenuAction(action2) {
     const open = this._open;
     if (!open) return;
     const conv = this._conversations.find((c2) => c2.id === open.id);
@@ -6260,7 +6815,7 @@ class AparteConversationList extends HTMLElement {
       return;
     }
     const id = conv.id;
-    switch (action) {
+    switch (action2) {
       case "rename":
         this._closeMenu();
         this._startRename(open.row, conv);
@@ -6472,6 +7027,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) => {
@@ -6699,6 +7255,7 @@ class AparteSuggestions extends HTMLElement {
     }
   }
 }
+deferHydrationOf(AparteSuggestions);
 if (!customElements.get("aparte-suggestions")) {
   customElements.define("aparte-suggestions", AparteSuggestions);
 }
@@ -6706,9 +7263,14 @@ const fraction = (raw, fallback) => {
   const n2 = Number(raw);
   return raw !== null && Number.isFinite(n2) && n2 > 0 && n2 <= 1 ? n2 : fallback;
 };
-const el = (tag, className) => {
+const hostIdOf = (target) => {
+  const node = target instanceof Element ? target.closest("aparte-chat, [data-aparte-chat]") : null;
+  return node?.id || void 0;
+};
+const el = (tag, className, text) => {
   const node = document.createElement(tag);
   node.className = className;
+  if (text !== void 0) node.textContent = text;
   return node;
 };
 const SVG_NS = "http://www.w3.org/2000/svg";
@@ -6727,33 +7289,129 @@ const ringSvg = () => {
   }
   return svg;
 };
+const readsMessages = (candidate) => !!candidate && typeof candidate.getMessages === "function";
+const transcriptOf = (chat) => {
+  if (!chat) return null;
+  if (readsMessages(chat)) return chat;
+  const viewport = chat.viewport ?? chat.querySelector("aparte-chat-viewport");
+  return readsMessages(viewport) ? viewport : null;
+};
+let panelSeq = 0;
+const NO_PARTS = { system: 0, tools: 0, summary: 0, messages: 0 };
 class AparteContext extends HTMLElement {
   static get observedAttributes() {
     return ["window", "warn", "danger", "target", "variant", "used"];
   }
+  /**
+   * A reading with no transcript behind it: the `used` attribute's seed, or a turn's usage
+   * when the chat's list cannot be read from here (a gauge placed far from its chat, a test).
+   * When the list can be read, the measure comes from it and this is only the fallback.
+   */
   _used = null;
   _level = null;
   _compactRequested = false;
+  /** The last turn's usage and the reply it belongs to, so the measure has it before the list has written it back. */
+  _lastDone = null;
+  /** What the model reads changed with nothing on the path to say so (a Restore): the reading is an estimate until the next turn reports. */
+  _viewChanged = false;
+  /** A conversation was replaced and nothing has reported or loaded since: the list on screen is not read yet. */
+  _blank = false;
+  /** The model refused a request as over its window; the level is `danger` until something changes. */
+  _overflow = false;
+  _compact = null;
+  _failure = "";
+  _open = false;
+  /** The reading drawn last, so the `used` getter and the panel read what is on screen. */
+  _measured = null;
+  /** The chat an event last came from, for a gauge that is neither under its chat nor names it with `target`. */
+  _seen = null;
+  /** What the panel was last built from: a render that changes nothing leaves its nodes, and the focus in them, alone. */
+  _panelSignature = "";
+  _remember(target) {
+    const chat = target instanceof Element ? chatBoundaryOf(target) : null;
+    if (chat) this._seen = chat;
+  }
   _onDone = (e) => {
     const detail = e.detail;
     if (!detail?.usage || !this._isMine(detail.targetId)) return;
-    const { usage } = detail;
-    this._used = usage.totalTokens ?? usage.inputTokens + usage.outputTokens;
+    this._remember(e.target);
+    this._used = usageTokens(detail.usage);
+    this._lastDone = { messageId: detail.messageId, usage: detail.usage };
+    this._viewChanged = false;
+    this._blank = false;
+    this._overflow = false;
+    this._render(true);
+  };
+  /**
+   * A conversation is replaced — a new chat, or one loaded in place of the last — and the
+   * previous reading is not this one's. The viewport says so with `aparte-reset-done` (no
+   * detail: the chat is found from where the event came from). A load clears first and
+   * `aparte-conversation-loaded` follows, so the reading is dropped here and read again
+   * there. Until then the chat's list is not trusted: a framework's may not have caught up.
+   */
+  _onReset = (e) => {
+    if (!this._isMine(hostIdOf(e.target))) return;
+    this._remember(e.target);
+    this._used = null;
+    this._lastDone = null;
+    this._viewChanged = false;
+    this._overflow = false;
+    this._compact = null;
+    this._blank = true;
     this._render();
   };
   /**
-   * After a real compaction the context is smaller by an amount nobody has measured
-   * yet — the next turn's usage will say. Until then the gauge shows nothing rather
-   * than a number it knows to be wrong. The event names the chat it compacted, so on a
-   * multi-chat page only that chat's gauge resets; an unnamed one resets every gauge,
-   * and each is right again one turn later.
+   * The messages of a stored conversation are on screen: the reading is the last reply's
+   * usage — what a turn would have reported had it just ended. A transcript with none
+   * (an empty one, a conversation saved before usage was kept) shows nothing, the same as
+   * a chat that has not spoken yet.
+   */
+  _onLoaded = (e) => {
+    const detail = e.detail;
+    if (!this._isMine(detail?.targetId)) return;
+    this._remember(e.target);
+    this._blank = false;
+    this._lastDone = null;
+    this._viewChanged = false;
+    this._overflow = false;
+    this._compact = null;
+    const host = e.target;
+    const messages = host?.getMessages?.() ?? [];
+    const last = [...messages].reverse().find((m2) => m2.role === "assistant" && m2.usage);
+    this._used = last?.usage ? usageTokens(last.usage) : null;
+    this._render();
+  };
+  /** A compaction began for this chat: say so on the element and in the panel. */
+  _onCompactStart = (e) => {
+    const detail = e.detail;
+    if (!this._isMine(detail?.targetId)) return;
+    this._compact = "running";
+    this._failure = "";
+    this._render();
+  };
+  /**
+   * After a real compaction — or a Restore — what the model reads is a different size by an
+   * amount nobody has measured yet, and the last reply's reported usage describes the request
+   * from before. The gauge measures the request that would be sent now and says so with `~`,
+   * rather than keeping a number it knows to be wrong or going blank until the next turn. The
+   * event names the chat it compacted, so on a multi-chat page only that chat's gauge
+   * moves; an unnamed one moves every gauge.
+   *
+   * Without a transcript to measure (a gauge that cannot read its chat's list) there is
+   * nothing to estimate from, and the reading is dropped as it always was.
    */
   _onCompacted = (e) => {
     const detail = e.detail;
     if (!this._isMine(detail?.targetId)) return;
     this._compactRequested = false;
-    if (detail?.skipped) return;
-    this._used = null;
+    this._compact = null;
+    if (detail?.skipped) {
+      this._render();
+      return;
+    }
+    this._viewChanged = true;
+    this._overflow = false;
+    if (!this._messages()) this._used = null;
     this._render();
   };
   /** A failed compaction spends the request too; the next `danger` asks again. */
@@ -6761,11 +7419,23 @@ class AparteContext extends HTMLElement {
     const detail = e.detail;
     if (!this._isMine(detail?.targetId)) return;
     this._compactRequested = false;
+    this._compact = detail?.aborted ? null : "failed";
+    this._failure = detail?.aborted ? "" : typeof detail?.error === "string" ? detail.error : "";
+    this._render();
+  };
+  /** The model refused this chat's request as over its window: the number was wrong, and so is "ok". */
+  _onMessageError = (e) => {
+    const detail = e.detail;
+    if (!this._isMine(detail?.targetId)) return;
+    if (detail?.error?.code !== AparteErrorCode.USAGE_CONTEXT_EXCEEDED) return;
+    this._remember(e.target);
+    this._overflow = true;
+    this._render();
   };
   _onRerender = () => this._render();
-  /** Tokens the last turn reported — or `used` set, until a turn reports — else `null`. */
+  /** Tokens in use — what is drawn — else the last reported or seeded reading, else `null`. */
   get used() {
-    return this._used;
+    return this._measured?.used ?? this._used;
   }
   /**
    * Writes the `used` attribute: a reading for a conversation restored without a turn of
@@ -6794,18 +7464,33 @@ class AparteContext extends HTMLElement {
   get level() {
     return this._level;
   }
+  /** The reading drawn now, parts and all, or `null` while nothing is shown. */
+  get measure() {
+    return this._measured;
+  }
   connectedCallback() {
     window.addEventListener("aparte-message-done", this._onDone);
+    window.addEventListener("aparte-message-error", this._onMessageError);
+    window.addEventListener("aparte-compact-start", this._onCompactStart);
     window.addEventListener("aparte-compact-done", this._onCompacted);
     window.addEventListener("aparte-compact-error", this._onCompactError);
+    window.addEventListener("aparte-reset-done", this._onReset);
+    window.addEventListener("aparte-conversation-loaded", this._onLoaded);
     window.addEventListener("aparte-config-change", this._onRerender);
+    this.addEventListener("click", this._onClick);
     this._render();
   }
   disconnectedCallback() {
     window.removeEventListener("aparte-message-done", this._onDone);
+    window.removeEventListener("aparte-message-error", this._onMessageError);
+    window.removeEventListener("aparte-compact-start", this._onCompactStart);
     window.removeEventListener("aparte-compact-done", this._onCompacted);
     window.removeEventListener("aparte-compact-error", this._onCompactError);
+    window.removeEventListener("aparte-reset-done", this._onReset);
+    window.removeEventListener("aparte-conversation-loaded", this._onLoaded);
     window.removeEventListener("aparte-config-change", this._onRerender);
+    this.removeEventListener("click", this._onClick);
+    this._stopListeningWhileOpen();
   }
   attributeChangedCallback(name) {
     if (name === "used") {
@@ -6814,10 +7499,21 @@ class AparteContext extends HTMLElement {
     }
     if (this.isConnected) this._render();
   }
+  /**
+   * The config the chat this gauge watches answers to, not the one at the gauge's own
+   * position. A gauge in a header, with `target=`, stands outside the chat's boundary, and
+   * a chat that carries its own config (a wrapper's `config` prop) has its own prompt, tools,
+   * window and compactor: the client and the plugin read them from there, so the gauge must
+   * too, or it measures a different request and offers no Compact now. Resolved live, like
+   * every config read: the boundary may be attached after this element connects.
+   */
+  _cfg() {
+    return resolveConfig(this._chat() ?? this);
+  }
   _window() {
     const attr = Number(this.getAttribute("window"));
     if (this.hasAttribute("window") && Number.isFinite(attr) && attr > 0) return attr;
-    const model = resolveConfig(this).getCurrentModel();
+    const model = this._cfg().getCurrentModel();
     return model?.contextWindow && model.contextWindow > 0 ? model.contextWindow : null;
   }
   /** The chat this gauge watches: `target`, else the chat host above it — the composer's rule. */
@@ -6836,43 +7532,113 @@ class AparteContext extends HTMLElement {
     const own = this._ownTargetId();
     return !targetId || !own || targetId === own;
   }
-  _render() {
+  /**
+   * The chat's element: the one `target` names, else the chat above the gauge, else the one
+   * its events last came from. Passed to the compactor as it is — a chat inside a shadow
+   * root is not found by id, so the element is the address that always works.
+   */
+  _chat() {
+    const attr = this.getAttribute("target");
+    if (attr) {
+      const root = this.getRootNode();
+      const named = root.getElementById?.(attr) ?? document.getElementById(attr);
+      if (named) return named;
+    }
+    const above = chatBoundaryOf(this);
+    if (above) return above;
+    return this._seen?.isConnected ? this._seen : null;
+  }
+  /** The chat's active path, or `null` when it cannot be read from here. */
+  _messages() {
+    const reader = transcriptOf(this._chat());
+    if (!reader) return null;
+    try {
+      return reader.getMessages();
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * What to draw: the measure of the chat's own transcript when it holds a reply with usage
+   * (or the model has just refused a request, and an estimate is better than nothing), else
+   * the seeded or reported number with nothing to break down.
+   *
+   * The last turn's usage is laid over its reply when the list has not written it back yet.
+   * If the list does not hold that reply at all it is not used: the list is the path on
+   * screen, and a reply that is not on it (a branch was switched) is not its reading.
+   */
+  _measure(capacity) {
+    const stored = this._messages();
+    const done = this._lastDone;
+    const messages = stored && done?.messageId ? stored.map((m2) => m2.id === done.messageId && !m2.usage ? { ...m2, usage: done.usage } : m2) : stored;
+    const hasUsage = !!messages?.some((m2) => m2.role === "assistant" && m2.usage);
+    if (messages && (hasUsage && !this._blank || this._overflow && messages.length > 0)) {
+      return measureContext({ messages, config: this._cfg(), windowOverride: capacity, viewChanged: this._viewChanged });
+    }
+    if (this._used === null) return null;
+    return { window: capacity, used: this._used, estimated: false, parts: { ...NO_PARTS }, other: this._used };
+  }
+  _render(askToCompact = false) {
     const capacity = this._window();
-    if (capacity === null || this._used === null) {
+    const measure = capacity === null ? null : this._measure(capacity);
+    if (this._compact) this.setAttribute("data-compact", this._compact);
+    else this.removeAttribute("data-compact");
+    if (capacity === null || measure === null) {
+      this._measured = null;
       this.setAttribute("data-empty", "");
       this.removeAttribute("data-level");
+      this._open = false;
+      this._stopListeningWhileOpen();
+      this._panelSignature = "";
       this.replaceChildren();
       this._level = null;
       return;
     }
+    this._measured = measure;
     this.removeAttribute("data-empty");
-    const used = this._used;
+    const used = measure.used;
     const ratio = Math.min(1, used / capacity);
     const warn = fraction(this.getAttribute("warn"), 0.75);
     const danger = fraction(this.getAttribute("danger"), 0.9);
-    const level = ratio >= danger ? "danger" : ratio >= warn ? "warn" : "ok";
+    const level = this._overflow || ratio >= danger ? "danger" : ratio >= warn ? "warn" : "ok";
     this.setAttribute("data-level", level);
     const ring = this.getAttribute("variant") === "ring";
     let root = this.querySelector(".aparte-context");
     if (root && root.classList.contains("aparte-context--ring") !== ring) {
       this.replaceChildren();
       root = null;
+      this._panelSignature = "";
     }
     let meter = this.querySelector('[role="meter"]');
     let text = this.querySelector(".aparte-context__text");
-    if (!root || !meter || !text) {
+    let toggle = this.querySelector(".aparte-context__toggle");
+    let name = this.querySelector(".aparte-context__name");
+    let panel = this.querySelector(".aparte-context__panel");
+    if (!root || !meter || !text || !toggle || !name || !panel) {
       root = el("div", ring ? "aparte-context aparte-context--ring" : "aparte-context");
       meter = ring ? ringSvg() : el("div", "aparte-progress");
       meter.setAttribute("role", "meter");
       if (!ring) meter.appendChild(el("div", "aparte-progress__bar"));
+      toggle = el("button", "aparte-btn aparte-btn--ghost aparte-btn--sm aparte-context__toggle");
+      toggle.type = "button";
+      name = el("span", "aparte-sr-only");
+      name.classList.add("aparte-context__name");
       text = el("span", "aparte-context__text");
-      root.append(meter, text);
+      toggle.append(name, text);
+      panel = el("div", "aparte-context__panel aparte-popover");
+      panel.id = `aparte-context-panel-${++panelSeq}`;
+      panel.setAttribute("role", "group");
+      panel.hidden = true;
+      toggle.setAttribute("aria-controls", panel.id);
+      root.append(meter, toggle, panel);
       this.replaceChildren(root);
+      this._panelSignature = "";
     }
-    const cfg = resolveConfig(this);
+    const cfg = this._cfg();
     const tag = cfg.getLocale().tag || void 0;
     const format = new Intl.NumberFormat(tag, { notation: "compact", maximumFractionDigits: 1 });
-    const reading = `${format.format(used)} / ${format.format(capacity)}`;
+    const approx = measure.estimated ? "~" : "";
+    const reading = `${approx}${format.format(used)} / ${format.format(capacity)}`;
     const percent = Math.round(ratio * 100);
     const label = cfg.t("contextLabel") || "Context window";
     if (ring) {
@@ -6887,7 +7653,13 @@ class AparteContext extends HTMLElement {
     meter.setAttribute("aria-valuemax", String(capacity));
     meter.setAttribute("aria-valuenow", String(used));
     meter.setAttribute("aria-label", `${label}: ${reading}`);
-    text.textContent = ring ? new Intl.NumberFormat(tag, { style: "percent", maximumFractionDigits: 0 }).format(percent / 100) : reading;
+    name.textContent = `${label}: `;
+    toggle.setAttribute("aria-expanded", String(this._open));
+    text.textContent = ring ? `${approx}${new Intl.NumberFormat(tag, { style: "percent", maximumFractionDigits: 0 }).format(percent / 100)}` : reading;
+    panel.setAttribute("aria-label", label);
+    panel.hidden = !this._open;
+    if (this._open) this._renderPanel(panel, measure, capacity, format);
+    else this._panelSignature = "";
     if (level !== this._level) {
       this._level = level;
       const targetId = this._ownTargetId();
@@ -6895,12 +7667,191 @@ class AparteContext extends HTMLElement {
       this.dispatchEvent(new CustomEvent("aparte-context-threshold", { detail, bubbles: true, composed: true }));
       if (level !== "danger") this._compactRequested = false;
     }
-    if (level === "danger" && this.hasAttribute("auto-compact") && !this._compactRequested) {
+    if (askToCompact && level === "danger" && this.hasAttribute("auto-compact") && !this._compactRequested) {
       this._compactRequested = true;
-      window.dispatchEvent(new CustomEvent("aparte-compact", { detail: { targetId: this._ownTargetId() } }));
+      window.dispatchEvent(new CustomEvent("aparte-compact", {
+        detail: { targetId: this._ownTargetId(), auto: true, window: capacity }
+      }));
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // The panel
+  // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * What the window holds, row by row, and what can be done about it.
+   *
+   * The parts are raw estimates and `used` is the number the gauge draws — measured or
+   * calibrated — so they need not agree. The panel never shows a sum above the total: when
+   * the estimates add up to more than `used`, each is scaled down to fit and `other` is
+   * zero; otherwise the difference is `other`, the part the heuristic cannot see.
+   */
+  _renderPanel(panel, measure, capacity, format) {
+    const cfg = this._cfg();
+    const compactor = cfg.getCompactor();
+    const chat = this._chat();
+    const targetId = this._ownTargetId();
+    let preview = null;
+    try {
+      preview = compactor?.preview?.({ target: chat, ...targetId ? { targetId } : {} }) ?? null;
+    } catch {
+      preview = null;
+    }
+    const { parts, used } = measure;
+    const sum = parts.system + parts.tools + parts.summary + parts.messages;
+    const scale = sum > used && sum > 0 ? used / sum : 1;
+    const approxOf = measure.estimated ? "~" : "";
+    const rows = [
+      { key: "system", label: cfg.t("contextSystem") || "System prompt", tokens: parts.system * scale, approx: "~" },
+      { key: "tools", label: cfg.t("contextTools") || "Tools", tokens: parts.tools * scale, approx: "~" },
+      { key: "summary", label: cfg.t("contextSummary") || "Summary", tokens: parts.summary * scale, approx: "~" },
+      { key: "messages", label: cfg.t("contextMessages") || "Messages", tokens: parts.messages * scale, approx: "~" },
+      { key: "other", label: cfg.t("contextOther") || "Other", tokens: scale < 1 ? 0 : measure.other, approx: "~" },
+      { key: "free", label: cfg.t("contextFree") || "Free", tokens: Math.max(0, capacity - used), approx: approxOf }
+    ];
+    const total = `${approxOf}${format.format(used)} / ${format.format(capacity)}`;
+    const reclaim = preview && preview.tokens > 0 ? (cfg.t("contextReclaim") || "Compacting now would free ~{n} tokens").replace("{n}", () => format.format(Math.round(preview.tokens))) : "";
+    const canCompact = !!compactor && !!preview && this._compact === null;
+    const list = el("ul", "aparte-context__rows");
+    for (const row of rows) {
+      const item = el("li", "aparte-context__row");
+      item.setAttribute("data-part", row.key);
+      item.append(el("span", "aparte-context__row-label", row.label));
+      item.append(el("span", "aparte-context__row-value", `${row.approx}${format.format(Math.round(row.tokens))}`));
+      const bar = el("div", "aparte-progress aparte-context__row-bar");
+      bar.setAttribute("aria-hidden", "true");
+      bar.style.setProperty("--aparte-progress-value", String(Math.round(Math.min(1, row.tokens / capacity) * 100)));
+      bar.appendChild(el("div", "aparte-progress__bar"));
+      item.append(bar);
+      list.append(item);
+    }
+    const totalRow = el("li", "aparte-context__row aparte-context__row--total");
+    totalRow.setAttribute("data-part", "total");
+    totalRow.append(el("span", "aparte-context__row-label", cfg.t("contextTotal") || "Total"), el("span", "aparte-context__row-value", total));
+    list.append(totalRow);
+    const nodes = [list];
+    if (this._compact === "running") {
+      const status = el("p", "aparte-context__status aparte-shimmer", cfg.t("checkpointPending") || "Summarising the context…");
+      status.setAttribute("role", "status");
+      nodes.push(status);
+    } else if (this._compact === "failed") {
+      const status = el("p", "aparte-context__status aparte-context__status--failed", cfg.t("checkpointFailed") || "Couldn't summarise the context");
+      status.setAttribute("role", "status");
+      if (this._failure) {
+        status.title = this._failure;
+        status.appendChild(el("span", "aparte-sr-only", `: ${this._failure}`));
+      }
+      nodes.push(status, this._action("retry", cfg.t("retry") || "Retry"));
+    }
+    if (reclaim) nodes.push(el("p", "aparte-context__reclaim", reclaim));
+    if (canCompact) nodes.push(this._action("compact", cfg.t("contextCompactNow") || "Compact now"));
+    const next = el("div", "aparte-context__content");
+    next.append(...nodes);
+    if (next.innerHTML === this._panelSignature) return;
+    this._panelSignature = next.innerHTML;
+    const active = document.activeElement;
+    const hadFocus = active && panel.contains(active) ? active.getAttribute("data-context-action") ?? "" : null;
+    panel.replaceChildren(...Array.from(next.childNodes));
+    if (hadFocus !== null) {
+      const same = hadFocus ? panel.querySelector(`[data-context-action="${cssEscape(hadFocus)}"]`) : null;
+      (same ?? this.querySelector(".aparte-context__toggle"))?.focus();
+    }
+  }
+  _action(name, label) {
+    const button = el("button", "aparte-btn aparte-btn--sm aparte-btn--surface aparte-context__action", label);
+    button.type = "button";
+    button.setAttribute("data-context-action", name);
+    return button;
+  }
+  /**
+   * Ask the registered compactor to compact this chat now, as a person asked. With none
+   * registered (Retry only — Compact now is not offered without one) the command event
+   * is the way to ask, the one a host's own button uses.
+   */
+  async _compactNow(reason) {
+    const compactor = this._cfg().getCompactor();
+    const targetId = this._ownTargetId();
+    if (!compactor) {
+      window.dispatchEvent(new CustomEvent("aparte-compact", { detail: { targetId } }));
+      return;
+    }
+    this._compact = "running";
+    this._failure = "";
+    this._render();
+    let failed = null;
+    try {
+      const outcome = await compactor.compact({ target: this._chat(), ...targetId ? { targetId } : {}, force: true, reason });
+      if (!outcome.ok) failed = outcome.error;
+      else if (!outcome.skipped) this._viewChanged = true;
+    } catch (error) {
+      failed = error instanceof Error ? error.message : String(error);
     }
+    if (this._compact === "running") {
+      this._compact = failed === null ? null : "failed";
+      this._failure = failed ?? "";
+    }
+    if (this.isConnected) this._render();
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // The disclosure
+  // ─────────────────────────────────────────────────────────────────────────
+  _onClick = (event) => {
+    const target = event.target;
+    const action2 = target?.closest?.("[data-context-action]");
+    if (action2) {
+      void this._compactNow(action2.getAttribute("data-context-action") === "retry" ? "retry" : "manual");
+      return;
+    }
+    if (target?.closest?.(".aparte-context__panel")) return;
+    if (!target?.closest?.(".aparte-context")) return;
+    this._setOpen(!this._open);
+  };
+  _setOpen(open, returnFocus = false) {
+    if (open === this._open) return;
+    this._open = open;
+    if (open) this._listenWhileOpen();
+    else this._stopListeningWhileOpen();
+    this._render();
+    if (open) this._place();
+    else if (returnFocus) this.querySelector(".aparte-context__toggle")?.focus();
+  }
+  /**
+   * Escape and a click anywhere else close the panel. Listened for on the document only
+   * while it is open: a page full of closed gauges holds no listeners but its own.
+   */
+  _onDocumentClick = (event) => {
+    if (!event.composedPath().includes(this)) this._setOpen(false);
+  };
+  _onDocumentKeydown = (event) => {
+    if (event.key !== "Escape") return;
+    const inside = event.composedPath().includes(this);
+    if (inside) event.stopPropagation();
+    this._setOpen(false, inside || this.contains(document.activeElement));
+  };
+  _listenWhileOpen() {
+    document.addEventListener("click", this._onDocumentClick);
+    document.addEventListener("keydown", this._onDocumentKeydown);
+  }
+  _stopListeningWhileOpen() {
+    document.removeEventListener("click", this._onDocumentClick);
+    document.removeEventListener("keydown", this._onDocumentKeydown);
+  }
+  /**
+   * Where the panel opens: above the reading by default, since a gauge usually sits in the
+   * composer at the foot of the page; below when there is no room above, and flush with the
+   * other edge when it would run past the window's.
+   */
+  _place() {
+    const panel = this.querySelector(".aparte-context__panel");
+    if (!panel) return;
+    panel.removeAttribute("data-placement");
+    panel.removeAttribute("data-align");
+    const anchor = this.getBoundingClientRect();
+    const box = panel.getBoundingClientRect();
+    if (box.height > 0 && anchor.top < box.height) panel.setAttribute("data-placement", "below");
+    if (box.width > 0 && box.right > document.documentElement.clientWidth) panel.setAttribute("data-align", "end");
   }
 }
+deferHydrationOf(AparteContext);
 if (!customElements.get("aparte-context")) {
   customElements.define("aparte-context", AparteContext);
 }
@@ -7363,11 +8314,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(a3, b2) {
+  if (a3.length !== b2.length) return false;
+  for (let i2 = 0; i2 < a3.length; i2++) if (a3[i2] !== b2[i2]) return false;
   return true;
 }
+deferHydrationOf(AparteScrollRail);
 if (!customElements.get("aparte-scroll-rail")) {
   customElements.define("aparte-scroll-rail", AparteScrollRail);
 }
@@ -7718,6 +8670,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);
 }
@@ -8496,6 +9449,7 @@ class AparteSplit extends HTMLElement {
     handle.dataset["ownLabel"] = "locale";
   }
 }
+deferHydrationOf(AparteSplit);
 if (!customElements.get("aparte-split")) {
   customElements.define("aparte-split", AparteSplit);
 }
@@ -8571,7 +9525,7 @@ export {
   AparteElicitation,
   AparteElicitationAbortError,
   p as AparteError,
-  q as AparteErrorCode,
+  AparteErrorCode,
   AparteIcon,
   AparteMessageRepository,
   AparteOptgroup,
@@ -8583,7 +9537,7 @@ export {
   AparteSplit,
   s as AparteStreamParser,
   AparteSuggestions,
-  t as aparteGlobalConfig,
+  aparteGlobalConfig,
   u as applyElementProps,
   v as attachConfig,
   buildApprovalPanel,
@@ -8599,34 +9553,44 @@ 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 estimateTokens,
+  R as estimateWireTokens,
+  S as filesToAttachments,
+  T as getAllRenderers,
   getSegmentRenderer,
+  V as historyFromCheckpoint,
   installDefaultRenderersOnce,
   installDialogTriggersOnce,
   isAwaitingReply,
-  T as isFormatAdapter,
+  Z as isFormatAdapter,
   isSafeUrl,
   isSegmentSettled,
-  W as parseAparteEventStream,
+  measureContext,
+  a1 as overrideSegmentRenderer,
+  a2 as parseAparteEventStream,
   parseMarkdownToSegments,
   populateBubbleFromMessage,
-  Z as readableToAsyncIterable,
+  a5 as readableToAsyncIterable,
   registerAllComponents,
-  _ as registerDefaultRenderers,
-  $ as registerSegmentRenderer,
-  a0 as requestUserInput,
+  a6 as registerDefaultRenderers,
+  a7 as registerSegmentRenderer,
+  a8 as releaseDeferredHydration,
+  a9 as requestUserInput,
   resolveConfig,
   revokeAttachmentUrls,
   runWithConfig,
-  a4 as segmentDuration,
-  a5 as segmentTiming,
+  ad as segmentDuration,
+  ae as segmentTiming,
   subscribeConfigChange,
-  a7 as toolRefusal,
-  a8 as unregisterSegmentRenderer,
+  ag as toToolCallView,
+  ah as toolRefusal,
+  ai as unregisterSegmentRenderer,
   uuid
 };
 //# sourceMappingURL=index.js.map