@artooi/ag-ui-web-component 0.45.0 → 0.46.0

package/dist/index.js

@@ -55,6 +55,7 @@ var ATTACHMENT_STATUS = {
 };
 var DEFAULT_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
 var TOOL_DISPLAY = {
+  GROUPED: "grouped",
   INLINE: "inline",
   MINIMAL: "minimal",
   COMPACT: "compact",
@@ -1014,6 +1015,13 @@ var DEFAULT_UI_STRINGS = {
   declinedLabel: "Declined",
   interruptedLabel: "Not finished",
   details: "Details",
+  toolGroupSteps: "{count} steps",
+  toolGroupWorking: "Working through {count} steps",
+  toolGroupWorked: "Worked through {count} steps",
+  toolGroupWaiting: "{count} waiting for you",
+  toolGroupFailed: "{count} failed",
+  toolGroupDeclined: "{count} declined",
+  toolStepRepeat: "({n})",
   subAgentWorking: "Working\u2026",
   subAgentDelegatedTo: "Delegated to {agent}",
   subAgentFinished: "{agent} finished",
@@ -1447,14 +1455,19 @@ var ToolCatalog = class {
     });
     const renderer = this.#host.askUserRenderer();
     let answer;
-    if (renderer === null) {
-      answer = await builtIn();
-    } else {
-      try {
-        answer = await renderer.call(this.#host.element, request, { signal });
-      } catch (error) {
-        answer = await this.#afterRendererFailed(error, signal, callId, builtIn);
+    this.#host.setAsking(callId, true);
+    try {
+      if (renderer === null) {
+        answer = await builtIn();
+      } else {
+        try {
+          answer = await renderer.call(this.#host.element, request, { signal });
+        } catch (error) {
+          answer = await this.#afterRendererFailed(error, signal, callId, builtIn);
+        }
       }
+    } finally {
+      this.#host.setAsking(callId, false);
     }
     this.#host.decision.close();
     this.#host.updateEmptyState();
@@ -1752,6 +1765,7 @@ var ToolDispatch = class {
     const card = this.#host.transcript.cardFor(call);
     this.#host.transcript.forgetCard(call.id);
     this.#host.transcript.setCardElement(call.id, card.element);
+    this.#host.transcript.holdRunning(call.id, card);
     const tool = this.#host.tools.wasAdvertised(call.name) ? this.#host.tools.resolve(call.name) : null;
     if (tool === null) {
       if (!this.#host.transcript.isServerSettled(call.id)) {
@@ -1784,15 +1798,21 @@ var ToolDispatch = class {
         request.message = confirmText;
       }
       const signal = this.#host.decision.open();
-      const decision = requestConfirmation(this.#host.transcript.ensureGroup(), request, {
-        signal,
-        strings: this.#host.strings(),
-        // Offered only where it can be honoured -- see `#confirmationRule`.
-        ...rule === "destructive" ? { onAlwaysAllow: () => this.#sessionApproved.add(call.name) } : {}
-      });
-      this.#host.transcript.updateEmptyState();
-      this.#host.transcript.follow();
-      const accepted = await decision;
+      card.setAsking(true);
+      let accepted;
+      try {
+        const decision = requestConfirmation(this.#host.transcript.ensureGroup(), request, {
+          signal,
+          strings: this.#host.strings(),
+          // Offered only where it can be honoured -- see `#confirmationRule`.
+          ...rule === "destructive" ? { onAlwaysAllow: () => this.#sessionApproved.add(call.name) } : {}
+        });
+        this.#host.transcript.updateEmptyState();
+        this.#host.transcript.follow();
+        accepted = await decision;
+      } finally {
+        card.setAsking(false);
+      }
       this.#host.decision.close();
       if (this.#host.tenure() !== tenure) {
         return null;
@@ -1893,6 +1913,9 @@ var ToolDispatch = class {
           request.args = card.args;
         }
         card?.mark(TOOL_CALL_STATUS.DEFERRED);
+        if (card !== void 0) {
+          this.#host.transcript.revealStep(card);
+        }
         const builtIn = () => requestApproval(card?.approvalSlot ?? this.#host.transcript.ensureGroup(), request, {
           signal,
           strings: this.#host.strings(),
@@ -6956,6 +6979,16 @@ var ToolCallCard = class {
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];
   }
+  /**
+   * Say whether a prompt is open on this call, a question it asked or a
+   * confirmation it needs. A flag of its own beside the status, which stays
+   * `pending`: the call is still running as far as the status goes, and a card
+   * display mode that reads the status draws it exactly as before. The step
+   * group reads the flag to tell a call waiting on a person from one working.
+   */
+  setAsking(asking) {
+    this.element.toggleAttribute("data-asking", asking);
+  }
   /**
    * Record that a human approved or declined this call, as a line in the card.
    * The prompt disappears once answered, so this is the only lasting trace that
@@ -8038,8 +8071,6 @@ var CONFIRMATION_STYLES = `
   padding: 8px 10px;
   max-height: 140px;
   overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
   font-size: 12px;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   background: var(--_assistant-bg);
@@ -9057,8 +9088,6 @@ var THOUGHTS_STYLES = `
   border-left: 2px solid var(--_border);
   max-height: 220px;
   overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
   white-space: pre-wrap;
   word-break: break-word;
   font-family: inherit;
@@ -9075,6 +9104,225 @@ var THOUGHTS_STYLES = `
 }
 `;
 
+// src/ui/progress/tool_group_styles.ts
+var CARD_MODES = [
+  '[data-tool-display="inline"]',
+  '[data-tool-display="minimal"]',
+  '[data-tool-display="compact"]',
+  '[data-tool-display="full"]'
+].join(", ");
+var GROUPED = `:host(:where(:not(${CARD_MODES})))`;
+var CARDS = `:host(:is(${CARD_MODES}))`;
+var TOOL_GROUP_STYLES = `
+/* \u2500\u2500 The folded tool-step group \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 quiet row per run of consecutive calls, the cards one click down as
+   plain lines rather than boxes. Every rule is scoped to grouped mode, so
+   none of it reaches a group drawn earlier once the host moves to a card
+   mode. */
+${GROUPED} .tool-group {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+${GROUPED} .tool-group-head {
+  appearance: none;
+  align-self: flex-start;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 0 -6px;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--_muted);
+  font: inherit;
+  font-size: var(--_text-sm);
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+}
+
+${GROUPED} .tool-group-head:hover {
+  background: var(--_hover);
+  color: var(--_fg);
+}
+
+${GROUPED} .tool-group-head:focus-visible {
+  outline: 2px solid var(--_ring);
+  outline-offset: 1px;
+}
+
+${GROUPED} .tool-group-label {
+  min-width: 0;
+  font-weight: 500;
+  color: var(--_ink-2);
+  overflow-wrap: anywhere;
+}
+
+${GROUPED} .tool-group-meta {
+  min-width: 0;
+  color: var(--_muted);
+  overflow-wrap: anywhere;
+}
+
+/* Each note opens with a middle dot, which also parts the first note from
+   the label. */
+${GROUPED} .tool-group-note::before {
+  content: "\\00B7";
+  margin: 0 6px 0 2px;
+}
+
+${GROUPED} .tool-group[data-state="error"] .tool-group-meta {
+  color: var(--_danger);
+}
+
+${GROUPED} .tool-group-icon {
+  flex: none;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  background: currentColor;
+  mask: var(--_ico-check) center / contain no-repeat;
+  color: var(--_success);
+}
+
+${GROUPED} .tool-group[data-state="error"] .tool-group-icon {
+  mask-image: var(--_ico-error);
+  color: var(--_danger);
+}
+
+${GROUPED} .tool-group[data-state="running"] .tool-group-icon {
+  mask: none;
+  background: none;
+  border: 2px solid var(--_muted);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ag-ui-tool-spin var(--_tool-spin-duration) linear infinite;
+}
+
+/* Waiting on the user: a steady accent dot rather than a spinner, and the
+   count in the accent's ink. */
+${GROUPED} .tool-group[data-state="waiting"] .tool-group-icon {
+  mask: none;
+  border-radius: 50%;
+  transform: scale(0.6);
+  background: var(--_accent);
+}
+
+${GROUPED} .tool-group[data-state="waiting"] .tool-group-meta {
+  color: var(--_accent-ink);
+  font-weight: 500;
+}
+
+${GROUPED} .tool-group-chevron {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  background: currentColor;
+  mask: var(--_ico-chevron) center / contain no-repeat;
+  opacity: 0.7;
+  transition: transform var(--_motion) var(--_ease);
+}
+
+${GROUPED} .tool-group[data-open="true"] .tool-group-chevron {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ${GROUPED} .tool-group[data-state="running"] .tool-group-icon {
+    animation: none;
+  }
+}
+
+${GROUPED} .tool-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 2px 0 4px 6px;
+  padding-left: 13px;
+  border-left: 1px solid var(--_border);
+}
+
+${GROUPED} .tool-group[data-open="false"] .tool-group-list {
+  display: none;
+}
+
+/* A card inside the group is one line of the list: icon, name, and its
+   Details control at the end, with the arguments and result opening under
+   the whole row. */
+${GROUPED} .tool-group .tool-call {
+  max-width: 100%;
+  align-self: stretch;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 2px 10px;
+  padding: 3px 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--_ink-2);
+  font-family: inherit;
+  font-size: var(--_text-sm);
+}
+
+${GROUPED} .tool-group .tool-call-head {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+}
+
+${GROUPED} .tool-group .tool-call-name {
+  flex: 0 1 auto;
+  font-weight: 450;
+}
+
+/* The repeat ordinal on a step whose label an earlier step has. */
+${GROUPED} .tool-call-repeat {
+  color: var(--_muted);
+  font-variant-numeric: tabular-nums;
+}
+
+${GROUPED} .tool-group .tool-call-toggle {
+  font-family: inherit;
+  font-size: var(--_text-xs);
+  color: var(--_muted);
+}
+
+${GROUPED} .tool-group .tool-call-body,
+${GROUPED} .tool-group .tool-call-approval,
+${GROUPED} .tool-group .tool-call-subagent {
+  flex-basis: 100%;
+}
+
+/* Grouping is decided as each card is built, so a card mode set afterwards
+   finds groups already drawn. It flattens them: the group and its list stop
+   generating boxes, the row and the repeat ordinals go, and every card lays
+   out as a direct child of the answer, exactly as a card built in that mode
+   does. */
+${CARDS} .tool-group,
+${CARDS} .tool-group-list {
+  display: contents;
+}
+
+${CARDS} .tool-group-head,
+${CARDS} .tool-call-repeat {
+  display: none;
+}
+
+/* Each of these declares its own display, which beats the user-agent rule for
+   the hidden attribute, so each needs its own. The host prefix is there for
+   weight, not scope: it lifts these over the card-mode rules above that set
+   display, which are heavier than a bare class and attribute. */
+:host .tool-group[hidden],
+:host .tool-group-head[hidden],
+:host .tool-group-list[hidden] {
+  display: none;
+}
+`;
+
 // src/ui/progress/tool_step_styles.ts
 var TOOL_STEP_STYLES = `
 .tool-call {
@@ -9271,8 +9519,6 @@ var TOOL_STEP_STYLES = `
   padding: 6px 8px;
   max-height: 160px;
   overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
   background: var(--_bg);
   border: 1px solid var(--_border);
   border-radius: 6px;
@@ -9718,6 +9964,7 @@ var TOKEN_STYLES = `
   --_line-strong: var(--ag-ui-line-strong, color-mix(in oklch, var(--_fg) 20%, var(--_bg)));
   --_wash: var(--ag-ui-wash, color-mix(in oklch, var(--_fg) 4.5%, var(--_bg)));
   --_accent-ink: var(--ag-ui-accent-ink, color-mix(in oklch, var(--_accent) 82%, var(--_fg)));
+  --_ring: var(--ag-ui-ring, color-mix(in oklch, var(--_accent) 55%, transparent));
   /* The user's turn is the accent at a whisper. With Quiet's graphite accent
      that is a neutral wash; once a host sets a brand accent it becomes a tint
      of the brand, which is the one thing Soft does that Quiet keeps. */
@@ -10049,6 +10296,7 @@ var TOKEN_STYLES = `
   --_ico-check: var(--ag-ui-ico-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"));
   --_ico-error: var(--ag-ui-ico-error, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.9v3.7M8 11.1v.1'/%3E%3C/svg%3E"));
   --_ico-declined: var(--ag-ui-ico-declined, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M3.8 12.2l8.4-8.4'/%3E%3C/svg%3E"));
+  --_ico-chevron: var(--ag-ui-ico-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E"));
 }
 
 /* The colour drawn on the accent, from the accent's own luminance: white on
@@ -10267,6 +10515,21 @@ var LEDGER_STYLES = `
   letter-spacing: 0.01em;
 }
 
+/* The step group's row reads as a ledger heading. Unscoped to grouped mode:
+   a card mode hides the row and drops the list's box, so neither reaches a
+   flattened card. */
+:host([theme~="ledger"]) .tool-group-head {
+  font-family: var(--_code-font);
+  font-size: var(--_text-xs);
+  border-radius: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+:host([theme~="ledger"]) .tool-group-list {
+  border-left: 1px dashed var(--_line-strong);
+}
+
 :host([theme~="ledger"]) .chart-block {
   border-top: 1px solid var(--_line-strong);
   border-bottom: 1px solid var(--_line);
@@ -10650,6 +10913,26 @@ var SOFT_STYLES = `
   color: var(--_accent-ink);
 }
 
+/* The step group's row as a tinted pill. Unscoped to grouped mode: a card
+   mode hides the row and drops the list's box, so neither reaches a
+   flattened card. */
+:host([theme~="soft"]) .tool-group-head {
+  background: var(--_tint);
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  padding: 5px 12px 5px 9px;
+  margin-left: 0;
+}
+
+:host([theme~="soft"]) .tool-group-head:hover {
+  background: var(--_tint-2);
+}
+
+:host([theme~="soft"]) .tool-group-list {
+  border-left-color: var(--_tint-2);
+  margin-left: 14px;
+}
+
 :host([theme~="soft"]) .chart-block {
   background: var(--_bg);
   border: 1px solid var(--_border);
@@ -11318,8 +11601,6 @@ var MESSAGE_STYLES = `
 .message--assistant pre {
   padding: 8px 10px;
   overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
   background: var(--_bg);
   border: 1px solid var(--_border);
   border-radius: 6px;
@@ -11627,6 +11908,10 @@ var STYLES = [
   QUESTION_STYLES,
   SKILL_STYLES,
   HISTORY_STYLES,
+  // The step group restates, inside a group, card rules the modules above set
+  // at rest; it outweighs them rather than relying on order, and sits ahead
+  // of the themes so a theme restating a group rule at equal weight wins.
+  TOOL_GROUP_STYLES,
   // Each theme's structure comes last: it restates rules the modules above
   // set at rest, at equal weight. Classic and code have no structural
   // module; they are the base stylesheet, and classic adds only its
@@ -15854,6 +16139,200 @@ var ThoughtsBlock = class {
   }
 };
 
+// src/ui/progress/tool_step_group.ts
+var OPEN_STATUSES = /* @__PURE__ */ new Set([
+  TOOL_CALL_STATUS.PENDING,
+  TOOL_CALL_STATUS.DEFERRED
+]);
+var RUNNING_SUBAGENT = `.tool-call-subagent > .subagent:is(${[
+  SUBAGENT_PHASE.STARTED,
+  SUBAGENT_PHASE.TOOL_CALL,
+  SUBAGENT_PHASE.TOOL_RESULT
+].map((phase) => `[data-phase="${phase}"]`).join(", ")})`;
+var WATCHED_ATTRIBUTES = [
+  "data-status",
+  "data-asking",
+  "data-phase",
+  "data-agent"
+];
+var ToolStepGroup = class {
+  element;
+  #strings;
+  #list;
+  #head;
+  #label;
+  #meta;
+  /** The steps, in order. Cards only ever join a group, so this is its list's children. */
+  #steps = [];
+  /** Whether the group has already opened itself for the current wait. */
+  #openedForWait = false;
+  constructor(strings) {
+    this.#strings = strings;
+    this.element = document.createElement("div");
+    this.element.className = "tool-group";
+    this.element.setAttribute("part", "tool-group");
+    this.element.setAttribute("data-open", "false");
+    this.#head = document.createElement("button");
+    this.#head.type = "button";
+    this.#head.className = "tool-group-head";
+    this.#head.setAttribute("part", "tool-group-head");
+    this.#head.setAttribute("aria-expanded", "false");
+    const icon = document.createElement("span");
+    icon.className = "tool-group-icon";
+    icon.setAttribute("part", "tool-group-icon");
+    icon.setAttribute("aria-hidden", "true");
+    this.#label = document.createElement("span");
+    this.#label.className = "tool-group-label";
+    this.#label.setAttribute("part", "tool-group-label");
+    this.#meta = document.createElement("span");
+    this.#meta.className = "tool-group-meta";
+    this.#meta.setAttribute("part", "tool-group-meta");
+    const chevron = document.createElement("span");
+    chevron.className = "tool-group-chevron";
+    chevron.setAttribute("aria-hidden", "true");
+    this.#head.append(icon, this.#label, this.#meta, chevron);
+    this.#head.addEventListener("click", () => {
+      this.setOpen(this.element.getAttribute("data-open") !== "true");
+    });
+    this.#list = document.createElement("div");
+    this.#list.className = "tool-group-list";
+    this.#list.setAttribute("part", "tool-group-list");
+    this.element.append(this.#head, this.#list);
+    new MutationObserver(() => {
+      this.#refresh();
+    }).observe(this.#list, {
+      attributes: true,
+      attributeFilter: [...WATCHED_ATTRIBUTES],
+      subtree: true
+    });
+  }
+  /**
+   * Add a card's element as the group's next step, under the label the card
+   * was built with.
+   *
+   * A step whose label an earlier step already has gets a repeat ordinal,
+   * "Fill field (2)", in an element of its own beside the card's name. The
+   * name itself is never rewritten, so a group flattened back into per-call
+   * cards by a card display mode shows exactly the label the card was built
+   * with, and the CSS hides the ordinal there.
+   */
+  add(card, name) {
+    const seen = this.#steps.filter((step) => step.name === name).length + 1;
+    let label = name;
+    if (seen > 1) {
+      const repeat = document.createElement("span");
+      repeat.className = "tool-call-repeat";
+      repeat.setAttribute("part", "tool-card-repeat");
+      repeat.textContent = fillUiString(this.#strings.toolStepRepeat, { n: seen });
+      card.querySelector(".tool-call-name")?.after(repeat);
+      label = `${name} ${repeat.textContent}`;
+    }
+    this.#steps.push({ element: card, name, label });
+    this.#list.append(card);
+    this.#refresh();
+  }
+  /** Show or hide the per-step cards. */
+  setOpen(open) {
+    this.element.setAttribute("data-open", String(open));
+    this.#head.setAttribute("aria-expanded", String(open));
+  }
+  /**
+   * Open the group now, for the wait that is about to start.
+   *
+   * The group opens itself from its mutation observer, which runs a tick after
+   * the card is marked deferred. The approval prompt is drawn, and takes focus,
+   * in the same tick as the mark, while the list is still out of the layout: the
+   * focus is dropped and the scroll it would cause never happens. So the caller
+   * that is about to draw the prompt opens the group first, and this marks the
+   * wait as already answered for, so the observer's later refresh does not open
+   * it again over a user who folded it.
+   */
+  reveal() {
+    this.#openedForWait = true;
+    this.setOpen(true);
+  }
+  /**
+   * The row's note for a running sub-agent, naming it, or `null` when no step
+   * is delegating right now. Only a step that is itself still running counts.
+   */
+  #delegation() {
+    for (const { element } of this.#steps) {
+      const panel = element.getAttribute("data-status") === TOOL_CALL_STATUS.PENDING ? element.querySelector(RUNNING_SUBAGENT) : null;
+      if (panel !== null) {
+        const agent = panel.getAttribute("data-agent");
+        return agent === null ? this.#strings.subAgentWorking : fillUiString(this.#strings.subAgentDelegatedTo, { agent });
+      }
+    }
+    return null;
+  }
+  #refresh() {
+    const strings = this.#strings;
+    const steps = this.#steps;
+    const statuses = steps.map((step) => step.element.getAttribute("data-status") ?? "");
+    const open = steps.filter((_2, i) => OPEN_STATUSES.has(statuses[i]));
+    const count = (status) => statuses.filter((s) => s === status).length;
+    const failed = count(TOOL_CALL_STATUS.ERROR);
+    const declined = count(TOOL_CALL_STATUS.DECLINED);
+    const deferred = count(TOOL_CALL_STATUS.DEFERRED);
+    const asking = steps.filter((step) => step.element.hasAttribute("data-asking")).length;
+    const waiting = deferred + asking;
+    const total = steps.length;
+    if (deferred > 0 && !this.#openedForWait) {
+      this.#openedForWait = true;
+      this.setOpen(true);
+    } else if (deferred === 0) {
+      this.#openedForWait = false;
+    }
+    let state = "done";
+    if (waiting > 0) {
+      state = "waiting";
+    } else if (open.length > 0) {
+      state = "running";
+    } else if (failed > 0) {
+      state = "error";
+    }
+    this.element.setAttribute("data-state", state);
+    this.element.setAttribute("data-count", String(total));
+    const only = total === 1 ? steps[0] : void 0;
+    if (only !== void 0) {
+      this.#label.textContent = only.label;
+    } else {
+      const template = state === "waiting" ? strings.toolGroupSteps : state === "running" ? strings.toolGroupWorking : strings.toolGroupWorked;
+      this.#label.textContent = fillUiString(template, { count: total });
+    }
+    const notes = [];
+    const delegation = this.#delegation();
+    const current = open[0];
+    if (waiting > 0) {
+      notes.push(fillUiString(strings.toolGroupWaiting, { count: waiting }));
+    } else if (delegation !== null) {
+      notes.push(delegation);
+    } else if (current !== void 0 && total > 1) {
+      notes.push(current.label);
+    }
+    if (failed > 0) {
+      notes.push(fillUiString(strings.toolGroupFailed, { count: failed }));
+    }
+    if (declined > 0) {
+      notes.push(fillUiString(strings.toolGroupDeclined, { count: declined }));
+    }
+    this.#meta.replaceChildren(
+      ...notes.map((text4) => {
+        const note = document.createElement("span");
+        note.className = "tool-group-note";
+        note.textContent = text4;
+        return note;
+      })
+    );
+    this.#meta.hidden = notes.length === 0;
+  }
+};
+
+// src/ui/transcript/groups_tool_steps.ts
+function groupsToolSteps(mode) {
+  return mode === TOOL_DISPLAY.GROUPED;
+}
+
 // src/ui/transcript/render_or_warn.ts
 function renderOrWarn(render, subject) {
   try {
@@ -15960,6 +16439,12 @@ var Transcript = class {
   #toolCards = /* @__PURE__ */ new Map();
   /** Card elements by call id, so a rendering handler can find its own card. */
   #cardElements = /* @__PURE__ */ new Map();
+  /**
+   * Cards whose call is being run, by call id. A card leaves the awaiting ones
+   * the moment its call is dispatched, and a handler that opens a prompt on its
+   * own card is still running long after, so it is found here.
+   */
+  #running = /* @__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
@@ -15980,6 +16465,24 @@ var Transcript = class {
   // the answer group while a reasoning model thinks and collapsed once the
   // answer's first text token arrives. `null` outside a reasoning turn.
   #thoughts = null;
+  /** The step group behind each group element, so a new card can find its run. */
+  #stepGroups = /* @__PURE__ */ new WeakMap();
+  /**
+   * An empty comment after each step group that has rendered output, which
+   * every later output is placed before, so a group's outputs come out in call
+   * order. Every card of a round joins its group before any handler runs, so
+   * placing each output straight after the group would put the newest first;
+   * and a marker rather than the last output, because an output may be a
+   * fragment, which leaves nothing behind to place the next one after.
+   */
+  #groupEnds = /* @__PURE__ */ new WeakMap();
+  /**
+   * The step group element each placed output belongs to. A tool's own output
+   * does not end its group: the next call joins the group above it. Without
+   * that, replay -- which draws each restored call's output before the next
+   * call's card -- would split a run the live stream drew as one group.
+   */
+  #outputGroups = /* @__PURE__ */ new WeakMap();
   constructor(host) {
     this.#host = host;
   }
@@ -16075,6 +16578,18 @@ var Transcript = class {
   forgetCards() {
     this.#serverSettled.clear();
     this.#cardElements.clear();
+    this.#running.clear();
+  }
+  /** Remember the card of a call being run, for {@link setAsking}. */
+  holdRunning(callId, card) {
+    this.#running.set(callId, card);
+  }
+  /**
+   * Say whether a prompt is open on the card of a running call. A call id of
+   * none, or one no card was held for, has no card to say it on.
+   */
+  setAsking(callId, asking) {
+    this.#running.get(callId)?.setAsking(asking);
   }
   /** Empty the list back to its empty-state region. The last half of wiping it. */
   empty() {
@@ -16248,7 +16763,23 @@ var Transcript = class {
     if (node === null) {
       return;
     }
-    this.#cardElements.get(call.id)?.after(node);
+    const anchor = this.#cardElements.get(call.id);
+    const group = anchor?.closest(".tool-group");
+    if (group === null || group === void 0) {
+      anchor?.after(node);
+    } else {
+      let end = this.#groupEnds.get(group);
+      if (end === void 0) {
+        end = document.createComment("");
+        group.after(end);
+        this.#groupEnds.set(group, end);
+      }
+      const placed = node instanceof DocumentFragment ? [...node.children] : [node];
+      end.before(node);
+      for (const output of placed) {
+        this.#outputGroups.set(output, group);
+      }
+    }
     this.afterGrew();
   }
   /** Update the empty state and follow the foot, after the transcript grew. */
@@ -16276,11 +16807,49 @@ var Transcript = class {
       formatPayload: (payload) => this.#host.formatToolPayload(payload)
     });
     this.#toolCards.set(call.id, card);
-    this.ensureGroup().appendChild(card.element);
+    if (groupsToolSteps(this.#host.toolDisplay())) {
+      this.#stepGroup().add(card.element, summary);
+    } else {
+      this.ensureGroup().appendChild(card.element);
+    }
     this.updateEmptyState();
     this.follow();
     return card;
   }
+  /**
+   * Open the step group ``card`` sits in, at once, ahead of a prompt about to be
+   * drawn inside it. A no-op for a card drawn in a card display mode, which has
+   * no group.
+   */
+  revealStep(card) {
+    const group = card.element.closest(".tool-group");
+    (group === null ? void 0 : this.#stepGroups.get(group))?.reveal();
+  }
+  /**
+   * The step group a new card joins. Consecutive cards share one, and so do
+   * cards separated only by the group's own rendered output; anything else in
+   * between (text, a confirmation, a question) starts the next.
+   *
+   * The pending dots are not skipped over: a tool call takes them down before
+   * its card is drawn, so they are never what a card finds at the foot of the
+   * turn.
+   */
+  #stepGroup() {
+    const answer = this.ensureGroup();
+    const last = answer.lastElementChild;
+    const existing = last === null ? void 0 : this.#stepGroups.get(this.#outputGroups.get(last) ?? last);
+    if (existing !== void 0) {
+      return existing;
+    }
+    const group = new ToolStepGroup(this.#host.strings());
+    this.#stepGroups.set(group.element, group);
+    if (last === null) {
+      answer.prepend(group.element);
+    } else {
+      last.after(group.element);
+    }
+    return group;
+  }
 };
 
 // src/core/activity_registry.ts
@@ -18440,6 +19009,7 @@ var AgUiChat = class extends HTMLElement {
     askUser: () => this.askUser,
     askUserRenderer: () => this.askUserRenderer,
     decision: this.#decision,
+    setAsking: (callId, asking) => this.#transcript.setAsking(callId, asking),
     ensureGroup: () => this.#transcript.ensureGroup(),
     strings: () => this.#strings,
     hidePending: () => this.#transcript.hidePending(),
@@ -18492,6 +19062,7 @@ var AgUiChat = class extends HTMLElement {
       resolveTool: (name) => this.#tools.resolve(name),
       toolSummaries: () => this.toolSummaries,
       serverSummary: (name) => this.#tools.summary(name),
+      toolDisplay: () => this.toolDisplay,
       // 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.
@@ -18963,18 +19534,23 @@ var AgUiChat = class extends HTMLElement {
   }
   /**
    * How much detail tool-call cards show, from the `data-tool-display`
-   * attribute (`minimal` / `inline` / `compact` / `full`). Defaults to `full`.
+   * attribute (`grouped` / `minimal` / `inline` / `compact` / `full`).
+   * Defaults to `grouped`, for an absent attribute and for a value the
+   * element does not know; `full` is the per-call card default before
+   * `grouped` existed.
    *
-   * Applied by the shadow CSS from the attribute itself, so changing it
-   * restyles every card already in the transcript rather than only the ones
-   * built afterwards.
+   * The four card modes are applied by the shadow CSS from the attribute
+   * itself, so changing between them restyles every card already in the
+   * transcript. Whether calls fold into a step group is decided as each card
+   * is built: switching to `grouped` folds only the calls drawn afterwards,
+   * and switching away flattens the existing groups, again by CSS.
    */
   get toolDisplay() {
     const attr = this.getAttribute("data-tool-display");
-    if (attr === TOOL_DISPLAY.INLINE || attr === TOOL_DISPLAY.MINIMAL || attr === TOOL_DISPLAY.COMPACT) {
+    if (attr === TOOL_DISPLAY.INLINE || attr === TOOL_DISPLAY.MINIMAL || attr === TOOL_DISPLAY.COMPACT || attr === TOOL_DISPLAY.FULL) {
       return attr;
     }
-    return TOOL_DISPLAY.FULL;
+    return TOOL_DISPLAY.GROUPED;
   }
   set toolDisplay(value) {
     this.setAttribute("data-tool-display", value);
@@ -20342,7 +20918,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.45.0";
+var VERSION = "0.46.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,