@artooi/ag-ui-web-component 0.18.0 → 0.20.0

package/src/ui/skills_menu.ts

@@ -141,6 +141,10 @@ export class SkillsMenu {
       button.className = "skill-chip";
       button.setAttribute("part", "skill-chip");
       button.textContent = skill.title;
+      // The chip stays a label — it is a one-click affordance, not something to
+      // memorise — but naming the command it stands for makes the two
+      // discoverable as the same thing.
+      button.title = `/${skill.name}`;
       button.addEventListener("click", () => this.#pick(skill));
       this.chips.appendChild(button);
     }
@@ -159,7 +163,15 @@ export class SkillsMenu {
       const title = document.createElement("span");
       title.className = "skill-item-title";
       title.setAttribute("part", "skill-item-title");
-      title.textContent = skill.title;
+
+      // The token leads, because it is the thing the user has to type. A row
+      // showing only the label taught the label and not the command, so the
+      // palette could not be used to learn its own vocabulary.
+      const token = document.createElement("code");
+      token.className = "skill-item-token";
+      token.setAttribute("part", "skill-item-token");
+      token.textContent = `/${skill.name}`;
+      title.append(token, document.createTextNode(` ${skill.title}`));
       item.appendChild(title);
 
       if (skill.description !== undefined) {

package/src/ui/styles.ts

@@ -168,7 +168,72 @@ export const STYLES = `
   padding-inline: max(var(--ag-ui-pad), calc((100% - var(--ag-ui-content-max-width)) / 2));
 }
 
-:host([placement="page"]) .input-row {
+:host([placement="page"]) /* Resize handle: a corner grip on a floating panel, an edge grip on a docked
+   one. Absent entirely where the placement is full-bleed, since there is
+   nothing to drag. */
+.resize-handle {
+  position: absolute;
+  z-index: 2;
+  background: transparent;
+  touch-action: none;
+}
+
+.resize-handle:focus-visible {
+  outline: 2px solid var(--ag-ui-accent);
+  outline-offset: -2px;
+}
+
+/* The grip sits at the corner the panel grows toward. Which corner that is
+   depends on the host's layout, not on placement, so the element measures it
+   and stamps data-resize-anchor with the edges that stay put.
+
+   Default (bottom-right pinned, the floating case) puts the grip top-left. */
+.resize-handle {
+  top: 0;
+  left: 0;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+}
+
+:host([data-resize-anchor~="left"]) .resize-handle {
+  left: auto;
+  right: 0;
+}
+
+:host([data-resize-anchor~="top"]) .resize-handle {
+  top: auto;
+  bottom: 0;
+}
+
+/* One axis flipped means the drag runs along the other diagonal. */
+:host([data-resize-anchor="top-right"]) .resize-handle,
+:host([data-resize-anchor="bottom-left"]) .resize-handle {
+  cursor: nesw-resize;
+}
+
+/* Docked: the placement owns the height, so only the inner edge is the user's. */
+:host([placement="sidebar"]) .resize-handle,
+:host([placement="side"]) .resize-handle {
+  top: 0;
+  bottom: auto;
+  width: 8px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+/* Full-bleed: nothing to drag. */
+:host([placement="full"]) .resize-handle,
+:host([placement="page"]) .resize-handle {
+  display: none;
+}
+
+.resize-handle[data-dragging] {
+  background: var(--ag-ui-accent);
+  opacity: 0.35;
+}
+
+.input-row {
   padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));
 }
 
@@ -772,10 +837,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;
@@ -805,6 +869,44 @@ 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. */
+.skill-item-token {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.92em;
+  color: var(--ag-ui-accent);
+  margin-right: 6px;
+}
+
+.tool-call-decision {
+  flex: none;
+  font-size: 11px;
+  font-style: italic;
+  color: var(--ag-ui-muted);
+}
+
 .tool-call-args,
 .tool-call-result {
   margin: 0;
@@ -819,6 +921,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;
@@ -838,6 +977,75 @@ export const STYLES = `
   content: "▾ ";
 }
 
+/* Resize handle: a corner grip on a floating panel, an edge grip on a docked
+   one. Absent entirely where the placement is full-bleed, since there is
+   nothing to drag. */
+.resize-handle {
+  position: absolute;
+  z-index: 2;
+  background: transparent;
+  touch-action: none;
+}
+
+.resize-handle:focus-visible {
+  outline: 2px solid var(--ag-ui-accent);
+  outline-offset: -2px;
+}
+
+/* The grip sits on the corner opposite the panel's anchor, because a resize
+   measures from whichever edge is not moving. Selected from the host attribute,
+   so switching placement moves the grip immediately.
+
+   Default is floating: pinned bottom-right, so the grip is top-left. */
+.resize-handle {
+  top: 0;
+  left: 0;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+}
+
+/* Embedded sits in normal flow, pinned top-left, so it grows bottom-right. */
+:host([placement="embedded"]) .resize-handle {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+}
+
+/* Pinned bottom-left, so the free corner is top-right. */
+:host([placement="bottom-left"]) .resize-handle {
+  left: auto;
+  right: 0;
+  cursor: nesw-resize;
+}
+
+/* Docked: the placement owns the height, so only the inner edge is the user's. */
+:host([placement="sidebar"]) .resize-handle,
+:host([placement="side"]) .resize-handle {
+  width: 8px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+/* Docked to the left, so the inner edge is the right-hand one. */
+:host([placement="sidebar"][data-side="left"]) .resize-handle {
+  left: auto;
+  right: 0;
+}
+
+/* Full-bleed: nothing to drag. */
+:host([placement="full"]) .resize-handle,
+:host([placement="page"]) .resize-handle {
+  display: none;
+}
+
+.resize-handle[data-dragging] {
+  background: var(--ag-ui-accent);
+  opacity: 0.35;
+}
+
 .input-row {
   display: flex;
   gap: 8px;
@@ -1315,9 +1523,12 @@ export const STYLES = `
   color: var(--ag-ui-muted);
 }
 
+/* The hint sits directly above the composer's top border, so a zero bottom
+   margin left the text touching the divider. */
 .skill-hint {
-  margin: 8px 12px 0;
+  margin: 8px 12px;
   font-size: 0.85em;
+  line-height: 1.4;
   color: var(--ag-ui-danger);
 }
 

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,21 @@ export interface UiStrings {
   toolError: string;
   /** Status pill on a declined call. */
   toolDeclined: string;
-  /** Toggle label revealing a successful result (full mode). */
+  /** Accessible label on the panel resize handle. */
+  resizePanel: string;
+  /** 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 ───────────────────────────────────────────────────────
@@ -221,7 +229,7 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
     "The page changed since you last looked at it. Call read_page to see the current page, then retry.",
   attachmentsStillUploading:
     "{n} file still uploading — it was not sent with this message and is still attached.",
-  skillNeeds: "“{title}” needs: {fields}",
+  skillNeeds: "“{title}” needs {fields} — fill it in below, then send.",
 
   message: "Message",
   inputPlaceholder: "Ask anything…",
@@ -237,6 +245,10 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   toolDone: "✓ done",
   toolError: "⚠ error",
   toolDeclined: "⊘ declined",
+  resizePanel: "Resize the chat panel",
+  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.18.0";
+export const VERSION: string = "0.20.0";