@elabs-ai/components-process 4.2.0 → 5.1.0

package/src/__contract__/violation-list.contract.test.tsx

@@ -0,0 +1,49 @@
+// GENERATED by scripts/gen-contract-tests.mjs — do not edit; re-run the generator instead.
+/**
+ * Contract probe for ViolationList (`packages/process/src/violation-list/violation-list.tsx`), derived from its
+ * `Default` story (packages/process/src/violation-list/violation-list.stories.tsx). See scripts/gen-contract-tests.mjs.
+ */
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { createRef } from "react";
+import * as stories from "../violation-list/violation-list.stories";
+import knownFailuresJson from "../../../../scripts/check/contract-known-failures.json";
+
+afterEach(cleanup);
+
+// Every component here has its own prop/ref/element shape; a generated probe
+// stays generic on purpose (loosely typed, not untyped — see
+// scripts/gen-contract-tests.mjs) rather than re-deriving each one.
+const KNOWN_FAILURES: Record<string, string> = knownFailuresJson;
+const meta = stories.default as { component?: unknown; args?: Record<string, unknown> };
+const Default = (stories as { Default?: { args?: Record<string, unknown> } }).Default;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- probe target; see comment above
+const Component = meta.component as any;
+const args = { ...(meta.args ?? {}), ...(Default?.args ?? {}) };
+const isForwardRefComponent = Component?.["$$typeof"] === Symbol.for("react.forward_ref");
+
+/** Wrap a known, tracked failure in `it.fails` so fixing it forces the key's removal. */
+function contractIt(assertion: string, name: string, fn: () => void) {
+  const key = `process-violationlist--default|jsdom|jsdom|${assertion}`;
+  const reason = KNOWN_FAILURES[key];
+  if (reason) return it.fails(`${name} (known failure: ${reason})`, fn);
+  return it(name, fn);
+}
+
+describe("ViolationList contract", () => {
+  it.skipIf(!isForwardRefComponent)("forwards a ref to a DOM element", () => {
+    const ref = createRef<Element>();
+    render(<Component {...args} ref={ref} />);
+    expect(ref.current).toBeInstanceOf(Element);
+  });
+
+  contractIt("className", "merges a caller className onto the root", () => {
+    const { container } = render(<Component {...args} className="contract-probe" />);
+    expect(container.querySelector(".contract-probe")).not.toBeNull();
+  });
+
+  contractIt("data-slot", 'exposes data-slot="violation-list" on its root', () => {
+    const { container } = render(<Component {...args} />);
+    expect(container.querySelector('[data-slot="violation-list"]')).not.toBeNull();
+  });
+});

package/src/abstraction-controls/abstraction-controls-per-type.test.tsx

