@artooi/ag-ui-web-component 0.17.0 → 0.19.0

package/dist/index.js

@@ -450,6 +450,9 @@ var DEFAULT_UI_STRINGS = {
   collapse: "Collapse",
   expand: "Expand",
   toggleTheme: "Toggle theme",
+  copyCode: "Copy",
+  copied: "Copied",
+  copyFailed: "Copy failed",
   checkpoints: "Continue a run",
   noCheckpoints: "Nothing to continue yet.",
   resumeRun: "Resume",
@@ -482,6 +485,9 @@ var DEFAULT_UI_STRINGS = {
   toolDone: "\u2713 done",
   toolError: "\u26A0 error",
   toolDeclined: "\u2298 declined",
+  decisionApproved: "approved by you",
+  decisionDeclined: "declined by you",
+  argumentsLabel: "Arguments",
   resultLabel: "Result",
   errorLabel: "Error",
   declinedLabel: "Declined",
@@ -531,12 +537,12 @@ function mergeUiStrings(overrides) {
 
 // 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;
+  const button2 = document.createElement("button");
+  button2.type = "button";
+  button2.className = `approval-btn approval-btn--${modifier}`;
+  button2.setAttribute("part", `approval-button approval-${modifier}`);
+  button2.textContent = label;
+  return button2;
 }
 function requestApproval(host, request, options = {}) {
   const strings = options.strings ?? DEFAULT_UI_STRINGS;
@@ -583,6 +589,55 @@ function requestApproval(host, request, options = {}) {
   });
 }
 
+// src/ui/attach_copy_buttons.ts
+var CONFIRM_MS = 1500;
+function attachCopyButtons(root, strings) {
+  for (const pre of Array.from(root.querySelectorAll("pre"))) {
+    const code = pre.querySelector("code");
+    if (code === null || pre.querySelector(".code-copy") !== null) {
+      continue;
+    }
+    pre.classList.add("has-copy");
+    pre.append(button(code, strings));
+  }
+}
+function button(code, strings) {
+  const text2 = code.textContent;
+  const copy = document.createElement("button");
+  copy.type = "button";
+  copy.className = "code-copy";
+  copy.setAttribute("part", "code-copy");
+  copy.textContent = strings.copyCode;
+  copy.title = strings.copyCode;
+  copy.setAttribute("aria-label", strings.copyCode);
+  copy.addEventListener("click", () => {
+    void writeText(text2).then((ok) => {
+      confirm(copy, ok ? strings.copied : strings.copyFailed, strings);
+    });
+  });
+  return copy;
+}
+async function writeText(text2) {
+  const clipboard = navigator.clipboard;
+  if (clipboard === void 0) {
+    return false;
+  }
+  try {
+    await clipboard.writeText(text2);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function confirm(copy, message, strings) {
+  copy.textContent = message;
+  copy.dataset["state"] = message === strings.copied ? "copied" : "failed";
+  setTimeout(() => {
+    copy.textContent = strings.copyCode;
+    delete copy.dataset["state"];
+  }, CONFIRM_MS);
+}
+
 // src/ui/attachment_chips.ts
 function renderAttachmentChips(refs) {
   const list = document.createElement("div");
@@ -885,6 +940,8 @@ var CheckpointMenu = class {
   #onPick;
   #list;
   #heading;
+  /** What had focus before the panel opened, restored on close. */
+  #lastFocused = null;
   #strings;
   #runs = [];
   constructor(onPick, strings = DEFAULT_UI_STRINGS) {
@@ -895,6 +952,7 @@ var CheckpointMenu = class {
     this.element.setAttribute("part", "checkpoints");
     this.element.setAttribute("role", "dialog");
     this.element.setAttribute("aria-label", strings.checkpoints);
+    this.element.tabIndex = -1;
     this.element.hidden = true;
     const header = document.createElement("div");
     header.className = "checkpoints-header";
@@ -908,12 +966,7 @@ var CheckpointMenu = class {
     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();
-      }
-    });
+    this.element.addEventListener("keydown", (event) => this.#onKeydown(event));
   }
   /** Replace the rows. The host passes only `continuable` runs. */
   setRuns(runs) {
@@ -928,10 +981,52 @@ var CheckpointMenu = class {
     this.#render();
   }
   open() {
+    if (this.open_) {
+      return;
+    }
+    this.#lastFocused = this.#activeElement();
     this.element.hidden = false;
+    (this.#focusables()[0] ?? this.element).focus();
   }
   close() {
+    if (!this.open_) {
+      return;
+    }
     this.element.hidden = true;
+    this.#lastFocused?.focus();
+    this.#lastFocused = null;
+  }
+  /** The focused element within this panel's root (shadow-aware). */
+  #activeElement() {
+    return this.element.getRootNode().activeElement;
+  }
+  /** The panel's tabbable controls, in document order. */
+  #focusables() {
+    return Array.from(this.element.querySelectorAll("button, [tabindex]")).filter(
+      (el) => !el.hidden
+    );
+  }
+  /** Escape closes; Tab is trapped so focus cannot wander behind the dialog. */
+  #onKeydown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      this.close();
+      return;
+    }
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusables = this.#focusables();
+    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();
+    }
   }
   get open_() {
     return !this.element.hidden;
@@ -975,27 +1070,27 @@ var CheckpointMenu = class {
     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", () => {
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.className = `checkpoint-action checkpoint-${verb}`;
+    button2.setAttribute("part", `checkpoint-action checkpoint-${verb}`);
+    button2.textContent = label;
+    button2.addEventListener("click", () => {
       this.close();
       this.#onPick(runId, verb);
     });
-    return button;
+    return button2;
   }
 };
 
 // src/ui/confirmation_card.ts
 function actionButton2(modifier, label) {
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className = `confirm-btn confirm-btn--${modifier}`;
-  button.setAttribute("part", `confirm-button confirm-${modifier}`);
-  button.textContent = label;
-  return button;
+  const button2 = document.createElement("button");
+  button2.type = "button";
+  button2.className = `confirm-btn confirm-btn--${modifier}`;
+  button2.setAttribute("part", `confirm-button confirm-${modifier}`);
+  button2.textContent = label;
+  return button2;
 }
 function requestConfirmation(host, request, options = {}) {
   const strings = options.strings ?? DEFAULT_UI_STRINGS;
@@ -1014,33 +1109,32 @@ function requestConfirmation(host, request, options = {}) {
     args.className = "confirm-args";
     args.setAttribute("part", "confirm-args");
     args.textContent = JSON.stringify(request.args, null, 2);
+    args.hidden = Object.keys(request.args).length === 0;
     const actions = document.createElement("div");
     actions.className = "confirm-actions";
     actions.setAttribute("part", "confirm-actions");
     const cancel = actionButton2("cancel", strings.cancel);
-    const confirm = actionButton2("confirm", strings.confirm);
+    const confirm2 = actionButton2("confirm", strings.confirm);
     let settled = false;
     const close = (accepted) => {
       if (settled) {
         return;
       }
       settled = true;
-      cancel.disabled = true;
-      confirm.disabled = true;
-      card.setAttribute("data-resolved", accepted ? "confirmed" : "declined");
+      card.remove();
       resolve(accepted);
     };
     cancel.addEventListener("click", () => close(false));
-    confirm.addEventListener("click", () => close(true));
+    confirm2.addEventListener("click", () => close(true));
     options.signal?.addEventListener("abort", () => close(false), { once: true });
-    actions.append(cancel, confirm);
+    actions.append(cancel, confirm2);
     card.append(body, args, actions);
     host.appendChild(card);
     if (options.signal?.aborted === true) {
       close(false);
       return;
     }
-    confirm.focus();
+    confirm2.focus();
   });
 }
 
@@ -4193,13 +4287,13 @@ var SkillsMenu = class {
     const chipSkills = this.#chipsEnabled ? this.#skills.filter((skill) => skill.chip === true) : [];
     this.chips.hidden = chipSkills.length === 0;
     for (const skill of chipSkills) {
-      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);
+      const button2 = document.createElement("button");
+      button2.type = "button";
+      button2.className = "skill-chip";
+      button2.setAttribute("part", "skill-chip");
+      button2.textContent = skill.title;
+      button2.addEventListener("click", () => this.#pick(skill));
+      this.chips.appendChild(button2);
     }
   }
   #renderPalette() {
@@ -4740,6 +4834,52 @@ var STYLES = `
   padding: 0;
 }
 
+/* The copy button sits inside the block, so it scrolls with wide code rather
+   than floating over the bubble. Positioning is on the pre; the button only
+   appears once one has been attached. */
+.message--assistant pre.has-copy {
+  position: relative;
+}
+
+.code-copy {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 8px;
+  font: inherit;
+  font-size: 0.75em;
+  line-height: 1.6;
+  color: var(--ag-ui-muted);
+  background: var(--ag-ui-surface);
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+/* Revealed on hover or keyboard focus. Focus matters as much as hover here:
+   hidden-until-hover is invisible to a keyboard user otherwise. */
+.message--assistant pre.has-copy:hover .code-copy,
+.code-copy:focus-visible {
+  opacity: 1;
+}
+
+.code-copy:hover {
+  color: var(--ag-ui-text);
+  background: var(--ag-ui-hover);
+}
+
+.code-copy[data-state="copied"] {
+  opacity: 1;
+  color: var(--ag-ui-text);
+}
+
+.code-copy[data-state="failed"] {
+  opacity: 1;
+  color: var(--ag-ui-danger, var(--ag-ui-text));
+}
+
 .message--assistant blockquote {
   padding-left: 10px;
   border-left: 3px solid var(--ag-ui-border);
@@ -4954,10 +5094,9 @@ var STYLES = `
   }
 }
 
