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

package/dist/index.js

@@ -6,6 +6,19 @@ 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 CUSTOM_AGENT_EVENT = "ag-ui-custom";
+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"
@@ -16,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",
@@ -47,6 +65,7 @@ var ICON_FILE_IMAGE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"
 var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><rect class="glyph--solid" x="7.5" y="13.5" width="9" height="4.5" rx="1"/></svg>`;
 var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13.5h7M8.5 17h4.5"/></svg>`;
 var CHART_ACTIVITY_TYPE = "chart";
+var ANNOUNCE_CLEAR_MS = 150;
 
 // src/core/ag_ui_chat.ts
 import { randomUUID as randomUUID5 } from "@ag-ui/client";
@@ -537,6 +556,12 @@ var DEFAULT_UI_STRINGS = {
   forkRun: "Fork",
   forkedRun: "branched",
   conversation: "Conversation",
+  jumpToLatest: "Jump to latest",
+  announceResponding: "Assistant is responding",
+  announceAnswerReady: "Assistant answered",
+  announceAwaitingDecision: "{count} action is waiting for your approval",
+  announceStopped: "Response stopped",
+  announceFailed: "The response failed",
   thinking: "Assistant is thinking\u2026",
   thoughts: "Thoughts",
   stopped: "\u23F9 Stopped",
@@ -544,6 +569,8 @@ var DEFAULT_UI_STRINGS = {
   noResult: "No result returned.",
   declinedAction: "User declined the action.",
   navigating: "Navigating\u2026",
+  historyReplaced: "The server replaced this conversation's history. Reload to see the updated transcript.",
+  chartUndrawable: "A chart could not be drawn from the data sent, so it was removed.",
   historyCompacted: "Earlier turns condensed to fit the context window ({count} removed)",
   usingSkill: "Using skill {name}",
   runInterrupted: "The previous response didn\u2019t finish \u2014 the page changed before it arrived.",
@@ -573,7 +600,20 @@ 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.",
+  suggestions: "Suggested follow-ups",
+  messageActions: "Message actions",
+  quoteSelection: "Quote",
+  copyMessage: "Copy message",
+  retryMessage: "Try again",
+  feedbackUp: "Good answer",
+  feedbackDown: "Poor answer",
   confirmAction: "Confirm action",
+  confirmAlways: "Always allow",
   confirmRun: "Run \u201C{tool}\u201D?",
   confirm: "Confirm",
   cancel: "Cancel",
@@ -640,6 +680,7 @@ function requestApproval(host, request, options = {}) {
     body.className = "approval-body";
     body.setAttribute("part", "approval-body");
     body.textContent = request.message ?? strings.approvalPrompt;
+    const editor = buildEditor(request, options, strings);
     const actions = document.createElement("div");
     actions.className = "approval-actions";
     actions.setAttribute("part", "approval-actions");
@@ -657,10 +698,15 @@ function requestApproval(host, request, options = {}) {
       resolve(approved);
     };
     deny.addEventListener("click", () => close(false));
-    approve.addEventListener("click", () => close(true));
+    approve.addEventListener("click", () => {
+      if (editor !== null && !editor.commit()) {
+        return;
+      }
+      close(true);
+    });
     options.signal?.addEventListener("abort", () => close(false), { once: true });
     actions.append(deny, approve);
-    card.append(body, actions);
+    card.append(body, ...editor === null ? [] : [editor.root], actions);
     host.appendChild(card);
     if (options.signal?.aborted === true) {
       close(false);
@@ -669,6 +715,54 @@ function requestApproval(host, request, options = {}) {
     approve.focus();
   });
 }
+function buildEditor(request, options, strings) {
+  const { onEdit } = options;
+  if (onEdit === void 0 || request.args === void 0) {
+    return null;
+  }
+  const original = JSON.stringify(request.args, null, 2);
+  const root = document.createElement("div");
+  root.className = "approval-edit";
+  root.setAttribute("part", "approval-edit");
+  const field = document.createElement("textarea");
+  field.className = "approval-args";
+  field.setAttribute("part", "approval-args");
+  field.setAttribute("aria-label", strings.approvalEditArgs);
+  field.rows = Math.min(10, original.split("\n").length);
+  field.value = original;
+  const error = document.createElement("div");
+  error.className = "approval-error";
+  error.setAttribute("part", "approval-error");
+  error.setAttribute("role", "alert");
+  error.hidden = true;
+  root.append(field, error);
+  return {
+    root,
+    commit: () => {
+      if (field.value === original) {
+        return true;
+      }
+      let parsed;
+      try {
+        parsed = JSON.parse(field.value);
+      } catch {
+        error.textContent = strings.approvalArgsInvalid;
+        error.hidden = false;
+        field.focus();
+        return false;
+      }
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        error.textContent = strings.approvalArgsNotAnObject;
+        error.hidden = false;
+        field.focus();
+        return false;
+      }
+      error.hidden = true;
+      onEdit(parsed);
+      return true;
+    }
+  };
+}
 
 // src/ui/attach_copy_buttons.ts
 var CONFIRM_MS = 1500;
@@ -1399,6 +1493,7 @@ var CheckpointMenu = class {
   #heading;
   /** What had focus before the panel opened, restored on close. */
   #lastFocused = null;
+  #formatRelativeTime = null;
   #strings;
   #runs = [];
   constructor(onPick, strings = DEFAULT_UI_STRINGS) {
@@ -1431,6 +1526,21 @@ var CheckpointMenu = class {
     this.#render();
   }
   /** Re-localize a panel built before the host's strings resolved. */
+  /**
+   * Replace the timestamp formatter, or restore the built-in with `null`.
+   *
+   * The built-in is deliberately locale-neutral -- there is no `Intl` anywhere
+   * in this component, so it never disagrees with a host's own formatting by
+   * guessing a locale. That is a defensible default and a poor requirement, so
+   * this is the way out.
+   */
+  setRelativeTimeFormatter(format) {
+    this.#formatRelativeTime = format;
+  }
+  /** This row's timestamp, through the host's formatter when it set one. */
+  #formatTime(timestamp) {
+    return this.#formatRelativeTime !== null ? this.#formatRelativeTime(timestamp) : relativeTime(timestamp, Date.now(), this.#strings);
+  }
   setStrings(strings) {
     this.#strings = strings;
     this.element.setAttribute("aria-label", strings.checkpoints);
@@ -1532,7 +1642,7 @@ var CheckpointMenu = class {
     row.className = "checkpoint-row";
     row.setAttribute("part", "checkpoint-row");
     const preview = previewOf(run);
-    const time = run.started_at === null ? null : relativeTime(Date.parse(run.started_at), Date.now(), this.#strings);
+    const time = run.started_at === null ? null : this.#formatTime(Date.parse(run.started_at));
     const label = document.createElement("span");
     label.className = "checkpoint-label";
     label.setAttribute("part", "checkpoint-label");
@@ -1613,6 +1723,7 @@ function requestConfirmation(host, request, options = {}) {
     actions.className = "confirm-actions";
     actions.setAttribute("part", "confirm-actions");
     const cancel = actionButton2("cancel", strings.cancel);
+    const always = options.onAlwaysAllow === void 0 ? null : actionButton2("always", strings.confirmAlways.replace("{tool}", request.toolName));
     const confirm2 = actionButton2("confirm", strings.confirm);
     let settled = false;
     const close = (accepted) => {
@@ -1625,8 +1736,12 @@ function requestConfirmation(host, request, options = {}) {
     };
     cancel.addEventListener("click", () => close(false));
     confirm2.addEventListener("click", () => close(true));
+    always?.addEventListener("click", () => {
+      options.onAlwaysAllow?.();
+      close(true);
+    });
     options.signal?.addEventListener("abort", () => close(false), { once: true });
-    actions.append(cancel, confirm2);
+    actions.append(cancel, ...always === null ? [] : [always], confirm2);
     card.append(body, args, actions);
     host.appendChild(card);
     if (options.signal?.aborted === true) {
@@ -1637,6 +1752,349 @@ function requestConfirmation(host, request, options = {}) {
   });
 }
 
+// src/ui/message_actions.ts
+var CONFIRM_MS2 = 1500;
+function attachMessageActions(bubble, options) {
+  if (existingBar(bubble) !== null) {
+    return;
+  }
+  const bar = messageActionBar(bubble, options.strings);
+  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),
+      feedbackButton("down", options.strings.feedbackDown, options.onFeedback)
+    );
+  }
+}
+function messageActionBar(bubble, strings) {
+  const existing = existingBar(bubble);
+  if (existing !== null) {
+    return existing;
+  }
+  const bar = document.createElement("div");
+  bar.className = "message-actions";
+  bar.setAttribute("part", "message-actions");
+  bar.setAttribute("role", "group");
+  bar.setAttribute("aria-label", strings.messageActions);
+  bubble.after(bar);
+  return bar;
+}
+function existingBar(bubble) {
+  const next = bubble.nextElementSibling;
+  return next?.classList.contains("message-actions") === true ? next : null;
+}
+function messageActionButton(modifier, label, glyph) {
+  const button2 = document.createElement("button");
+  button2.type = "button";
+  button2.className = `message-action message-action--${modifier}`;
+  button2.setAttribute("part", `message-action message-action-${modifier}`);
+  button2.title = label;
+  button2.setAttribute("aria-label", label);
+  const icon = document.createElement("span");
+  icon.setAttribute("aria-hidden", "true");
+  icon.textContent = glyph;
+  button2.appendChild(icon);
+  return button2;
+}
+function copyButton(strings, text3) {
+  const button2 = messageActionButton("copy", strings.copyMessage, "\u2398");
+  button2.addEventListener("click", () => {
+    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.
+      () => flash2(button2, strings.copyFailed, strings.copyMessage)
+    );
+  });
+  return button2;
+}
+function feedbackButton(rating, label, report) {
+  const button2 = messageActionButton(
+    rating === "up" ? "up" : "down",
+    label,
+    rating === "up" ? "\u{1F44D}" : "\u{1F44E}"
+  );
+  button2.addEventListener("click", () => {
+    const pressed = button2.getAttribute("aria-pressed") === "true";
+    button2.setAttribute("aria-pressed", pressed ? "false" : "true");
+    report(rating);
+  });
+  button2.setAttribute("aria-pressed", "false");
+  return button2;
+}
+function flash2(button2, message, label) {
+  button2.title = message;
+  button2.setAttribute("aria-label", message);
+  button2.classList.add("message-action--confirmed");
+  setTimeout(() => {
+    button2.title = label;
+    button2.setAttribute("aria-label", label);
+    button2.classList.remove("message-action--confirmed");
+  }, CONFIRM_MS2);
+}
+
+// src/ui/quote_selection.ts
+var MAX_QUOTE_CHARS = 500;
+function quotableSelection(container, roots = [], near) {
+  for (const endpoints of endpointCandidates(roots)) {
+    if (!container.contains(endpoints.startContainer)) {
+      continue;
+    }
+    if (!container.contains(endpoints.endContainer)) {
+      continue;
+    }
+    const range = document.createRange();
+    range.setStart(endpoints.startContainer, endpoints.startOffset);
+    range.setEnd(endpoints.endContainer, endpoints.endOffset);
+    const text3 = renderedText(range).trim();
+    if (text3 === "") {
+      continue;
+    }
+    return { text: text3, rect: lineToHangFrom(range, near) };
+  }
+  return null;
+}
+function asQuote(text3) {
+  const lines = tidy(text3);
+  if (lines.length === 0) {
+    return "";
+  }
+  const capped = cap(lines.join("\n"));
+  const quoted = capped.split("\n").map((line) => `> ${line}`.trimEnd()).join("\n");
+  return `${quoted}
+
+`;
+}
+function tidy(text3) {
+  const lines = text3.split(/\r\n?|\n/).map((line) => line.trimEnd());
+  const indents = lines.filter((line) => line !== "").map(indentOf);
+  const shared = indents.length === 0 ? 0 : Math.min(...indents);
+  const kept = [];
+  for (const line of lines) {
+    const dedented = line.slice(shared);
+    if (dedented === "" && (kept.length === 0 || kept[kept.length - 1] === "")) {
+      continue;
+    }
+    kept.push(dedented);
+  }
+  while (kept[kept.length - 1] === "") {
+    kept.pop();
+  }
+  return kept;
+}
+function indentOf(line) {
+  return line.length - line.trimStart().length;
+}
+function cap(text3) {
+  return text3.length > MAX_QUOTE_CHARS ? `${text3.slice(0, MAX_QUOTE_CHARS).trimEnd()}...` : text3;
+}
+function renderedText(range) {
+  let text3 = "";
+  for (const node of textNodesIn(range)) {
+    const parent = node.parentElement;
+    if (!isRendered(parent)) {
+      continue;
+    }
+    const from = node === range.startContainer ? range.startOffset : 0;
+    const to = node === range.endContainer ? range.endOffset : node.data.length;
+    text3 += collapse(node.data.slice(from, to), parent);
+  }
+  return text3;
+}
+function collapse(text3, parent) {
+  if (PREFORMATTED.has(whiteSpaceOf(parent))) {
+    return text3;
+  }
+  return text3.replace(/[^\S\n]*\n[^\S\n]*/g, "\n").replace(/[^\S\n]+/g, " ");
+}
+var PREFORMATTED = /* @__PURE__ */ new Set(["pre", "pre-wrap", "break-spaces"]);
+function whiteSpaceOf(element) {
+  return window.getComputedStyle(element).whiteSpace;
+}
+function textNodesIn(range) {
+  const root = range.commonAncestorContainer;
+  if (root.nodeType === Node.TEXT_NODE) {
+    return [root];
+  }
+  const found = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+    if (range.intersectsNode(node)) {
+      found.push(node);
+    }
+  }
+  return found;
+}
+function isRendered(element) {
+  if (typeof element.checkVisibility !== "function") {
+    return true;
+  }
+  return element.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true
+  });
+}
+function lineToHangFrom(range, near) {
+  const lines = [...range.getClientRects()];
+  if (lines.length === 0) {
+    return range.getBoundingClientRect();
+  }
+  if (near === void 0) {
+    return lines[0];
+  }
+  let closest = lines[0];
+  let shortest = distanceTo(closest, near);
+  for (const line of lines.slice(1)) {
+    const distance = distanceTo(line, near);
+    if (distance < shortest) {
+      shortest = distance;
+      closest = line;
+    }
+  }
+  return closest;
+}
+function distanceTo(rect, point) {
+  const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
+  const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
+  return Math.hypot(dx, dy);
+}
+function endpointCandidates(roots) {
+  const selection = window.getSelection();
+  if (selection === null) {
+    return [];
+  }
+  const candidates = [...composedRanges(selection, roots)];
+  if (selection.rangeCount > 0) {
+    candidates.push(selection.getRangeAt(0));
+  }
+  return candidates;
+}
+function composedRanges(selection, roots) {
+  const composed = selection.getComposedRanges;
+  if (composed === void 0) {
+    return [];
+  }
+  try {
+    return composed.call(selection, { shadowRoots: roots });
+  } catch {
+    return composed.call(selection, ...roots);
+  }
+}
+
+// src/ui/page_quote_offer.ts
+var GAP = 6;
+var OFFER_CSS = `
+.ag-ui-quote-offer {
+  position: fixed;
+  z-index: 2147483000;
+  transform: translate(-50%, -100%);
+  margin: 0;
+  padding: 0.25em 0.7em;
+  border: 1px solid rgb(0 0 0 / 0.15);
+  border-radius: 999px;
+  background: Canvas;
+  color: CanvasText;
+  font: inherit;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+.ag-ui-quote-offer[data-below="true"] {
+  transform: translate(-50%, 0);
+}
+`;
+function attachQuoteOffer(options) {
+  const { within, exclude, onQuote } = options;
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(OFFER_CSS);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  const button2 = document.createElement("button");
+  button2.type = "button";
+  button2.className = "ag-ui-quote-offer";
+  button2.textContent = options.label;
+  button2.hidden = true;
+  document.body.append(button2);
+  let quoting = "";
+  const hide = () => {
+    button2.hidden = true;
+    quoting = "";
+  };
+  const settled = (event) => {
+    if (event.composedPath().includes(exclude)) {
+      hide();
+      return;
+    }
+    if (fieldHasFocus()) {
+      hide();
+      return;
+    }
+    const near = event instanceof MouseEvent ? { x: event.clientX, y: event.clientY } : void 0;
+    const selected = quotableSelection(within, [], near);
+    if (selected === null) {
+      hide();
+      return;
+    }
+    quoting = selected.text;
+    place(button2, selected.rect);
+  };
+  const onMouseDown = (event) => {
+    if (!button2.contains(event.target)) {
+      hide();
+    }
+  };
+  within.addEventListener("mouseup", settled);
+  within.addEventListener("keyup", settled);
+  within.addEventListener("mousedown", onMouseDown);
+  document.addEventListener("scroll", hide, true);
+  window.addEventListener("resize", hide);
+  button2.addEventListener("mousedown", (event) => {
+    event.preventDefault();
+  });
+  button2.addEventListener("click", () => {
+    const text3 = quoting;
+    window.getSelection()?.removeAllRanges();
+    hide();
+    onQuote(text3);
+  });
+  return {
+    element: button2,
+    detach() {
+      within.removeEventListener("mouseup", settled);
+      within.removeEventListener("keyup", settled);
+      within.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("scroll", hide, true);
+      window.removeEventListener("resize", hide);
+      button2.remove();
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter((each) => each !== sheet);
+    }
+  };
+}
+function fieldHasFocus() {
+  const active = document.activeElement;
+  if (active === null) {
+    return false;
+  }
+  return active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable === true;
+}
+function place(button2, rect) {
+  button2.hidden = false;
+  const below = rect.top < GAP + button2.offsetHeight;
+  button2.dataset["below"] = String(below);
+  button2.style.top = `${below ? rect.bottom + GAP : rect.top - GAP}px`;
+  const half = button2.offsetWidth / 2;
+  const centre = rect.left + rect.width / 2;
+  const width = document.documentElement.clientWidth;
+  button2.style.left = `${Math.min(Math.max(centre, half), width - half)}px`;
+}
+
 // src/ui/prettify_tool_name.ts
 function prettifyToolName(name) {
   const spaced = name.replace(/[._-]+/g, " ").trim();
@@ -2126,7 +2584,7 @@ function createDOMPurify() {
   const originalDocument = document2;
   const currentScript = originalDocument.currentScript;
   window2.DocumentFragment;
-  const HTMLTemplateElement = window2.HTMLTemplateElement, Node2 = window2.Node, Element = window2.Element, NodeFilter = window2.NodeFilter, _window$NamedNodeMap = window2.NamedNodeMap;
+  const HTMLTemplateElement = window2.HTMLTemplateElement, Node2 = window2.Node, Element = window2.Element, NodeFilter2 = window2.NodeFilter, _window$NamedNodeMap = window2.NamedNodeMap;
   _window$NamedNodeMap === void 0 ? window2.NamedNodeMap || window2.MozNamedAttrMap : _window$NamedNodeMap;
   window2.HTMLFormElement;
   const DOMParser = window2.DOMParser, trustedTypes = window2.trustedTypes;
@@ -2723,7 +3181,7 @@ function createDOMPurify() {
       doc || root,
       root,
       // eslint-disable-next-line no-bitwise
-      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION,
+      NodeFilter2.SHOW_ELEMENT | NodeFilter2.SHOW_COMMENT | NodeFilter2.SHOW_TEXT | NodeFilter2.SHOW_PROCESSING_INSTRUCTION | NodeFilter2.SHOW_CDATA_SECTION,
       null
     );
   };
@@ -2741,7 +3199,7 @@ function createDOMPurify() {
       doc || node,
       node,
       // eslint-disable-next-line no-bitwise
-      NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_CDATA_SECTION | NodeFilter.SHOW_PROCESSING_INSTRUCTION,
+      NodeFilter2.SHOW_TEXT | NodeFilter2.SHOW_COMMENT | NodeFilter2.SHOW_CDATA_SECTION | NodeFilter2.SHOW_PROCESSING_INSTRUCTION,
       null
     );
     let currentNode = walker.nextNode();
@@ -4936,6 +5394,60 @@ var SkillsMenu = class {
   }
 };
 