@@ -0,0 +1,80 @@
+/** Per-object-type sliders — RM-066. */
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { AbstractionOptions } from "../core/abstract-graph";
+import { AbstractionControls, type ObjectTypeAbstraction } from "./abstraction-controls";
+
+afterEach(cleanup);
+
+const half: AbstractionOptions = { activities: 0.5, paths: 0.5 };
+
+function renderPerType(perType: Record<string, ObjectTypeAbstraction>) {
+  const onPerTypeChange = vi.fn();
+  const onAbstractionChange = vi.fn();
+  render(
+    <AbstractionControls
+      abstraction={half}
+      onAbstractionChange={onAbstractionChange}
+      graph={{ activities: [] }}
+      hiddenCounts={{ activities: 0, paths: 0 }}
+      perType={perType}
+      onPerTypeChange={onPerTypeChange}
+    />,
+  );
+  return { onPerTypeChange, onAbstractionChange };
+}
+
+describe("AbstractionControls — per object type", () => {
+  it("renders nothing extra without perType", () => {
+    render(
+      <AbstractionControls
+        abstraction={half}
+        onAbstractionChange={vi.fn()}
+        graph={{ activities: [] }}
+        hiddenCounts={{ activities: 0, paths: 0 }}
+      />,
+    );
+    expect(document.querySelector('[data-slot="abstraction-controls-per-type"]')).toBeNull();
+  });
+
+  it("scales linked types with the global slider and leaves unlinked ones alone", async () => {
+    const { onPerTypeChange } = renderPerType({
+      order: { activities: 0.4, paths: 0.5 },
+      item: { activities: 0.8, paths: 0.5, linked: false },
+    });
+    // The global activities slider's 25% tick: 50% → 25% halves every linked type.
+    const activities = document.querySelector('[data-slot="abstraction-controls-activities"]')!;
+    await userEvent.click(
+      [...activities.querySelectorAll("button")].find((b) => b.textContent === "25%")!,
+    );
+    expect(onPerTypeChange).toHaveBeenCalledWith({
+      order: { activities: 0.2, paths: 0.5 },
+      item: { activities: 0.8, paths: 0.5, linked: false },
+    });
+  });
+
+  it("toggles a type's link with a named, pressed-state button", async () => {
+    const { onPerTypeChange } = renderPerType({ item: { activities: 1, paths: 1 } });
+    const link = screen.getByRole("button", { name: "Link item to the global sliders" });
+    expect(link).toHaveAttribute("aria-pressed", "true");
+    await userEvent.click(link);
+    expect(onPerTypeChange).toHaveBeenCalledWith({
+      item: { activities: 1, paths: 1, linked: false },
+    });
+  });
+
+  it("reveals the type's own named sliders when expanded", async () => {
+    renderPerType({ item: { activities: 0.6, paths: 0.9 } });
+    expect(screen.queryByRole("slider", { name: "item activities" })).toBeNull();
+    await userEvent.click(screen.getByRole("button", { name: /item/, expanded: false }));
+    expect(screen.getByRole("slider", { name: "item activities" })).toHaveAttribute(
+      "aria-valuenow",
+      "60",
+    );
+    expect(screen.getByRole("slider", { name: "item paths" })).toHaveAttribute(
+      "aria-valuenow",
+      "90",
+    );
+  });
+});

package/src/abstraction-controls/abstraction-controls.stories.tsx

@@ -5,7 +5,7 @@ import { abstractGraph, type AbstractionOptions } from "../core/abstract-graph";
 import { discoverGraph } from "../core/discover-graph";
 import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
 import type { ProcessGraph } from "../core/types";
-import { AbstractionControls } from "./abstraction-controls";
+import { AbstractionControls, type ObjectTypeAbstraction } from "./abstraction-controls";
 import { backboneGraph } from "./abstraction-controls-fixtures";
 
 const log = generateSyntheticLog({ cases: 240, seed: 42 });
@@ -186,3 +186,45 @@ export const Interaction: Story = {
     expect(Math.round(60 * (afterAuto / 100))).toBeLessThanOrEqual(25);
   },
 };
+
+// Object-centric — RM-066
+function PerObjectTypeControls() {
+  const [abstraction, setAbstraction] = useState<AbstractionOptions>({ activities: 1, paths: 1 });
+  const [perType, setPerType] = useState<Record<string, ObjectTypeAbstraction>>({
+    order: { activities: 1, paths: 1 },
+    item: { activities: 0.8, paths: 0.6, linked: false },
+    package: { activities: 1, paths: 1 },
+  });
+  return (
+    <div className="max-w-sm">
+      <AbstractionControls
+        abstraction={abstraction}
+        onAbstractionChange={(next) => setAbstraction((prev) => ({ ...prev, ...next }))}
+        graph={fullGraph}
+        hiddenCounts={{ activities: 0, paths: 0 }}
+        perType={perType}
+        onPerTypeChange={setPerType}
+      />
+    </div>
+  );
+}
+
+/**
+ * Object-centric (RM-066): one collapsible slider pair per object type under the global
+ * pair. Linked types follow the global sliders proportionally; `item` is unlinked here, so
+ * moving the global activities slider to 50% halves `order` and `package` only.
+ */
+export const PerObjectType: Story = {
+  render: () => <PerObjectTypeControls />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.getByRole("button", { name: "Link item to the global sliders" }),
+    ).toHaveAttribute("aria-pressed", "false");
+    await userEvent.click(canvas.getAllByRole("button", { name: "50%" })[0]!);
+    const row = (type: string) =>
+      canvasElement.querySelector<HTMLElement>(`[data-object-type="${type}"]`)!;
+    await waitFor(() => expect(row("order")).toHaveTextContent("50% · 100%"));
+    await expect(row("item")).toHaveTextContent("80% · 60%");
+  },
+};

