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

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/tools/tool_catalog.ts

@@ -36,6 +36,11 @@ export interface ToolCatalogHost {
   readonly askUserRenderer: () => QuestionRenderer | null;
   /** The decision a run is suspended on, which a Stop abandons. */
   readonly decision: PendingDecision;
+  /**
+   * Mark the card of ``callId`` as asking the user, or no longer. The call id is
+   * absent for a handler run outside a tool call, which has no card to mark.
+   */
+  readonly setAsking: (callId: string | undefined, asking: boolean) => void;
   /** The current answer group, opening one if none is open. */
   readonly ensureGroup: () => HTMLDivElement;
   /** The resolved string table. */
@@ -293,17 +298,25 @@ export class ToolCatalog {
     // A host-supplied renderer takes full control of the UI.
     const renderer = this.#host.askUserRenderer();
     let answer: string;
-    if (renderer === null) {
-      answer = await builtIn();
-    } else {
-      // Awaited here rather than inside a helper, so an answering renderer
-      // takes exactly as many turns to be heard as it always did.
-      try {
-        // Called on the element, as `this.askUserRenderer(...)` always was.
-        answer = await renderer.call(this.#host.element, request, { signal });
-      } catch (error) {
-        answer = await this.#afterRendererFailed(error, signal, callId, builtIn);
+    // The card says it is asking for as long as a question is open on it, an
+    // answer, a Stop and a renderer that failed alike, so the step group's row
+    // does not read as running while the run waits on a person.
+    this.#host.setAsking(callId, true);
+    try {
+      if (renderer === null) {
+        answer = await builtIn();
+      } else {
+        // Awaited here rather than inside a helper, so an answering renderer
+        // takes exactly as many turns to be heard as it always did.
+        try {
+          // Called on the element, as `this.askUserRenderer(...)` always was.
+          answer = await renderer.call(this.#host.element, request, { signal });
+        } catch (error) {
+          answer = await this.#afterRendererFailed(error, signal, callId, builtIn);
+        }
       }
+    } finally {
+      this.#host.setAsking(callId, false);
     }
     this.#host.decision.close();
     this.#host.updateEmptyState();

package/src/tools/tool_dispatch.ts

@@ -166,6 +166,7 @@ export class ToolDispatch {
     // transcript places itself against its own card, and by the time it runs the
     // card is no longer reachable by id.
     this.#host.transcript.setCardElement(call.id, card.element);
+    this.#host.transcript.holdRunning(call.id, card);
     // Scoped out of this round's catalog ⇒ not a frontend tool of ours, for
     // this round. A host that offers `delete_record` only on the page where
     // deleting makes sense has said something about *this* run, and a call
@@ -254,17 +255,26 @@ export class ToolDispatch {
       // to the message list made it a sibling *after* the group, so anything
       // that streamed afterwards rendered above it and the prompt drifted to
       // the foot of the turn no matter when it was asked.
-      const decision = requestConfirmation(this.#host.transcript.ensureGroup(), request, {
-        signal,
-        strings: this.#host.strings(),
-        // Offered only where it can be honoured -- see `#confirmationRule`.
-        ...(rule === "destructive"
-          ? { onAlwaysAllow: () => this.#sessionApproved.add(call.name) }
-          : {}),
-      });
-      this.#host.transcript.updateEmptyState();
-      this.#host.transcript.follow();
-      const accepted = await decision;
+      //
+      // The card says it is asking for as long as the prompt is open, however it
+      // ends, so a step group's row reads "waiting for you" rather than running.
+      card.setAsking(true);
+      let accepted: boolean;
+      try {
+        const decision = requestConfirmation(this.#host.transcript.ensureGroup(), request, {
+          signal,
+          strings: this.#host.strings(),
+          // Offered only where it can be honoured -- see `#confirmationRule`.
+          ...(rule === "destructive"
+            ? { onAlwaysAllow: () => this.#sessionApproved.add(call.name) }
+            : {}),
+        });
+        this.#host.transcript.updateEmptyState();
+        this.#host.transcript.follow();
+        accepted = await decision;
+      } finally {
+        card.setAsking(false);
+      }
       this.#host.decision.close();
       // A handover while the card was open declines it, as any Stop does, but
       // the transcript the decline would be drawn into is the next principal's
@@ -458,6 +468,11 @@ export class ToolDispatch {
           request.args = card.args;
         }
         card?.mark(TOOL_CALL_STATUS.DEFERRED);
+        // Before either renderer runs: the built-in card focuses its approve
+        // button as it is drawn, and a folded step group has no box to focus in.
+        if (card !== undefined) {
+          this.#host.transcript.revealStep(card);
+        }
         // The built-in card renders into the gated call's own card, falling back
         // to the answer group when the interrupt names no call we hold one for.
         const builtIn = (): Promise<boolean> =>

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/interrupts/confirmation_styles.ts

@@ -28,8 +28,6 @@ export const CONFIRMATION_STYLES: string = `
   padding: 8px 10px;
   max-height: 140px;
   overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
   font-size: 12px;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   background: var(--_assistant-bg);

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/placement/surface_for.ts

@@ -3,6 +3,13 @@ import type { ResizeAxis } from "./resize_handle.js";
 /**
  * What a collapsed panel shrinks to.
  *
+ * Only `null` versus not-`null` is read today: every caller asks whether the
+ * surface can collapse at all, never which target it collapses to. The three
+ * names below therefore describe the surface rather than drive it, and nothing
+ * relies on them (changing one fails only the test of this record). The
+ * bottom-bar collapse is expected to read or replace them, and a reader that
+ * does should come with a test outside this record's own.
+ *
  * - `launcher` -- the round button in a corner.
  * - `rail` -- the slim full-height edge the sidebar docks against; the same
  *   launcher element, shaped by the stylesheet.
@@ -29,7 +36,11 @@ export type CollapseTarget = "launcher" | "rail" | "header" | null;
  * under this directory); this is the part of a surface that code decides.
  */
 export interface Surface {
-  /** What collapsing shrinks the panel to; `null` when it cannot collapse. */
+  /**
+   * What collapsing shrinks the panel to; `null` when it cannot collapse. Only
+   * the `null` test is authoritative: the non-null names are descriptive (see
+   * {@link CollapseTarget}), and nothing branches on which one a surface has.
+   */
   readonly collapseTo: CollapseTarget;
   /**
    * Whether a gesture may move the launcher. The rest have nowhere to put it:

package/src/ui/progress/thoughts_styles.ts

@@ -48,8 +48,6 @@ export const THOUGHTS_STYLES: string = `
   border-left: 2px solid var(--_border);
   max-height: 220px;
   overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
   white-space: pre-wrap;
   word-break: break-word;
   font-family: inherit;

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,18 @@ export class ToolCallCard {
     if (this.#settled) {
       return;
     }
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
+  }
+
+  /**
+   * Say whether a prompt is open on this call, a question it asked or a
+   * confirmation it needs. A flag of its own beside the status, which stays
+   * `pending`: the call is still running as far as the status goes, and a card
+   * display mode that reads the status draws it exactly as before. The step
+   * group reads the flag to tell a call waiting on a person from one working.
+   */
+  setAsking(asking: boolean): void {
+    this.element.toggleAttribute("data-asking", asking);
   }
 
   /**
@@ -315,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,
@@ -326,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.
    *