@artooi/ag-ui-web-component 0.9.0 → 0.11.0

package/dist/index.js

@@ -443,62 +443,6 @@ function createStateHookTools(hook) {
   return tools;
 }
 
-// src/ui/attachment_chips.ts
-function renderAttachmentChips(refs) {
-  const list = document.createElement("div");
-  list.className = "attachment-chips";
-  for (const ref of refs) {
-    list.appendChild(renderChip(ref));
-  }
-  return list;
-}
-function renderChip(ref) {
-  const chip = document.createElement("div");
-  chip.className = "attachment-chip attachment-chip--ready";
-  const icon = document.createElement("span");
-  icon.className = "attachment-chip-icon";
-  icon.textContent = iconFor(ref.mime);
-  icon.setAttribute("aria-hidden", "true");
-  const name = document.createElement("span");
-  name.className = "attachment-chip-name";
-  name.textContent = ref.name;
-  name.title = ref.name;
-  const size = document.createElement("span");
-  size.className = "attachment-chip-size";
-  size.textContent = formatBytes(ref.size);
-  chip.append(icon, name, size);
-  return chip;
-}
-function iconFor(mime) {
-  if (mime.startsWith("image/")) {
-    return "\u{1F5BC}";
-  }
-  if (mime === "application/pdf") {
-    return "\u{1F4D5}";
-  }
-  if (mime.startsWith("text/")) {
-    return "\u{1F4C4}";
-  }
-  return "\u{1F4CE}";
-}
-function formatBytes(bytes) {
-  if (bytes < 1024) {
-    return `${bytes} B`;
-  }
-  const units = ["KB", "MB", "GB"];
-  let value = bytes / 1024;
-  let unit = 0;
-  while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024;
-    unit += 1;
-  }
-  const rounded = value < 10 ? Math.round(value * 10) / 10 : Math.round(value);
-  return `${rounded} ${units[unit]}`;
-}
-
-// src/ui/attachment_tray.ts
-import { randomUUID } from "@ag-ui/client";
-
 // src/ui/ui_strings.ts
 var DEFAULT_UI_STRINGS = {
   title: "Assistant",
@@ -537,6 +481,14 @@ var DEFAULT_UI_STRINGS = {
   confirmRun: "Run \u201C{tool}\u201D?",
   confirm: "Confirm",
   cancel: "Cancel",
+  approveAction: "Approve action",
+  approvalPrompt: "Approve this action?",
+  approve: "Approve",
+  deny: "Deny",
+  askUserAction: "Question",
+  otherOption: "Other\u2026",
+  answerPlaceholder: "Type your answer\u2026",
+  submit: "Submit",
   chats: "Chats",
   noConversations: "No conversations yet.",
   rename: "Rename",
@@ -568,7 +520,120 @@ function mergeUiStrings(overrides) {
   return merged;
 }
 
+// src/ui/approval_card.ts
+function actionButton(modifier, label) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `approval-btn approval-btn--${modifier}`;
+  button.setAttribute("part", `approval-button approval-${modifier}`);
+  button.textContent = label;
+  return button;
+}
+function requestApproval(host, request, options = {}) {
+  const strings = options.strings ?? DEFAULT_UI_STRINGS;
+  return new Promise((resolve) => {
+    const card = document.createElement("div");
+    card.className = "approval";
+    card.setAttribute("part", "approval");
+    if (request.toolName !== void 0) {
+      card.setAttribute("data-tool-name", request.toolName);
+    }
+    card.setAttribute("role", "group");
+    card.setAttribute("aria-label", strings.approveAction);
+    const body = document.createElement("div");
+    body.className = "approval-body";
+    body.setAttribute("part", "approval-body");
+    body.textContent = request.message ?? strings.approvalPrompt;
+    const actions = document.createElement("div");
+    actions.className = "approval-actions";
+    actions.setAttribute("part", "approval-actions");
+    const deny = actionButton("deny", strings.deny);
+    const approve = actionButton("approve", strings.approve);
+    let settled = false;
+    const close = (approved) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      deny.disabled = true;
+      approve.disabled = true;
+      card.setAttribute("data-resolved", approved ? "approved" : "denied");
+      resolve(approved);
+    };
+    deny.addEventListener("click", () => close(false));
+    approve.addEventListener("click", () => close(true));
+    options.signal?.addEventListener("abort", () => close(false), { once: true });
+    actions.append(deny, approve);
+    card.append(body, actions);
+    host.appendChild(card);
+    if (options.signal?.aborted === true) {
+      close(false);
+      return;
+    }
+    approve.focus();
+  });
+}
+
+// src/ui/attachment_chips.ts
+function renderAttachmentChips(refs) {
+  const list = document.createElement("div");
+  list.className = "attachment-chips";
+  list.setAttribute("part", "attachment-chips");
+  for (const ref of refs) {
+    list.appendChild(renderChip(ref));
+  }
+  return list;
+}
+function renderChip(ref) {
+  const chip = document.createElement("div");
+  chip.className = "attachment-chip attachment-chip--ready";
+  chip.setAttribute("part", "attachment-chip");
+  const icon = document.createElement("span");
+  icon.className = "attachment-chip-icon";
+  icon.setAttribute("part", "attachment-chip-icon");
+  icon.textContent = iconFor(ref.mime);
+  icon.setAttribute("aria-hidden", "true");
+  const name = document.createElement("span");
+  name.className = "attachment-chip-name";
+  name.setAttribute("part", "attachment-chip-name");
+  name.textContent = ref.name;
+  name.title = ref.name;
+  const size = document.createElement("span");
+  size.className = "attachment-chip-size";
+  size.setAttribute("part", "attachment-chip-size");
+  size.textContent = formatBytes(ref.size);
+  chip.append(icon, name, size);
+  return chip;
+}
+function iconFor(mime) {
+  if (mime.startsWith("image/")) {
+    return "\u{1F5BC}";
+  }
+  if (mime === "application/pdf") {
+    return "\u{1F4D5}";
+  }
+  if (mime.startsWith("text/")) {
+    return "\u{1F4C4}";
+  }
+  return "\u{1F4CE}";
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const rounded = value < 10 ? Math.round(value * 10) / 10 : Math.round(value);
+  return `${rounded} ${units[unit]}`;
+}
+
 // src/ui/attachment_tray.ts
