@artooi/ag-ui-web-component 0.10.0 → 0.12.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",
@@ -507,6 +451,11 @@ var DEFAULT_UI_STRINGS = {
   collapse: "Collapse",
   expand: "Expand",
   toggleTheme: "Toggle theme",
+  checkpoints: "Continue a run",
+  noCheckpoints: "Nothing to continue yet.",
+  resumeRun: "Resume",
+  forkRun: "Fork",
+  forkedRun: "branched",
   conversation: "Conversation",
   thinking: "Assistant is thinking\u2026",
   thoughts: "Thoughts",
@@ -537,6 +486,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 +525,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;
@@ -708,23 +778,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);
@@ -733,6 +809,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";
@@ -742,6 +819,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";
@@ -768,8 +846,140 @@ function accepts(accept, file) {
   });
 }
 
+// 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;
+  }
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) {
+    return strings.minutesAgo.replace("{n}", String(minutes));
+  }
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) {
+    return strings.hoursAgo.replace("{n}", String(hours));
+  }
+  const days = Math.round(hours / 24);
+  if (days < 7) {
+    return strings.daysAgo.replace("{n}", String(days));
+  }
+  return strings.weeksAgo.replace("{n}", String(Math.round(days / 7)));
+}
+
+// src/ui/checkpoint_menu.ts
+var CheckpointMenu = class {
+  /** The panel root. Append to the chat shell; hidden until opened. */
+  element;
+  #onPick;
+  #list;
+  #heading;
+  #strings;
+  #runs = [];
+  constructor(onPick, strings = DEFAULT_UI_STRINGS) {
+    this.#onPick = onPick;
+    this.#strings = strings;
+    this.element = document.createElement("div");
+    this.element.className = "checkpoints";
+    this.element.setAttribute("part", "checkpoints");
+    this.element.setAttribute("role", "dialog");
+    this.element.setAttribute("aria-label", strings.checkpoints);
+    this.element.hidden = true;
+    const header = document.createElement("div");
+    header.className = "checkpoints-header";
+    header.setAttribute("part", "checkpoints-header");
+    this.#heading = document.createElement("span");
+    this.#heading.className = "checkpoints-title";
+    this.#heading.textContent = strings.checkpoints;
+    header.append(this.#heading);
+    this.#list = document.createElement("div");
+    this.#list.className = "checkpoints-list";
+    this.#list.setAttribute("part", "checkpoints-list");
+    this.element.append(header, this.#list);
+    this.element.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        this.close();
+      }
+    });
+  }
+  /** Replace the rows. The host passes only `continuable` runs. */
+  setRuns(runs) {
+    this.#runs = runs;
+    this.#render();
+  }
+  /** Re-localize a panel built before the host's strings resolved. */
+  setStrings(strings) {
+    this.#strings = strings;
+    this.element.setAttribute("aria-label", strings.checkpoints);
+    this.#heading.textContent = strings.checkpoints;
+    this.#render();
+  }
+  open() {
+    this.element.hidden = false;
+  }
+  close() {
+    this.element.hidden = true;
+  }
+  get open_() {
+    return !this.element.hidden;
+  }
+  #render() {
+    this.#list.replaceChildren();
+    if (this.#runs.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "checkpoints-empty";
+      empty.setAttribute("part", "checkpoints-empty");
+      empty.textContent = this.#strings.noCheckpoints;
+      this.#list.append(empty);
+      return;
+    }
+    for (const run of this.#runs) {
+      this.#list.append(this.#row(run));
+    }
+  }
+  #row(run) {
+    const row = document.createElement("div");
+    row.className = "checkpoint-row";
+    row.setAttribute("part", "checkpoint-row");
+    const label = document.createElement("span");
+    label.className = "checkpoint-label";
+    label.textContent = run.started_at === null ? run.run_id : relativeTime(Date.parse(run.started_at), Date.now(), this.#strings);
+    label.title = run.run_id;
+    row.append(label);
+    if (run.parent_run_id !== null) {
+      const branch = document.createElement("span");
+      branch.className = "checkpoint-branch";
+      branch.setAttribute("part", "checkpoint-branch");
+      branch.textContent = this.#strings.forkedRun;
+      branch.title = run.parent_run_id;
+      row.append(branch);
+    }
+    row.append(
+      this.#action(run.run_id, "resume", this.#strings.resumeRun),
+      this.#action(run.run_id, "fork", this.#strings.forkRun)
+    );
+    return row;
+  }
+  #action(runId, verb, label) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `checkpoint-action checkpoint-${verb}`;
+    button.setAttribute("part", `checkpoint-action checkpoint-${verb}`);
+    button.textContent = label;
+    button.addEventListener("click", () => {
+      this.close();
+      this.#onPick(runId, verb);
+    });
+    return button;
+  }
+};
+
 // 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}`;
