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

package/dist/index.js

@@ -48,6 +48,9 @@ var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><
 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";
 
+// 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;
 function fillTemplate(template, values) {
@@ -441,8 +444,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;
@@ -555,6 +559,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",
@@ -4596,23 +4601,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 +4688,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 +4722,10 @@ function createResizeHandle(options) {
     }
     event.preventDefault();
     options.apply(next);
-    options.commit(next);
+    pending = next;
   });
+  handle.addEventListener("keyup", settle);
+  handle.addEventListener("blur", settle);
   return handle;
 }
 
@@ -7704,6 +7748,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 +7759,8 @@ var VoiceInput = class {
   #recorder = null;
   #stream = null;
   #chunks = [];
+  #capTimer = null;
+  #hitCap = false;
   #disposed = false;
   constructor(options) {
     this.#transcribe = options.transcribe;
@@ -7753,6 +7800,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 +7810,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 +7835,7 @@ var VoiceInput = class {
    */
   dispose() {
     this.#disposed = true;
+    this.#clearCap();
     if (this.#recorder !== null && this.#recorder.state !== "inactive") {
       this.#recorder.stop();
     }
@@ -7791,6 +7852,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);
       }
@@ -8029,6 +8096,7 @@ var AgUiClient = class {
   #buildSubscriber(pending, runState) {
     const h = this.#handlers;
     const closed = this.#closedMessageIds;
+    const cancelled = () => this.#cancelled;
     const pendingDeltas = /* @__PURE__ */ new Set();
     return {
       onRunInitialized() {
@@ -8103,6 +8171,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();
       },
@@ -8115,6 +8193,9 @@ var AgUiClient = class {
       onRunErrorEvent({ event }) {
         runState.terminal = true;
         runState.errored = true;
+        if (cancelled()) {
+          return;
+        }
         h.onError(event.message);
       },
       onRunFinalized() {
@@ -8125,7 +8206,10 @@ var AgUiClient = class {
   }
 };
 function isAbortError(error) {
-  return error instanceof Error && error.name === "AbortError";
+  if (!(error instanceof Error)) {
+    return false;
+  }
+  return error.name === "AbortError" || error instanceof TypeError && /abort/i.test(error.message);
 }
 
 // src/core/attachment.ts
@@ -8152,23 +8236,77 @@ 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);
     }
   }
-  threadId() {
-    const key = this.#key(THREAD_SUFFIX);
-    const existing = sessionStorage.getItem(key);
-    if (existing !== null) {
-      return existing;
+  /**
+   * 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() {
+    return sessionStorage.getItem(this.#key(THREAD_SUFFIX)) ?? this.newThread();
+  }
+  newThread() {
     const id = randomUUID3();
-    sessionStorage.setItem(key, 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) {
@@ -8178,7 +8316,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);
   }
@@ -8191,7 +8329,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));
@@ -8207,7 +8345,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();
@@ -8251,40 +8389,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);
@@ -8298,8 +8408,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) {
@@ -8332,15 +8456,39 @@ function truncate(text3, limit) {
 import { HttpAgent } from "@ag-ui/client";
 
 // src/core/utils.ts
+import { randomUUID as randomUUID4 } from "@ag-ui/client";
 function withCredentials(init, credentials) {
   return credentials === void 0 ? init : { ...init, credentials };
 }
+function mintThread(store) {
+  if (store.newThread !== void 0) {
+    return store.newThread();
+  }
+  const id = randomUUID4();
+  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"
@@ -8349,6 +8497,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));
       }
@@ -8371,13 +8523,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();
@@ -8385,12 +8558,20 @@ var RemoteConversationStore = class {
   setActiveThread(threadId) {
     this.#local.setActiveThread(threadId);
   }
+  /**
+   * Delegated to the local store, which owns the active id — and deliberately
+   * silent on the wire: the server learns of a thread when its first message is
+   * persisted, so an abandoned new chat costs no round-trip and leaves no row.
+   */
+  newThread() {
+    return mintThread(this.#local);
+  }
   /** Delegated, so wrapping a store does not lose what it knows about its own ids. */
   isUnsent(threadId) {
     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);
@@ -8655,6 +8836,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",
@@ -8671,6 +8853,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 CLAIMED_NAMESPACES = /* @__PURE__ */ new Set();
 var AgUiChat = class extends HTMLElement {
   /** Agent factory; override to inject a custom or fake agent (tests). */
   agentFactory = createHttpAgent;
@@ -8694,6 +8877,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
@@ -8829,13 +9028,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();
@@ -8913,6 +9136,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
@@ -8927,9 +9156,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;
@@ -8985,7 +9228,7 @@ var AgUiChat = class extends HTMLElement {
     if (this.#runIndex === null) {
       this.#runIndex = new RunIndex(
         url,
-        () => this.#requestHeaders(),
+        () => this.#headersFor(url),
         () => this.#requestCredentials()
       );
     }
@@ -9019,6 +9262,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.
@@ -9027,7 +9271,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),
@@ -9042,7 +9286,7 @@ var AgUiChat = class extends HTMLElement {
   }
   /** 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") {
@@ -9062,6 +9306,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;
     }
@@ -9069,7 +9319,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);
   }
@@ -9220,6 +9481,18 @@ var AgUiChat = class extends HTMLElement {
     this.#messages.scrollTop = this.#messages.scrollHeight;
     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);
@@ -9238,6 +9511,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
@@ -9282,6 +9586,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;
@@ -9300,8 +9622,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`
@@ -9322,7 +9644,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 });
@@ -9340,8 +9662,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();
@@ -9405,6 +9729,10 @@ var AgUiChat = class extends HTMLElement {
    */
   disconnectedCallback() {
     this.#connected = false;
+    if (this.#claimedNs !== null) {
+      CLAIMED_NAMESPACES.delete(this.#claimedNs);
+      this.#claimedNs = null;
+    }
     this.#cancelRun();
     this.#attachTray?.dispose();
     this.#voice?.dispose();
@@ -9474,7 +9802,7 @@ var AgUiChat = class extends HTMLElement {
     }
     return (file, onProgress, signal) => uploadAttachment(file, {
       url,
-      headers: this.#requestHeaders(),
+      headers: this.#headersFor(url),
       ...this.#credentialsOption(),
       onProgress,
       signal
@@ -9507,7 +9835,7 @@ var AgUiChat = class extends HTMLElement {
     }
     return (audio) => transcribeAudio(audio, {
       url,
-      headers: this.#requestHeaders(),
+      headers: this.#headersFor(url),
       ...this.#credentialsOption()
     });
   }
@@ -9562,15 +9890,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"
       );
     }
   }
@@ -9581,7 +9915,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 {
     }
@@ -9624,7 +9958,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 {
@@ -9707,7 +10041,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, {
@@ -9739,7 +10073,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();
   }
   /**
@@ -9841,7 +10175,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() {
@@ -9856,6 +10190,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}`;
@@ -9921,21 +10355,27 @@ var AgUiChat = class extends HTMLElement {
     this.openCheckpoints();
   }
   /**
-   * Start a fresh conversation: forget the persisted history, drop the
-   * in-memory run state, clear the transcript, and mint a new thread id.
+   * Start a fresh conversation: drop the in-memory run state, clear the
+   * transcript, and mint a new thread id.
+   *
+   * The conversation being left is kept, and stays in the history drawer to
+   * return to. Deleting one is the drawer row's own action; a button that
+   * starts something new must not be the button that destroys what was there.
    */
   newChat() {
     this.#cancelRun();
-    this.conversationStore.clear(this.#threadId);
+    if (this.conversationStore.isUnsent?.(this.#threadId) === true) {
+      this.conversationStore.clear(this.#threadId);
+    }
     this.#resetState();
-    this.#threadId = this.conversationStore.threadId();
+    this.#threadId = mintThread(this.conversationStore);
     this.#setRunning(false);
     this.#setUnread(0);
   }
   /** Drop the in-memory run + transcript, leaving the thread id untouched. */
   #resetState() {
     this.#client = null;
-    this.#streamingBubble = null;
+    this.#endStream();
     this.#currentGroup = null;
     this.#thoughts = null;
     this.#hidePending();
@@ -10616,6 +11056,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,
@@ -10624,7 +11065,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),
@@ -10663,7 +11104,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);
@@ -10806,7 +11247,7 @@ var AgUiChat = class extends HTMLElement {
       onTextDelta: (buffer) => {
         this.#hidePending();
         this.#thoughts?.collapse();
-        this.#streamInto(buffer);
+        this.#queueStream(buffer);
         this.#streamDeltas += 1;
       },
       onTextEnd: (buffer) => {
@@ -10815,7 +11256,7 @@ var AgUiChat = class extends HTMLElement {
           this.#revealWords(bubble);
         }
         attachCopyButtons(bubble, this.#strings);
-        this.#streamingBubble = null;
+        this.#endStream();
         this.#noteUnread();
       },
       onToolCall: (call) => {
@@ -10862,22 +11303,22 @@ var AgUiChat = class extends HTMLElement {
       },
       onRunEnd: () => {
         this.#hidePending();
-        this.#streamingBubble = null;
+        this.#endStream();
       },
       onError: (message) => {
         this.#hidePending();
         this.#revealWords(this.appendMessage(MESSAGE_ROLE.ASSISTANT, `\u26A0\uFE0F ${message}`));
-        this.#streamingBubble = null;
+        this.#endStream();
       },
       onCancelled: () => {
         this.#hidePending();
         this.#appendStoppedNote();
-        this.#streamingBubble = null;
+        this.#endStream();
       },
       onSettled: () => {
         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);
@@ -10971,15 +11412,72 @@ var AgUiChat = class extends HTMLElement {
     }
     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.#messages.scrollTop = this.#messages.scrollHeight;
+    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.
    *
@@ -11094,7 +11592,7 @@ 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);
@@ -11169,7 +11667,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.26.1";
+var VERSION = "0.28.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,