@artooi/ag-ui-web-component 0.29.0 → 0.30.0

package/dist/index.js

@@ -11,6 +11,14 @@ var INVALIDATE_EVENT = "ag-ui-invalidate";
 var FEEDBACK_EVENT = "ag-ui-feedback";
 var SUGGESTIONS_ACTIVITY_TYPE = "suggestions";
 var INVALIDATE_CUSTOM_NAME = "ag_ui.invalidate";
+var SUBAGENT_CUSTOM_NAME = "ag_ui.subagent";
+var SUBAGENT_PHASE = {
+  STARTED: "started",
+  TOOL_CALL: "tool_call",
+  TOOL_RESULT: "tool_result",
+  FINISHED: "finished",
+  FAILED: "failed"
+};
 var MESSAGE_ROLE = {
   USER: "user",
   ASSISTANT: "assistant"
@@ -21,6 +29,11 @@ var X_SUMMARY_KEY = "x-summary";
 var X_NAVIGATES_KEY = "x-navigates";
 var READ_PAGE_TOOL = "read_page";
 var MAX_TOOL_ROUNDS = 10;
+var MESSAGE_ACTIONS = {
+  COPY: "copy",
+  RETRY: "retry",
+  FEEDBACK: "feedback"
+};
 var TOOL_CALL_STATUS = {
   PENDING: "pending",
   DEFERRED: "deferred",
@@ -587,6 +600,8 @@ var DEFAULT_UI_STRINGS = {
   errorLabel: "Error",
   declinedLabel: "Declined",
   details: "Details",
+  subAgentWorking: "Working\u2026",
+  subAgentSteps: "Steps the sub-agent took",
   approvalEditArgs: "Edit the arguments before approving",
   approvalArgsInvalid: "That is not valid JSON, so nothing was sent.",
   approvalArgsNotAnObject: "Arguments have to be a JSON object.",
@@ -1744,7 +1759,10 @@ function attachMessageActions(bubble, options) {
     return;
   }
   const bar = messageActionBar(bubble, options.strings);
-  bar.appendChild(copyButton(options));
+  const text3 = options.text;
+  if (text3 !== void 0) {
+    bar.appendChild(copyButton(options.strings, text3));
+  }
   if (options.onFeedback !== void 0) {
     bar.append(
       feedbackButton("up", options.strings.feedbackUp, options.onFeedback),
@@ -1782,11 +1800,10 @@ function messageActionButton(modifier, label, glyph) {
   button2.appendChild(icon);
   return button2;
 }
-function copyButton(options) {
-  const { strings } = options;
+function copyButton(strings, text3) {
   const button2 = messageActionButton("copy", strings.copyMessage, "\u2398");
   button2.addEventListener("click", () => {
-    void navigator.clipboard.writeText(options.text()).then(
+    void navigator.clipboard.writeText(text3()).then(
       () => flash2(button2, strings.copied, strings.copyMessage),
       // A denied clipboard permission is the common case, not an exception:
       // say so on the button rather than throwing into an unhandled rejection.
@@ -6625,6 +6642,21 @@ var STYLES = `
   color: var(--_fg);
 }
 
+/* A region a host formatter took over, marked by the card. Preformatted
+   whitespace is what makes the built-in block read as written, and it is the one
+   thing a host cannot want: a table inherits it as mangled cell spacing, and a
+   sentence as line breaks nobody typed.
+
+   Whitespace only. The card's own face, frame, padding and scroll cap stay,
+   because the card is one visual object -- the head row and the status pill are
+   monospaced too -- and a region that dropped the family would be the only part
+   of it wearing a different one. A host that wants that restyles the
+   tool-card-result part, which does not need the formatter at all. */
+.tool-call-args[data-formatted],
+.tool-call-result[data-formatted] {
+  white-space: normal;
+}
+
 /* Display modes are pure visibility over one DOM shape, selected from the host
    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.
@@ -6689,6 +6721,174 @@ var STYLES = `
   display: flex;
 }
 
+/* A delegated sub-agent's progress, inside the card that delegated. Empty on
+   every card that delegated nothing, so it collapses rather than adding a gap
+   to each one -- the same shape the approval slot uses. */
+.tool-call-subagent:empty {
+  display: none;
+}
+
+.tool-call-subagent {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.subagent {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+/* The collapsed row is the status and the expander at once, which is what keeps
+   a ten-step child one row until somebody opens it. Full width and left-aligned,
+   because it is a line of the card rather than a button on it. */
+.subagent-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 2px 0;
+  border: none;
+  background: none;
+  font: inherit;
+  text-align: left;
+  color: var(--_muted);
+  cursor: pointer;
+}
+
+/* Nothing behind the row yet -- a delegation that failed before calling
+   anything. Drop the affordances rather than offer a control that expands onto
+   an empty region, which is the refusal the card's own toggle already makes. */
+.subagent-row:disabled {
+  cursor: default;
+}
+
+.subagent-row::after {
+  content: "\u25B8";
+  flex: none;
+  margin-left: auto;
+  color: var(--_accent);
+}
+
+.subagent-row[aria-expanded="true"]::after {
+  content: "\u25BE";
+}
+
+.subagent-row:disabled::after {
+  display: none;
+}
+
+/* Empty in the DOM; the glyph is drawn here from the panel's data-phase, so a
+   host re-themes it through the same tool-icon custom properties the card uses. */
+.subagent-icon {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  font-size: 10px;
+  line-height: 1;
+}
+
+/* Anything that is not a terminal phase is the child still working. Selected by
+   what it is not, so a phase this client has not heard of still spins rather
+   than rendering as a blank. */
+.subagent[data-phase]:not([data-phase="finished"]):not([data-phase="failed"]) .subagent-icon {
+  border: 2px solid var(--_muted);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ag-ui-tool-spin var(--_tool-spin-duration) linear infinite;
+}
+
+.subagent[data-phase="finished"] .subagent-icon::before {
+  content: var(--_tool-icon-done);
+  color: var(--_success);
+}
+
+.subagent[data-phase="failed"] .subagent-icon::before {
+  content: var(--_tool-icon-error);
+  color: var(--_danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .subagent .subagent-icon {
+    animation: none;
+  }
+}
+
+/* The server's own pre-rendered line. Shrinks and wraps rather than pushing the
+   chevron out of the card, which is what a fixed-width sibling in a flex row
+   does to a panel at sidebar width. */
+.subagent-status {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* The child's own calls. Indented and ruled, so the nesting is visible without
+   a second card frame around it. */
+.subagent-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-left: 4px;
+  padding-left: 10px;
+  border-left: 1px solid var(--_border);
+}
+
+.subagent-steps[hidden] {
+  display: none;
+}
+
+.subagent-step {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: var(--_muted);
+}
+
+.subagent-step-icon {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 8px;
+  height: 8px;
+  font-size: 9px;
+  line-height: 1;
+}
+
+/* No outcome yet: the wire says null while the call is in flight, and the
+   absence of the attribute is how that arrives here. A hollow ring, not a
+   spinner -- several can be on screen at once and the row above already spins. */
+.subagent-step:not([data-ok]) .subagent-step-icon {
+  border: 1px solid var(--_muted);
+  border-radius: 50%;
+}
+
+.subagent-step[data-ok="true"] .subagent-step-icon::before {
+  content: var(--_tool-icon-done);
+  color: var(--_success);
+}
+
+.subagent-step[data-ok="false"] .subagent-step-icon::before {
+  content: var(--_tool-icon-error);
+  color: var(--_danger);
+}
+
+.subagent-step-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .tool-call-toggle {
   align-self: flex-start;
   border: none;
@@ -7988,6 +8188,159 @@ var STYLES = `
 }
 `;
 
+// src/ui/subagent_panel.ts
+var SubAgentPanel = class {
+  /** The panel's root; append this into the delegating card's slot. */
+  element;
+  /**
+   * The collapsed row, which is the expander as well as the status.
+   *
+   * Disabled while the child has called nothing, so a delegation that failed
+   * before it started offers no control that expands onto an empty region —
+   * the same refusal the card's own Details toggle already makes.
+   */
+  #row;
+  #status;
+  #steps;
+  /** The child's tool calls, keyed by the child's own call id. */
+  #stepRows = /* @__PURE__ */ new Map();
+  constructor(strings = DEFAULT_UI_STRINGS) {
+    this.element = document.createElement("div");
+    this.element.className = "subagent";
+    this.element.setAttribute("part", "subagent");
+    this.#row = document.createElement("button");
+    this.#row.type = "button";
+    this.#row.className = "subagent-row";
+    this.#row.setAttribute("part", "subagent-row");
+    this.#row.setAttribute("aria-expanded", "false");
+    this.#row.disabled = true;
+    const icon = document.createElement("span");
+    icon.className = "subagent-icon";
+    icon.setAttribute("part", "subagent-icon");
+    icon.setAttribute("aria-hidden", "true");
+    this.#status = document.createElement("span");
+    this.#status.className = "subagent-status";
+    this.#status.setAttribute("part", "subagent-status");
+    this.#status.textContent = strings.subAgentWorking;
+    this.#row.append(icon, this.#status);
+    this.#steps = document.createElement("div");
+    this.#steps.className = "subagent-steps";
+    this.#steps.setAttribute("part", "subagent-steps");
+    this.#steps.setAttribute("role", "list");
+    this.#steps.setAttribute("aria-label", strings.subAgentSteps);
+    this.#steps.hidden = true;
+    this.#row.addEventListener("click", () => {
+      this.#setExpanded(this.#row.getAttribute("aria-expanded") !== "true");
+    });
+    this.element.append(this.#row, this.#steps);
+  }
+  /**
+   * Fold one announcement in.
+   *
+   * Every field is applied only when the update actually carried it, so a phase
+   * that says nothing about the agent or the status leaves both as they stand.
+   * That is what lets `finished` be two keys wide on the wire without blanking
+   * the row it closes.
+   */
+  report(update) {
+    this.element.setAttribute("data-phase", update.phase);
+    if (update.agent !== null) {
+      this.element.setAttribute("data-agent", update.agent);
+    }
+    if (update.status !== null) {
+      this.#status.textContent = update.status;
+    }
+    if (update.tool !== null) {
+      this.#recordStep(update.tool);
+    }
+  }
+  /**
+   * Open or settle one of the child's calls, keyed by its own id.
+   *
+   * The absence of `data-ok` is what "still running" looks like, mirroring the
+   * wire's `null` rather than inventing a third value for it — so the attribute
+   * is removed on the way in and written on the way out.
+   */
+  #recordStep(tool) {
+    const row = this.#stepRows.get(tool.toolCallId) ?? this.#createStep(tool);
+    if (tool.ok === null) {
+      row.removeAttribute("data-ok");
+      return;
+    }
+    row.setAttribute("data-ok", String(tool.ok));
+  }
+  #createStep(tool) {
+    const row = document.createElement("div");
+    row.className = "subagent-step";
+    row.setAttribute("part", "subagent-step");
+    row.setAttribute("role", "listitem");
+    row.setAttribute("data-tool-call-id", tool.toolCallId);
+    const icon = document.createElement("span");
+    icon.className = "subagent-step-icon";
+    icon.setAttribute("part", "subagent-step-icon");
+    icon.setAttribute("aria-hidden", "true");
+    const name = document.createElement("span");
+    name.className = "subagent-step-name";
+    name.setAttribute("part", "subagent-step-name");
+    name.textContent = tool.name;
+    row.append(icon, name);
+    this.#steps.appendChild(row);
+    this.#stepRows.set(tool.toolCallId, row);
+    this.#row.disabled = false;
+    return row;
+  }
+  #setExpanded(expanded) {
+    this.#steps.hidden = !expanded;
+    this.#row.setAttribute("aria-expanded", String(expanded));
+  }
+};
+
+// src/ui/subagent_update.ts
+var PHASES = Object.values(SUBAGENT_PHASE);
+function asRecord(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return null;
+  }
+  return value;
+}
+function asText(value) {
+  return typeof value === "string" && value !== "" ? value : null;
+}
+function asTool(value) {
+  const record = asRecord(value);
+  if (record === null) {
+    return null;
+  }
+  const toolCallId = asText(record["toolCallId"]);
+  const name = asText(record["name"]);
+  const ok = record["ok"];
+  if (toolCallId === null || name === null) {
+    return null;
+  }
+  if (ok !== null && typeof ok !== "boolean") {
+    return null;
+  }
+  return { toolCallId, name, ok };
+}
+function subAgentUpdate(value) {
+  const record = asRecord(value);
+  if (record === null) {
+    return null;
+  }
+  const delegationId = asText(record["delegationId"]);
+  const phase = record["phase"];
+  if (delegationId === null || typeof phase !== "string" || !PHASES.includes(phase)) {
+    return null;
+  }
+  return {
+    delegationId,
+    phase,
+    agent: asText(record["agent"]),
+    status: asText(record["status"]),
+    tool: asTool(record["tool"])
+  };
+}
+
 // src/ui/suggestion_chips.ts
 var MAX_SUGGESTIONS = 4;
 var MAX_SUGGESTION_CHARS = 120;
@@ -8394,6 +8747,22 @@ var ToolCallCard = class {
    * Empty until used, and hidden while empty by the shadow CSS.
    */
   approvalSlot;
+  /**
+   * Where a *nested* run's progress renders — the sub-agent this call delegated
+   * to, narrating itself while the card waits.
+   *
+   * A slot rather than a rendered thing, on the same reasoning as
+   * {@link approvalSlot}: the card owns the position and something else owns the
+   * content. What makes the position right is that the wire keys a delegation on
+   * this card's own `toolCallId`, so the run being narrated is the one this card
+   * already stands for.
+   *
+   * Placed above the Details toggle rather than inside the body, because the
+   * body is what the display modes hide — and a progress line that only appears
+   * in `full` mode would leave exactly the stall it exists to end. Empty on every
+   * card that delegated nothing, and hidden while empty by the shadow CSS.
+   */
+  subagentSlot;
   #status;
   #decision;
   #toggle;
@@ -8409,10 +8778,15 @@ var ToolCallCard = class {
    * still exist when the user is asked to approve, edit or deny the call.
    */
   args;
+  /** The raw tool name, kept for the payloads handed to {@link ToolPayloadFormatter}. */
+  #name;
+  #formatPayload;
   #settled = false;
-  constructor(name, args, summary, strings = DEFAULT_UI_STRINGS) {
+  constructor(name, args, summary, strings = DEFAULT_UI_STRINGS, options = {}) {
     this.#strings = strings;
     this.args = args;
+    this.#name = name;
+    this.#formatPayload = options.formatPayload ?? null;
     this.element = document.createElement("div");
     this.element.className = "tool-call";
     this.element.setAttribute("part", "tool-card");
@@ -8440,7 +8814,11 @@ var ToolCallCard = class {
     this.#decision.hidden = true;
     head.append(icon, label, this.#status, this.#decision);
     const argsSection = this.#section("args", strings.argumentsLabel);
-    argsSection.body.textContent = JSON.stringify(args, null, 2);
+    this.#renderPayload(
+      argsSection.body,
+      { kind: "arguments", toolName: name, args },
+      JSON.stringify(args, null, 2)
+    );
     argsSection.root.hidden = Object.keys(args).length === 0;
     const resultSection = this.#section("result", strings.resultLabel);
     this.#resultSection = resultSection.root;
@@ -8461,7 +8839,10 @@ var ToolCallCard = class {
     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);
+    this.subagentSlot = document.createElement("div");
+    this.subagentSlot.className = "tool-call-subagent";
+    this.subagentSlot.setAttribute("part", "tool-card-subagent");
+    this.element.append(head, this.subagentSlot, this.#toggle, body, this.approvalSlot);
   }
   /**
    * Move between the two states that are not an outcome — `pending` (running)
@@ -8503,9 +8884,42 @@ var ToolCallCard = class {
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];
     this.#resultLabel.textContent = resultLabels(this.#strings)[status];
-    this.#resultBody.textContent = formatPayload(text3);
+    this.#renderPayload(
+      this.#resultBody,
+      { kind: "result", toolName: this.#name, status, text: text3 },
+      formatPayload(text3)
+    );
     this.#resultSection.hidden = false;
   }
+  /**
+   * Fill one body region, offering it to the host formatter first.
+   *
+   * `fallback` is computed by the caller rather than here because the two
+   * regions build it differently -- arguments are already parsed, a result is a
+   * string that may or may not be JSON -- and because a formatter that takes
+   * the region over should not have paid for a pretty-print nobody sees. It is
+   * cheap either way; the point is that the built-in rendering stays written
+   * once, beside the payload it belongs to.
+   *
+   * The `data-formatted` marker is what the shadow CSS reads to relax the
+   * preformatted whitespace on a region a host owns -- a table inherits it as
+   * mangled cell spacing, a sentence as line breaks nobody typed. Marked for a
+   * returned string too: one rule, and a summary line wants ordinary wrapping
+   * as much as a table does.
+   */
+  #renderPayload(body, payload, fallback) {
+    const rendered = this.#formatPayload === null ? null : this.#formatPayload(payload);
+    if (rendered === null) {
+      body.textContent = fallback;
+      return;
+    }
+    body.setAttribute("data-formatted", "true");
+    if (typeof rendered === "string") {
+      body.textContent = rendered;
+      return;
+    }
+    body.replaceChildren(rendered);
+  }
   /** Build one labelled region of the body: a heading plus a payload block. */
   #section(kind, labelText) {
     const root = document.createElement("div");
@@ -8709,6 +9123,7 @@ var AgUiClient = class {
    */
   #closedMessageIds = /* @__PURE__ */ new Set();
   #connectionLostMessage;
+  #maxToolRounds;
   // Set by cancel(); reset at the top of each #run(). Checked by the loop so
   // a cancel between frontend-tool rounds doesn't start another round.
   #cancelled = false;
@@ -8722,6 +9137,8 @@ var AgUiClient = class {
     this.#onPersist = config.onPersist ?? (() => {
     });
     this.#connectionLostMessage = config.connectionLostMessage ?? "Connection lost";
+    const rounds = config.maxToolRounds ?? MAX_TOOL_ROUNDS;
+    this.#maxToolRounds = rounds >= 1 ? Math.floor(rounds) : MAX_TOOL_ROUNDS;
     const onStateChanged = config.onStateChanged;
     if (onStateChanged !== void 0) {
       this.#agent.subscribe({
@@ -8752,7 +9169,8 @@ var AgUiClient = class {
    *
    * When the agent calls frontend tools, this executes them and re-runs the
    * agent with the results, looping until the agent stops calling frontend
-   * tools (bounded by {@link MAX_TOOL_ROUNDS}).
+   * tools (bounded by {@link AgUiClientConfig.maxToolRounds}, which defaults to
+   * {@link MAX_TOOL_ROUNDS}).
    *
    * `attachments` ride on the user message as a non-standard field so the
    * default store round-trips them for history replay; see
@@ -8849,7 +9267,7 @@ var AgUiClient = class {
   }
   async #runLoop() {
     let resume;
-    for (let round = 0; round < MAX_TOOL_ROUNDS; round += 1) {
+    for (let round = 0; round < this.#maxToolRounds; round += 1) {
       if (this.#cancelled) {
         return;
       }
@@ -9870,6 +10288,30 @@ var AgUiChat = class extends HTMLElement {
    * schema never reaches the browser. Client tools should prefer `x-summary`.
    */
   toolSummaries = {};
+  /**
+   * Optional presentation hook for the two payload regions of a tool-call card
+   * -- the arguments and the result. Unset (the default) leaves both
+   * pretty-printed as JSON.
+   *
+   * The seam exists because a wide result has no good rendering as JSON: a
+   * thirty-field row is a wall of text where the host wanted a table, or a
+   * sentence. `ClientTool.render` cannot answer it -- it is handed the
+   * *arguments* only, and a server-side tool has no `ClientTool` at all, so the
+   * result region was the one part of the transcript a host could not reach.
+   *
+   * **Presentation, not translation.** The card and the model already read
+   * separate copies of a tool result: the model's is maintained by
+   * `@ag-ui/client` from the same event and persisted with the history, and the
+   * card has always shown that string reformatted. So a formatter changes what
+   * the person reads and nothing the agent reads -- which makes restyling safe
+   * and *rewording* a way to make the card disagree with the prose beside it.
+   * Rename a value on the server, where it reaches both.
+   *
+   * Read at render time rather than captured, so a host that sets it from a
+   * framework effect after the first card still formats the results that settle
+   * afterwards. See {@link ToolPayloadFormatter}.
+   */
+  formatToolPayload = null;
   /**
    * Localizable UI strings — a partial override merged over the English
    * {@link DEFAULT_UI_STRINGS}. Resolved once on connect (so set it before the
@@ -9919,6 +10361,16 @@ var AgUiChat = class extends HTMLElement {
   #toolRegistry = new ClientToolRegistry();
   /** Tool-call cards awaiting execution, keyed by call id. */
   #toolCards = /* @__PURE__ */ new Map();
+  /**
+   * The live delegation panels, keyed by the **parent's** `delegate_task` call
+   * id — which is what the wire keys a sub-agent's progress on, so this map and
+   * {@link #toolCards} answer to the same key.
+   *
+   * Kept beside the cards rather than on them, so a card stays a card: the tool
+   * card holds the slot and this holds what went into it, the same division the
+   * approval prompt already uses.
+   */
+  #subagentPanels = /* @__PURE__ */ new Map();
   /**
    * Call ids whose card was already settled from a streamed server-side result
    * (`TOOL_CALL_RESULT`), so the post-run executeTool sweep doesn't overwrite
@@ -10910,6 +11362,37 @@ ${quoted}`;
     this.#quoteButton.hidden = true;
     this.#quoting = "";
   }
+  /**
+   * The tool-round budget from `data-max-tool-rounds`, for one send.
+   *
+   * Anything unparseable becomes `NaN`, which {@link AgUiClient} rejects along
+   * with a bound below one -- so the two ways of setting this are validated in
+   * one place rather than agreeing by coincidence.
+   */
+  #maxToolRounds() {
+    const attr = this.getAttribute("data-max-tool-rounds");
+    return attr === null ? MAX_TOOL_ROUNDS : Number.parseInt(attr, 10);
+  }
+  /**
+   * Which message actions a finished bubble offers, from
+   * `data-message-actions`.
+   *
+   * Absent means all of them, so the attribute only ever subtracts: the row
+   * shipped without an off switch and a host that never sets this must keep
+   * exactly what it had. A value names the survivors, which makes
+   * `data-message-actions="false"` -- the spelling its sibling
+   * `data-quote-selection` uses -- an empty set by falling out of the same rule
+   * rather than by a case of its own.
+   */
+  #messageActions() {
+    const attr = this.getAttribute("data-message-actions");
+    if (attr === null) {
+      return new Set(Object.values(MESSAGE_ACTIONS));
+    }
+    return new Set(
+      attr.split(",").map((token) => token.trim()).filter((token) => token !== "")
+    );
+  }
   /** The client-side upload size cap from `data-attachment-max-bytes`. */
   #attachmentMaxBytes() {
     const attr = this.getAttribute("data-attachment-max-bytes");
@@ -11455,6 +11938,7 @@ ${quoted}`;
     this.#thoughts = null;
     this.#hidePending();
     this.#toolCards.clear();
+    this.#subagentPanels.clear();
     this.#serverSettled.clear();
     this.#cardElements.clear();
     this.#activityBlocks.clear();
@@ -12277,7 +12761,8 @@ ${quoted}`;
         resolveInterrupts: (interrupts) => this.#resolveInterrupts(interrupts),
         onPersist: (messages) => this.conversationStore.saveMessages(this.#threadId, messages),
         onStateChanged: (state) => this.#onSharedStateChanged(state),
-        connectionLostMessage: this.#strings.connectionLost
+        connectionLostMessage: this.#strings.connectionLost,
+        maxToolRounds: this.#maxToolRounds()
       });
     }
     return this.#client;
@@ -12299,30 +12784,39 @@ ${quoted}`;
    * Every finished bubble gets copy and feedback -- both are safe on a message
    * of any age. Retry moves to the newest, because it is the only one where
    * re-running answers the same question rather than rewriting history.
+   *
+   * `data-message-actions` subtracts from that. The row is built only when
+   * something survives to go in it: an empty row still takes its margin, still
+   * answers to the `message-actions` part, and still reads to a screen reader
+   * as a group of actions with none in it.
    */
   #attachActions(bubble, options = {}) {
-    attachMessageActions(bubble, {
-      strings: this.#strings,
-      // Read at click time, not captured: a bubble rendered from markdown holds
-      // its text in the DOM, and that is what the user sees and means to copy.
-      text: () => bubble.textContent,
-      // A failed run is copyable -- error text is what people paste into a bug
-      // report -- but not rateable: a rating is a statement about an *answer*,
-      // and mixing "the connection dropped" into that signal makes the host's
-      // feedback data say less than it did before.
-      ...options.rateable === false ? {} : {
-        onFeedback: (rating) => {
-          this.dispatchEvent(
-            new CustomEvent(FEEDBACK_EVENT, {
-              detail: { content: bubble.textContent, rating },
-              bubbles: true,
-              composed: true
-            })
-          );
-        }
-      }
-    });
-    this.#moveRetryTo(messageActionBar(bubble, this.#strings));
+    const enabled = this.#messageActions();
+    const copyable = enabled.has(MESSAGE_ACTIONS.COPY);
+    const rateable = options.rateable !== false && enabled.has(MESSAGE_ACTIONS.FEEDBACK);
+    if (copyable || rateable) {
+      attachMessageActions(bubble, {
+        strings: this.#strings,
+        // Read at click time, not captured: a bubble rendered from markdown
+        // holds its text in the DOM, and that is what the user sees and means
+        // to copy.
+        ...copyable ? { text: () => bubble.textContent } : {},
+        ...rateable ? {
+          onFeedback: (rating) => {
+            this.dispatchEvent(
+              new CustomEvent(FEEDBACK_EVENT, {
+                detail: { content: bubble.textContent, rating },
+                bubbles: true,
+                composed: true
+              })
+            );
+          }
+        } : {}
+      });
+    }
+    if (enabled.has(MESSAGE_ACTIONS.RETRY)) {
+      this.#moveRetryTo(messageActionBar(bubble, this.#strings));
+    }
   }
   /** Move the Retry button onto `bar`, taking it off whoever held it. */
   #moveRetryTo(bar) {
@@ -12559,6 +13053,10 @@ ${quoted}`;
           this.#dispatchInvalidation(value);
           return;
         }
+        if (name === SUBAGENT_CUSTOM_NAME) {
+          this.#reportSubAgent(value);
+          return;
+        }
         this.dispatchEvent(
           new CustomEvent(CUSTOM_AGENT_EVENT, {
             detail: { name, value },
@@ -12681,6 +13179,45 @@ ${quoted}`;
       })
     );
   }
+  /**
+   * Draw one step of a delegated sub-agent's progress, on the card that
+   * delegated.
+   *
+   * `delegationId` is the parent's own `delegate_task` tool-call id, so the
+   * attachment point is a card this element already drew on `TOOL_CALL_START`.
+   * That is the whole design: a run that hands work to a sub-agent used to read
+   * as a stall -- the card sat at "running…" for the child's entire duration --
+   * and the fix is to narrate *into* the thing that was already standing there,
+   * rather than to float a second element with the same identity.
+   *
+   * A progress event for a call this client never drew is dropped. It has no
+   * card to attach to, and inventing a floating one is precisely the alternative
+   * that was rejected: parent and child interleave in the transcript with
+   * nothing marking whose is whose, and the persisted transcript -- which never
+   * held the progress at all -- would not match what was on screen.
+   *
+   * Nothing here writes to the conversation store. `CUSTOM` never enters
+   * `agent.messages`, so a reload mid-run leaves the tool card and loses the
+   * nested detail, which is the intended behaviour rather than a gap.
+   */
+  #reportSubAgent(value) {
+    const update = subAgentUpdate(value);
+    if (update === null) {
+      return;
+    }
+    const card = this.#toolCards.get(update.delegationId);
+    if (card === void 0) {
+      return;
+    }
+    let panel = this.#subagentPanels.get(update.delegationId);
+    if (panel === void 0) {
+      panel = new SubAgentPanel(this.#strings);
+      this.#subagentPanels.set(update.delegationId, panel);
+      card.subagentSlot.appendChild(panel.element);
+    }
+    panel.report(update);
+    this.#scroller.follow();
+  }
   /** A muted "⏹ Stopped" line in the transcript (distinct from the ⚠️ error bubble). */
   #appendStoppedNote() {
     const note = document.createElement("div");
@@ -13017,7 +13554,12 @@ ${quoted}`;
     }
     const labelled = this.#resolveTool(call.name)?.parameters[X_SUMMARY_KEY];
     const summary = typeof labelled === "string" ? labelled : this.toolSummaries[call.name] ?? this.#toolCatalog[call.name]?.summary ?? prettifyToolName(call.name);
-    const card = new ToolCallCard(call.name, call.args, summary, this.#strings);
+    const card = new ToolCallCard(call.name, call.args, summary, this.#strings, {
+      // A thunk over the live property, not the property itself: the card keeps
+      // this for the life of the call, and the result region is filled when the
+      // tool settles -- which can be long after a host set the hook.
+      formatPayload: (payload) => this.formatToolPayload?.(payload) ?? null
+    });
     this.#toolCards.set(call.id, card);
     this.#ensureGroup().appendChild(card.element);
     this.#updateEmptyState();
@@ -13091,7 +13633,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.29.0";
+var VERSION = "0.30.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -13113,6 +13655,7 @@ export {
   MAX_SUGGESTIONS,
   MAX_SUGGESTION_CHARS,
   MAX_TOOL_ROUNDS,
+  MESSAGE_ACTIONS,
   MESSAGE_ROLE,
   PAGE_ACTIONS,
   RUN_FINISHED_EVENT,