package/src/abstraction-controls/abstraction-controls.tsx

@@ -26,7 +26,9 @@
  */
 import { forwardRef, useCallback, useId, type HTMLAttributes } from "react";
 import { Sparkles } from "lucide-react";
+import { ChevronRight, Link2, Link2Off } from "lucide-react";
 import { Button, Label, Slider, Switch, useLocale } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import type { AbstractionOptions } from "../core/abstract-graph";
 import type { ProcessGraph } from "../core/types";
@@ -81,6 +83,148 @@ export interface AbstractionControlsProps extends Omit<HTMLAttributes<HTMLDivEle
   autoMaxActivities?: number;
   /** Accessible name for the control group. Default from locale. */
   label?: string;
+  /**
+   * Object-centric — RM-066. One slider pair per object type, keyed by type, rendered as
+   * collapsible rows under the global pair. A `linked` type (the default) follows the
+   * global sliders proportionally; toggle its link to abstract it on its own. Feed the
+   * result to `abstractObjectCentricGraph`.
+   */
+  perType?: Readonly<Record<string, ObjectTypeAbstraction>>;
+  /** Object-centric — RM-066. Called with the whole next per-type record. */
+  onPerTypeChange?(next: Record<string, ObjectTypeAbstraction>): void;
+  /** Object-centric — RM-066. Strings for the per-type rows. */
+  perTypeLabels?: ObjectTypeAbstractionLabels;
+}
+
+/** Object-centric — RM-066. One object type's abstraction fractions. */
+export interface ObjectTypeAbstraction {
+  /** Fraction of this type's activities to keep, `0..1`. */
+  activities: number;
+  /** Fraction of this type's paths to keep, `0..1`. */
+  paths: number;
+  /** Follow the global sliders proportionally. @default true */
+  linked?: boolean;
+}
+
+/** Object-centric — RM-066. Strings for the per-type rows. */
+export interface ObjectTypeAbstractionLabels {
+  section: string;
+  link: (type: string) => string;
+  activities: (type: string) => string;
+  paths: (type: string) => string;
+}
+
+/** English defaults for {@link ObjectTypeAbstractionLabels}. */
+export const OBJECT_TYPE_ABSTRACTION_DEFAULT_LABELS: Readonly<ObjectTypeAbstractionLabels> =
+  Object.freeze({
+    section: "Per object type",
+    link: (type: string) => `Link ${type} to the global sliders`,
+    activities: (type: string) => `${type} activities`,
+    paths: (type: string) => `${type} paths`,
+  });
+
+/**
+ * Scale every linked type by the global pair's own change: a type at 60% whose global
+ * slider moves from 100% to 50% lands at 30%. From a global of 0 there is no ratio, so
+ * linked types take the new global value as-is.
+ */
+function scalePerType(
+  perType: Readonly<Record<string, ObjectTypeAbstraction>>,
+  current: Pick<AbstractionOptions, "activities" | "paths">,
+  patch: Partial<Pick<AbstractionOptions, "activities" | "paths">>,
+): Record<string, ObjectTypeAbstraction> {
+  const next: Record<string, ObjectTypeAbstraction> = {};
+  for (const [type, entry] of Object.entries(perType)) {
+    if (entry.linked === false) {
+      next[type] = entry;
+      continue;
+    }
+    const scaled = { ...entry };
+    for (const axis of ["activities", "paths"] as const) {
+      const target = patch[axis];
+      if (target === undefined) continue;
+      const from = current[axis];
+      scaled[axis] = Math.min(1, Math.max(0, from > 0 ? (entry[axis] * target) / from : target));
+    }
+    next[type] = scaled;
+  }
+  return next;
+}
+
+/** Object-centric — RM-066. One type's collapsible row: a link toggle and two sliders. */
+function ObjectTypeSliders({
+  type,
+  entry,
+  labels,
+  onChange,
+}: {
+  type: string;
+  entry: ObjectTypeAbstraction;
+  labels: ObjectTypeAbstractionLabels;
+  onChange(next: ObjectTypeAbstraction): void;
+}) {
+  const baseId = useId();
+  const linked = entry.linked !== false;
+  const activitiesPercent = toPercent(entry.activities);
+  const pathsPercent = toPercent(entry.paths);
+  return (
+    <Collapsible
+      data-slot="abstraction-controls-object-type"
+      data-object-type={type}
+      data-linked={linked ? "true" : "false"}
+      className="flex flex-col gap-2"
+    >
+      <div className="flex items-center justify-between gap-2">
+        <CollapsibleTrigger asChild>
+          <Button type="button" variant="ghost" size="sm" className="group min-w-0 justify-start">
+            <ChevronRight
+              aria-hidden="true"
+              className="transition-transform duration-fast ease-standard group-data-[state=open]:rotate-90 motion-reduce:transition-none"
+            />
+            <span className="truncate">{type}</span>
+            <span className="text-meta text-muted-foreground tabular-nums">
+              {activitiesPercent}% · {pathsPercent}%
+            </span>
+          </Button>
+        </CollapsibleTrigger>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-pressed={linked}
+          aria-label={labels.link(type)}
+          data-slot="abstraction-controls-object-type-link"
+          onClick={() => onChange({ ...entry, linked: !linked })}
+        >
+          {linked ? <Link2 aria-hidden="true" /> : <Link2Off aria-hidden="true" />}
+        </Button>
+      </div>
+      <CollapsibleContent className="flex flex-col gap-3 ps-6">
+        <Slider
+          id={`${baseId}-activities`}
+          min={SLIDER_MIN}
+          max={SLIDER_MAX}
+          step={1}
+          value={[activitiesPercent]}
+          onValueChange={([next]) =>
+            onChange({ ...entry, activities: fromPercent(next ?? activitiesPercent) })
+          }
+          aria-label={labels.activities(type)}
+        />
+        <Slider
+          id={`${baseId}-paths`}
+          min={SLIDER_MIN}
+          max={SLIDER_MAX}
+          step={1}
+          value={[pathsPercent]}
+          onValueChange={([next]) =>
+            onChange({ ...entry, paths: fromPercent(next ?? pathsPercent) })
+          }
+          aria-label={labels.paths(type)}
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  );
 }
 
 /**
@@ -131,6 +275,9 @@ export const AbstractionControls = forwardRef<HTMLDivElement, AbstractionControl
       hiddenCounts,
       autoMaxActivities = 25,
       label,
+      perType,
+      onPerTypeChange,
+      perTypeLabels = OBJECT_TYPE_ABSTRACTION_DEFAULT_LABELS,
       className,
       ...props
     },
@@ -143,13 +290,29 @@ export const AbstractionControls = forwardRef<HTMLDivElement, AbstractionControl
     const activitiesPercent = toPercent(abstraction.activities);
     const pathsPercent = toPercent(abstraction.paths);
 
+    // Object-centric — RM-066: a global change carries every linked type along with it.
+    const syncPerType = useCallback(
+      (patch: Partial<Pick<AbstractionOptions, "activities" | "paths">>) => {
+        if (perType && onPerTypeChange) {
+          onPerTypeChange(scalePerType(perType, abstraction, patch));
+        }
+      },
+      [perType, onPerTypeChange, abstraction],
+    );
+
     const setActivitiesPercent = useCallback(
-      (percent: number) => onAbstractionChange({ activities: fromPercent(percent) }),
-      [onAbstractionChange],
+      (percent: number) => {
+        onAbstractionChange({ activities: fromPercent(percent) });
+        syncPerType({ activities: fromPercent(percent) });
+      },
+      [onAbstractionChange, syncPerType],
     );
     const setPathsPercent = useCallback(
-      (percent: number) => onAbstractionChange({ paths: fromPercent(percent) }),
-      [onAbstractionChange],
+      (percent: number) => {
+        onAbstractionChange({ paths: fromPercent(percent) });
+        syncPerType({ paths: fromPercent(percent) });
+      },
+      [onAbstractionChange, syncPerType],
     );
 
     const handleAuto = useCallback(() => {
@@ -161,7 +324,17 @@ export const AbstractionControls = forwardRef<HTMLDivElement, AbstractionControl
         activities: result.activities,
         paths: Math.min(1, result.activities + AUTO_PATHS_OFFSET),
       });
-    }, [graph.activities.length, hiddenCounts.activities, autoMaxActivities, onAbstractionChange]);
+      syncPerType({
+        activities: result.activities,
+        paths: Math.min(1, result.activities + AUTO_PATHS_OFFSET),
+      });
+    }, [
+      graph.activities.length,
+      hiddenCounts.activities,
+      autoMaxActivities,
+      onAbstractionChange,
+      syncPerType,
+    ]);
 
     // Two independently-pluralized fragments, joined — `t()` selects its plural category
     // from a single `count` var, so one activities count and one paths count cannot share
@@ -248,6 +421,26 @@ export const AbstractionControls = forwardRef<HTMLDivElement, AbstractionControl
           </div>
         </div>
 
+        {/* Object-centric — RM-066 */}
+        {perType ? (
+          <div
+            data-slot="abstraction-controls-per-type"
+            role="group"
+            aria-label={perTypeLabels.section}
+            className="flex flex-col gap-1"
+          >
+            {Object.entries(perType).map(([type, entry]) => (
+              <ObjectTypeSliders
+                key={type}
+                type={type}
+                entry={entry}
+                labels={perTypeLabels}
+                onChange={(next) => onPerTypeChange?.({ ...perType, [type]: next })}
+              />
+            ))}
+          </div>
+        ) : null}
+
         <div
           data-slot="abstraction-controls-footer"
           className="flex items-center justify-between gap-3"

