@elabs-ai/components-ui 4.0.0 → 4.1.0

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -45,3 +46,40 @@ export const Default: Story = {
     </Breadcrumb>
   ),
 };
+
+/**
+ * #310 — `BreadcrumbLink` had no focus-visible styling of its own, so keyboard
+ * focus fell straight through to the browser's own default ring instead of
+ * the library's token-driven indicator (`focus-ring`, ADR 0027) every other
+ * interactive control carries. A class-string assertion would be worthless
+ * (it wouldn't prove anything actually paints) so this locks the RENDERED
+ * indicator: Tab to the first link and assert a real box-shadow exists,
+ * mirroring `Button`'s `CompoundFocusIndicator` lock.
+ */
+export const FocusIndicator: Story = {
+  name: "Focus indicator (#310)",
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>brand-ui</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const link = canvas.getByRole("link", { name: "Home" });
+
+    // Tab rather than .focus(): `:focus-visible` is what `focus-ring` keys
+    // on, and a programmatic focus does not reliably match it.
+    await userEvent.tab();
+    await expect(link).toHaveFocus();
+
+    const focused = getComputedStyle(link);
+    await expect(focused.boxShadow).not.toBe("none");
+  },
+};

package/src/components/breadcrumb/breadcrumb.test.tsx

@@ -1,6 +1,13 @@
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "./breadcrumb";
+import { LocaleProvider } from "../locale-provider";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "./breadcrumb";
 describe("Breadcrumb", () => {
   it("renders the current page", () => {
     render(
@@ -15,3 +22,19 @@ describe("Breadcrumb", () => {
     expect(screen.getByText("Here")).toHaveAttribute("aria-current", "page");
   });
 });
+
+describe("BreadcrumbEllipsis — microcopy (#18)", () => {
+  it("keeps its shipped sr-only 'More' text with no LocaleProvider", () => {
+    render(<BreadcrumbEllipsis />);
+    expect(screen.getByText("More")).toHaveClass("sr-only");
+  });
+
+  it("translates via the reused generic `more` key under a LocaleProvider", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={{ more: "Mehr" }}>
+        <BreadcrumbEllipsis />
+      </LocaleProvider>,
+    );
+    expect(screen.getByText("Mehr")).toHaveClass("sr-only");
+  });
+});

package/src/components/breadcrumb/breadcrumb.tsx

@@ -2,6 +2,7 @@ import { forwardRef, type ComponentProps, type ReactNode } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
 
 export const Breadcrumb = forwardRef<HTMLElement, ComponentProps<"nav">>(
   function Breadcrumb(props, ref) {
@@ -37,7 +38,10 @@ export const BreadcrumbLink = forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("transition-colors duration-fast hover:text-foreground", className)}
+      className={cn(
+        "rounded-sm transition-colors duration-fast hover:text-foreground focus-ring",
+        className,
+      )}
       {...props}
     />
   );
@@ -69,6 +73,7 @@ export function BreadcrumbSeparator({ children, className, ...props }: Component
   );
 }
 export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">) {
+  const { t } = useLocale();
   return (
     <span
       role="presentation"
@@ -77,7 +82,7 @@ export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span
       {...props}
     >
       <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
+      <span className="sr-only">{t("more")}</span>
     </span>
   );
 }

package/src/components/button/button.stories.tsx

@@ -41,17 +41,30 @@ export const Ghost: Story = { args: { variant: "ghost" } };
 // themes.css/Tailwind failed to load, this would be the transparent default
 // `rgba(0, 0, 0, 0)` and fail — where a plain `toBeVisible()` would still pass
 // on the unstyled element.
-//
-// The harness applies the shipped DEFAULT theme (`light`) to
-// `document.documentElement` (see `apps/docs/.storybook/preview.tsx`'s
-// `withTheme` decorator, #402), so `--primary` here is light's own
-// value (`oklch(0.553 0.143 153)` in themes.css) — not the unbranded `:root`
-// fallback this test asserted against before #402 fixed the harness to
-// actually apply a theme.
 export const CssCheck: Story = {
   play: async ({ canvas }) => {
     const btn = canvas.getByRole("button", { name: "Button" });
-    await expect(getComputedStyle(btn).backgroundColor).toBe("oklch(0.553 0.143 153)");
+
+    // Create a hidden reference element styled with the same token
+    // to derive the expected value dynamically, avoiding hardcoded snapshots
+    const ref = document.createElement("div");
+    ref.className = "bg-primary";
+    ref.style.visibility = "hidden";
+    ref.style.position = "absolute";
+    document.body.appendChild(ref);
+
+    const buttonBgColor = getComputedStyle(btn).backgroundColor;
+    const referenceBgColor = getComputedStyle(ref).backgroundColor;
+
+    // Verify the token system loaded by comparing button color to reference
+    await expect(buttonBgColor).toBe(referenceBgColor);
+
+    // Verify the token system actually loaded a non-transparent color
+    // (catches the case where themes.css/Tailwind failed to load)
+    await expect(buttonBgColor).not.toBe("rgba(0, 0, 0, 0)");
+
+    // Clean up
+    ref.remove();
   },
 };
 