+// src/ui/stick_to_bottom.ts
+var BOTTOM_SLACK_PX = 4;
+function createStickToBottom({
+  viewport,
+  onMissedContent
+}) {
+  let isFollowing = true;
+  let missed = false;
+  const atBottom = () => viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <= BOTTOM_SLACK_PX;
+  const setMissed = (next) => {
+    if (next === missed) {
+      return;
+    }
+    missed = next;
+    onMissedContent(missed);
+  };
+  const toBottom = () => {
+    viewport.scrollTop = viewport.scrollHeight;
+  };
+  const onScroll = () => {
+    isFollowing = atBottom();
+    if (isFollowing) {
+      setMissed(false);
+    }
+  };
+  const follow = () => {
+    if (isFollowing) {
+      toBottom();
+      return;
+    }
+    setMissed(true);
+  };
+  viewport.addEventListener("scroll", onScroll, { passive: true });
+  const observer = new ResizeObserver(() => {
+    if (isFollowing) {
+      toBottom();
+    }
+  });
+  observer.observe(viewport);
+  return {
+    follow,
+    jump: () => {
+      isFollowing = true;
+      setMissed(false);
+      toBottom();
+    },
+    following: () => isFollowing,
+    dispose: () => {
+      viewport.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+    }
+  };
+}
+
 // src/ui/styles.ts
 var STYLES = `
 /* \u2500\u2500 Token defaults \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -5506,6 +6018,7 @@ var STYLES = `
   opacity: 0;
 }
 
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .messages-wrap,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .messages,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .input-row,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-chips,
@@ -5514,9 +6027,113 @@ var STYLES = `
   display: none;
 }
 
+/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
+   something. Anchored to the panel rather than the list so it does not scroll
+   with the content it is offering to scroll to. */
+/* The transcript's own box, and the only one whose foot is the transcript's
+   foot. The panel's foot is below the composer, the chips and the footer. */
+.messages-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.jump-latest {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--_pad);
+  z-index: 2;
+  display: none;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.4em 0.9em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  /* A raised surface, not the panel's own background. Reusing --_bg made the
+     pill the same colour as everything behind it, leaving a 1px border and a
+     shadow to carry the whole affordance -- and a dark-on-dark shadow carries
+     nothing. --_hover is the token that already means "lifted off the panel",
+     and it separates in both themes without competing with the accent the send
+     button owns. */
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+.jump-latest[data-missed="true"] {
+  display: flex;
+}
+
+.jump-latest:hover {
+  border-color: var(--_accent);
+}
+
+/* The offer to quote a selection. Positioned in script against the transcript
+   box, which is the only ancestor whose top and foot are the transcript's --
+   the same reason .jump-latest lives here. The translate is the half the
+   script does not do: script sets the point the offer hangs from, CSS decides
+   which corner of the offer that point is. */
+.quote-selection {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -100%);
+  padding: 0.25em 0.7em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.8em;
+  line-height: 1.6;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+/* Flipped under the selection when there was no room above it. Only the
+   vertical half of the translate changes: it still hangs from its own centre
+   horizontally. */
+.quote-selection[data-below="true"] {
+  transform: translate(-50%, 0);
+}
+
+.quote-selection:hover {
+  border-color: var(--_accent);
+}
+
+/* Screen-reader-only status region. Off-screen rather than display:none or
+   visibility:hidden, both of which take the element out of the accessibility
+   tree entirely -- a hidden live region announces nothing at all, which is the
+   classic way this pattern is written wrong.
+
+   The 1px box with clip-path, rather than width/height 0, is the shape that
+   survives: a zero-sized element is dropped from the tree by some engines. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
 .messages {
   flex: 1;
   overflow-y: auto;
+  /* The browser's own scroll anchoring competes with the scroller for the same
+     job and wins unpredictably -- it can hold the view still exactly when we
+     want to follow. Turned off so following is decided in one place. Safari
+     does not implement it, which is itself a reason not to depend on it. */
+  overflow-anchor: none;
   padding: var(--_pad);
   display: flex;
   flex-direction: column;
@@ -6025,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.
@@ -6089,32 +6721,200 @@ var STYLES = `
   display: flex;
 }
 
