@artooi/ag-ui-web-component 0.10.0 → 0.11.0

package/src/core/agui_client.ts

@@ -1,5 +1,11 @@
-import { type AbstractAgent, type AgentSubscriber, randomUUID } from "@ag-ui/client";
-import type { Context, Message, Tool } from "@ag-ui/core";
+import {
+  type AbstractAgent,
+  type AgentSubscriber,
+  buildResumeArray,
+  type RunAgentParameters,
+  randomUUID,
+} from "@ag-ui/client";
+import type { Context, Interrupt, Message, ResumeEntry, Tool } from "@ag-ui/core";
 import { MAX_TOOL_ROUNDS } from "../constants.js";
 import type { AttachmentRef } from "./attachment.js";
 
@@ -33,6 +39,27 @@ export interface ToolExecution {
  */
 export type ExecuteTool = (call: AgUiToolCall) => Promise<ToolExecution | null>;
 
+/**
+ * One user decision for a server-side-tool approval interrupt. Structurally
+ * matches `@ag-ui/client`'s (non-exported) `ResumeResponse`, the payload
+ * {@link buildResumeArray} turns into a `ResumeEntry`: `resolved` approves (with
+ * an optional `payload`, e.g. `{ approved: true }`), `cancelled` denies.
+ */
+export type InterruptResponse = { status: "resolved"; payload?: unknown } | { status: "cancelled" };
+
+/**
+ * Resolves the approval interrupts a run finished on, keyed by interrupt id.
+ *
+ * When a gated **server-side** tool defers instead of executing, the run
+ * finishes on an AG-UI interrupt outcome; the host renders an approval card per
+ * interrupt and returns each decision here, and the loop resumes the run with
+ * the answers. Omit for agents that never gate server-side tools — an
+ * unresolved interrupt then simply ends the loop.
+ */
+export type ResolveInterrupts = (
+  interrupts: readonly Interrupt[],
+) => Promise<Record<string, InterruptResponse>>;
+
 /**
  * Callbacks the {@link AgUiClient} invokes as a run progresses. The host
  * (the `<ag-ui-chat>` element) implements these to render streaming text and
@@ -93,6 +120,11 @@ export interface AgUiClientConfig extends AgUiRunInputs {
   handlers: AgUiClientHandlers;
   /** Executes frontend tool calls. Omit for server-only tool sets. */
   executeTool?: ExecuteTool;
+  /**
+   * Resolves server-side-tool approval interrupts. Omit when no server-side
+   * tool is gated for approval — an interrupt then ends the loop unanswered.
+   */
+  resolveInterrupts?: ResolveInterrupts;
   /**
    * Invoked with the latest history whenever it changes, so the host can
    * persist it for durability across page reloads. Omit to keep the
@@ -134,6 +166,7 @@ export class AgUiClient {
   readonly #getTools: () => Tool[];
   readonly #getContext: () => Context[];
   readonly #executeTool: ExecuteTool | null;
+  readonly #resolveInterrupts: ResolveInterrupts | null;
   readonly #onPersist: (messages: readonly Message[]) => void;
   readonly #connectionLostMessage: string;
   // Set by cancel(); reset at the top of each #run(). Checked by the loop so
@@ -146,6 +179,7 @@ export class AgUiClient {
     this.#getTools = config.getTools ?? (() => []);
     this.#getContext = config.getContext ?? (() => []);
     this.#executeTool = config.executeTool ?? null;
+    this.#resolveInterrupts = config.resolveInterrupts ?? null;
     this.#onPersist = config.onPersist ?? (() => {});
     this.#connectionLostMessage = config.connectionLostMessage ?? "Connection lost";
   }
@@ -241,6 +275,11 @@ export class AgUiClient {
   }
 
   async #runLoop(): Promise<void> {
+    // Carries the resolved approval answers into the *next* run when a round
+    // finished on a server-side-tool interrupt. Distinct from the public
+    // resume() navigation-reload path (which continues an unfinished
+    // frontend-tool round after a page load) — this stays inside one #run().
+    let resume: ResumeEntry[] | undefined;
     for (let round = 0; round < MAX_TOOL_ROUNDS; round += 1) {
       // A cancel during the previous round's frontend-tool execution lands
       // here: the running handler completed, but no further round starts.
@@ -248,11 +287,16 @@ export class AgUiClient {
         return;
       }
       const pending: AgUiToolCall[] = [];
-      const runState = { terminal: false, errored: false };
-      await this.#agent.runAgent(
-        { tools: this.#getTools(), context: this.#getContext() },
-        this.#buildSubscriber(pending, runState),
-      );
+      const runState: RunState = { terminal: false, errored: false, interrupts: [] };
+      const params: RunAgentParameters = {
+        tools: this.#getTools(),
+        context: this.#getContext(),
+      };
+      if (resume !== undefined) {
+        params.resume = resume;
+      }
+      await this.#agent.runAgent(params, this.#buildSubscriber(pending, runState));
+      resume = undefined;
       this.#onPersist(this.#agent.messages);
       // Cancelled mid-stream: the user said stop — don't execute the tool
       // calls collected before the abort.
@@ -272,6 +316,22 @@ export class AgUiClient {
       if (runState.errored) {
         return;
       }
+      // A gated server-side tool deferred instead of executing: the run finished
+      // on an interrupt outcome. Ask the host to resolve each interrupt, then
+      // re-enter the loop carrying the answers — the follow-up run runs or denies
+      // the tool (its result streams back as TOOL_CALL_RESULT). Takes precedence
+      // over the frontend-tool sweep below: a server-side tool isn't ours to run.
+      if (runState.interrupts.length > 0) {
+        if (this.#resolveInterrupts === null) {
+          return;
+        }
+        const responses = await this.#resolveInterrupts(runState.interrupts);
+        if (this.#cancelled) {
+          return;
+        }
+        resume = buildResumeArray(runState.interrupts, responses);
+        continue;
+      }
       if (this.#executeTool === null || pending.length === 0) {
         return;
       }
@@ -301,10 +361,7 @@ export class AgUiClient {
     }
   }
 
-  #buildSubscriber(
-    pending: AgUiToolCall[],
-    runState: { terminal: boolean; errored: boolean },
-  ): AgentSubscriber {
+  #buildSubscriber(pending: AgUiToolCall[], runState: RunState): AgentSubscriber {
     const h = this.#handlers;
     return {
       onRunInitialized() {
@@ -340,6 +397,16 @@ export class AgUiClient {
       onReasoningEndEvent() {
         h.onReasoningEnd();
       },
+      onRunFinishedEvent(params) {
+        // RUN_FINISHED is terminal for both a normal finish and an interrupt.
+        // Capturing the interrupts here (rather than reading the agent's
+        // `pendingInterrupts` field afterwards) keeps the loop self-contained
+        // and independent of that field's cross-run clearing semantics.
+        runState.terminal = true;
+        if (params.outcome === "interrupt") {
+          runState.interrupts = params.interrupts;
+        }
+      },
       onRunErrorEvent({ event }) {
         runState.terminal = true;
         runState.errored = true;
@@ -353,6 +420,14 @@ export class AgUiClient {
   }
 }
 
+/** Per-run mutable flags the subscriber writes and {@link AgUiClient} reads. */
+interface RunState {
+  terminal: boolean;
+  errored: boolean;
+  /** Approval interrupts a run finished on (empty for a normal finish). */
+  interrupts: Interrupt[];
+}
+
 /**
  * Whether a rejection came from aborting the run's fetch. Belt-and-suspenders
  * with the `#cancelled` flag: some `@ag-ui/client` versions re-throw the

package/src/index.ts

@@ -27,6 +27,8 @@ export {
   type AgUiToolCall,
   ConnectionLostError,
   type ExecuteTool,
+  type InterruptResponse,
+  type ResolveInterrupts,
   type ToolExecution,
 } from "./core/agui_client.js";
 export { type AttachmentRef, messageAttachments } from "./core/attachment.js";
@@ -98,12 +100,24 @@ export {
   type RouteWithParams,
 } from "./tools/route_map.js";
 export { createStateHookTools, type StateHook } from "./tools/state_hook.js";
+export {
+  type ApprovalOptions,
+  type ApprovalRenderer,
+  type ApprovalRequest,
+  requestApproval,
+} from "./ui/approval_card.js";
 export {
   type ConfirmationOptions,
   type ConfirmationRequest,
   requestConfirmation,
 } from "./ui/confirmation_card.js";
 export { prettifyToolName } from "./ui/prettify_tool_name.js";
+export {
+  type QuestionOptions,
+  type QuestionRenderer,
+  type QuestionRequest,
+  requestQuestion,
+} from "./ui/question_card.js";
 export { type RenderMarkdownOptions, renderMarkdown } from "./ui/render_markdown.js";
 export {
   type SettledStatus,

package/src/ui/approval_card.ts

@@ -0,0 +1,119 @@
+import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
+
+/** What the inline approval card displays for one server-side-tool interrupt. */
+export interface ApprovalRequest {
+  /**
+   * Human-readable prompt from the AG-UI interrupt (e.g.
+   * `Approve delete_thing({…})?`). Falls back to the generic
+   * {@link UiStrings.approvalPrompt} when the interrupt carries no message.
+   */
+  message?: string;
+  /** Tool name, surfaced as a `data-tool-name` attribute for styling/tests. */
+  toolName?: string;
+}
+
+/** Build a labelled action button. */
+function actionButton(modifier: string, label: string): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `approval-btn approval-btn--${modifier}`;
+  button.setAttribute("part", `approval-button approval-${modifier}`);
+  button.textContent = label;
+  return button;
+}
+
+/** Options for {@link requestApproval}. */
+export interface ApprovalOptions {
+  /**
+   * Aborting this signal resolves the card as **denied** (buttons disabled,
+   * `data-resolved="denied"`) — the hook a Stop control uses to dismiss a
+   * pending approval when the user cancels the whole run.
+   */
+  signal?: AbortSignal;
+  /** Localized strings; defaults to the English {@link DEFAULT_UI_STRINGS}. */
+  strings?: UiStrings;
+}
+
+/**
+ * A fully custom renderer for a server-side-tool approval, set via
+ * `AgUiChat.approvalRenderer`. Receives the {@link ApprovalRequest} (the
+ * interrupt's message + tool name) and an `AbortSignal` that fires when the run
+ * is stopped, and resolves `true` to approve or `false` to deny. When provided
+ * it **replaces** the built-in {@link requestApproval} card entirely — the host
+ * owns the DOM, so it can render a native modal, a framework component, or
+ * anything else. See the `strings` / `::part()` seams for styling the built-in
+ * card instead of replacing it.
+ */
+export type ApprovalRenderer = (
+  request: ApprovalRequest,
+  options: { signal: AbortSignal },
+) => Promise<boolean>;
+
+/**
+ * Append an inline **approval** card to ``host`` and resolve when the user
+ * decides whether a gated *server-side* tool may run.
+ *
+ * The server-side approval gate is distinct from the client-tool confirmation
+ * card ({@link requestConfirmation}): a destructive server tool defers instead
+ * of executing, and the run finishes on an AG-UI *interrupt* the client answers
+ * with `resume[]`. This card is the browser half of that loop — it reads
+ * naturally after the tool-call card whose execution it gates, and resolves
+ * ``true`` to approve (run the tool) or ``false`` to deny. The card stays in the
+ * transcript as a resolved record (buttons disabled, `data-resolved` set)
+ * rather than vanishing.
+ */
+export function requestApproval(
+  host: Node & ParentNode,
+  request: ApprovalRequest,
+  options: ApprovalOptions = {},
+): Promise<boolean> {
+  const strings = options.strings ?? DEFAULT_UI_STRINGS;
+  return new Promise<boolean>((resolve) => {
+    const card = document.createElement("div");
+    card.className = "approval";
+    card.setAttribute("part", "approval");
+    if (request.toolName !== undefined) {
+      card.setAttribute("data-tool-name", request.toolName);
+    }
+    card.setAttribute("role", "group");
+    card.setAttribute("aria-label", strings.approveAction);
+
+    const body = document.createElement("div");
+    body.className = "approval-body";
+    body.setAttribute("part", "approval-body");
+    body.textContent = request.message ?? strings.approvalPrompt;
+
+    const actions = document.createElement("div");
+    actions.className = "approval-actions";
+    actions.setAttribute("part", "approval-actions");
+
+    const deny = actionButton("deny", strings.deny);
+    const approve = actionButton("approve", strings.approve);
+
+    let settled = false;
+    const close = (approved: boolean): void => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      deny.disabled = true;
+      approve.disabled = true;
+      card.setAttribute("data-resolved", approved ? "approved" : "denied");
+      resolve(approved);
+    };
+
+    deny.addEventListener("click", () => close(false));
+    approve.addEventListener("click", () => close(true));
+    options.signal?.addEventListener("abort", () => close(false), { once: true });
+
+    actions.append(deny, approve);
+    card.append(body, actions);
+    host.appendChild(card);
+    if (options.signal?.aborted === true) {
+      // The run was cancelled before the card could ask; record the denial.
+      close(false);
+      return;
+    }
+    approve.focus();
+  });
+}