+import { randomUUID } from "@ag-ui/client";
 var AttachmentTray = class {
   /** The tray root; append above the input row. Hidden while empty. */
   element;
@@ -591,7 +656,8 @@ var AttachmentTray = class {
       status: ATTACHMENT_STATUS.UPLOADING,
       progress: 0,
       ref: null,
-      error: ""
+      error: "",
+      controller: null
     };
     this.#items.push(item);
     const rejection = this.#reject(file);
@@ -629,11 +695,24 @@ var AttachmentTray = class {
     this.#items = this.#items.filter((item) => item.status === ATTACHMENT_STATUS.UPLOADING);
     this.#render();
   }
-  /** Drop every chip (a reset / new-chat). */
+  /** Drop every chip (a reset / new-chat), aborting any in-flight upload. */
   clear() {
+    for (const item of this.#items) {
+      item.controller?.abort();
+    }
     this.#items = [];
     this.#render();
   }
+  /**
+   * Abort every in-flight upload without touching the rendered chips — the
+   * teardown path when the host element is removed mid-upload, so a cancelled
+   * transfer doesn't orphan a server-side file.
+   */
+  dispose() {
+    for (const item of this.#items) {
+      item.controller?.abort();
+    }
+  }
   /** The size/type rejection reason for a file, or `null` when accepted. */
   #reject(file) {
     if (this.#config.maxBytes > 0 && file.size > this.#config.maxBytes) {
@@ -645,25 +724,41 @@ var AttachmentTray = class {
     return null;
   }
   #upload(item) {
+    const rejection = this.#reject(item.file);
+    if (rejection !== null) {
+      item.status = ATTACHMENT_STATUS.ERROR;
+      item.error = rejection;
+      this.#render();
+      this.#config.onChange?.();
+      return;
+    }
     item.status = ATTACHMENT_STATUS.UPLOADING;
     item.progress = 0;
     item.error = "";
+    const controller = new AbortController();
+    item.controller = controller;
     this.#render();
-    this.#config.upload(item.file, (fraction) => {
-      item.progress = fraction;
-      this.#render();
-    }).then((ref) => {
+    this.#config.upload(
+      item.file,
+      (fraction) => {
+        item.progress = fraction;
+        this.#render();
+      },
+      controller.signal
+    ).then((ref) => {
       item.status = ATTACHMENT_STATUS.READY;
       item.ref = ref;
     }).catch((error) => {
       item.status = ATTACHMENT_STATUS.ERROR;
       item.error = error instanceof Error ? error.message : this.#strings.uploadFailed;
     }).finally(() => {
+      item.controller = null;
       this.#render();
       this.#config.onChange?.();
     });
   }
   #remove(item) {
+    item.controller?.abort();
     this.#items = this.#items.filter((other) => other !== item);
     this.#render();
     this.#config.onChange?.();