-.tool-call-toggle {
-  align-self: flex-start;
+/* 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;
-  padding: 0;
   background: none;
   font: inherit;
-  font-weight: 600;
-  color: var(--_accent);
+  text-align: left;
+  color: var(--_muted);
   cursor: pointer;
 }
 
-.tool-call-toggle::before {
-  content: "\u25B8 ";
+/* 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;
 }
 
-.tool-call-toggle[aria-expanded="true"]::before {
-  content: "\u25BE ";
+.subagent-row::after {
+  content: "\u25B8";
+  flex: none;
+  margin-left: auto;
+  color: var(--_accent);
 }
 
-/* Resize handle: a corner grip on a floating panel, an edge grip on a docked
-   one. Absent entirely where the placement is full-bleed, since there is
-   nothing to drag. */
-.resize-handle {
-  position: absolute;
-  z-index: 2;
-  background: transparent;
+.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;
+  padding: 0;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  color: var(--_accent);
+  cursor: pointer;
+}
+
+.tool-call-toggle::before {
+  content: "\u25B8 ";
+}
+
+.tool-call-toggle[aria-expanded="true"]::before {
+  content: "\u25BE ";
+}
+
+/* Resize handle: a corner grip on a floating panel, an edge grip on a docked
+   one. Absent entirely where the placement is full-bleed, since there is
+   nothing to drag. */
+.resize-handle {
+  position: absolute;
+  z-index: 2;
+  background: transparent;
   touch-action: none;
 }
 
@@ -6682,6 +7482,7 @@ var STYLES = `
 
 .confirm-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 }
@@ -6708,6 +7509,99 @@ var STYLES = `
   color: #ffffff;
 }
 