-/* 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"] {
+/* Inline display mode: the lightest card. Drop the box chrome so the status row
+   reads as one line of the answer; the result toggle still expands below it. */
+:host([data-tool-display="inline"]) .tool-call {
   max-width: 100%;
   background: transparent;
   border: none;
@@ -4987,6 +5126,37 @@ var STYLES = `
   color: var(--ag-ui-muted);
 }
 
+.tool-call-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tool-call-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+/* The heading that tells the two payloads apart. Without it the arguments and
+   the result were one run of text and a reader had to guess the boundary. */
+.tool-call-section-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ag-ui-muted);
+}
+
+/* The record of a human decision on a gated call. An approved call used to
+   look exactly like one that was never gated. */
+.tool-call-decision {
+  flex: none;
+  font-size: 11px;
+  font-style: italic;
+  color: var(--ag-ui-muted);
+}
+
 .tool-call-args,
 .tool-call-result {
   margin: 0;
@@ -5001,6 +5171,43 @@ var STYLES = `
   color: var(--ag-ui-fg);
 }
 
+/* Display modes are pure visibility over one DOM shape, selected from the host
+   attribute rather than a value stamped on the card when it was built. That is
+   what lets a host flip data-tool-display and have every card already on screen
+   re-read it, the way data-answer-well behaves. Baking the structure per mode
+   meant the setting only reached cards created afterwards.
+
+   Default (no attribute) is the full mode: arguments always visible, result
+   behind the toggle. */
+.tool-call[data-expanded="false"] .tool-call-section--result {
+  display: none;
+}
+
+/* Compact: one toggle over both regions, so a settled card is a single line
+   until asked. */
+:host([data-tool-display="compact"]) .tool-call[data-expanded="false"] .tool-call-section {
+  display: none;
+}
+
+/* Inline: the result only; the call's arguments are noise at this density. */
+:host([data-tool-display="inline"]) .tool-call .tool-call-section--args {
+  display: none;
+}
+
+/* Minimal: the status row and nothing else, so there is no toggle to press. */
+:host([data-tool-display="minimal"]) .tool-call .tool-call-toggle,
+:host([data-tool-display="minimal"]) .tool-call .tool-call-body {
+  display: none;
+}
+
+/* A pending card has no result yet, and in the modes where the arguments are
+   hidden too there is nothing behind the toggle. Hide the control rather than
+   offer one that expands onto nothing. */
+.tool-call[data-status="pending"] .tool-call-toggle,
+:host([data-tool-display="inline"]) .tool-call[data-status="pending"] .tool-call-toggle {
+  display: none;
+}
+
 .tool-call-toggle {
   align-self: flex-start;
   border: none;
@@ -6053,9 +6260,9 @@ var ThreadDrawer = class {
   }
   /** Swap a row for an inline "Delete? [Delete] [Cancel]" confirm. */
   #confirmDelete(row, meta) {
-    const confirm = document.createElement("div");
-    confirm.className = "drawer-confirm";
-    confirm.setAttribute("part", "drawer-confirm");
+    const confirm2 = document.createElement("div");
+    confirm2.className = "drawer-confirm";
+    confirm2.setAttribute("part", "drawer-confirm");
     const label = document.createElement("span");
     label.className = "drawer-confirm-label";
     label.setAttribute("part", "drawer-confirm-label");
@@ -6072,8 +6279,8 @@ var ThreadDrawer = class {
     no.setAttribute("part", "drawer-confirm-no");
     no.textContent = this.#strings.cancel;
     no.addEventListener("click", () => this.#renderList());
-    confirm.append(label, yes, no);
-    row.replaceChildren(confirm);
+    confirm2.append(label, yes, no);
+    row.replaceChildren(confirm2);
   }
 };
 
@@ -6093,24 +6300,32 @@ function resultLabels(strings) {
     [TOOL_CALL_STATUS.DECLINED]: strings.declinedLabel
   };
 }