@@ -678,23 +773,29 @@ var AttachmentTray = class {
   #renderChip(item) {
     const chip = document.createElement("div");
     chip.className = `attachment-chip attachment-chip--${item.status}`;
+    chip.setAttribute("part", "attachment-chip");
     const icon = document.createElement("span");
     icon.className = "attachment-chip-icon";
+    icon.setAttribute("part", "attachment-chip-icon");
     icon.textContent = iconFor(item.file.type);
     icon.setAttribute("aria-hidden", "true");
     const name = document.createElement("span");
     name.className = "attachment-chip-name";
+    name.setAttribute("part", "attachment-chip-name");
     name.textContent = item.file.name;
     name.title = item.file.name;
     const meta = document.createElement("span");
     meta.className = "attachment-chip-size";
+    meta.setAttribute("part", "attachment-chip-size");
     meta.textContent = item.status === ATTACHMENT_STATUS.ERROR ? item.error : formatBytes(item.file.size);
     chip.append(icon, name, meta);
     if (item.status === ATTACHMENT_STATUS.UPLOADING) {
       const bar = document.createElement("div");
       bar.className = "attachment-chip-bar";
+      bar.setAttribute("part", "attachment-chip-bar");
       const fill = document.createElement("div");
       fill.className = "attachment-chip-bar-fill";
+      fill.setAttribute("part", "attachment-chip-bar-fill");
       fill.style.width = `${Math.round(item.progress * 100)}%`;
       bar.appendChild(fill);
       chip.appendChild(bar);
@@ -703,6 +804,7 @@ var AttachmentTray = class {
       const retry = document.createElement("button");
       retry.type = "button";
       retry.className = "attachment-chip-retry";
+      retry.setAttribute("part", "attachment-chip-retry");
       retry.title = this.#strings.retry;
       retry.setAttribute("aria-label", this.#strings.retryUpload);
       retry.textContent = "\u21BB";
@@ -712,6 +814,7 @@ var AttachmentTray = class {
     const remove = document.createElement("button");
     remove.type = "button";
     remove.className = "attachment-chip-remove";
+    remove.setAttribute("part", "attachment-chip-remove");
     remove.title = this.#strings.remove;
     remove.setAttribute("aria-label", this.#strings.removeAttachment);
     remove.textContent = "\u2715";
@@ -739,7 +842,7 @@ function accepts(accept, file) {
 }
 
 // src/ui/confirmation_card.ts
-function actionButton(modifier, label) {
+function actionButton2(modifier, label) {
   const button = document.createElement("button");
   button.type = "button";
   button.className = `confirm-btn confirm-btn--${modifier}`;
@@ -767,8 +870,8 @@ function requestConfirmation(host, request, options = {}) {
     const actions = document.createElement("div");
     actions.className = "confirm-actions";
     actions.setAttribute("part", "confirm-actions");
-    const cancel = actionButton("cancel", strings.cancel);
-    const confirm = actionButton("confirm", strings.confirm);
+    const cancel = actionButton2("cancel", strings.cancel);
+    const confirm = actionButton2("confirm", strings.confirm);
     let settled = false;
     const close = (accepted) => {
       if (settled) {
@@ -803,6 +906,149 @@ function prettifyToolName(name) {
   return spaced.charAt(0).toUpperCase() + spaced.slice(1);
 }
 
+// src/ui/question_card.ts
+function answerInput(placeholder) {
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "question-input";
+  input.setAttribute("part", "question-input");
+  input.placeholder = placeholder;
+  return input;
+}
+function requestQuestion(host, request, options = {}) {
+  const strings = options.strings ?? DEFAULT_UI_STRINGS;
+  const choices = request.options ?? [];
+  const hasChoices = choices.length > 0;
+  const allowsText = !hasChoices || request.allowCustom === true;
+  return new Promise((resolve) => {
+    const card = document.createElement("div");
+    card.className = "question";
+    card.setAttribute("part", "question");
+    card.setAttribute("role", "group");
+    card.setAttribute("aria-label", strings.askUserAction);
+    const body = document.createElement("div");
+    body.className = "question-body";
+    body.setAttribute("part", "question-body");
+    body.textContent = request.question;
+    const form = document.createElement("div");
+    form.className = "question-options";
+    form.setAttribute("part", "question-options");
+    const group = `q-${choices.length}-${request.question.length}`;
+    const radios = [];
+    for (const choice of choices) {
+      const label = document.createElement("label");
+      label.className = "question-choice";
+      label.setAttribute("part", "question-choice");
+      const radio = document.createElement("input");
+      radio.type = "radio";
+      radio.name = group;
+      radio.value = choice;
+      radio.setAttribute("part", "question-radio");
+      const text2 = document.createElement("span");
+      text2.setAttribute("part", "question-choice-text");
+      text2.textContent = choice;
+      label.append(radio, text2);
+      form.appendChild(label);
+      radios.push(radio);
+    }
+    let otherRadio = null;
+    let input = null;
+    if (allowsText) {
+      input = answerInput(strings.answerPlaceholder);
+      if (hasChoices) {
+        const label = document.createElement("label");
+        label.className = "question-choice";
+        label.setAttribute("part", "question-choice");
+        otherRadio = document.createElement("input");
+        otherRadio.type = "radio";
+        otherRadio.name = group;
+        otherRadio.value = "";
+        otherRadio.setAttribute("part", "question-radio");
+        const text2 = document.createElement("span");
+        text2.setAttribute("part", "question-choice-text");
+        text2.textContent = strings.otherOption;
+        label.append(otherRadio, text2);
+        form.appendChild(label);
+        input.disabled = true;
+      }
+      form.appendChild(input);
+    }
+    const actions = document.createElement("div");
+    actions.className = "question-actions";
+    actions.setAttribute("part", "question-actions");
+    const submit = document.createElement("button");
+    submit.type = "button";
+    submit.className = "question-btn";
+    submit.setAttribute("part", "question-button");
+    submit.textContent = strings.submit;
+    actions.appendChild(submit);
+    let settled = false;
+    const answerFor = () => {
+      const picked = radios.find((r) => r.checked);
+      if (picked !== void 0) {
+        return picked.value;
+      }
+      if (input !== null && (otherRadio === null || otherRadio.checked)) {
+        const typed = input.value.trim();
+        return typed === "" ? null : typed;
+      }
+      return null;
+    };
+    const refresh = () => {
+      if (input !== null && otherRadio !== null) {
+        input.disabled = !otherRadio.checked;
+      }
+      submit.disabled = answerFor() === null;
+    };
+    const close = (answer) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      submit.disabled = true;
+      for (const radio of radios) {
+        radio.disabled = true;
+      }
+      if (otherRadio !== null) {
+        otherRadio.disabled = true;
+      }
+      if (input !== null) {
+        input.disabled = true;
+      }
+      card.setAttribute("data-resolved", answer === "" ? "cancelled" : "answered");
+      resolve(answer);
+    };
+    for (const radio of [...radios, ...otherRadio !== null ? [otherRadio] : []]) {
+      radio.addEventListener("change", refresh);
+    }
+    input?.addEventListener("input", refresh);
+    input?.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const answer = answerFor();
+        if (answer !== null) {
+          close(answer);
+        }
+      }
+    });
+    submit.addEventListener("click", () => {
+      const answer = answerFor();
+      if (answer !== null) {
+        close(answer);
+      }
+    });
+    options.signal?.addEventListener("abort", () => close(""), { once: true });
+    card.append(body, form, actions);
+    host.appendChild(card);
+    if (options.signal?.aborted === true) {
+      close("");
+      return;
+    }
+    refresh();
+    (hasChoices ? radios[0] : input)?.focus();
+  });
+}
+
 // node_modules/.pnpm/dompurify@3.4.7/node_modules/dompurify/dist/purify.es.mjs
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -2003,7 +2249,7 @@ function createDOMPurify() {
 }
 var purify = createDOMPurify();
 
-// node_modules/.pnpm/marked@18.0.4/node_modules/marked/lib/marked.esm.js
+// node_modules/.pnpm/marked@18.0.5/node_modules/marked/lib/marked.esm.js
 function M() {
   return { async: false, breaks: false, extensions: null, gfm: true, hooks: null, pedantic: false, renderer: null, silent: false, tokenizer: null, walkTokens: null };
 }
@@ -2047,15 +2293,15 @@ var F = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table|
 var $e = /^[^\n]+/;
 var U = /(?!\s*\])(?:\\[\s\S]|[^\[\]\\])+/;
 var Le = d(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label", U).replace("title", /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex();
-var _e = d(/^(bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g, j).getRegex();
+var _e = d(/^(bull)([ \t][^\n]*?)?(?:\n|$)/).replace(/bull/g, j).getRegex();
 var H = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul";
 var K = /<!--(?:-?>|[\s\S]*?(?:-->|$))/;
 var ze = d("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$))", "i").replace("comment", K).replace("tag", H).replace("attribute", / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex();
-var le = d(F).replace("hr", B).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", H).getRegex();
+var le = d(F).replace("hr", B).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]+[^ \\t\\n]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", H).getRegex();
 var Me = d(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph", le).getRegex();
 var W = { blockquote: Me, code: we, def: Le, fences: ye, heading: Pe, hr: B, html: ze, lheading: ae, list: _e, newline: Oe, paragraph: le, table: _, text: $e };
 var se = d("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr", B).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("blockquote", " {0,3}>").replace("code", "(?: {4}| {0,3}	)[^\\n]").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", H).getRegex();
-var Ee = { ...W, lheading: Se, table: se, paragraph: d(F).replace("hr", B).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", se).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", H).getRegex() };
+var Ee = { ...W, lheading: Se, table: se, paragraph: d(F).replace("hr", B).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", se).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)])[ \\t]+[^ \\t\\n]").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", H).getRegex() };
 var Ie = { ...W, html: d(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:"[^"]*"|'[^']*'|\\s[^'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))`).replace("comment", K).replace(/tag/g, "(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(), def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/, heading: /^(#{1,6})(.*)(?:\n+|$)/, fences: _, lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/, paragraph: d(F).replace("hr", B).replace("heading", ` *#{1,6} *[^
 ]`).replace("lheading", ae).replace("|table", "").replace("blockquote", " {0,3}>").replace("|fences", "").replace("|list", "").replace("|html", "").replace("|tag", "").getRegex() };
 var Ae = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/;
@@ -3346,9 +3592,11 @@ var SkillsMenu = class {
     this.#onPick = onPick;
     this.chips = document.createElement("div");
     this.chips.className = "skill-chips";
+    this.chips.setAttribute("part", "skill-chips");
     this.chips.hidden = true;
     this.palette = document.createElement("div");
     this.palette.className = "skill-palette";
+    this.palette.setAttribute("part", "skill-palette");
     this.palette.setAttribute("role", "listbox");
     this.palette.hidden = true;
   }
@@ -3443,6 +3691,7 @@ var SkillsMenu = class {
       const button = document.createElement("button");
       button.type = "button";
       button.className = "skill-chip";
+      button.setAttribute("part", "skill-chip");
       button.textContent = skill.title;
       button.addEventListener("click", () => this.#pick(skill));
       this.chips.appendChild(button);
@@ -3454,15 +3703,18 @@ var SkillsMenu = class {
       const item = document.createElement("button");
       item.type = "button";
       item.className = "skill-item";
+      item.setAttribute("part", "skill-item");
       item.setAttribute("role", "option");
       item.setAttribute("aria-selected", index === this.#activeIndex ? "true" : "false");
       const title = document.createElement("span");
       title.className = "skill-item-title";
+      title.setAttribute("part", "skill-item-title");
       title.textContent = skill.title;
       item.appendChild(title);
       if (skill.description !== void 0) {
         const desc = document.createElement("span");
         desc.className = "skill-item-desc";
+        desc.setAttribute("part", "skill-item-desc");
         desc.textContent = skill.description;
         item.appendChild(desc);
       }
@@ -3617,7 +3869,7 @@ var STYLES = `
   --ag-ui-radius: 0;
 }
 
-/* Page (PAGE-1): full-bleed background with a centred reading column. Unlike
+/* Page: full-bleed background with a centred reading column. Unlike
    "full" (edge-to-edge, left-aligned messages) the content sits in a column
    capped at --ag-ui-content-max-width. The column is produced by symmetric auto
    padding on the scroll area + composer (no per-row wrapper), so user pills
@@ -3659,7 +3911,7 @@ var STYLES = `
   max-width: 100%;
 }
 
-/* Sidebar (CUST-3): a full-height docked panel that slides open/closed and
+/* Sidebar: a full-height docked panel that slides open/closed and
    collapses to a slim icon rail (not the floating launcher). Docked right by
    default; data-side="left" docks it left. Overlay by default \u2014 set
    --ag-ui-position: static (and place this element in your own layout) for a
@@ -3769,7 +4021,7 @@ var STYLES = `
   white-space: nowrap;
 }
 
-/* Header / launcher icon holder (CUST-2): a slot, with a data-icon-url <img>
+/* Header / launcher icon holder: a slot, with a data-icon-url <img>
    fallback, sized via --ag-ui-icon-size. */
 .icon-holder {
   display: inline-flex;
@@ -3843,7 +4095,7 @@ var STYLES = `
   gap: var(--ag-ui-space);
 }
 
-/* Empty-state region (CUST-1 slot): centred while it's the only thing in the
+/* Empty-state region (slot): centred while it's the only thing in the
    list, hidden as soon as a message, card, or pending indicator renders. */
 .empty {
   margin: auto;
@@ -3855,7 +4107,7 @@ var STYLES = `
   display: none;
 }
 
-/* \u2500\u2500 Answer group / well (WELL-1) \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 Answer group / well \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
    One .answer per assistant turn wraps the streamed text, its tool cards,
    and the pending indicator so a whole answer reads (and can be boxed) as one
    unit. A flex column on the message-list gap, stretched to the list width so
@@ -4024,7 +4276,7 @@ var STYLES = `
   }
 }
 
-/* \u2500\u2500 Thoughts region (THINK-1) \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 Thoughts region \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
    A muted, collapsible chain-of-thought at the top of the answer group: open
    while the model reasons, folded once the answer text starts. */
 .thoughts {
@@ -4117,7 +4369,7 @@ var STYLES = `
   word-break: break-word;
 }
 
-/* Leading status icon (CARD-1). Empty in the DOM \u2014 the glyph/spinner is drawn
+/* Leading status icon. Empty in the DOM \u2014 the glyph/spinner is drawn
    here from the card's data-status, so it stays themeable. */
 .tool-call-icon {
   flex: none;
@@ -4165,7 +4417,7 @@ var STYLES = `
   }
 }
 
-/* Inline display mode (CARD-1): the lightest card \u2014 drop the box chrome so the
+/* Inline display mode: the lightest card \u2014 drop the box chrome so the
    status row reads as one line of the answer; the result toggle still expands
    below it. */
 .tool-call[data-display="inline"] {
@@ -4295,7 +4547,7 @@ var STYLES = `
   display: none;
 }
 
-/* The \u{1F3A4} mic button (VOICE-1); shown only once #wireVoice mounts it. */
+/* The \u{1F3A4} mic button; shown only once #wireVoice mounts it. */
 .voice-slot {
   display: contents;
 }
@@ -4499,6 +4751,127 @@ var STYLES = `
   color: #ffffff;
 }
 
+/* Approval card \u2014 the server-side-tool gate (approve/deny an interrupt). */
+.approval {
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--ag-ui-bg);
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 10px;
+}
+
+.approval[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--ag-ui-border);
+}
+
+.approval-body {
+  font-weight: 600;
+}
+
+.approval-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.approval-btn {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--ag-ui-bg);
+  color: var(--ag-ui-fg);
+}
+
+.approval-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.approval-btn--approve {
+  border-color: var(--ag-ui-accent);
+  background: var(--ag-ui-accent);
+  color: #ffffff;
+}
+
+/* Question card \u2014 the built-in ask_user prompt (radios and/or free text). */
+.question {
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--ag-ui-bg);
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 10px;
+}
+
+.question[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--ag-ui-border);
+}
+
+.question-body {
+  font-weight: 600;
+}
+
+.question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.question-choice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.question-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 10px;
+  font: inherit;
+  color: var(--ag-ui-fg);
+  background: var(--ag-ui-bg);
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 8px;
+}
+
+.question-input:disabled {
+  opacity: 0.6;
+}
+
+.question-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.question-btn {
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--ag-ui-accent);
+  color: #ffffff;
+}
+
+.question-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
 /* Skills \u2014 chips row + the /-command palette, above the input. */
 .skill-chips {
   display: flex;
@@ -4774,6 +5147,7 @@ var ThoughtsBlock = class {
     this.#toggle.setAttribute("aria-expanded", "true");
     this.#label = document.createElement("span");
     this.#label.className = "thoughts-label";
+    this.#label.setAttribute("part", "thoughts-label");
     this.#label.textContent = strings.thinking;
     this.#toggle.append(this.#label);
     this.#body = document.createElement("pre");
@@ -4810,6 +5184,9 @@ var ThoughtsBlock = class {
 
 // src/ui/relative_time.ts
 function relativeTime(timestamp, now = Date.now(), strings = DEFAULT_UI_STRINGS) {
+  if (!Number.isFinite(timestamp)) {
+    return strings.justNow;
+  }
   const seconds = Math.round((now - timestamp) / 1e3);
   if (seconds < 60) {
     return strings.justNow;
@@ -4841,6 +5218,8 @@ var ThreadDrawer = class {
   #strings;
   #threads = [];
   #activeId = "";
+  /** The element focused before the drawer opened, restored on close. */
+  #lastFocused = null;
   constructor(callbacks, strings = DEFAULT_UI_STRINGS) {
     this.#callbacks = callbacks;
     this.#strings = strings;
@@ -4856,7 +5235,9 @@ var ThreadDrawer = class {
     this.#panel.className = "drawer-panel";
     this.#panel.setAttribute("part", "drawer-panel");
     this.#panel.setAttribute("role", "dialog");
+    this.#panel.setAttribute("aria-modal", "true");
     this.#panel.setAttribute("aria-label", strings.chatHistory);
+    this.#panel.addEventListener("keydown", (event) => this.#onPanelKeydown(event));
     const header = document.createElement("div");
     header.className = "drawer-header";
     header.setAttribute("part", "drawer-header");
@@ -4892,13 +5273,55 @@ var ThreadDrawer = class {
     return !this.element.hidden;
   }
   open() {
+    if (this.isOpen()) {
+      return;
+    }
+    this.#lastFocused = this.#activeElement();
     this.element.hidden = false;
+    this.#newButton.focus();
   }
   close() {
+    if (!this.isOpen()) {
+      return;
+    }
     this.element.hidden = true;
+    this.#lastFocused?.focus();
+    this.#lastFocused = null;
   }
   toggle() {
-    this.element.hidden = !this.element.hidden;
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  /** The currently-focused element within the drawer's root (shadow-aware). */
+  #activeElement() {
+    return this.element.getRootNode().activeElement;
+  }
+  /** Escape-to-close and a Tab focus trap while the dialog is open. */
+  #onPanelKeydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusables = Array.from(
+      this.#panel.querySelectorAll("button, input, [tabindex]")
+    ).filter((el) => !el.hidden);
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = this.#activeElement();
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
   }
   /** Render the rows (or the empty state), highlighting the active thread. */
   setThreads(threads, activeId) {
@@ -4933,12 +5356,15 @@ var ThreadDrawer = class {
     select.setAttribute("part", "drawer-row-select");
     const title = document.createElement("span");
     title.className = "drawer-row-title";
+    title.setAttribute("part", "drawer-row-title");
     title.textContent = meta.title;
     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);
     const preview = document.createElement("span");
     preview.className = "drawer-row-preview";
+    preview.setAttribute("part", "drawer-row-preview");
     preview.textContent = meta.preview;
     select.append(title, time, preview);
     select.addEventListener("click", () => {
@@ -4948,6 +5374,7 @@ var ThreadDrawer = class {
     const rename = document.createElement("button");
     rename.type = "button";
     rename.className = "drawer-row-rename";
+    rename.setAttribute("part", "drawer-row-rename");
     rename.title = this.#strings.rename;
     rename.setAttribute("aria-label", this.#strings.renameConversation);
     rename.textContent = "\u270E";
@@ -4955,34 +5382,56 @@ var ThreadDrawer = class {
     const remove = document.createElement("button");
     remove.type = "button";
     remove.className = "drawer-row-delete";
+    remove.setAttribute("part", "drawer-row-delete");
     remove.title = this.#strings.delete;
     remove.setAttribute("aria-label", this.#strings.deleteConversation);
     remove.textContent = "\u{1F5D1}";
     remove.addEventListener("click", () => this.#confirmDelete(row, meta));
     const actions = document.createElement("div");
     actions.className = "drawer-row-actions";
+    actions.setAttribute("part", "drawer-row-actions");
     actions.append(rename, remove);
     row.append(select, actions);
     return row;
   }
-  /** Swap a row for an inline rename input; Enter commits, Escape cancels. */
+  /** Swap a row for an inline rename input; Enter/blur commits, Escape cancels. */
   #startRename(row, meta) {
     const input = document.createElement("input");
     input.type = "text";
     input.className = "drawer-rename-input";
+    input.setAttribute("part", "drawer-rename-input");
     input.value = meta.title;
+    let done = false;
+    const commit = () => {
+      if (done) {
+        return;
+      }
+      done = true;
+      const value = input.value.trim();
+      if (value === "" || value === meta.title) {
+        this.#renderList();
+      } else {
+        this.#callbacks.onRename(meta.threadId, value);
+      }
+    };
+    const cancel = () => {
+      if (done) {
+        return;
+      }
+      done = true;
+      this.#renderList();
+    };
     input.addEventListener("keydown", (event) => {
       if (event.key === "Enter") {
-        const value = input.value.trim();
-        if (value === "") {
-          this.#renderList();
-        } else {
-          this.#callbacks.onRename(meta.threadId, value);
-        }
+        event.preventDefault();
+        commit();
       } else if (event.key === "Escape") {
-        this.#renderList();
+        event.preventDefault();
+        event.stopPropagation();
+        cancel();
       }
     });
+    input.addEventListener("blur", () => commit());
     row.replaceChildren(input);
     input.focus();
     input.select();
@@ -4991,17 +5440,21 @@ var ThreadDrawer = class {
   #confirmDelete(row, meta) {
     const confirm = document.createElement("div");
     confirm.className = "drawer-confirm";
+    confirm.setAttribute("part", "drawer-confirm");
     const label = document.createElement("span");
     label.className = "drawer-confirm-label";
+    label.setAttribute("part", "drawer-confirm-label");
     label.textContent = this.#strings.deletePrompt;
     const yes = document.createElement("button");
     yes.type = "button";
     yes.className = "drawer-confirm-yes";
+    yes.setAttribute("part", "drawer-confirm-yes");
     yes.textContent = this.#strings.delete;
     yes.addEventListener("click", () => this.#callbacks.onDelete(meta.threadId));
     const no = document.createElement("button");
     no.type = "button";
     no.className = "drawer-confirm-no";
+    no.setAttribute("part", "drawer-confirm-no");
     no.textContent = this.#strings.cancel;
     no.addEventListener("click", () => this.#renderList());
     confirm.append(label, yes, no);
@@ -5078,6 +5531,9 @@ var ToolCallCard = class {
    * `inline`), or the args + result together (`compact`).
    */
   settle(status, text2) {
+    if (this.#settled) {
+      return;
+    }
     this.#settled = true;
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];
@@ -5122,6 +5578,7 @@ var VoiceInput = class {
   #recorder = null;
   #stream = null;
   #chunks = [];
+  #disposed = false;
   constructor(options) {
     this.#transcribe = options.transcribe;
     this.#onText = options.onText;
@@ -5171,7 +5628,25 @@ var VoiceInput = class {
   #stop() {
     this.#recorder?.stop();
   }
+  /**
+   * Tear the control down — the teardown path when the host element is removed
+   * mid-recording. Stops any live `MediaRecorder`, releases the mic tracks (so
+   * the browser's recording indicator clears), and suppresses the pending
+   * transcription: a disconnected control must not fire `onText` back into a
+   * detached element.
+   */
+  dispose() {
+    this.#disposed = true;
+    if (this.#recorder !== null && this.#recorder.state !== "inactive") {
+      this.#recorder.stop();
+    }
+    this.#recorder = null;
+    this.#releaseStream();
+  }
   async #finish(mimeType) {
+    if (this.#disposed) {
+      return;
+    }
     this.#releaseStream();
     this.#setState("transcribing");
     const audio = new Blob(this.#chunks, { type: mimeType || "audio/webm" });
@@ -5221,7 +5696,10 @@ var VoiceInput = class {
 };
 
 // src/core/agui_client.ts
-import { randomUUID as randomUUID2 } from "@ag-ui/client";
+import {
+  buildResumeArray,
+  randomUUID as randomUUID2
+} from "@ag-ui/client";
 var ConnectionLostError = class extends Error {
   constructor(message) {
     super(message);
@@ -5234,6 +5712,7 @@ var AgUiClient = class {
   #getTools;
   #getContext;
   #executeTool;
+  #resolveInterrupts;
   #onPersist;
   #connectionLostMessage;
   // Set by cancel(); reset at the top of each #run(). Checked by the loop so
@@ -5245,6 +5724,7 @@ var AgUiClient = class {
     this.#getTools = config.getTools ?? (() => []);
     this.#getContext = config.getContext ?? (() => []);
     this.#executeTool = config.executeTool ?? null;
+    this.#resolveInterrupts = config.resolveInterrupts ?? null;
     this.#onPersist = config.onPersist ?? (() => {
     });
     this.#connectionLostMessage = config.connectionLostMessage ?? "Connection lost";
@@ -5324,16 +5804,22 @@ var AgUiClient = class {
     this.#handlers.onCancelled();
   }
   async #runLoop() {
+    let resume;
     for (let round = 0; round < MAX_TOOL_ROUNDS; round += 1) {
       if (this.#cancelled) {
         return;
       }
       const pending = [];
-      const runState = { terminal: false };
-      await this.#agent.runAgent(
-        { tools: this.#getTools(), context: this.#getContext() },
-        this.#buildSubscriber(pending, runState)
-      );
+      const runState = { terminal: false, errored: false, interrupts: [] };
+      const params = {
+        tools: this.#getTools(),
+        context: this.#getContext()
+      };
+      if (resume !== void 0) {
+        params.resume = resume;
+      }
+      await this.#agent.runAgent(params, this.#buildSubscriber(pending, runState));
+      resume = void 0;
       this.#onPersist(this.#agent.messages);
       if (this.#cancelled) {
         return;
@@ -5341,6 +5827,20 @@ var AgUiClient = class {
       if (!runState.terminal) {
         throw new ConnectionLostError(this.#connectionLostMessage);
       }
+      if (runState.errored) {
+        return;
+      }
+      if (runState.interrupts.length > 0) {
+        if (this.#resolveInterrupts === null) {
+          return;
+        }
+        const responses = await this.#resolveInterrupts(runState.interrupts);
+        if (this.#cancelled) {
+          return;
+        }
+        resume = buildResumeArray(runState.interrupts, responses);
+        continue;
+      }
       if (this.#executeTool === null || pending.length === 0) {
         return;
       }
@@ -5391,7 +5891,7 @@ var AgUiClient = class {
       onToolCallResultEvent({ event }) {
         h.onToolResult(event.toolCallId, event.content);
       },
-      // Reasoning (THINK-1). `@ag-ui/client` already maps the deprecated
+      // Reasoning. `@ag-ui/client` already maps the deprecated
       // THINKING_* events onto these REASONING_* callbacks, so handling the
       // reasoning family alone covers both protocol versions.
       onReasoningStartEvent() {
@@ -5403,8 +5903,15 @@ var AgUiClient = class {
       onReasoningEndEvent() {
         h.onReasoningEnd();
       },
+      onRunFinishedEvent(params) {
+        runState.terminal = true;
+        if (params.outcome === "interrupt") {
+          runState.interrupts = params.interrupts;
+        }
+      },
       onRunErrorEvent({ event }) {
         runState.terminal = true;
+        runState.errored = true;
         h.onError(event.message);
       },
       onRunFinalized() {
@@ -5421,40 +5928,56 @@ function isAbortError(error) {
 // src/core/attachment.ts
 function messageAttachments(message) {
   const refs = message.attachments;
-  return Array.isArray(refs) ? refs : [];
+  return Array.isArray(refs) ? refs.filter(isAttachmentRef) : [];
+}
+function isAttachmentRef(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const ref = value;
+  return typeof ref["id"] === "string" && typeof ref["name"] === "string" && typeof ref["mime"] === "string" && typeof ref["size"] === "number" && (ref["url"] === void 0 || typeof ref["url"] === "string");
 }
 
 // src/core/conversation_store.ts
 import { randomUUID as randomUUID3 } from "@ag-ui/client";
-var THREAD_KEY = "ag-ui-chat:thread";
-var THREADS_KEY = "ag-ui-chat:threads";
-var MESSAGES_PREFIX = "ag-ui-chat:messages:";
-var CHECKPOINT_PREFIX = "ag-ui-chat:checkpoint:";
+var KEY_ROOT = "ag-ui-chat";
+var THREAD_SUFFIX = "thread";
+var THREADS_SUFFIX = "threads";
+var MESSAGES_SUFFIX = "messages:";
+var CHECKPOINT_SUFFIX = "checkpoint:";
 var TITLE_LIMIT = 60;
 var PREVIEW_LIMIT = 100;
 var DEFAULT_TITLE = "New conversation";
 var SessionStorageStore = class {
+  #root;
+  constructor(namespace = "") {
+    this.#root = namespace === "" ? KEY_ROOT : `${KEY_ROOT}@${namespace}`;
+    if (namespace !== "") {
+      this.#migrateLegacyKeys();
+    }
+  }
   threadId() {
-    const existing = sessionStorage.getItem(THREAD_KEY);
+    const key = this.#key(THREAD_SUFFIX);
+    const existing = sessionStorage.getItem(key);
     if (existing !== null) {
       return existing;
     }
     const id = randomUUID3();
-    sessionStorage.setItem(THREAD_KEY, id);
+    sessionStorage.setItem(key, id);
     return id;
   }
   loadMessages(threadId) {
-    return Promise.resolve(this.#readJson(MESSAGES_PREFIX + threadId));
+    return Promise.resolve(this.#readJson(this.#key(MESSAGES_SUFFIX + threadId)));
   }
   saveMessages(threadId, messages) {
-    sessionStorage.setItem(MESSAGES_PREFIX + threadId, JSON.stringify(messages));
+    sessionStorage.setItem(this.#key(MESSAGES_SUFFIX + threadId), JSON.stringify(messages));
     this.#touchThread(threadId, messages);
   }
   loadCheckpoint(threadId) {
-    return this.#readJson(CHECKPOINT_PREFIX + threadId);
+    return this.#readJson(this.#key(CHECKPOINT_SUFFIX + threadId));
   }
   saveCheckpoint(threadId, checkpoint) {
-    const key = CHECKPOINT_PREFIX + threadId;
+    const key = this.#key(CHECKPOINT_SUFFIX + threadId);
     if (checkpoint === null) {
       sessionStorage.removeItem(key);
       return;
@@ -5462,11 +5985,11 @@ var SessionStorageStore = class {
     sessionStorage.setItem(key, JSON.stringify(checkpoint));
   }
   clear(threadId) {
-    sessionStorage.removeItem(MESSAGES_PREFIX + threadId);
-    sessionStorage.removeItem(CHECKPOINT_PREFIX + threadId);
+    sessionStorage.removeItem(this.#key(MESSAGES_SUFFIX + threadId));
+    sessionStorage.removeItem(this.#key(CHECKPOINT_SUFFIX + threadId));
     this.#writeThreads(this.#readThreads().filter((thread) => thread.threadId !== threadId));
-    if (sessionStorage.getItem(THREAD_KEY) === threadId) {
-      sessionStorage.removeItem(THREAD_KEY);
+    if (sessionStorage.getItem(this.#key(THREAD_SUFFIX)) === threadId) {
+      sessionStorage.removeItem(this.#key(THREAD_SUFFIX));
     }
   }
   listThreads() {
@@ -5474,7 +5997,7 @@ var SessionStorageStore = class {
     return Promise.resolve(metas);
   }
   setActiveThread(threadId) {
-    sessionStorage.setItem(THREAD_KEY, threadId);
+    sessionStorage.setItem(this.#key(THREAD_SUFFIX), threadId);
   }
   renameThread(threadId, title) {
     const threads = this.#readThreads();
@@ -5510,14 +6033,48 @@ var SessionStorageStore = class {
     this.#writeThreads(threads);
   }
   #readThreads() {
-    return this.#readJson(THREADS_KEY) ?? [];
+    return this.#readJson(this.#key(THREADS_SUFFIX)) ?? [];
   }
   #writeThreads(threads) {
+    const key = this.#key(THREADS_SUFFIX);
     if (threads.length === 0) {
-      sessionStorage.removeItem(THREADS_KEY);
+      sessionStorage.removeItem(key);
       return;
     }
-    sessionStorage.setItem(THREADS_KEY, JSON.stringify(threads));
+    sessionStorage.setItem(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 pre-namespacing (`ag-ui-chat:*`) keys into this instance's
+   * namespace, so an existing conversation isn't orphaned by the upgrade. Only
+   * this store's own keys move (thread pointer, drawer index, per-thread
+   * messages/checkpoints) — the element's `collapsed`/`theme` keys are left
+   * alone. The first namespaced instance to mount adopts the legacy 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) {
@@ -5532,6 +6089,9 @@ var SessionStorageStore = class {
     }
   }
 };
+function isOwnedSuffix(suffix) {
+  return suffix === THREAD_SUFFIX || suffix === THREADS_SUFFIX || suffix.startsWith(MESSAGES_SUFFIX) || suffix.startsWith(CHECKPOINT_SUFFIX);
+}
 function deriveTitle(messages) {
   for (const message of messages) {
     if (message.role === "user") {
@@ -5638,7 +6198,10 @@ var RemoteConversationStore = class {
     if (response === null || !response.ok) {
       return this.#local.loadMessages(threadId);
     }
-    const body = await response.json();
+    const body = await this.#readJson(response);
+    if (body === null) {
+      return this.#local.loadMessages(threadId);
+    }
     return body.messages ?? null;
   }
   async #fetchThreads() {
@@ -5646,14 +6209,28 @@ var RemoteConversationStore = class {
     if (response === null || !response.ok) {
       return null;
     }
-    const body = await response.json();
+    const body = await this.#readJson(response);
+    if (body === null) {
+      return null;
+    }
     return body.threads ?? [];
   }
+  /** Parse a `Response` body as JSON, or `null` when it isn't valid JSON. */
+  async #readJson(response) {
+    try {
+      return await response.json();
+    } catch {
+      return null;
+    }
+  }
   #toMeta(row) {
     return {
       threadId: row.thread_id,
       title: this.#renamed.get(row.thread_id) ?? row.title,
-      updatedAt: row.updated_at === null ? 0 : Date.parse(row.updated_at),
+      // `null` or an unparseable date both become `NaN` (Date.parse's own
+      // signal), which `relativeTime` renders as a neutral label rather than
+      // "~2950w ago" (epoch 0) or "NaNw ago".
+      updatedAt: row.updated_at === null ? Number.NaN : Date.parse(row.updated_at),
       preview: row.preview
     };
   }
@@ -5789,6 +6366,33 @@ var AgUiChat = class extends HTMLElement {
   allowImages = false;
   /** When true, destructive tools execute without a confirmation modal. */
   autoConfirm = false;
+  /**
+   * When true, the built-in `ask_user` frontend tool is offered to the agent:
+   * calling it renders an inline question card (radio choices and/or a free-text
+   * field) and returns the user's answer. Off by default — like the other
+   * built-in tool groups (route / page-action), it is opt-in so it doesn't
+   * change the advertised catalog until a host asks for it.
+   */
+  askUser = false;
+  /**
+   * Optional full replacement for the `ask_user` question UI. When set, calling
+   * `ask_user` invokes this instead of the built-in inline card: the host
+   * renders whatever it likes (a native modal, a framework component, …) and
+   * resolves with the answer. Unset (default) uses the built-in
+   * {@link requestQuestion} card — style that via the `strings` override and the
+   * `question*` CSS `::part()`s. Requires {@link askUser} to be enabled.
+   */
+  askUserRenderer = null;
+  /**
+   * Optional full replacement for the server-side-tool approval UI. When set, an
+   * approval interrupt invokes this instead of the built-in inline approval
+   * card: the host renders whatever it likes and resolves `true` to approve /
+   * `false` to deny. Unset (default) uses the built-in {@link requestApproval}
+   * card — style that via the `strings` override and the `approval*` CSS
+   * `::part()`s. The gate itself is enabled server-side; this only changes how
+   * the decision is collected.
+   */
+  approvalRenderer = null;
   /**
    * Optional per-call confirmation predicate. When set, it is authoritative:
    * given a tool name + args it decides whether *this* call needs confirmation
@@ -5929,7 +6533,7 @@ var AgUiChat = class extends HTMLElement {
   #attachButton;
   #fileInput;
   #attachSlot;
-  /** Optional built-in header theme toggle (THEME-1); shown only with `data-theme-toggle`. */
+  /** Optional built-in header theme toggle; shown only with `data-theme-toggle`. */
   #themeToggle;
   /** The collapsed-sidebar rail (an expand affordance; shown only for `placement="sidebar"`). */
   #rail;
@@ -5957,18 +6561,25 @@ var AgUiChat = class extends HTMLElement {
   // it; ≤1 ⇒ it arrived at once and the word reveal is appropriate.
   #streamDeltas = 0;
   #pending = null;
-  // The current assistant turn's grouping container (WELL-1). One `.answer`
+  // The current assistant turn's grouping container. One `.answer`
   // wraps everything a single answer produces — streamed text, tool cards, the
   // pending indicator — so it can be boxed as one "well" by CSS. Opened on the
   // turn's first run start, closed at settle, so it spans the whole multi-round
   // frontend-tool loop (which is several AG-UI runs), not one run. `null`
   // between turns; user bubbles never enter it.
   #currentGroup = null;
-  // The current turn's streamed-reasoning region (THINK-1), shown at the top of
+  // The current turn's streamed-reasoning region, shown at the top of
   // the answer group while a reasoning model thinks and collapsed once the
   // answer's first text token arrives. `null` outside a reasoning turn.
   #thoughts = null;
   #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.
+  #storageNs = "";
+  // 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;
   #initialMessages = [];
   // Skill catalog by source; merged backend → embed → client (later wins).
   #backendSkills = [];
@@ -6075,9 +6686,73 @@ var AgUiChat = class extends HTMLElement {
     );
     return createPageActionTools(enabled, (target) => this.resolvePageTarget(target));
   }
-  /** All built-in (route + page + page-action) frontend tools. */
+  /** All built-in (route + page + page-action + ask_user) frontend tools. */
   #builtinTools() {
-    return [...this.#routeTools(), ...this.#pageTools(), ...this.#pageActionTools()];
+    return [
+      ...this.#routeTools(),
+      ...this.#pageTools(),
+      ...this.#pageActionTools(),
+      ...this.#askUserTool()
+    ];
+  }
+  /**
+   * The built-in `ask_user` frontend tool, or `[]` when {@link askUser} is off.
+   *
+   * A generic "ask the user a typed question" primitive: the agent calls it, the
+   * client executes it locally via the normal frontend-tool path (rendering a
+   * {@link requestQuestion} card), and the chosen/typed answer flows back as the
+   * tool result — no new protocol, reusing the machinery already in place.
+   */
+  #askUserTool() {
+    if (!this.askUser) {
+      return [];
+    }
+    return [
+      {
+        name: "ask_user",
+        description: "Ask the user a question and wait for their answer. Provide `options` for a multiple-choice prompt; set `allow_custom` to also accept a free-text answer.",
+        parameters: {
+          type: "object",
+          properties: {
+            question: { type: "string", description: "The question to ask the user." },
+            options: {
+              type: "array",
+              items: { type: "string" },
+              description: "Preset choices offered as radio buttons."
+            },
+            allow_custom: {
+              type: "boolean",
+              description: "Allow a free-text answer in addition to any options."
+            }
+          },
+          required: ["question"]
+        },
+        handler: (args) => this.#askUser(args)
+      }
+    ];
+  }
+  /** Render the `ask_user` question card and resolve with the user's answer. */
+  async #askUser(args) {
+    const question = typeof args["question"] === "string" ? args["question"] : "";
+    const request = { question };
+    const rawOptions = args["options"];
+    if (Array.isArray(rawOptions)) {
+      request.options = rawOptions.filter((option) => typeof option === "string");
+    }
+    if (args["allow_custom"] === true) {
+      request.allowCustom = true;
+    }
+    this.#confirmAbort = new AbortController();
+    const signal = this.#confirmAbort.signal;
+    this.#hidePending();
+    const answer = this.askUserRenderer !== null ? await this.askUserRenderer(request, { signal }) : await requestQuestion(this.#ensureGroup(), request, {
+      signal,
+      strings: this.#strings
+    });
+    this.#confirmAbort = null;
+    this.#updateEmptyState();
+    this.#messages.scrollTop = this.#messages.scrollHeight;
+    return answer;
   }
   /** Resolve a tool by name: built-in tools first, then the registry. */
   #resolveTool(name) {
@@ -6112,27 +6787,44 @@ var AgUiChat = class extends HTMLElement {
     this.setAttribute("data-tool-display", value);
   }
   connectedCallback() {
+    this.#storageNs = this.id !== "" ? this.id : this.endpoint;
     this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
     if (this.getAttribute("data-theme-toggle") !== null) {
-      const saved = sessionStorage.getItem(THEME_KEY);
+      const saved = this.#readScopedItem(THEME_KEY);
       if (saved !== null) {
         this.setAttribute("theme", saved);
       }
     }
     this.#render();
     this.#drawer.setStrings(this.#strings);
-    if (sessionStorage.getItem(COLLAPSED_KEY) === "1") {
+    if (this.#readScopedItem(COLLAPSED_KEY) === "1") {
       this.setAttribute("collapsed", "");
     }
     this.#syncRail();
     this.#initSkills();
     void this.#fetchToolCatalog();
+    if (this.#storageNs !== "" && this.conversationStore instanceof SessionStorageStore) {
+      this.conversationStore = new SessionStorageStore(this.#storageNs);
+    }
     this.#wireThreadStore();
     this.#wireAttachments();
     this.#wireVoice();
     this.#threadId = this.conversationStore.threadId();
     void this.#rehydrate();
   }
+  /**
+   * Tear down live resources when the element leaves the DOM (a removed node, a
+   * client-side route swap): cancel the in-flight run so its SSE stream closes,
+   * abort any in-flight uploads so they don't orphan server-side files, and
+   * release the mic so the browser's recording indicator clears. Without this a
+   * removed `<ag-ui-chat>` leaks a streaming request, uploads, and a live
+   * `MediaRecorder`.
+   */
+  disconnectedCallback() {
+    this.#cancelRun();
+    this.#attachTray?.dispose();
+    this.#voice?.dispose();
+  }
   /** Parse the inline `data-strings` JSON overrides (empty when absent/malformed). */
   #readStringOverrides() {
     const raw = this.getAttribute("data-strings");
@@ -6178,7 +6870,7 @@ var AgUiChat = class extends HTMLElement {
     if (url === null) {
       return null;
     }
-    return (file, onProgress) => uploadAttachment(file, { url, headers: this.headers, onProgress });
+    return (file, onProgress, signal) => uploadAttachment(file, { url, headers: this.headers, onProgress, signal });
   }
   /**
    * Reveal the composer's 🎤 mic button when transcription is possible — either
@@ -6382,7 +7074,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     } else {
       this.removeAttribute("collapsed");
     }
-    sessionStorage.setItem(COLLAPSED_KEY, collapsed ? "1" : "0");
+    sessionStorage.setItem(this.#storageKey(COLLAPSED_KEY), collapsed ? "1" : "0");
     this.#syncRail();
     this.dispatchEvent(
       new CustomEvent(TOGGLE_EVENT, {
@@ -6405,9 +7097,25 @@ Use the read_attachment tool with an id to read a file's contents.`
   toggleTheme() {
     const next = this.getAttribute("theme") === "dark" ? "light" : "dark";
     this.setAttribute("theme", next);
-    sessionStorage.setItem(THEME_KEY, next);
+    sessionStorage.setItem(this.#storageKey(THEME_KEY), next);
     this.#syncThemeGlyph();
   }
+  /** This instance's namespaced form of an origin-scoped storage key. */
+  #storageKey(base) {
+    return this.#storageNs === "" ? base : `${base}:${this.#storageNs}`;
+  }
+  /**
+   * Read a namespaced origin-scoped value, falling back once to the legacy
+   * pre-namespacing global key (left in place) so an existing collapsed/theme
+   * preference survives the upgrade.
+   */
+  #readScopedItem(base) {
+    const scoped = sessionStorage.getItem(this.#storageKey(base));
+    if (scoped !== null || this.#storageNs === "") {
+      return scoped;
+    }
+    return sessionStorage.getItem(base);
+  }
   /** Reflect the current theme on the toggle: show the destination's glyph. */
   #syncThemeGlyph() {
     const dark = this.getAttribute("theme") === "dark";
@@ -6475,7 +7183,12 @@ Use the read_attachment tool with an id to read a file's contents.`
    * result from the page we landed on.
    */
   async #rehydrate() {
+    this.#rehydrateGeneration += 1;
+    const generation = this.#rehydrateGeneration;
     const messages = await this.conversationStore.loadMessages(this.#threadId);
+    if (generation !== this.#rehydrateGeneration) {
+      return;
+    }
     if (messages !== null) {
       this.#initialMessages = messages;
       for (const message of messages) {
@@ -6562,7 +7275,7 @@ Use the read_attachment tool with an id to read a file's contents.`
    * stays literal text (no need to parse what the user typed, and it avoids
    * rendering user-authored markup).
    *
-   * Assistant bubbles land in the current answer group (WELL-1), opening one if
+   * Assistant bubbles land in the current answer group, opening one if
    * needed; a user bubble closes the prior group and sits directly in the list
    * (the well wraps the *assistant* turn, the user message precedes it).
    */
@@ -6677,6 +7390,7 @@ Use the read_attachment tool with an id to read a file's contents.`
       void this.#submit();
     });
     this.#skillHint.className = "skill-hint";
+    this.#skillHint.setAttribute("part", "skill-hint");
     this.#skillHint.hidden = true;
     this.#attachButton.className = "attach-btn";
     this.#attachButton.type = "button";
@@ -6796,6 +7510,9 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#send.dataset["state"] = running ? "running" : "idle";
   }
   async #submit() {
+    if (this.#running) {
+      return;
+    }
     const content = this.#input.value.trim();
     const attachments = this.#attachTray?.readyRefs() ?? [];
     if (content === "" && attachments.length === 0) {
@@ -6841,6 +7558,7 @@ Use the read_attachment tool with an id to read a file's contents.`
         getTools: () => this.getTools(),
         getContext: () => this.getContext(),
         executeTool: (call) => this.#executeTool(call),
+        resolveInterrupts: (interrupts) => this.#resolveInterrupts(interrupts),
         onPersist: (messages) => this.conversationStore.saveMessages(this.#threadId, messages),
         connectionLostMessage: this.#strings.connectionLost
       });
@@ -6913,6 +7631,45 @@ Use the read_attachment tool with an id to read a file's contents.`
       return { content: `Error: ${message}`, error: message };
     }
   }
+  /**
+   * Render an approval card per server-side-tool interrupt and collect the
+   * user's decisions (approve → run it, deny → decline it).
+   *
+   * The run is suspended on these cards; a Stop while any is open aborts the
+   * shared {@link #confirmAbort} controller, resolving every still-open card as
+   * denied (and the client loop then sees the cancellation and stops). An
+   * approved tool runs on the follow-up (resume) run and streams its result
+   * back into the same pending card; a denied one is settled here, since no
+   * result will ever arrive for it.
+   */
+  async #resolveInterrupts(interrupts) {
+    const responses = {};
+    this.#confirmAbort = new AbortController();
+    this.#hidePending();
+    for (const interrupt of interrupts) {
+      const request = {};
+      if (interrupt.message !== void 0) {
+        request.message = interrupt.message;
+      }
+      const card = interrupt.toolCallId !== void 0 ? this.#toolCards.get(interrupt.toolCallId) : void 0;
+      const toolName = card?.element.getAttribute("data-tool-name");
+      if (toolName !== null && toolName !== void 0) {
+        request.toolName = toolName;
+      }
+      const signal = this.#confirmAbort.signal;
+      const approved = this.approvalRenderer !== null ? await this.approvalRenderer(request, { signal }) : await requestApproval(this.#ensureGroup(), request, { signal, strings: this.#strings });
+      this.#updateEmptyState();
+      this.#messages.scrollTop = this.#messages.scrollHeight;
+      if (approved) {
+        responses[interrupt.id] = { status: "resolved", payload: { approved: true } };
+      } else {
+        responses[interrupt.id] = { status: "cancelled" };
+        card?.settle(TOOL_CALL_STATUS.DECLINED, this.#strings.declinedAction);
+      }
+    }
+    this.#confirmAbort = null;
+    return responses;
+  }
   #handlers() {
     return {
       onRunStart: () => {
@@ -7113,7 +7870,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.9.0";
+var VERSION = "0.11.0";
 export {
   AgUiChat,
   AgUiClient,
@@ -7156,7 +7913,9 @@ export {
   pressThenClick,
   prettifyToolName,
   renderMarkdown,
+  requestApproval,
   requestConfirmation,
+  requestQuestion,
   scrollIntoCenterView,
   selectControl,
   selectOption,