@artooi/ag-ui-web-component 0.23.1 → 0.25.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"
@@ -17,6 +18,7 @@ var READ_PAGE_TOOL = "read_page";
 var MAX_TOOL_ROUNDS = 10;
 var TOOL_CALL_STATUS = {
   PENDING: "pending",
+  DEFERRED: "deferred",
   DONE: "done",
   ERROR: "error",
   DECLINED: "declined"
@@ -553,6 +555,7 @@ var DEFAULT_UI_STRINGS = {
   transcribing: "Transcribing\u2026",
   transcriptionFailed: "Transcription failed",
   toolRunning: "running\u2026",
+  toolDeferred: "waiting for you",
   toolDone: "\u2713 done",
   toolError: "\u26A0 error",
   toolDeclined: "\u2298 declined",
@@ -1121,12 +1124,27 @@ var CheckpointMenu = class {
     const row = document.createElement("div");
     row.className = "checkpoint-row";
     row.setAttribute("part", "checkpoint-row");
+    const preview = run.preview !== void 0 && run.preview !== null && run.preview !== "" ? run.preview : null;
+    const time = run.started_at === null ? null : relativeTime(Date.parse(run.started_at), Date.now(), this.#strings);
     const label = document.createElement("span");
     label.className = "checkpoint-label";
     label.setAttribute("part", "checkpoint-label");
-    label.textContent = run.started_at === null ? run.run_id : relativeTime(Date.parse(run.started_at), Date.now(), this.#strings);
-    label.title = run.run_id;
+    label.textContent = preview ?? time ?? run.run_id;
     row.append(label);
+    if (preview !== null && time !== null) {
+      const when = document.createElement("span");
+      when.className = "checkpoint-time";
+      when.setAttribute("part", "checkpoint-time");
+      when.textContent = time;
+      row.append(when);
+    } else if (run.started_at !== null) {
+      const short = document.createElement("span");
+      short.className = "checkpoint-id";
+      short.setAttribute("part", "checkpoint-id");
+      short.textContent = run.run_id.slice(0, 8);
+      short.title = run.run_id;
+      row.append(short);
+    }
     if (run.parent_run_id !== null) {
       const branch = document.createElement("span");
       branch.className = "checkpoint-branch";
@@ -5392,18 +5410,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
@@ -5432,6 +5460,13 @@ var STYLES = `
   to { transform: rotate(360deg); }
 }
 
+/* Deferred: no spinner, because nothing is spinning. A steady accent dot, since
+   the state is waiting-on-you rather than an outcome. */
+.tool-call[data-status="deferred"] .tool-call-icon {
+  border-radius: 50%;
+  background: var(--_accent);
+}
+
 /* Settled: a themeable glyph coloured by outcome. */
 .tool-call[data-status="done"] .tool-call-icon::before {
   content: var(--_tool-icon-done);
@@ -5474,6 +5509,10 @@ var STYLES = `
   color: var(--_muted);
 }
 
+.tool-call[data-status="deferred"] .tool-call-status {
+  color: var(--_accent);
+}
+
 .tool-call[data-status="done"] .tool-call-status {
   color: var(--_success);
 }
@@ -5567,12 +5606,41 @@ var STYLES = `
 
 /* A pending card has no result yet, and in the modes where the arguments are
    hidden too there is nothing behind the toggle. Hide the control rather than
-   offer one that expands onto nothing. */
+   offer one that expands onto nothing. A deferred card is the same, and its
+   arguments are shown unconditionally by the rules below. */
 .tool-call[data-status="pending"] .tool-call-toggle,
+.tool-call[data-status="deferred"] .tool-call-toggle,
 :host([data-tool-display="inline"]) .tool-call[data-status="pending"] .tool-call-toggle {
   display: none;
 }
 
+/* The approval prompt for a gated call, rendered inside that call's own card.
+   Empty on every card nobody is being asked about, so it collapses instead of
+   adding a gap to each one. */
+.tool-call-approval:empty {
+  display: none;
+}
+
+.tool-call-approval {
+  margin-top: 8px;
+}
+
+/* A card that is asking a question shows what it is asking about, in every
+   display mode. Three gated calls of one tool ask the same words, so the
+   arguments are the only thing telling them apart, and a density setting must
+   not be able to hide the answer to "which one is this". */
+:host([data-tool-display="minimal"]) .tool-call[data-status="deferred"] .tool-call-body {
+  display: flex;
+}
+
+/* The arguments region only, never every section: the result region carries the
+   hidden attribute until a result exists, and a display value here overrides it,
+   framing an empty RESULT heading under the question. */
+:host([data-tool-display="compact"]) .tool-call[data-status="deferred"] .tool-call-section--args,
+:host([data-tool-display="inline"]) .tool-call[data-status="deferred"] .tool-call-section--args {
+  display: flex;
+}
+
 .tool-call-toggle {
   align-self: flex-start;
   border: none;
@@ -5792,6 +5860,20 @@ var STYLES = `
   opacity: 0.6;
 }
 
+/* The same trap the attachment tray carries a note about, two rules along: an
+   author display beats the UA stylesheet's rule for the hidden property, so a
+   button the element has explicitly hidden keeps laying out and painting. The
+   clip is hidden until a host supplies an upload handler or an attachments URL,
+   and without this it is a visible control that cannot do anything.
+
+   The mic needs no such rule, and the asymmetry is worth knowing before adding
+   one: it is not hidden when unconfigured, it is never built. The voice wiring
+   returns before constructing the button, leaving only an empty voice slot that
+   is display: contents. A hidden-state rule for the mic would match nothing. */
+.attach-btn[hidden] {
+  display: none;
+}
+
 /* Send closes the row on the right: a circle, the only filled control in the
    composer, so "the thing that acts" reads at a glance. */
 .send {
@@ -6401,47 +6483,123 @@ var STYLES = `
   opacity: 0.7;
 }
 
+/* A row is a label and two buttons, and nothing about the row itself is
+   pressable. It used to light up on hover, which is the affordance of something
+   clickable and made the buttons look like decoration on a clickable strip. The
+   resting surface groups the row instead, so hover can mean what it says: only
+   the buttons respond to it. */
+/* A row is a label and two buttons, and nothing about the row itself is
+   pressable. It used to light up on hover, which is the affordance of something
+   clickable and made the buttons look like decoration on a clickable strip. The
+   resting surface groups the row instead, so hover can mean what it says: only
+   the buttons respond to it.
+
+   It wraps for the same reason the tool-call head does. Every child but the label
+   is fixed-width, so in a narrow panel the label is the only thing that can give
+   -- and a flex-basis of zero lets it give everything. Adding the run id was
+   enough to crush "just now" to zero pixels: present, correct, and invisible.
+   Wrapping puts the buttons on their own line instead. */
 .checkpoint-row {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.25rem;
+  padding: 0.3125rem 0.4375rem;
   border-radius: 0.375rem;
-}
-
-.checkpoint-row:hover {
   background: var(--_hover);
 }
 
+/* Grows into spare room, and refuses to shrink past the shortest thing it ever
+   says. A time is short and bounded, so there is no case for eliding it. */
 .checkpoint-label {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 7ch;
   font-size: 0.8125rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* When the label holds the run's first message, the time moves here: still worth
+   showing, no longer what identifies the row. Muted and unshrinkable, so it does
+   not compete with the words beside it. */
+.checkpoint-time {
+  flex: 0 0 auto;
+  font-size: 0.6875rem;
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+/* Enough of the run id to tell two runs apart when both say "just now". Muted
+   and monospaced: it is a reference, not a name. */
+.checkpoint-id {
+  flex: 0 0 auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6875rem;
+  opacity: 0.55;
+}
+
+/* On the panel's own surface, not the row's: the row now paints the hover token
+   itself, and a badge the same colour as what it sits on is not a badge. */
 .checkpoint-branch {
   font-size: 0.6875rem;
   padding: 0 0.375rem;
   border-radius: 999px;
-  background: var(--_hover);
+  background: var(--_assistant-bg);
   opacity: 0.8;
 }
 
+/* The two things in the row that actually do something, so they are the two
+   things that look like it: a filled surface at rest rather than a transparent
+   outline, which on top of the old row highlight was nearly invisible. */
 .checkpoint-action {
   font: inherit;
   font-size: 0.75rem;
+  line-height: 1.4;
   cursor: pointer;
-  padding: 0.125rem 0.5rem;
+  padding: 0.1875rem 0.5625rem;
   border: 1px solid var(--_border);
   border-radius: 0.375rem;
-  background: transparent;
+  background: var(--_bg);
   color: inherit;
+  transition:
+    background var(--_motion) var(--_ease),
+    border-color var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease);
 }
 
-.checkpoint-action:hover {
+/* Resume is what a reader wants nine times in ten; fork is the deliberate choice
+   beside it. Filled and outlined, the same pair the confirmation and approval
+   cards already use for their primary and secondary action. */
+.checkpoint-resume {
+  font-weight: 600;
+  border-color: var(--_accent);
+  background: var(--_accent);
+  color: #ffffff;
+}
+
+.checkpoint-fork:hover {
   background: var(--_hover);
+  border-color: var(--_accent);
+}
+
+/* The filled one cannot go lighter on hover without losing its contrast with the
+   white label, so it dims instead. */
+.checkpoint-resume:hover {
+  opacity: 0.88;
+}
+
+/* Pressed: a pixel down, so the click is felt as well as seen. */
+.checkpoint-action:active {
+  transform: translateY(1px);
+}
+
+/* Keyboard focus was invisible here, in a panel that traps focus and is reached
+   by Tab -- so the one navigation path guaranteed to land on these buttons was
+   the one with nothing to show for it. */
+.checkpoint-action:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
 }
 
 .drawer-backdrop {
@@ -6938,6 +7096,7 @@ var ThreadDrawer = class {
 function statusLabels(strings) {
   return {
     [TOOL_CALL_STATUS.PENDING]: strings.toolRunning,
+    [TOOL_CALL_STATUS.DEFERRED]: strings.toolDeferred,
     [TOOL_CALL_STATUS.DONE]: strings.toolDone,
     [TOOL_CALL_STATUS.ERROR]: strings.toolError,
     [TOOL_CALL_STATUS.DECLINED]: strings.toolDeclined
@@ -6960,6 +7119,20 @@ function formatPayload(text2) {
 var ToolCallCard = class {
   /** The card's root element; append this into the message list. */
   element;
+  /**
+   * Where a question about *this* call renders — the approval prompt for a
+   * server-side tool the run deferred.
+   *
+   * It belongs to the card rather than to the transcript because a run can defer
+   * several calls at once, and a prompt written per *tool* ("Add this event to
+   * the board?") is identical for every one of them. Rendered into the answer
+   * group they were three anonymous copies of one question, below the three
+   * cards they gated; rendered here, position identifies them and the arguments
+   * are already on screen above the question.
+   *
+   * Empty until used, and hidden while empty by the shadow CSS.
+   */
+  approvalSlot;
   #status;
   #decision;
   #toggle;
@@ -7015,7 +7188,24 @@ var ToolCallCard = class {
     body.className = "tool-call-body";
     body.setAttribute("part", "tool-card-body");
     body.append(argsSection.root, resultSection.root);
-    this.element.append(head, this.#toggle, body);
+    this.approvalSlot = document.createElement("div");
+    this.approvalSlot.className = "tool-call-approval";
+    this.approvalSlot.setAttribute("part", "tool-card-approval");
+    this.element.append(head, this.#toggle, body, this.approvalSlot);
+  }
+  /**
+   * Move between the two states that are not an outcome — `pending` (running)
+   * and `deferred` (gated, waiting on a person).
+   *
+   * Ignored once {@link settle} has run: a card that was declined must not be
+   * talked back into looking live by a late event.
+   */
+  mark(status) {
+    if (this.#settled) {
+      return;
+    }
+    this.element.setAttribute("data-status", status);
+    this.#status.textContent = statusLabels(this.#strings)[status];
   }
   /**
    * Record that a human approved or declined this call, as a line in the card.
@@ -7483,6 +7673,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";
@@ -7502,13 +7693,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) {
@@ -7525,6 +7721,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));
@@ -7713,6 +7910,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);
   }
@@ -7740,6 +7941,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);
@@ -8166,6 +8370,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;
@@ -9196,6 +9406,7 @@ var AgUiChat = class extends HTMLElement {
    * {@link toggleCollapsed} and {@link toggleTheme}.
    */
   openThreads() {
+    this.#checkpoints.close();
     void this.#refreshDrawer();
     this.#drawer.open();
   }
@@ -9207,9 +9418,27 @@ var AgUiChat = class extends HTMLElement {
    * an empty panel.
    */
   openCheckpoints() {
+    this.#drawer.close();
     void this.#refreshCheckpoints();
     this.#checkpoints.open();
   }
+  /** Close the checkpoints panel, if it is open. */
+  closeCheckpoints() {
+    this.#checkpoints.close();
+  }
+  /**
+   * Open the checkpoints panel, or close it if it is already open — what the
+   * built-in ⭯ button does, because a control that opens a panel is read as the
+   * control that also dismisses it. {@link openCheckpoints} stays open-only for a
+   * host that means exactly that.
+   */
+  toggleCheckpoints() {
+    if (this.#checkpoints.open_) {
+      this.#checkpoints.close();
+      return;
+    }
+    this.openCheckpoints();
+  }
   /**
    * Start a fresh conversation: forget the persisted history, drop the
    * in-memory run state, clear the transcript, and mint a new thread id.
@@ -9474,8 +9703,8 @@ var AgUiChat = class extends HTMLElement {
     controls.setAttribute("part", "header-controls");
     const history = this.#headerButton("history", this.#strings.chatHistory, "\u2630");
     history.addEventListener("click", () => this.openThreads());
-    const checkpoints = this.#headerButton("checkpoints", this.#strings.checkpoints, "\u2B6F");
-    checkpoints.addEventListener("click", () => this.openCheckpoints());
+    const checkpoints = this.#headerButton("checkpoints", this.#strings.checkpoints, "\u21BA");
+    checkpoints.addEventListener("click", () => this.toggleCheckpoints());
     const newChat = this.#headerButton("new", this.#strings.newChat, "\u271A");
     newChat.addEventListener("click", () => this.newChat());
     const collapse = this.#headerButton("collapse", this.#strings.collapse, "\u2014");
@@ -9576,6 +9805,16 @@ var AgUiChat = class extends HTMLElement {
       this.#drawer.element,
       this.#checkpoints.element
     );
+    this.#chat.addEventListener("pointerdown", (event) => {
+      if (!this.#checkpoints.open_) {
+        return;
+      }
+      const path = event.composedPath();
+      if (path.includes(this.#checkpoints.element) || path.includes(checkpoints)) {
+        return;
+      }
+      this.#checkpoints.close();
+    });
     this.#launcher.className = "launcher";
     this.#launcher.type = "button";
     this.#launcher.setAttribute("part", "launcher");
@@ -9993,39 +10232,61 @@ 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).
    *
+   * **One card per gated call, in that call's own tool card, all at once.** A run
+   * can defer several calls, and the wire answers each independently — so the UI
+   * has to let a person answer each independently, which means saying which is
+   * which. The prompt cannot: it comes from the tool's `x-confirm` and is
+   * identical for every call of that tool. The tool card can, by position, and it
+   * is already showing the arguments. Asking them serially was the other half of
+   * the problem: the second question only appeared once the first was answered,
+   * so a person could neither compare them nor tell that more were coming.
+   *
+   * Each gated card is marked `deferred` for the wait. That is not cosmetic — at
+   * `pending` it read "running…" while the stream was over and the server idle.
+   *
    * 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. 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.
+   * result into the same card (returned to `pending`, since it now really is
+   * running); a denied one settles here, as no result will ever arrive.
    */
   async #resolveInterrupts(interrupts) {
-    const responses = {};
     this.#confirmAbort = new AbortController();
     this.#hidePending();
-    for (const interrupt of interrupts) {
-      const request = {};
-      if (interrupt.message !== void 0) {
-        request.message = interrupt.message;
-      }
-      const card = interrupt.toolCallId !== void 0 ? this.#toolCards.get(interrupt.toolCallId) : void 0;
-      const toolName = card?.element.getAttribute("data-tool-name");
-      if (toolName !== null && toolName !== void 0) {
-        request.toolName = toolName;
-      }
-      const signal = this.#confirmAbort.signal;
-      const approved = this.approvalRenderer !== null ? await this.approvalRenderer(request, { signal }) : await requestApproval(this.#ensureGroup(), request, { signal, strings: this.#strings });
-      this.#updateEmptyState();
-      this.#messages.scrollTop = this.#messages.scrollHeight;
-      card?.recordDecision(approved ? "approved" : "declined");
-      if (approved) {
-        responses[interrupt.id] = { status: "resolved", payload: { approved: true } };
-      } else {
-        responses[interrupt.id] = { status: "cancelled" };
-        card?.settle(TOOL_CALL_STATUS.DECLINED, this.#strings.declinedAction);
-      }
-    }
+    const signal = this.#confirmAbort.signal;
+    const answered = await Promise.all(
+      interrupts.map(async (interrupt) => {
+        const card = interrupt.toolCallId !== void 0 ? this.#toolCards.get(interrupt.toolCallId) : void 0;
+        const request = {};
+        const phrase = confirmPhrase(interrupt) ?? interrupt.message;
+        if (phrase !== void 0) {
+          request.message = phrase;
+        }
+        const toolName = card?.element.getAttribute("data-tool-name");
+        if (toolName !== null && toolName !== void 0) {
+          request.toolName = toolName;
+        }
+        card?.mark(TOOL_CALL_STATUS.DEFERRED);
+        const approved = this.approvalRenderer !== null ? await this.approvalRenderer(request, { signal }) : await requestApproval(card?.approvalSlot ?? this.#ensureGroup(), request, {
+          signal,
+          strings: this.#strings
+        });
+        card?.recordDecision(approved ? "approved" : "declined");
+        if (approved) {
+          card?.mark(TOOL_CALL_STATUS.PENDING);
+        } else {
+          card?.settle(TOOL_CALL_STATUS.DECLINED, this.#strings.declinedAction);
+        }
+        return { id: interrupt.id, approved };
+      })
+    );
+    this.#updateEmptyState();
+    this.#messages.scrollTop = this.#messages.scrollHeight;
     this.#confirmAbort = null;
+    const responses = {};
+    for (const { id, approved } of answered) {
+      responses[id] = approved ? { status: "resolved", payload: { approved: true } } : { status: "cancelled" };
+    }
     return responses;
   }
   #handlers() {
@@ -10064,6 +10325,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) => {
@@ -10117,9 +10379,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");
@@ -10231,6 +10517,10 @@ 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) : [];
 }
@@ -10293,7 +10583,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.23.1";
+var VERSION = "0.25.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -10308,6 +10598,7 @@ export {
   MAX_TOOL_ROUNDS,
   MESSAGE_ROLE,
   PAGE_ACTIONS,
+  RUN_FINISHED_EVENT,
   RemoteConversationStore,
   RunIndex,
   STATE_EVENT,