@artooi/ag-ui-web-component 0.22.0 → 0.23.1

package/dist/index.js

@@ -40,6 +40,10 @@ var ICON_STOP = `<svg class="glyph glyph--solid" viewBox="0 0 24 24" aria-hidden
 var ICON_ATTACH = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M17 8.5V15a5 5 0 0 1-10 0V7a3 3 0 0 1 6 0v7.5a1 1 0 0 1-2 0V8.5"/></svg>`;
 var ICON_VOICE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/><path d="M5 11v1a7 7 0 0 0 14 0v-1"/><path d="M12 19v3"/></svg>`;
 var ICON_LAUNCHER = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H9l-5 4z"/></svg>`;
+var ICON_FILE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>`;
+var ICON_FILE_IMAGE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.5"/><path d="M4.5 17.5 9 13.5l3.5 3 3-2.5 4.5 4"/></svg>`;
+var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><rect class="glyph--solid" x="7.5" y="13.5" width="9" height="4.5" rx="1"/></svg>`;
+var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13.5h7M8.5 17h4.5"/></svg>`;
 
 // src/skills/fill_template.ts
 var PLACEHOLDER_RE = /\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g;
@@ -79,8 +83,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);
@@ -723,7 +727,7 @@ function renderChip(ref) {
   const icon = document.createElement("span");
   icon.className = "attachment-chip-icon";
   icon.setAttribute("part", "attachment-chip-icon");
-  icon.textContent = iconFor(ref.mime);
+  icon.innerHTML = iconFor(ref.mime);
   icon.setAttribute("aria-hidden", "true");
   const name = document.createElement("span");
   name.className = "attachment-chip-name";
@@ -739,15 +743,15 @@ function renderChip(ref) {
 }
 function iconFor(mime) {
   if (mime.startsWith("image/")) {
-    return "\u{1F5BC}";
+    return ICON_FILE_IMAGE;
   }
   if (mime === "application/pdf") {
-    return "\u{1F4D5}";
+    return ICON_FILE_PDF;
   }
   if (mime.startsWith("text/")) {
-    return "\u{1F4C4}";
+    return ICON_FILE_TEXT;
   }
-  return "\u{1F4CE}";
+  return ICON_FILE;
 }
 function formatBytes(bytes) {
   if (bytes < 1024) {
@@ -913,7 +917,7 @@ var AttachmentTray = class {
     const icon = document.createElement("span");
     icon.className = "attachment-chip-icon";
     icon.setAttribute("part", "attachment-chip-icon");
-    icon.textContent = iconFor(item.file.type);
+    icon.innerHTML = iconFor(item.file.type);
     icon.setAttribute("aria-hidden", "true");
     const name = document.createElement("span");
     name.className = "attachment-chip-name";
@@ -4473,12 +4477,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
@@ -4505,11 +4508,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);
 
@@ -4562,9 +4563,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));
@@ -4588,7 +4589,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);
@@ -4680,11 +4681,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);
@@ -4702,9 +4703,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 {
@@ -4813,13 +4813,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;
@@ -4980,20 +4979,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;
 }
@@ -5004,11 +5001,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:
@@ -5035,10 +5032,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;
@@ -5078,7 +5074,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;
@@ -5204,13 +5200,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;
@@ -5256,12 +5248,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;
@@ -5518,8 +5508,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;
@@ -5527,6 +5515,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;
@@ -5549,10 +5539,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. */
@@ -5649,20 +5637,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;
@@ -5723,10 +5710,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;
@@ -5919,11 +5905,25 @@ var STYLES = `
   display: contents;
 }
 
+/* The padding is the only separation the tray gets: its slot is display:
+   contents, so the tray is a direct child of the .chat column, and that column
+   sets no gap. The bottom value keeps a chip off the composer's top edge.
+   The inline value here is only the default: the page placement overrides
+   padding-inline further down to compute its reading-column gutter, and wins
+   on specificity whichever way this declaration is written. Read the two
+   together before changing either. */
 .attachment-tray {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  padding: 8px 12px 0;
+  padding: 8px 12px;
+}
+
+/* The tray sets the hidden property while empty, and an author display beats
+   the UA stylesheet's rule for it, so without this the empty tray keeps
+   laying out and its padding is permanent dead space above the composer. */
+.attachment-tray[hidden] {
+  display: none;
 }
 
 .attachment-chips {
@@ -5959,15 +5959,28 @@ var STYLES = `
   overflow-wrap: anywhere;
 }
 