@@ -68,3 +81,98 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+/**
+ * #67 — the RENDERED lock on the compound focus indicator (ADR 0027 Amendment).
+ *
+ * A class-string assertion would be worthless here: `focus-ring` could name a
+ * single-layer ring and the class would still be present while the ratio stayed
+ * at 1.36:1, which is the exact failure this story exists to prevent. So this
+ * play function measures the SHIPPED pixels — it reads the computed indicator
+ * layers off a really-focused button, resolves the ground the indicator is
+ * actually drawn on by walking up to the first non-transparent ancestor, and
+ * asserts at least one layer clears WCAG 1.4.11 (3:1) against it.
+ *
+ * It is theme-agnostic on purpose: whichever theme the run resolves (the
+ * toolbar global, or `STORYBOOK_THEME=<slug>` headless — see
+ * @.claude/rules/storybook-mcp.md § Themes) the SAME assertion has to hold, so
+ * one story covers `light`, `dark` and any consumer theme a fork adds.
+ */
+export const CompoundFocusIndicator: Story = {
+  name: "Compound focus indicator (WCAG 1.4.11)",
+  play: async ({ canvas, userEvent }) => {
+    const btn = canvas.getByRole("button", { name: "Button" });
+
+    // Tab rather than .focus(): `:focus-visible` is what the utility keys on,
+    // and a programmatic focus does not reliably match it.
+    await userEvent.tab();
+    await expect(btn).toHaveFocus();
+
+    /** Resolve a token to the rgb() the browser actually paints. */
+    const resolve = (token: string) => {
+      const probe = document.createElement("div");
+      probe.style.cssText = `position:absolute;visibility:hidden;background-color:var(${token})`;
+      btn.parentElement?.appendChild(probe);
+      const value = getComputedStyle(probe).backgroundColor;
+      probe.remove();
+      return value;
+    };
+
+    // Colours come back in whatever space the author wrote — Chromium echoes
+    // `oklch()` verbatim for an oklch token — so convert through a 1x1 canvas
+    // rather than a regex: the canvas does the same CSS Color 4 → sRGB
+    // conversion the compositor does, for any colour syntax a theme may use.
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (ctx == null) throw new Error("no 2d context");
+    const srgb = (value: string): [number, number, number] => {
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = value;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+      return [r as number, g as number, b as number];
+    };
+    const luminance = (value: string) => {
+      const [r, g, b] = srgb(value).map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+      }) as [number, number, number];
+      return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    };
+    const ratio = (a: string, b: string) => {
+      const [la, lb] = [luminance(a), luminance(b)];
+      return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+    };
+
+    // The ground the indicator is drawn ON — walked, not assumed, and started at
+    // the PARENT: the indicator sits outside the button, so the button's own
+    // `--primary` fill is not the surface it has to be legible against.
+    let ground = "rgba(0, 0, 0, 0)";
+    for (let el: HTMLElement | null = btn.parentElement; el != null; el = el.parentElement) {
+      const bg = getComputedStyle(el).backgroundColor;
+      if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+        ground = bg;
+        break;
+      }
+    }
+    await expect(ground).not.toBe("rgba(0, 0, 0, 0)");
+
+    // BOTH layers must actually be emitted — a compound indicator with one layer
+    // missing is the single-layer ring this issue was filed about.
+    const focused = getComputedStyle(btn);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+
+    const ringLayer = resolve("--ring");
+    const contourLayer = focused.outlineColor;
+    // The contour layer really is the token, not currentColor or a fallback.
+    await expect(contourLayer).toBe(resolve("--ring-contour"));
+
+    const best = Math.max(ratio(ringLayer, ground), ratio(contourLayer, ground));
+    await expect(
+      best,
+      `focus indicator on ${ground}: ring ${ringLayer} = ${ratio(ringLayer, ground).toFixed(2)}, ` +
+        `contour ${contourLayer} = ${ratio(contourLayer, ground).toFixed(2)}`,
+    ).toBeGreaterThanOrEqual(3);
+  },
+};