+/* The session waiver. Deliberately the quietest of the three: it is the widest
+   decision on the card, so it should be reachable without being the one the eye
+   lands on when the user means to say yes once. */
+.confirm-btn--always {
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.confirm-btn--always:hover,
+.confirm-btn--always:focus-visible {
+  opacity: 1;
+}
+
+/* Editable arguments on an approval card. A plain field rather than a code
+   editor: it holds the JSON a card already displays, and the only interaction
+   is correcting a value before letting the call run. */
+.approval-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.approval-args {
+  box-sizing: border-box;
+  width: 100%;
+  resize: vertical;
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+  background: var(--_bg);
+  color: var(--_fg);
+}
+
+.approval-args:focus-visible {
+  border-color: var(--_accent);
+  outline: none;
+}
+
+.approval-error {
+  font-size: 0.85em;
+  color: var(--_danger);
+}
+
+/* Message action row. Sits under a finished assistant bubble.
+
+   The wrap is insurance rather than a fix: these buttons are glyph-only, so at
+   every width tested they fit on one line and removing the wrap changes
+   nothing. It is here because the confirmation row one release earlier did
+   overflow when it gained a third button, off the left edge and outside its own
+   card, and the difference between the two rows is only that this one's labels
+   are icons today. */
+.message-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  /* Negative, and that is the point. The answer group is a flex column with its
+     own gap, so a positive margin here pushes the row further from the message
+     it acts on than the next card is below it -- the buttons then read as
+     belonging to whatever follows. Pulling back inside the gap is what makes
+     them the message's own. */
+  margin-top: -6px;
+}
+
+.message-action {
+  border: none;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font: inherit;
+  line-height: 1.2;
+  cursor: pointer;
+  background: transparent;
+  color: var(--_muted);
+  opacity: 0.75;
+}
+
+.message-action:hover,
+.message-action:focus-visible {
+  opacity: 1;
+  background: var(--_border);
+}
+
+.message-action[aria-pressed="true"] {
+  opacity: 1;
+  color: var(--_accent);
+}
+
+.message-action--confirmed {
+  opacity: 1;
+  color: var(--_accent);
+}
+
 /* Approval card \u2014 the server-side-tool gate (approve/deny an interrupt). */
 .approval {
   align-self: stretch;
@@ -6852,6 +7746,34 @@ var STYLES = `
   border-color: var(--_accent);
 }
 
+/* Follow-up suggestion chips. Deliberately the skill chips' shape rather than a
+   second chip vocabulary -- both are "a question you could ask", and the only
+   difference is who chose it. Inside the transcript, so they scroll with the
+   answer they follow instead of hovering above the composer. */
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-self: stretch;
+}
+
+.suggestion-chip {
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 0.9em;
+  text-align: left;
+  cursor: pointer;
+  background: var(--_assistant-bg);
+  color: var(--_fg);
+}
+
+.suggestion-chip:hover,
+.suggestion-chip:focus-visible {
+  border-color: var(--_accent);
+}
+
 .skill-palette {
   margin: 8px 12px 0;
   display: flex;
@@ -7266,6 +8188,195 @@ 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;
+function suggestionPrompts(content) {
+  if (typeof content !== "object" || content === null) {
+    return null;
+  }
+  const raw = content.prompts;
+  if (!Array.isArray(raw)) {
+    return null;
+  }
+  const prompts = raw.filter((prompt) => typeof prompt === "string").map((prompt) => prompt.trim()).filter((prompt) => prompt !== "" && prompt.length <= MAX_SUGGESTION_CHARS).slice(0, MAX_SUGGESTIONS);
+  return prompts.length === 0 ? null : prompts;
+}
+function renderSuggestionChips(content, strings, onPick) {
+  const prompts = suggestionPrompts(content);
+  if (prompts === null) {
+    return null;
+  }
+  const row = document.createElement("div");
+  row.className = "suggestions";
+  row.setAttribute("part", "suggestions");
+  row.setAttribute("role", "group");
+  row.setAttribute("aria-label", strings.suggestions);
+  for (const prompt of prompts) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "suggestion-chip";
+    chip.setAttribute("part", "suggestion-chip");
+    chip.textContent = prompt;
+    chip.addEventListener("click", () => onPick(prompt));
+    row.appendChild(chip);
+  }
+  return row;
+}
+
 // src/ui/thoughts_block.ts
 var ThoughtsBlock = class {
   /** The block's root element; insert this at the top of the answer group. */
@@ -7332,6 +8443,7 @@ var ThreadDrawer = class {
   #heading;
   #newButton;
   #list;
+  #formatRelativeTime = null;
   #strings;
   #threads = [];
   #activeId = "";
@@ -7379,6 +8491,21 @@ var ThreadDrawer = class {
     this.element.append(backdrop, this.#panel);
   }
   /** Re-localize the drawer's chrome and rows (the host calls this on connect). */
+  /**
+   * Replace the timestamp formatter, or restore the built-in with `null`.
+   *
+   * The built-in is deliberately locale-neutral -- there is no `Intl` anywhere
+   * in this component, so it never disagrees with a host's own formatting by
+   * guessing a locale. That is a defensible default and a poor requirement, so
+   * this is the way out.
+   */
+  setRelativeTimeFormatter(format) {
+    this.#formatRelativeTime = format;
+  }
+  /** This row's timestamp, through the host's formatter when it set one. */
+  #formatTime(timestamp) {
+    return this.#formatRelativeTime !== null ? this.#formatRelativeTime(timestamp) : relativeTime(timestamp, void 0, this.#strings);
+  }
   setStrings(strings) {
     this.#strings = strings;
     this.#panel.setAttribute("aria-label", strings.chatHistory);
@@ -7478,7 +8605,7 @@ var ThreadDrawer = class {
     const time = document.createElement("span");
     time.className = "drawer-row-time";
     time.setAttribute("part", "drawer-row-time");
-    time.textContent = relativeTime(meta.updatedAt, void 0, this.#strings);
+    time.textContent = this.#formatTime(meta.updatedAt);
     const preview = document.createElement("span");
     preview.className = "drawer-row-preview";
     preview.setAttribute("part", "drawer-row-preview");
@@ -7620,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;
@@ -7627,9 +8770,23 @@ var ToolCallCard = class {
   #resultLabel;
   #resultBody;
   #strings;
+  /**
+   * The arguments this call was made with.
+   *
+   * Retained rather than only rendered, because an approval interrupt names a
+   * `toolCallId` and nothing else -- so this card is the only place the args
+   * 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");
@@ -7657,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;
@@ -7678,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)
@@ -7720,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");
@@ -7926,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;
@@ -7939,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({
@@ -7969,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
@@ -7984,6 +9185,41 @@ var AgUiClient = class {
     this.#onPersist(this.#agent.messages);
     await this.#run();
   }
+  /**
+   * Drop everything after the most recent user message, so the same question
+   * can be asked again.
+   *
+   * Returns the retained history, or `null` when there is nothing to retry (no
+   * user message has been sent yet). **Truncates only** -- the caller re-renders
+   * from the returned list and then calls {@link resume}, because the transcript
+   * belongs to the element and a client that reached into it would own two
+   * things. Running here instead would stream the new answer in underneath the
+   * old one.
+   *
+   * Re-running answers the question the agent was last asked, rather than
+   * telling it its answer was wrong, which is what makes the result a
+   * *different* answer instead of a conversation about the previous one.
+   *
+   * **A retried turn re-runs its tools.** For a page-driving agent that is not
+   * neutral: the previous attempt already clicked what it clicked, and this
+   * does not undo it.
+   */
+  truncateToLastUser() {
+    const messages = [...this.#agent.messages];
+    let lastUser = -1;
+    for (const [index, message] of messages.entries()) {
+      if (message.role === "user") {
+        lastUser = index;
+      }
+    }
+    if (lastUser === -1) {
+      return null;
+    }
+    const kept = messages.slice(0, lastUser + 1);
+    this.#agent.setMessages(kept);
+    this.#onPersist(this.#agent.messages);
+    return kept;
+  }
   /**
    * Resume the run loop after a navigating tool's result was supplied
    * post-reload (via {@link addToolResult}). Unlike {@link send}, adds no user
@@ -8031,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;
       }
@@ -8150,6 +9386,12 @@ var AgUiClient = class {
       // Emitted after the client has written the patched messages, which is the
       // first moment the result exists. Only the ids marked above are looked at,
       // so an ordinary text delta does not walk the transcript.
+      onCustomEvent({ event }) {
+        h.onCustomEvent(event.name, event.value);
+      },
+      onMessagesSnapshotEvent({ event }) {
+        h.onMessagesSnapshot(event.messages);
+      },
       onMessagesChanged({ messages }) {
         if (pendingDeltas.size === 0) {
           return;
@@ -8853,6 +10095,7 @@ function isCredentialsMode(value) {
 var COLLAPSED_KEY = "ag-ui-chat:collapsed";
 var SIZE_KEY = "ag-ui-chat:size";
 var THEME_KEY = "ag-ui-chat:theme";
+var QUOTE_GAP = 6;
 var CLAIMED_NAMESPACES = /* @__PURE__ */ new Set();
 var AgUiChat = class extends HTMLElement {
   /** Agent factory; override to inject a custom or fake agent (tests). */
@@ -8900,6 +10143,22 @@ var AgUiChat = class extends HTMLElement {
    * data. Enable only when the content source is trusted.
    */
   allowImages = false;
+  /**
+   * Replace the relative timestamps in the thread drawer and the checkpoint
+   * panel -- `"5m ago"`, `"2d ago"` -- with the host's own formatting.
+   *
+   * The built-in is locale-neutral on purpose: there is no `Intl` anywhere in
+   * this component, so it never disagrees with the page it is embedded in by
+   * guessing a locale. That is a good default and a bad requirement, which is
+   * what this is for.
+   *
+   * ```js
+   * const rtf = new Intl.RelativeTimeFormat("de", { numeric: "auto" });
+   * chat.formatRelativeTime = (ts) =>
+   *   rtf.format(Math.round((ts - Date.now()) / 60000), "minute");
+   * ```
+   */
+  formatRelativeTime = null;
   /** When true, destructive tools execute without a confirmation modal. */
   autoConfirm = false;
   /**
@@ -8923,6 +10182,22 @@ var AgUiChat = class extends HTMLElement {
    * is enabled server-side; this only changes how the decision is collected.
    */
   approvalRenderer = null;
+  /**
+   * Let the user edit a gated call's arguments before approving it.
+   *
+   * Off by default and **an assertion about your server**, not a negotiation:
+   * AG-UI carries `editedArgs` in the resume payload and gates it on the
+   * agent's own `approveWithEdits` capability, which this component never sees
+   * -- capabilities are not on the wire it reads. So the host says whether its
+   * agent honours them. Turned on against a server that does not, the user
+   * would edit arguments it silently discards, which is worse than not
+   * offering.
+   *
+   * Only affects calls whose arguments are known here: an interrupt names a
+   * `toolCallId`, and the tool card for that call is where the arguments still
+   * are. An interrupt naming no card gets the plain approve/deny.
+   */
+  approveWithEdits = false;
   /**
    * Optional per-call confirmation predicate. When set it is authoritative,
    * deciding from the tool name and args whether this particular call needs
@@ -9013,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
@@ -9062,13 +10361,32 @@ 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
    * the real output with the generic "executed on the server" fallback.
    */
   /** Whether a server-pushed chart activity is drawn. Off unless asked for. */
-  #chartActivity = false;
+  /**
+   * Which `activity_type`s this element can draw, by name.
+   *
+   * A registry rather than a branch because `activity_type` is an open string
+   * the protocol does not enumerate. The two built-ins go through it like any
+   * host registration, which is the test that the seam is real.
+   */
+  #activityRenderers = /* @__PURE__ */ new Map();
+  /** Types that arrived with nobody registered to draw them. See {@link unhandledActivityTypes}. */
+  #unhandledActivityTypes = /* @__PURE__ */ new Set();
   /** Card elements by call id, so a rendering handler can find its own card. */
   #cardElements = /* @__PURE__ */ new Map();
   /** Chart blocks by activity message id, so an update redraws in place. */
@@ -9080,7 +10398,75 @@ var AgUiChat = class extends HTMLElement {
    * Spans tool rounds and an approval interrupt; cleared when the event fires.
    */
   #runTools = [];
+  /**
+   * Keys announced during this interaction, de-duplicated in first-seen order.
+   *
+   * Per element, never module-level: a second mounted chat is a second run, and
+   * sharing this would tell one page to refetch on the other's writes. Reset by
+   * {@link AgUiChat.#dispatchRunFinished}, which is the one place that has read
+   * it.
+   */
+  /**
+   * Tool names the user waived confirmation for, for the life of this element.
+   *
+   * Per instance and never persisted: a session decision that outlived the tab
+   * would be a permanent grant made by one click, which is the thing
+   * `autoConfirm` already exists to say deliberately. Cleared with the element.
+   */
+  #sessionApproved = /* @__PURE__ */ new Set();
+  /**
+   * The one action row currently carrying Retry, if any.
+   *
+   * Retry belongs to the **last** turn only: re-running an older one is
+   * branching, and for a page-driving agent editing a past turn is not neutral
+   * -- those turns clicked buttons, and re-running turn 3 does not un-save what
+   * turn 5 saved. Holding a single owner is what keeps exactly one offer on
+   * screen without per-bubble bookkeeping.
+   */
+  #retryOwner = null;
+  #runInvalidated = /* @__PURE__ */ new Set();
   #root;
+  /** Screen-reader-only status region -- see {@link AgUiChat.#announce}. */
+  #announcer = document.createElement("div");
+  /** Return-to-foot affordance, shown only once something has been missed. */
+  #jumpButton = document.createElement("button");
+  /**
+   * Offer to quote the current selection, floated beside it.
+   *
+   * Shares {@link AgUiChat.#messagesWrap} with the jump button for the same
+   * reason: it is positioned against the transcript, and must not scroll away
+   * with the words it is pointing at.
+   */
+  #quoteButton = document.createElement("button");
+  /** What {@link AgUiChat.#quoteButton} would quote, while it is showing. */
+  #quoting = "";
+  /** The host-page offer, while one is attached; see {@link AgUiChat.offerQuoteInPage}. */
+  #pageQuote = null;
+  /**
+   * Positioning context for {@link AgUiChat.#jumpButton}.
+   *
+   * The button cannot live in the scrolling list -- it would scroll away with
+   * the content it is offering to scroll to -- and it cannot be positioned
+   * against the panel either: the panel's foot is below the composer, the skill
+   * chips and the footer, so `bottom` measured from there lands the button on
+   * top of the composer rather than over the transcript. This wrapper is the
+   * only box whose foot *is* the transcript's foot.
+   */
+  #messagesWrap = document.createElement("div");
+  /** Follows the foot of the transcript, and stops when the reader scrolls away. */
+  #scroller;
+  /** Pending clear of {@link AgUiChat.#announcer}; see why it is cleared at all. */
+  #announceTimer = null;
+  /**
+   * Whether this turn already announced how it ended.
+   *
+   * `onSettled` is the terminal guarantee and fires however the run ended, so
+   * it is the only place that can promise the user hears *something*. But a
+   * stopped or failed run has already said the truer thing from `onCancelled`
+   * or `onError`, and "assistant answered" after "response stopped" is worse
+   * than silence.
+   */
+  #announcedOutcome = false;
   #chat;
   #messages;
   #input;
@@ -9198,6 +10584,23 @@ var AgUiChat = class extends HTMLElement {
     this.#launcher = document.createElement("button");
     this.#badge = document.createElement("span");
     this.#emptyWrap = document.createElement("div");
+    this.registerActivityRenderer({
+      type: COMPACTION_ACTIVITY_TYPE,
+      render: (content) => {
+        const removed = compactionRemoved(content);
+        return removed === null ? null : renderRunNotice(
+          "\u{1F5DC}",
+          this.#strings.historyCompacted.replace("{count}", String(removed)),
+          "compaction"
+        );
+      }
+    });
+    this.registerActivityRenderer({
+      type: SUGGESTIONS_ACTIVITY_TYPE,
+      render: (content) => renderSuggestionChips(content, this.#strings, (prompt) => {
+        void this.sendMessage(prompt);
+      })
+    });
     this.#skillsMenu = new SkillsMenu((skill) => this.#applySkill(skill));
     this.#drawer = new ThreadDrawer({
       onSelect: (threadId) => {
@@ -9282,6 +10685,7 @@ var AgUiChat = class extends HTMLElement {
   /** Load the checkpoint panel with the runs that can actually be continued. */
   async #refreshCheckpoints() {
     const index = this.#runs();
+    this.#checkpoints.setRelativeTimeFormatter(this.formatRelativeTime);
     this.#checkpoints.setRuns(index === null ? [] : await index.continuable());
   }
   /** Attributes the element reacts to after it has been connected. */
@@ -9478,7 +10882,7 @@ var AgUiChat = class extends HTMLElement {
     });
     this.#confirmAbort = null;
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return answer;
   }
   /**
@@ -9734,8 +11138,15 @@ var AgUiChat = class extends HTMLElement {
       this.#claimedNs = null;
     }
     this.#cancelRun();
+    this.#pageQuote?.detach();
+    this.#pageQuote = null;
     this.#attachTray?.dispose();
     this.#voice?.dispose();
+    this.#scroller.dispose();
+    if (this.#announceTimer !== null) {
+      clearTimeout(this.#announceTimer);
+      this.#announceTimer = null;
+    }
   }
   /**
    * Read an opt-in flag attribute the way HTML reads a boolean attribute.
@@ -9846,6 +11257,142 @@ var AgUiChat = class extends HTMLElement {
     this.#onInput();
     this.#input.focus();
   }
+  /**
+   * Put `text` into the composer as a markdown quotation, and focus it.
+   *
+   * Deliberately **not** a send. Quoting is how a question narrows to one part
+   * of an answer, so the quotation is the preamble and the question is what
+   * comes next -- the caret is left after it, on its own line.
+   *
+   * This is also the seam for the half of this feature the component cannot
+   * build: selection in the **host page**. A widget mounted beside a table can
+   * be asked about a row, and nothing in a chat's own transcript can offer
+   * that. A host reads its own selection, however it likes, and calls this.
+   *
+   * No-ops on text that is empty or only whitespace.
+   */
+  quote(text3) {
+    const quoted = asQuote(text3);
+    if (quoted === "") {
+      return;
+    }
+    const current = this.#input.value.replace(/\s+$/, "");
+    this.#input.value = current === "" ? quoted : `${current}
+
+${quoted}`;
+    this.#autoGrow();
+    this.#input.focus();
+    const end = this.#input.value.length;
+    this.#input.setSelectionRange(end, end);
+  }
+  /**
+   * Offer to quote what the user selects in the **host page**, not just in the
+   * transcript. Returns a function that stops offering.
+   *
+   * The same select-then-offer gesture, over a table, a diff, a report -- the
+   * surface the user actually works in, which is the half of quoting no hosted
+   * chat can reach. Opt-in, because it listens on the host's document and that
+   * is theirs to grant.
+   *
+   * Deliberately **not** a four-line recipe, which is how this shipped first
+   * and was wrong: a page listener that quotes every settled selection appends
+   * to the composer on every drag made to read, to copy or to fix a typo -- and
+   * it cannot tell a selection in the page's prose from one inside the user's
+   * own half-typed `<input>`, because Chrome reports a field's internal
+   * selection as an ordinary range over the field's *wrapper*. See
+   * {@link attachQuoteOffer} for the guards.
+   *
+   * Detached automatically when the element leaves the document; a host that
+   * re-mounts it calls this again.
+   */
+  offerQuoteInPage(within = document.body) {
+    this.#pageQuote?.detach();
+    const offer = attachQuoteOffer({
+      within,
+      label: this.#strings.quoteSelection,
+      exclude: this,
+      onQuote: (text3) => this.quote(text3)
+    });
+    this.#pageQuote = offer;
+    return () => {
+      offer.detach();
+      if (this.#pageQuote === offer) {
+        this.#pageQuote = null;
+      }
+    };
+  }
+  /** Whether the transcript offers to quote what the user selects. */
+  #quoteEnabled() {
+    return this.getAttribute("data-quote-selection") !== "false";
+  }
+  /**
+   * Offer to quote the settled selection, or retire the offer.
+   *
+   * `event` is passed for its coordinates and only those: they say which line
+   * of a selection spanning several messages the offer should hang from. A
+   * keyboard selection has none, and the first line is used instead.
+   */
+  #onSelectionSettled(event) {
+    if (!this.#quoteEnabled()) {
+      return;
+    }
+    const near = event === void 0 ? void 0 : { x: event.clientX, y: event.clientY };
+    const selected = quotableSelection(this.#messages, [this.#root], near);
+    if (selected === null) {
+      this.#hideQuote();
+      return;
+    }
+    this.#quoting = selected.text;
+    this.#placeQuote(selected.rect);
+  }
+  /** Float the offer beside `rect`, kept inside the transcript's own box. */
+  #placeQuote(rect) {
+    this.#quoteButton.hidden = false;
+    const wrap = this.#messagesWrap.getBoundingClientRect();
+    const top = rect.top - wrap.top;
+    const below = top < QUOTE_GAP + this.#quoteButton.offsetHeight;
+    this.#quoteButton.dataset["below"] = String(below);
+    this.#quoteButton.style.top = `${below ? rect.bottom - wrap.top + QUOTE_GAP : top - QUOTE_GAP}px`;
+    const half = this.#quoteButton.offsetWidth / 2;
+    const centre = rect.left + rect.width / 2 - wrap.left;
+    this.#quoteButton.style.left = `${Math.min(Math.max(centre, half), wrap.width - half)}px`;
+  }
+  /** Retire the offer, and forget what it was pointing at. */
+  #hideQuote() {
+    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");
@@ -10375,19 +11922,63 @@ var AgUiChat = class extends HTMLElement {
   /** Drop the in-memory run + transcript, leaving the thread id untouched. */
   #resetState() {
     this.#client = null;
+    this.#clearTranscript();
+    this.#initialMessages = [];
+  }
+  /**
+   * Wipe the rendered transcript and everything that indexes into it.
+   *
+   * Split from {@link #resetState} because a retry re-renders the transcript
+   * while keeping the *client*: dropping the client there would take the
+   * agent's message list with it, which is the thing being truncated.
+   */
+  #clearTranscript() {
     this.#endStream();
     this.#currentGroup = null;
     this.#thoughts = null;
     this.#hidePending();
     this.#toolCards.clear();
+    this.#subagentPanels.clear();
     this.#serverSettled.clear();
     this.#cardElements.clear();
     this.#activityBlocks.clear();
-    this.#initialMessages = [];
+    this.#retryOwner = null;
     this.#attachTray?.clear();
     this.#messages.replaceChildren(this.#emptyWrap);
     this.#updateEmptyState();
   }
+  /**
+   * Ask the same question again and replace the answer.
+   *
+   * History is truncated to the most recent user message inclusive and the run
+   * repeats, so the agent answers what it was asked rather than being told its
+   * last answer was wrong. Returns `false` when there is nothing to retry or a
+   * run is already in flight.
+   *
+   * Public because a host with its own message UI wants the same button, and
+   * because the failed-run notice reaches it from outside the action row.
+   *
+   * **A retried turn re-runs its tools**, which for a page-driving agent is not
+   * neutral: the previous attempt already clicked what it clicked, and this
+   * does not undo it. Confirmation still applies, so a destructive tool asks
+   * again -- unless the user waived it for this session.
+   */
+  async retryLastTurn() {
+    if (this.#running) {
+      return false;
+    }
+    const client = this.#ensureClient();
+    const kept = client.truncateToLastUser();
+    if (kept === null) {
+      return false;
+    }
+    this.#clearTranscript();
+    for (const message of kept) {
+      this.#renderHistoricMessage(message);
+    }
+    await client.resume();
+    return true;
+  }
   /** Switch the active conversation to an existing thread and replay it. */
   async #switchThread(threadId) {
     if (threadId === this.#threadId) {
@@ -10416,6 +12007,7 @@ var AgUiChat = class extends HTMLElement {
   }
   /** Reload the drawer's thread list, marking the active thread. */
   async #refreshDrawer() {
+    this.#drawer.setRelativeTimeFormatter(this.formatRelativeTime);
     this.#drawer.setThreads(await this.conversationStore.listThreads(), this.#threadId);
   }
   /**
@@ -10507,7 +12099,9 @@ var AgUiChat = class extends HTMLElement {
     }
     if (message.role === MESSAGE_ROLE.ASSISTANT) {
       if (text3 !== "") {
-        this.appendMessage(MESSAGE_ROLE.ASSISTANT, text3).classList.add("message--restored");
+        const restoredBubble = this.appendMessage(MESSAGE_ROLE.ASSISTANT, text3);
+        restoredBubble.classList.add("message--restored");
+        this.#attachActions(restoredBubble);
       }
       for (const call of restoredToolCalls(message.toolCalls)) {
         const restored = {
@@ -10528,8 +12122,8 @@ var AgUiChat = class extends HTMLElement {
     }
     if (message.role === "activity") {
       const activity = message;
-      if (activity.activityType === CHART_ACTIVITY_TYPE && this.#chartActivity) {
-        this.#drawActivityChart(message.id, activity.content);
+      if (typeof activity.activityType === "string") {
+        this.#drawActivity(message.id, activity.activityType, activity.content);
       }
       return;
     }
@@ -10594,7 +12188,11 @@ var AgUiChat = class extends HTMLElement {
       this.#messages.appendChild(bubble);
     }
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    if (role === MESSAGE_ROLE.USER) {
+      this.#scroller.jump();
+    } else {
+      this.#scroller.follow();
+    }
     return bubble;
   }
   /**
@@ -10616,8 +12214,6 @@ var AgUiChat = class extends HTMLElement {
     return this.#currentGroup;
   }
   #render() {
-    const style = document.createElement("style");
-    style.textContent = STYLES;
     this.#chat.className = "chat";
     this.#chat.setAttribute("part", "panel");
     const header = document.createElement("div");
@@ -10641,8 +12237,8 @@ var AgUiChat = class extends HTMLElement {
     checkpoints.addEventListener("click", () => this.toggleCheckpoints());
     const newChat = this.#headerButton("new", this.#strings.newChat, "\u271A");
     newChat.addEventListener("click", () => this.newChat());
-    const collapse = this.#headerButton("collapse", this.#strings.collapse, "\u2014");
-    collapse.addEventListener("click", () => this.toggleCollapsed());
+    const collapse2 = this.#headerButton("collapse", this.#strings.collapse, "\u2014");
+    collapse2.addEventListener("click", () => this.toggleCollapsed());
     if (this.#runs() !== null) {
       controls.append(history, checkpoints, newChat);
     } else {
@@ -10658,13 +12254,46 @@ var AgUiChat = class extends HTMLElement {
       this.#syncThemeGlyph();
       controls.append(this.#themeToggle);
     }
-    controls.append(collapse);
+    controls.append(collapse2);
     header.append(title, headerActions, controls);
     this.#messages.className = "messages";
     this.#messages.setAttribute("part", "messages");
     this.#messages.setAttribute("role", "log");
-    this.#messages.setAttribute("aria-live", "polite");
+    this.#messages.setAttribute("aria-live", "off");
     this.#messages.setAttribute("aria-label", this.#strings.conversation);
+    this.#jumpButton.className = "jump-latest";
+    this.#jumpButton.type = "button";
+    this.#jumpButton.setAttribute("part", "jump-latest");
+    this.#jumpButton.textContent = this.#strings.jumpToLatest;
+    this.#jumpButton.addEventListener("click", () => {
+      this.#scroller.jump();
+    });
+    this.#quoteButton.className = "quote-selection";
+    this.#quoteButton.type = "button";
+    this.#quoteButton.setAttribute("part", "quote-selection");
+    this.#quoteButton.textContent = this.#strings.quoteSelection;
+    this.#quoteButton.hidden = true;
+    this.#quoteButton.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+    });
+    this.#quoteButton.addEventListener("click", () => {
+      this.quote(this.#quoting);
+      window.getSelection()?.removeAllRanges();
+      this.#hideQuote();
+    });
+    this.#messages.addEventListener("mouseup", (event) => this.#onSelectionSettled(event));
+    this.#messages.addEventListener("keyup", () => this.#onSelectionSettled());
+    this.#messages.addEventListener("mousedown", () => this.#hideQuote());
+    this.#scroller = createStickToBottom({
+      viewport: this.#messages,
+      onMissedContent: (missed) => {
+        this.#jumpButton.dataset["missed"] = String(missed);
+      }
+    });
+    this.#announcer.className = "sr-only";
+    this.#announcer.setAttribute("role", "status");
+    this.#announcer.setAttribute("aria-live", "polite");
+    this.#announcer.setAttribute("aria-atomic", "true");
     this.#emptyWrap.className = "empty";
     this.#emptyWrap.setAttribute("part", "empty");
     const emptySlot = document.createElement("slot");
@@ -10727,9 +12356,11 @@ var AgUiChat = class extends HTMLElement {
     tools.append(this.#attachButton, this.#voiceSlot, this.#send);
     composer.append(this.#input, tools);
     inputRow.append(composer, this.#fileInput);
+    this.#messagesWrap.className = "messages-wrap";
+    this.#messagesWrap.append(this.#messages, this.#jumpButton, this.#quoteButton);
     this.#chat.append(
       header,
-      this.#messages,
+      this.#messagesWrap,
       this.#skillsMenu.palette,
       this.#skillsMenu.chips,
       this.#skillHint,
@@ -10775,7 +12406,66 @@ var AgUiChat = class extends HTMLElement {
         label: this.#strings.resizePanel
       })
     );
-    this.#root.append(style, this.#chat, this.#launcher);
+    this.#adoptStyles();
+    this.#root.append(this.#announcer, this.#chat, this.#launcher);
+  }
+  /**
+   * Attach the stylesheet without an inline `<style>` element.
+   *
+   * A host with a strict `style-src` and no `'unsafe-inline'` drops an injected
+   * `<style>` silently: the component mounts, functions, and renders completely
+   * unstyled, with nothing in the console to point at. `adoptedStyleSheets`
+   * carries no inline-style origin, so it is unaffected by that policy.
+   *
+   * The sheet is constructed **per instance** rather than shared at module
+   * scope. A shared sheet would additionally avoid re-parsing the stylesheet
+   * once per mounted element, which is what `adoptedStyleSheets` is usually
+   * reached for -- but a module-level singleton is exactly what this package
+   * forbids, and the CSP defect is fixed either way. Per instance is no worse
+   * than the `<style>` element it replaces, which also parsed once per mount.
+   *
+   * No fallback: constructible `CSSStyleSheet` is Chrome 73, Firefox 101 and
+   * Safari 16.4, all below this package's declared Safari 17 runtime target. A
+   * guard here would be code no supported browser can reach, and the only way
+   * to keep it would be to exempt it from the coverage gate.
+   */
+  /**
+   * Say one short thing to a screen reader, without touching the transcript.
+   *
+   * The transcript cannot do this job. It is rewritten on every animation
+   * frame while an answer streams, so as a live region it re-announced the
+   * whole answer tens of times per turn -- not merely unhelpful but actively
+   * hostile. The published fix for this exact bug (Microsoft's Bot Framework
+   * WebChat #3236) is architectural rather than a matter of tuning attributes:
+   * demote the visible transcript out of live-region duty and put one
+   * synthesised status per event into a separate invisible region. MDN and
+   * Scott O'Hara prescribe the same empty-region-then-inject shape.
+   *
+   * Roughly four calls land per turn -- responding, answered, a card is waiting,
+   * stopped or failed -- so the user is told what happened and reads the answer
+   * itself by navigating the log, at their own pace, rather than having it
+   * shouted at them a token at a time.
+   *
+   * **The clear is load-bearing, twice.** A reader announces a live region when
+   * its content *changes*, so setting the same string twice running -- two turns
+   * in a row both starting -- is not a change and is silently not announced.
+   * Emptying first makes the next set a change again. It also stops a stale
+   * status being read out when a reader later lands on the region.
+   */
+  #announce(message) {
+    if (this.#announceTimer !== null) {
+      clearTimeout(this.#announceTimer);
+    }
+    this.#announcer.textContent = message;
+    this.#announceTimer = setTimeout(() => {
+      this.#announceTimer = null;
+      this.#announcer.textContent = "";
+    }, ANNOUNCE_CLEAR_MS);
+  }
+  #adoptStyles() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(STYLES);
+    this.#root.adoptedStyleSheets = [sheet];
   }
   /**
    * Build a header control button: a named slot a host can project markup into,
@@ -11071,7 +12761,8 @@ var AgUiChat = class extends HTMLElement {
         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;
@@ -11087,15 +12778,78 @@ var AgUiChat = class extends HTMLElement {
       })
     );
   }
-  /** Whether ``call`` should be gated behind the confirmation card. */
-  async #needsConfirmation(call, tool) {
+  /**
+   * Give a finished assistant bubble its action row, and hand it Retry.
+   *
+   * 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 = {}) {
+    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) {
+    this.#retryOwner?.querySelector(".message-action--retry")?.remove();
+    const retry = messageActionButton("retry", this.#strings.retryMessage, "\u21BB");
+    retry.addEventListener("click", () => {
+      void this.retryLastTurn();
+    });
+    bar.prepend(retry);
+    this.#retryOwner = bar;
+  }
+  /**
+   * Which rule gates `call`, or `null` when it runs straight through.
+   *
+   * The rule, rather than a bare boolean, because it decides whether the user
+   * may *waive* the prompt for the rest of the session. Only the default
+   * `x-destructive` gate is waivable: `confirmPredicate` is documented as
+   * authoritative, so letting one click retire it would silently defeat a host
+   * policy — and the session allowlist is consulted on the same path it can
+   * be added from, so the button is never offered where honouring it would be
+   * refused.
+   */
+  async #confirmationRule(call, tool) {
     if (this.autoConfirm) {
-      return false;
+      return null;
     }
     if (this.confirmPredicate !== null) {
-      return await this.confirmPredicate(call.name, call.args) === true;
+      return await this.confirmPredicate(call.name, call.args) === true ? "predicate" : null;
+    }
+    if (this.#sessionApproved.has(call.name)) {
+      return null;
     }
-    return isDestructive(tool.parameters);
+    return isDestructive(tool.parameters) ? "destructive" : null;
   }
   async #executeTool(call) {
     if (skillNameFrom(call) !== null) {
@@ -11117,7 +12871,8 @@ var AgUiChat = class extends HTMLElement {
       this.#showPending();
       return { content: `Error: ${message}`, error: message };
     }
-    if (await this.#needsConfirmation(call, tool)) {
+    const rule = await this.#confirmationRule(call, tool);
+    if (rule !== null) {
       const request = { toolName: call.name, args: call.args };
       const confirmText = tool.parameters[X_CONFIRM_KEY];
       if (typeof confirmText === "string") {
@@ -11126,10 +12881,12 @@ var AgUiChat = class extends HTMLElement {
       this.#confirmAbort = new AbortController();
       const decision = requestConfirmation(this.#ensureGroup(), request, {
         signal: this.#confirmAbort.signal,
-        strings: this.#strings
+        strings: this.#strings,
+        // Offered only where it can be honoured -- see `#confirmationRule`.
+        ...rule === "destructive" ? { onAlwaysAllow: () => this.#sessionApproved.add(call.name) } : {}
       });
       this.#updateEmptyState();
