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

package/dist/index.js

@@ -6,6 +6,11 @@ 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 MESSAGE_ROLE = {
   USER: "user",
   ASSISTANT: "assistant"
@@ -47,6 +52,10 @@ 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";
 
 // src/skills/fill_template.ts
 var PLACEHOLDER_RE = /\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g;
@@ -441,8 +450,9 @@ function parseToolCatalog(data) {
     const record = entry;
     const name = record["name"];
     const summary = record["summary"];
+    const description = record["description"];
     if (typeof name === "string" && typeof summary === "string") {
-      out[name] = summary;
+      out[name] = typeof description === "string" ? { name, summary, description } : { name, summary };
     }
   }
   return out;
@@ -533,6 +543,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",
@@ -540,6 +556,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.",
@@ -555,6 +573,7 @@ var DEFAULT_UI_STRINGS = {
   stopRecording: "Stop recording",
   transcribing: "Transcribing\u2026",
   transcriptionFailed: "Transcription failed",
+  recordingLimit: "Stopped at the {n}-minute limit \u2014 transcribing what was recorded.",
   toolRunning: "running\u2026",
   toolDeferred: "waiting for you",
   toolDone: "\u2713 done",
@@ -568,7 +587,18 @@ var DEFAULT_UI_STRINGS = {
   errorLabel: "Error",
   declinedLabel: "Declined",
   details: "Details",
+  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",
@@ -635,6 +665,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");
@@ -652,10 +683,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);
@@ -664,6 +700,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;
@@ -1394,6 +1478,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) {
@@ -1426,6 +1511,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);
@@ -1527,7 +1627,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");
@@ -1608,6 +1708,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) => {
@@ -1620,8 +1721,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) {
@@ -1632,6 +1737,347 @@ 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);
+  bar.appendChild(copyButton(options));
+  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(options) {
+  const { strings } = options;
+  const button2 = messageActionButton("copy", strings.copyMessage, "\u2398");
+  button2.addEventListener("click", () => {
+    void navigator.clipboard.writeText(options.text()).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();
@@ -2121,7 +2567,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;
@@ -2718,7 +3164,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
     );
   };
@@ -2736,7 +3182,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();
@@ -4596,23 +5042,51 @@ var ALLOWED_TAGS = [
   "th",
   "td"
 ];
-var ALLOWED_ATTR = ["href", "title", "class"];
-var ALLOWED_TAGS_WITH_IMAGES = [...ALLOWED_TAGS, "img"];
-var ALLOWED_ATTR_WITH_IMAGES = [...ALLOWED_ATTR, "src", "alt", "width", "height"];
+var ALLOWED_ATTR = ["href", "title", "class", "target", "rel"];
+var SANITIZE_CONFIG = {
+  ALLOWED_TAGS,
+  ALLOWED_ATTR,
+  ALLOW_DATA_ATTR: false,
+  ALLOW_ARIA_ATTR: false
+};
+var SANITIZE_CONFIG_WITH_IMAGES = {
+  ...SANITIZE_CONFIG,
+  ALLOWED_TAGS: [...ALLOWED_TAGS, "img"],
+  ALLOWED_ATTR: [...ALLOWED_ATTR, "src", "alt", "width", "height"]
+};
+var LANGUAGE_CLASS = /^language-[A-Za-z0-9_+#.-]+$/;
+var LANGUAGE_HOSTS = /* @__PURE__ */ new Set(["CODE", "PRE"]);
+function harden(node) {
+  if (node.nodeName === "A" && node.hasAttribute("href")) {
+    node.setAttribute("target", "_blank");
+    node.setAttribute("rel", "noopener noreferrer");
+  } else {
+    node.removeAttribute("target");
+    node.removeAttribute("rel");
+  }
+  const classes = node.getAttribute("class");
+  if (classes === null) {
+    return;
+  }
+  const kept = LANGUAGE_HOSTS.has(node.nodeName) ? classes.split(/\s+/).filter((token) => LANGUAGE_CLASS.test(token)) : [];
+  if (kept.length === 0) {
+    node.removeAttribute("class");
+    return;
+  }
+  node.setAttribute("class", kept.join(" "));
+}
+var purifier = null;
+function sanitizer() {
+  if (purifier === null) {
+    purifier = purify();
+    purifier.addHook("afterSanitizeAttributes", harden);
+  }
+  return purifier;
+}
 function renderMarkdown(text3, options) {
   const allowImages = options?.allowImages === true;
   const rendered = parser.parse(text3, { async: false });
-  const clean = purify.sanitize(rendered, {
-    ALLOWED_TAGS: allowImages ? ALLOWED_TAGS_WITH_IMAGES : ALLOWED_TAGS,
-    ALLOWED_ATTR: allowImages ? ALLOWED_ATTR_WITH_IMAGES : ALLOWED_ATTR
-  });
-  const template = document.createElement("template");
-  template.innerHTML = clean;
-  for (const anchor of template.content.querySelectorAll("a[href]")) {
-    anchor.setAttribute("target", "_blank");
-    anchor.setAttribute("rel", "noopener noreferrer");
-  }
-  return template.innerHTML.trim();
+  return sanitizer().sanitize(rendered, allowImages ? SANITIZE_CONFIG_WITH_IMAGES : SANITIZE_CONFIG).trim();
 }
 
 // src/ui/resize_handle.ts
@@ -4655,6 +5129,15 @@ function createResizeHandle(options) {
     window.addEventListener("pointerup", onUp);
     event.preventDefault();
   });
+  let pending = null;
+  const settle = () => {
+    if (pending === null) {
+      return;
+    }
+    const size = pending;
+    pending = null;
+    options.commit(size);
+  };
   handle.addEventListener("keydown", (event) => {
     const axis = options.axis();
     if (axis === "none") {
@@ -4680,8 +5163,10 @@ function createResizeHandle(options) {
     }
     event.preventDefault();
     options.apply(next);
-    options.commit(next);
+    pending = next;
   });
+  handle.addEventListener("keyup", settle);
+  handle.addEventListener("blur", settle);
   return handle;
 }
 
@@ -4892,6 +5377,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
@@ -5462,6 +6001,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,
@@ -5470,9 +6010,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;
@@ -6638,6 +7282,7 @@ var STYLES = `
 
 .confirm-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 }
@@ -6664,41 +7309,134 @@ var STYLES = `
   color: #ffffff;
 }
 
