@aparte/core 0.25.0 → 0.26.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { K as deferHydrationOf, a6 as resolveConfig, ag as eventOrigin, ah as activeElementIn, ab as subscribeConfigChange, a8 as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, ai as gateGlide, O as escapeAttr, aj as toolCallRenderer, ak as toolRendererThatDrew, t as aparteGlobalConfig, al as isMountedRenderer, am as renderingVersionOf, H as cssEscape, an as onRenderersChange, ao as mergeSegmentUpdate, P as escapeHtml, Y as isSegmentSettled, ap as writeStreamedMarkdown, X as isSafeUrl, C as copyText, S as getSegmentRenderer, T as installDefaultRenderersOnce, r as AparteMessageRepository, aq as stampSegmentActivity, ar as stampSegmentOnInsert, as as stampSegmentOnUpdate, at as renumberSegments, au as openSegmentIds, av as isTerminalStatus, aw as adoptMessageSegments, V as isAwaitingReply, a0 as populateBubbleFromMessage, af as uuid, a7 as revokeAttachmentUrls, $ as parseMarkdownToSegments, ax as APARTE_DERIVED_SEGMENTS, ay as rememberConversationStatus, az as tellConversationStatus, aA as conversationStatusOf, e as APARTE_DEFAULT_LOCALE, aB as chatBoundaryOf, aC as rootOf, U as installDialogTriggersOnce } from "./defer-hydration-BwMqeRHq.js";
-import { A, a, b, c, d, f, g, h, i, j, k, l, m, n, p, q, s, u, v, y, z, B, D, E, F, G, I, J, L, M, N, Q, R, W, Z, _, a1, a2, a3, a4, a5, a9, aa, ac, ad, ae } from "./defer-hydration-BwMqeRHq.js";
+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);
 }