-      this.#messages.scrollTop = this.#messages.scrollHeight;
+      this.#scroller.follow();
       const accepted = await decision;
       this.#confirmAbort = null;
       card.recordDecision(accepted ? "approved" : "declined");
@@ -11191,6 +12948,9 @@ var AgUiChat = class extends HTMLElement {
    */
   async #resolveInterrupts(interrupts) {
     this.#confirmAbort = new AbortController();
+    this.#announce(
+      this.#strings.announceAwaitingDecision.replace("{count}", String(interrupts.length))
+    );
     this.#hidePending();
     const signal = this.#confirmAbort.signal;
     const answered = await Promise.all(
@@ -11205,10 +12965,20 @@ var AgUiChat = class extends HTMLElement {
         if (toolName !== null && toolName !== void 0) {
           request.toolName = toolName;
         }
+        let editedArgs;
+        const editable = this.approveWithEdits && card !== void 0;
+        if (editable) {
+          request.args = card.args;
+        }
         card?.mark(TOOL_CALL_STATUS.DEFERRED);
         const approved = this.approvalRenderer !== null ? await this.approvalRenderer(request, { signal }) : await requestApproval(card?.approvalSlot ?? this.#ensureGroup(), request, {
           signal,
-          strings: this.#strings
+          strings: this.#strings,
+          ...editable ? {
+            onEdit: (args) => {
+              editedArgs = args;
+            }
+          } : {}
         });
         card?.recordDecision(approved ? "approved" : "declined");
         if (approved) {
@@ -11216,21 +12986,28 @@ var AgUiChat = class extends HTMLElement {
         } else {
           card?.settle(TOOL_CALL_STATUS.DECLINED, this.#strings.declinedAction);
         }
-        return { id: interrupt.id, approved };
+        return { id: interrupt.id, approved, editedArgs };
       })
     );
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     this.#confirmAbort = null;
     const responses = {};
