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

package/dist/index.js

@@ -58,7 +58,7 @@ function isSkill(value) {
     return false;
   }
   const record = value;
-  return typeof record["name"] === "string" && typeof record["title"] === "string" && typeof record["prompt"] === "string";
+  return typeof record["name"] === "string" && typeof record["title"] === "string" && (record["prompt"] === void 0 || typeof record["prompt"] === "string");
 }
 function parseSkills(value) {
   if (!Array.isArray(value)) {
@@ -471,7 +471,7 @@ var DEFAULT_UI_STRINGS = {
   runInterrupted: "The previous response didn\u2019t finish \u2014 the page changed before it arrived.",
   pageMoved: "The page changed since you last looked at it. Call read_page to see the current page, then retry.",
   attachmentsStillUploading: "{n} file still uploading \u2014 it was not sent with this message and is still attached.",
-  skillNeeds: "\u201C{title}\u201D needs: {fields}",
+  skillNeeds: "\u201C{title}\u201D needs {fields} \u2014 fill it in below, then send.",
   message: "Message",
   inputPlaceholder: "Ask anything\u2026",
   send: "Send",
@@ -485,6 +485,10 @@ var DEFAULT_UI_STRINGS = {
   toolDone: "\u2713 done",
   toolError: "\u26A0 error",
   toolDeclined: "\u2298 declined",
+  resizePanel: "Resize the chat panel",
+  decisionApproved: "approved by you",
+  decisionDeclined: "declined by you",
+  argumentsLabel: "Arguments",
   resultLabel: "Result",
   errorLabel: "Error",
   declinedLabel: "Declined",
@@ -1106,6 +1110,7 @@ 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");
@@ -1117,9 +1122,7 @@ function requestConfirmation(host, request, options = {}) {
         return;
       }
       settled = true;
-      cancel.disabled = true;
-      confirm2.disabled = true;
-      card.setAttribute("data-resolved", accepted ? "confirmed" : "declined");
+      card.remove();
       resolve(accepted);
     };
     cancel.addEventListener("click", () => close(false));
@@ -4119,6 +4122,76 @@ function renderMarkdown(text2, options) {
   return template.innerHTML.trim();
 }
 
+// src/ui/resize_handle.ts
+var MIN_WIDTH = 280;
+var MIN_HEIGHT = 240;
+function createResizeHandle(options) {
+  const handle = document.createElement("div");
+  handle.className = "resize-handle";
+  handle.setAttribute("part", "resize-handle");
+  handle.setAttribute("role", "separator");
+  handle.setAttribute("aria-label", options.label);
+  handle.tabIndex = 0;
+  const sizeAt = (axis, anchor, rect, x2, y2) => {
+    const width = anchor.x === "right" ? rect.right - x2 : x2 - rect.left;
+    const clamped = { width: Math.max(MIN_WIDTH, width) };
+    if (axis !== "both") {
+      return clamped;
+    }
+    const height = anchor.y === "bottom" ? rect.bottom - y2 : y2 - rect.top;
+    return { ...clamped, height: Math.max(MIN_HEIGHT, height) };
+  };
+  handle.addEventListener("pointerdown", (event) => {
+    const axis = options.axis();
+    if (axis === "none") {
+      return;
+    }
+    const anchor = options.anchor();
+    const rect = options.rect();
+    const onMove = (move) => {
+      options.apply(sizeAt(axis, anchor, rect, move.clientX, move.clientY));
+    };
+    const onUp = (up) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      handle.removeAttribute("data-dragging");
+      options.commit(sizeAt(axis, anchor, rect, up.clientX, up.clientY));
+    };
+    handle.setAttribute("data-dragging", "true");
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    event.preventDefault();
+  });
+  handle.addEventListener("keydown", (event) => {
+    const axis = options.axis();
+    if (axis === "none") {
+      return;
+    }
+    const anchor = options.anchor();
+    const rect = options.rect();
+    const step = event.shiftKey ? 64 : 16;
+    const outward = anchor.x === "right" ? -1 : 1;
+    const width = rect.right - rect.left;
+    const height = rect.bottom - rect.top;
+    let next = null;
+    if (event.key === "ArrowLeft") {
+      next = { width: Math.max(MIN_WIDTH, width - step * outward) };
+    } else if (event.key === "ArrowRight") {
+      next = { width: Math.max(MIN_WIDTH, width + step * outward) };
+    } else if (axis === "both" && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+      const grow = event.key === (anchor.y === "bottom" ? "ArrowUp" : "ArrowDown");
+      next = { height: Math.max(MIN_HEIGHT, height + (grow ? step : -step)) };
+    }
+    if (next === null) {
+      return;
+    }
+    event.preventDefault();
+    options.apply(next);
+    options.commit(next);
+  });
+  return handle;
+}
+
 // src/ui/reveal_words.ts
 function collectTextNodes(root, out) {
   for (const child of Array.from(root.childNodes)) {
@@ -4290,6 +4363,7 @@ var SkillsMenu = class {
       button2.className = "skill-chip";
       button2.setAttribute("part", "skill-chip");
       button2.textContent = skill.title;
+      button2.title = `/${skill.name}`;
       button2.addEventListener("click", () => this.#pick(skill));
       this.chips.appendChild(button2);
     }
@@ -4306,7 +4380,11 @@ var SkillsMenu = class {
       const title = document.createElement("span");
       title.className = "skill-item-title";
       title.setAttribute("part", "skill-item-title");
-      title.textContent = skill.title;
+      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 !== void 0) {
         const desc = document.createElement("span");
@@ -4488,7 +4566,72 @@ var 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));
 }
 
@@ -5092,10 +5235,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;
@@ -5125,6 +5267,44 @@ 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. */
+.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;
@@ -5139,6 +5319,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;
@@ -5158,6 +5375,75 @@ var STYLES = `
   content: "\u25BE ";
 }
 
+/* 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;
@@ -5635,9 +5921,12 @@ var 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);
 }
 
@@ -6231,24 +6520,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");
@@ -6264,24 +6561,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) {
@@ -6290,33 +6615,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));
   }
 };
 
@@ -6467,6 +6790,13 @@ var AgUiClient = class {
   #executeTool;
   #resolveInterrupts;
   #onPersist;
+  /**
+   * Message ids the server has already closed, so a reuse can be reported.
+   *
+   * Per client rather than per run: the merge happens across runs, which is the
+   * case a per-run set would miss entirely.
+   */
+  #closedMessageIds = /* @__PURE__ */ new Set();
   #connectionLostMessage;
   // Set by cancel(); reset at the top of each #run(). Checked by the loop so
   // a cancel between frontend-tool rounds doesn't start another round.
@@ -6638,14 +6968,23 @@ var AgUiClient = class {
   }
   #buildSubscriber(pending, runState) {
     const h = this.#handlers;
+    const closed = this.#closedMessageIds;
     return {
       onRunInitialized() {
         h.onRunStart();
       },
+      onTextMessageStartEvent({ event }) {
+        if (closed.has(event.messageId)) {
+          console.warn(
+            `<ag-ui-chat>: the server reused message id "${event.messageId}", which was already closed. Its content will be appended to that earlier message rather than starting a new one, and the merged result is what gets persisted. Issue a fresh id per message.`
+          );
+        }
+      },
       onTextMessageContentEvent({ textMessageBuffer }) {
         h.onTextDelta(textMessageBuffer);
       },
-      onTextMessageEndEvent({ textMessageBuffer }) {
+      onTextMessageEndEvent({ event, textMessageBuffer }) {
+        closed.add(event.messageId);
         h.onTextEnd(textMessageBuffer);
       },
       onToolCallEndEvent({ event, toolCallName, toolCallArgs }) {
@@ -7193,6 +7532,7 @@ var CONNECT_TIME_ATTRIBUTES = [
   "data-icon-url"
 ];
 var COLLAPSED_KEY = "ag-ui-chat:collapsed";
+var SIZE_KEY = "ag-ui-chat:size";
 var THEME_KEY = "ag-ui-chat:theme";
 var AgUiChat = class extends HTMLElement {
   /** Agent factory; override to inject a custom or fake agent (tests). */
@@ -7541,9 +7881,13 @@ var AgUiChat = class extends HTMLElement {
   }
   /** Attributes the element reacts to after it has been connected. */
   static get observedAttributes() {
-    return ["title-text", ...CONNECT_TIME_ATTRIBUTES];
+    return ["title-text", "placement", ...CONNECT_TIME_ATTRIBUTES];
   }
   attributeChangedCallback(name, previous, value) {
+    if (name === "placement") {
+      requestAnimationFrame(() => this.#syncResizeAnchor());
+      return;
+    }
     if (name === "title-text") {
       this.#title.textContent = value ?? this.#strings.title;
       return;
@@ -7731,7 +8075,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");
@@ -7745,6 +8093,8 @@ var AgUiChat = class extends HTMLElement {
   }
   connectedCallback() {
     this.#storageNs = this.id !== "" ? this.id : this.endpoint;
+    this.#applySize(this.#readSize());
+    requestAnimationFrame(() => this.#syncResizeAnchor());
     this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
     if (this.getAttribute("data-theme-toggle") !== null) {
       const saved = this.#readScopedItem(THEME_KEY);
@@ -8020,21 +8370,57 @@ Use the read_attachment tool with an id to read a file's contents.`
     }
     this.#skillsMenu.setSkills([...merged.values()]);
   }
-  /** Pre-fill (or send) a picked skill's prompt, filling its placeholders. */
+  /**
+   * Act on a picked skill.
+   *
+   * A skill that ships no `prompt` is **server-resolved**: the catalog carries
+   * only its name and label, and picking it sends the bare `/name` token for
+   * the agent to expand — from the harness `Skills` capability, or from the
+   * server's own instructions. That is the shape to prefer, because the prompt
+   * then never reaches the browser at all: a skill is often where a project's
+   * internal workflow is written down most plainly, and a catalog endpoint is a
+   * plain GET.
+   *
+   * A skill that does carry a `prompt` keeps the older behaviour — the client
+   * fills its `{placeholder}`s from the page and sends (or pre-fills) the text.
+   * Right for a user-facing convenience, and for placeholders only the page can
+   * supply.
+   *
+   * Either way a pick now **sends**, rather than parking text in the composer
+   * for a second click; `sendImmediately: false` opts back into pre-filling.
+   */
   #applySkill(skill) {
+    if (skill.prompt === void 0) {
+      this.#skillHint.hidden = true;
+      void this.sendMessage(`/${skill.name}`);
+      return;
+    }
     const { text: text2, missing } = fillTemplate(skill.prompt, this.skillContext());
     if (missing.length > 0) {
       this.#skillHint.textContent = this.#strings.skillNeeds.replace("{title}", skill.title).replace("{fields}", missing.join(", "));
       this.#skillHint.hidden = false;
+      this.#input.value = text2;
+      this.#input.focus();
+      this.#selectFirstPlaceholder(text2);
       return;
     }
     this.#skillHint.hidden = true;
     this.#input.value = text2;
-    if (skill.sendImmediately === true) {
-      void this.#submit();
-    } else {
+    if (skill.sendImmediately === false) {
       this.#input.focus();
+      return;
     }
+    void this.#submit();
+  }
+  /**
+   * Put the caret on the first unresolved placeholder, selected.
+   *
+   * Typing then replaces it, which is the shortest path from "this skill needs
+   * a topic" to a sendable prompt.
+   */
+  #selectFirstPlaceholder(text2) {
+    const start = text2.indexOf("{");
+    this.#input.setSelectionRange(start, text2.indexOf("}", start) + 1);
   }
   /** Whether the widget is collapsed (reflected as the `collapsed` attribute). */
   get collapsed() {
@@ -8082,6 +8468,102 @@ Use the read_attachment tool with an id to read a file's contents.`
     sessionStorage.setItem(this.#storageKey(THEME_KEY), next);
     this.#syncThemeGlyph();
   }
+  /**
+   * Which axes the current placement allows.
+   *
+   * A full-bleed layout is `100vw`/`100vh` by definition and cannot be resized
+   * at all; a docked panel owns its height, leaving only its inner edge. Read
+   * per interaction, because `placement` is a live attribute.
+   */
+  #resizeAxis() {
+    switch (this.getAttribute("placement")) {
+      case "full":
+      case "page":
+        return "none";
+      case "sidebar":
+      case "side":
+        return "width";
+      default:
+        return "both";
+    }
+  }
+  /**
+   * Which edges the layout is holding still, by measuring rather than guessing.
+   *
+   * A resize has to be computed from the edge that does not move, and which
+   * edge that is belongs to the **host's layout**, not to `placement`: a
+   * floating panel is pinned bottom-right, while an embedded one goes wherever
+   * the page's own CSS puts it — flex-start, flex-end, a grid cell. Mapping
+   * placement to a corner got this wrong for any host that right-aligns the
+   * element, and the symptom is bad enough to read as a broken control: the
+   * panel shrinks when dragged outward, travelling by its opposite corner.
+   *
+   * So: nudge the size by a pixel, see which edges stayed put, and undo. One
+   * forced reflow per drag, which is cheap next to being wrong.
+   */
+  #measureAnchor() {
+    const before = this.getBoundingClientRect();
+    const width = this.style.getPropertyValue("--ag-ui-width");
+    const height = this.style.getPropertyValue("--ag-ui-height");
+    this.#applySize({ width: before.width + 1, height: before.height + 1 });
+    const after = this.getBoundingClientRect();
+    this.#restoreProperty("--ag-ui-width", width);
+    this.#restoreProperty("--ag-ui-height", height);
+    return {
+      x: Math.abs(after.left - before.left) < 0.5 ? "left" : "right",
+      y: Math.abs(after.top - before.top) < 0.5 ? "top" : "bottom"
+    };
+  }
+  /** Stamp the measured anchor so the shadow CSS can place the grip. */
+  #syncResizeAnchor() {
+    if (!this.#connected) {
+      return;
+    }
+    const anchor = this.#measureAnchor();
+    this.setAttribute("data-resize-anchor", `${anchor.y}-${anchor.x}`);
+  }
+  /** Put a custom property back to a previous value, or remove it if there was none. */
+  #restoreProperty(name, value) {
+    if (value === "") {
+      this.style.removeProperty(name);
+      return;
+    }
+    this.style.setProperty(name, value);
+  }
+  /**
+   * Write a dragged size onto the host as custom properties.
+   *
+   * Properties rather than inline `width` / `height`: the placement rules set
+   * those same properties, so an inline dimension would outrank them and a
+   * panel dragged while floating would keep that width after switching to
+   * fullscreen.
+   */
+  #applySize(size) {
+    if (size.width !== void 0) {
+      this.style.setProperty("--ag-ui-width", `${size.width}px`);
+    }
+    if (size.height !== void 0) {
+      this.style.setProperty("--ag-ui-height", `${size.height}px`);
+    }
+  }
+  /** Persist a dragged size per tab, alongside the collapsed/theme preferences. */
+  #persistSize(size) {
+    const stored = { ...this.#readSize(), ...size };
+    sessionStorage.setItem(this.#storageKey(SIZE_KEY), JSON.stringify(stored));
+  }
+  /** The persisted size for this instance, or an empty record. */
+  #readSize() {
+    const raw = this.#readScopedItem(SIZE_KEY);
+    if (raw === null) {
+      return {};
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      return typeof parsed === "object" && parsed !== null ? parsed : {};
+    } catch {
+      return {};
+    }
+  }
   /** This instance's namespaced form of an origin-scoped storage key. */
   #storageKey(base) {
     return this.#storageNs === "" ? base : `${base}:${this.#storageNs}`;