@@ -797,8 +1007,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) {
@@ -833,6 +1043,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);
@@ -2033,7 +2386,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 };
 }
@@ -2077,15 +2430,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 = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/;
@@ -3376,9 +3729,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;
   }
@@ -3473,6 +3828,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);
@@ -3484,15 +3840,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);
       }
@@ -4529,10 +4888,131 @@ var STYLES = `
   color: #ffffff;
 }
 
-/* Skills \u2014 chips row + the /-command palette, above the input. */
-.skill-chips {
+/* Approval card \u2014 the server-side-tool gate (approve/deny an interrupt). */
+.approval {
+  align-self: stretch;
+  box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
+  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;
+  flex-wrap: wrap;
   gap: 6px;
   padding: 10px 12px;
 }
@@ -4609,6 +5089,82 @@ var STYLES = `
   display: none;
 }
 
+.checkpoints {
+  position: absolute;
+  inset-block-start: 3rem;
+  inset-inline: 0.75rem;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border: 1px solid var(--agui-border, #d7d7dc);
+  border-radius: 0.5rem;
+  background: var(--agui-surface, #fff);
+  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
+  max-height: 60%;
+  overflow-y: auto;
+}
+
+.checkpoints[hidden] {
+  display: none;
+}
+
+.checkpoints-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  opacity: 0.7;
+}
+
+.checkpoints-empty {
+  padding: 0.5rem 0.25rem;
+  font-size: 0.8125rem;
+  opacity: 0.7;
+}
+
+.checkpoint-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+
+.checkpoint-row:hover {
+  background: var(--agui-hover, #f3f3f5);
+}
+
+.checkpoint-label {
+  flex: 1;
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkpoint-branch {
+  font-size: 0.6875rem;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--agui-hover, #f3f3f5);
+  opacity: 0.8;
+}
+
+.checkpoint-action {
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--agui-border, #d7d7dc);
+  border-radius: 0.375rem;
+  background: transparent;
+  color: inherit;
+}
+
+.checkpoint-action:hover {
+  background: var(--agui-hover, #f3f3f5);
+}
+
 .drawer-backdrop {
   position: absolute;
   inset: 0;
@@ -4804,6 +5360,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");
@@ -4838,30 +5395,6 @@ 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;
-  }
-  const minutes = Math.round(seconds / 60);
-  if (minutes < 60) {
-    return strings.minutesAgo.replace("{n}", String(minutes));
-  }
-  const hours = Math.round(minutes / 60);
-  if (hours < 24) {
-    return strings.hoursAgo.replace("{n}", String(hours));
-  }
-  const days = Math.round(hours / 24);
-  if (days < 7) {
-    return strings.daysAgo.replace("{n}", String(days));
-  }
-  return strings.weeksAgo.replace("{n}", String(Math.round(days / 7)));
-}
-
 // src/ui/thread_drawer.ts
 var ThreadDrawer = class {
   /** The drawer root (backdrop + panel). Append to the chat shell; hidden until opened. */
@@ -5012,12 +5545,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", () => {
@@ -5027,6 +5563,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";
@@ -5034,12 +5571,14 @@ 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;
@@ -5049,6 +5588,7 @@ var ThreadDrawer = class {
     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 = () => {
@@ -5089,17 +5629,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);
@@ -5341,7 +5885,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);
@@ -5354,6 +5901,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
@@ -5365,6 +5913,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";
@@ -5444,16 +5993,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, errored: 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;
@@ -5464,6 +6019,17 @@ var AgUiClient = class {
       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;
       }
@@ -5526,6 +6092,12 @@ 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;
@@ -5873,6 +6445,60 @@ var RemoteConversationStore = class {
   }
 };
 
+// src/core/run_index.ts
+var RunIndex = class {
+  #url;
+  #headers;
+  constructor(url, headers = () => ({})) {
+    this.#url = url.endsWith("/") ? url : `${url}/`;
+    this.#headers = headers;
+  }
+  /**
+   * The user's runs, or `[]` when the endpoint is unreachable or answers with
+   * an error. A history affordance that cannot load is empty, never broken:
+   * the caller renders its empty state rather than surfacing a transport fault
+   * the user can do nothing about.
+   */
+  async list() {
+    try {
+      const response = await fetch(this.#url, {
+        method: "GET",
+        headers: { Accept: "application/json", ...this.#headers() }
+      });
+      if (!response.ok) {
+        return [];
+      }
+      const body = await response.json();
+      return body.runs ?? [];
+    } catch {
+      return [];
+    }
+  }
+  /** The rows a client may actually continue. */
+  async continuable() {
+    return (await this.list()).filter((run) => run.continuable);
+  }
+  /** The endpoint that continues `runId` as a new run. */
+  resumeUrl(runId) {
+    return this.#sibling("resume", runId);
+  }
+  /** The endpoint that branches `runId` into a new run, leaving the source untouched. */
+  forkUrl(runId) {
+    return this.#sibling("fork", runId);
+  }
+  /**
+   * `<mount>/<verb>/<runId>/`, derived from the index URL's own prefix.
+   *
+   * Built by string surgery on the trailing `runs/` rather than with `new URL`,
+   * because the configured value may be root-relative (`/agent/runs/`) — the
+   * common case in a Django template — and `new URL` needs an absolute base.
+   */
+  #sibling(verb, runId) {
+    const prefix = this.#url.slice(0, -"runs/".length);
+    return `${prefix}${verb}/${encodeURIComponent(runId)}/`;
+  }
+};
+
 // src/core/transcribe_audio.ts
 async function transcribeAudio(audio, options) {
   const form = new FormData();
@@ -5983,6 +6609,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
@@ -6118,6 +6771,10 @@ var AgUiChat = class extends HTMLElement {
   #title;
   #skillsMenu;
   #drawer;
+  /** Checkpoint panel; rows load only when `data-runs-url` is set. */
+  #checkpoints;
+  /** Built lazily from `data-runs-url`; `null` when the host didn't opt in. */
+  #runIndex = null;
   #skillHint;
   /** File-picker button + hidden input + tray slot; the tray mounts on connect. */
   #attachButton;
@@ -6208,6 +6865,70 @@ var AgUiChat = class extends HTMLElement {
         this.#deleteThread(threadId);
       }
     });
+    this.#checkpoints = new CheckpointMenu((runId, verb) => {
+      void this.#continueRun(runId, verb);
+    });
+  }
+  /** The run index, built once from `data-runs-url`; `null` when unset. */
+  #runs() {
+    const url = this.getAttribute("data-runs-url");
+    if (url === null || url === "") {
+      return null;
+    }
+    if (this.#runIndex === null) {
+      this.#runIndex = new RunIndex(url, () => this.headers);
+    }
+    return this.#runIndex;
+  }
+  /**
+   * Continue `runId` as a **new** run, seeded server-side from its snapshot.
+   *
+   * Uses a short-lived agent pointed at the resume / fork endpoint and seeded
+   * with **no** history, so the request carries only the turn typed here — the
+   * contract those endpoints assume, since the server supplies the prior turns
+   * from the snapshot and re-sending them would duplicate. Building a separate
+   * agent makes that structural: the main agent keeps its own history, and
+   * "only the new turn" can't be got wrong by forgetting to clear it. The
+   * fresh `run_id` the endpoints also require comes free — a new agent mints
+   * one per run.
+   *
+   * Handlers are the element's own, so the continuation streams into the same
+   * transcript the user is looking at.
+   */
+  async #continueRun(runId, verb) {
+    const index = this.#runs();
+    if (index === null) {
+      return;
+    }
+    const content = this.#input.value.trim();
+    if (content === "") {
+      return;
+    }
+    this.#input.value = "";
+    const endpoint = verb === "resume" ? index.resumeUrl(runId) : index.forkUrl(runId);
+    const agent = this.agentFactory({
+      endpoint,
+      headers: this.headers,
+      getHeaders: () => this.headers,
+      threadId: this.#threadId,
+      // The seed the endpoints assume: nothing. The snapshot is the history.
+      initialMessages: []
+    });
+    const client = new AgUiClient({
+      agent,
+      handlers: this.#handlers(),
+      getTools: () => this.getTools(),
+      getContext: () => this.getContext(),
+      executeTool: (call) => this.#executeTool(call),
+      resolveInterrupts: (interrupts) => this.#resolveInterrupts(interrupts),
+      connectionLostMessage: this.#strings.connectionLost
+    });
+    await client.send(content);
+  }
+  /** Load the checkpoint panel with the runs that can actually be continued. */
+  async #refreshCheckpoints() {
+    const index = this.#runs();
+    this.#checkpoints.setRuns(index === null ? [] : await index.continuable());
   }
   /** Attributes whose late changes must reflect in already-rendered chrome. */
   static get observedAttributes() {
@@ -6276,9 +6997,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) {
@@ -6323,6 +7108,7 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#render();
     this.#drawer.setStrings(this.#strings);
+    this.#checkpoints.setStrings(this.#strings);
     if (this.#readScopedItem(COLLAPSED_KEY) === "1") {
       this.setAttribute("collapsed", "");
     }
@@ -6864,11 +7650,20 @@ Use the read_attachment tool with an id to read a file's contents.`
       void this.#refreshDrawer();
       this.#drawer.open();
     });