-    for (const { id, approved } of answered) {
-      responses[id] = approved ? { status: "resolved", payload: { approved: true } } : { status: "cancelled" };
+    for (const { id, approved, editedArgs } of answered) {
+      responses[id] = approved ? {
+        status: "resolved",
+        payload: editedArgs === void 0 ? { approved: true } : { approved: true, editedArgs }
+      } : { status: "cancelled" };
     }
     return responses;
   }
   #handlers() {
     return {
       onRunStart: () => {
+        if (!this.#running) {
+          this.#announcedOutcome = false;
+          this.#announce(this.#strings.announceResponding);
+        }
         this.#setRunning(true);
         this.#ensureGroup();
         this.#showPending();
@@ -11256,6 +13033,7 @@ var AgUiChat = class extends HTMLElement {
           this.#revealWords(bubble);
         }
         attachCopyButtons(bubble, this.#strings);
+        this.#attachActions(bubble);
         this.#endStream();
         this.#noteUnread();
       },
@@ -11268,25 +13046,28 @@ var AgUiChat = class extends HTMLElement {
         this.#cardFor(call);
       },
       onActivity: (activityType, content, messageId) => {
-        if (activityType === CHART_ACTIVITY_TYPE) {
-          if (this.#chartActivity) {
-            this.#drawActivityChart(messageId, content);
-          }
-          return;
-        }
-        if (activityType !== COMPACTION_ACTIVITY_TYPE) {
+        this.#drawActivity(messageId, activityType, content);
+      },
+      onCustomEvent: (name, value) => {
+        if (name === INVALIDATE_CUSTOM_NAME) {
+          this.#dispatchInvalidation(value);
           return;
         }
-        const removed = compactionRemoved(content);
-        if (removed === null) {
+        if (name === SUBAGENT_CUSTOM_NAME) {
+          this.#reportSubAgent(value);
           return;
         }
-        this.#appendNotice(
-          "\u{1F5DC}",
-          this.#strings.historyCompacted.replace("{count}", String(removed)),
-          "compaction"
+        this.dispatchEvent(
+          new CustomEvent(CUSTOM_AGENT_EVENT, {
+            detail: { name, value },
+            bubbles: true,
+            composed: true
+          })
         );
       },
+      onMessagesSnapshot: () => {
+        this.#appendNotice("\u{1F504}", this.#strings.historyReplaced, "history-replaced");
+      },
       onToolResult: (toolCallId, content) => {
         const card = this.#toolCards.get(toolCallId);
         if (card === void 0) {
@@ -11297,25 +13078,33 @@ var AgUiChat = class extends HTMLElement {
         this.#showPending();
       },
       onActivityChanged: (messageId, activityType, content) => {
-        if (activityType === CHART_ACTIVITY_TYPE && this.#chartActivity) {
-          this.#drawActivityChart(messageId, content);
-        }
+        this.#drawActivity(messageId, activityType, content);
       },
       onRunEnd: () => {
         this.#hidePending();
         this.#endStream();
       },
       onError: (message) => {
+        this.#announcedOutcome = true;
+        this.#announce(this.#strings.announceFailed);
         this.#hidePending();
-        this.#revealWords(this.appendMessage(MESSAGE_ROLE.ASSISTANT, `\u26A0\uFE0F ${message}`));
+        const bubble = this.appendMessage(MESSAGE_ROLE.ASSISTANT, `\u26A0\uFE0F ${message}`);
+        bubble.classList.add("message--failed");
+        this.#attachActions(bubble, { rateable: false });
+        this.#revealWords(bubble);
         this.#endStream();
       },
       onCancelled: () => {
+        this.#announcedOutcome = true;
+        this.#announce(this.#strings.announceStopped);
         this.#hidePending();
         this.#appendStoppedNote();
         this.#endStream();
       },
       onSettled: () => {
+        if (!this.#announcedOutcome) {
+          this.#announce(this.#strings.announceAnswerReady);
+        }
         this.#hidePending();
         this.#setRunning(false);
         this.#endStream();
@@ -11349,14 +13138,86 @@ var AgUiChat = class extends HTMLElement {
       side: this.#serverSettled.has(id) ? "server" : "client"
     }));
     this.#runTools = [];
+    const invalidated = [...this.#runInvalidated];
+    this.#runInvalidated = /* @__PURE__ */ new Set();
     this.dispatchEvent(
       new CustomEvent(RUN_FINISHED_EVENT, {
-        detail: { tools },
+        detail: { tools, invalidated },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Route one invalidation to the host, and remember it for the run summary.
+   *
+   * Dispatched immediately rather than only at the end, because that is what
+   * makes a long multi-step run feel live -- the list refreshes as the third of
+   * eight writes lands. The accumulated set rides
+   * {@link RUN_FINISHED_EVENT} as well, so a host that would rather refetch once
+   * upgrades by reading one extra field instead of adding a listener.
+   *
+   * Nothing is rendered, persisted or replayed. An invalidation is an
+   * imperative: it has no place in the transcript and no meaning once acted on,
+   * and replaying one on every thread load would be a refetch storm. That is the
+   * whole reason the server sends it as `CUSTOM` rather than as an activity.
+   */
+  #dispatchInvalidation(value) {
+    const payload = value ?? {};
+    const keys = Array.isArray(payload.keys) ? payload.keys.filter((key) => typeof key === "string") : [];
+    if (keys.length === 0) {
+      return;
+    }
+    for (const key of keys) {
+      this.#runInvalidated.add(key);
+    }
+    this.dispatchEvent(
+      new CustomEvent(INVALIDATE_EVENT, {
+        detail: { keys, reason: typeof payload.reason === "string" ? payload.reason : null },
         bubbles: true,
         composed: true
       })
     );
   }
+  /**
+   * 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");
@@ -11366,7 +13227,7 @@ var AgUiChat = class extends HTMLElement {
     note.textContent = this.#strings.stopped;
     this.#ensureGroup().appendChild(note);
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
   }
   /**
    * Show a "thinking" indicator while the agent is being awaited — both the
@@ -11390,7 +13251,7 @@ var AgUiChat = class extends HTMLElement {
     this.#pending = pending;
     this.#ensureGroup().appendChild(pending);
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
   }
   /** Remove the pending indicator if shown. */
   #hidePending() {
@@ -11408,7 +13269,7 @@ var AgUiChat = class extends HTMLElement {
       const group = this.#ensureGroup();
       group.insertBefore(this.#thoughts.element, group.firstChild);
       this.#updateEmptyState();
-      this.#messages.scrollTop = this.#messages.scrollHeight;
+      this.#scroller.follow();
     }
     return this.#thoughts;
   }
@@ -11460,7 +13321,7 @@ var AgUiChat = class extends HTMLElement {
     this.#streamBuffer = buffer;
     const bubble = this.#openStream();
     bubble.innerHTML = renderMarkdown(buffer, { allowImages: this.allowImages });
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return bubble;
   }
   /**
@@ -11508,7 +13369,7 @@ var AgUiChat = class extends HTMLElement {
   #appendNotice(icon, text3, kind) {
     this.#ensureGroup().appendChild(renderRunNotice(icon, text3, kind));
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
   }
   /**
    * Turn on chart rendering, by whichever route this consumer wants.
@@ -11529,9 +13390,16 @@ var AgUiChat = class extends HTMLElement {
    * arrives is not something to switch on for everybody.
    */
   enableCharts(routes = ["tool", "activity"]) {
-    const first = !this.#chartActivity && !this.#toolRegistry.has(CHART_TOOL_NAME);
+    const first = !this.#activityRenderers.has(CHART_ACTIVITY_TYPE) && !this.#toolRegistry.has(CHART_TOOL_NAME);
     if (routes.includes("activity")) {
-      this.#chartActivity = true;
+      this.registerActivityRenderer({
+        type: CHART_ACTIVITY_TYPE,
+        render: (content) => {
+          const spec = chartSpecFrom(content);
+          return spec === null ? null : renderChart(spec);
+        },
+        removedNotice: this.#strings.chartUndrawable
+      });
     }
     if (routes.includes("tool")) {
       this.registerTool(createChartTool());
@@ -11564,27 +13432,120 @@ var AgUiChat = class extends HTMLElement {
     this.#cardElements.get(call.id)?.after(node);
     this.#afterTranscriptGrew();
   }
-  /** Draw, or redraw in place, the chart for one activity message. */
-  #drawActivityChart(messageId, content) {
-    const spec = chartSpecFrom(content);
-    const block = spec === null ? null : renderChart(spec);
-    if (block === null) {
-      this.#activityBlocks.get(messageId)?.remove();
-      this.#activityBlocks.delete(messageId);
+  /**
+   * Teach this element to draw one kind of AG-UI activity.
+   *
+   * `activity_type` is one of exactly two fields the protocol leaves an open
+   * string, and it is the **content** one: an activity is materialised into a
+   * message, persisted with the thread, and replayed on every restore. Its
+   * sibling `CUSTOM` carries an imperative and is dispatched to the page
+   * instead ({@link CUSTOM_AGENT_EVENT}).
+   *
+   * That asymmetry decides which carrier a server should use. Content has a
+   * place in the conversation and should come back; an imperative has no place
+   * and no meaning once acted on.
+   *
+   * ```js
+   * chat.registerActivityRenderer({
+   *   type: "build_status",
+   *   render: (content) => {
+   *     const el = document.createElement("div");
+   *     el.textContent = `Build ${content.status}`;
+   *     return el;
+   *   },
+   * });
+   * ```
+   *
+   * Registering a type twice replaces the earlier renderer, so a host can
+   * override a built-in -- `chart` and `compaction` are registrations like any
+   * other, not privileged branches.
+   *
+   * ⚠ `render` runs again on every thread load. See {@link ActivityRenderer}
+   * for what that requires of it.
+   */
+  registerActivityRenderer(registration) {
+    this.#activityRenderers.set(registration.type, registration);
+    this.#unhandledActivityTypes.delete(registration.type);
+  }
+  /**
+   * Activity types that arrived with nobody registered to draw them.
+   *
+   * Deliberately the only trace an unhandled activity leaves. Ignoring an
+   * unknown name is the protocol's own answer and the whole point of an open
+   * field, so warning would fire on every forward-compatible server -- but
+   * "nothing happened and nothing was said" is impossible to debug, so the set
+   * is readable. Accumulates for the element's lifetime, across threads.
+   */
+  get unhandledActivityTypes() {
+    return [...this.#unhandledActivityTypes];
+  }
+  /**
+   * Draw, replace or remove one activity, whatever kind it is.
+   *
+   * The single path for all three routes an activity arrives by -- pushed
+   * (`onActivity`), patched (`onActivityChanged`) and replayed from history --
+   * which is why the renderer contract has to be pure: the same content is
+   * drawn again on every thread load.
+   *
+   * An unregistered type draws nothing and says nothing. That is the protocol's
+   * own answer -- a client that does not know a name ignores the event -- and a
+   * warning here would fire on every well-behaved forward-compatible server,
+   * while a placeholder would put the protocol's growth in the user's face.
+   * {@link unhandledActivityTypes} is the way to find out what arrived.
+   */
+  #drawActivity(messageId, activityType, content) {
+    const registration = this.#activityRenderers.get(activityType);
+    if (registration === void 0) {
+      this.#unhandledActivityTypes.add(activityType);
+      return;
+    }
+    let node;
+    try {
+      node = registration.render(content);
+    } catch (error) {
+      console.warn(`ag-ui-chat: render failed for activity ${activityType}`, error);
+      node = null;
+    }
+    if (node === null) {
+      this.#removeActivity(messageId, activityType, registration.removedNotice, content);
       return;
     }
     const existing = this.#activityBlocks.get(messageId);
     if (existing === void 0) {
-      this.#ensureGroup().appendChild(block);
+      this.#ensureGroup().appendChild(node);
     } else {
-      existing.replaceWith(block);
+      existing.replaceWith(node);
     }
-    this.#activityBlocks.set(messageId, block);
+    this.#activityBlocks.set(messageId, node);
     this.#afterTranscriptGrew();
   }
+  /**
+   * Take away an activity whose content stopped being drawable.
+   *
+   * Leaving the old one up is the worst available answer: it shows values that
+   * have been retracted, reading as current, and a reload drops it anyway
+   * because the *stored* content is the version that could not be drawn. Live
+   * and reload should agree, and both should say "gone".
+   *
+   * Removing is right; doing it in silence was not. A chart that had been drawn
+   * simply disappeared, with no `console` call anywhere on the path -- which
+   * nobody reports as a bug, they report as "the charts are flaky".
+   */
+  #removeActivity(messageId, activityType, notice, content) {
+    const had = this.#activityBlocks.has(messageId);
+    this.#activityBlocks.get(messageId)?.remove();
+    this.#activityBlocks.delete(messageId);
+    console.warn(
+      `ag-ui-chat: activity ${messageId} (${activityType}) was not drawable and has been removed. A chart's points must each be a finite JSON number; a numeric column serialised as a string (a Decimal, typically) is rejected rather than coerced.`,
+      content
+    );
+    if (had && notice !== void 0) {
+      this.#appendNotice("\u{1F4C9}", notice, "chart-undrawable");
+    }
+  }
   #afterTranscriptGrew() {
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
   }
   #cardFor(call) {
     const existing = this.#toolCards.get(call.id);
@@ -11593,11 +13554,16 @@ var AgUiChat = class extends HTMLElement {
     }
     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();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return card;
   }
 };
@@ -11667,7 +13633,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.28.0";
+var VERSION = "0.30.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -11675,13 +13641,21 @@ export {
   CHART_ACTIVITY_TYPE,
   CHART_TOOL_NAME,
   COMPACTION_ACTIVITY_TYPE,
+  CUSTOM_AGENT_EVENT,
   CheckpointMenu,
   ClientToolRegistry,
   ConnectionLostError,
   DEFAULT_UI_STRINGS,
   ELEMENT_TAG,
+  FEEDBACK_EVENT,
+  INVALIDATE_CUSTOM_NAME,
+  INVALIDATE_EVENT,
   LOAD_CAPABILITY_TOOL,
+  MAX_QUOTE_CHARS,
+  MAX_SUGGESTIONS,
+  MAX_SUGGESTION_CHARS,
   MAX_TOOL_ROUNDS,
+  MESSAGE_ACTIONS,
   MESSAGE_ROLE,
   PAGE_ACTIONS,
   RUN_FINISHED_EVENT,
@@ -11689,6 +13663,7 @@ export {
   RunIndex,
   STATE_EVENT,
   SUBMIT_EVENT,
+  SUGGESTIONS_ACTIVITY_TYPE,
   SessionStorageStore,
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
@@ -11700,6 +13675,9 @@ export {
   X_DESTRUCTIVE_KEY,
   X_NAVIGATES_KEY,
   X_SUMMARY_KEY,
+  asQuote,
+  attachMessageActions,
+  attachQuoteOffer,
   chartSpecFrom,
   clickElement,
   createHttpAgent,
@@ -11716,14 +13694,18 @@ export {
   isDestructive,
   isNavigates,
   mergeUiStrings,
+  messageActionBar,
   messageAttachments,
   parseToolCatalog,
   prefersReducedMotion,
   pressButton,
   pressThenClick,
   prettifyToolName,
+  quotableSelection,
+  relativeTime,
   renderChart,
   renderMarkdown,
+  renderSuggestionChips,
   requestApproval,
   requestConfirmation,
   requestQuestion,
@@ -11733,6 +13715,7 @@ export {
   setControlValue,
   setNativeChecked,
   setNativeValue,
+  suggestionPrompts,
   toggleCheckbox,
   toggleControl,
   transcribeAudio,