@artooi/ag-ui-web-component 0.23.0 → 0.24.0

package/dist/index.js

@@ -5,6 +5,7 @@ var TOGGLE_EVENT = "ag-ui-toggle";
 var UNREAD_EVENT = "ag-ui-unread";
 var STATE_EVENT = "ag-ui-state";
 var ATTACHMENT_EVENT = "ag-ui-attachments";
+var RUN_FINISHED_EVENT = "ag-ui-run-finished";
 var MESSAGE_ROLE = {
   USER: "user",
   ASSISTANT: "assistant"
@@ -83,8 +84,8 @@ var ClientToolRegistry = class {
   /**
    * Register a tool, replacing any existing one with the same name.
    *
-   * Idempotent on the name so re-fired host refs / React StrictMode's
-   * double-invoke don't throw — re-registering is a replace, not an error.
+   * Idempotent on the name so a re-fired host ref or React StrictMode's
+   * double-invoke replaces rather than throws.
    */
   register(tool) {
     this.#tools.set(tool.name, tool);
@@ -4477,12 +4478,11 @@ var STYLES = `
    only the alias is used by the rules below.
 
    The indirection is what makes ancestor theming work. Declaring the public
-   name on :host would set it *on the host element*, and a value on an element
-   always beats one inherited from an ancestor \u2014 so a page that put the tokens
-   on a wrapper would see no effect at all, which is the one thing the API is
-   documented to support. Reading the public name with the default as a var()
-   fallback leaves it undeclared on the element, so an ancestor's value is
-   inherited normally while a value aimed at the element still wins over it.
+   name on :host would set it on the host element, and a value on an element
+   always beats one inherited from an ancestor, so tokens put on a wrapper
+   would have no effect. Reading the public name with the default as a var()
+   fallback leaves it undeclared on the element, so an ancestor's value
+   inherits normally while one aimed at the element still wins.
 
    Two invariants hold this together:
    1. No rule outside this file's :host blocks may reference a public name
@@ -4509,11 +4509,9 @@ var STYLES = `
   --_border: var(--ag-ui-border, #e2e2ec);
   --_radius: var(--ag-ui-radius, 12px);
 
-  /* Body text and raised chrome. Both are referenced by the code-block copy
-     button; neither had a default before, so the declarations reading them
-     were dropped and the button fell back to the inherited colour over a
-     transparent box. The defaults below restate exactly that, so this is a
-     rename with no repaint \u2014 see the note on .code-copy. */
+  /* Body text and raised chrome, read only by the code-block copy button.
+     The defaults restate what it inherits, so a host that sets neither sees
+     no repaint \u2014 see the note on .code-copy. */
   --_text: var(--ag-ui-text, var(--_fg));
   --_surface: var(--ag-ui-surface, transparent);
 
@@ -4566,9 +4564,9 @@ var STYLES = `
   --_launcher-inset: var(--ag-ui-launcher-inset, auto 0 0 auto);
 
   /* Motion. One duration and two curves drive every collapse, expand and
-     slide-over, so the whole widget accelerates and settles as one thing.
-     The default curve is a long-tailed ease-out (a fast start that decelerates
-     into place); the pop curve overshoots slightly, for something arriving. */
+     slide-over, so the widget accelerates and settles as one thing. The
+     default curve decelerates into place; the pop curve overshoots slightly,
+     for something arriving. */
   --_motion: var(--ag-ui-motion, 0.28s);
   --_ease: var(--ag-ui-ease, cubic-bezier(0.32, 0.72, 0, 1));
   --_ease-pop: var(--ag-ui-ease-pop, cubic-bezier(0.34, 1.36, 0.64, 1));
@@ -4592,7 +4590,7 @@ var STYLES = `
   /* Reading-column width for placement="page" (full-bleed, centred content). */
   --_content-max-width: var(--ag-ui-content-max-width, 820px);
   /* Slim rail the sidebar placement collapses to. Only that placement reads
-     it, but it is declared here so invariant 2 holds for every alias. */
+     it, but it is declared here so every alias has a default in one place. */
   --_rail-width: var(--ag-ui-rail-width, 52px);
 
   position: var(--_position);
@@ -4684,11 +4682,11 @@ var STYLES = `
   --_radius: var(--ag-ui-radius, 0);
 }
 
-/* Page: full-bleed background with a centred reading column. Unlike
-   "full" (edge-to-edge, left-aligned messages) the content sits in a column
-   capped at --ag-ui-content-max-width. The column is produced by symmetric auto
-   padding on the scroll area + composer (no per-row wrapper), so user pills
-   still right-align and the assistant well spans the column. */
+/* Page: full-bleed background with a centred reading column capped at
+   --ag-ui-content-max-width, where "full" is edge-to-edge and left-aligned.
+   The column comes from symmetric auto padding on the scroll area and
+   composer rather than a per-row wrapper, so user pills still right-align and
+   the assistant well spans the column. */
 :host([placement="page"]) {
   --_inset: var(--ag-ui-inset, 0);
   --_width: var(--ag-ui-width, 100vw);
@@ -4706,9 +4704,8 @@ var STYLES = `
   padding-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
 }
 
-/* The rows between the message list and the composer (skill chips, the
-   /-command palette, the missing-placeholder hint, the upload tray) line up
-   with the column too \u2014 chips are padding-based, the palette/hint/tray are
+/* The rows between the message list and the composer line up with the column
+   too. Chips and tray are padding-based while palette and hint are
    margin-based, so each gets its own inline axis nudged by the same gutter. */
 :host([placement="page"]) .skill-chips,
 :host([placement="page"]) .attachment-tray {
@@ -4817,13 +4814,12 @@ var STYLES = `
     visibility var(--_motion) var(--_ease);
 }
 
-/* The launcher grows out of the corner the panel shrank into.
-   It is laid out at rest rather than display:none, which is what lets it
-   animate in *and* out: an element that was not rendered has no before-change
-   style to transition from, and one whose display flips to none cannot
-   transition at all. visibility keeps it unpaintable, untabbable and
-   unclickable in between -- the expanded panel's own controls sit under it and
-   must stay reachable. */
+/* The launcher grows out of the corner the panel shrank into. It stays laid
+   out at rest rather than display:none, which is what lets it animate both in
+   and out: an unrendered element has no before-change style to transition
+   from, and one flipping display to none cannot transition at all. visibility
+   keeps it unpaintable, untabbable and unclickable in between, so the expanded
+   panel's own controls underneath stay reachable. */
 :host([collapsed]) .launcher {
   opacity: 1;
   transform: none;
@@ -4984,20 +4980,18 @@ var STYLES = `
 
 /* \u2500\u2500 Collapse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    Collapsing shrinks the widget to the round floating launcher: the panel
-   scales down toward the launcher's corner and fades out, the launcher pops in
-   from that same point. Both halves are transform and opacity only, so the
-   morph runs on the compositor and never reflows the host page.
-
-   The host box keeps its expanded size. Animating it would animate layout, and
-   a dragged --ag-ui-width would then fight the launcher's own size. Nothing
-   paints there once the panel is gone, so the box only has to stop swallowing
-   clicks: pointer events go to none, and the launcher takes them back.
-
-   Two placements collapse to something else and restore what they need:
-   "sidebar" slides to its rail (below), while "embedded" and "page" keep the
-   original header bar \u2014 embedded is laid out by the host page, where a
-   floating circle would escape the layout, and page is a full-screen route
-   with no corner to float in. */
+   scales toward the launcher's corner and fades, the launcher pops in from the
+   same point. Both halves are transform and opacity only, so the morph runs on
+   the compositor and never reflows the host page.
+
+   The host box keeps its expanded size, since animating it would animate
+   layout and a dragged --ag-ui-width would fight the launcher's own size.
+   Nothing paints there once the panel is gone, so the box only has to stop
+   swallowing clicks: pointer events go to none and the launcher takes them.
+
+   Two placements collapse differently: "sidebar" slides to its rail (below),
+   while "embedded" and "page" keep the header bar, having no corner for a
+   floating circle that would escape the host's layout. */
 :host([collapsed]) {
   pointer-events: none;
 }
@@ -5008,11 +5002,11 @@ var STYLES = `
   visibility: hidden;
 }
 
-/* visibility is what keeps the panel out of the tab order and the a11y tree at
-   rest without display:none killing the transition. It interpolates so that any
-   progress below 1 still counts as visible: the panel stays on screen for the
-   whole collapse and flips hidden exactly at the end, and on expand it is
-   visible from the first frame. */
+/* visibility keeps the panel out of the tab order and the a11y tree at rest
+   without display:none killing the transition. It interpolates so any progress
+   below 1 still counts as visible: the panel stays on screen for the whole
+   collapse, flips hidden exactly at the end, and on expand is visible from the
+   first frame. */
 .chat {
   transform-origin: bottom right;
   transition:
@@ -5039,10 +5033,9 @@ var STYLES = `
   visibility: visible;
 }
 
-/* These two keep the header bar, so the launcher must stay out of the way \u2014
-   an embedded host is position: static, which would otherwise leave an
-   absolutely-positioned circle to escape the layout entirely and land against
-   whatever the page happens to position. */
+/* These two keep the header bar, so the launcher must stay out of the way: an
+   embedded host is position: static, which would let an absolutely-positioned
+   circle escape the layout and land against whatever the page positions. */
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .launcher {
   visibility: hidden;
   opacity: 0;
@@ -5082,7 +5075,7 @@ var STYLES = `
    and the pending indicator so a whole answer reads (and can be boxed) as one
    unit. A flex column on the message-list gap, stretched to the list width so
    its children keep their own left/right alignment. data-answer-well opts into
-   the bordered "well"; without it the layout is today's flat stack. */
+   the bordered "well"; without it the turn renders as a flat stack. */
 .answer {
   display: flex;
   flex-direction: column;
@@ -5208,13 +5201,9 @@ var STYLES = `
   position: relative;
 }
 
-/* This button is the only reader of --ag-ui-surface and --ag-ui-text, and
-   neither had a default until the alias layer gave them one. Both references
-   used to resolve to nothing, dropping the declaration: the background fell
-   back to the initial transparent, and the hover/copied colour to the
-   inherited body colour. The defaults chosen upstream (transparent, and the
-   body foreground) reproduce that, so the rename repaints nothing. A raised
-   surface behind the button is a separate design question. */
+/* The only reader of --ag-ui-surface and --ag-ui-text. Their defaults are
+   transparent and the body foreground, which is what this button rendered as
+   before either token existed; changing them repaints only this control. */
 .code-copy {
   position: absolute;
   top: 4px;
@@ -5260,12 +5249,10 @@ var STYLES = `
   color: var(--_muted);
 }
 
-/* Markdown tables. table/thead/tbody/tr/th/td are all in
-   the sanitizer's ALLOWED_TAGS, so an agent emitting one renders it \u2014 and until
-   now rendered it entirely unstyled, overflowing the bubble. A wide table
-   scrolls inside its own box rather than stretching the message: the bubble is
-   width-constrained, so without this the columns either crush or push the
-   layout sideways. */
+/* Markdown tables. table/thead/tbody/tr/th/td are all in the sanitizer's
+   ALLOWED_TAGS, so an agent can emit one. A wide table must scroll inside its
+   own box rather than stretch the message: the bubble is width-constrained, so
+   without this the columns either crush or push the layout sideways. */
 .message--assistant table {
   display: block;
   width: fit-content;
@@ -5406,18 +5393,28 @@ var STYLES = `
   color: var(--_tool-fg);
 }
 
+/* Wraps, because the name is the only flexible child and every badge the row
+   gains is taken out of it. An approved call adds a third fixed badge, which in
+   a sidebar-width panel left the name 37px and broke it mid-word. Badges drop to
+   their own row instead. */
 .tool-call-head {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
 
 .tool-call-name {
-  flex: 1;
-  min-width: 0;
+  /* An auto basis, and a min-width floor rather than zero: the name may shrink,
+     but not below something readable, so wrapping moves a badge instead of
+     shredding a word. Breaking anywhere still applies to a name that cannot fit
+     on a line of its own, which is what keeps a long unbroken tool name inside
+     the card. */
+  flex: 1 1 auto;
+  min-width: 6ch;
   font-weight: 600;
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 /* Leading status icon. Empty in the DOM \u2014 the glyph/spinner is drawn
@@ -5522,8 +5519,6 @@ var STYLES = `
   color: var(--_muted);
 }
 
-/* The record of a human decision on a gated call. An approved call used to
-   look exactly like one that was never gated. */
 .skill-item-token {
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   font-size: 0.92em;
@@ -5531,6 +5526,8 @@ var STYLES = `
   margin-right: 6px;
 }
 
+/* The lasting record of a human decision on a gated call \u2014 without it an
+   approved call looks exactly like one that was never gated. */
 .tool-call-decision {
   flex: none;
   font-size: 11px;
@@ -5553,10 +5550,8 @@ var STYLES = `
 }
 
 /* Display modes are pure visibility over one DOM shape, selected from the host
-   attribute rather than a value stamped on the card when it was built. That is
-   what lets a host flip data-tool-display and have every card already on screen
-   re-read it, the way data-answer-well behaves. Baking the structure per mode
-   meant the setting only reached cards created afterwards.
+   attribute rather than a value stamped on the card at build time, so flipping
+   data-tool-display re-styles cards already on screen. See ToolCallCard.
 
    Default (no attribute) is the full mode: arguments always visible, result
    behind the toggle. */
@@ -5653,20 +5648,19 @@ var STYLES = `
 }
 
 /* Then the measurement corrects it. Which edges are held still belongs to the
-   host's layout rather than to placement -- a floating panel a host right-aligns
-   is anchored bottom-left, not bottom-right -- so the element measures the edges
-   that stay put and stamps them here as "<y>-<x>". Equal specificity to the
-   rules above, so source order is what lets the measured value win.
-
-   These must not be written as [data-resize-anchor~="left"]: the stamped value
-   is one hyphenated token, and ~= matches whitespace-separated words, so such a
-   selector cannot ever match. It did not, which left the grip drawn at the
-   corner that moves while the cursor pointed along the right diagonal.
-
-   Each rule also sets both sides of its axis rather than only the side it
-   moves. One that flipped a single way could not undo a placement guess that
-   had flipped the other, which put the grip on the anchored corner for an
-   embedded panel its host right-aligns. */
+   host's layout, not to placement -- a floating panel a host right-aligns is
+   anchored bottom-left -- so the element measures them and stamps a single
+   hyphenated "<y>-<x>" token here. Equal specificity to the rules above, so
+   source order is what lets the measured value win.
+
+   Two traps, both of which silently draw the grip on the corner that moves:
+
+   Never write these as [data-resize-anchor~="left"]. The stamped value is one
+   hyphenated token and ~= matches whitespace-separated words, so it can never
+   match.
+
+   Each rule must set both sides of its axis, not only the side it moves, or it
+   cannot undo a placement guess that flipped the other way. */
 :host([data-resize-anchor$="-left"]) .resize-handle {
   left: auto;
   right: 0;
@@ -5727,10 +5721,9 @@ var STYLES = `
 }
 
 /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-   One surface owns the border, the background and the focus ring; the field and
-   its tool row sit inside it. The row used to be four siblings stretched to the
-   textarea's height, which gave a paperclip the same visual weight as the field
-   and turned Send into a full-height slab. */
+   One surface owns the border, the background and the focus ring; the field
+   and its tool row sit inside it, rather than being siblings stretched to the
+   textarea's height. */
 .input-row {
   display: flex;
   padding: 12px;
@@ -5978,13 +5971,12 @@ var STYLES = `
 }
 
 /* A chip carries its own text colour because it carries its own background.
-   The same chip renders in two places with opposite inherited colours: in the
-   composer tray it inherits the panel's, but on a sent user bubble it inherits
-   the user foreground, which is white on the stock light theme. Against the
-   assistant surface underneath that was a 1.13:1 filename \u2014 invisible, and only
-   the size stayed legible because it sets its own muted colour. Pair the colour
-   with the background it belongs to, and both placements read the same.
-   Overridden below for an errored chip, which must keep its red. */
+   The same chip renders in two places with opposite inherited colours: the
+   composer tray gives it the panel's, a sent user bubble gives it the user
+   foreground, which is white on the stock light theme and near-invisible
+   against the chip. Pairing the colour with the background it belongs to makes
+   both placements read alike. Overridden below for an errored chip, which
+   keeps its red. */
 .attachment-chip {
   display: inline-flex;
   align-items: center;
@@ -6678,9 +6670,9 @@ var ThoughtsBlock = class {
     this.#body.textContent = buffer;
   }
   /**
-   * Fold the region away — called when the answer's first text token arrives.
-   * Idempotent (the per-token text handler calls it repeatedly) and flips the
-   * header label from "thinking…" to the settled "Thoughts" affordance.
+   * Fold the region away when the answer's first text token arrives, flipping
+   * the header label to its settled form. Idempotent, since the per-token text
+   * handler calls it repeatedly.
    */
   collapse() {
     if (this.#collapsed) {
@@ -7038,11 +7030,8 @@ var ToolCallCard = class {
   }
   /**
    * Record that a human approved or declined this call, as a line in the card.
-   *
-   * Approval used to leave no trace at all: a declined call became a tool
-   * result saying so, while an approved one simply ran, making the transcript
-   * of a gated call byte-identical to one that was never gated. The prompt is
-   * gone once answered, so this is where the decision lives.
+   * The prompt disappears once answered, so this is the only lasting trace that
+   * the call was gated at all.
    */
   recordDecision(kind) {
     this.element.setAttribute("data-decision", kind);
@@ -7157,11 +7146,10 @@ var VoiceInput = class {
     this.#recorder?.stop();
   }
   /**
-   * Tear the control down — the teardown path when the host element is removed
-   * mid-recording. Stops any live `MediaRecorder`, releases the mic tracks (so
-   * the browser's recording indicator clears), and suppresses the pending
-   * transcription: a disconnected control must not fire `onText` back into a
-   * detached element.
+   * Tear the control down, for a host element removed mid-recording. Stops any
+   * live `MediaRecorder`, releases the mic tracks so the browser's recording
+   * indicator clears, and suppresses the pending transcription — a
+   * disconnected control must not fire `onText` into a detached element.
    */
   dispose() {
     this.#disposed = true;
@@ -7243,10 +7231,9 @@ var AgUiClient = class {
   #resolveInterrupts;
   #onPersist;
   /**
-   * Message ids the server has already closed, so a reuse can be reported.
-   *
-   * Per client rather than per run: the merge happens across runs, which is the
-   * case a per-run set would miss entirely.
+   * Message ids the server has already closed, so a reuse can be reported. Per
+   * client rather than per run — the merge happens across runs, which a per-run
+   * set would miss entirely.
    */
   #closedMessageIds = /* @__PURE__ */ new Set();
   #connectionLostMessage;
@@ -7296,9 +7283,8 @@ var AgUiClient = class {
    * tools (bounded by {@link MAX_TOOL_ROUNDS}).
    *
    * `attachments` ride on the user message as a non-standard field so the
-   * default client store round-trips them for history replay; the agent learns
-   * the ids from the run context (the server's strict validation ignores the
-   * unknown message field), then reads bytes via the `read_attachment` tool.
+   * default store round-trips them for history replay; see
+   * {@link messageAttachments}.
    */
   async send(content, attachments = []) {
     const message = { id: randomUUID2(), role: "user", content };
@@ -7312,7 +7298,7 @@ var AgUiClient = class {
   /**
    * Resume the run loop after a navigating tool's result was supplied
    * post-reload (via {@link addToolResult}). Unlike {@link send}, adds no user
-   * message — it simply continues the conversation already in history.
+   * message; it continues the conversation already in history.
    */
   async resume() {
     await this.#run();
@@ -7454,9 +7440,9 @@ var AgUiClient = class {
       onActivitySnapshotEvent({ event }) {
         h.onActivity(event.activityType, event.content);
       },
-      // Reasoning. `@ag-ui/client` already maps the deprecated
-      // THINKING_* events onto these REASONING_* callbacks, so handling the
-      // reasoning family alone covers both protocol versions.
+      // `@ag-ui/client` maps the deprecated THINKING_* events onto these
+      // REASONING_* callbacks, so the reasoning family alone covers both
+      // protocol versions.
       onReasoningStartEvent() {
         h.onReasoningStart();
       },
@@ -7508,6 +7494,7 @@ var THREAD_SUFFIX = "thread";
 var THREADS_SUFFIX = "threads";
 var MESSAGES_SUFFIX = "messages:";
 var CHECKPOINT_SUFFIX = "checkpoint:";
+var MINTED_SUFFIX = "minted:";
 var TITLE_LIMIT = 60;
 var PREVIEW_LIMIT = 100;
 var DEFAULT_TITLE = "New conversation";
@@ -7527,13 +7514,18 @@ var SessionStorageStore = class {
     }
     const id = randomUUID3();
     sessionStorage.setItem(key, id);
+    sessionStorage.setItem(this.#key(MINTED_SUFFIX + id), "1");
     return id;
   }
+  isUnsent(threadId) {
+    return sessionStorage.getItem(this.#key(MINTED_SUFFIX + threadId)) !== null && sessionStorage.getItem(this.#key(MESSAGES_SUFFIX + threadId)) === null;
+  }
   loadMessages(threadId) {
     return Promise.resolve(this.#readJson(this.#key(MESSAGES_SUFFIX + threadId)));
   }
   saveMessages(threadId, messages) {
     sessionStorage.setItem(this.#key(MESSAGES_SUFFIX + threadId), JSON.stringify(messages));
+    sessionStorage.removeItem(this.#key(MINTED_SUFFIX + threadId));
     this.#touchThread(threadId, messages);
   }
   loadCheckpoint(threadId) {
@@ -7550,6 +7542,7 @@ var SessionStorageStore = class {
   clear(threadId) {
     sessionStorage.removeItem(this.#key(MESSAGES_SUFFIX + threadId));
     sessionStorage.removeItem(this.#key(CHECKPOINT_SUFFIX + threadId));
+    sessionStorage.removeItem(this.#key(MINTED_SUFFIX + threadId));
     this.#writeThreads(this.#readThreads().filter((thread) => thread.threadId !== threadId));
     if (sessionStorage.getItem(this.#key(THREAD_SUFFIX)) === threadId) {
       sessionStorage.removeItem(this.#key(THREAD_SUFFIX));
@@ -7611,12 +7604,11 @@ var SessionStorageStore = class {
     return `${this.#root}:${suffix}`;
   }
   /**
-   * One-time move of pre-namespacing (`ag-ui-chat:*`) keys into this instance's
-   * namespace, so an existing conversation isn't orphaned by the upgrade. Only
-   * this store's own keys move (thread pointer, drawer index, per-thread
-   * messages/checkpoints) — the element's `collapsed`/`theme` keys are left
-   * alone. The first namespaced instance to mount adopts the legacy data; a
-   * second namespace finds it gone and starts fresh.
+   * One-time move of un-namespaced `ag-ui-chat:*` keys into this instance's
+   * namespace, so an existing conversation isn't orphaned. Only this store's own
+   * keys move — the element's `collapsed` / `theme` keys are left alone. The
+   * first namespaced instance to mount adopts the data; a second namespace
+   * finds it gone and starts fresh.
    */
   #migrateLegacyKeys() {
     const legacyRoot = `${KEY_ROOT}:`;
@@ -7697,12 +7689,10 @@ function createHttpAgent(options) {
     headers: options.headers ?? {},
     initialState: { ...options.initialState ?? {} },
     // HttpAgent invokes its configured fetch as a method (`this.fetch(...)`),
-    // which would rebind the global `fetch` to the agent instance and trigger
-    // "Illegal invocation" in browsers. Wrap it so `fetch` is always called as
-    // a free function with the correct receiver. The wrapper also overlays
-    // `getHeaders()` per request, so header rotation (CSRF, short-lived JWT)
-    // reaches the stream even though the agent instance is cached, and applies
-    // the configured cookie policy — the agent's own config has no seam for it.
+    // rebinding the global `fetch` to the agent instance — "Illegal invocation"
+    // in browsers. The wrapper keeps `fetch` a free call, and is also where the
+    // per-request `getHeaders()` overlay and the cookie policy go, the agent's
+    // own config having no seam for either.
     fetch: (url, init) => {
       const fresh = options.getHeaders?.();
       if (fresh === void 0) {
@@ -7715,7 +7705,7 @@ function createHttpAgent(options) {
       return fetch(url, withCredentials({ ...init, headers }, options.credentials));
     },
     // Spread conditionally: under `exactOptionalPropertyTypes` an explicit
-    // `undefined` is not assignable to these optional config fields.
+    // `undefined` is not assignable to an optional field.
     ...options.threadId !== void 0 ? { threadId: options.threadId } : {},
     ...options.initialMessages !== void 0 ? { initialMessages: [...options.initialMessages] } : {}
   });
@@ -7741,6 +7731,10 @@ var RemoteConversationStore = class {
   setActiveThread(threadId) {
     this.#local.setActiveThread(threadId);
   }
+  /** Delegated, so wrapping a store does not lose what it knows about its own ids. */
+  isUnsent(threadId) {
+    return this.#local.isUnsent?.(threadId) === true;
+  }
   saveMessages(threadId, messages) {
     this.#local.saveMessages(threadId, messages);
   }
@@ -7768,6 +7762,9 @@ var RemoteConversationStore = class {
     return rows.filter((row) => !this.#dropped.has(row.thread_id)).map((row) => this.#toMeta(row));
   }
   async loadMessages(threadId) {
+    if (this.#local.isUnsent?.(threadId) === true) {
+      return null;
+    }
     const response = await this.#get(`${this.#url}${encodeURIComponent(threadId)}/`);
     if (response === null || !response.ok) {
       return this.#local.loadMessages(threadId);
@@ -7801,9 +7798,9 @@ var RemoteConversationStore = class {
     return {
       threadId: row.thread_id,
       title: this.#renamed.get(row.thread_id) ?? row.title,
-      // `null` or an unparseable date both become `NaN` (Date.parse's own
-      // signal), which `relativeTime` renders as a neutral label rather than
-      // "~2950w ago" (epoch 0) or "NaNw ago".
+      // `null` and an unparseable date both become NaN, Date.parse's own
+      // signal, which `relativeTime` renders as a neutral label rather than an
+      // epoch-0 or NaN duration.
       updatedAt: row.updated_at === null ? Number.NaN : Date.parse(row.updated_at),
       preview: row.preview
     };
@@ -7847,10 +7844,9 @@ var RunIndex = class {
     this.#credentials = credentials;
   }
   /**
-   * The user's runs, or `[]` when the endpoint is unreachable or answers with
-   * an error. A history affordance that cannot load is empty, never broken:
-   * the caller renders its empty state rather than surfacing a transport fault
-   * the user can do nothing about.
+   * The user's runs, or `[]` when the endpoint is unreachable or errors — the
+   * caller renders its empty state rather than a transport fault the user can
+   * do nothing about.
    */
   async list() {
     try {
@@ -7888,9 +7884,9 @@ var RunIndex = class {
   /**
    * `<mount>/<verb>/<runId>/`, derived from the index URL's own prefix.
    *
-   * Built by string surgery on the trailing `runs/` rather than with `new URL`,
-   * because the configured value may be root-relative (`/agent/runs/`) — the
-   * common case in a Django template — and `new URL` needs an absolute base.
+   * String surgery on the trailing `runs/` rather than `new URL`, because the
+   * configured value may be root-relative (`/agent/runs/`), the common case in
+   * a Django template, and `new URL` needs an absolute base.
    */
   #sibling(verb, runId) {
     const prefix = this.#url.slice(0, -"runs/".length);
@@ -8025,29 +8021,23 @@ var AgUiChat = class extends HTMLElement {
   /** Agent factory; override to inject a custom or fake agent (tests). */
   agentFactory = createHttpAgent;
   /**
-   * Static extra HTTP headers, sent with **every** request this element makes —
-   * the agent run, the thread index and its messages, the tool and skill
-   * catalogs, the run index, uploads and transcription.
+   * Static extra HTTP headers, sent with every request this element makes: the
+   * agent run, the thread index and its messages, the tool and skill catalogs,
+   * the run index, uploads and transcription.
    *
-   * Right for values fixed for the element's lifetime. A credential that
-   * rotates (a short-lived JWT, a re-issued CSRF token) belongs in
-   * {@link getHeaders} instead: this is read at request time, but only a
-   * re-assignment updates it, so a token captured here is pinned until the host
-   * remembers to assign again.
+   * For values fixed for the element's lifetime. A rotating credential belongs
+   * in {@link getHeaders} instead — only a re-assignment updates this, so a
+   * token captured here is pinned until the host assigns again.
    */
   headers = {};
   /**
-   * Live header source, consulted immediately before every request — the way to
-   * supply rotating credentials.
-   *
-   * Set it to a function and each request calls it afresh: a token refreshed by
-   * the host between two requests reaches the second one, with nothing to
-   * re-assign and nothing to keep in sync.
+   * Live header source, called afresh immediately before every request — the
+   * way to supply rotating credentials, with nothing to re-assign or keep in
+   * sync.
    *
-   * Composes with {@link headers} rather than replacing it: the two are merged
-   * per key with `getHeaders()` winning, so a static `X-Client` and a rotating
-   * `Authorization` can be configured independently and neither silently drops
-   * the other.
+   * Composes with {@link headers} rather than replacing it: merged per key with
+   * `getHeaders()` winning, so a static `X-Client` and a rotating
+   * `Authorization` are configured independently and neither drops the other.
    */
   getHeaders = null;
   /**
@@ -8061,37 +8051,31 @@ var AgUiChat = class extends HTMLElement {
   autoConfirm = false;
   /**
    * When true, the built-in `ask_user` frontend tool is offered to the agent:
-   * calling it renders an inline question card (radio choices and/or a free-text
-   * field) and returns the user's answer. Off by default — like the other
-   * built-in tool groups (route / page-action), it is opt-in so it doesn't
-   * change the advertised catalog until a host asks for it.
+   * calling it renders an inline question card and returns the user's answer.
+   * Off by default, like the other built-in tool groups, so the advertised
+   * catalog does not change until a host asks for it.
    */
   askUser = false;
   /**
-   * Optional full replacement for the `ask_user` question UI. When set, calling
-   * `ask_user` invokes this instead of the built-in inline card: the host
-   * renders whatever it likes (a native modal, a framework component, …) and
-   * resolves with the answer. Unset (default) uses the built-in
-   * {@link requestQuestion} card — style that via the `strings` override and the
-   * `question*` CSS `::part()`s. Requires {@link askUser} to be enabled.
+   * Optional full replacement for the `ask_user` question UI, resolving with
+   * the answer; the same seam as {@link approvalRenderer}, styled via `strings`
+   * and the `question*` `::part()`s when left unset. Requires {@link askUser}.
    */
   askUserRenderer = null;
   /**
-   * Optional full replacement for the server-side-tool approval UI. When set, an
-   * approval interrupt invokes this instead of the built-in inline approval
-   * card: the host renders whatever it likes and resolves `true` to approve /
-   * `false` to deny. Unset (default) uses the built-in {@link requestApproval}
-   * card — style that via the `strings` override and the `approval*` CSS
-   * `::part()`s. The gate itself is enabled server-side; this only changes how
-   * the decision is collected.
+   * Optional full replacement for the server-side-tool approval UI: an approval
+   * interrupt invokes this instead of the built-in {@link requestApproval}
+   * card, resolving `true` to approve or `false` to deny. Style the built-in
+   * card via `strings` and the `approval*` `::part()`s instead. The gate itself
+   * is enabled server-side; this only changes how the decision is collected.
    */
   approvalRenderer = null;
   /**
-   * Optional per-call confirmation predicate. When set, it is authoritative:
-   * given a tool name + args it decides whether *this* call needs confirmation
-   * (so one tool can be instant for some args and confirmed for others — what a
-   * static `x-destructive` flag can't express). When unset, the `x-destructive`
-   * schema flag is used. `autoConfirm` short-circuits both.
+   * Optional per-call confirmation predicate. When set it is authoritative,
+   * deciding from the tool name and args whether this particular call needs
+   * confirmation — so one tool can be instant for some args and confirmed for
+   * others, which a static `x-destructive` flag cannot express. When unset the
+   * `x-destructive` flag decides. `autoConfirm` short-circuits both.
    */
   confirmPredicate = null;
   /**
@@ -8112,11 +8096,8 @@ var AgUiChat = class extends HTMLElement {
    * Per-run context provider. Defaults to the compact page map, when a
    * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on.
    *
-   * It used to append a one-line manifest of the message's attachments too.
-   * The server now derives that manifest from the refs riding the messages, so
-   * the client's copy only duplicated it, on exactly the turn a file was
-   * attached. Attachments still reach the agent; they reach it through the
-   * message, which is where they were already.
+   * Attachments are deliberately not restated here: the server derives its own
+   * manifest from the refs riding the messages.
    */
   getContext = () => [
     ...createPageMapContext(this.getPageMap, this.autoInjectPageMap)
@@ -8144,21 +8125,17 @@ var AgUiChat = class extends HTMLElement {
   conversationStore = new SessionStorageStore();
   /**
    * How attached files are uploaded. `null` (default) uses the built-in
-   * multipart `POST` to `data-attachments-url`. Set a custom
-   * {@link UploadHandler} — `(file, onProgress) => Promise<AttachmentRef>` — to
-   * swap the transport (e.g. a `tus-js-client` resumable adapter or
-   * direct-to-S3 multipart) without changing the tray, the chips, or the AG-UI
-   * wire (refs are transport-agnostic). When set, the 📎 affordance appears even
-   * with no `data-attachments-url`; the handler owns its own endpoint + headers.
+   * multipart `POST` to `data-attachments-url`; a custom {@link UploadHandler}
+   * swaps the transport without changing the tray, the chips, or the AG-UI
+   * wire. When set, the 📎 affordance appears even with no
+   * `data-attachments-url`, and the handler owns its own endpoint and headers.
    */
   uploadHandler = null;
   /**
    * How recorded voice clips are transcribed. `null` (default) POSTs the clip
-   * to `data-transcribe-url` (django-ag-ui's `TranscribeView`). Set a custom
-   * {@link TranscribeHandler} — `(audio: Blob) => Promise<string>` — to swap the
-   * transport (a different STT endpoint, a browser Web Speech adapter) without
-   * touching the mic button. When set, the 🎤 affordance appears even with no
-   * `data-transcribe-url`.
+   * to `data-transcribe-url`; a custom {@link TranscribeHandler} swaps the
+   * transport without touching the mic button. When set, the 🎤 affordance
+   * appears even with no `data-transcribe-url`.
    */
   transcribeHandler = null;
   /**
@@ -8177,12 +8154,10 @@ var AgUiChat = class extends HTMLElement {
    */
   skillContext = () => ({});
   /**
-   * Friendly display labels for tool-call cards, keyed by tool name (e.g.
-   * `{ list_projects: "Search projects" }`). Used as a fallback when a tool has
-   * no `x-summary` in its own schema — chiefly **server-side tools** (drf-mcp,
-   * `@tool` registry), whose schema never reaches the browser (AG-UI streams
-   * only the tool-call name). Client tools should prefer `x-summary` on their
-   * schema; this map is the seam for everything else.
+   * Friendly display labels for tool-call cards, keyed by tool name. The
+   * fallback when a tool has no `x-summary` in its own schema, which chiefly
+   * means server-side tools: AG-UI streams only the tool-call name, so their
+   * schema never reaches the browser. Client tools should prefer `x-summary`.
    */
   toolSummaries = {};
   /**
@@ -8216,6 +8191,12 @@ var AgUiChat = class extends HTMLElement {
    * the real output with the generic "executed on the server" fallback.
    */
   #serverSettled = /* @__PURE__ */ new Set();
+  /**
+   * Tool calls made during the current interaction, in the order they started,
+   * so {@link RUN_FINISHED_EVENT} can report them once the whole thing settles.
+   * Spans tool rounds and an approval interrupt; cleared when the event fires.
+   */
+  #runTools = [];
   #root;
   #chat;
   #messages;
@@ -8354,13 +8335,10 @@ var AgUiChat = class extends HTMLElement {
    * Continue `runId` as a **new** run, seeded server-side from its snapshot.
    *
    * Uses a short-lived agent pointed at the resume / fork endpoint and seeded
-   * with **no** history, so the request carries only the turn typed here — the
-   * contract those endpoints assume, since the server supplies the prior turns
-   * from the snapshot and re-sending them would duplicate. Building a separate
-   * agent makes that structural: the main agent keeps its own history, and
-   * "only the new turn" can't be got wrong by forgetting to clear it. The
-   * fresh `run_id` the endpoints also require comes free — a new agent mints
-   * one per run.
+   * with no history, because those endpoints supply the prior turns from the
+   * snapshot and re-sending them would duplicate. A separate agent makes that
+   * structural — the main agent keeps its own history — and mints the fresh
+   * `run_id` the endpoints also require.
    *
    * Handlers are the element's own, so the continuation streams into the same
    * transcript the user is looking at.
@@ -8441,10 +8419,8 @@ var AgUiChat = class extends HTMLElement {
    * when the server streams `STATE_SNAPSHOT` / `STATE_DELTA`. Assigning seeds
    * the next run; reading returns whatever the agent last applied.
    *
-   * Listen for {@link STATE_EVENT} to react to server-driven changes.
-   *
-   * Not to be confused with {@link registerPageState}, which exposes host
-   * state to the agent as ordinary *tools*.
+   * Listen for {@link STATE_EVENT} to react to server-driven changes. Distinct
+   * from {@link registerPageState}, which exposes host state as ordinary tools.
    */
   get sharedState() {
     return this.#client?.state ?? this.#sharedState;
@@ -8460,11 +8436,9 @@ var AgUiChat = class extends HTMLElement {
     }
   }
   /**
-   * @deprecated Renamed to {@link registerPageState}. The old name read as
-   * AG-UI shared-state sync (`STATE_SNAPSHOT` / `STATE_DELTA`), which this
-   * component does not implement — these are ordinary client tools over host
-   * page state. Behaviour is unchanged; this alias will be removed in a future
-   * major.
+   * @deprecated Renamed to {@link registerPageState} — the old name read as
+   * AG-UI shared-state sync. Behaviour is unchanged; the alias will be removed
+   * in a future major.
    */
   registerStateHook(binding) {
     this.registerPageState(binding);
@@ -8531,10 +8505,9 @@ var AgUiChat = class extends HTMLElement {
   /**
    * The built-in `ask_user` frontend tool, or `[]` when {@link askUser} is off.
    *
-   * A generic "ask the user a typed question" primitive: the agent calls it, the
-   * client executes it locally via the normal frontend-tool path (rendering a
-   * {@link requestQuestion} card), and the chosen/typed answer flows back as the
-   * tool result — no new protocol, reusing the machinery already in place.
+   * The agent calls it, the client executes it locally through the normal
+   * frontend-tool path by rendering a {@link requestQuestion} card, and the
+   * answer flows back as the tool result. No new protocol.
    */
   #askUserTool() {
     if (!this.askUser) {
@@ -8610,19 +8583,18 @@ var AgUiChat = class extends HTMLElement {
    * `credentials` mode (`"omit"` / `"same-origin"` / `"include"`). Mirrored to
    * the `credentials` attribute, so markup embeds can set it without script.
    *
-   * `null` (the default) leaves the browser's default of `same-origin` in
-   * place. That default sends **no cookies at all** when the endpoints live on
-   * a different origin from the page — app.example.com calling
-   * api.example.com is cross-origin — and the request goes out anonymously
-   * rather than failing, so the symptom is a 401 from a server that looks
-   * correctly configured. A cookie-authenticated cross-origin deployment wants
-   * `"include"`, plus `Access-Control-Allow-Credentials: true` and a concrete
-   * (non-wildcard) `Access-Control-Allow-Origin` on the server.
+   * `null` (the default) leaves the browser's `same-origin` default in place,
+   * which sends no cookies at all to an endpoint on a different origin — and
+   * the request goes out anonymously rather than failing, so the symptom is a
+   * 401 from a server that looks correctly configured. A cookie-authenticated
+   * cross-origin deployment wants `"include"`, plus
+   * `Access-Control-Allow-Credentials: true` and a concrete, non-wildcard
+   * `Access-Control-Allow-Origin` on the server.
    *
    * Read per request, so a late assignment applies to everything after it.
-   * `"omit"` cannot be honoured by the built-in **upload** transport, which is
-   * an `XMLHttpRequest` and only has a two-state cookie switch; every other
-   * endpoint honours all three modes.
+   * `"omit"` cannot be honoured by the built-in upload transport, an
+   * `XMLHttpRequest` with only a two-state cookie switch; every other endpoint
+   * honours all three modes.
    */
   get credentials() {
     const attr = this.getAttribute("credentials");
@@ -8723,25 +8695,21 @@ var AgUiChat = class extends HTMLElement {
    * The catalog requests the element issues on startup: the tool labels
    * (`data-tools-url`) and the backend skills (`data-skills-url`).
    *
-   * Deliberately one microtask behind `connectedCallback`. A host that
-   * configures the element through a framework ref necessarily does so *after*
-   * inserting the node — React attaches refs and runs layout effects in the
-   * same commit as the insertion, but strictly afterwards — so a request issued
-   * from `connectedCallback` itself goes out before `headers`,
-   * {@link getHeaders} or {@link credentials} exist, and comes back 401 in a
-   * way that reads as a server fault rather than a mis-timed assignment. A
-   * microtask lands after that commit and still before paint.
+   * Deliberately one microtask behind `connectedCallback`. A framework ref is
+   * attached after the node is inserted but within the same commit, so a
+   * request issued from `connectedCallback` itself goes out before `headers`,
+   * {@link getHeaders} or {@link credentials} exist and 401s in a way that
+   * reads as a server fault. A microtask lands after that commit, still before
+   * paint.
    *
-   * Two things it is **not**. It is not a fix for configuration that arrives
-   * later than the commit (a passive `useEffect`, an awaited token fetch):
-   * configure before insertion (`createElement` → configure → `append`) or call
-   * {@link reload} once configured, because a longer timer would hide that race
-   * rather than close it. And it deliberately excludes the *history* replay,
-   * which stays in `connectedCallback`: the replay renders into the transcript,
-   * so deferring it lets a `sendMessage()` issued in the same task land first
-   * and the replay then duplicate it. The thread history is therefore the one
-   * request that can still go out before a ref is attached — {@link reload}
-   * covers it.
+   * It is not a fix for configuration arriving later than the commit (a passive
+   * effect, an awaited token fetch): configure before insertion, or call
+   * {@link reload}, since a longer timer would hide that race rather than close
+   * it.
+   *
+   * The history replay stays in `connectedCallback` on purpose. It renders into
+   * the transcript, so deferring it would let a `sendMessage()` in the same
+   * task land first and be duplicated by the replay.
    */
   #startup() {
     if (!this.#connected) {
@@ -8755,15 +8723,13 @@ var AgUiChat = class extends HTMLElement {
    * the backend skill catalog and the thread's history — with the transport
    * configuration as it stands now.
    *
-   * This is the answer for a host that can only configure the element after the
-   * fact (a token fetched in a passive effect, an async auth handshake): the
-   * startup requests already went out with whatever was set then, and this says
-   * "try again, properly authenticated" without removing and re-inserting the
-   * node.
+   * For a host that can only configure the element after the fact (a token
+   * fetched in a passive effect, an async auth handshake), this re-issues the
+   * startup requests authenticated, without removing and re-inserting the node.
    *
-   * A reload, not a merge — the in-flight run is cancelled and the transcript
-   * is rebuilt from the persisted history, so anything streamed since is
-   * dropped. Call it once, when configuration lands; not between turns.
+   * A reload, not a merge: the in-flight run is cancelled and the transcript is
+   * rebuilt from persisted history, so anything streamed since is dropped. Call
+   * it once, when configuration lands, not between turns.
    */
   async reload() {
     this.#cancelRun();
@@ -8772,12 +8738,10 @@ var AgUiChat = class extends HTMLElement {
     await Promise.all([this.#fetchToolCatalog(), this.#fetchSkills(), this.#rehydrate()]);
   }
   /**
-   * Tear down live resources when the element leaves the DOM (a removed node, a
-   * client-side route swap): cancel the in-flight run so its SSE stream closes,
-   * abort any in-flight uploads so they don't orphan server-side files, and
-   * release the mic so the browser's recording indicator clears. Without this a
-   * removed `<ag-ui-chat>` leaks a streaming request, uploads, and a live
-   * `MediaRecorder`.
+   * Tear down live resources when the element leaves the DOM: cancel the
+   * in-flight run so its stream closes, abort in-flight uploads so they do not
+   * orphan server-side files, and release the mic so the browser's recording
+   * indicator clears. Without this a removed element leaks all three.
    */
   disconnectedCallback() {
     this.#connected = false;
@@ -8788,14 +8752,10 @@ var AgUiChat = class extends HTMLElement {
   /**
    * Read an opt-in flag attribute the way HTML reads a boolean attribute.
    *
-   * Present means on — bare (`data-prompt-chips`), empty
-   * (`data-prompt-chips=""`) or any value except the literal `"false"`. These
-   * were compared against the string `"true"`, so writing the attribute bare —
-   * the spelling every native boolean attribute uses, and the one a reader
-   * reaches for first — silently *disabled* the feature it names, with nothing
-   * to indicate why the chips never appeared.
-   *
-   * `="false"` still turns it off, so an explicit opt-out keeps working.
+   * Present means on: bare (`data-prompt-chips`), empty (`=""`), or any value
+   * except the literal `"false"`. Comparing against `"true"` instead would make
+   * the bare spelling every native boolean attribute uses silently disable the
+   * feature it names. `="false"` still turns it off.
    */
   #flag(name) {
     const value = this.getAttribute(name);
@@ -9021,21 +8981,16 @@ var AgUiChat = class extends HTMLElement {
   /**
    * Act on a picked skill.
    *
-   * A skill that ships no `prompt` is **server-resolved**: the catalog carries
-   * only its name and label, and picking it sends the bare `/name` token for
-   * the agent to expand — from the harness `Skills` capability, or from the
-   * server's own instructions. That is the shape to prefer, because the prompt
-   * then never reaches the browser at all: a skill is often where a project's
-   * internal workflow is written down most plainly, and a catalog endpoint is a
-   * plain GET.
+   * A skill with no `prompt` is server-resolved: picking it sends the bare
+   * `/name` token for the agent to expand, so the wording never reaches the
+   * browser. Prefer that shape — a skill often states a project's internal
+   * workflow most plainly, and a catalog endpoint is a plain GET.
    *
-   * A skill that does carry a `prompt` keeps the older behaviour — the client
-   * fills its `{placeholder}`s from the page and sends (or pre-fills) the text.
-   * Right for a user-facing convenience, and for placeholders only the page can
-   * supply.
+   * A skill carrying a `prompt` has the client fill its `{placeholder}`s from
+   * the page instead, which is right for placeholders only the page can supply.
    *
-   * Either way a pick now **sends**, rather than parking text in the composer
-   * for a second click; `sendImmediately: false` opts back into pre-filling.
+   * Either way a pick sends; `sendImmediately: false` opts into pre-filling the
+   * composer instead.
    */
   #applySkill(skill) {
     if (skill.prompt === void 0) {
@@ -9147,18 +9102,13 @@ var AgUiChat = class extends HTMLElement {
     }
   }
   /**
-   * Which edges the layout is holding still, by measuring rather than guessing.
-   *
-   * A resize has to be computed from the edge that does not move, and which
-   * edge that is belongs to the **host's layout**, not to `placement`: a
-   * floating panel is pinned bottom-right, while an embedded one goes wherever
-   * the page's own CSS puts it — flex-start, flex-end, a grid cell. Mapping
-   * placement to a corner got this wrong for any host that right-aligns the
-   * element, and the symptom is bad enough to read as a broken control: the
-   * panel shrinks when dragged outward, travelling by its opposite corner.
+   * Which edges the layout is holding still, by measuring rather than guessing:
+   * nudge the size by a pixel, see which edges stayed put, and undo. One forced
+   * reflow per drag.
    *
-   * So: nudge the size by a pixel, see which edges stayed put, and undo. One
-   * forced reflow per drag, which is cheap next to being wrong.
+   * `placement` cannot answer this — an embedded panel goes wherever the page's
+   * CSS puts it — and see {@link createResizeHandle} for why guessing produces
+   * a visibly broken control.
    */
   #measureAnchor() {
     const before = this.getBoundingClientRect();
@@ -9192,14 +9142,13 @@ var AgUiChat = class extends HTMLElement {
   /**
    * Write a dragged size onto the host, on the axes this placement leaves free.
    *
-   * ⚠ Writing the custom property rather than inline `width` / `height` does
-   * **not** by itself leave placement in charge — an inline custom property
-   * still outranks a `:host([placement=…])` rule setting the same property, so
-   * a height dragged while floating capped a docked sidebar that had asked for
-   * `100vh`. The cascade cannot arbitrate this; the axis check has to.
-   *
-   * So the rule is explicit: a placement owns the axes it fixes, and a
-   * persisted size is only ever applied to the ones it does not.
+   * Writing the custom property rather than inline `width` / `height` does not
+   * by itself leave placement in charge: an inline custom property still
+   * outranks a `:host([placement=…])` rule setting the same property, so a
+   * height dragged while floating would cap a docked sidebar asking for
+   * `100vh`. The cascade cannot arbitrate this, so the axis check must — a
+   * placement owns the axes it fixes, and a persisted size is applied only to
+   * the ones it leaves free.
    */
   #applySize(size) {
     const axis = this.#resizeAxis();
@@ -9272,12 +9221,10 @@ var AgUiChat = class extends HTMLElement {
    * Open the thread-history drawer: the imperative route to the control that
    * renders as `::part(history-button)`.
    *
-   * A host that hides `::part(header)` to render its own title bar hides the
-   * history, new-chat and collapse buttons with it — and thread switching then
-   * has no route at all, because those controls live inside the header. Each of
-   * them has a method, so a host chrome can rebuild the set: this one,
-   * {@link openCheckpoints}, {@link newChat}, {@link toggleCollapsed} and
-   * {@link toggleTheme}.
+   * A host that hides `::part(header)` for its own title bar hides the history,
+   * new-chat and collapse buttons with it. Each has a method so that chrome can
+   * be rebuilt: this one, {@link openCheckpoints}, {@link newChat},
+   * {@link toggleCollapsed} and {@link toggleTheme}.
    */
   openThreads() {
     void this.#refreshDrawer();
@@ -9378,23 +9325,17 @@ var AgUiChat = class extends HTMLElement {
   /**
    * Notice a previous run that never produced a response.
    *
-   * {@link AgUiClient.send} persists the user's message *before* starting the
-   * run, so a transcript whose last entry is that user message means nothing
-   * ever came back: the page navigated or reloaded mid-run, the tab closed, or
-   * the process died. No extra persistence is needed to detect it — the shape
-   * of the transcript already says so, which is why this needs no
-   * {@link ClientConversationStore} method and no `pagehide` listener (neither
-   * of which fires on a crash or a force-quit anyway).
+   * {@link AgUiClient.send} persists the user's message before starting the
+   * run, so a transcript ending on that user message means nothing came back.
+   * The transcript's shape alone detects it, needing no store method and no
+   * `pagehide` listener — neither of which fires on a crash or force-quit.
    *
-   * The *agent*-initiated reload is not this case: a navigating tool leaves a
-   * checkpoint and resumes, which is why the caller returns early on one before
-   * reaching here.
+   * An agent-initiated reload is not this case: a navigating tool leaves a
+   * checkpoint and resumes, so the caller returns early on one.
    *
-   * Deliberately a notice and never a resume. AG-UI has no
-   * resume-an-aborted-run primitive; re-sending the accumulated messages is
-   * semantically a **new** run, so any server-side tool the agent had already
-   * executed before the interruption would run a second time. Saying plainly
-   * that the answer was lost is the honest option, and the user can re-ask.
+   * Deliberately a notice, never a resume. AG-UI has no resume-an-aborted-run
+   * primitive, and re-sending the accumulated messages is semantically a new
+   * run, so any server-side tool already executed would run a second time.
    */
   /**
    * Build a round's context, recording which page it describes.
@@ -9447,19 +9388,16 @@ var AgUiChat = class extends HTMLElement {
       if (text2 !== "") {
         this.appendMessage(MESSAGE_ROLE.ASSISTANT, text2).classList.add("message--restored");
       }
-      const toolCalls = message.toolCalls;
-      if (toolCalls !== void 0) {
-        for (const call of toolCalls) {
-          const restored = {
-            id: call.id,
-            name: call.function.name,
-            args: this.#parseArgs(call.function.arguments)
-          };
-          if (this.#noticeIfSkillLoad(restored)) {
-            continue;
-          }
-          this.#cardFor(restored);
+      for (const call of restoredToolCalls(message.toolCalls)) {
+        const restored = {
+          id: call.id,
+          name: call.function.name,
+          args: this.#parseArgs(call.function.arguments)
+        };
+        if (this.#noticeIfSkillLoad(restored)) {
+          continue;
         }
+        this.#cardFor(restored);
       }
       return;
     }
@@ -9470,8 +9408,11 @@ var AgUiChat = class extends HTMLElement {
       }
     }
   }
-  /** Parse a tool call's JSON `arguments` string from history into an object. */
+  /** Parse a tool call's JSON `arguments` from history into an object. */
   #parseArgs(raw) {
+    if (typeof raw !== "string") {
+      return {};
+    }
     try {
       const parsed = JSON.parse(raw);
       if (typeof parsed === "object" && parsed !== null) {
@@ -9500,13 +9441,12 @@ var AgUiChat = class extends HTMLElement {
   /**
    * Append a message bubble and return it.
    *
-   * Assistant content is rendered as sanitised markdown/HTML; user content
-   * stays literal text (no need to parse what the user typed, and it avoids
-   * rendering user-authored markup).
+   * Assistant content renders as sanitised markdown/HTML; user content stays
+   * literal text, which also avoids rendering user-authored markup.
    *
-   * Assistant bubbles land in the current answer group, opening one if
-   * needed; a user bubble closes the prior group and sits directly in the list
-   * (the well wraps the *assistant* turn, the user message precedes it).
+   * Assistant bubbles land in the current answer group, opening one if needed;
+   * a user bubble closes the prior group and sits directly in the list, the
+   * well wrapping only the assistant turn.
    */
   appendMessage(role, content) {
     const bubble = document.createElement("div");
@@ -9699,12 +9639,9 @@ var AgUiChat = class extends HTMLElement {
    * Build a header control button: a named slot a host can project markup into,
    * with the built-in glyph as the slot's fallback.
    *
-   * The glyph used to be the button's own `textContent`, which left a host able
-   * to restyle the control through its `part` but unable to replace it — a CSS
-   * `content` override could swap one character for another, and nothing could
-   * supply a brand `<img>` or `<svg>`. This is the same slot-with-fallback
-   * idiom the header icon already uses, so existing embeds render exactly as
-   * before.
+   * The slot is what lets a host replace the mark with its own `<img>` or
+   * `<svg>` rather than only restyle it through the `part`; the same
+   * slot-with-fallback idiom the header icon uses.
    */
   #headerButton(modifier, label, glyph) {
     const button2 = document.createElement("button");
@@ -9905,19 +9842,16 @@ var AgUiChat = class extends HTMLElement {
    * Send a message as if the user had typed it — renders the user bubble,
    * dispatches {@link SUBMIT_EVENT}, and starts the run.
    *
-   * The programmatic half of the composer, for a host driving its own input
-   * (a "Ask about this order" button, a command palette, a custom composer
-   * replacing the built-in one). Everything the built-in Send does happens
-   * here; Send itself now reads the composer, clears it, and calls this.
+   * The programmatic half of the composer, for a host driving its own input.
+   * Everything the built-in Send does happens here; Send reads the composer,
+   * clears it, and calls this.
    *
-   * `attachments` are durable {@link AttachmentRef}s — the shape
-   * {@link attachFile}'s upload resolves to, and the shape
-   * {@link ATTACHMENT_EVENT} reports. Pass them to attach files to the message.
+   * `attachments` are durable {@link AttachmentRef}s — what {@link attachFile}
+   * resolves to and what {@link ATTACHMENT_EVENT} reports.
    *
-   * No-ops while a run is in flight (a second concurrent run would orphan the
-   * first) and for an entirely empty message. Unlike the built-in Send, this
-   * does **not** consult the tray: what you pass is what is sent, so a host
-   * composer stays in charge of its own state.
+   * No-ops on an empty message, and while a run is in flight, since a second
+   * concurrent run would orphan the first. Unlike the built-in Send it does not
+   * consult the tray: what you pass is what is sent.
    */
   async sendMessage(content, attachments = []) {
     if (this.#running || content === "" && attachments.length === 0) {
@@ -9941,11 +9875,11 @@ var AgUiChat = class extends HTMLElement {
    * picker and drag-and-drop do — validation, progress chip, and all.
    *
    * Returns `false` when uploads are not configured (no `data-attachments-url`
-   * and no {@link uploadHandler}), which is the only way for a host to tell;
-   * the tray does not exist to report anything in that case.
+   * and no {@link uploadHandler}) — the only signal a host gets, since the tray
+   * does not exist to report anything then.
    *
    * Uploading is asynchronous: watch {@link ATTACHMENT_EVENT} for the resulting
-   * {@link AttachmentRef}, and pass it to {@link sendMessage} once `pending`
+   * {@link AttachmentRef} and pass it to {@link sendMessage} once `pending`
    * reaches zero.
    */
   attachFile(file) {
@@ -10090,12 +10024,11 @@ var AgUiChat = class extends HTMLElement {
    * Render an approval card per server-side-tool interrupt and collect the
    * user's decisions (approve → run it, deny → decline it).
    *
-   * The run is suspended on these cards; a Stop while any is open aborts the
+   * The run is suspended on these cards. A Stop while any is open aborts the
    * shared {@link #confirmAbort} controller, resolving every still-open card as
-   * denied (and the client loop then sees the cancellation and stops). An
-   * approved tool runs on the follow-up (resume) run and streams its result
-   * back into the same pending card; a denied one is settled here, since no
-   * result will ever arrive for it.
+   * denied. An approved tool runs on the follow-up resume run and streams its
+   * result into the same pending card; a denied one settles here, since no
+   * result will ever arrive.
    */
   async #resolveInterrupts(interrupts) {
     const responses = {};
@@ -10103,8 +10036,9 @@ var AgUiChat = class extends HTMLElement {
     this.#hidePending();
     for (const interrupt of interrupts) {
       const request = {};
-      if (interrupt.message !== void 0) {
-        request.message = interrupt.message;
+      const phrase = confirmPhrase(interrupt) ?? interrupt.message;
+      if (phrase !== void 0) {
+        request.message = phrase;
       }
       const card = interrupt.toolCallId !== void 0 ? this.#toolCards.get(interrupt.toolCallId) : void 0;
       const toolName = card?.element.getAttribute("data-tool-name");
@@ -10162,6 +10096,7 @@ var AgUiChat = class extends HTMLElement {
         if (this.#noticeIfSkillLoad(call)) {
           return;
         }
+        this.#runTools.push({ id: call.id, name: call.name });
         this.#cardFor(call);
       },
       onActivity: (activityType, content) => {
@@ -10215,9 +10150,33 @@ var AgUiChat = class extends HTMLElement {
         }
         this.#currentGroup = null;
         this.#thoughts = null;
+        this.#dispatchRunFinished();
       }
     };
   }
+  /**
+   * Tell the host the interaction is over and what ran in it.
+   *
+   * Last thing in `onSettled`, so a listener that refetches sees a transcript
+   * that has already stopped changing. `side` is read from the streamed-result
+   * bookkeeping rather than from the tool list: whether a call executed on the
+   * server is a fact about the run, and a name can appear on both sides across a
+   * conversation.
+   */
+  #dispatchRunFinished() {
+    const tools = this.#runTools.map(({ id, name }) => ({
+      name,
+      side: this.#serverSettled.has(id) ? "server" : "client"
+    }));
+    this.#runTools = [];
+    this.dispatchEvent(
+      new CustomEvent(RUN_FINISHED_EVENT, {
+        detail: { tools },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   /** A muted "⏹ Stopped" line in the transcript (distinct from the ⚠️ error bubble). */
   #appendStoppedNote() {
     const note = document.createElement("div");
@@ -10329,6 +10288,20 @@ var AgUiChat = class extends HTMLElement {
     return card;
   }
 };
+function confirmPhrase(interrupt) {
+  const phrase = interrupt.metadata?.[X_CONFIRM_KEY];
+  return typeof phrase === "string" && phrase.trim() !== "" ? phrase : void 0;
+}
+function restoredToolCalls(value) {
+  return Array.isArray(value) ? value.filter(isRestoredToolCall) : [];
+}
+function isRestoredToolCall(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const call = value;
+  return typeof call.id === "string" && typeof call.function?.name === "string";
+}
 function skillNameFrom(call) {
   if (call.name !== LOAD_CAPABILITY_TOOL) {
     return null;
@@ -10381,7 +10354,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.23.0";
+var VERSION = "0.24.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -10396,6 +10369,7 @@ export {
   MAX_TOOL_ROUNDS,
   MESSAGE_ROLE,
   PAGE_ACTIONS,
+  RUN_FINISHED_EVENT,
   RemoteConversationStore,
   RunIndex,
   STATE_EVENT,