@artooi/ag-ui-web-component 0.28.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,7 @@ var ICON_FILE_IMAGE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"
 var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><rect class="glyph--solid" x="7.5" y="13.5" width="9" height="4.5" rx="1"/></svg>`;
 var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13.5h7M8.5 17h4.5"/></svg>`;
 var CHART_ACTIVITY_TYPE = "chart";
+var ANNOUNCE_CLEAR_MS = 150;
 
 // src/core/ag_ui_chat.ts
 import { randomUUID as randomUUID5 } from "@ag-ui/client";
@@ -537,6 +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",
@@ -544,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.",
@@ -573,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",
@@ -640,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");
@@ -657,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);
@@ -669,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;
@@ -1399,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) {
@@ -1431,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);
@@ -1532,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");
@@ -1613,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) => {
@@ -1625,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) {
@@ -1637,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();
@@ -2126,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;
@@ -2723,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
     );
   };
@@ -2741,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();
@@ -4936,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
@@ -5506,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,
@@ -5514,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;
@@ -6682,6 +7282,7 @@ var STYLES = `
 
 .confirm-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 }
@@ -6708,6 +7309,99 @@ var STYLES = `
   color: #ffffff;
 }
 
+/* The session waiver. Deliberately the quietest of the three: it is the widest
+   decision on the card, so it should be reachable without being the one the eye
+   lands on when the user means to say yes once. */
+.confirm-btn--always {
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.confirm-btn--always:hover,
+.confirm-btn--always:focus-visible {
+  opacity: 1;
+}
+
+/* Editable arguments on an approval card. A plain field rather than a code
+   editor: it holds the JSON a card already displays, and the only interaction
+   is correcting a value before letting the call run. */
+.approval-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.approval-args {
+  box-sizing: border-box;
+  width: 100%;
+  resize: vertical;
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+  background: var(--_bg);
+  color: var(--_fg);
+}
+
+.approval-args:focus-visible {
+  border-color: var(--_accent);
+  outline: none;
+}
+
+.approval-error {
+  font-size: 0.85em;
+  color: var(--_danger);
+}
+
+/* Message action row. Sits under a finished assistant bubble.
+
+   The wrap is insurance rather than a fix: these buttons are glyph-only, so at
+   every width tested they fit on one line and removing the wrap changes
+   nothing. It is here because the confirmation row one release earlier did
+   overflow when it gained a third button, off the left edge and outside its own
+   card, and the difference between the two rows is only that this one's labels
+   are icons today. */
+.message-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  /* Negative, and that is the point. The answer group is a flex column with its
+     own gap, so a positive margin here pushes the row further from the message
+     it acts on than the next card is below it -- the buttons then read as
+     belonging to whatever follows. Pulling back inside the gap is what makes
+     them the message's own. */
+  margin-top: -6px;
+}
+
+.message-action {
+  border: none;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font: inherit;
+  line-height: 1.2;
+  cursor: pointer;
+  background: transparent;
+  color: var(--_muted);
+  opacity: 0.75;
+}
+
+.message-action:hover,
+.message-action:focus-visible {
+  opacity: 1;
+  background: var(--_border);
+}
+
+.message-action[aria-pressed="true"] {
+  opacity: 1;
+  color: var(--_accent);
+}
+
+.message-action--confirmed {
+  opacity: 1;
+  color: var(--_accent);
+}
+
 /* Approval card \u2014 the server-side-tool gate (approve/deny an interrupt). */
 .approval {
   align-self: stretch;
@@ -6852,6 +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;
@@ -7266,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. */
@@ -7332,6 +8090,7 @@ var ThreadDrawer = class {
   #heading;
   #newButton;
   #list;
+  #formatRelativeTime = null;
   #strings;
   #threads = [];
   #activeId = "";
@@ -7379,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);
@@ -7478,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");
@@ -7627,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");
@@ -7984,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
@@ -8150,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;
@@ -8853,6 +9677,7 @@ function isCredentialsMode(value) {
 var COLLAPSED_KEY = "ag-ui-chat:collapsed";
 var SIZE_KEY = "ag-ui-chat:size";
 var THEME_KEY = "ag-ui-chat:theme";
+var QUOTE_GAP = 6;
 var CLAIMED_NAMESPACES = /* @__PURE__ */ new Set();
 var AgUiChat = class extends HTMLElement {
   /** Agent factory; override to inject a custom or fake agent (tests). */
@@ -8900,6 +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;
   /**
@@ -8923,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
@@ -9068,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. */
@@ -9080,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;
@@ -9198,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) => {
@@ -9282,6 +10233,7 @@ var AgUiChat = class extends HTMLElement {
   /** Load the checkpoint panel with the runs that can actually be continued. */
   async #refreshCheckpoints() {
     const index = this.#runs();
+    this.#checkpoints.setRelativeTimeFormatter(this.formatRelativeTime);
     this.#checkpoints.setRuns(index === null ? [] : await index.continuable());
   }
   /** Attributes the element reacts to after it has been connected. */
@@ -9478,7 +10430,7 @@ var AgUiChat = class extends HTMLElement {
     });
     this.#confirmAbort = null;
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return answer;
   }
   /**
@@ -9734,8 +10686,15 @@ var AgUiChat = class extends HTMLElement {
       this.#claimedNs = null;
     }
     this.#cancelRun();
+    this.#pageQuote?.detach();
+    this.#pageQuote = null;
     this.#attachTray?.dispose();
     this.#voice?.dispose();
+    this.#scroller.dispose();
+    if (this.#announceTimer !== null) {
+      clearTimeout(this.#announceTimer);
+      this.#announceTimer = null;
+    }
   }
   /**
    * Read an opt-in flag attribute the way HTML reads a boolean attribute.
@@ -9846,6 +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");
@@ -10375,6 +11439,17 @@ var AgUiChat = class extends HTMLElement {
   /** Drop the in-memory run + transcript, leaving the thread id untouched. */
   #resetState() {
     this.#client = null;
+    this.#clearTranscript();
+    this.#initialMessages = [];
+  }
+  /**
+   * Wipe the rendered transcript and everything that indexes into it.
+   *
+   * Split from {@link #resetState} because a retry re-renders the transcript
+   * while keeping the *client*: dropping the client there would take the
+   * agent's message list with it, which is the thing being truncated.
+   */
+  #clearTranscript() {
     this.#endStream();
     this.#currentGroup = null;
     this.#thoughts = null;