package/src/components/button/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap touch-manipulation rounded-md text-body font-medium transition-[color,background-color,border-color,box-shadow,scale] duration-fast ease-standard active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap touch-manipulation rounded-md text-body font-medium transition-[color,background-color,border-color,box-shadow,scale] duration-fast ease-standard active:scale-[0.98] motion-reduce:active:scale-100 focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

package/src/components/card/card.stories.tsx

@@ -70,6 +70,11 @@ export const Default: Story = {
 
 /** Opt-in hover-lift for clickable cards (gated by the motion system). */
 export const Interactive: Story = {
+  // The suite runs under `prefers-reduced-motion: reduce`
+  // (`apps/docs/vitest.config.ts`, #125), so the gated `--t-base` this asserts
+  // would read as the floor. The lift is what this story exists to prove, so it
+  // opts back into full motion explicitly.
+  globals: { motionPref: "full" },
   render: () => (
     <Card interactive className="max-w-sm" tabIndex={0} role="button">
       <CardHeader>
@@ -153,17 +158,17 @@ export const DetailSideHover: Story = {
             </p>
             <ul className="text-body space-y-1">
               <li>
-                <button className="text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+                <button className="text-foreground hover:underline focus-ring rounded-sm px-1">
                   View report
                 </button>
               </li>
               <li>
-                <button className="text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+                <button className="text-foreground hover:underline focus-ring rounded-sm px-1">
                   Export CSV
                 </button>
               </li>
               <li>
-                <button className="text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+                <button className="text-foreground hover:underline focus-ring rounded-sm px-1">
                   Share
                 </button>
               </li>
@@ -223,10 +228,10 @@ export const DetailBottomHover: Story = {
         className="h-full"
         detail={
           <div className="flex items-center gap-3">
-            <button className="text-body text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+            <button className="text-body text-foreground hover:underline focus-ring rounded-sm px-1">
               Drill down
             </button>
-            <button className="text-body text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1">
+            <button className="text-body text-foreground hover:underline focus-ring rounded-sm px-1">
               Download
             </button>
           </div>
@@ -390,7 +395,7 @@ export const DetailHoverKeyboardReveal: Story = {
           <div className="flex flex-col gap-2 pt-1">
             <button
               data-testid="detail-action"
-              className="text-body text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1 text-start"
+              className="text-body text-foreground hover:underline focus-ring rounded-sm px-1 text-start"
             >
               Open details
             </button>

package/src/components/card/card.tsx

@@ -23,7 +23,7 @@ export const cardVariants = cva("rounded-lg border bg-card text-card-foreground
     // duration-* utility; the transform is neutralized under OS reduced-motion
     // (the shadow/border still respond — "reduced != none").
     interactive: {
-      true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-base ease-standard hover:-translate-y-1 hover:border-ring/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:translate-y-0",
+      true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-base ease-standard hover:-translate-y-1 hover:border-ring/40 hover:shadow-md focus-ring motion-reduce:hover:translate-y-0",
       false: "",
     },
   },

package/src/components/change-review/change-review.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 import { useState } from "react";
+import { type CheckResult } from "../../lib/check-result";
 import {
   ChangeReview,
   ChangeReviewHeader,
@@ -42,6 +43,41 @@ const PROVENANCE = {
   note: "run-abc123",
 };
 
+// ─── Sample hunks with verification checks (#112) ─────────────────────────────
+
+const HUNKS_WITH_CHECKS: ChangeHunk[] = [
+  {
+    id: "checked-1",
+    title: "src/api/handler.ts",
+    status: "modified",
+    before: `function handle(req) { return req.body; }`,
+    after: `function handle(req: Request) { return req.body; }`,
+    checks: [
+      { label: "eslint", ok: true, durationMs: 214 },
+      {
+        label: "tsc",
+        ok: false,
+        durationMs: 890,
+        detail:
+          "src/api/handler.ts:1:31 — Parameter 'req' implicitly has an 'any' type, and the " +
+          "surrounding function type annotation does not resolve it. This is a deliberately " +
+          "long detail line so it renders behind a collapsed disclosure by default.",
+      },
+    ],
+  },
+  {
+    id: "checked-2",
+    title: "src/api/handler.test.ts",
+    status: "added",
+    after: `it("handles a request", () => { ... });`,
+    checks: [
+      { label: "pre_tool_use", ok: true, phase: "before" },
+      { label: "eslint", ok: true, phase: "after", durationMs: 120 },
+      { label: "vitest", ok: true, phase: "after", detail: "3 passed", durationMs: 1420 },
+    ] satisfies CheckResult[],
+  },
+];
+
 // ─── Meta ─────────────────────────────────────────────────────────────────────
 
 const meta = {
@@ -53,10 +89,30 @@ const meta = {
     docs: {
       description: {
         component:
+          "The ACCEPT/REJECT diff surface; read-only patch lines are `AI/DiffView` and an " +
+          "editable side-by-side is `Editor/DiffEditor` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "AI-edit trust gate. When an agent proposes edits, the human reviews them " +
           "hunk-by-hunk and accepts or rejects each before they apply. Compound " +
           "component with lifted state — compose parts for custom layouts, or use the " +
-          "convenience `<ChangeReview>` root.",
+          "convenience `<ChangeReview>` root.\n\n" +
+          "**Ships from `@elabs-ai/components-ui`**, not from the package this story " +
+          "group names. Stories are grouped by what a component is *for*, which " +
+          "`docs/STORYBOOK_GUIDELINES.md` names as intentional and cites this component " +
+          "as the worked example.\n\n" +
+          "**A hunk’s `before` / `after` are prose, not diff lines.** They are ordinary " +
+          "`ReactNode`s, drawn as a deliberately quiet no-fill comparison — a struck " +
+          "muted “before” above a plain “after”, with the status rail carrying the " +
+          "polarity. This component is not a line renderer and is not going to become " +
+          "one.\n\n" +
+          "**Structured `DiffLine[]` hunks arrive by injection.** The app that depends " +
+          "on both packages passes a `<DiffView>` (`@elabs-ai/components-ai`) through " +
+          "the `renderHunk` render-prop or a hunk’s `after` slot; neither package " +
+          "imports the other. `ChangeHunk` gains no `lines` field and `DiffLine` " +
+          "never moves — a ratified seam, recorded in § 3 of the adoption-architecture " +
+          "decision. The *Injected hunk renderer* story below shows the shape with a " +
+          "stand-in node; the real wiring is *Composed into ChangeReview (ui)* on " +
+          "[AI/DiffView](?path=/docs/ai-diffview--docs).",
       },
     },
   },
@@ -239,6 +295,55 @@ export const CustomRenderer: Story = {
   },
 };
 
+// ─── Injected hunk renderer (the DiffView seam) ───────────────────────────────
+//
+// BINDING SEAM — docs/decisions/2026-09-01-brainless-adoption-architecture.md § 3.
+// `ChangeHunk` gains no `lines` field and `DiffLine` never moves into this
+// package. An app that wants structured patch rows inside the trust gate injects
+// a renderer through `renderHunk` (or a hunk's `after` slot); in a real app that
+// node is `<DiffView lines={…} />` from `@elabs-ai/components-ai`.
+//
+// This package has no dependency on that one in EITHER direction — that is the
+// whole point of the seam — so the story stands in for it with a plain node of
+// the same shape. The real composition is the `ChangeReviewComposition` story in
+// `packages/ai/src/diff-view.stories.tsx`, which can import both.
+
+function StandInLineRenderer({ file }: { file: string }) {
+  return (
+    <div
+      data-testid={`injected-${file}`}
+      className="rounded-md bg-surface-muted p-3 text-meta text-muted-foreground"
+    >
+      <span className="font-mono">{`<DiffView lines={…} />`}</span> renders the patch rows for{" "}
+      <span className="font-medium text-foreground">{file}</span> here.
+    </div>
+  );
+}
+
+export const InjectedHunkRenderer: Story = {
+  args: {
+    hunks: HUNKS,
+    renderHunk: (hunk) => <StandInLineRenderer file={hunk.title ?? hunk.id} />,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // The injected node replaces the default before/after prose on every hunk…
+    await waitFor(() => expect(canvas.getByTestId("injected-config/settings.json")).toBeVisible());
+    expect(canvas.getAllByTestId(/^injected-/)).toHaveLength(3);
+
+    // …and the default prose comparison is gone, because the seam replaces it.
+    expect(canvas.queryByText('"timeout": 30')).not.toBeInTheDocument();
+
+    // Approve/reject still belongs to ChangeReview, not to the injected renderer.
+    await userEvent.click(
+      canvas.getByRole("button", { name: /approve hunk: config\/settings\.json/i }),
+    );
+    await waitFor(() => expect(canvas.getByText("1 of 3 approved")).toBeVisible());
+    expect(canvas.getByTestId("injected-config/settings.json")).toBeVisible();
+  },
+};
+
 // ─── Compound (manual layout) ─────────────────────────────────────────────────
 
 export const Compound: Story = {
@@ -286,3 +391,42 @@ edge cases properly and includes proper error boundaries.`,
     ],
   },
 };
+
+// ─── With verification checks (#112) ──────────────────────────────────────────
+// Evidence a reviewer needs (lint / types / tests / policy hooks) rendered
+// alongside the diff. A failing check informs the decision — it never blocks
+// approval, so `checked-1` (which carries a failing `tsc` check) can still be
+// approved below.
+
+export const WithChecks: Story = {
+  args: {
+    hunks: HUNKS_WITH_CHECKS,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByText("src/api/handler.ts")).toBeVisible());
+
+    // Passing and failing checks are distinguishable by accessible text —
+    // never by colour alone.
+    await waitFor(() => expect(canvas.getAllByText("Passed").length).toBeGreaterThan(0));
+    await waitFor(() => expect(canvas.getAllByText("Failed").length).toBeGreaterThan(0));
+
+    // The long `tsc` detail is collapsed by default…
+    const showDetail = canvas.getByRole("button", { name: /show detail/i });
+    expect(canvas.queryByText(/implicitly has an 'any' type/)).not.toBeInTheDocument();
+    // …and expands on click.
+    await userEvent.click(showDetail);
+    await waitFor(() => expect(canvas.getByText(/implicitly has an 'any' type/)).toBeVisible());
+
+    // Both phases present on the second hunk → grouped "Before" / "After".
+    await waitFor(() => expect(canvas.getByText("Before")).toBeVisible());
+    await waitFor(() => expect(canvas.getByText("After")).toBeVisible());
+
+    // A failing check does not block approval — it only informs it.
+    const approveFirstHunk = canvas.getByRole("button", {
+      name: /approve hunk: src\/api\/handler\.ts/i,
+    });
+    await userEvent.click(approveFirstHunk);
+    await waitFor(() => expect(canvas.getByText("1 of 2 approved")).toBeVisible());
+  },
+};

package/src/components/change-review/change-review.test.tsx

@@ -65,6 +65,26 @@ describe("ChangeReview — render", () => {
     );
     expect(screen.getByTestId("custom-prov")).toBeInTheDocument();
   });
+
+  it("exposes structured provenance as a named group reachable by assistive tech", () => {
+    // aria-label on a role-less <div> is prohibited and silently discarded (#159) —
+    // assert the accessible name actually resolves via the ARIA role tree, not just
+    // that the attribute is present in the DOM.
+    render(
+      <ChangeReview
+        hunks={HUNKS}
+        provenance={{ author: "Atlas Agent", model: "claude-sonnet-4-6", timestamp: "14:02" }}
+      />,
+    );
+    expect(screen.getByRole("group", { name: "Change provenance" })).toBeInTheDocument();
+  });
+
+  it("exposes ReactNode provenance as a named group reachable by assistive tech", () => {
+    render(
+      <ChangeReview hunks={HUNKS} provenance={<span data-testid="custom-prov">Custom</span>} />,
+    );
+    expect(screen.getByRole("group", { name: "Change provenance" })).toBeInTheDocument();
+  });
 });
 
 // ─── Initial state with controlled approved set ───────────────────────────────
@@ -232,6 +252,129 @@ describe("ChangeReview — accessibility", () => {
   });
 });
 
+// ─── Checks (verification evidence, #112) ─────────────────────────────────────
+
+describe("ChangeReview — checks", () => {
+  it("shows a failing check's status in accessible text with an icon distinct from a passing check's", () => {
+    const hunksWithChecks: ChangeHunk[] = [
+      {
+        id: "h1",
+        title: "config/a.json",
+        status: "modified",
+        before: "old",
+        after: "new",
+        checks: [
+          { label: "eslint", ok: true },
+          { label: "tsc", ok: false, detail: "Type 'string' is not assignable to type 'number'." },
+        ],
+      },
+    ];
+    render(<ChangeReview hunks={hunksWithChecks} />);
+
+    // Accessible text carries the pass/fail status word — not color alone.
+    const passed = screen.getByText("Passed");
+    const failed = screen.getByText("Failed");
+    expect(passed).toBeInTheDocument();
+    expect(failed).toBeInTheDocument();
+
+    // The icon differs between a passing and a failing check (StatusIcon's
+    // canonical `complete` vs `failed` glyphs — never colour alone).
+    const passRow = passed.closest('[data-slot="change-review-hunk-check"]')!;
+    const failRow = failed.closest('[data-slot="change-review-hunk-check"]')!;
+    const passIcon = passRow.querySelector("svg[data-status]");
+    const failIcon = failRow.querySelector("svg[data-status]");
+    expect(passIcon).toHaveAttribute("data-status", "complete");
+    expect(failIcon).toHaveAttribute("data-status", "failed");
+    expect(passIcon?.getAttribute("data-status")).not.toBe(failIcon?.getAttribute("data-status"));
+  });
+
+  it("allows approving a hunk that carries a failing check", async () => {
+    const user = userEvent.setup();
+    const hunksWithFailingCheck: ChangeHunk[] = [
+      {
+        id: "h1",
+        title: "config/a.json",
+        status: "modified",
+        before: "old",
+        after: "new",
+        checks: [{ label: "tsc", ok: false, detail: "Type error" }],
+      },
+    ];
+    render(<ChangeReview hunks={hunksWithFailingCheck} />);
+
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+
+    const btn = screen.getByRole("button", { name: /approve hunk: config\/a\.json/i });
+    await user.click(btn);
+
+    expect(screen.getByText("1 of 1 approved")).toBeInTheDocument();
+    expect(screen.getByText("Approved")).toBeInTheDocument();
+    // The failing check is still shown — informational, not blocking.
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+  });
+
+  it("does not render a checks section when a hunk has no checks (strictly additive)", () => {
+    render(<ChangeReview hunks={HUNKS} />);
+    expect(screen.queryByText("Passed")).not.toBeInTheDocument();
+    expect(screen.queryByText("Failed")).not.toBeInTheDocument();
+  });
+
+  it("groups checks into Before / After sections only when both phases are present", () => {
+    const bothPhases: ChangeHunk[] = [
+      {
+        id: "h1",
+        checks: [
+          { label: "pre_tool_use", ok: true, phase: "before" },
+          { label: "post_tool_use", ok: true, phase: "after" },
+        ],
+      },
+    ];
+    render(<ChangeReview hunks={bothPhases} />);
+    expect(screen.getByText("Before")).toBeInTheDocument();
+    expect(screen.getByText("After")).toBeInTheDocument();
+  });
+
+  it("does not render phase headers when only one phase is present", () => {
+    const onePhase: ChangeHunk[] = [
+      {
+        id: "h1",
+        checks: [{ label: "eslint", ok: true, phase: "before" }],
+      },
+    ];
+    render(<ChangeReview hunks={onePhase} />);
+    expect(screen.queryByText("Before")).not.toBeInTheDocument();
+    expect(screen.queryByText("After")).not.toBeInTheDocument();
+    expect(screen.getByText("eslint")).toBeInTheDocument();
+  });
+
+  it("renders a short detail line inline and shows the duration", () => {
+    const hunksWithDuration: ChangeHunk[] = [
+      { id: "h1", checks: [{ label: "eslint", ok: true, detail: "0 problems", durationMs: 128 }] },
+    ];
+    render(<ChangeReview hunks={hunksWithDuration} />);
+    expect(screen.getByText("0 problems")).toBeInTheDocument();
+    expect(screen.getByText("128ms")).toBeInTheDocument();
+  });
+
+  it("collapses a long detail line behind a disclosure, expandable on click", async () => {
+    const user = userEvent.setup();
+    const longDetail =
+      "This is a deliberately long detail line that exceeds the inline collapse " +
+      "threshold and should therefore render behind a disclosure toggle by default.";
+    const hunksWithLongDetail: ChangeHunk[] = [
+      { id: "h1", checks: [{ label: "tsc", ok: false, detail: longDetail }] },
+    ];
+    render(<ChangeReview hunks={hunksWithLongDetail} />);
+
+    // Collapsed by default: the detail text is not yet in the document.
+    expect(screen.queryByText(longDetail)).not.toBeInTheDocument();
+    const trigger = screen.getByRole("button", { name: /show detail/i });
+
+    await user.click(trigger);
+    expect(await screen.findByText(longDetail)).toBeInTheDocument();
+  });
+});
+
 // ─── Compound usage ───────────────────────────────────────────────────────────
 
 describe("ChangeReview — compound component parts", () => {