package/src/ui/attachment_chips.ts

@@ -9,6 +9,7 @@ import type { AttachmentRef } from "../core/attachment.js";
 export function renderAttachmentChips(refs: readonly AttachmentRef[]): HTMLDivElement {
   const list = document.createElement("div");
   list.className = "attachment-chips";
+  list.setAttribute("part", "attachment-chips");
   for (const ref of refs) {
     list.appendChild(renderChip(ref));
   }
@@ -18,19 +19,23 @@ export function renderAttachmentChips(refs: readonly AttachmentRef[]): HTMLDivEl
 function renderChip(ref: AttachmentRef): HTMLDivElement {
   const chip = document.createElement("div");
   chip.className = "attachment-chip attachment-chip--ready";
+  chip.setAttribute("part", "attachment-chip");
 
   const icon = document.createElement("span");
   icon.className = "attachment-chip-icon";
+  icon.setAttribute("part", "attachment-chip-icon");
   icon.textContent = iconFor(ref.mime);
   icon.setAttribute("aria-hidden", "true");
 
   const name = document.createElement("span");
   name.className = "attachment-chip-name";
+  name.setAttribute("part", "attachment-chip-name");
   name.textContent = ref.name;
   name.title = ref.name;
 
   const size = document.createElement("span");
   size.className = "attachment-chip-size";
+  size.setAttribute("part", "attachment-chip-size");
   size.textContent = formatBytes(ref.size);
 
   chip.append(icon, name, size);

package/src/ui/attachment_tray.ts

@@ -205,19 +205,23 @@ export class AttachmentTray {
   #renderChip(item: TrayItem): HTMLDivElement {
     const chip = document.createElement("div");
     chip.className = `attachment-chip attachment-chip--${item.status}`;
+    chip.setAttribute("part", "attachment-chip");
 
     const icon = document.createElement("span");
     icon.className = "attachment-chip-icon";
+    icon.setAttribute("part", "attachment-chip-icon");
     icon.textContent = iconFor(item.file.type);
     icon.setAttribute("aria-hidden", "true");
 
     const name = document.createElement("span");
     name.className = "attachment-chip-name";
+    name.setAttribute("part", "attachment-chip-name");
     name.textContent = item.file.name;
     name.title = item.file.name;
 
     const meta = document.createElement("span");
     meta.className = "attachment-chip-size";
+    meta.setAttribute("part", "attachment-chip-size");
     meta.textContent =
       item.status === ATTACHMENT_STATUS.ERROR ? item.error : formatBytes(item.file.size);
 
@@ -226,8 +230,10 @@ export class AttachmentTray {
     if (item.status === ATTACHMENT_STATUS.UPLOADING) {
       const bar = document.createElement("div");
       bar.className = "attachment-chip-bar";
+      bar.setAttribute("part", "attachment-chip-bar");
       const fill = document.createElement("div");
       fill.className = "attachment-chip-bar-fill";
+      fill.setAttribute("part", "attachment-chip-bar-fill");
       fill.style.width = `${Math.round(item.progress * 100)}%`;
       bar.appendChild(fill);
       chip.appendChild(bar);
@@ -237,6 +243,7 @@ export class AttachmentTray {
       const retry = document.createElement("button");
       retry.type = "button";
       retry.className = "attachment-chip-retry";
+      retry.setAttribute("part", "attachment-chip-retry");
       retry.title = this.#strings.retry;
       retry.setAttribute("aria-label", this.#strings.retryUpload);
       retry.textContent = "↻";
@@ -247,6 +254,7 @@ export class AttachmentTray {
     const remove = document.createElement("button");
     remove.type = "button";
     remove.className = "attachment-chip-remove";
+    remove.setAttribute("part", "attachment-chip-remove");
     remove.title = this.#strings.remove;
     remove.setAttribute("aria-label", this.#strings.removeAttachment);
     remove.textContent = "✕";

package/src/ui/question_card.ts

@@ -0,0 +1,216 @@
+import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
+
+/** What the inline question card asks (the `ask_user` frontend tool's args). */
+export interface QuestionRequest {
+  /** The question shown to the user. */
+  question: string;
+  /**
+   * Preset choices rendered as radios. When empty/omitted the card is a plain
+   * free-text prompt.
+   */
+  options?: readonly string[];
+  /**
+   * Whether the user may type a custom answer. With `options`, adds an "other"
+   * radio revealing a text field; without options the card is free-text anyway.
+   */
+  allowCustom?: boolean;
+}
+
+/** Options for {@link requestQuestion}. */
+export interface QuestionOptions {
+  /**
+   * Aborting this signal resolves the card with an empty answer (fields
+   * disabled) — the hook a Stop control uses to dismiss an open question when
+   * the user cancels the whole run.
+   */
+  signal?: AbortSignal;
+  /** Localized strings; defaults to the English {@link DEFAULT_UI_STRINGS}. */
+  strings?: UiStrings;
+}
+
+/**
+ * A fully custom renderer for the `ask_user` question, set via
+ * `AgUiChat.askUserRenderer`. Receives the parsed {@link QuestionRequest} and an
+ * `AbortSignal` that fires when the run is stopped, and resolves with the user's
+ * answer (an empty string signals "no answer", e.g. on abort). When provided it
+ * **replaces** the built-in {@link requestQuestion} card entirely — the host owns
+ * the DOM, so it can render a native modal, a framework component, or anything
+ * else. See the `strings` / `::part()` seams for styling the built-in card
+ * instead of replacing it.
+ */
+export type QuestionRenderer = (
+  request: QuestionRequest,
+  options: { signal: AbortSignal },
+) => Promise<string>;
+
+/** A single custom-answer text field. */
+function answerInput(placeholder: string): HTMLInputElement {
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "question-input";
+  input.setAttribute("part", "question-input");
+  input.placeholder = placeholder;
+  return input;
+}
+
+/**
+ * Append an inline **question** card to ``host`` and resolve with the user's
+ * answer — the browser half of the built-in `ask_user` frontend tool.
+ *
+ * Unlike the confirmation/approval cards (which resolve a yes/no), this collects
+ * a typed answer: a radio pick from ``options``, or free text (when
+ * ``allowCustom`` or no ``options`` are given). The card stays in the transcript
+ * as a resolved record (controls disabled, `data-resolved` set) rather than
+ * vanishing. A Stop while it is open resolves it with an empty string.
+ */
+export function requestQuestion(
+  host: Node & ParentNode,
+  request: QuestionRequest,
+  options: QuestionOptions = {},
+): Promise<string> {
+  const strings = options.strings ?? DEFAULT_UI_STRINGS;
+  const choices = request.options ?? [];
+  const hasChoices = choices.length > 0;
+  // Free text is offered when there are no preset choices, or when custom
+  // answers are explicitly allowed alongside them (via an "other" radio).
+  const allowsText = !hasChoices || request.allowCustom === true;
+
+  return new Promise<string>((resolve) => {
+    const card = document.createElement("div");
+    card.className = "question";
+    card.setAttribute("part", "question");
+    card.setAttribute("role", "group");
+    card.setAttribute("aria-label", strings.askUserAction);
+
+    const body = document.createElement("div");
+    body.className = "question-body";
+    body.setAttribute("part", "question-body");
+    body.textContent = request.question;
+
+    const form = document.createElement("div");
+    form.className = "question-options";
+    form.setAttribute("part", "question-options");
+
+    // `name` scopes the radio group to this card so multiple open cards don't
+    // interfere; a per-card token keeps it unique without module state.
+    const group = `q-${choices.length}-${request.question.length}`;
+    const radios: HTMLInputElement[] = [];
+    for (const choice of choices) {
+      const label = document.createElement("label");
+      label.className = "question-choice";
+      label.setAttribute("part", "question-choice");
+      const radio = document.createElement("input");
+      radio.type = "radio";
+      radio.name = group;
+      radio.value = choice;
+      radio.setAttribute("part", "question-radio");
+      const text = document.createElement("span");
+      text.setAttribute("part", "question-choice-text");
+      text.textContent = choice;
+      label.append(radio, text);
+      form.appendChild(label);
+      radios.push(radio);
+    }
+
+    // The "other" radio (only alongside choices) toggles the free-text field.
+    let otherRadio: HTMLInputElement | null = null;
+    let input: HTMLInputElement | null = null;
+    if (allowsText) {
+      input = answerInput(strings.answerPlaceholder);
+      if (hasChoices) {
+        const label = document.createElement("label");
+        label.className = "question-choice";
+        label.setAttribute("part", "question-choice");
+        otherRadio = document.createElement("input");
+        otherRadio.type = "radio";
+        otherRadio.name = group;
+        otherRadio.value = "";
+        otherRadio.setAttribute("part", "question-radio");
+        const text = document.createElement("span");
+        text.setAttribute("part", "question-choice-text");
+        text.textContent = strings.otherOption;
+        label.append(otherRadio, text);
+        form.appendChild(label);
+        input.disabled = true;
+      }
+      form.appendChild(input);
+    }
+
+    const actions = document.createElement("div");
+    actions.className = "question-actions";
+    actions.setAttribute("part", "question-actions");
+    const submit = document.createElement("button");
+    submit.type = "button";
+    submit.className = "question-btn";
+    submit.setAttribute("part", "question-button");
+    submit.textContent = strings.submit;
+    actions.appendChild(submit);
+
+    let settled = false;
+    const answerFor = (): string | null => {
+      const picked = radios.find((r) => r.checked);
+      if (picked !== undefined) {
+        return picked.value;
+      }
+      if (input !== null && (otherRadio === null || otherRadio.checked)) {
+        const typed = input.value.trim();
+        return typed === "" ? null : typed;
+      }
+      return null;
+    };
+    const refresh = (): void => {
+      if (input !== null && otherRadio !== null) {
+        input.disabled = !otherRadio.checked;
+      }
+      submit.disabled = answerFor() === null;
+    };
+    const close = (answer: string): void => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      submit.disabled = true;
+      for (const radio of radios) {
+        radio.disabled = true;
+      }
+      if (otherRadio !== null) {
+        otherRadio.disabled = true;
+      }
+      if (input !== null) {
+        input.disabled = true;
+      }
+      card.setAttribute("data-resolved", answer === "" ? "cancelled" : "answered");
+      resolve(answer);
+    };
+
+    for (const radio of [...radios, ...(otherRadio !== null ? [otherRadio] : [])]) {
+      radio.addEventListener("change", refresh);
+    }
+    input?.addEventListener("input", refresh);
+    input?.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const answer = answerFor();
+        if (answer !== null) {
+          close(answer);
+        }
+      }
+    });
+    submit.addEventListener("click", () => {
+      const answer = answerFor();
+      if (answer !== null) {
+        close(answer);
+      }
+    });
+    options.signal?.addEventListener("abort", () => close(""), { once: true });
+
+    card.append(body, form, actions);
+    host.appendChild(card);
+    if (options.signal?.aborted === true) {
+      close("");
+      return;
+    }
+    refresh();
+    (hasChoices ? radios[0] : input)?.focus();
+  });
+}

package/src/ui/skills_menu.ts

@@ -24,9 +24,11 @@ export class SkillsMenu {
     this.#onPick = onPick;
     this.chips = document.createElement("div");
     this.chips.className = "skill-chips";
+    this.chips.setAttribute("part", "skill-chips");
     this.chips.hidden = true;
     this.palette = document.createElement("div");
     this.palette.className = "skill-palette";
+    this.palette.setAttribute("part", "skill-palette");
     this.palette.setAttribute("role", "listbox");
     this.palette.hidden = true;
   }
@@ -137,6 +139,7 @@ export class SkillsMenu {
       const button = document.createElement("button");
       button.type = "button";
       button.className = "skill-chip";
+      button.setAttribute("part", "skill-chip");
       button.textContent = skill.title;
       button.addEventListener("click", () => this.#pick(skill));
       this.chips.appendChild(button);
@@ -149,17 +152,20 @@ export class SkillsMenu {
       const item = document.createElement("button");
       item.type = "button";
       item.className = "skill-item";
+      item.setAttribute("part", "skill-item");
       item.setAttribute("role", "option");
       item.setAttribute("aria-selected", index === this.#activeIndex ? "true" : "false");
 
       const title = document.createElement("span");
       title.className = "skill-item-title";
+      title.setAttribute("part", "skill-item-title");
       title.textContent = skill.title;
       item.appendChild(title);
 
       if (skill.description !== undefined) {
         const desc = document.createElement("span");
         desc.className = "skill-item-desc";
+        desc.setAttribute("part", "skill-item-desc");
         desc.textContent = skill.description;
         item.appendChild(desc);
       }