+/* A chip carries its own text colour because it carries its own background.
+   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;
   gap: 6px;
+  /* Without this the 100% below caps the content box, so the chip still
+     overflows its container by its own padding and border. Invisible while a
+     character cap kept names short; routine once the container is what bounds
+     the name. */
+  box-sizing: border-box;
   max-width: 100%;
   padding: 4px 8px;
   border: 1px solid var(--_border);
   border-radius: 999px;
   background: var(--_assistant-bg);
+  color: var(--_text);
   font-size: 0.85em;
   position: relative;
 }
@@ -5977,11 +5990,31 @@ var STYLES = `
   color: var(--_danger);
 }
 
+/* The type mark. Painted from currentColor, so it carries the chip's state
+   with it and turns red along with an errored one; muted by opacity rather
+   than a colour, which is what keeps that true. Sized from the chip's own text
+   rather than --ag-ui-glyph-size, the way an icon holder's glyph takes the
+   holder's size: the composer's 18px buttons would make a chip button-height. */
+.attachment-chip-icon {
+  display: inline-flex;
+  flex: none;
+  opacity: 0.75;
+}
+
+.attachment-chip-icon .glyph {
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* No character cap: the chip is already max-width 100%, so its container is
+   what bounds the name, and a fixed cap only truncated names the chip had room
+   for. min-width: 0 is what lets the flex item shrink past its content, so the
+   ellipsis appears at the container edge instead of the chip overflowing. */
 .attachment-chip-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 14ch;
+  min-width: 0;
 }
 
 .attachment-chip-size {
@@ -6626,9 +6659,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) {
@@ -6986,11 +7019,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);
@@ -7105,11 +7135,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;
@@ -7191,10 +7220,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;
@@ -7244,9 +7272,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 };
@@ -7260,7 +7287,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();
@@ -7402,9 +7429,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();
       },
@@ -7559,12 +7586,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}:`;
@@ -7645,12 +7671,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) {
@@ -7663,7 +7687,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] } : {}
   });
@@ -7749,9 +7773,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
     };
@@ -7795,10 +7819,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 {
@@ -7836,9 +7859,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);
@@ -7973,29 +7996,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;
   /**
@@ -8009,37 +8026,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;
   /**
@@ -8057,14 +8068,14 @@ var AgUiChat = class extends HTMLElement {
     ...this.#toolRegistry.tools()
   ];
   /**
-   * Per-run context provider. Defaults to the compact page map (when a
-   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on)
-   * plus a one-line manifest of the files attached to the message being sent,
-   * so the agent knows which `read_attachment` ids are available.
+   * Per-run context provider. Defaults to the compact page map, when a
+   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on.
+   *
+   * Attachments are deliberately not restated here: the server derives its own
+   * manifest from the refs riding the messages.
    */
   getContext = () => [
-    ...createPageMapContext(this.getPageMap, this.autoInjectPageMap),
-    ...this.#attachmentContext()
+    ...createPageMapContext(this.getPageMap, this.autoInjectPageMap)
   ];
   /**
    * Navigable routes the agent can jump to via the built-in `route.*` tools.
@@ -8089,21 +8100,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;
   /**
@@ -8122,12 +8129,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 = {};
   /**
@@ -8196,8 +8201,6 @@ var AgUiChat = class extends HTMLElement {
   #voice = null;
   /** Whether the element is currently in the DOM; gates the connect-time warning. */
   #connected = false;
-  /** Refs attached to the message currently being sent (the context manifest). */
-  #runAttachments = [];
   #client = null;
   // Seed for the next client. Once one exists it owns the live value (the
   // agent applies STATE_SNAPSHOT / STATE_DELTA into it), so this is only the
