@elabs-ai/components-ai 4.0.0 → 4.1.0

package/src/plan.test.tsx

@@ -0,0 +1,267 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import {
+  Plan,
+  PlanApprove,
+  PlanComment,
+  PlanContent,
+  PlanDescription,
+  PlanFooter,
+  PlanHeader,
+  PlanRequestChanges,
+  PlanStatusLine,
+  PlanTitle,
+} from "./plan";
+
+describe("Plan decision contract (#108)", () => {
+  it("exposes a labelled GROUP (not role=alert) containing the three actions while awaiting", () => {
+    render(
+      <Plan status="awaiting">
+        <PlanHeader>
+          <PlanTitle>Post the final note to #finance?</PlanTitle>
+        </PlanHeader>
+        <PlanFooter>
+          <PlanComment>Comment</PlanComment>
+          <PlanRequestChanges>Request changes</PlanRequestChanges>
+          <PlanApprove>Approve</PlanApprove>
+        </PlanFooter>
+      </Plan>,
+    );
+
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+
+    const group = screen.getByRole("group");
+    const labelledBy = group.getAttribute("aria-labelledby");
+    expect(labelledBy).toBeTruthy();
+    expect(screen.getByText("Post the final note to #finance?").id).toBe(labelledBy);
+
+    expect(screen.getByText("Comment")).toBeInTheDocument();
+    expect(screen.getByText("Request changes")).toBeInTheDocument();
+    expect(screen.getByText("Approve")).toBeInTheDocument();
+  });
+
+  it("presets the filled primary variant on PlanApprove, never outline/ghost", () => {
+    render(
+      <Plan status="awaiting">
+        <PlanFooter>
+          <PlanComment>Comment</PlanComment>
+          <PlanRequestChanges>Request changes</PlanRequestChanges>
+          <PlanApprove>Approve</PlanApprove>
+        </PlanFooter>
+      </Plan>,
+    );
+
+    expect(screen.getByText("Approve").className).toContain("bg-primary");
+    expect(screen.getByText("Request changes").className).not.toContain("bg-primary");
+    expect(screen.getByText("Comment").className).not.toContain("bg-primary");
+  });
+
+  it.each([
+    ["approved", "Approved"],
+    ["changes-requested", "Changes requested"],
+  ] as const)("exposes role=alert with no actions once settled (%s)", (status, label) => {
+    render(
+      <Plan status={status}>
+        <PlanFooter>
+          <PlanComment>Comment</PlanComment>
+          <PlanRequestChanges>Request changes</PlanRequestChanges>
+          <PlanApprove>Approve</PlanApprove>
+          <PlanStatusLine />
+        </PlanFooter>
+      </Plan>,
+    );
+
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.queryByRole("group")).not.toBeInTheDocument();
+    expect(screen.queryByText("Comment")).not.toBeInTheDocument();
+    expect(screen.queryByText("Request changes")).not.toBeInTheDocument();
+    expect(screen.queryByText("Approve")).not.toBeInTheDocument();
+
+    // Recoverable in greyscale: the outcome is in TEXT, not only rail colour.
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  it("renders the outcome with a non-text glyph alongside the label (WCAG 1.4.1)", () => {
+    render(
+      <Plan status="approved">
+        <PlanFooter>
+          <PlanStatusLine />
+        </PlanFooter>
+      </Plan>,
+    );
+
+    const alert = screen.getByRole("alert");
+    expect(alert.querySelector("svg")).not.toBeNull();
+  });
+
+  it("renders no decision UI while streaming", () => {
+    render(
+      <Plan status="streaming">
+        <PlanHeader>
+          <PlanTitle>Drafting…</PlanTitle>
+        </PlanHeader>
+        <PlanFooter>
+          <PlanComment>Comment</PlanComment>
+          <PlanRequestChanges>Request changes</PlanRequestChanges>
+          <PlanApprove>Approve</PlanApprove>
+          <PlanStatusLine />
+        </PlanFooter>
+      </Plan>,
+    );
+
+    expect(screen.queryByRole("group")).not.toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(screen.queryByText("Approve")).not.toBeInTheDocument();
+  });
+
+  it.each([
+    ["approved", "Approved"],
+    ["changes-requested", "Changes requested"],
+  ] as const)(
+    "does not re-announce the settled outcome on a redundant re-render with an unchanged status (%s)",
+    (status, label) => {
+      // A helper that returns a FRESH element tree on every call — mirrors a
+      // real parent re-rendering for an unrelated reason (new element objects,
+      // identical prop VALUES). Passing the exact same element object to
+      // `rerender` would let React bail out of calling `Plan` at all (a
+      // referential-props short-circuit), which would make this lock vacuous.
+      const renderPlan = () => (
+        <Plan status={status}>
+          <PlanFooter>
+            <PlanStatusLine />
+          </PlanFooter>
+        </Plan>
+      );
+      const { rerender } = render(renderPlan());
+
+      const alertBefore = screen.getByRole("alert");
+      expect(alertBefore).toHaveTextContent(label);
+
+      // A settled `role="alert"` is an assertive live region: it is announced
+      // when it is FIRST INSERTED, or when its observable content changes — an
+      // AT re-announces it if either happens again. Watch the region for both
+      // via a real MutationObserver (jsdom implements it), so this is an
+      // observable-effect assertion, not a guess about React internals.
+      const observer = new MutationObserver(() => {});
+      observer.observe(alertBefore, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+      });
+
+      // A parent re-rendering for an unrelated reason, passing the SAME
+      // status again with a freshly-built element tree, must be a no-op for
+      // the settled region.
+      rerender(renderPlan());
+
+      const mutations = observer.takeRecords();
+      observer.disconnect();
+
+      expect(mutations).toHaveLength(0);
+      // Same DOM node — not unmounted/remounted, which would itself be a
+      // fresh live-region insertion and would re-trigger the announcement.
+      expect(screen.getByRole("alert")).toBe(alertBefore);
+      expect(screen.getAllByRole("alert")).toHaveLength(1);
+    },
+  );
+});
+
+describe("Plan legacy (no `status`) API stays byte-compatible (#108)", () => {
+  const legacy = (
+    <Plan>
+      <PlanHeader>
+        <PlanTitle>Draft the Q3 board note</PlanTitle>
+        <PlanDescription>Retrieve filings, reconcile, then summarize.</PlanDescription>
+      </PlanHeader>
+      <PlanContent>Body</PlanContent>
+    </Plan>
+  );
+
+  it("renders no ARIA decision role at all", () => {
+    render(legacy);
+    expect(screen.queryByRole("group")).not.toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  it("produces the exact pre-change markup for the root Card (no role, no aria-labelledby, no rail)", () => {
+    const { container } = render(legacy);
+    const card = container.firstElementChild as HTMLElement;
+    expect(card.getAttribute("role")).toBeNull();
+    expect(card.getAttribute("aria-labelledby")).toBeNull();
+    expect(card.className).not.toContain("border-s-");
+    expect(card.className).toContain("shadow-none");
+  });
+
+  it("PlanTitle renders no `id` attribute when no status is set", () => {
+    render(legacy);
+    expect(screen.getByText("Draft the Q3 board note").hasAttribute("id")).toBe(false);
+  });
+
+  it("PlanApprove/PlanRequestChanges/PlanComment render nothing without an awaiting status", () => {
+    render(
+      <Plan>
+        <PlanApprove>Approve</PlanApprove>
+        <PlanRequestChanges>Request changes</PlanRequestChanges>
+        <PlanComment>Comment</PlanComment>
+      </Plan>,
+    );
+    expect(screen.queryByText("Approve")).not.toBeInTheDocument();
+    expect(screen.queryByText("Request changes")).not.toBeInTheDocument();
+    expect(screen.queryByText("Comment")).not.toBeInTheDocument();
+  });
+
+  it("PlanStatusLine renders nothing without a status", () => {
+    render(
+      <Plan>
+        <PlanStatusLine />
+      </Plan>,
+    );
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  it("isStreaming keeps shimmering the title exactly as before", () => {
+    render(
+      <Plan isStreaming>
+        <PlanHeader>
+          <PlanTitle>Draft the Q3 board note</PlanTitle>
+        </PlanHeader>
+      </Plan>,
+    );
+    // Shimmer renders the text via its own motion span, not a plain text node.
+    expect(screen.getByText("Draft the Q3 board note")).toBeInTheDocument();
+  });
+});
+
+describe("Plan `status` supersedes `isStreaming` when both are given (#108)", () => {
+  it("a settled status stops the shimmer even when isStreaming is still true", () => {
+    render(
+      <Plan status="approved" isStreaming>
+        <PlanHeader>
+          <PlanTitle>Draft the Q3 board note</PlanTitle>
+        </PlanHeader>
+        <PlanFooter>
+          <PlanStatusLine />
+        </PlanFooter>
+      </Plan>,
+    );
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByText("Approved")).toBeInTheDocument();
+  });
+
+  it("status='streaming' plus isStreaming=false still shimmers", () => {
+    render(
+      <Plan status="streaming" isStreaming={false}>
+        <PlanHeader>
+          <PlanTitle>Draft the Q3 board note</PlanTitle>
+        </PlanHeader>
+      </Plan>,
+    );
+    // No decision role while streaming, and the title still renders.
+    expect(screen.queryByRole("group")).not.toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(screen.getByText("Draft the Q3 board note")).toBeInTheDocument();
+  });
+});

package/src/plan.tsx

@@ -11,15 +11,28 @@ import {
   CardTitle,
 } from "@elabs-ai/components-ui";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { StatusBadge, type StatusTone } from "@elabs-ai/components-ui";
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
-import { ChevronsUpDownIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-import { createContext, useContext, useMemo } from "react";
+import { CheckCircle2, ChevronsUpDownIcon, Clock, PencilLine, type LucideIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 
 import { Shimmer } from "./shimmer";
 
+/**
+ * The plan's decision status (#108). Additive: a `Plan` rendered with no
+ * `status` behaves exactly as before (no ARIA region, no rail, no status
+ * line) — every prop below this point is opt-in.
+ */
+export type PlanStatus = "streaming" | "awaiting" | "approved" | "changes-requested";
+
 interface PlanContextValue {
   isStreaming: boolean;
+  /** `undefined` when the plan is rendered via the legacy `isStreaming`-only API. */
+  status?: PlanStatus;
+  /** Wired to `PlanTitle` so the awaiting region can be labelled by it. */
+  titleId?: string;
 }
 
 const PlanContext = createContext<PlanContextValue | null>(null);
@@ -34,15 +47,72 @@ const usePlan = () => {
 
 export type PlanProps = ComponentProps<typeof Collapsible> & {
   isStreaming?: boolean;
+  /**
+   * The plan's decision status. Omit it to keep today's display-only
+   * behaviour. When both `status` and `isStreaming` are given, `status`
+   * wins (a `status="approved"` plan never shimmers, even if `isStreaming`
+   * is still `true`).
+   */
+  status?: PlanStatus;
 };
 
-export const Plan = ({ className, isStreaming = false, children, ...props }: PlanProps) => {
-  const contextValue = useMemo(() => ({ isStreaming }), [isStreaming]);
+export const Plan = ({
+  className,
+  isStreaming = false,
+  status,
+  role,
+  children,
+  ...props
+}: PlanProps) => {
+  const titleId = useId();
+  const hasStatus = status !== undefined;
+  const resolvedIsStreaming = hasStatus ? status === "streaming" : isStreaming;
+
+  // A pending decision containing focusable controls is a labelled region,
+  // NOT an assertive live region; a settled outcome is `role="alert"` — the
+  // same convention `Confirmation` already proves (packages/ai/src/confirmation.tsx:100-101).
+  const isPending = status === "awaiting";
+  const isSettled = status === "approved" || status === "changes-requested";
+  const resolvedRole = hasStatus
+    ? isPending
+      ? "group"
+      : isSettled
+        ? "alert"
+        : undefined
+    : undefined;
+
+  // Quiet structural rail per outcome — the outcome itself is always ALSO
+  // carried in text + glyph via `PlanStatusLine` (WCAG 1.4.1), the rail is a
+  // redundant, hue-independent cue on top of it.
+  const railClass = !hasStatus
+    ? undefined
+    : status === "approved"
+      ? "border-s-4 border-s-success"
+      : status === "changes-requested"
+        ? "border-s-4 border-s-warning"
+        : isPending
+          ? "border-s-4 border-s-border-strong"
+          : undefined;
+
+  const contextValue = useMemo<PlanContextValue>(
+    () => ({
+      isStreaming: resolvedIsStreaming,
+      status: hasStatus ? status : undefined,
+      titleId: hasStatus ? titleId : undefined,
+    }),
+    [resolvedIsStreaming, hasStatus, status, titleId],
+  );
 
   return (
     <PlanContext.Provider value={contextValue}>
       <Collapsible asChild data-slot="plan" {...props}>
-        <Card className={cn("shadow-none", className)}>{children}</Card>
+        <Card
+          role={role ?? resolvedRole}
+          aria-labelledby={isPending ? titleId : undefined}
+          className={cn("shadow-none", railClass, className)}
+        >
+          {children}
+        </Card>
       </Collapsible>
     </PlanContext.Provider>
   );
@@ -62,11 +132,11 @@ export type PlanTitleProps = Omit<ComponentProps<typeof CardTitle>, "children">
   children: string;
 };
 
-export const PlanTitle = ({ children, ...props }: PlanTitleProps) => {
-  const { isStreaming } = usePlan();
+export const PlanTitle = ({ id, children, ...props }: PlanTitleProps) => {
+  const { isStreaming, titleId } = usePlan();
 
   return (
-    <CardTitle data-slot="plan-title" {...props}>
+    <CardTitle id={id ?? titleId} data-slot="plan-title" {...props}>
       {isStreaming ? <Shimmer>{children}</Shimmer> : children}
     </CardTitle>
   );
@@ -92,6 +162,7 @@ export const PlanDescription = ({ className, children, ...props }: PlanDescripti
 
 export type PlanActionProps = ComponentProps<typeof CardAction>;
 
+/** The header's layout slot (e.g. a menu trigger) — unrelated to the decision actions below. */
 export const PlanAction = (props: PlanActionProps) => (
   <CardAction data-slot="plan-action" {...props} />
 );
@@ -119,17 +190,108 @@ export const PlanFooter = (props: PlanFooterProps) => (
 
 export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
 
-export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (
-  <CollapsibleTrigger asChild>
-    <Button
-      className={cn("size-8", className)}
-      data-slot="plan-trigger"
-      size="icon"
-      variant="ghost"
+export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => {
+  const { t } = useLocale();
+  return (
+    <CollapsibleTrigger asChild>
+      <Button
+        className={cn("size-8", className)}
+        data-slot="plan-trigger"
+        size="icon"
+        variant="ghost"
+        {...props}
+      >
+        <ChevronsUpDownIcon className="size-4" />
+        <span className="sr-only">{t("ai.plan.togglePlan")}</span>
+      </Button>
+    </CollapsibleTrigger>
+  );
+};
+
+type PlanOutcomeStatus = Exclude<PlanStatus, "streaming">;
+
+/**
+ * Default label/tone/glyph per non-streaming status (#108). Every entry is a
+ * CALM tone (the `StatusBadge` out-of-vocabulary escape hatch, #363) — the
+ * decision is carried in text + glyph, never by rail colour alone (WCAG 1.4.1).
+ */
+const PLAN_STATUS_CONTENT: Record<
+  PlanOutcomeStatus,
+  { label: string; tone: StatusTone; icon: LucideIcon }
+> = {
+  awaiting: { label: "Waiting on plan approval", tone: "warning", icon: Clock },
+  approved: { label: "Approved", tone: "success", icon: CheckCircle2 },
+  "changes-requested": { label: "Changes requested", tone: "warning", icon: PencilLine },
+};
+
+export type PlanStatusLineProps = Omit<ComponentProps<typeof StatusBadge>, "status"> & {
+  children?: ReactNode;
+};
+
+/**
+ * The decision status line (#108) — text + glyph, never rail colour alone.
+ * Renders nothing while `status` is unset or `"streaming"` (nothing has been
+ * decided yet); shows the outcome once the plan is awaiting a decision or
+ * settled.
+ */
+export const PlanStatusLine = ({ className, children, ...props }: PlanStatusLineProps) => {
+  const { status } = usePlan();
+
+  if (!status || status === "streaming") {
+    return null;
+  }
+
+  const { label, tone, icon } = PLAN_STATUS_CONTENT[status];
+
+  return (
+    <StatusBadge
+      data-slot="plan-status-line"
+      className={cn("self-start", className)}
+      status={{ label, tone, icon }}
       {...props}
     >
-      <ChevronsUpDownIcon className="size-4" />
-      <span className="sr-only">Toggle plan</span>
-    </Button>
-  </CollapsibleTrigger>
+      {children}
+    </StatusBadge>
+  );
+};
+
+export type PlanDecisionActionProps = ComponentProps<typeof Button>;
+
+/**
+ * Shared decision-button primitive. Renders only while `status === "awaiting"`
+ * — mirrors the gating `ConfirmationActions` uses (packages/ai/src/confirmation.tsx)
+ * — so a settled or still-streaming plan never shows stale controls.
+ */
+const PlanDecisionAction = ({ className, ...props }: PlanDecisionActionProps) => {
+  const { status } = usePlan();
+
+  if (status !== "awaiting") {
+    return null;
+  }
+
+  return <Button className={cn("h-8 px-3 text-body", className)} type="button" {...props} />;
+};
+
+export type PlanApproveProps = PlanDecisionActionProps;
+
+/**
+ * The proceed action — presets the filled primary variant so the primary path
+ * can't drift to a quieter variant (same reasoning as `ConfirmationApprove`).
+ */
+export const PlanApprove = (props: PlanApproveProps) => (
+  <PlanDecisionAction data-slot="plan-approve" variant="default" {...props} />
+);
+
+export type PlanRequestChangesProps = PlanDecisionActionProps;
+
+/** Sends the plan back for revision — a quieter, non-primary action. */
+export const PlanRequestChanges = (props: PlanRequestChangesProps) => (
+  <PlanDecisionAction data-slot="plan-request-changes" variant="outline" {...props} />
+);
+
+export type PlanCommentProps = PlanDecisionActionProps;
+
+/** Leaves feedback without settling the decision — the quietest action. */
+export const PlanComment = (props: PlanCommentProps) => (
+  <PlanDecisionAction data-slot="plan-comment" variant="ghost" {...props} />
 );

package/src/prompt-input-effort.stories.tsx

@@ -0,0 +1,123 @@
+/**
+ * PromptInputEffort — an ORDERED reasoning-effort/budget control (#107).
+ * Renders `levels` (low → high, the order IS the semantics) as a row of
+ * same-shape squares that GROW in size; selecting a level fills every square
+ * up to and including it. The fill is a non-colour channel (size ramp +
+ * solid/hollow shape), so the level is recoverable in greyscale — plus the
+ * level's name is always rendered as text. Ships no effort vocabulary.
+ */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn } from "storybook/test";
+import { type EffortLevel } from "@elabs-ai/components-ui";
+
+import { PromptInputEffort } from "./prompt-input-effort";
+
+const LEVELS: EffortLevel[] = [
+  { id: "low", label: "Low" },
+  { id: "medium", label: "Medium" },
+  { id: "high", label: "High" },
+  { id: "max", label: "Max" },
+];
+
+const meta = {
+  title: "AI/Composer/PromptInputEffort",
+  component: PromptInputEffort,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A part of the [Composer](?path=/docs/ai-composer--docs) family — what the `effort` slot renders. An ordered reasoning-effort/budget scale. The order of `levels` IS the semantics: the indicator fills — by size ramp and solid-vs-hollow shape, never colour alone — up to the current level, and the level's name is also rendered as text. Built on Radix `RadioGroup` for arrow-key navigation and an announced current value; `levels` is entirely prop-driven.",
+      },
+    },
+  },
+  args: {
+    levels: LEVELS,
+    "aria-label": "Reasoning effort",
+    onValueChange: fn(),
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PromptInputEffort>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Uncontrolled — defaults to the first (lowest) level. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("radio", { name: "Low", checked: true })).toBeInTheDocument();
+    await expect(canvas.getByText("Low")).toBeInTheDocument();
+  },
+};
+
+/** Controlled at the highest level — every square is filled. */
+export const HighestLevel: Story = {
+  args: { value: "max" },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("radio", { name: "Max", checked: true })).toBeInTheDocument();
+    await expect(canvas.getByText("Max")).toBeInTheDocument();
+  },
+};
+
+/** Clicking a level moves the fill and announces the new name. */
+export const SelectALevel: Story = {
+  play: async ({ canvas, args, userEvent }) => {
+    await userEvent.click(canvas.getByRole("radio", { name: "High" }));
+    await expect(args.onValueChange).toHaveBeenCalledWith("high");
+    await expect(canvas.getByRole("radio", { name: "High", checked: true })).toBeInTheDocument();
+    await expect(canvas.getByText("High")).toBeInTheDocument();
+  },
+};
+
+/** Only two levels — the size ramp still reads as an ordered low/high pair. */
+export const TwoLevels: Story = {
+  args: {
+    levels: [
+      { id: "standard", label: "Standard" },
+      { id: "extended", label: "Extended" },
+    ],
+  },
+};
+
+/**
+ * WCAG 2.5.8 (Target Size, Minimum) locking test (#161). The ramp bars'
+ * differing sizes ARE the meaning (the size ramp is the non-colour channel),
+ * so the fix must decouple the click/tap/focus target from the visible bar:
+ * every radio's own hit box is >=24x24 CSS px, while the visible bar
+ * (`[data-slot="prompt-input-effort-item-visual"]`) keeps its authored
+ * `effortRungForIndex` size (10, 14, 20, 24px for these 4 levels) — a fix
+ * that flattens the ramp to satisfy the target-size rule fails this test.
+ */
+export const TargetSize: Story = {
+  play: async ({ canvas }) => {
+    const radios = canvas.getAllByRole("radio");
+    expect(radios).toHaveLength(4);
+
+    for (const radio of radios) {
+      const rect = radio.getBoundingClientRect();
+      await expect(rect.width).toBeGreaterThanOrEqual(24);
+      await expect(rect.height).toBeGreaterThanOrEqual(24);
+    }
+
+    // Adjacent targets don't overlap.
+    for (let i = 1; i < radios.length; i++) {
+      const previous = radios[i - 1].getBoundingClientRect();
+      const current = radios[i].getBoundingClientRect();
+      await expect(current.left).toBeGreaterThanOrEqual(previous.right);
+    }
+
+    // The visible ramp is pixel-unchanged: the authored bar sizes still
+    // grow 10 -> 14 -> 20 -> 24px, low to high. The visible bar is a
+    // sibling of the (now enlarged) radio, both inside a shared frame.
+    const visibleWidths = radios.map((radio) => {
+      const visual = radio.parentElement?.querySelector(
+        '[data-slot="prompt-input-effort-item-visual"]',
+      );
+      if (!(visual instanceof HTMLElement)) {
+        throw new Error("expected a visible-bar element beside every radio");
+      }
+      return visual.getBoundingClientRect().width;
+    });
+    await expect(visibleWidths).toEqual([10, 14, 20, 24]);
+  },
+};