@@ -1307,6 +1307,96 @@ 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;
@@ -1349,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;
@@ -1362,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. */
@@ -1391,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();
@@ -1406,6 +1514,9 @@ class AparteChatBubble extends HTMLElement {
     this._updateName();
     this._updateLocalizedLabels();
     this._updateWaiting();
+    this._updateFinishNote();
+    this._checkpointDrawn = "";
+    this._updateCheckpoint();
     this._renderAvatar();
     this._redrawSegmentsWhoseRendererChanged();
     this._relabelSegments();
@@ -1633,6 +1744,8 @@ class AparteChatBubble extends HTMLElement {
     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
@@ -1671,6 +1784,7 @@ class AparteChatBubble extends HTMLElement {
     this._updateAttachments();
     this._updateTimestamp(this.getAttribute("timestamp"));
     this._updateBranchPicker();
+    this._updateCheckpoint();
   }
   disconnectedCallback() {
     window.removeEventListener("aparte-config-change", this._onConfigChange);
@@ -1678,6 +1792,8 @@ class AparteChatBubble extends HTMLElement {
     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();
@@ -1704,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;
@@ -1853,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.
@@ -1891,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
   // ─────────────────────────────────────────────────────────────────────────
@@ -2071,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
@@ -2302,18 +2621,18 @@ class AparteChatBubble extends HTMLElement {
     const customAttachment = this._cfg.getAttachmentRenderer?.();
     if (customAttachment) {
       this._attachmentsEl.replaceChildren();
-      for (const a6 of this._attachments) {
-        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a6)));
+      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((a6) => {
-      const name = escapeHtml(a6.name);
-      if (a6.type.startsWith("image/") && this._isShowableUrl(a6.url)) {
-        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumbnail__image" src="${escapeHtml(a6.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
+    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(a6.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) => {
@@ -2469,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
@@ -2499,14 +2818,14 @@ class AparteChatBubble extends HTMLElement {
     const buttons = [];
     if (this._role === "user") {
       if (config.user) {
-        for (const a6 of config.user) buttons.push(this._actionButtonHtml(a6, 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 a6 of config.assistant) buttons.push(this._actionButtonHtml(a6, 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));
@@ -2602,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 a6 of this._cfg.getActions("bubble")) {
-      const roles = a6.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:${a6.id}`;
-      btn.setAttribute("aria-label", a6.label);
-      btn.setAttribute("title", a6.label);
-      btn.innerHTML = a6.icon.startsWith("<") ? a6.icon : this._cfg.getIcon(a6.icon) ?? a6.iconFallback ?? "";
+      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>`;
@@ -2661,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",
@@ -2680,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();
@@ -2729,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", {
@@ -2857,6 +3176,7 @@ class AparteChatBubble extends HTMLElement {
       }
     }
     this._updateWaiting();
+    this._updateFinishNote();
     if (wasStreaming && !streaming) this._updateContent();
     if (wasStreaming && !streaming && this._segments.length > 0) this._redrawIfStale();
   }
@@ -3151,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
@@ -3220,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
@@ -3276,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) {
@@ -3448,10 +3787,10 @@ class AparteChatViewport extends HTMLElement {
     this._notifyBubble(messageId, "addSegment", stamped);
     this._autoScroll();
   }
-  updateSegment(a6, b2, c2) {
+  updateSegment(a3, b2, c2) {
     const clientForm = c2 === void 0 && typeof b2 === "object";
-    const messageId = clientForm ? this._activeMessageId() : a6;
-    const segmentId = clientForm ? a6 : 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);
@@ -3464,10 +3803,10 @@ class AparteChatViewport extends HTMLElement {
       this._notifyBubble(messageId, "updateSegment", { segmentId, updates: stamped });
     }
   }
-  removeSegment(a6, b2) {
+  removeSegment(a3, b2) {
     const clientForm = b2 === void 0;
-    const messageId = clientForm ? this._activeMessageId() : a6;
-    const segmentId = clientForm ? a6 : 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) {
@@ -3818,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 }));
   }
   /**
@@ -3893,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;
@@ -3921,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);
         }
@@ -3972,6 +4312,7 @@ class AparteChatViewport extends HTMLElement {
     }
     this._dispatchPathChanged(activeMessages, siblingsInfo);
     this._syncBusy();
+    this._checkpointState?.reapply();
     this._recalculateSpacer();
   }
   _dispatchPathChanged(messages, siblings) {
@@ -6267,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((a6, b2) => b2.localeCompare(a6)).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] : []];
   }
@@ -6465,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);
@@ -6474,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);
@@ -6922,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";
@@ -6943,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();
+  };
+  /**
+   * 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 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.
+   * 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. */
@@ -6977,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
@@ -7010,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") {
@@ -7030,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. */
@@ -7052,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) {
@@ -7103,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();
@@ -7111,11 +7667,189 @@ 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")) {
@@ -7580,9 +8314,9 @@ class AparteScrollRail extends HTMLElement {
     this._held = null;
   }
 }
-function sameElements(a6, b2) {
-  if (a6.length !== b2.length) return false;
-  for (let i2 = 0; i2 < a6.length; i2++) if (a6[i2] !== b2[i2]) return false;
+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);
@@ -8791,7 +9525,7 @@ export {
   AparteElicitation,
   AparteElicitationAbortError,
   p as AparteError,
-  q as AparteErrorCode,
+  AparteErrorCode,
   AparteIcon,
   AparteMessageRepository,
   AparteOptgroup,
@@ -8825,34 +9559,38 @@ export {
   N as detachConfig,
   escapeAttr,
   escapeHtml,
-  Q as filesToAttachments,
-  R as getAllRenderers,
+  Q as estimateTokens,
+  R as estimateWireTokens,
+  S as filesToAttachments,
+  T as getAllRenderers,
   getSegmentRenderer,
+  V as historyFromCheckpoint,
   installDefaultRenderersOnce,
   installDialogTriggersOnce,
   isAwaitingReply,
-  W as isFormatAdapter,
+  Z as isFormatAdapter,
   isSafeUrl,
   isSegmentSettled,
-  Z as overrideSegmentRenderer,
-  _ as parseAparteEventStream,
+  measureContext,
+  a1 as overrideSegmentRenderer,
+  a2 as parseAparteEventStream,
   parseMarkdownToSegments,
   populateBubbleFromMessage,
-  a1 as readableToAsyncIterable,
+  a5 as readableToAsyncIterable,
   registerAllComponents,
-  a2 as registerDefaultRenderers,
-  a3 as registerSegmentRenderer,
-  a4 as releaseDeferredHydration,
-  a5 as requestUserInput,
+  a6 as registerDefaultRenderers,
+  a7 as registerSegmentRenderer,
+  a8 as releaseDeferredHydration,
+  a9 as requestUserInput,
   resolveConfig,
   revokeAttachmentUrls,
   runWithConfig,
-  a9 as segmentDuration,
-  aa as segmentTiming,
+  ad as segmentDuration,
+  ae as segmentTiming,
   subscribeConfigChange,
-  ac as toToolCallView,
-  ad as toolRefusal,
-  ae as unregisterSegmentRenderer,
+  ag as toToolCallView,
+  ah as toolRefusal,
+  ai as unregisterSegmentRenderer,
   uuid
 };
 //# sourceMappingURL=index.js.map