+    const checkpoints = this.#headerButton("checkpoints", this.#strings.checkpoints, "\u2B6F");
+    checkpoints.addEventListener("click", () => {
+      void this.#refreshCheckpoints();
+      this.#checkpoints.open();
+    });
     const newChat = this.#headerButton("new", this.#strings.newChat, "\u271A");
     newChat.addEventListener("click", () => this.newChat());
     const collapse = this.#headerButton("collapse", this.#strings.collapse, "\u2014");
     collapse.addEventListener("click", () => this.toggleCollapsed());
-    controls.append(history, newChat);
+    if (this.#runs() !== null) {
+      controls.append(history, checkpoints, newChat);
+    } else {
+      controls.append(history, newChat);
+    }
     if (this.getAttribute("data-theme-toggle") !== null) {
       this.#themeToggle.type = "button";
       this.#themeToggle.className = "header-btn header-btn--theme";
@@ -6916,6 +7711,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";
@@ -6944,7 +7740,8 @@ Use the read_attachment tool with an id to read a file's contents.`
       this.#attachSlot,
       inputRow,
       footer,
-      this.#drawer.element
+      this.#drawer.element,
+      this.#checkpoints.element
     );
     this.#rail.className = "rail";
     this.#rail.type = "button";
@@ -7083,6 +7880,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
       });
@@ -7155,6 +7953,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: () => {
@@ -7355,10 +8192,11 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.10.0";
+var VERSION = "0.12.0";
 export {
   AgUiChat,
   AgUiClient,
+  CheckpointMenu,
   ClientToolRegistry,
   ConnectionLostError,
   DEFAULT_UI_STRINGS,
@@ -7367,6 +8205,7 @@ export {
   MESSAGE_ROLE,
   PAGE_ACTIONS,
   RemoteConversationStore,
+  RunIndex,
   SUBMIT_EVENT,
   SessionStorageStore,
   TOGGLE_EVENT,
@@ -7398,7 +8237,9 @@ export {
   pressThenClick,
   prettifyToolName,
   renderMarkdown,
+  requestApproval,
   requestConfirmation,
+  requestQuestion,
   scrollIntoCenterView,
   selectControl,
   selectOption,