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

package/src/ui/checkpoint_menu.ts

@@ -26,6 +26,8 @@ export class CheckpointMenu {
   readonly #onPick: (runId: string, verb: CheckpointVerb) => void;
   readonly #list: HTMLDivElement;
   readonly #heading: HTMLSpanElement;
+  /** What had focus before the panel opened, restored on close. */
+  #lastFocused: HTMLElement | null = null;
   #strings: UiStrings;
   #runs: readonly RunRow[] = [];
 
@@ -41,6 +43,10 @@ export class CheckpointMenu {
     this.element.setAttribute("part", "checkpoints");
     this.element.setAttribute("role", "dialog");
     this.element.setAttribute("aria-label", strings.checkpoints);
+    // Focusable as a fallback: with no continuable runs the panel holds no
+    // controls at all, and a dialog that cannot take focus strands the
+    // keyboard user outside it with no way back except Tab-ing blind.
+    this.element.tabIndex = -1;
     this.element.hidden = true;
 
     const header = document.createElement("div");
@@ -57,12 +63,7 @@ export class CheckpointMenu {
     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. */
@@ -80,11 +81,61 @@ export class CheckpointMenu {
   }
 
   open(): void {
+    if (this.open_) {
+      return;
+    }
+    // Remember what had focus so it is restored on close, then move focus into
+    // the panel so a keyboard user lands inside the dialog rather than being
+    // left behind it. The thread drawer already does this; a dialog that takes
+    // no focus is one a keyboard user cannot reach and a screen reader does not
+    // announce, however correct its role and label.
+    this.#lastFocused = this.#activeElement() as HTMLElement | null;
     this.element.hidden = false;
+    (this.#focusables()[0] ?? this.element).focus();
   }
 
   close(): void {
+    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(): Element | null {
+    return (this.element.getRootNode() as Document | ShadowRoot).activeElement;
+  }
+
+  /** The panel's tabbable controls, in document order. */
+  #focusables(): HTMLElement[] {
+    return Array.from(this.element.querySelectorAll<HTMLElement>("button, [tabindex]")).filter(
+      (el) => !el.hidden,
+    );
+  }
+
+  /** Escape closes; Tab is trapped so focus cannot wander behind the dialog. */
+  #onKeydown(event: KeyboardEvent): void {
+    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_(): boolean {

package/src/ui/confirmation_card.ts

@@ -40,8 +40,14 @@ export interface ConfirmationOptions {
  * Unlike a modal overlay, the card lives in the transcript right where the
  * action is — it reads naturally after the assistant's explanation and never
  * steals focus from the page. Resolves ``true`` on confirm, ``false`` on
- * cancel. The card stays in the transcript as a resolved record (buttons
- * disabled, `data-resolved` set) rather than vanishing.
+ * cancel.
+ *
+ * **Answering it removes it.** A prompt and a record are two different objects:
+ * the prompt owns the user's attention until it is answered, and the record of
+ * what was decided belongs in the transcript, in order, scrolling with
+ * everything else. The tool card this gates is that record — it settles to
+ * `done` or `declined` and carries the decision. Leaving the spent form in
+ * place made an answered question read as outstanding.
  */
 export function requestConfirmation(
   host: Node & ParentNode,
@@ -66,6 +72,8 @@ export function requestConfirmation(
     args.className = "confirm-args";
     args.setAttribute("part", "confirm-args");
     args.textContent = JSON.stringify(request.args, null, 2);
+    // A call with no arguments rendered the string "{}" in a box of its own.
+    args.hidden = Object.keys(request.args).length === 0;
 
     const actions = document.createElement("div");
     actions.className = "confirm-actions";
@@ -80,9 +88,11 @@ export function requestConfirmation(
         return;
       }
       settled = true;
-      cancel.disabled = true;
-      confirm.disabled = true;
-      card.setAttribute("data-resolved", accepted ? "confirmed" : "declined");
+      // The prompt leaves once it has been answered. What stays is the tool
+      // card next to it, which settles to the outcome and scrolls with the rest
+      // of the transcript -- a record of the action rather than a spent form
+      // sitting there as a standing reminder of one.
+      card.remove();
       resolve(accepted);
     };
 

package/src/ui/styles.ts

@@ -512,6 +512,52 @@ export const 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);
@@ -726,10 +772,9 @@ export const STYLES = `
   }
 }
 
-/* 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. */
-.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;
@@ -759,6 +804,37 @@ export const 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;
@@ -773,6 +849,43 @@ export const 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;

package/src/ui/tool_call_card.ts

@@ -1,4 +1,4 @@
-import { TOOL_CALL_STATUS, TOOL_DISPLAY } from "../constants.js";
+import { TOOL_CALL_STATUS, type TOOL_DISPLAY } from "../constants.js";
 import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
 
 /** Any state a tool-call card can be in. */
@@ -20,7 +20,7 @@ function statusLabels(strings: UiStrings): Record<ToolCallStatus, string> {
   };
 }
 
-/** Toggle-button label for each settled outcome's collapsible body (full mode). */
+/** Section-heading text for each settled outcome's result region. */
 function resultLabels(strings: UiStrings): Record<SettledStatus, string> {
   return {
     [TOOL_CALL_STATUS.DONE]: strings.resultLabel,
@@ -29,19 +29,32 @@ function resultLabels(strings: UiStrings): Record<SettledStatus, string> {
   };
 }
 
+/** Pretty-print a JSON payload; fall back to the raw text if it isn't JSON. */
+function formatPayload(text: string): string {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    return text;
+  }
+}
+
 /**
  * A live tool-call card for the chat transcript.
  *
- * Construction renders a status icon, the tool name, and a `running…` status
- * pill; in `full` mode it also shows the pretty-printed arguments inline.
- * {@link settle} later flips the pill to the outcome and — depending on the
- * {@link ToolDisplayMode} — appends a collapsible body:
+ * Construction renders a status icon, the tool name, a `running…` pill, and the
+ * card's body: an **arguments** region and a **result** region, each with its own
+ * heading and its own `part`. {@link settle} fills in the result and flips the
+ * pill. Both payloads are pretty-printed, and the two are never concatenated —
+ * the previous compact layout ran `args: {...}` and the result together in one
+ * `<pre>`, leaving no way to see where the call ended and the answer began.
  *
- * - `inline` — no args; the result behind its own toggle (like `full` but with
- *   the card chrome stripped to a single light row).
- * - `minimal` — pill only; nothing to expand.
- * - `compact` — one "Details" toggle revealing args *and* result together.
- * - `full` — the result (or error / decline message) behind its own toggle.
+ * **The card renders one DOM shape in every display mode, and CSS decides what
+ * shows.** That is what makes `data-tool-display` behave like `data-answer-well`
+ * — flip it on the host and every card already on screen re-reads it. Building a
+ * different structure per mode meant only cards created *after* the change
+ * picked it up, so the setting appeared not to work until the next conversation.
+ * Visibility is selected from the host attribute rather than a value copied onto
+ * the card at construction, for the same reason.
  *
  * The leading icon carries no text of its own: its glyph/spinner is drawn by
  * the shadow CSS keyed off the card's `data-status`, so a host themes it via
@@ -57,20 +70,20 @@ export class ToolCallCard {
   readonly element: HTMLDivElement;
 
   readonly #status: HTMLSpanElement;
-  readonly #mode: ToolDisplayMode;
-  readonly #args: Record<string, unknown>;
+  readonly #decision: HTMLSpanElement;
+  readonly #toggle: HTMLButtonElement;
+  readonly #resultSection: HTMLDivElement;
+  readonly #resultLabel: HTMLSpanElement;
+  readonly #resultBody: HTMLPreElement;
   readonly #strings: UiStrings;
   #settled = false;
 
   constructor(
     name: string,
     args: Record<string, unknown>,
-    mode: ToolDisplayMode = TOOL_DISPLAY.FULL,
     summary?: string,
     strings: UiStrings = DEFAULT_UI_STRINGS,
   ) {
-    this.#mode = mode;
-    this.#args = args;
     this.#strings = strings;
 
     this.element = document.createElement("div");
@@ -78,7 +91,7 @@ export class ToolCallCard {
     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";
@@ -103,16 +116,56 @@ export class ToolCallCard {
     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);
+    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);
+    // A call with no arguments renders an empty object in a box of its own,
+    // which is a frame around nothing. Drop the region instead.
+    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;
+    // Nothing to show until `settle` supplies it; a pending card would
+    // otherwise expand onto an empty region.
+    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);
+  }
 
-    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);
-    }
+  /**
+   * 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: "approved" | "declined"): void {
+    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). */
@@ -121,50 +174,55 @@ export class ToolCallCard {
   }
 
   /**
-   * 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: SettledStatus, text: string): void {
     // Idempotent: a duplicate `TOOL_CALL_RESULT`, or a replayed tool message
-    // for an already-settled card, must not append a second toggle+body. The
-    // first settle wins; later calls are ignored.
+    // for an already-settled card, must not overwrite the first outcome.
     if (this.#settled) {
       return;
     }
     this.#settled = true;
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#resultLabel.textContent = resultLabels(this.#strings)[status];
+    this.#resultBody.textContent = formatPayload(text);
+    this.#resultSection.hidden = false;
+  }
 
-    if (this.#mode === TOOL_DISPLAY.MINIMAL) {
-      return;
-    }
+  /** Build one labelled region of the body: a heading plus a payload block. */
+  #section(
+    kind: string,
+    labelText: string,
+  ): {
+    root: HTMLDivElement;
+    label: HTMLSpanElement;
+    body: HTMLPreElement;
+  } {
+    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 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)}\n\n${text}`;
-    } else {
-      toggle.textContent = resultLabels(this.#strings)[status];
-      output.textContent = text;
-    }
+    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;
 
-    toggle.addEventListener("click", () => {
-      const expand = output.hidden;
-      output.hidden = !expand;
-      toggle.setAttribute("aria-expanded", String(expand));
-    });
+    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(): boolean {
+    return this.element.getAttribute("data-expanded") === "true";
+  }
 
-    this.element.append(toggle, output);
+  #setExpanded(expand: boolean): void {
+    this.element.setAttribute("data-expanded", String(expand));
+    this.#toggle.setAttribute("aria-expanded", String(expand));
   }
 }

package/src/ui/ui_strings.ts

@@ -89,13 +89,19 @@ export interface UiStrings {
   toolError: string;
   /** Status pill on a declined call. */
   toolDeclined: string;
-  /** Toggle label revealing a successful result (full mode). */
+  /** Note on a tool card whose call a human approved. */
+  decisionApproved: string;
+  /** Note on a tool card whose call a human declined. */
+  decisionDeclined: string;
+  /** Heading over a tool card's arguments region. */
+  argumentsLabel: string;
+  /** Heading over a tool card's result region when the call succeeded. */
   resultLabel: string;
-  /** Toggle label revealing an error (full mode). */
+  /** Heading over a tool card's result region when the call failed. */
   errorLabel: string;
-  /** Toggle label revealing a declined call (full mode). */
+  /** Heading over a tool card's result region when the call was declined. */
   declinedLabel: string;
-  /** Toggle label revealing args + result together (compact mode). */
+  /** Label on the toggle that expands a tool card's body. */
   details: string;
 
   // ── Confirmation card ───────────────────────────────────────────────────────
@@ -168,6 +174,12 @@ export interface UiStrings {
   /** Hours ago. Token: `{n}`. */
   hoursAgo: string;
   /** Title of the checkpoint panel. */
+  /** Label on a code block's copy button. */
+  copyCode: string;
+  /** Shown on the copy button after the code reached the clipboard. */
+  copied: string;
+  /** Shown when the clipboard was unavailable or refused the write. */
+  copyFailed: string;
   checkpoints: string;
   /** Empty state when no run can be continued. */
   noCheckpoints: string;
@@ -191,6 +203,9 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   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",
@@ -228,6 +243,9 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   toolDone: "✓ done",
   toolError: "⚠ error",
   toolDeclined: "⊘ declined",
+  decisionApproved: "approved by you",
+  decisionDeclined: "declined by you",
+  argumentsLabel: "Arguments",
   resultLabel: "Result",
   errorLabel: "Error",
   declinedLabel: "Declined",

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.17.0";
+export const VERSION: string = "0.19.0";