@@ -8476,9 +8958,32 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#rail.setAttribute("aria-label", this.#strings.expand);
     this.#rail.append(this.#iconElement("launcher", "launcher-icon", "\u{1F4AC}"));
     this.#rail.addEventListener("click", () => this.setCollapsed(false));
+    this.#chat.append(
+      createResizeHandle({
+        axis: () => this.#resizeAxis(),
+        anchor: () => this.#measureAnchor(),
+        rect: () => this.getBoundingClientRect(),
+        apply: (size) => this.#applySize(size),
+        commit: (size) => {
+          this.#persistSize(size);
+          this.#syncResizeAnchor();
+        },
+        label: this.#strings.resizePanel
+      })
+    );
     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 button2 = document.createElement("button");
     button2.type = "button";
@@ -8486,7 +8991,10 @@ Use the read_attachment tool with an id to read a file's contents.`
     button2.setAttribute("part", `header-button ${modifier}-button`);
     button2.title = label;
     button2.setAttribute("aria-label", label);
-    button2.textContent = glyph;
+    const slot = document.createElement("slot");
+    slot.name = `icon-${modifier}`;
+    slot.append(document.createTextNode(glyph));
+    button2.append(slot);
     return button2;
   }
   /**
@@ -8726,7 +9234,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
       });
@@ -8734,6 +9242,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);
@@ -8794,6 +9303,7 @@ Use the read_attachment tool with an id to read a file's contents.`
       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;
+      card?.recordDecision(approved ? "approved" : "declined");
       if (approved) {
         responses[interrupt.id] = { status: "resolved", payload: { approved: true } };
       } else {
@@ -8999,7 +9509,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();
@@ -9059,7 +9569,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.18.0";
+var VERSION = "0.20.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,