@@ -10383,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) {
@@ -10416,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);
   }
   /**
@@ -10507,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 = {
@@ -10528,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;
     }
@@ -10594,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;
   }
   /**
@@ -10616,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");
@@ -10641,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 {
@@ -10658,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");
@@ -10727,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,
@@ -10775,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,
@@ -11087,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) {
@@ -11117,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") {
@@ -11126,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");
@@ -11191,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(
@@ -11205,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) {
@@ -11216,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();
@@ -11256,6 +12539,7 @@ var AgUiChat = class extends HTMLElement {
           this.#revealWords(bubble);
         }
         attachCopyButtons(bubble, this.#strings);
+        this.#attachActions(bubble);
         this.#endStream();
         this.#noteUnread();
       },
@@ -11268,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) {
@@ -11297,25 +12580,33 @@ var AgUiChat = class extends HTMLElement {
         this.#showPending();
       },
       onActivityChanged: (messageId, activityType, content) => {
-        if (activityType === CHART_ACTIVITY_TYPE && this.#chartActivity) {
-          this.#drawActivityChart(messageId, content);
-        }
+        this.#drawActivity(messageId, activityType, content);
       },
       onRunEnd: () => {
         this.#hidePending();
         this.#endStream();
       },
       onError: (message) => {
+        this.#announcedOutcome = true;
+        this.#announce(this.#strings.announceFailed);
         this.#hidePending();
-        this.#revealWords(this.appendMessage(MESSAGE_ROLE.ASSISTANT, `\u26A0\uFE0F ${message}`));
+        const bubble = this.appendMessage(MESSAGE_ROLE.ASSISTANT, `\u26A0\uFE0F ${message}`);
+        bubble.classList.add("message--failed");
+        this.#attachActions(bubble, { rateable: false });
+        this.#revealWords(bubble);
         this.#endStream();
       },
       onCancelled: () => {
+        this.#announcedOutcome = true;
+        this.#announce(this.#strings.announceStopped);
         this.#hidePending();
         this.#appendStoppedNote();
         this.#endStream();
       },
       onSettled: () => {
+        if (!this.#announcedOutcome) {
+          this.#announce(this.#strings.announceAnswerReady);
+        }
         this.#hidePending();
         this.#setRunning(false);
         this.#endStream();
@@ -11349,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
       })
@@ -11366,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
@@ -11390,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() {
@@ -11408,7 +12732,7 @@ var AgUiChat = class extends HTMLElement {
       const group = this.#ensureGroup();
       group.insertBefore(this.#thoughts.element, group.firstChild);
       this.#updateEmptyState();
-      this.#messages.scrollTop = this.#messages.scrollHeight;
+      this.#scroller.follow();
     }
     return this.#thoughts;
   }
@@ -11460,7 +12784,7 @@ var AgUiChat = class extends HTMLElement {
     this.#streamBuffer = buffer;
     const bubble = this.#openStream();
     bubble.innerHTML = renderMarkdown(buffer, { allowImages: this.allowImages });
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return bubble;
   }
   /**
@@ -11508,7 +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.
@@ -11529,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());
@@ -11564,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);
@@ -11597,7 +13021,7 @@ var AgUiChat = class extends HTMLElement {
     this.#toolCards.set(call.id, card);
     this.#ensureGroup().appendChild(card.element);
     this.#updateEmptyState();
-    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroller.follow();
     return card;
   }
 };
@@ -11667,7 +13091,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.28.0";
+var VERSION = "0.29.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -11675,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,
@@ -11689,6 +13120,7 @@ export {
   RunIndex,
   STATE_EVENT,
   SUBMIT_EVENT,
+  SUGGESTIONS_ACTIVITY_TYPE,
   SessionStorageStore,
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
@@ -11700,6 +13132,9 @@ export {
   X_DESTRUCTIVE_KEY,
   X_NAVIGATES_KEY,
   X_SUMMARY_KEY,
+  asQuote,
+  attachMessageActions,
+  attachQuoteOffer,
   chartSpecFrom,
   clickElement,
   createHttpAgent,
@@ -11716,14 +13151,18 @@ export {
   isDestructive,
   isNavigates,
   mergeUiStrings,
+  messageActionBar,
   messageAttachments,
   parseToolCatalog,
   prefersReducedMotion,
   pressButton,
   pressThenClick,
   prettifyToolName,
+  quotableSelection,
+  relativeTime,
   renderChart,
   renderMarkdown,
+  renderSuggestionChips,
   requestApproval,
   requestConfirmation,
   requestQuestion,
@@ -11733,6 +13172,7 @@ export {
   setControlValue,
   setNativeChecked,
   setNativeValue,
+  suggestionPrompts,
   toggleCheckbox,
   toggleControl,
   transcribeAudio,