@@ -8301,13 +8304,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.
@@ -8388,10 +8388,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;
@@ -8407,11 +8405,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);
@@ -8478,10 +8474,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) {
@@ -8557,19 +8552,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");
@@ -8670,25 +8664,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.
+   *
+   * 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.
    *
-   * 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.
+   * 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) {
@@ -8702,15 +8692,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();
@@ -8719,12 +8707,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;
@@ -8735,14 +8721,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);
@@ -8884,22 +8866,6 @@ var AgUiChat = class extends HTMLElement {
       }
     });
   }
-  /** The one-line manifest of the message's attachments, for the run context. */
-  #attachmentContext() {
-    if (this.#runAttachments.length === 0) {
-      return [];
-    }
-    const lines = this.#runAttachments.map(
-      (ref) => `- ${ref.name} (id: ${ref.id}, ${ref.mime || "unknown type"}, ${ref.size} bytes)`
-    );
-    return [
-      {
-        description: "Files the user attached to this message",
-        value: `${lines.join("\n")}
-Use the read_attachment tool with an id to read a file's contents.`
-      }
-    ];
-  }
   /**
    * When `data-threads-url` is set, route thread enumeration / load / rename /
    * delete through that server endpoint (wrapping the current store as the
@@ -8984,21 +8950,16 @@ Use the read_attachment tool with an id to read a file's contents.`
   /**
    * 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) {
@@ -9110,18 +9071,13 @@ Use the read_attachment tool with an id to read a file's contents.`
     }
   }
   /**
-   * Which edges the layout is holding still, by measuring rather than guessing.
+   * 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.
    *
-   * 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.
-   *
-   * 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();
@@ -9155,14 +9111,13 @@ Use the read_attachment tool with an id to read a file's contents.`
   /**
    * 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();
@@ -9235,12 +9190,10 @@ Use the read_attachment tool with an id to read a file's contents.`
    * 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();
@@ -9279,7 +9232,6 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#toolCards.clear();
     this.#serverSettled.clear();
     this.#initialMessages = [];
-    this.#runAttachments = [];
     this.#attachTray?.clear();
     this.#messages.replaceChildren(this.#emptyWrap);
     this.#updateEmptyState();
@@ -9342,23 +9294,17 @@ Use the read_attachment tool with an id to read a file's contents.`
   /**
    * 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.
@@ -9411,19 +9357,16 @@ Use the read_attachment tool with an id to read a file's contents.`
       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;
     }
@@ -9434,8 +9377,11 @@ Use the read_attachment tool with an id to read a file's contents.`
       }
     }
   }
-  /** 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) {
@@ -9464,13 +9410,12 @@ Use the read_attachment tool with an id to read a file's contents.`
   /**
    * 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");
@@ -9663,12 +9608,9 @@ Use the read_attachment tool with an id to read a file's contents.`
    * 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");
@@ -9869,19 +9811,16 @@ Use the read_attachment tool with an id to read a file's contents.`
    * 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) {
@@ -9891,7 +9830,6 @@ Use the read_attachment tool with an id to read a file's contents.`
     if (attachments.length > 0) {
       bubble.appendChild(renderAttachmentChips(attachments));
     }
-    this.#runAttachments = attachments;
     this.dispatchEvent(
       new CustomEvent(SUBMIT_EVENT, {
         detail: { content, attachments },
@@ -9906,11 +9844,11 @@ Use the read_attachment tool with an id to read a file's contents.`
    * 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) {
@@ -10055,12 +9993,11 @@ Use the read_attachment tool with an id to read a file's contents.`
    * 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 = {};
@@ -10169,7 +10106,6 @@ Use the read_attachment tool with an id to read a file's contents.`
         this.#hidePending();
         this.#setRunning(false);
         this.#streamingBubble = null;
-        this.#runAttachments = [];
         for (const card of this.#toolCards.values()) {
           if (!card.settled) {
             card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
@@ -10295,6 +10231,16 @@ Use the read_attachment tool with an id to read a file's contents.`
     return card;
   }
 };
+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;
@@ -10347,7 +10293,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.22.0";
+var VERSION = "0.23.1";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,