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

package/dist/index.js

@@ -6,6 +6,7 @@ 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 THREAD_EVENT = "ag-ui-thread";
 var CUSTOM_AGENT_EVENT = "ag-ui-custom";
 var INVALIDATE_EVENT = "ag-ui-invalidate";
 var FEEDBACK_EVENT = "ag-ui-feedback";
@@ -55,6 +56,7 @@ var ATTACHMENT_STATUS = {
 };
 var DEFAULT_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
 var TOOL_DISPLAY = {
+  GROUPED: "grouped",
   INLINE: "inline",
   MINIMAL: "minimal",
   COMPACT: "compact",
@@ -353,8 +355,79 @@ var ClientToolRegistry = class {
   }
 };
 
+// src/core/chat_registry.ts
+var CONNECTED_CHATS = /* @__PURE__ */ new Set();
+var ChatRegistration = class {
+  #chat;
+  constructor(chat) {
+    this.#chat = chat;
+  }
+  /**
+   * Join, as the most recently connected chat. An element moved in the DOM
+   * left on disconnect before it reconnected, so it rejoins at the end and no
+   * entry needs removing first.
+   */
+  join() {
+    CONNECTED_CHATS.add(this.#chat);
+  }
+  /** Leave. The previous chat, if one is still connected, becomes the latest. */
+  leave() {
+    CONNECTED_CHATS.delete(this.#chat);
+  }
+  /** The most recently connected chat still in the document, or `null`. */
+  static latest() {
+    let latest = null;
+    for (const chat of CONNECTED_CHATS) {
+      latest = chat;
+    }
+    return latest;
+  }
+};
+
+// src/dom/ring_color.ts
+var RING_TOKEN = "--ag-ui-highlight-ring-color";
+var ACCENT_TOKEN = "--ag-ui-accent";
+var CHAT_ACCENT = "--_accent";
+var PACKAGE_ACCENT = "#4f46e5";
+function ringColor(target, chat) {
+  const onTarget = readToken(target, RING_TOKEN);
+  if (onTarget !== "") {
+    return onTarget;
+  }
+  const owner = chat ?? ChatRegistration.latest();
+  const onChat = owner === null ? "" : resolveOn(owner, RING_TOKEN);
+  if (onChat !== "") {
+    return onChat;
+  }
+  const accent = readToken(target, ACCENT_TOKEN);
+  if (accent !== "") {
+    return accent;
+  }
+  const chatAccent = owner === null ? "" : resolveOn(owner, CHAT_ACCENT);
+  return chatAccent === "" ? PACKAGE_ACCENT : chatAccent;
+}
+function readToken(el2, name) {
+  return window.getComputedStyle(el2).getPropertyValue(name).trim();
+}
+function resolveOn(chat, name) {
+  const value = readToken(chat, name);
+  const root = chat.shadowRoot;
+  if (value === "" || root === null) {
+    return value;
+  }
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  probe.style.color = value;
+  if (probe.style.color === "") {
+    return "";
+  }
+  root.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved;
+}
+
 // src/dom/highlight_overlay.ts
-var ACCENT = "#4f46e5";
 function tokenOn(target, name, fallback) {
   const value = window.getComputedStyle(target).getPropertyValue(name).trim();
   return value === "" ? fallback : value;
@@ -439,7 +512,7 @@ function safeColor(value) {
   return CSS.supports("color", value) ? value : null;
 }
 function ringPaint(target, options) {
-  const color = safeColor(options.color) ?? tokenOn(target, "--ag-ui-accent", ACCENT);
+  const color = safeColor(options.color) ?? ringColor(target, options.chat);
   if (options.gradient !== true) {
     return `border-color: ${color}`;
   }
@@ -503,9 +576,6 @@ function setNativeChecked(el2, checked) {
 }
 
 // src/dom/animations.ts
-var ACCENT2 = "#4f46e5";
-var ACCENT_HALO = "rgba(79, 70, 229, 0.4)";
-var ACCENT_PROPERTY = "--ag-ui-accent";
 function delay(ms) {
   return new Promise((resolve) => {
     setTimeout(resolve, ms);
@@ -520,12 +590,8 @@ function motionDelay(ms) {
   }
   return delay(ms);
 }
-function accentColor(el2, fallback) {
-  const themed = window.getComputedStyle(el2).getPropertyValue(ACCENT_PROPERTY).trim();
-  return themed === "" ? fallback : themed;
-}
-function ringShadow(el2) {
-  return `0 0 0 3px ${accentColor(el2, ACCENT_HALO)}`;
+function ringShadow(el2, chat) {
+  return `0 0 0 3px color-mix(in srgb, ${ringColor(el2, chat)} 40%, transparent)`;
 }
 async function typeInto(el2, value, options = {}) {
   const charDelayMs = options.charDelayMs ?? 35;
@@ -544,7 +610,7 @@ async function highlightThenClick(el2, options = {}) {
   const highlightMs = options.highlightMs ?? 280;
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
-  el2.style.outline = `2px solid ${accentColor(el2, ACCENT2)}`;
+  el2.style.outline = `2px solid ${ringColor(el2, options.chat)}`;
   el2.style.outlineOffset = "2px";
   await delay(highlightMs);
   el2.style.outline = previousOutline;
@@ -596,7 +662,8 @@ async function flashRing(el2, options, focusByDefault) {
       scrim: options.scrim === true,
       gradient: options.gradient === true,
       ...options.color === void 0 ? {} : { color: options.color },
-      ...options.ringPadding === void 0 ? {} : { padding: options.ringPadding }
+      ...options.ringPadding === void 0 ? {} : { padding: options.ringPadding },
+      ...options.chat === void 0 ? {} : { chat: options.chat }
     });
     await delay(flashMs);
     dismiss();
@@ -605,7 +672,7 @@ async function flashRing(el2, options, focusByDefault) {
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
   const previousTransition = el2.style.transition;
-  const color = options.color ?? accentColor(el2, ACCENT2);
+  const color = options.color ?? ringColor(el2, options.chat);
   el2.style.outline = `3px solid ${color}`;
   el2.style.outlineOffset = "2px";
   const fadeMs = prefersReducedMotion() ? 0 : Math.round(flashMs * FLASH_FADE_RATIO);
@@ -632,7 +699,7 @@ async function pressThenClick(el2, options = {}) {
   const previousShadow = el2.style.boxShadow;
   el2.style.transition = "transform 80ms ease";
   el2.style.transform = "scale(0.96)";
-  el2.style.boxShadow = ringShadow(el2);
+  el2.style.boxShadow = ringShadow(el2, options.chat);
   await motionDelay(pressMs);
   el2.style.transform = previousTransform;
   el2.style.transition = previousTransition;
@@ -655,7 +722,7 @@ async function selectOption(el2, value, options = {}) {
   const highlightMs = options.highlightMs ?? 220;
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
-  el2.style.outline = `2px solid ${accentColor(el2, ACCENT2)}`;
+  el2.style.outline = `2px solid ${ringColor(el2, options.chat)}`;
   el2.style.outlineOffset = "2px";
   await motionDelay(highlightMs);
   setNativeValue(el2, option.value);
@@ -667,7 +734,7 @@ async function selectOption(el2, value, options = {}) {
 async function toggleControl(el2, checked, options = {}) {
   const flashMs = options.flashMs ?? 200;
   const previousShadow = el2.style.boxShadow;
-  el2.style.boxShadow = ringShadow(el2);
+  el2.style.boxShadow = ringShadow(el2, options.chat);
   await motionDelay(flashMs);
   setNativeChecked(el2, checked);
   el2.dispatchEvent(new Event("input", { bubbles: true }));
@@ -1014,6 +1081,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 +1521,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 +1831,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 +1864,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 +1979,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(),
@@ -4399,7 +4488,7 @@ var ConversationHistory = class {
     this.#host.conversationStore().setActiveThread(threadId);
     this.#threadId = threadId;
     this.#host.setRunning(false);
-    await this.rehydrate();
+    await this.rehydrate("switch");
   }
   /** Rename a thread, then reload the list that shows its title. */
   renameThread(threadId, title) {
@@ -4417,6 +4506,7 @@ var ConversationHistory = class {
       this.#host.resetState();
       this.adoptActiveThread();
       this.#host.setRunning(false);
+      this.#host.threadChanged(this.#threadId, "delete");
     }
     void this.refreshDrawer();
   }
@@ -4593,8 +4683,11 @@ var ConversationHistory = class {
    * for the run it would have resumed -- unless what replaced it is a restore
    * of the same conversation, still current, which answers for that run
    * instead; see `#forgetStopped`.
+   *
+   * `reason` is what the thread event this restore ends with reports as why
+   * the conversation changed. A restore that is stopped reports nothing.
    */
-  async rehydrate() {
+  async rehydrate(reason) {
     this.#generation += 1;
     const generation = this.#generation;
     const threadId = this.#threadId;
@@ -4644,11 +4737,17 @@ var ConversationHistory = class {
           }
         }
       }
+      if (checkpoint === null) {
+        this.#noticeIfRunUnfinished(messages);
+      }
+      this.#host.threadChanged(threadId, reason);
       if (checkpoint !== null) {
+        if (!this.#restoring(generation)) {
+          this.#forgetStopped(store, threadId, checkpoint);
+          return;
+        }
         await this.#resumeFrom(checkpoint, generation);
-        return;
       }
-      this.#noticeIfRunUnfinished(messages);
     } finally {
       hold.release();
       if (this.#loading === waiting) {
@@ -5629,6 +5728,8 @@ function surfaceFor(placement) {
 
 // src/ui/placement/panel_placement.ts
 var SIZE_KEY = "ag-ui-chat:size";
+var DRAG_WIDTH = "--_drag-width";
+var DRAG_HEIGHT = "--_drag-height";
 var LAUNCHER_KEY = "ag-ui-chat:launcher";
 function asPoint(value) {
   if (typeof value !== "object" || value === null) {
@@ -5712,6 +5813,17 @@ var PanelPlacement = class {
   restoreSize() {
     this.#applySize(this.#readSize());
   }
+  /**
+   * Drop the dragged size and its stored copy, so the placement's own size and
+   * the host's tokens apply again. For a host entering a sized state of its
+   * own, which a user's drag would otherwise outrank.
+   */
+  resetSize() {
+    this.#host.element.style.removeProperty(DRAG_WIDTH);
+    this.#host.element.style.removeProperty(DRAG_HEIGHT);
+    this.#host.clearPreference(SIZE_KEY);
+    this.syncResizeAnchor();
+  }
   /**
    * A zero-sized box carrying the host's viewport insets as padding, so they
    * can be read back as used pixel lengths. See the `.viewport-probe` rule for
@@ -5900,12 +6012,12 @@ var PanelPlacement = class {
    */
   #measureAnchor() {
     const before = this.#host.element.getBoundingClientRect();
-    const width = this.#host.element.style.getPropertyValue("--ag-ui-width");
-    const height = this.#host.element.style.getPropertyValue("--ag-ui-height");
+    const width = this.#host.element.style.getPropertyValue(DRAG_WIDTH);
+    const height = this.#host.element.style.getPropertyValue(DRAG_HEIGHT);
     const shrunk = this.#probeAnchor(before, -1);
     const grown = shrunk.x === null || shrunk.y === null ? this.#probeAnchor(before, 1) : shrunk;
-    this.#restoreProperty("--ag-ui-width", width);
-    this.#restoreProperty("--ag-ui-height", height);
+    this.#restoreProperty(DRAG_WIDTH, width);
+    this.#restoreProperty(DRAG_HEIGHT, height);
     return {
       // Neither direction moved it: the axis cannot be resized at all, so the
       // floating default is the best answer available and is the one the
@@ -5951,7 +6063,7 @@ var PanelPlacement = class {
   /**
    * 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
+   * Writing a 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
@@ -5965,10 +6077,10 @@ var PanelPlacement = class {
       return;
     }
     if (size.width !== void 0) {
-      this.#host.element.style.setProperty("--ag-ui-width", `${size.width}px`);
+      this.#host.element.style.setProperty(DRAG_WIDTH, `${size.width}px`);
     }
     if (size.height !== void 0 && axis === "both") {
-      this.#host.element.style.setProperty("--ag-ui-height", `${size.height}px`);
+      this.#host.element.style.setProperty(DRAG_HEIGHT, `${size.height}px`);
     }
   }
   /**
@@ -5981,10 +6093,10 @@ var PanelPlacement = class {
   releaseOwnedAxes() {
     const axis = this.#resizeAxis();
     if (axis !== "both") {
-      this.#host.element.style.removeProperty("--ag-ui-height");
+      this.#host.element.style.removeProperty(DRAG_HEIGHT);
     }
     if (axis === "none") {
-      this.#host.element.style.removeProperty("--ag-ui-width");
+      this.#host.element.style.removeProperty(DRAG_WIDTH);
     }
   }
   /**
@@ -6887,9 +6999,7 @@ var ToolCallCard = class {
     this.#formatPayload = options.formatPayload ?? null;
     this.element = document.createElement("div");
     this.element.className = "tool-call";
-    this.element.setAttribute("part", "tool-card");
     this.element.setAttribute("data-tool-name", name);
-    this.element.setAttribute("data-status", TOOL_CALL_STATUS.PENDING);
     this.element.setAttribute("data-expanded", "false");
     const head = document.createElement("div");
     head.className = "tool-call-head";
@@ -6904,8 +7014,7 @@ var ToolCallCard = class {
     label.textContent = summary ?? name;
     this.#status = document.createElement("span");
     this.#status.className = "tool-call-status";
-    this.#status.setAttribute("part", "tool-card-status");
-    this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
+    this.#setStatus(TOOL_CALL_STATUS.PENDING);
     this.#decision = document.createElement("span");
     this.#decision.className = "tool-call-decision";
     this.#decision.setAttribute("part", "tool-card-decision");
@@ -6953,8 +7062,17 @@ var ToolCallCard = class {
     if (this.#settled) {
       return;
     }
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(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.
@@ -6979,8 +7097,7 @@ var ToolCallCard = class {
       return;
     }
     this.#settled = true;
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
     this.#resultLabel.textContent = resultLabels(this.#strings)[status];
     this.#renderPayload(
       this.#resultBody,
@@ -6989,6 +7106,20 @@ var ToolCallCard = class {
     );
     this.#resultSection.hidden = false;
   }
+  /**
+   * Write the status everywhere it is read from, in one place so they cannot
+   * disagree: `data-status` for the shadow CSS, the pill's text, and the part
+   * lists. `::part()` takes no attribute selector, so the card and its pill also
+   * name the status as a part (`tool-card-error`, `tool-card-status-error`), the
+   * modifier convention a run notice uses, and a host styles failures alone.
+   * Setting the whole list replaces the previous modifier.
+   */
+  #setStatus(status) {
+    this.element.setAttribute("data-status", status);
+    this.element.setAttribute("part", `tool-card tool-card-${status}`);
+    this.#status.setAttribute("part", `tool-card-status tool-card-status-${status}`);
+    this.#status.textContent = statusLabels(this.#strings)[status];
+  }
   /**
    * Fill one body region, offering it to the host formatter first.
    *
@@ -8038,8 +8169,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);
@@ -8342,8 +8471,8 @@ var EMBEDDED_STYLES = `
    the widget lives in the host's own layout (fixes overlay/z-index clashes). */
 :host([placement="embedded"]) {
   --_position: var(--ag-ui-position, static);
-  --_width: var(--ag-ui-width, 100%);
-  --_height: var(--ag-ui-height, 100%);
+  --_width: var(--_drag-width, var(--ag-ui-width, 100%));
+  --_height: var(--_drag-height, var(--ag-ui-height, 100%));
   --_max-width: var(--ag-ui-max-width, 100%);
   --_max-height: var(--ag-ui-max-height, 100%);
   --_shadow: var(--ag-ui-shadow, none);
@@ -8601,7 +8730,7 @@ var PRESET_STYLES = `
 
 :host([placement="side"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);
@@ -8817,7 +8946,7 @@ var SIDEBAR_STYLES = `
    host-managed push instead. */
 :host([placement="sidebar"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);
@@ -8916,6 +9045,11 @@ var SMALL_VIEWPORT_STYLES = `
    fine-pointered and small, and conflating the two gets both wrong. What the
    pointer decides is which controls make sense, further down.
 
+   The size the user dragged is deliberately not read here. The desktop
+   placements read it before the host token, and this block restates the sizes
+   without it, so a persisted or freshly dragged size cannot change the shape
+   of a phone, and a window narrowed after a drag goes full-bleed.
+
    Two placements are left alone. "page" is already this shape. "embedded" sits
    in a box the host sized and placed, and taking that over would break the app
    shell it was embedded into -- the host is the only party that knows whether
@@ -9057,8 +9191,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 +9207,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 +9622,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 +10067,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. */
@@ -9980,8 +10330,8 @@ var TOKEN_STYLES = `
      grid/flex layout) to embed it in the page flow instead of floating. */
   --_position: var(--ag-ui-position, fixed);
   --_z-index: var(--ag-ui-z-index, 2147483000);
-  --_width: var(--ag-ui-width, 380px);
-  --_height: var(--ag-ui-height, 560px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 380px));
+  --_height: var(--_drag-height, var(--ag-ui-height, 560px));
   /* The gutter a resting floating panel keeps between itself and the edge of
      the box the host left free. One number, because the inset below spends it
      and the cap beneath has to know it was spent. */
@@ -10049,6 +10399,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 +10618,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 +11016,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 +11704,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 +12011,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 +16242,201 @@ 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("part", `tool-group tool-group-${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 +16543,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 +16569,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 +16682,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 +16867,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 +16911,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
@@ -17429,8 +18102,13 @@ var RunHandlers = class {
    * A handler table for one AG-UI client. Every table built for the current
    * conversation draws into the same transcript and shares its bookkeeping, so
    * a continuation run reports into the interaction the user is looking at.
+   *
+   * `threadId` is the thread the client was built for, named on the
+   * run-finished detail. Taken here rather than read when the run settles,
+   * because a stopped run settles after the reset that stopped it, when the
+   * thread on screen is already the next one.
    */
-  forClient() {
+  forClient(threadId) {
     const ledger = this.#ledger;
     const attached = () => ledger === this.#ledger;
     const { onSettled, ...drawing } = this.#tableFor(ledger);
@@ -17440,7 +18118,7 @@ var RunHandlers = class {
         if (attached()) {
           onSettled();
         }
-        this.#dispatchRunFinished(ledger);
+        this.#dispatchRunFinished(ledger, threadId);
       }
     };
   }
@@ -17593,7 +18271,7 @@ var RunHandlers = class {
    * server is a fact about the run, and a name can appear on both sides across a
    * conversation.
    */
-  #dispatchRunFinished(ledger) {
+  #dispatchRunFinished(ledger, threadId) {
     const tools = ledger.tools.map(({ id, name }) => ({
       name,
       side: ledger.serverSettled.has(id) ? "server" : "client"
@@ -17604,7 +18282,7 @@ var RunHandlers = class {
     ledger.invalidated.clear();
     this.#host.element.dispatchEvent(
       new CustomEvent(RUN_FINISHED_EVENT, {
-        detail: { tools, invalidated },
+        detail: { threadId, tools, invalidated },
         bubbles: true,
         composed: true
       })
@@ -18423,6 +19101,11 @@ var AgUiChat = class extends HTMLElement {
    * then a host's {@link sendMessage} waits for it rather than refusing.
    */
   #restoreHold = null;
+  /**
+   * The thread the latest {@link THREAD_EVENT} reported, which the next one
+   * names as the thread it replaced; `null` before the first.
+   */
+  #shownThread = null;
   /** The decision a run is suspended on, which a Stop abandons. */
   #decision = new PendingDecision();
   /**
@@ -18440,6 +19123,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(),
@@ -18453,6 +19137,8 @@ var AgUiChat = class extends HTMLElement {
     allowImages: () => this.allowImages,
     follow: () => this.#transcript.follow()
   });
+  // This chat's place among the connected ones, which a free highlight ring reads.
+  #chatRegistration = new ChatRegistration(this);
   /**
    * Which storage keys are this element's: the namespace it claims, the keys
    * its layout preferences live under, and the built-in store scoped to them.
@@ -18492,6 +19178,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.
@@ -18699,7 +19386,8 @@ var AgUiChat = class extends HTMLElement {
       },
       cancelRun: () => this.#cancelRun(),
       resetState: () => this.#resetState(),
-      setRunning: (running) => this.#setRunning(running)
+      setRunning: (running) => this.#setRunning(running),
+      threadChanged: (threadId, reason) => this.#dispatchThread(threadId, reason)
     });
   }
   /** Attributes the element reacts to after it has been connected. */
@@ -18963,18 +19651,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);
@@ -19007,6 +19700,7 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#connectedBefore = true;
     this.#storage.claim();
+    this.#chatRegistration.join();
     this.#placement.restoreSize();
     requestAnimationFrame(() => {
       this.#placement.restoreLauncherPosition();
@@ -19044,7 +19738,7 @@ var AgUiChat = class extends HTMLElement {
     this.#voice.wire();
     this.#history.adoptActiveThread();
     queueMicrotask(() => this.#startup());
-    void this.#history.rehydrate();
+    void this.#history.rehydrate(changed && held !== "" ? "rescope" : "restore");
     if (changed) {
       void this.#history.refreshDrawer();
     }
@@ -19097,7 +19791,7 @@ var AgUiChat = class extends HTMLElement {
     await Promise.all([
       this.#tools.fetchCatalog(),
       this.#skills.fetch(),
-      this.#history.rehydrate()
+      this.#history.rehydrate("restore")
     ]);
   }
   /**
@@ -19113,6 +19807,7 @@ var AgUiChat = class extends HTMLElement {
     window.visualViewport?.removeEventListener("resize", this.#onViewportResize);
     window.visualViewport?.removeEventListener("scroll", this.#onViewportResize);
     this.#storage.release();
+    this.#chatRegistration.leave();
     this.#cancelRun();
     this.#excerpts.detachPageOffer();
     this.#attachments.tray?.dispose();
@@ -19260,6 +19955,26 @@ var AgUiChat = class extends HTMLElement {
   get unread() {
     return this.#unread;
   }
+  /**
+   * The thread on screen; `null` before the element first connects.
+   *
+   * Only reads. `conversationStore.threadId()` mints and stores a thread when
+   * the store points at none, so a host asking which conversation is showing
+   * could start one; this never does. {@link THREAD_EVENT} says when it changes.
+   */
+  get threadId() {
+    const threadId = this.#history.threadId;
+    return threadId === "" ? null : threadId;
+  }
+  /**
+   * Whether an interaction is in flight: the composer's own state, the one that
+   * shows Stop. It spans every tool round, a retry and a checkpoint
+   * continuation as well as a send, which {@link SUBMIT_EVENT} alone does not.
+   * Reflected as `data-running` on the element, for a host's CSS.
+   */
+  get running() {
+    return this.#running;
+  }
   /**
    * Whether to mount collapsed.
    *
@@ -19310,6 +20025,13 @@ var AgUiChat = class extends HTMLElement {
   moveTo(corner, options = {}) {
     return this.#placement.moveTo(corner, options);
   }
+  /**
+   * Drop a size the user dragged, and its stored copy, so the placement's
+   * default and the host's `--ag-ui-width` / `--ag-ui-height` apply again.
+   */
+  resetSize() {
+    this.#placement.resetSize();
+  }
   /** Flip the collapsed state. Bound to the built-in header toggle. */
   toggleCollapsed() {
     this.setCollapsed(!this.collapsed);
@@ -19379,7 +20101,7 @@ var AgUiChat = class extends HTMLElement {
     this.#voice.dispose();
     this.#voice.wire();
     this.#history.adoptActiveThread();
-    void this.#history.rehydrate();
+    void this.#history.rehydrate("rescope");
     void this.#history.refreshDrawer();
   }
   /**
@@ -19440,6 +20162,34 @@ var AgUiChat = class extends HTMLElement {
   closeCheckpoints() {
     this.#checkpoints.close();
   }
+  /**
+   * Put a stored thread on screen, as picking it in the conversation list does,
+   * for a host that lists conversations in its own chrome.
+   *
+   * Resolves once the thread has been replayed, when {@link THREAD_EVENT} has
+   * fired. **A run in flight is cancelled**, as the list and {@link newChat} do;
+   * a host that would rather wait reads {@link running} first. The thread
+   * already on screen is left alone, and so is everything before the element
+   * connects, since until then it has no store to read the thread from.
+   */
+  async switchThread(threadId) {
+    if (!this.#connected) {
+      return;
+    }
+    await this.#history.switchThread(threadId);
+  }
+  /**
+   * Delete a stored thread, as the conversation list's delete does. Deleting the
+   * thread on screen cancels its run and puts a fresh thread in its place, and
+   * {@link THREAD_EVENT} reports it; deleting another leaves the screen alone.
+   * Does nothing before the element connects.
+   */
+  deleteThread(threadId) {
+    if (!this.#connected) {
+      return;
+    }
+    this.#history.deleteThread(threadId);
+  }
   /**
    * 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
@@ -19472,6 +20222,7 @@ var AgUiChat = class extends HTMLElement {
     this.#history.startThread();
     this.#setRunning(false);
     this.#setUnread(0);
+    this.#dispatchThread(this.#history.threadId, "new");
     if (!this.collapsed) {
       this.#input.focus({ preventScroll: true });
     }
@@ -19664,6 +20415,8 @@ var AgUiChat = class extends HTMLElement {
       },
       onFilesPicked: () => this.#attachments.onFilesPicked()
     });
+    const aboveComposer = document.createElement("slot");
+    aboveComposer.name = "above-composer";
     const footer = document.createElement("slot");
     footer.name = "footer";
     this.#messagesWrap.className = "messages-wrap";
@@ -19676,6 +20429,7 @@ var AgUiChat = class extends HTMLElement {
       this.#composerHint,
       this.#queuedRow,
       this.#attachSlot,
+      aboveComposer,
       inputRow,
       footer,
       this.#drawer.element,
@@ -19843,6 +20597,21 @@ var AgUiChat = class extends HTMLElement {
     this.#sending = null;
     this.#history.stopContinuation();
   }
+  /**
+   * Say the conversation on screen changed: {@link THREAD_EVENT}.
+   *
+   * The thread it replaced is the one last reported, rather than the one the
+   * element last pointed at: a switch superseded before it replayed never drew
+   * its thread, so naming it as the previous one left a host's own list
+   * marking a thread that was never shown and still marking the one that was.
+   */
+  #dispatchThread(threadId, reason) {
+    const detail = { threadId, previousThreadId: this.#shownThread, reason };
+    this.#shownThread = threadId;
+    this.dispatchEvent(
+      new CustomEvent(THREAD_EVENT, { detail, bubbles: true, composed: true })
+    );
+  }
   /**
    * Swap the composer button between Send (idle) and Stop (running).
    *
@@ -19860,6 +20629,7 @@ var AgUiChat = class extends HTMLElement {
     this.#send.title = label;
     this.#send.setAttribute("aria-label", label);
     this.#send.dataset["state"] = running ? "running" : "idle";
+    this.toggleAttribute("data-running", running);
     if (settled) {
       this.#flushQueued();
     }
@@ -20148,7 +20918,7 @@ var AgUiChat = class extends HTMLElement {
     });
     return new AgUiClient({
       agent,
-      handlers: this.#runHandlers.forClient(),
+      handlers: this.#runHandlers.forClient(threadId),
       getTools: () => this.#tools.advertise(),
       getContext: () => this.#dispatch.buildContext(),
       executeTool: (call) => this.#dispatch.execute(call),
@@ -20342,7 +21112,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.45.0";
+var VERSION = "0.47.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -20375,6 +21145,7 @@ export {
   SUBMIT_EVENT,
   SUGGESTIONS_ACTIVITY_TYPE,
   SessionStorageStore,
+  THREAD_EVENT,
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,