-/* Approval card \u2014 the server-side-tool gate (approve/deny an interrupt). */
-.approval {
-  align-self: stretch;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: var(--_bg);
-  border: 1px solid var(--_accent);
-  border-radius: 10px;
-}
-
-.approval[data-resolved] {
-  opacity: 0.7;
-  border-color: var(--_border);
+/* 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;
 }
 
-.approval-body {
-  font-weight: 600;
+.confirm-btn--always:hover,
+.confirm-btn--always:focus-visible {
+  opacity: 1;
 }
 
-.approval-actions {
+/* 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;
-  gap: 8px;
-  justify-content: flex-end;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.approval-btn {
+.approval-args {
+  box-sizing: border-box;
+  width: 100%;
+  resize: vertical;
   border: 1px solid var(--_border);
   border-radius: 8px;
-  padding: 8px 14px;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
+  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;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--_bg);
+  border: 1px solid var(--_accent);
+  border-radius: 10px;
+}
+
+.approval[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--_border);
+}
+
+.approval-body {
+  font-weight: 600;
+}
+
+.approval-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.approval-btn {
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
   background: var(--_bg);
   color: var(--_fg);
 }
@@ -6808,6 +7546,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;
@@ -7222,6 +7988,42 @@ var STYLES = `
 }
 `;
 
+// 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. */
@@ -7288,6 +8090,7 @@ var ThreadDrawer = class {
   #heading;
   #newButton;
   #list;
+  #formatRelativeTime = null;
   #strings;
   #threads = [];
   #activeId = "";
@@ -7335,6 +8138,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);
@@ -7434,7 +8252,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");
@@ -7583,9 +8401,18 @@ 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;
   #settled = false;
   constructor(name, args, summary, strings = DEFAULT_UI_STRINGS) {
     this.#strings = strings;
+    this.args = args;
     this.element = document.createElement("div");
     this.element.className = "tool-call";
     this.element.setAttribute("part", "tool-card");
@@ -7704,6 +8531,7 @@ var ToolCallCard = class {
 };
 
 // src/ui/voice_input.ts
+var MAX_RECORDING_MS = 12e4;
 var VoiceInput = class {
   /** The mic button; mount this in the composer. */
   element;
@@ -7714,6 +8542,8 @@ var VoiceInput = class {
   #recorder = null;
   #stream = null;
   #chunks = [];
+  #capTimer = null;
+  #hitCap = false;
   #disposed = false;
   constructor(options) {
     this.#transcribe = options.transcribe;
@@ -7753,6 +8583,7 @@ var VoiceInput = class {
     }
     this.#stream = stream;
     this.#chunks = [];
+    this.#hitCap = false;
     const recorder = new MediaRecorder(stream);
     recorder.addEventListener("dataavailable", (event) => {
       this.#chunks.push(event.data);
@@ -7762,11 +8593,23 @@ var VoiceInput = class {
     });
     this.#recorder = recorder;
     recorder.start();
+    this.#capTimer = setTimeout(() => {
+      this.#hitCap = true;
+      this.#stop();
+    }, MAX_RECORDING_MS);
     this.#setState("recording");
   }
   #stop() {
+    this.#clearCap();
     this.#recorder?.stop();
   }
+  /** Drop the cap timer; recording is over, by whichever route. */
+  #clearCap() {
+    if (this.#capTimer !== null) {
+      clearTimeout(this.#capTimer);
+      this.#capTimer = null;
+    }
+  }
   /**
    * Tear the control down, for a host element removed mid-recording. Stops any
    * live `MediaRecorder`, releases the mic tracks so the browser's recording
@@ -7775,6 +8618,7 @@ var VoiceInput = class {
    */
   dispose() {
     this.#disposed = true;
+    this.#clearCap();
     if (this.#recorder !== null && this.#recorder.state !== "inactive") {
       this.#recorder.stop();
     }
@@ -7791,6 +8635,12 @@ var VoiceInput = class {
     try {
       const text3 = await this.#transcribe(audio);
       this.#setState("idle");
+      if (this.#hitCap) {
+        this.element.title = this.#strings.recordingLimit.replace(
+          "{n}",
+          String(MAX_RECORDING_MS / 6e4)
+        );
+      }
       if (text3 !== "") {
         this.#onText(text3);
       }
@@ -7917,6 +8767,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
@@ -8083,6 +8968,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;
@@ -8104,6 +8995,16 @@ var AgUiClient = class {
       onReasoningMessageContentEvent({ reasoningMessageBuffer }) {
         h.onReasoningDelta(reasoningMessageBuffer);
       },
+      // The delta callback reports the buffer as it stood *before* the announced
+      // delta was appended, so on its own it always trails the stream by one and
+      // renders nothing at all for a block that arrives as a single delta. The
+      // answer text is spared that because its own end event carries the whole
+      // message; this is the reasoning counterpart, and it has to be
+      // REASONING_MESSAGE_END rather than REASONING_END, because only the former
+      // carries a buffer.
+      onReasoningMessageEndEvent({ reasoningMessageBuffer }) {
+        h.onReasoningDelta(reasoningMessageBuffer);
+      },
       onReasoningEndEvent() {
         h.onReasoningEnd();
       },
@@ -8159,12 +9060,68 @@ var MINTED_SUFFIX = "minted:";
 var TITLE_LIMIT = 60;
 var PREVIEW_LIMIT = 100;
 var DEFAULT_TITLE = "New conversation";
-var SessionStorageStore = class {
+var writeFailureReported = false;
+function writeStoredItem(key, value) {
+  try {
+    sessionStorage.setItem(key, value);
+  } catch {
+    if (writeFailureReported) {
+      return;
+    }
+    writeFailureReported = true;
+    console.warn(
+      "<ag-ui-chat>: the browser refused a sessionStorage write \u2014 the quota is full, or storage is disabled for this context. The conversation continues, but it will not survive a page reload. Deleting a long conversation from the history drawer frees the quota."
+    );
+  }
+}
+function rootFor(namespace) {
+  return namespace === "" ? KEY_ROOT : `${KEY_ROOT}@${namespace}`;
+}
+var SessionStorageStore = class _SessionStorageStore {
   #root;
   constructor(namespace = "") {
-    this.#root = namespace === "" ? KEY_ROOT : `${KEY_ROOT}@${namespace}`;
+    this.#root = rootFor(namespace);
     if (namespace !== "") {
-      this.#migrateLegacyKeys();
+      _SessionStorageStore.adopt("", namespace);
+    }
+  }
+  /**
+   * Move every key a store owns out of `from`'s namespace and into `to`'s.
+   *
+   * Two callers, one move. The constructor adopts the pre-namespacing global
+   * keys (`from` = `""`); `<ag-ui-chat>` adopts an element-scoped conversation
+   * into a principal-scoped one the first time a `user-key` arrives, which is a
+   * host naming the user who was already there rather than a handover.
+   *
+   * Only this store's own suffixes move — the element's `collapsed` / `size` /
+   * `theme` keys share the global root and are deliberately left where they
+   * are. A value already present at the destination wins: the destination is
+   * the durable record and the source is the stray this move exists to clear.
+   */
+  static adopt(from, to) {
+    const fromRoot = `${rootFor(from)}:`;
+    const toRoot = `${rootFor(to)}:`;
+    for (const [key, suffix] of ownedKeys(fromRoot)) {
+      const value = sessionStorage.getItem(key);
+      const destination = toRoot + suffix;
+      if (value !== null && sessionStorage.getItem(destination) === null) {
+        writeStoredItem(destination, value);
+      }
+      sessionStorage.removeItem(key);
+    }
+  }
+  /**
+   * Forget everything a store holds for `namespace`.
+   *
+   * The logout primitive: `<ag-ui-chat>` calls it when its `user-key` changes,
+   * and a host driving its own store can call it from its own sign-out path.
+   * Deliberately narrow — it removes only keys under this exact namespace whose
+   * suffix parses as one this store writes, so it can never reach another
+   * element's conversation or the host's own `sessionStorage` entries.
+   */
+  static purge(namespace) {
+    for (const [key] of ownedKeys(`${rootFor(namespace)}:`)) {
+      sessionStorage.removeItem(key);
     }
   }
   threadId() {
@@ -8172,8 +9129,8 @@ var SessionStorageStore = class {
   }
   newThread() {
     const id = randomUUID3();
-    sessionStorage.setItem(this.#key(THREAD_SUFFIX), id);
-    sessionStorage.setItem(this.#key(MINTED_SUFFIX + id), "1");
+    writeStoredItem(this.#key(THREAD_SUFFIX), id);
+    writeStoredItem(this.#key(MINTED_SUFFIX + id), "1");
     return id;
   }
   isUnsent(threadId) {
@@ -8183,7 +9140,7 @@ var SessionStorageStore = class {
     return Promise.resolve(this.#readJson(this.#key(MESSAGES_SUFFIX + threadId)));
   }
   saveMessages(threadId, messages) {
-    sessionStorage.setItem(this.#key(MESSAGES_SUFFIX + threadId), JSON.stringify(messages));
+    writeStoredItem(this.#key(MESSAGES_SUFFIX + threadId), JSON.stringify(messages));
     sessionStorage.removeItem(this.#key(MINTED_SUFFIX + threadId));
     this.#touchThread(threadId, messages);
   }
@@ -8196,7 +9153,7 @@ var SessionStorageStore = class {
       sessionStorage.removeItem(key);
       return;
     }
-    sessionStorage.setItem(key, JSON.stringify(checkpoint));
+    writeStoredItem(key, JSON.stringify(checkpoint));
   }
   clear(threadId) {
     sessionStorage.removeItem(this.#key(MESSAGES_SUFFIX + threadId));
@@ -8212,7 +9169,7 @@ var SessionStorageStore = class {
     return Promise.resolve(metas);
   }
   setActiveThread(threadId) {
-    sessionStorage.setItem(this.#key(THREAD_SUFFIX), threadId);
+    writeStoredItem(this.#key(THREAD_SUFFIX), threadId);
   }
   renameThread(threadId, title) {
     const threads = this.#readThreads();
@@ -8256,40 +9213,12 @@ var SessionStorageStore = class {
       sessionStorage.removeItem(key);
       return;
     }
-    sessionStorage.setItem(key, JSON.stringify(threads));
+    writeStoredItem(key, JSON.stringify(threads));
   }
   /** This store's fully-qualified key for a suffix (namespaced when set). */
   #key(suffix) {
     return `${this.#root}:${suffix}`;
   }
-  /**
-   * One-time move of un-namespaced `ag-ui-chat:*` keys into this instance's
-   * namespace, so an existing conversation isn't orphaned. Only this store's own
-   * keys move — the element's `collapsed` / `theme` keys are left alone. The
-   * first namespaced instance to mount adopts the data; a second namespace
-   * finds it gone and starts fresh.
-   */
-  #migrateLegacyKeys() {
-    const legacyRoot = `${KEY_ROOT}:`;
-    const moves = [];
-    for (let i = 0; i < sessionStorage.length; i += 1) {
-      const key = sessionStorage.key(i);
-      if (key === null || !key.startsWith(legacyRoot)) {
-        continue;
-      }
-      const suffix = key.slice(legacyRoot.length);
-      if (isOwnedSuffix(suffix)) {
-        moves.push([key, this.#key(suffix)]);
-      }
-    }
-    for (const [from, to] of moves) {
-      const value = sessionStorage.getItem(from);
-      if (value !== null && sessionStorage.getItem(to) === null) {
-        sessionStorage.setItem(to, value);
-      }
-      sessionStorage.removeItem(from);
-    }
-  }
   /** Parse a stored JSON value, returning `null` when absent or corrupt. */
   #readJson(key) {
     const raw = sessionStorage.getItem(key);
@@ -8303,8 +9232,22 @@ var SessionStorageStore = class {
     }
   }
 };
+function ownedKeys(root) {
+  const found = [];
+  for (let index = 0; index < sessionStorage.length; index += 1) {
+    const key = sessionStorage.key(index);
+    if (key === null || !key.startsWith(root)) {
+      continue;
+    }
+    const suffix = key.slice(root.length);
+    if (isOwnedSuffix(suffix)) {
+      found.push([key, suffix]);
+    }
+  }
+  return found;
+}
 function isOwnedSuffix(suffix) {
-  return suffix === THREAD_SUFFIX || suffix === THREADS_SUFFIX || suffix.startsWith(MESSAGES_SUFFIX) || suffix.startsWith(CHECKPOINT_SUFFIX);
+  return suffix === THREAD_SUFFIX || suffix === THREADS_SUFFIX || suffix.startsWith(MESSAGES_SUFFIX) || suffix.startsWith(CHECKPOINT_SUFFIX) || suffix.startsWith(MINTED_SUFFIX);
 }
 function deriveTitle(messages) {
   for (const message of messages) {
@@ -8349,12 +9292,27 @@ function mintThread(store) {
   store.setActiveThread(id);
   return id;
 }
+function warnOnCrossOriginCredentials(url, credentialNames, trustedOrigins, warned) {
+  if (credentialNames.length === 0) {
+    return;
+  }
+  const destination = new URL(String(url), location.href).origin;
+  if (destination === location.origin || trustedOrigins.includes(destination) || warned.has(destination)) {
+    return;
+  }
+  warned.add(destination);
+  console.warn(
+    `<ag-ui-chat>: sending host credentials (${credentialNames.join(", ")}) to ${destination}, which is not this page's origin (${location.origin}). Those headers are the page's own authentication, and whichever server answers the browser's preflight receives them \u2014 so a URL attribute built from a query parameter or from tenant-authored configuration is a channel for the token to leave on. If this destination is deliberate, name it in \`trustedOrigins\` to confirm it and silence this notice. Reported once per origin.`
+  );
+}
 
 // src/core/create_http_agent.ts
 function createHttpAgent(options) {
+  const staticHeaders = options.headers ?? {};
+  const warned = /* @__PURE__ */ new Set();
   return new HttpAgent({
     url: options.endpoint,
-    headers: options.headers ?? {},
+    headers: staticHeaders,
     initialState: { ...options.initialState ?? {} },
     // HttpAgent invokes its configured fetch as a method (`this.fetch(...)`),
     // rebinding the global `fetch` to the agent instance — "Illegal invocation"
@@ -8363,6 +9321,10 @@ function createHttpAgent(options) {
     // own config having no seam for either.
     fetch: (url, init) => {
       const fresh = options.getHeaders?.();
+      const credentialNames = [
+        .../* @__PURE__ */ new Set([...Object.keys(staticHeaders), ...Object.keys(fresh ?? {})])
+      ].sort();
+      warnOnCrossOriginCredentials(url, credentialNames, options.trustedOrigins ?? [], warned);
       if (fresh === void 0) {
         return fetch(url, withCredentials(init, options.credentials));
       }
@@ -8385,13 +9347,34 @@ var RemoteConversationStore = class {
   #headers;
   #local;
   #credentials;
+  #cacheMessages;
   #dropped = /* @__PURE__ */ new Set();
   #renamed = /* @__PURE__ */ new Map();
-  constructor(url, headers = () => ({}), local = new SessionStorageStore(), credentials = () => void 0) {
+  /**
+   * @param cacheMessages Whether to mirror message bodies into the local store.
+   *
+   * `true` (the default, and the behaviour this class has always had) keeps a
+   * local copy of every turn, so the transcript still replays when the thread
+   * endpoint is unreachable. `false` is for the deployment that chose a
+   * server-backed store precisely so transcripts do not sit in the browser:
+   * regulated content, a shared workstation, an operator who has to be able to
+   * say where the conversation lives. It is not the same as passing a local
+   * store that does nothing — the local store also owns the active thread id,
+   * the navigation checkpoint and the "nothing sent here yet" marker, all of
+   * which must keep working — so the opt-out is scoped to the bodies alone.
+   *
+   * The cost is deliberate and worth stating: with no local copy there is
+   * nothing to fall back to, so a failed request shows an empty transcript
+   * rather than a stale one, and the drawer's offline list loses its previews
+   * (a preview is an excerpt of a message, which is the very thing being kept
+   * off the client).
+   */
+  constructor(url, headers = () => ({}), local = new SessionStorageStore(), credentials = () => void 0, cacheMessages = true) {
     this.#url = url.endsWith("/") ? url : `${url}/`;
     this.#headers = headers;
     this.#local = local;
     this.#credentials = credentials;
+    this.#cacheMessages = cacheMessages;
   }
   threadId() {
     return this.#local.threadId();
@@ -8412,7 +9395,7 @@ var RemoteConversationStore = class {
     return this.#local.isUnsent?.(threadId) === true;
   }
   saveMessages(threadId, messages) {
-    this.#local.saveMessages(threadId, messages);
+    this.#local.saveMessages(threadId, this.#cacheMessages ? messages : []);
   }
   loadCheckpoint(threadId) {
     return this.#local.loadCheckpoint(threadId);
@@ -8677,6 +9660,7 @@ var CONNECT_TIME_ATTRIBUTES = [
   "data-attachment-max-bytes",
   "data-transcribe-url",
   "data-threads-url",
+  "data-threads-cache",
   "data-tools-url",
   "data-skills-url",
   "data-skills",
@@ -8693,6 +9677,8 @@ 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). */
   agentFactory = createHttpAgent;
@@ -8716,6 +9702,22 @@ var AgUiChat = class extends HTMLElement {
    * `Authorization` are configured independently and neither drops the other.
    */
   getHeaders = null;
+  /**
+   * Origins, besides the page's own, that this element may send {@link headers}
+   * and {@link getHeaders} credentials to without saying so on the console.
+   *
+   * Seven attributes name a URL, and every one of them carries these headers.
+   * They are plain HTML, so a page that builds one from a query parameter or
+   * from tenant-authored configuration has handed an attacker the destination,
+   * and the token leaves on the element's first request. Naming the origins you
+   * expect turns that from silent into either confirmed or reported.
+   *
+   * A notice rather than a refusal: a cross-origin agent is a documented
+   * deployment, so refusing would break working installations to defend against
+   * a page that is already interpolating untrusted data into its own markup.
+   * Leaving this empty costs nothing but one console line per foreign origin.
+   */
+  trustedOrigins = [];
   /**
    * Permit `<img>` in rendered assistant markdown. **Off by default**: a
    * model-controlled image URL is fetched with no user interaction, which
@@ -8723,6 +9725,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;
   /**
@@ -8746,6 +9764,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
@@ -8851,13 +9885,37 @@ var AgUiChat = class extends HTMLElement {
    */
   resolvePageTarget = (target) => document.querySelector(target);
   /**
-   * Card labels fetched from a server tool catalog (`data-tools-url`), keyed by
-   * tool name. The base layer behind {@link toolSummaries}: an explicit entry in
-   * `toolSummaries` wins, this fills the rest. Populated once on connect.
+   * The server tool catalog fetched from `data-tools-url`, keyed by tool
+   * name. Cards label themselves from each entry's `summary`, the base
+   * layer behind {@link toolSummaries}: an explicit entry in `toolSummaries`
+   * wins, this fills the rest. Held as whole entries rather than labels so a
+   * field the server sent is not lost on the way in. Populated once on connect.
    */
   #toolCatalog = {};
+  /**
+   * Foreign origins already reported, so the notice is once per origin per
+   * element rather than once per request. Per-element rather than module-level,
+   * because two elements on one page are two separate configurations.
+   */
+  #warnedOrigins = /* @__PURE__ */ new Set();
   /** The resolved string table (defaults ← `data-strings` ← `strings`). */
   #strings = DEFAULT_UI_STRINGS;
+  /**
+   * The tool names the current round handed the agent, captured as the catalog
+   * went out.
+   *
+   * The registry is mount-wide but {@link getTools} is per-run, so a host is
+   * free to scope what a given page offers — and a call naming a tool this run
+   * withheld must not reach the handler that is merely still registered.
+   * Snapshotted rather than re-asked at dispatch: a provider is a function, and
+   * calling it again asks a question the run already answered, which is exactly
+   * the window a scoped catalog exists to close.
+   *
+   * Empty until the first round advertises, which cannot precede a call: the
+   * client builds `RunAgentInput.tools` at the top of every round, before the
+   * calls that round produces are executed.
+   */
+  #advertisedTools = /* @__PURE__ */ new Set();
   #toolRegistry = new ClientToolRegistry();
   /** Tool-call cards awaiting execution, keyed by call id. */
   #toolCards = /* @__PURE__ */ new Map();
@@ -8867,7 +9925,16 @@ var AgUiChat = class extends HTMLElement {
    * 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. */
@@ -8879,7 +9946,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;
@@ -8935,6 +10070,12 @@ var AgUiChat = class extends HTMLElement {
   // revealed progressively as it streamed, so the word reveal must not re-animate
   // it; ≤1 ⇒ it arrived at once and the word reveal is appropriate.
   #streamDeltas = 0;
+  // The accumulated answer the next render will draw. Deltas overwrite it
+  // (each one carries the whole answer), so a frame always draws the latest.
+  #streamBuffer = "";
+  // The frame that render is queued on, or `null` when nothing is queued —
+  // also the flag saying a delta is still undrawn.
+  #streamFrame = null;
   #pending = null;
   // The current assistant turn's grouping container. One `.answer`
   // wraps everything a single answer produces — streamed text, tool cards, the
@@ -8949,9 +10090,23 @@ var AgUiChat = class extends HTMLElement {
   #thoughts = null;
   #threadId = "";
   // Per-instance suffix for the origin-scoped storage keys (collapsed / theme /
-  // active thread), so two instances on one origin don't clobber each other.
-  // Empty ⇒ the pre-namespacing global keys (back-compat). Resolved on connect.
+  // size), so two instances on one origin don't clobber each other. Empty ⇒ the
+  // pre-namespacing global keys (back-compat). Resolved on connect; the
+  // conversation adds `user-key` on top of it, see #conversationNs.
   #storageNs = "";
+  // The entry this element put in CLAIMED_NAMESPACES, to take back out on
+  // disconnect. `null` when it claimed nothing (no id, no endpoint, or it lost
+  // the claim to an element that mounted first).
+  #claimedNs = null;
+  // The fallback namespace minted when the preferred one was already claimed,
+  // with the preferred value it was minted for — so the element keeps it across
+  // remounts, but re-resolves if the host answers the warning with an `id`.
+  #generatedNs = "";
+  #generatedFor = "";
+  // The `sessionStorage`-backed store, which the element may therefore re-scope
+  // on a principal change. `null` when the host injected a store of its own
+  // kind, whose keying the element does not know and must not guess at.
+  #builtinStore = null;
   // Bumped on every #rehydrate; a replay whose generation is stale (a newer
   // thread switch started while it awaited a slow store) drops its result.
   #rehydrateGeneration = 0;
@@ -8977,6 +10132,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) => {
@@ -9007,7 +10179,7 @@ var AgUiChat = class extends HTMLElement {
     if (this.#runIndex === null) {
       this.#runIndex = new RunIndex(
         url,
-        () => this.#requestHeaders(),
+        () => this.#headersFor(url),
         () => this.#requestCredentials()
       );
     }
@@ -9041,6 +10213,7 @@ var AgUiChat = class extends HTMLElement {
       endpoint,
       headers: this.#requestHeaders(),
       getHeaders: () => this.#requestHeaders(),
+      trustedOrigins: this.trustedOrigins,
       ...this.#credentialsOption(),
       threadId: this.#threadId,
       // The seed the endpoints assume: nothing. The snapshot is the history.
@@ -9049,7 +10222,7 @@ var AgUiChat = class extends HTMLElement {
     const client = new AgUiClient({
       agent,
       handlers: this.#handlers(),
-      getTools: () => this.getTools(),
+      getTools: () => this.#advertiseTools(),
       getContext: () => this.#buildContext(),
       executeTool: (call) => this.#executeTool(call),
       resolveInterrupts: (interrupts) => this.#resolveInterrupts(interrupts),
@@ -9060,11 +10233,12 @@ 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. */
   static get observedAttributes() {
-    return ["title-text", "placement", "credentials", ...CONNECT_TIME_ATTRIBUTES];
+    return ["title-text", "placement", "credentials", "user-key", ...CONNECT_TIME_ATTRIBUTES];
   }
   attributeChangedCallback(name, previous, value) {
     if (name === "credentials") {
@@ -9084,6 +10258,12 @@ var AgUiChat = class extends HTMLElement {
       this.#title.textContent = value ?? this.#strings.title;
       return;
     }
+    if (name === "user-key") {
+      if (this.#connected && (previous ?? "") !== (value ?? "")) {
+        this.#changePrincipal(previous ?? "", value ?? "");
+      }
+      return;
+    }
     if (previous === value || !this.#connected) {
       return;
     }
@@ -9091,7 +10271,18 @@ var AgUiChat = class extends HTMLElement {
       `<ag-ui-chat>: "${name}" was changed after the element connected, and is read only while connecting \u2014 this assignment has no effect. Set it before the element enters the DOM (in the markup, or on the element before appending it); frameworks that patch attributes after mount should bind it at creation. To apply a new value now, remove and re-insert the element.`
     );
   }
-  /** Declare a frontend tool the agent may call. */
+  /**
+   * Declare a frontend tool the agent may call.
+   *
+   * **A handler's thrown message leaves the browser.** When a handler rejects,
+   * its `Error.message` is posted back as that call's tool result — into the
+   * conversation, on to the AG-UI endpoint, persisted server-side, and
+   * forwarded to the model provider on every later round. That is deliberate,
+   * since it is what lets the agent recover from a failure it caused; but it
+   * means an internal hostname, a signed URL or a stack-derived path in a
+   * rethrown error is disclosed to parties the host never chose. Throw the
+   * message you would be content for the model to read, and log the detail.
+   */
   registerTool(tool) {
     this.#toolRegistry.register(tool);
   }
@@ -9239,9 +10430,21 @@ var AgUiChat = class extends HTMLElement {
     });
     this.#confirmAbort = null;
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return answer;
   }
+  /**
+   * The catalog for the round about to start, remembering what it offered.
+   *
+   * Every path to a frontend tool goes through here first — the client asks
+   * for `RunAgentInput.tools` at the top of each round — so this is the one
+   * place that can know what the agent was actually told about.
+   */
+  #advertiseTools() {
+    const tools = this.getTools();
+    this.#advertisedTools = new Set(tools.map((tool) => tool.name));
+    return tools;
+  }
   /** Resolve a tool by name: built-in tools first, then the registry. */
   #resolveTool(name) {
     const builtin = this.#builtinTools().find((t) => t.name === name);
@@ -9260,6 +10463,37 @@ var AgUiChat = class extends HTMLElement {
   set endpoint(value) {
     this.setAttribute("endpoint", value);
   }
+  /**
+   * Who the stored conversation belongs to, from the `user-key` attribute.
+   *
+   * Set it to whatever identifies the signed-in principal — a user id, an
+   * account id, a hash of one. The value joins the storage namespace, so two
+   * principals in the same tab cannot read each other's transcript, and
+   * **changing it purges what the previous one left behind**.
+   *
+   * That purge is the reason this is a live attribute rather than a
+   * connect-time one. `sessionStorage` survives same-tab navigation, so it
+   * survives a logout; and a single-page app signs out through its own router
+   * without remounting anything, so there is no other moment at which the
+   * element could find out. The host naming the new principal — or dropping the
+   * attribute — is the signal.
+   *
+   * Absent means exactly today's behaviour, which is why nothing breaks by
+   * leaving it off: the conversation is scoped to the element and to nobody in
+   * particular, and on a shared workstation it carries into whoever signs in
+   * next in the same tab.
+   *
+   * The first value to arrive is treated as a host naming the user who was
+   * already there, not as a handover: the conversation in progress moves into
+   * the principal's namespace rather than being destroyed, so an element
+   * configured by an async auth handshake keeps what is on screen.
+   */
+  get userKey() {
+    return this.getAttribute("user-key") ?? "";
+  }
+  set userKey(value) {
+    this.setAttribute("user-key", value);
+  }
   /**
    * Cookie policy for **every** request this element makes, as `fetch`'s own
    * `credentials` mode (`"omit"` / `"same-origin"` / `"include"`). Mirrored to
@@ -9304,6 +10538,24 @@ var AgUiChat = class extends HTMLElement {
   #requestHeaders() {
     return { ...this.headers, ...this.getHeaders?.() };
   }
+  /**
+   * The request headers, having first reported the destination if it is foreign.
+   *
+   * Every caller that sends these headers knows its URL, and `#requestHeaders`
+   * does not -- so the check lives here, on the path that has both, rather than
+   * being repeated at each call site with a chance to be forgotten at the next
+   * one added.
+   */
+  #headersFor(url) {
+    const headers = this.#requestHeaders();
+    warnOnCrossOriginCredentials(
+      url,
+      Object.keys(headers),
+      this.trustedOrigins,
+      this.#warnedOrigins
+    );
+    return headers;
+  }
   /** The configured cookie policy as `fetch` spells it; `undefined` when unset. */
   #requestCredentials() {
     return this.credentials ?? void 0;
@@ -9322,8 +10574,8 @@ var AgUiChat = class extends HTMLElement {
     return credentials === void 0 ? {} : { credentials };
   }
   /** The `fetch` init for the element's own plain GETs (catalogs). */
-  #fetchInit() {
-    return withCredentials({ headers: this.#requestHeaders() }, this.#requestCredentials());
+  #fetchInit(url) {
+    return withCredentials({ headers: this.#headersFor(url) }, this.#requestCredentials());
   }
   /**
    * How much detail tool-call cards show, from the `data-tool-display`
@@ -9344,7 +10596,7 @@ var AgUiChat = class extends HTMLElement {
     this.setAttribute("data-tool-display", value);
   }
   connectedCallback() {
-    this.#storageNs = this.id !== "" ? this.id : this.endpoint;
+    this.#storageNs = this.#claimNamespace();
     this.#applySize(this.#readSize());
     requestAnimationFrame(() => this.#syncResizeAnchor());
     this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
@@ -9362,8 +10614,10 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#syncLauncher();
     this.#initSkills();
-    if (this.#storageNs !== "" && this.conversationStore instanceof SessionStorageStore) {
-      this.conversationStore = new SessionStorageStore(this.#storageNs);
+    if (this.conversationStore instanceof SessionStorageStore) {
+      const namespace = this.#conversationNs();
+      this.#builtinStore = namespace === "" ? this.conversationStore : new SessionStorageStore(namespace);
+      this.conversationStore = this.#builtinStore;
     }
     this.#wireThreadStore();
     this.#wireAttachments();
@@ -9427,9 +10681,20 @@ var AgUiChat = class extends HTMLElement {
    */
   disconnectedCallback() {
     this.#connected = false;
+    if (this.#claimedNs !== null) {
+      CLAIMED_NAMESPACES.delete(this.#claimedNs);
+      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.
@@ -9496,7 +10761,7 @@ var AgUiChat = class extends HTMLElement {
     }
     return (file, onProgress, signal) => uploadAttachment(file, {
       url,
-      headers: this.#requestHeaders(),
+      headers: this.#headersFor(url),
       ...this.#credentialsOption(),
       onProgress,
       signal
@@ -9529,7 +10794,7 @@ var AgUiChat = class extends HTMLElement {
     }
     return (audio) => transcribeAudio(audio, {
       url,
-      headers: this.#requestHeaders(),
+      headers: this.#headersFor(url),
       ...this.#credentialsOption()
     });
   }
@@ -9540,6 +10805,111 @@ 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 client-side upload size cap from `data-attachment-max-bytes`. */
   #attachmentMaxBytes() {
     const attr = this.getAttribute("data-attachment-max-bytes");
@@ -9584,15 +10954,21 @@ var AgUiChat = class extends HTMLElement {
    * delete through that server endpoint (wrapping the current store as the
    * client-only fallback), so the history drawer shows durable, cross-device
    * threads. Without it, the client store's per-tab threads are used.
+   *
+   * `data-threads-cache="false"` drops the local copy of the message bodies —
+   * for the deployment that pointed history at a server precisely so that
+   * transcripts do not sit in the browser. The client-only concerns (the active
+   * thread id, the navigation checkpoint) keep their local store either way.
    */
   #wireThreadStore() {
     const url = this.getAttribute("data-threads-url");
     if (url !== null) {
       this.conversationStore = new RemoteConversationStore(
         url,
-        () => this.#requestHeaders(),
+        () => this.#headersFor(url),
         this.conversationStore,
-        () => this.#requestCredentials()
+        () => this.#requestCredentials(),
+        this.getAttribute("data-threads-cache") !== "false"
       );
     }
   }
@@ -9603,7 +10979,7 @@ var AgUiChat = class extends HTMLElement {
       return;
     }
     try {
-      const response = await fetch(url, this.#fetchInit());
+      const response = await fetch(url, this.#fetchInit(url));
       this.#toolCatalog = parseToolCatalog(await response.json());
     } catch {
     }
@@ -9646,7 +11022,7 @@ var AgUiChat = class extends HTMLElement {
       return;
     }
     try {
-      const response = await fetch(url, this.#fetchInit());
+      const response = await fetch(url, this.#fetchInit(url));
       this.#backendSkills = parseSkills(await response.json());
       this.#recomputeSkills();
     } catch {
@@ -9729,7 +11105,7 @@ var AgUiChat = class extends HTMLElement {
     } else {
       this.removeAttribute("collapsed");
     }
-    sessionStorage.setItem(this.#storageKey(COLLAPSED_KEY), collapsed ? "1" : "0");
+    writeStoredItem(this.#storageKey(COLLAPSED_KEY), collapsed ? "1" : "0");
     this.#setUnread(0);
     this.dispatchEvent(
       new CustomEvent(TOGGLE_EVENT, {
@@ -9761,7 +11137,7 @@ var AgUiChat = class extends HTMLElement {
   toggleTheme() {
     const next = this.getAttribute("theme") === "dark" ? "light" : "dark";
     this.setAttribute("theme", next);
-    sessionStorage.setItem(this.#storageKey(THEME_KEY), next);
+    writeStoredItem(this.#storageKey(THEME_KEY), next);
     this.#syncThemeGlyph();
   }
   /**
@@ -9863,7 +11239,7 @@ var AgUiChat = class extends HTMLElement {
   /** Persist a dragged size per tab, alongside the collapsed/theme preferences. */
   #persistSize(size) {
     const stored = { ...this.#readSize(), ...size };
-    sessionStorage.setItem(this.#storageKey(SIZE_KEY), JSON.stringify(stored));
+    writeStoredItem(this.#storageKey(SIZE_KEY), JSON.stringify(stored));
   }
   /** The persisted size for this instance, or an empty record. */
   #readSize() {
@@ -9878,6 +11254,106 @@ var AgUiChat = class extends HTMLElement {
       return {};
     }
   }
+  /**
+   * Claim this element's storage namespace: its `id`, else its `endpoint`.
+   *
+   * The endpoint fallback exists so a lone widget restores its conversation
+   * across reloads with nothing asked of the page author. It stops working the
+   * moment there are two of them — a docked support panel and an inline page
+   * assistant against one agent mount, neither carrying an `id`, which nothing
+   * requires — because both resolve to the same string and then share a thread
+   * pointer, a drawer index and every message key. Whichever mounts second
+   * adopts the first's active thread and rehydrates its transcript into its own
+   * panel: one conversation's content inside another, on the same page.
+   *
+   * So the namespace is claimed by the first element to mount under it, and a
+   * second is given one of its own plus a warning naming the fix. The first
+   * element keeps the endpoint namespace, which is what leaves the ordinary
+   * single-element case exactly as it was.
+   *
+   * The generated namespace is random rather than derived from mount order.
+   * That costs the second element its history across reloads — the warning says
+   * so, and an `id` fixes it — which is the honest trade against an order-based
+   * name that would silently hand a stored conversation to whichever element
+   * happened to mount second on the next load.
+   */
+  #claimNamespace() {
+    const preferred = this.id !== "" ? this.id : this.endpoint;
+    if (preferred === "") {
+      return "";
+    }
+    if (this.#generatedFor === preferred) {
+      return this.#generatedNs;
+    }
+    if (!CLAIMED_NAMESPACES.has(preferred)) {
+      CLAIMED_NAMESPACES.add(preferred);
+      this.#claimedNs = preferred;
+      return preferred;
+    }
+    this.#generatedFor = preferred;
+    this.#generatedNs = `${preferred}~${randomUUID5()}`;
+    console.warn(
+      `<ag-ui-chat>: another element on this page already stores its conversation under "${preferred}", so this one has been given a throwaway namespace of its own \u2014 the two would otherwise share a thread pointer, a history drawer and every message. Give each <ag-ui-chat> its own id to keep them apart and let this one restore its conversation across reloads.`
+    );
+    return this.#generatedNs;
+  }
+  /**
+   * The conversation store's namespace: this element's, scoped to the principal
+   * {@link userKey} names.
+   *
+   * Only the conversation is principal-scoped. The panel's own collapsed / size
+   * / theme preferences stay on `#storageNs`, because they are this element's
+   * UI state rather than anyone's data — they carry no word of what was said —
+   * and because they are read once while connecting, so re-scoping them under a
+   * live element would rearrange the panel around a user who had only just
+   * signed in.
+   */
+  #conversationNs(key = this.userKey) {
+    return key === "" ? this.#storageNs : `${this.#storageNs}#${key}`;
+  }
+  /**
+   * Move the element's client state from one principal to another.
+   *
+   * The whole reason {@link userKey} is live: `sessionStorage` outlives a
+   * logout, because a logout is a navigation (or, in a single-page app, not
+   * even that) rather than a tab close. Nothing remounts, so the host naming
+   * the new principal is the only signal the element will ever get.
+   */
+  #changePrincipal(previousKey, nextKey) {
+    const previous = this.#conversationNs(previousKey);
+    const next = this.#conversationNs(nextKey);
+    if (previousKey === "") {
+      SessionStorageStore.adopt(previous, next);
+      this.#rescopeStore(next);
+      return;
+    }
+    SessionStorageStore.purge(previous);
+    this.#rescopeStore(next);
+    this.#cancelRun();
+    this.#resetState();
+    this.#setRunning(false);
+    this.#setUnread(0);
+    this.#threadId = this.conversationStore.threadId();
+    void this.#rehydrate();
+    void this.#refreshDrawer();
+  }
+  /**
+   * Rebuild the `sessionStorage` store under `namespace`, re-wrapping it for
+   * `data-threads-url` exactly as connecting did.
+   *
+   * A store of the host's own kind is left alone: a store that holds its data
+   * somewhere the element cannot see has to scope itself. The transcript on
+   * screen is still cleared either way — the host swapped principals, and that
+   * much is the element's to act on.
+   */
+  #rescopeStore(namespace) {
+    if (this.#builtinStore === null) {
+      return;
+    }
+    this.#builtinStore = new SessionStorageStore(namespace);
+    this.conversationStore = this.#builtinStore;
+    this.#wireThreadStore();
+  }
   /** This instance's namespaced form of an origin-scoped storage key. */
   #storageKey(base) {
     return this.#storageNs === "" ? base : `${base}:${this.#storageNs}`;
@@ -9963,7 +11439,18 @@ var AgUiChat = class extends HTMLElement {
   /** Drop the in-memory run + transcript, leaving the thread id untouched. */
   #resetState() {
     this.#client = null;
-    this.#streamingBubble = 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();
@@ -9971,11 +11458,43 @@ var AgUiChat = class extends HTMLElement {
     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) {
@@ -10004,6 +11523,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);
   }
   /**
@@ -10095,7 +11615,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 = {
@@ -10116,8 +11638,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;
     }
@@ -10182,7 +11704,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;
   }
   /**
@@ -10204,8 +11730,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");
@@ -10229,8 +11753,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 {
@@ -10246,13 +11770,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");
@@ -10315,9 +11872,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,
@@ -10363,7 +11922,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,
@@ -10644,6 +12262,7 @@ var AgUiChat = class extends HTMLElement {
         // token must still reach every request — the factory's fetch wrapper
         // re-reads this on each call.
         getHeaders: () => this.#requestHeaders(),
+        trustedOrigins: this.trustedOrigins,
         ...this.#credentialsOption(),
         threadId: this.#threadId,
         initialMessages: this.#initialMessages,
@@ -10652,7 +12271,7 @@ var AgUiChat = class extends HTMLElement {
       this.#client = new AgUiClient({
         agent,
         handlers: this.#handlers(),
-        getTools: () => this.getTools(),
+        getTools: () => this.#advertiseTools(),
         getContext: () => this.#buildContext(),
         executeTool: (call) => this.#executeTool(call),
         resolveInterrupts: (interrupts) => this.#resolveInterrupts(interrupts),
@@ -10674,15 +12293,69 @@ 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.
+   */
+  #attachActions(bubble, options = {}) {
+    attachMessageActions(bubble, {
+      strings: this.#strings,
+      // Read at click time, not captured: a bubble rendered from markdown holds
+      // its text in the DOM, and that is what the user sees and means to copy.
+      text: () => bubble.textContent,
+      // A failed run is copyable -- error text is what people paste into a bug
+      // report -- but not rateable: a rating is a statement about an *answer*,
+      // and mixing "the connection dropped" into that signal makes the host's
+      // feedback data say less than it did before.
+      ...options.rateable === false ? {} : {
+        onFeedback: (rating) => {
+          this.dispatchEvent(
+            new CustomEvent(FEEDBACK_EVENT, {
+              detail: { content: bubble.textContent, rating },
+              bubbles: true,
+              composed: true
+            })
+          );
+        }
+      }
+    });
+    this.#moveRetryTo(messageActionBar(bubble, this.#strings));
+  }
+  /** 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) {
@@ -10691,7 +12364,7 @@ var AgUiChat = class extends HTMLElement {
     const card = this.#cardFor(call);
     this.#toolCards.delete(call.id);
     this.#cardElements.set(call.id, card.element);
-    const tool = this.#resolveTool(call.name);
+    const tool = this.#advertisedTools.has(call.name) ? this.#resolveTool(call.name) : null;
     if (tool === null) {
       if (!this.#serverSettled.has(call.id)) {
         card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
@@ -10704,7 +12377,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") {
@@ -10713,10 +12387,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");
@@ -10778,6 +12454,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(
@@ -10792,10 +12471,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) {
@@ -10803,21 +12492,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();
@@ -10834,7 +12530,7 @@ var AgUiChat = class extends HTMLElement {
       onTextDelta: (buffer) => {
         this.#hidePending();
         this.#thoughts?.collapse();
-        this.#streamInto(buffer);
+        this.#queueStream(buffer);
         this.#streamDeltas += 1;
       },
       onTextEnd: (buffer) => {
@@ -10843,7 +12539,8 @@ var AgUiChat = class extends HTMLElement {
           this.#revealWords(bubble);
         }
         attachCopyButtons(bubble, this.#strings);
-        this.#streamingBubble = null;
+        this.#attachActions(bubble);
+        this.#endStream();
         this.#noteUnread();
       },
       onToolCall: (call) => {
@@ -10855,25 +12552,24 @@ 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) {
-          return;
-        }
-        const removed = compactionRemoved(content);
-        if (removed === null) {
+        this.#drawActivity(messageId, activityType, content);
+      },
+      onCustomEvent: (name, value) => {
+        if (name === INVALIDATE_CUSTOM_NAME) {
+          this.#dispatchInvalidation(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) {
@@ -10884,28 +12580,36 @@ 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.#streamingBubble = null;
+        this.#endStream();
       },
       onError: (message) => {
+        this.#announcedOutcome = true;
+        this.#announce(this.#strings.announceFailed);
         this.#hidePending();
-        this.#revealWords(this.appendMessage(MESSAGE_ROLE.ASSISTANT, `\u26A0\uFE0F ${message}`));
-        this.#streamingBubble = null;
+        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.#streamingBubble = null;
+        this.#endStream();
       },
       onSettled: () => {
+        if (!this.#announcedOutcome) {
+          this.#announce(this.#strings.announceAnswerReady);
+        }
         this.#hidePending();
         this.#setRunning(false);
-        this.#streamingBubble = null;
+        this.#endStream();
         for (const card of this.#toolCards.values()) {
           if (!card.settled) {
             card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
@@ -10936,9 +12640,42 @@ 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
       })
@@ -10953,7 +12690,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
@@ -10977,7 +12714,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() {
@@ -10995,19 +12732,76 @@ 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;
   }
-  #streamInto(buffer) {
+  /**
+   * The bubble the current answer streams into, opening it on first sight.
+   *
+   * Opened the moment a token arrives rather than on the frame that draws it,
+   * so the answer's container replaces the pending dots straight away and the
+   * turn never shows a gap while the first render waits for a frame.
+   */
+  #openStream() {
     if (this.#streamingBubble === null) {
       this.#streamingBubble = this.appendMessage(MESSAGE_ROLE.ASSISTANT, "");
       this.#streamDeltas = 0;
     }
-    this.#streamingBubble.innerHTML = renderMarkdown(buffer, { allowImages: this.allowImages });
-    this.#messages.scrollTop = this.#messages.scrollHeight;
     return this.#streamingBubble;
   }
+  /**
+   * Queue a render of the answer so far, at most one per frame.
+   *
+   * Each `TEXT_MESSAGE_CONTENT` event carries the *whole* accumulated answer,
+   * and drawing it means marked + DOMPurify over the entire document and a
+   * wholesale replacement of the bubble's subtree. Once per token that is
+   * quadratic in the answer's length — a long answer is agent-controlled, so
+   * an ordinary run becomes a progressively stalling tab — and every rebuild
+   * takes any selection or focus inside the bubble with it.
+   *
+   * A frame is the right grain: it is the fastest anything on screen can
+   * change anyway, so a burst of tokens costs one parse and the text still
+   * appears to flow rather than in visible chunks.
+   */
+  #queueStream(buffer) {
+    this.#streamBuffer = buffer;
+    this.#openStream();
+    if (this.#streamFrame !== null) {
+      return;
+    }
+    this.#streamFrame = requestAnimationFrame(() => {
+      this.#streamFrame = null;
+      this.#streamInto(this.#streamBuffer);
+    });
+  }
+  /** Render `buffer` into the streaming bubble now, dropping any queued frame. */
+  #streamInto(buffer) {
+    if (this.#streamFrame !== null) {
+      cancelAnimationFrame(this.#streamFrame);
+      this.#streamFrame = null;
+    }
+    this.#streamBuffer = buffer;
+    const bubble = this.#openStream();
+    bubble.innerHTML = renderMarkdown(buffer, { allowImages: this.allowImages });
+    this.#scroller.follow();
+    return bubble;
+  }
+  /**
+   * Close the current answer's streaming bubble.
+   *
+   * Draws a queued render first. A run that ends without a text end — a
+   * cancel, an error, a round boundary — leaves the last delta sitting in the
+   * queue, and simply dropping the bubble here would strand it: the partial
+   * answer the user stopped mid-sentence would lose its final tokens, or be an
+   * empty bubble above the stopped note.
+   */
+  #endStream() {
+    if (this.#streamFrame !== null) {
+      this.#streamInto(this.#streamBuffer);
+    }
+    this.#streamingBubble = null;
+  }
   /**
    * The card for ``call``, creating and appending it on first sight.
    *
@@ -11038,7 +12832,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.
@@ -11059,9 +12853,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());
@@ -11094,27 +12895,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);
@@ -11122,12 +13016,12 @@ var AgUiChat = class extends HTMLElement {
       return existing;
     }
     const labelled = this.#resolveTool(call.name)?.parameters[X_SUMMARY_KEY];
-    const summary = typeof labelled === "string" ? labelled : this.toolSummaries[call.name] ?? this.#toolCatalog[call.name] ?? prettifyToolName(call.name);
+    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);
     this.#toolCards.set(call.id, card);
     this.#ensureGroup().appendChild(card.element);
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return card;
   }
 };
@@ -11197,7 +13091,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.27.0";
+var VERSION = "0.29.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -11205,12 +13099,19 @@ 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_ROLE,
   PAGE_ACTIONS,
@@ -11219,6 +13120,7 @@ export {
   RunIndex,
   STATE_EVENT,
   SUBMIT_EVENT,
+  SUGGESTIONS_ACTIVITY_TYPE,
   SessionStorageStore,
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
@@ -11230,6 +13132,9 @@ export {
   X_DESTRUCTIVE_KEY,
   X_NAVIGATES_KEY,
   X_SUMMARY_KEY,
+  asQuote,
+  attachMessageActions,
+  attachQuoteOffer,
   chartSpecFrom,
   clickElement,
   createHttpAgent,
@@ -11246,14 +13151,18 @@ export {
   isDestructive,
   isNavigates,
   mergeUiStrings,
+  messageActionBar,
   messageAttachments,
   parseToolCatalog,
   prefersReducedMotion,
   pressButton,
   pressThenClick,
   prettifyToolName,
+  quotableSelection,
+  relativeTime,
   renderChart,
   renderMarkdown,
+  renderSuggestionChips,
   requestApproval,
   requestConfirmation,
   requestQuestion,
@@ -11263,6 +13172,7 @@ export {
   setControlValue,
   setNativeChecked,
   setNativeValue,
+  suggestionPrompts,
   toggleCheckbox,
   toggleControl,
   transcribeAudio,