package/src/case-table/case-table.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn } from "storybook/test";
+import { CaseTable } from "./case-table";
+import { casesFromLog, type CaseRow } from "../core/cases-from-log";
+import fixture from "../core/fixtures/order-to-cash-small.json";
+import type { EventLog } from "../core/types";
+
+const orderToCash = fixture as EventLog;
+const CASES: CaseRow[] = casesFromLog(orderToCash);
+
+// case-3 is rejected early (§4 R11's "conformance flag") — the other four follow one of
+// the two happy-path variants. Attach conformance manually: `casesFromLog` never fabricates
+// one (no conformance model lives in `/core`), same rule as `ProcessKpiStrip`'s own tile.
+function conformanceFor(caseId: string): CaseRow["conformance"] {
+  if (caseId === "case-3") return "nonConforming";
+  if (caseId === "case-5") return "unknown";
+  return "conforming";
+}
+
+const CASES_WITH_CONFORMANCE: CaseRow[] = CASES.map((row) => ({
+  ...row,
+  conformance: conformanceFor(row.caseId),
+}));
+
+const meta = {
+  title: "Process/CaseTable",
+  component: CaseTable,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A column configuration over `@elabs-ai/components-data`'s `DataTable` (§4 R11) — " +
+          "case id, start/end, duration, event count, variant id and an optional conformance " +
+          "flag. The CSV export mirrors the visible column set exactly, in the same order.",
+      },
+    },
+  },
+} satisfies Meta<typeof CaseTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Every case from a small order-to-cash log, no conformance model attached yet. */
+export const Default: Story = {
+  args: { cases: CASES },
+};
+
+/** Case-3 (rejected early) is flagged non-conforming; case-5 is unmeasured. */
+export const WithConformance: Story = {
+  args: { cases: CASES_WITH_CONFORMANCE },
+};
+
+/** No cases match the current filter — the export button disables with nothing to export. */
+export const Empty: Story = {
+  args: { cases: [] },
+};
+
+/** Cases are still loading — `DataTable`'s own skeleton rows, not a hand-rolled shimmer. */
+export const Loading: Story = {
+  args: { cases: [], loading: true },
+};
+
+const onCaseOpen = fn();
+
+/**
+ * Row activation (#204 acceptance): a click, or Tab + Enter on the row's own keyboard
+ * activation target, opens the SAME case (RM-057 wires this to a `CaseTimeline` drawer).
+ */
+export const RowActivation: Story = {
+  args: { cases: CASES_WITH_CONFORMANCE, onCaseOpen },
+  play: async ({ canvas, userEvent }) => {
+    onCaseOpen.mockClear();
+
+    // The first cell renders both the visible "case-2" text AND the row's sr-only
+    // activation button, which is also named "case-2" (#337) — take the visible one.
+    const [visibleCell] = canvas.getAllByText("case-2");
+    await userEvent.click(visibleCell as HTMLElement);
+    await expect(onCaseOpen).toHaveBeenCalledWith("case-2");
+
+    // Keyboard: DataTable's row-activation button is the row's own tab stop, named after
+    // the row's first visible cell (#337) — Tab to it, Enter activates.
+    const rowAction = canvas.getByRole("button", { name: "case-1" });
+    rowAction.focus();
+    await expect(rowAction).toHaveFocus();
+    await userEvent.keyboard("{Enter}");
+    await expect(onCaseOpen).toHaveBeenCalledWith("case-1");
+    await expect(onCaseOpen).toHaveBeenCalledTimes(2);
+  },
+};