+function formatPayload(text2) {
+  try {
+    return JSON.stringify(JSON.parse(text2), null, 2);
+  } catch {
+    return text2;
+  }
+}
 var ToolCallCard = class {
   /** The card's root element; append this into the message list. */
   element;
   #status;
-  #mode;
-  #args;
+  #decision;
+  #toggle;
+  #resultSection;
+  #resultLabel;
+  #resultBody;
   #strings;
   #settled = false;
-  constructor(name, args, mode = TOOL_DISPLAY.FULL, summary, strings = DEFAULT_UI_STRINGS) {
-    this.#mode = mode;
-    this.#args = args;
+  constructor(name, args, summary, strings = DEFAULT_UI_STRINGS) {
     this.#strings = strings;
     this.element = document.createElement("div");
     this.element.className = "tool-call";
     this.element.setAttribute("part", "tool-card");
     this.element.setAttribute("data-tool-name", name);
     this.element.setAttribute("data-status", TOOL_CALL_STATUS.PENDING);
-    this.element.setAttribute("data-display", mode);
+    this.element.setAttribute("data-expanded", "false");
     const head = document.createElement("div");
     head.className = "tool-call-head";
     head.setAttribute("part", "tool-card-head");
@@ -6126,24 +6341,52 @@ var ToolCallCard = class {
     this.#status.className = "tool-call-status";
     this.#status.setAttribute("part", "tool-card-status");
     this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
-    head.append(icon, label, this.#status);
-    this.element.append(head);
-    if (mode === TOOL_DISPLAY.FULL) {
-      const argsEl = document.createElement("pre");
-      argsEl.className = "tool-call-args";
-      argsEl.setAttribute("part", "tool-card-args");
-      argsEl.textContent = JSON.stringify(args, null, 2);
-      this.element.append(argsEl);
-    }
+    this.#decision = document.createElement("span");
+    this.#decision.className = "tool-call-decision";
+    this.#decision.setAttribute("part", "tool-card-decision");
+    this.#decision.hidden = true;
+    head.append(icon, label, this.#status, this.#decision);
+    const argsSection = this.#section("args", strings.argumentsLabel);
+    argsSection.body.textContent = JSON.stringify(args, null, 2);
+    argsSection.root.hidden = Object.keys(args).length === 0;
+    const resultSection = this.#section("result", strings.resultLabel);
+    this.#resultSection = resultSection.root;
+    this.#resultLabel = resultSection.label;
+    this.#resultBody = resultSection.body;
+    resultSection.root.hidden = true;
+    this.#toggle = document.createElement("button");
+    this.#toggle.type = "button";
+    this.#toggle.className = "tool-call-toggle";
+    this.#toggle.setAttribute("part", "tool-card-toggle");
+    this.#toggle.setAttribute("aria-expanded", "false");
+    this.#toggle.textContent = strings.details;
+    this.#toggle.addEventListener("click", () => this.#setExpanded(!this.#expanded()));
+    const body = document.createElement("div");
+    body.className = "tool-call-body";
+    body.setAttribute("part", "tool-card-body");
+    body.append(argsSection.root, resultSection.root);
+    this.element.append(head, this.#toggle, body);
+  }
+  /**
+   * Record that a human approved or declined this call, as a line in the card.
+   *
+   * Approval used to leave no trace at all: a declined call became a tool
+   * result saying so, while an approved one simply ran, making the transcript
+   * of a gated call byte-identical to one that was never gated. The prompt is
+   * gone once answered, so this is where the decision lives.
+   */
+  recordDecision(kind) {
+    this.element.setAttribute("data-decision", kind);
+    this.#decision.textContent = kind === "approved" ? this.#strings.decisionApproved : this.#strings.decisionDeclined;
+    this.#decision.hidden = false;
   }
   /** Whether {@link settle} has already run (so a terminal sweep can skip it). */
   get settled() {
     return this.#settled;
   }
   /**
-   * Flip the status pill to ``status`` and, unless in `minimal` mode, append a
-   * collapsed body behind a click-to-expand toggle: the result alone (`full` /
-   * `inline`), or the args + result together (`compact`).
+   * Flip the status pill to `status` and fill in the result region, whose
+   * heading names the outcome (result / error / declined).
    */
   settle(status, text2) {
     if (this.#settled) {
@@ -6152,33 +6395,31 @@ var ToolCallCard = class {
     this.#settled = true;
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];
-    if (this.#mode === TOOL_DISPLAY.MINIMAL) {
-      return;
-    }
-    const toggle = document.createElement("button");
-    toggle.type = "button";
-    toggle.className = "tool-call-toggle";
-    toggle.setAttribute("part", "tool-card-toggle");
-    toggle.setAttribute("aria-expanded", "false");
-    const output = document.createElement("pre");
-    output.className = "tool-call-result";
-    output.setAttribute("part", "tool-card-result");
-    output.hidden = true;
-    if (this.#mode === TOOL_DISPLAY.COMPACT) {
-      toggle.textContent = this.#strings.details;
-      output.textContent = `args: ${JSON.stringify(this.#args)}
-
-${text2}`;
-    } else {
-      toggle.textContent = resultLabels(this.#strings)[status];
-      output.textContent = text2;
-    }
-    toggle.addEventListener("click", () => {
-      const expand = output.hidden;
-      output.hidden = !expand;
-      toggle.setAttribute("aria-expanded", String(expand));
-    });
-    this.element.append(toggle, output);
+    this.#resultLabel.textContent = resultLabels(this.#strings)[status];
+    this.#resultBody.textContent = formatPayload(text2);
+    this.#resultSection.hidden = false;
+  }
+  /** Build one labelled region of the body: a heading plus a payload block. */
+  #section(kind, labelText) {
+    const root = document.createElement("div");
+    root.className = `tool-call-section tool-call-section--${kind}`;
+    root.setAttribute("part", `tool-card-section tool-card-${kind}-section`);
+    const label = document.createElement("span");
+    label.className = "tool-call-section-label";
+    label.setAttribute("part", `tool-card-section-label tool-card-${kind}-label`);
+    label.textContent = labelText;
+    const body = document.createElement("pre");
+    body.className = `tool-call-${kind}`;
+    body.setAttribute("part", `tool-card-${kind}`);
+    root.append(label, body);
+    return { root, label, body };
+  }
+  #expanded() {
+    return this.element.getAttribute("data-expanded") === "true";
+  }
+  #setExpanded(expand) {
+    this.element.setAttribute("data-expanded", String(expand));
+    this.#toggle.setAttribute("aria-expanded", String(expand));
   }
 };
 
@@ -7593,7 +7834,11 @@ var AgUiChat = class extends HTMLElement {
   }
   /**
    * How much detail tool-call cards show, from the `data-tool-display`
-   * attribute (`minimal` / `compact` / `full`). Defaults to `full`.
+   * attribute (`minimal` / `inline` / `compact` / `full`). Defaults to `full`.
+   *
+   * Applied by the shadow CSS from the attribute itself, so changing it
+   * restyles every card already in the transcript rather than only the ones
+   * built afterwards.
    */
   get toolDisplay() {
     const attr = this.getAttribute("data-tool-display");
@@ -7647,6 +7892,22 @@ var AgUiChat = class extends HTMLElement {
     this.#attachTray?.dispose();
     this.#voice?.dispose();
   }
+  /**
+   * Read an opt-in flag attribute the way HTML reads a boolean attribute.
+   *
+   * Present means on — bare (`data-prompt-chips`), empty
+   * (`data-prompt-chips=""`) or any value except the literal `"false"`. These
+   * were compared against the string `"true"`, so writing the attribute bare —
+   * the spelling every native boolean attribute uses, and the one a reader
+   * reaches for first — silently *disabled* the feature it names, with nothing
+   * to indicate why the chips never appeared.
+   *
+   * `="false"` still turns it off, so an explicit opt-out keeps working.
+   */
+  #flag(name) {
+    const value = this.getAttribute(name);
+    return value !== null && value !== "false";
+  }
   /** Parse the inline `data-strings` JSON overrides (empty when absent/malformed). */
   #readStringOverrides() {
     const raw = this.getAttribute("data-strings");
@@ -7827,8 +8088,8 @@ Use the read_attachment tool with an id to read a file's contents.`
   }
   /** Wire the skill surfaces: opt-in flags, embedded catalog, optional fetch. */
   #initSkills() {
-    this.#skillsMenu.enableChips(this.getAttribute("data-prompt-chips") === "true");
-    this.#skillsMenu.enableSlash(this.getAttribute("data-slash-commands") === "true");
+    this.#skillsMenu.enableChips(this.#flag("data-prompt-chips"));
+    this.#skillsMenu.enableSlash(this.#flag("data-slash-commands"));
     this.#embedSkills = this.#readEmbeddedSkills();
     this.#recomputeSkills();
     void this.#fetchSkills();
@@ -8169,6 +8430,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     bubble.setAttribute("part", `message message-${role}`);
     if (role === MESSAGE_ROLE.ASSISTANT) {
       bubble.innerHTML = renderMarkdown(content, { allowImages: this.allowImages });
+      attachCopyButtons(bubble, this.#strings);
       this.#ensureGroup().appendChild(bubble);
     } else {
       this.#currentGroup = null;
@@ -8323,16 +8585,29 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#rail.addEventListener("click", () => this.setCollapsed(false));
     this.#root.append(style, this.#chat, this.#rail);
   }
-  /** Build a header control button (icon glyph + localized title/aria). */
+  /**
+   * Build a header control button: a named slot a host can project markup into,
+   * with the built-in glyph as the slot's fallback.
+   *
+   * The glyph used to be the button's own `textContent`, which left a host able
+   * to restyle the control through its `part` but unable to replace it — a CSS
+   * `content` override could swap one character for another, and nothing could
+   * supply a brand `<img>` or `<svg>`. This is the same slot-with-fallback
+   * idiom the header icon already uses, so existing embeds render exactly as
+   * before.
+   */
   #headerButton(modifier, label, glyph) {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `header-btn header-btn--${modifier}`;
-    button.setAttribute("part", `header-button ${modifier}-button`);
-    button.title = label;
-    button.setAttribute("aria-label", label);
-    button.textContent = glyph;
-    return button;
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.className = `header-btn header-btn--${modifier}`;
+    button2.setAttribute("part", `header-button ${modifier}-button`);
+    button2.title = label;
+    button2.setAttribute("aria-label", label);
+    const slot = document.createElement("slot");
+    slot.name = `icon-${modifier}`;
+    slot.append(document.createTextNode(glyph));
+    button2.append(slot);
+    return button2;
   }
   /**
    * An icon holder wrapping a `<slot>` so a host can project custom markup; with
@@ -8571,7 +8846,7 @@ Use the read_attachment tool with an id to read a file's contents.`
         request.message = confirmText;
       }
       this.#confirmAbort = new AbortController();
-      const decision = requestConfirmation(this.#messages, request, {
+      const decision = requestConfirmation(this.#ensureGroup(), request, {
         signal: this.#confirmAbort.signal,
         strings: this.#strings
       });
@@ -8579,6 +8854,7 @@ Use the read_attachment tool with an id to read a file's contents.`
       this.#messages.scrollTop = this.#messages.scrollHeight;
       const accepted = await decision;
       this.#confirmAbort = null;
+      card.recordDecision(accepted ? "approved" : "declined");
       if (!accepted) {
         const message = this.#strings.declinedAction;
         card.settle(TOOL_CALL_STATUS.DECLINED, message);
@@ -8676,6 +8952,7 @@ Use the read_attachment tool with an id to read a file's contents.`
         if (this.#streamDeltas <= 1) {
           this.#revealWords(bubble);
         }
+        attachCopyButtons(bubble, this.#strings);
         this.#streamingBubble = null;
       },
       onToolCall: (call) => {
@@ -8843,7 +9120,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     }
     const labelled = this.#resolveTool(call.name)?.parameters[X_SUMMARY_KEY];
     const summary = typeof labelled === "string" ? labelled : this.toolSummaries[call.name] ?? this.#toolCatalog[call.name] ?? prettifyToolName(call.name);
-    const card = new ToolCallCard(call.name, call.args, this.toolDisplay, summary, this.#strings);
+    const card = new ToolCallCard(call.name, call.args, summary, this.#strings);
     this.#toolCards.set(call.id, card);
     this.#ensureGroup().appendChild(card.element);
     this.#updateEmptyState();
@@ -8903,7 +9180,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.17.0";
+var VERSION = "0.19.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,