@elabs-ai/components-ai 4.0.0

package/src/composer.test.tsx

@@ -0,0 +1,182 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Composer } from "./composer";
+
+describe("Composer", () => {
+  it("renders the default status line, placeholder, and model pill", () => {
+    render(<Composer />);
+
+    expect(screen.getByText("Awaiting your input")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Ask me anything…")).toBeInTheDocument();
+    expect(screen.getByText("Claude Opus 4")).toBeInTheDocument();
+  });
+
+  it("accepts a custom status and placeholder, and hides the model pill when model is null", () => {
+    render(<Composer status="Thinking…" placeholder="Ask the agent…" model={null} />);
+
+    expect(screen.getByText("Thinking…")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Ask the agent…")).toBeInTheDocument();
+    expect(screen.queryByText("Claude Opus 4")).not.toBeInTheDocument();
+  });
+
+  it("renders suggestion chips and fires onSuggestionClick with the chosen suggestion", async () => {
+    const onSuggestionClick = vi.fn();
+    render(<Composer suggestions={["Summary", "Code"]} onSuggestionClick={onSuggestionClick} />);
+
+    const chip = screen.getByRole("button", { name: "Summary" });
+    await userEvent.click(chip);
+    expect(onSuggestionClick).toHaveBeenCalledWith("Summary");
+  });
+});
+
+describe("Composer — tone prop (double-card arrangement, #254)", () => {
+  // The outer frame is the `.rounded-xl` wrapper; `InputGroup` (the well) is
+  // `.rounded-md` (data-slot="input-group") nested inside PromptInput's own
+  // <form>, so the two are queried independently rather than via parentElement.
+  it("defaults to the outer bg-card frame around the standard well — existing usages unaffected", () => {
+    const { container } = render(<Composer />);
+    const frame = container.querySelector(".rounded-xl") as HTMLElement;
+    expect(frame.className.split(" ")).toContain("bg-card");
+    expect(frame.className.split(" ")).toContain("border");
+
+    const well = container.querySelector('[data-slot="input-group"]') as HTMLElement;
+    expect(well.className.split(" ")).toContain("bg-surface-muted");
+  });
+
+  it("swaps to an outer bg-surface-muted frame around a bg-card well when tone='card'", () => {
+    const { container } = render(<Composer tone="card" />);
+    const frame = container.querySelector(".rounded-xl") as HTMLElement;
+    expect(frame.className.split(" ")).toContain("bg-surface-muted");
+    expect(frame.className.split(" ")).not.toContain("bg-card");
+    // The frame keeps its border in BOTH tones: on light it's redundant
+    // (the fill already separates it from the page), but under high decoration the
+    // decoration dial zeros the shadow — the border becomes the SOLE structural
+    // cue there, so it must never be dropped for either tone (see #254 review).
+    expect(frame.className.split(" ")).toContain("border");
+
+    const well = container.querySelector('[data-slot="input-group"]') as HTMLElement;
+    expect(well.className.split(" ")).toContain("bg-card");
+    expect(well.className.split(" ")).not.toContain("bg-surface-muted");
+  });
+});
+
+describe("Composer send button — status affordances", () => {
+  const arrowUpIn = (el: HTMLElement) => el.querySelector("svg.lucide-arrow-up");
+
+  it("shows the ArrowUp send glyph at rest", () => {
+    render(<Composer />);
+    expect(arrowUpIn(screen.getByRole("button", { name: "Submit" }))).not.toBeNull();
+  });
+
+  it("swaps to the Stop affordance while streaming and calls onStop", async () => {
+    const onStop = vi.fn();
+    render(<Composer sendStatus="streaming" onStop={onStop} />);
+
+    const stop = screen.getByRole("button", { name: "Stop" });
+    // The regression: Composer's ArrowUp used to override the square Stop glyph,
+    // so the control was live (onStop fired) but looked like "send".
+    expect(arrowUpIn(stop)).toBeNull();
+
+    await userEvent.click(stop);
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows a spinner, not the send arrow, while submitted", () => {
+    render(<Composer sendStatus="submitted" />);
+    expect(arrowUpIn(screen.getByRole("button", { name: "Stop" }))).toBeNull();
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("shows the error glyph on error, and keeps the control clickable to retry", () => {
+    render(<Composer sendStatus="error" />);
+    const button = screen.getByRole("button", { name: "Submit" });
+    expect(arrowUpIn(button)).toBeNull();
+    expect(button).toBeEnabled();
+  });
+
+  it("marks send aria-disabled at rest, and clears it once text is typed", async () => {
+    render(<Composer />);
+    const send = screen.getByRole("button", { name: "Submit" });
+    expect(send).toHaveAttribute("aria-disabled", "true");
+    expect(send).toBeEnabled(); // still a real tab stop — see PromptInputSubmit
+
+    await userEvent.type(screen.getByPlaceholderText("Ask me anything…"), "hello");
+    expect(send).not.toHaveAttribute("aria-disabled");
+  });
+
+  it("does not submit an empty message on Enter", async () => {
+    const onSubmit = vi.fn();
+    render(<Composer onSubmit={onSubmit} />);
+
+    await userEvent.type(screen.getByPlaceholderText("Ask me anything…"), "{Enter}");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("keeps the ArrowUp send glyph once the user types during a running turn (#351)", async () => {
+    const onSubmit = vi.fn();
+    render(<Composer sendStatus="streaming" onSubmit={onSubmit} onStop={() => undefined} />);
+
+    await userEvent.type(screen.getByPlaceholderText("Ask me anything…"), "a follow-up");
+
+    const control = screen.getByRole("button", { name: "Submit" });
+    expect(arrowUpIn(control)).not.toBeNull();
+
+    await userEvent.click(control);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Composer — submitProps reaches the send button", () => {
+  it("forwards disabled, closing BOTH the click and the Enter path", async () => {
+    const onSubmit = vi.fn();
+    render(<Composer onSubmit={onSubmit} submitProps={{ disabled: true }} />);
+
+    const send = screen.getByRole("button", { name: "Submit" });
+    expect(send).toBeDisabled();
+
+    // The data-loss path this exists to close: PromptInput.handleSubmit calls
+    // form.reset() as soon as it ACCEPTS a submit, so refusing inside onSubmit
+    // has already destroyed the user's text. Disabling must stop the submit
+    // from being accepted at all — via Enter as well as via click, since
+    // PromptInputTextarea's Enter handler is a separate route to requestSubmit().
+    const textarea = screen.getByRole("textbox");
+    await userEvent.type(textarea, "a question worth not losing{Enter}");
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(textarea).toHaveValue("a question worth not losing");
+  });
+
+  it("leaves disabled UNSET when submitProps omits it, so autoDisabled still governs", async () => {
+    render(<Composer submitProps={{ id: "send" }} />);
+    const send = document.getElementById("send")!;
+    // Empty composer → the library's own guard must still refuse. It does so via
+    // `aria-disabled`, NOT the native attribute, so the control stays a real
+    // focusable tab stop (a natively-disabled button drops focus to <body> after
+    // every keyboard send). A defaulted literal `false` for `disabled` would
+    // still defeat the guard, which is why Composer leaves it undefined.
+    expect(send).toHaveAttribute("aria-disabled", "true");
+    expect(send).toBeEnabled();
+
+    await userEvent.type(screen.getByRole("textbox"), "hi");
+    expect(send).not.toHaveAttribute("aria-disabled");
+  });
+
+  it("extends the round shape rather than replacing it when given className", () => {
+    render(<Composer submitProps={{ className: "ring-2" }} />);
+    const send = screen.getByRole("button", { name: "Submit" });
+    expect(send).toHaveClass("rounded-full");
+    expect(send).toHaveClass("ring-2");
+  });
+});
+
+describe("Composer — icon-only buttons have an accessible name (#356)", () => {
+  it("exposes 'Attach files' and 'Voice' as accessible names, derived from the tooltip alone", () => {
+    render(<Composer />);
+
+    // Both controls are icon-only (no visible text) — their ONLY name source
+    // is `tooltip`. Before the fix these had no accessible name at all.
+    expect(screen.getByRole("button", { name: "Attach files" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Voice" })).toBeInTheDocument();
+  });
+});

package/src/composer.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import { ArrowUp, ChevronDown, Globe, Mic, Paperclip, Sparkles } from "lucide-react";
+import { cn, useLocale } from "@elabs-ai/components-ui";
+
+import {
+  PromptInput,
+  PromptInputBody,
+  PromptInputButton,
+  PromptInputFooter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+  type PromptInputProps,
+} from "./prompt-input";
+import { Suggestion, Suggestions } from "./suggestion";
+
+export interface ComposerProps {
+  /** Submit handler — receives the assembled message (text + attachments). */
+  onSubmit?: PromptInputProps["onSubmit"];
+  /** Textarea placeholder. Default `"Ask me anything…"`. */
+  placeholder?: string;
+  /**
+   * Muted status line shown above the input well. Default `"Awaiting your
+   * input"`. Drive it from chat state ("Thinking…", "Generating…") or pass
+   * `null` to hide the strip entirely.
+   */
+  status?: ReactNode;
+  /** Model-selector pill label. Default `"Claude Opus 4"`; pass `null` to hide it. */
+  model?: ReactNode;
+  /**
+   * Override the left-hand tool cluster (attach + model pill) — e.g. to add a
+   * web-search or connect-data control. Render `PromptInputButton`s /
+   * `PromptInputActionMenu` here; when set, `showAttach`/`model` are ignored.
+   */
+  tools?: ReactNode;
+  /** Send-button state, forwarded to `PromptInputSubmit` (ready/submitted/streaming/error). */
+  sendStatus?: ComponentProps<typeof PromptInputSubmit>["status"];
+  /** Stop handler used while the send button shows the generating state. */
+  onStop?: ComponentProps<typeof PromptInputSubmit>["onStop"];
+  /**
+   * Extra props spread onto the send button — `disabled`, `aria-label`,
+   * `variant`, `id`, `className`. `status` and `onStop` are excluded because
+   * `Composer` owns them via `sendStatus` / `onStop` above. (A `data-*` key is
+   * not assignable through this object: TypeScript only permits arbitrary
+   * `data-*` on a JSX element directly, not on a typed props object. Reach for
+   * `id` or `aria-label` as the test hook.)
+   *
+   * **`disabled` is the one that matters for correctness.** `PromptInput`'s
+   * submit handler calls `form.reset()` as soon as it ACCEPTS a submit, so a
+   * consumer that refuses the send inside `onSubmit` — an app doing async setup
+   * on the first message, say — has already had the textarea cleared and the
+   * user's text destroyed, with nothing to restore from. Disabling the control
+   * is what actually prevents it: `PromptInputTextarea`'s Enter handler checks
+   * `submitControl?.disabled` and bails before `requestSubmit()`, so the Enter
+   * path is closed too, not just the click.
+   *
+   * Leave it UNSET rather than passing `false` when you have no opinion —
+   * `PromptInputSubmit` resolves `disabled ?? autoDisabled`, so a literal
+   * `false` opts out of the library's own empty-composer guard.
+   */
+  submitProps?: Omit<ComponentProps<typeof PromptInputSubmit>, "status" | "onStop">;
+  /**
+   * The two-tone arrangement, forwarded to the `tone` prop of `PromptInput`.
+   * `"surface"` (default, unchanged) is the original Composer look — an outer
+   * `bg-card` frame around the standard muted `PromptInput` well — so every
+   * existing usage is unaffected. `"card"` swaps to the tinted-outer/
+   * distinct-inner "double card" (#254): an outer `bg-surface-muted` frame
+   * around a `tone="card"` well. The well fill relative to the frame is
+   * theme-driven, not universally "white" — raised on light themes, recessed
+   * on dark; see the `tone` prop doc on `PromptInput`.
+   */
+  tone?: PromptInputProps["tone"];
+  /** Optional suggestion chips rendered beneath the composer. */
+  suggestions?: string[];
+  /** Click handler for a suggestion chip. */
+  onSuggestionClick?: (suggestion: string) => void;
+  /** Show the voice button. Default `true`. */
+  showVoice?: boolean;
+  /** Show the attach button. Default `true`. */
+  showAttach?: boolean;
+  /** Extra classes for the outer card frame. */
+  className?: string;
+}
+
+/**
+ * Composer — the standard brand-ui AI chat input.
+ *
+ * A rounded two-tone "double card": a status strip wrapping a recessed
+ * `PromptInput` well (sharp top, theme-rounded bottom), a model pill, voice,
+ * and a circular send. Built on the real `PromptInput`, so it drops into a
+ * `ChatShell` footer or stands alone as an empty-state composer. `tone`
+ * (default `"surface"`, unchanged) picks the arrangement: `"surface"` keeps
+ * the original outer `bg-card` frame around the standard muted well;
+ * `"card"` (#254) swaps to an outer `bg-surface-muted` frame around a
+ * `tone="card"` well — the well fill is theme-driven (raised on light
+ * themes, recessed on dark), not universally white; see the
+ * `tone` prop doc on `PromptInput`. Semantic tokens only; theme-aware radii
+ * (`rounded-xl` frame / `rounded-b-lg` well); reads in every theme.
+ *
+ * This is the canonical chat input — reach for it instead of hand-rolling a
+ * `PromptInput` footer.
+ */
+export function Composer({
+  onSubmit,
+  placeholder,
+  status = "Awaiting your input",
+  model = "Claude Opus 4",
+  tools,
+  sendStatus,
+  onStop,
+  submitProps,
+  suggestions,
+  onSuggestionClick,
+  showVoice = true,
+  showAttach = true,
+  tone = "surface",
+  className,
+}: ComposerProps) {
+  const { t } = useLocale();
+
+  return (
+    <div className="w-full">
+      <div
+        className={cn(
+          "rounded-xl p-1.5 border",
+          tone === "card" ? "bg-surface-muted" : "bg-card shadow-sm",
+          className,
+        )}
+      >
+        {/* Muted status strip — sits in the outer frame above the input well. */}
+        {status != null ? (
+          <div className="flex items-center gap-1.5 px-3 py-1.5 text-meta text-muted-foreground">
+            <Sparkles className="size-3.5" aria-hidden="true" />
+            <span>{status}</span>
+          </div>
+        ) : null}
+
+        {/* Inner well — sharp top (nests under the strip), theme-rounded bottom. */}
+        <PromptInput
+          onSubmit={onSubmit ?? (() => undefined)}
+          surfaceClassName="rounded-t-none rounded-b-lg"
+          tone={tone}
+        >
+          <PromptInputBody>
+            <PromptInputTextarea placeholder={placeholder ?? t("ai.composer.placeholder")} />
+          </PromptInputBody>
+          <PromptInputFooter>
+            <PromptInputTools>
+              {tools ?? (
+                <>
+                  {showAttach ? (
+                    <PromptInputButton tooltip="Attach files">
+                      <Paperclip className="size-4" />
+                    </PromptInputButton>
+                  ) : null}
+                  {model != null ? (
+                    <PromptInputButton variant="ghost" className="gap-1.5 rounded-full">
+                      <Globe className="size-4" />
+                      <span>{model}</span>
+                      <ChevronDown className="size-4 opacity-60" />
+                    </PromptInputButton>
+                  ) : null}
+                </>
+              )}
+            </PromptInputTools>
+            <div className="flex items-center gap-1">
+              {showVoice ? (
+                <PromptInputButton tooltip="Voice">
+                  <Mic className="size-4" />
+                </PromptInputButton>
+              ) : null}
+              {/* `sendIcon` (not `children`) survives the send↔stop flip: the
+                  circular ArrowUp shows at rest AND once a follow-up is typed
+                  during a running turn (#351), while PromptInputSubmit's own
+                  status glyphs (spinner / stop square / error) still render
+                  whenever the control IS the Stop action. */}
+              <PromptInputSubmit
+                status={sendStatus}
+                onStop={onStop}
+                sendIcon={<ArrowUp className="size-4" />}
+                {...submitProps}
+                // After the spread so a caller's `className` EXTENDS the round
+                // shape instead of replacing it; every other key still wins.
+                className={cn("rounded-full", submitProps?.className)}
+              />
+            </div>
+          </PromptInputFooter>
+        </PromptInput>
+      </div>
+
+      {suggestions && suggestions.length > 0 ? (
+        <Suggestions className="mt-4 justify-center">
+          {suggestions.map((s) => (
+            <Suggestion key={s} suggestion={s} onClick={() => onSuggestionClick?.(s)} />
+          ))}
+        </Suggestions>
+      ) : null}
+    </div>
+  );
+}

package/src/confirmation.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ApprovalCard,
+  ApprovalCardAccepted,
+  ApprovalCardActions,
+  ApprovalCardApprove,
+  ApprovalCardDeny,
+  ApprovalCardDescription,
+  ApprovalCardRejected,
+  ApprovalCardRequest,
+  ApprovalCardTitle,
+} from "./confirmation";
+const meta = {
+  title: "AI/ApprovalCard",
+  component: ApprovalCard,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof ApprovalCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+// Pending = the attention treatment (#191, research 11 §B.3): warning wash +
+// hue-independent structural rail + lift; three zones; Approve/Deny grammar.
+export const Pending: Story = {
+  render: () => (
+    <ApprovalCard approval={{ id: "call-1" }} state="approval-requested">
+      <ApprovalCardRequest>
+        <ApprovalCardTitle>Post the final note to #finance?</ApprovalCardTitle>
+        <ApprovalCardDescription>
+          Posts the summary as Atlas; visible to 42 people in the channel.
+        </ApprovalCardDescription>
+        <ApprovalCardActions>
+          <ApprovalCardDeny>Deny</ApprovalCardDeny>
+          <ApprovalCardApprove>Approve</ApprovalCardApprove>
+        </ApprovalCardActions>
+      </ApprovalCardRequest>
+    </ApprovalCard>
+  ),
+};
+export const Approved: Story = {
+  render: () => (
+    <ApprovalCard approval={{ id: "call-1", approved: true }} state="approval-responded">
+      <ApprovalCardAccepted>
+        <ApprovalCardDescription>The note was posted to #finance.</ApprovalCardDescription>
+      </ApprovalCardAccepted>
+    </ApprovalCard>
+  ),
+};
+export const Denied: Story = {
+  render: () => (
+    <ApprovalCard
+      approval={{ id: "call-1", approved: false, reason: "Numbers not final" }}
+      state="approval-responded"
+    >
+      <ApprovalCardRejected>
+        <ApprovalCardDescription>
+          Denied — the quarter close numbers are not final yet.
+        </ApprovalCardDescription>
+      </ApprovalCardRejected>
+    </ApprovalCard>
+  ),
+};

package/src/confirmation.test.tsx

@@ -0,0 +1,136 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  ApprovalCard,
+  ApprovalCardActions,
+  ApprovalCardApprove,
+  ApprovalCardDeny,
+  ApprovalCardDescription,
+  ApprovalCardRequest,
+  ApprovalCardTitle,
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationApprove,
+  ConfirmationDeny,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "./confirmation";
+
+describe("Confirmation outcome tone (#7) — quiet rail, no fill", () => {
+  it("uses the success RAIL + a status icon when accepted (no colored wash)", () => {
+    const { container } = render(
+      <Confirmation state="approval-responded" approval={{ id: "t", approved: true }}>
+        <ConfirmationAccepted>
+          <ConfirmationTitle>Approved</ConfirmationTitle>
+        </ConfirmationAccepted>
+      </Confirmation>,
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert.className).toContain("border-s-success");
+    expect(alert.className).toContain("border-s-4");
+    // Quiet rail: a neutral card ground, NOT a colored wash.
+    expect(alert.className).not.toContain("bg-success/10");
+    expect(alert.className).not.toContain("bg-destructive/10");
+    expect(container.querySelector("svg")).not.toBeNull();
+  });
+
+  it("uses the destructive RAIL when rejected (no colored wash)", () => {
+    render(
+      <Confirmation state="approval-responded" approval={{ id: "t", approved: false }}>
+        <ConfirmationRejected>
+          <ConfirmationTitle>Denied</ConfirmationTitle>
+        </ConfirmationRejected>
+      </Confirmation>,
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert.className).toContain("border-s-destructive");
+    expect(alert.className).not.toContain("bg-destructive/10");
+    expect(alert.className).not.toContain("bg-success/10");
+  });
+});
+
+describe("ApprovalCard pending treatment (#191, research 11 §B.3)", () => {
+  const pending = (
+    <Confirmation state="approval-requested" approval={{ id: "t" }}>
+      <ConfirmationRequest>
+        <ConfirmationTitle>Post the final note to #finance?</ConfirmationTitle>
+        <ApprovalCardDescription>Visible to 42 people.</ApprovalCardDescription>
+        <ConfirmationActions>
+          <ConfirmationDeny>Deny</ConfirmationDeny>
+          <ConfirmationApprove>Approve</ConfirmationApprove>
+        </ConfirmationActions>
+      </ConfirmationRequest>
+    </Confirmation>
+  );
+
+  it("renders a quiet structural rail + lift while pending (no warning wash)", () => {
+    render(pending);
+    const card = screen.getByRole("group");
+    expect(card.className).not.toContain("bg-warning/10");
+    expect(card.className).toContain("border-s-4");
+    expect(card.className).toContain("border-s-border-strong");
+    expect(card.className).toContain("shadow-sm");
+  });
+
+  it("is a labelled group (NOT role=alert) while pending", () => {
+    render(pending);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    const card = screen.getByRole("group");
+    const labelledBy = card.getAttribute("aria-labelledby");
+    expect(labelledBy).toBeTruthy();
+    expect(screen.getByText("Post the final note to #finance?").id).toBe(labelledBy);
+  });
+
+  it("renders the three zones: up-scaled title, consequence, separated action band", () => {
+    render(pending);
+    const title = screen.getByText("Post the final note to #finance?");
+    expect(title.className).toContain("text-subtitle");
+    expect(screen.getByText("Visible to 42 people.")).toBeInTheDocument();
+    const band = screen.getByText("Approve").parentElement;
+    expect(band?.className).toContain("border-t");
+    expect(band?.className).toContain("border-border-strong");
+  });
+
+  it("uses the filled primary Approve + ghost Deny button grammar (never outline)", () => {
+    render(pending);
+    const approve = screen.getByText("Approve");
+    const deny = screen.getByText("Deny");
+    expect(approve.className).toContain("bg-primary");
+    expect(deny.className).not.toContain("bg-primary");
+    expect(deny.className).not.toContain("border-input");
+    expect(deny.className).toContain("hover:bg-accent");
+  });
+
+  it("hides the actions once resolved", () => {
+    render(
+      <Confirmation state="approval-responded" approval={{ id: "t", approved: true }}>
+        <ConfirmationActions>
+          <ConfirmationAction>Approve</ConfirmationAction>
+        </ConfirmationActions>
+      </Confirmation>,
+    );
+    expect(screen.queryByText("Approve")).not.toBeInTheDocument();
+  });
+});
+
+describe("ApprovalCard alias", () => {
+  it("exports the promoted ApprovalCard* front door over the same compound", () => {
+    render(
+      <ApprovalCard state="approval-requested" approval={{ id: "t" }}>
+        <ApprovalCardRequest>
+          <ApprovalCardTitle>Run the migration?</ApprovalCardTitle>
+          <ApprovalCardActions>
+            <ApprovalCardDeny>Deny</ApprovalCardDeny>
+            <ApprovalCardApprove>Approve</ApprovalCardApprove>
+          </ApprovalCardActions>
+        </ApprovalCardRequest>
+      </ApprovalCard>,
+    );
+    expect(screen.getByRole("group")).toBeInTheDocument();
+    expect(screen.getByText("Run the migration?")).toBeInTheDocument();
+    expect(screen.getByText("Approve").className).toContain("bg-primary");
+  });
+});