package/src/case-table/case-table.test.tsx

@@ -0,0 +1,148 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CaseTable } from "./case-table";
+import { casesFromLog } from "../core/cases-from-log";
+import fixture from "../core/fixtures/order-to-cash-small.json";
+import type { EventLog } from "../core/types";
+import type { CaseRow } from "../core/cases-from-log";
+
+afterEach(cleanup);
+
+const orderToCash = fixture as EventLog;
+
+const CASES: CaseRow[] = [
+  {
+    caseId: "case-1",
+    start: "2026-01-05T09:00:00.000Z",
+    end: "2026-01-05T14:00:00.000Z",
+    durationMs: 18_000_000,
+    eventCount: 6,
+    variantId: "v1",
+    conformance: "conforming",
+  },
+  {
+    caseId: "case-2",
+    start: "2026-01-06T09:00:00.000Z",
+    end: "2026-01-06T14:00:00.000Z",
+    durationMs: 18_000_000,
+    eventCount: 6,
+    variantId: "v1",
+    conformance: "nonConforming",
+  },
+];
+
+describe("CaseTable — rendering", () => {
+  it("renders the default column headers", () => {
+    render(<CaseTable cases={CASES} />);
+    expect(screen.getByText("Case")).toBeInTheDocument();
+    expect(screen.getByText("Start")).toBeInTheDocument();
+    expect(screen.getByText("End")).toBeInTheDocument();
+    expect(screen.getByText("Duration")).toBeInTheDocument();
+    expect(screen.getByText("Events")).toBeInTheDocument();
+    expect(screen.getByText("Variant")).toBeInTheDocument();
+    expect(screen.getByText("Conformance")).toBeInTheDocument();
+  });
+
+  it("prints every case row's id", () => {
+    render(<CaseTable cases={CASES} />);
+    expect(screen.getByText("case-1")).toBeInTheDocument();
+    expect(screen.getByText("case-2")).toBeInTheDocument();
+  });
+
+  it("renders the conformance badge with a non-colour (text) channel", () => {
+    render(<CaseTable cases={CASES} />);
+    expect(screen.getByText("Conforming")).toBeInTheDocument();
+    expect(screen.getByText("Non-conforming")).toBeInTheDocument();
+  });
+
+  it("renders an empty state and not the table body when cases is empty", () => {
+    render(<CaseTable cases={[]} />);
+    expect(screen.getByText("No cases to display.")).toBeInTheDocument();
+  });
+
+  it("shows a loading state when loading", () => {
+    render(<CaseTable cases={[]} loading />);
+    expect(screen.getByRole("table")).toHaveAttribute("aria-busy", "true");
+  });
+});
+
+describe("CaseTable — row activation (#204 acceptance)", () => {
+  it("calls onCaseOpen with the row's caseId on click", async () => {
+    const onCaseOpen = vi.fn();
+    const user = userEvent.setup();
+    render(<CaseTable cases={CASES} onCaseOpen={onCaseOpen} />);
+    // The first cell renders both the visible "case-2" text AND the row's sr-only
+    // activation button, which is also named "case-2" (#337) — take the visible one.
+    const [visibleCell] = screen.getAllByText("case-2");
+    await user.click(visibleCell as HTMLElement);
+    expect(onCaseOpen).toHaveBeenCalledWith("case-2");
+  });
+
+  it("calls onCaseOpen on keyboard activation (Tab to the row, Enter)", async () => {
+    const onCaseOpen = vi.fn();
+    render(<CaseTable cases={CASES} onCaseOpen={onCaseOpen} />);
+
+    // DataTable's row-activation button is the row's own tab stop, named after the
+    // row's first cell (#337) — focus it directly rather than counting Tab stops
+    // (sortable column headers are also tab stops ahead of it in DOM order).
+    const rowAction = screen.getByRole("button", { name: "case-1" });
+    rowAction.focus();
+    await userEvent.keyboard("{Enter}");
+    expect(onCaseOpen).toHaveBeenCalledWith("case-1");
+  });
+
+  it("does not add a row activation target when onCaseOpen is omitted", () => {
+    render(<CaseTable cases={CASES} />);
+    expect(screen.queryByRole("button", { name: "case-1" })).not.toBeInTheDocument();
+  });
+});
+
+describe("CaseTable — CSV export (#204 acceptance: column order matches the configured columns)", () => {
+  let clickSpy: ReturnType<typeof vi.spyOn>;
+  // jsdom's `Blob` doesn't implement `.text()`; stub the constructor so the export
+  // handler's `new Blob([csv], {...})` hands back the raw CSV string directly.
+  class RecordingBlob {
+    parts: BlobPart[];
+    constructor(parts: BlobPart[]) {
+      this.parts = parts;
+    }
+  }
+
+  beforeEach(() => {
+    vi.stubGlobal("Blob", RecordingBlob);
+    global.URL.createObjectURL = vi.fn(() => "blob:mock");
+    global.URL.revokeObjectURL = vi.fn();
+    clickSpy = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("exports the visible column set, in the configured order, attribute columns included", async () => {
+    const user = userEvent.setup();
+    const rows = casesFromLog(orderToCash);
+    render(
+      <CaseTable
+        cases={rows}
+        columns={[
+          { accessorKey: "variantId", header: "Variant" },
+          { accessorKey: "caseId", header: "Case" },
+        ]}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Export CSV" }));
+    expect(clickSpy).toHaveBeenCalled();
+    const created = (global.URL.createObjectURL as ReturnType<typeof vi.fn>).mock
+      .calls[0]?.[0] as RecordingBlob;
+    const csv = created.parts[0] as string;
+    const [header] = csv.split("\r\n");
+    expect(header).toBe("Variant,Case");
+  });
+
+  it("is disabled with nothing to export", () => {
+    render(<CaseTable cases={[]} />);
+    expect(screen.getByRole("button", { name: "Export CSV" })).toBeDisabled();
+  });
+});