@artooi/ag-ui-web-component 0.46.0 → 0.47.0

package/src/dom/animations.ts

@@ -8,17 +8,7 @@
 
 import { showHighlightOverlay } from "./highlight_overlay.js";
 import { setNativeChecked, setNativeValue } from "./native_setter.js";
-
-/** Ring colour when the host page has not themed `--ag-ui-accent`. */
-const ACCENT = "#4f46e5";
-
-/**
- * Fallback for the box-shadow rings, which read as a soft halo rather than a
- * line and so carry their own alpha.
- */
-const ACCENT_HALO = "rgba(79, 70, 229, 0.4)";
-
-const ACCENT_PROPERTY = "--ag-ui-accent";
+import { ringColor } from "./ring_color.js";
 
 function delay(ms: number): Promise<void> {
   return new Promise<void>((resolve) => {
@@ -48,19 +38,23 @@ function motionDelay(ms: number): Promise<void> {
 }
 
 /**
- * Resolve the accent colour from the target's own computed style.
+ * Which `<ag-ui-chat>` a ring speaks for, so it is drawn in that chat's colour.
  *
- * `--ag-ui-accent` inherits, so reading it off the element about to be touched
- * picks up whatever the host's cascade produced there, and a themed page is
- * flashed in its own colour rather than this package's indigo.
+ * The ring is drawn in the host's page, which a token set on the chat never
+ * reaches, so the chat is read directly. Unset, it is the most recently
+ * connected chat; a page with two widgets names the one acting.
  */
-function accentColor(el: HTMLElement, fallback: string): string {
-  const themed = window.getComputedStyle(el).getPropertyValue(ACCENT_PROPERTY).trim();
-  return themed === "" ? fallback : themed;
+export interface RingOwnerOptions {
+  /** The chat whose ring colour and accent to use. Default: the latest connected. */
+  chat?: HTMLElement;
 }
 
-function ringShadow(el: HTMLElement): string {
-  return `0 0 0 3px ${accentColor(el, ACCENT_HALO)}`;
+/**
+ * The soft halo the press and toggle rings draw: the ring colour at 40%.
+ * Mixed rather than given its own alpha, so it follows whichever colour won.
+ */
+function ringShadow(el: HTMLElement, chat: HTMLElement | undefined): string {
+  return `0 0 0 3px color-mix(in srgb, ${ringColor(el, chat)} 40%, transparent)`;
 }
 
 /** An element whose `value` can be typed into. */
@@ -93,7 +87,7 @@ export async function typeInto(
   el.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-export interface HighlightClickOptions {
+export interface HighlightClickOptions extends RingOwnerOptions {
   /** Milliseconds to hold the highlight before clicking. Default 280. */
   highlightMs?: number;
 }
@@ -106,7 +100,7 @@ export async function highlightThenClick(
   const highlightMs = options.highlightMs ?? 280;
   const previousOutline = el.style.outline;
   const previousOffset = el.style.outlineOffset;
-  el.style.outline = `2px solid ${accentColor(el, ACCENT)}`;
+  el.style.outline = `2px solid ${ringColor(el, options.chat)}`;
   el.style.outlineOffset = "2px";
   await delay(highlightMs);
   el.style.outline = previousOutline;
@@ -176,10 +170,14 @@ const FLASH_MS = 1200;
 /** Share of {@link FLASH_MS} spent fading out rather than holding. */
 const FLASH_FADE_RATIO = 1 / 3;
 
-export interface FlashOptions {
+export interface FlashOptions extends RingOwnerOptions {
   /** Total milliseconds the ring is on screen, hold plus fade. Default 1200. */
   flashMs?: number;
-  /** Ring colour. Defaults to the target's `--ag-ui-accent`, else the package accent. */
+  /**
+   * Ring colour. Defaults to `--ag-ui-highlight-ring-color` (on the target,
+   * then on the chat), then the target's `--ag-ui-accent`, then the chat's
+   * accent.
+   */
   color?: string;
   /**
    * Dim everything except the target.
@@ -226,6 +224,7 @@ async function flashRing(
       gradient: options.gradient === true,
       ...(options.color === undefined ? {} : { color: options.color }),
       ...(options.ringPadding === undefined ? {} : { padding: options.ringPadding }),
+      ...(options.chat === undefined ? {} : { chat: options.chat }),
     });
     await delay(flashMs);
     dismiss();
@@ -234,7 +233,7 @@ async function flashRing(
   const previousOutline = el.style.outline;
   const previousOffset = el.style.outlineOffset;
   const previousTransition = el.style.transition;
-  const color = options.color ?? accentColor(el, ACCENT);
+  const color = options.color ?? ringColor(el, options.chat);
   // outline, not box-shadow: a shadow paints outside the border box, so any
   // overflow:hidden ancestor sharing the target's box (a card, a table cell)
   // clips the whole ring away while the helper still reports success.
@@ -273,7 +272,7 @@ export function focusWithFlash(el: HTMLElement, options: FlashOptions = {}): Pro
   return flashRing(el, options, true);
 }
 
-export interface PressOptions {
+export interface PressOptions extends RingOwnerOptions {
   /** Milliseconds to hold the pressed state before clicking. Default 140. */
   pressMs?: number;
 }
@@ -290,7 +289,7 @@ export async function pressThenClick(el: HTMLElement, options: PressOptions = {}
   const previousShadow = el.style.boxShadow;
   el.style.transition = "transform 80ms ease";
   el.style.transform = "scale(0.96)";
-  el.style.boxShadow = ringShadow(el);
+  el.style.boxShadow = ringShadow(el, options.chat);
   await motionDelay(pressMs);
   el.style.transform = previousTransform;
   el.style.transition = previousTransition;
@@ -298,7 +297,7 @@ export async function pressThenClick(el: HTMLElement, options: PressOptions = {}
   el.click();
 }
 
-export interface SelectOptions {
+export interface SelectOptions extends RingOwnerOptions {
   /** Milliseconds to hold the highlight before committing. Default 220. */
   highlightMs?: number;
 }
@@ -330,7 +329,7 @@ export async function selectOption(
   const highlightMs = options.highlightMs ?? 220;
   const previousOutline = el.style.outline;
   const previousOffset = el.style.outlineOffset;
-  el.style.outline = `2px solid ${accentColor(el, ACCENT)}`;
+  el.style.outline = `2px solid ${ringColor(el, options.chat)}`;
   el.style.outlineOffset = "2px";
   await motionDelay(highlightMs);
   setNativeValue(el, option.value);
@@ -340,7 +339,7 @@ export async function selectOption(
   el.style.outlineOffset = previousOffset;
 }
 
-export interface ToggleOptions {
+export interface ToggleOptions extends RingOwnerOptions {
   /** Milliseconds to hold the flash. Default 200. */
   flashMs?: number;
 }
@@ -356,7 +355,7 @@ export async function toggleControl(
 ): Promise<void> {
   const flashMs = options.flashMs ?? 200;
   const previousShadow = el.style.boxShadow;
-  el.style.boxShadow = ringShadow(el);
+  el.style.boxShadow = ringShadow(el, options.chat);
   await motionDelay(flashMs);
   setNativeChecked(el, checked);
   el.dispatchEvent(new Event("input", { bubbles: true }));

package/src/dom/highlight_overlay.ts

@@ -1,7 +1,5 @@
 import { HIGHLIGHT_OVERLAY_Z_INDEX } from "../constants.js";
-
-/** The package accent, used when the host has themed nothing. */
-const ACCENT = "#4f46e5";
+import { ringColor } from "./ring_color.js";
 
 /** How the overlay is drawn around the element being pointed at. */
 export interface HighlightOverlayOptions {
@@ -9,8 +7,14 @@ export interface HighlightOverlayOptions {
   readonly scrim?: boolean;
   /** Draw the ring as a moving gradient rather than a flat colour. Default false. */
   readonly gradient?: boolean;
-  /** Ring colour, and the flat fallback for the gradient. */
+  /**
+   * Ring colour, and the flat fallback for the gradient. Default:
+   * `--ag-ui-highlight-ring-color` on the target, then on the chat, then the
+   * target's `--ag-ui-accent`, then the chat's accent.
+   */
   readonly color?: string;
+  /** The chat whose ring colour and accent to use. Default: the latest connected. */
+  readonly chat?: HTMLElement;
   /** Gap between the target's box and the ring. Default 4. */
   readonly padding?: number;
   /** Corner radius of the cut-out and the ring. Default: the target's own. */
@@ -205,7 +209,7 @@ function safeColor(value: string | undefined): string | null {
  * the padding box, leaving the frame.
  */
 function ringPaint(target: HTMLElement, options: HighlightOverlayOptions): string {
-  const color = safeColor(options.color) ?? tokenOn(target, "--ag-ui-accent", ACCENT);
+  const color = safeColor(options.color) ?? ringColor(target, options.chat);
   if (options.gradient !== true) {
     return `border-color: ${color}`;
   }

package/src/dom/ring_color.ts

@@ -0,0 +1,85 @@
+import { ChatRegistration } from "../core/chat_registry.js";
+
+/** The public ring token, read from the target and then from the chat. */
+const RING_TOKEN = "--ag-ui-highlight-ring-color";
+
+/** The accent a host themes its page with, read from the target. */
+const ACCENT_TOKEN = "--ag-ui-accent";
+
+/**
+ * The accent the chat actually resolved, its theme's default included. Read
+ * through the private alias because the public token is unset on a page that
+ * themed nothing, which is exactly the page this exists for.
+ */
+const CHAT_ACCENT = "--_accent";
+
+/** The package indigo, for a page with no chat and no theming at all. */
+const PACKAGE_ACCENT = "#4f46e5";
+
+/**
+ * The colour a highlight ring is drawn in when the caller passed none.
+ *
+ * In order: `--ag-ui-highlight-ring-color` on the target, the same token on
+ * the chat, the target's `--ag-ui-accent`, the chat's resolved accent, the
+ * package indigo. The target's accent stays above the chat's own default so a
+ * host that themes `--ag-ui-accent` on its page keeps the rings it has; the
+ * ring token sits above both so a host can keep the ring apart from the accent.
+ *
+ * `chat` defaults to the most recently connected `<ag-ui-chat>`, the common
+ * page with one widget. A page with two passes the one the ring speaks for.
+ */
+export function ringColor(target: HTMLElement, chat?: HTMLElement): string {
+  const onTarget = readToken(target, RING_TOKEN);
+  if (onTarget !== "") {
+    return onTarget;
+  }
+  const owner = chat ?? ChatRegistration.latest();
+  const onChat = owner === null ? "" : resolveOn(owner, RING_TOKEN);
+  if (onChat !== "") {
+    return onChat;
+  }
+  const accent = readToken(target, ACCENT_TOKEN);
+  if (accent !== "") {
+    return accent;
+  }
+  const chatAccent = owner === null ? "" : resolveOn(owner, CHAT_ACCENT);
+  return chatAccent === "" ? PACKAGE_ACCENT : chatAccent;
+}
+
+function readToken(el: HTMLElement, name: string): string {
+  return window.getComputedStyle(el).getPropertyValue(name).trim();
+}
+
+/**
+ * The custom property `name` on `chat`, as the colour it computes to there, or
+ * `""` when it is unset or not a colour.
+ *
+ * Resolved inside the chat rather than handed to the target, because the
+ * chat's colours are `light-dark()` pairs and a custom property keeps them
+ * unresolved: written onto an element in the page, the pair would pick its
+ * half by the page's colour scheme, so a dark widget on a light page would ring
+ * in its light-mode accent. A probe inside the shadow tree inherits the chat's
+ * scheme, and its computed `color` is the resolved value.
+ *
+ * An element with no open shadow root (a host passing something other than a
+ * chat) is read as it is, unresolved; that is the best it offers.
+ */
+function resolveOn(chat: HTMLElement, name: string): string {
+  const value = readToken(chat, name);
+  const root = chat.shadowRoot;
+  if (value === "" || root === null) {
+    return value;
+  }
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  probe.style.color = value;
+  // An unparseable value leaves the declaration empty, and the probe would
+  // then report the colour it inherits instead of saying it has none.
+  if (probe.style.color === "") {
+    return "";
+  }
+  root.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved;
+}

package/src/index.ts

@@ -17,6 +17,7 @@ export {
   STATE_EVENT,
   SUBMIT_EVENT,
   SUGGESTIONS_ACTIVITY_TYPE,
+  THREAD_EVENT,
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,
@@ -63,6 +64,7 @@ export type { InvalidateDetail } from "./core/events/invalidate_detail.js";
 export type { RunFinishedDetail } from "./core/events/run_finished_detail.js";
 export type { StateDetail } from "./core/events/state_detail.js";
 export type { SubmitDetail } from "./core/events/submit_detail.js";
+export type { ThreadDetail } from "./core/events/thread_detail.js";
 export type { ToggleDetail } from "./core/events/toggle_detail.js";
 export type { ToolRun } from "./core/events/tool_run.js";
 export type { UnreadDetail } from "./core/events/unread_detail.js";
@@ -89,6 +91,7 @@ export {
   type PressOptions,
   prefersReducedMotion,
   pressThenClick,
+  type RingOwnerOptions,
   type ScrollOptions,
   type SelectOptions,
   scrollIntoCenterView,

package/src/ui/history/conversation_history.ts

@@ -9,6 +9,7 @@ import type {
   ClientConversationStore,
   NavigationCheckpoint,
 } from "../../core/conversation_store.js";
+import type { ThreadDetail } from "../../core/events/thread_detail.js";
 import type { MessageRole } from "../../core/message_role.js";
 import { RunIndex } from "../../core/run_index.js";
 import { toolStatusFromOutcome } from "../../core/tool_outcome.js";
@@ -119,6 +120,11 @@ export interface ConversationHistoryHost {
   readonly resetState: () => void;
   /** Swap the composer between Send and Stop, which the composer owns. */
   readonly setRunning: (running: boolean) => void;
+  /**
+   * Say the conversation on screen changed, once its transcript is replaced.
+   * The element fills in the thread it replaced, which it last reported.
+   */
+  readonly threadChanged: (threadId: string, reason: ThreadDetail["reason"]) => void;
 }
 
 /**
@@ -335,7 +341,7 @@ export class ConversationHistory {
     this.#host.conversationStore().setActiveThread(threadId);
     this.#threadId = threadId;
     this.#host.setRunning(false);
-    await this.rehydrate();
+    await this.rehydrate("switch");
   }
 
   /** Rename a thread, then reload the list that shows its title. */
@@ -355,6 +361,8 @@ export class ConversationHistory {
       this.#host.resetState();
       this.adoptActiveThread();
       this.#host.setRunning(false);
+      // No replay to wait for: the thread that took its place is a fresh one.
+      this.#host.threadChanged(this.#threadId, "delete");
     }
     void this.refreshDrawer();
   }
@@ -628,8 +636,11 @@ export class ConversationHistory {
    * for the run it would have resumed -- unless what replaced it is a restore
    * of the same conversation, still current, which answers for that run
    * instead; see `#forgetStopped`.
+   *
+   * `reason` is what the thread event this restore ends with reports as why
+   * the conversation changed. A restore that is stopped reports nothing.
    */
-  async rehydrate(): Promise<void> {
+  async rehydrate(reason: ThreadDetail["reason"]): Promise<void> {
     // Claimed before awaiting, and checked by `#restoring` wherever the restore
     // has waited or run host code. With a slow remote store, picking thread B
     // then C interleaved both replays into one transcript, and New chat drew
@@ -727,11 +738,24 @@ export class ConversationHistory {
           }
         }
       }
+      if (checkpoint === null) {
+        this.#noticeIfRunUnfinished(messages);
+      }
+      // Said once the transcript is the restored one, and only by a restore
+      // still current: one that was stopped returned above, so two quick
+      // switches report the second alone. Before a resume, because the resume
+      // is a run, and waiting for it reported the change a whole answer late.
+      this.#host.threadChanged(threadId, reason);
       if (checkpoint !== null) {
+        // A listener is host code, and can stop the restore as a replayed
+        // renderer can. Resuming then answered the call into the conversation
+        // that replaced it, and left the checkpoint for a later visit to resume.
+        if (!this.#restoring(generation)) {
+          this.#forgetStopped(store, threadId, checkpoint);
+          return;
+        }
         await this.#resumeFrom(checkpoint, generation);
-        return;
       }
-      this.#noticeIfRunUnfinished(messages);
     } finally {
       // The resumed run starting has let go of the hold already, as a send's
       // does, and a request that then fails still started one: the client

package/src/ui/placement/embedded_styles.ts

@@ -4,8 +4,8 @@ export const EMBEDDED_STYLES: string = `
    the widget lives in the host's own layout (fixes overlay/z-index clashes). */
 :host([placement="embedded"]) {
   --_position: var(--ag-ui-position, static);
-  --_width: var(--ag-ui-width, 100%);
-  --_height: var(--ag-ui-height, 100%);
+  --_width: var(--_drag-width, var(--ag-ui-width, 100%));
+  --_height: var(--_drag-height, var(--ag-ui-height, 100%));
   --_max-width: var(--ag-ui-max-width, 100%);
   --_max-height: var(--ag-ui-max-height, 100%);
   --_shadow: var(--ag-ui-shadow, none);

package/src/ui/placement/panel_placement.ts

@@ -27,6 +27,17 @@ import { surfaceFor } from "./surface_for.js";
 /** Per-tab persistence key for a dragged panel size. */
 const SIZE_KEY = "ag-ui-chat:size";
 
+/**
+ * The private properties a dragged size lives in. They are not the public
+ * `--ag-ui-width` / `--ag-ui-height` tokens, which belong to the host: an
+ * inline write there outranked every host rule and was read back by the
+ * small-viewport block, so a size dragged in a wide window leaked into the
+ * phone shape. The placement rules read these before the host token; the
+ * small-viewport block does not read them at all.
+ */
+const DRAG_WIDTH = "--_drag-width";
+const DRAG_HEIGHT = "--_drag-height";
+
 /** Per-tab persistence key for a dragged launcher position. */
 const LAUNCHER_KEY = "ag-ui-chat:launcher";
 
@@ -189,6 +200,20 @@ export class PanelPlacement {
     this.#applySize(this.#readSize());
   }
 
+  /**
+   * Drop the dragged size and its stored copy, so the placement's own size and
+   * the host's tokens apply again. For a host entering a sized state of its
+   * own, which a user's drag would otherwise outrank.
+   */
+  resetSize(): void {
+    this.#host.element.style.removeProperty(DRAG_WIDTH);
+    this.#host.element.style.removeProperty(DRAG_HEIGHT);
+    this.#host.clearPreference(SIZE_KEY);
+    // The anchor was measured against the dragged box; the resting one may
+    // pin different edges.
+    this.syncResizeAnchor();
+  }
+
   /**
    * A zero-sized box carrying the host's viewport insets as padding, so they
    * can be read back as used pixel lengths. See the `.viewport-probe` rule for
@@ -414,8 +439,8 @@ export class PanelPlacement {
    */
   #measureAnchor(): ResizeAnchor {
     const before = this.#host.element.getBoundingClientRect();
-    const width = this.#host.element.style.getPropertyValue("--ag-ui-width");
-    const height = this.#host.element.style.getPropertyValue("--ag-ui-height");
+    const width = this.#host.element.style.getPropertyValue(DRAG_WIDTH);
+    const height = this.#host.element.style.getPropertyValue(DRAG_HEIGHT);
     // Shrink first. Growing is the obvious probe and cannot answer the question
     // at a size already resting against max-width or max-height: the box does
     // not change, no edge moves, and every clamped axis then reads as pinned on
@@ -431,8 +456,8 @@ export class PanelPlacement {
     const grown = shrunk.x === null || shrunk.y === null ? this.#probeAnchor(before, 1) : shrunk;
     // Restore exactly what was there, including "nothing" — leaving a probe
     // value behind would pin a panel that had been sizing itself.
-    this.#restoreProperty("--ag-ui-width", width);
-    this.#restoreProperty("--ag-ui-height", height);
+    this.#restoreProperty(DRAG_WIDTH, width);
+    this.#restoreProperty(DRAG_HEIGHT, height);
     return {
       // Neither direction moved it: the axis cannot be resized at all, so the
       // floating default is the best answer available and is the one the
@@ -497,7 +522,7 @@ export class PanelPlacement {
   /**
    * Write a dragged size onto the host, on the axes this placement leaves free.
    *
-   * Writing the custom property rather than inline `width` / `height` does not
+   * Writing a custom property rather than inline `width` / `height` does not
    * by itself leave placement in charge: an inline custom property still
    * outranks a `:host([placement=…])` rule setting the same property, so a
    * height dragged while floating would cap a docked sidebar asking for
@@ -518,10 +543,10 @@ export class PanelPlacement {
     // symmetry nobody has asked for. The limit that matters, staying inside
     // what the host left free, is enforced above.
     if (size.width !== undefined) {
-      this.#host.element.style.setProperty("--ag-ui-width", `${size.width}px`);
+      this.#host.element.style.setProperty(DRAG_WIDTH, `${size.width}px`);
     }
     if (size.height !== undefined && axis === "both") {
-      this.#host.element.style.setProperty("--ag-ui-height", `${size.height}px`);
+      this.#host.element.style.setProperty(DRAG_HEIGHT, `${size.height}px`);
     }
   }
 
@@ -535,10 +560,10 @@ export class PanelPlacement {
   releaseOwnedAxes(): void {
     const axis = this.#resizeAxis();
     if (axis !== "both") {
-      this.#host.element.style.removeProperty("--ag-ui-height");
+      this.#host.element.style.removeProperty(DRAG_HEIGHT);
     }
     if (axis === "none") {
-      this.#host.element.style.removeProperty("--ag-ui-width");
+      this.#host.element.style.removeProperty(DRAG_WIDTH);
     }
   }
 

package/src/ui/placement/preset_styles.ts

@@ -12,7 +12,7 @@ export const PRESET_STYLES: string = `
 
 :host([placement="side"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);

package/src/ui/placement/sidebar_styles.ts

@@ -7,7 +7,7 @@ export const SIDEBAR_STYLES: string = `
    host-managed push instead. */
 :host([placement="sidebar"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);

package/src/ui/placement/small_viewport_styles.ts

@@ -17,6 +17,11 @@ export const SMALL_VIEWPORT_STYLES: string = `
    fine-pointered and small, and conflating the two gets both wrong. What the
    pointer decides is which controls make sense, further down.
 
+   The size the user dragged is deliberately not read here. The desktop
+   placements read it before the host token, and this block restates the sizes
+   without it, so a persisted or freshly dragged size cannot change the shape
+   of a phone, and a window narrowed after a drag goes full-bleed.
+
    Two placements are left alone. "page" is already this shape. "embedded" sits
    in a box the host sized and placed, and taking that over would break the app
    shell it was embedded into -- the host is the only party that knows whether

package/src/ui/progress/tool_call_card.ts

@@ -197,9 +197,7 @@ export class ToolCallCard {
 
     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-expanded", "false");
 
     const head = document.createElement("div");
@@ -221,8 +219,7 @@ export class ToolCallCard {
 
     this.#status = document.createElement("span");
     this.#status.className = "tool-call-status";
-    this.#status.setAttribute("part", "tool-card-status");
-    this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
+    this.#setStatus(TOOL_CALL_STATUS.PENDING);
 
     this.#decision = document.createElement("span");
     this.#decision.className = "tool-call-decision";
@@ -283,8 +280,7 @@ export class ToolCallCard {
     if (this.#settled) {
       return;
     }
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
   }
 
   /**
@@ -326,8 +322,7 @@ export class ToolCallCard {
       return;
     }
     this.#settled = true;
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
     this.#resultLabel.textContent = resultLabels(this.#strings)[status];
     this.#renderPayload(
       this.#resultBody,
@@ -337,6 +332,21 @@ export class ToolCallCard {
     this.#resultSection.hidden = false;
   }
 
+  /**
+   * Write the status everywhere it is read from, in one place so they cannot
+   * disagree: `data-status` for the shadow CSS, the pill's text, and the part
+   * lists. `::part()` takes no attribute selector, so the card and its pill also
+   * name the status as a part (`tool-card-error`, `tool-card-status-error`), the
+   * modifier convention a run notice uses, and a host styles failures alone.
+   * Setting the whole list replaces the previous modifier.
+   */
+  #setStatus(status: ToolCallStatus): void {
+    this.element.setAttribute("data-status", status);
+    this.element.setAttribute("part", `tool-card tool-card-${status}`);
+    this.#status.setAttribute("part", `tool-card-status tool-card-status-${status}`);
+    this.#status.textContent = statusLabels(this.#strings)[status];
+  }
+
   /**
    * Fill one body region, offering it to the host formatter first.
    *

package/src/ui/progress/tool_step_group.ts

@@ -225,6 +225,9 @@ export class ToolStepGroup {
       state = "error";
     }
     this.element.setAttribute("data-state", state);
+    // The state is also a part, because `::part()` takes no attribute selector;
+    // the whole list is rewritten so the old modifier goes.
+    this.element.setAttribute("part", `tool-group tool-group-${state}`);
     this.element.setAttribute("data-count", String(total));
 
     const only = total === 1 ? steps[0] : undefined;

package/src/ui/shell/token_styles.ts

@@ -300,8 +300,8 @@ export const TOKEN_STYLES: string = `
      grid/flex layout) to embed it in the page flow instead of floating. */
   --_position: var(--ag-ui-position, fixed);
   --_z-index: var(--ag-ui-z-index, 2147483000);
-  --_width: var(--ag-ui-width, 380px);
-  --_height: var(--ag-ui-height, 560px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 380px));
+  --_height: var(--_drag-height, var(--ag-ui-height, 560px));
   /* The gutter a resting floating panel keeps between itself and the edge of
      the box the host left free. One number, because the inset below spends it
      and the cap beneath has to know it was spent. */

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.46.0";
+export const VERSION: string = "0.47.0";