@elabs-ai/components-process 4.2.0 → 5.0.0

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

@@ -0,0 +1,144 @@
+"use client";
+
+/**
+ * CaseTable — the case drill-down every auditor persona needs (RM-055, issue #204, §4 R11).
+ *
+ * A column CONFIGURATION over `@elabs-ai/components-data`'s `DataTable`, not a table
+ * implementation (`.claude/rules/data.md` — "primitives go down, compositions go up"):
+ * this file authors no `<table>` markup of its own. Row activation, keyboard navigation,
+ * loading/empty states and the CSV column-order contract all come straight from `DataTable`;
+ * the only thing this component adds is the domain reading (which field is a column, how a
+ * duration/conformance value prints) and the export button.
+ *
+ * ## CSV export mirrors the VISIBLE columns
+ *
+ * `toCsv` is called with the SAME column set the table renders (the default set, or the
+ * caller's own `columns` override) — in the same order, with the same header text — so a
+ * consumer who narrows or reorders `columns` gets an export that matches what is on screen,
+ * attribute columns included. Header/value resolution reads a `ColumnDef`'s own
+ * `accessorKey`/`accessorFn` directly rather than re-deriving through a live table instance,
+ * which keeps this a pure per-row mapping (no TanStack `Table` needed for the export path).
+ */
+import { forwardRef, useCallback, useMemo, type HTMLAttributes, type ReactNode } from "react";
+import { Download } from "lucide-react";
+import { DataTable, toCsv, type ColumnDef } from "@elabs-ai/components-data";
+import { Button, downloadBlob, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { CaseRow } from "../core/cases-from-log";
+import { createCaseTableColumns } from "./columns";
+
+export interface CaseTableProps extends HTMLAttributes<HTMLDivElement> {
+  cases: CaseRow[];
+  /** Column configuration over `DataTable`. Defaults to `createCaseTableColumns`'s set. */
+  columns?: ColumnDef<CaseRow>[];
+  /** Fired when a row is activated (click, or Enter/Space on its keyboard activation target). */
+  onCaseOpen?: (caseId: string) => void;
+  /** File name for the CSV export. Default `"cases.csv"`. */
+  exportFileName?: string;
+  loading?: boolean;
+  /** Message shown when there are no cases and not loading. */
+  emptyMessage?: ReactNode;
+}
+
+type CaseTableColumn = ColumnDef<CaseRow> & {
+  id?: string;
+  accessorKey?: string;
+  accessorFn?: (row: CaseRow, index: number) => unknown;
+};
+
+function csvKey(column: CaseTableColumn): string {
+  return column.id ?? column.accessorKey ?? "";
+}
+
+function csvHeader(column: CaseTableColumn): string {
+  return typeof column.header === "string" ? column.header : csvKey(column);
+}
+
+function csvValue(row: CaseRow, column: CaseTableColumn): string | number | boolean | null {
+  const value =
+    typeof column.accessorFn === "function"
+      ? column.accessorFn(row, 0)
+      : typeof column.accessorKey === "string"
+        ? (row as unknown as Record<string, unknown>)[column.accessorKey]
+        : undefined;
+  if (value === null || value === undefined) return null;
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return value;
+  }
+  return String(value);
+}
+
+function toCsvRecord(
+  row: CaseRow,
+  columns: CaseTableColumn[],
+): Record<string, string | number | boolean | null> {
+  const record: Record<string, string | number | boolean | null> = {};
+  for (const column of columns) {
+    const key = csvKey(column);
+    if (key) record[key] = csvValue(row, column);
+  }
+  return record;
+}
+
+export const CaseTable = forwardRef<HTMLDivElement, CaseTableProps>(function CaseTable(
+  {
+    cases,
+    columns,
+    onCaseOpen,
+    exportFileName = "cases.csv",
+    loading = false,
+    emptyMessage,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const { t, formatDate } = useLocale();
+
+  const resolvedColumns = useMemo<CaseTableColumn[]>(
+    () => columns ?? createCaseTableColumns({ t, formatDate }),
+    [columns, t, formatDate],
+  );
+
+  const handleExport = useCallback(() => {
+    const csvColumns = resolvedColumns.map((column) => ({
+      key: csvKey(column),
+      header: csvHeader(column),
+    }));
+    const rows = cases.map((row) => toCsvRecord(row, resolvedColumns));
+    const csv = toCsv(rows, { columns: csvColumns });
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    downloadBlob(blob, `${exportFileName.replace(/\.csv$/i, "")}.csv`);
+  }, [cases, resolvedColumns, exportFileName]);
+
+  return (
+    <div
+      ref={ref}
+      data-slot="case-table"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    >
+      <div data-slot="case-table-toolbar" className="flex justify-end">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={handleExport}
+          disabled={cases.length === 0}
+        >
+          <Download aria-hidden="true" />
+          {t("process.caseTable.exportCsv")}
+        </Button>
+      </div>
+      <DataTable<CaseRow, unknown>
+        data={cases}
+        columns={resolvedColumns}
+        getRowId={(row) => row.caseId}
+        loading={loading}
+        emptyMessage={emptyMessage ?? t("process.caseTable.empty")}
+        onRowClick={onCaseOpen ? (row) => onCaseOpen(row.original.caseId) : undefined}
+        caption={t("process.caseTable.tableLabel")}
+      />
+    </div>
+  );
+});

package/src/case-table/columns.ts

@@ -0,0 +1,116 @@
+/**
+ * `CaseTable`'s default column set — RM-055.
+ *
+ * A column CONFIGURATION over `@elabs-ai/components-data`'s `DataTable`, not a table
+ * implementation: every cell either prints a `CaseRow` field as-is or formats it with a
+ * helper this package already ships (`formatDurationMs`), plus one `StatusBadge` for the
+ * three-state conformance flag. See `.claude/rules/data.md` — "primitives go down,
+ * compositions go up". Plain `.ts` (no JSX) — the one cell that renders a component
+ * (`conformance`) builds it with `createElement`.
+ *
+ * Message KEYS, not resolved text, at module scope (mirrors `gantt.tsx`'s
+ * `VIEW_MODE_LABEL_KEYS` — `t()` needs a hook, unavailable here); `createCaseTableColumns`
+ * resolves them at the call site, which always has `useLocale()`.
+ */
+import { createElement } from "react";
+import { CheckCircle2, AlertCircle, type LucideIcon } from "lucide-react";
+import { type ColumnDef } from "@elabs-ai/components-data";
+import { StatusBadge, type LocaleContextValue, type StatusTone } from "@elabs-ai/components-ui";
+import type { CaseRow } from "../core/cases-from-log";
+import { formatDurationMs } from "../process-map/map-model";
+
+export const CASE_TABLE_COLUMN_LABEL_KEYS = {
+  caseId: "process.caseTable.columnCaseId",
+  start: "process.caseTable.columnStart",
+  end: "process.caseTable.columnEnd",
+  duration: "process.caseTable.columnDuration",
+  eventCount: "process.caseTable.columnEventCount",
+  variantId: "process.caseTable.columnVariant",
+  conformance: "process.caseTable.columnConformance",
+} as const;
+
+const CONFORMANCE_LABEL_KEYS: Record<NonNullable<CaseRow["conformance"]>, string> = {
+  conforming: "process.caseTable.conformanceConforming",
+  nonConforming: "process.caseTable.conformanceNonConforming",
+  unknown: "process.caseTable.conformanceUnknown",
+};
+
+/**
+ * Maps a `CaseRow.conformance` value onto `StatusBadge`'s calm-only escape hatch (#363) —
+ * a domain-specific three-state flag, not one of `StatusBadge`'s own canonical 7 statuses.
+ */
+function conformanceStatus(
+  conformance: CaseRow["conformance"],
+  t: LocaleContextValue["t"],
+): { label: string; tone: StatusTone; icon?: LucideIcon } {
+  switch (conformance) {
+    case "conforming":
+      return { label: t(CONFORMANCE_LABEL_KEYS.conforming), tone: "success", icon: CheckCircle2 };
+    case "nonConforming":
+      return {
+        label: t(CONFORMANCE_LABEL_KEYS.nonConforming),
+        tone: "destructive",
+        icon: AlertCircle,
+      };
+    case "unknown":
+    default:
+      return { label: t(CONFORMANCE_LABEL_KEYS.unknown), tone: "neutral" };
+  }
+}
+
+export interface CreateCaseTableColumnsOptions {
+  t: LocaleContextValue["t"];
+  formatDate: LocaleContextValue["formatDate"];
+}
+
+/** The default `CaseTable` column set. Reproduce this shape (or subset it) to customize. */
+export function createCaseTableColumns({
+  t,
+  formatDate,
+}: CreateCaseTableColumnsOptions): ColumnDef<CaseRow>[] {
+  return [
+    {
+      accessorKey: "caseId",
+      header: t(CASE_TABLE_COLUMN_LABEL_KEYS.caseId),
+    },
+    {
+      accessorKey: "start",
+      header: t(CASE_TABLE_COLUMN_LABEL_KEYS.start),
+      cell: ({ getValue }) => {
+        const value = getValue<string>();
+        return value ? formatDate(new Date(value)) : "—";
+      },
+    },
+    {
+      accessorKey: "end",
+      header: t(CASE_TABLE_COLUMN_LABEL_KEYS.end),
+      cell: ({ getValue }) => {
+        const value = getValue<string>();
+        return value ? formatDate(new Date(value)) : "—";
+      },
+    },
+    {
+      accessorKey: "durationMs",
+      header: t(CASE_TABLE_COLUMN_LABEL_KEYS.duration),
+      meta: { numeric: true },
+      cell: ({ getValue }) => formatDurationMs(getValue<number>()),
+    },
+    {
+      accessorKey: "eventCount",
+      header: t(CASE_TABLE_COLUMN_LABEL_KEYS.eventCount),
+      meta: { numeric: true },
+    },
+    {
+      accessorKey: "variantId",
+      header: t(CASE_TABLE_COLUMN_LABEL_KEYS.variantId),
+    },
+    {
+      accessorKey: "conformance",
+      header: t(CASE_TABLE_COLUMN_LABEL_KEYS.conformance),
+      cell: ({ getValue }) => {
+        const status = conformanceStatus(getValue<CaseRow["conformance"]>(), t);
+        return createElement(StatusBadge, { status, size: "sm" });
+      },
+    },
+  ];
+}

package/src/case-table/index.ts

@@ -0,0 +1,11 @@
+export { CaseTable } from "./case-table";
+export type { CaseTableProps } from "./case-table";
+
+export { CASE_TABLE_COLUMN_LABEL_KEYS, createCaseTableColumns } from "./columns";
+export type { CreateCaseTableColumnsOptions } from "./columns";
+
+// `CaseRow`/`casesFromLog` are canonically defined in `../core/cases-from-log` (framework-free)
+// — re-exported here so the trunk barrel (`@elabs-ai/components-process`) surfaces them
+// alongside `CaseTable` without a caller needing the `/core` subpath.
+export { casesFromLog } from "../core/cases-from-log";
+export type { CaseRow } from "../core/cases-from-log";

package/src/case-timeline/case-timeline-model.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import { buildCaseTimelineInstances } from "./case-timeline-model";
+import type { EventRow } from "../core/types";
+
+const CASE_ID = "case-1";
+
+// A (0 – 30min), 30min wait, B (1h – 1.5h), 30min wait, C (2h – 3h) overlapping D
+// (2.5h – 3.5h) by 30min — the fixture the RM-055 acceptance criterion asks for: "two
+// waiting periods" and "one pair of instances flagged parallel".
+const EVENTS: EventRow[] = [
+  { caseId: CASE_ID, activity: "A", startTimestamp: 0, timestamp: 1_800_000 },
+  { caseId: CASE_ID, activity: "B", startTimestamp: 3_600_000, timestamp: 5_400_000 },
+  { caseId: CASE_ID, activity: "C", startTimestamp: 7_200_000, timestamp: 10_800_000 },
+  { caseId: CASE_ID, activity: "D", startTimestamp: 9_000_000, timestamp: 12_600_000 },
+];
+
+describe("buildCaseTimelineInstances", () => {
+  it("answers an empty array for a case with no resolvable rows", () => {
+    expect(buildCaseTimelineInstances([])).toEqual([]);
+  });
+
+  it("builds one instance per activity execution, in chronological order", () => {
+    const instances = buildCaseTimelineInstances(EVENTS);
+    expect(instances.map((i) => i.activity)).toEqual(["A", "B", "C", "D"]);
+    expect(instances.map((i) => [i.start, i.end])).toEqual([
+      [0, 1_800_000],
+      [3_600_000, 5_400_000],
+      [7_200_000, 10_800_000],
+      [9_000_000, 12_600_000],
+    ]);
+  });
+
+  it("renders exactly two waiting-time gaps for the fixture", () => {
+    const instances = buildCaseTimelineInstances(EVENTS);
+    const gaps = instances.map((i) => i.gap);
+    expect(gaps[0]).toBeUndefined(); // A — nothing preceded it
+    expect(gaps[1]).toEqual({ start: 1_800_000, end: 3_600_000, durationMs: 1_800_000 }); // before B
+    expect(gaps[2]).toEqual({ start: 5_400_000, end: 7_200_000, durationMs: 1_800_000 }); // before C
+    expect(gaps[3]).toBeUndefined(); // D starts DURING C — no waiting time, they overlap
+  });
+
+  it("flags exactly the one overlapping pair (C, D) as parallel by default", () => {
+    const instances = buildCaseTimelineInstances(EVENTS);
+    const flagged = instances.filter((i) => i.isParallel).map((i) => i.activity);
+    expect(flagged.sort()).toEqual(["C", "D"]);
+  });
+
+  it("does not flag an overlap at or below parallelismThreshold", () => {
+    // C/D overlap by exactly 1_800_000ms — a threshold equal to the overlap must NOT flag it
+    // ("below which two instances are NOT flagged parallel" — the boundary itself doesn't flag).
+    const instances = buildCaseTimelineInstances(EVENTS, { parallelismThreshold: 1_800_000 });
+    expect(instances.every((i) => !i.isParallel)).toBe(true);
+  });
+
+  it("flags an overlap above the threshold", () => {
+    const instances = buildCaseTimelineInstances(EVENTS, { parallelismThreshold: 1_000_000 });
+    expect(
+      instances
+        .filter((i) => i.isParallel)
+        .map((i) => i.activity)
+        .sort(),
+    ).toEqual(["C", "D"]);
+  });
+
+  it("marks an unterminated lifecycle:start instance as open", () => {
+    const instances = buildCaseTimelineInstances([
+      { caseId: CASE_ID, activity: "A", timestamp: 0, lifecycle: "start" },
+    ]);
+    expect(instances).toHaveLength(1);
+    expect(instances[0]?.isOpen).toBe(true);
+  });
+});

package/src/case-timeline/case-timeline-model.ts

@@ -0,0 +1,112 @@
+/**
+ * `CaseTimeline`'s model — RM-055.
+ *
+ * Maps ONE case's raw `EventRow[]` to a flat, chronologically-ordered `CaseTimelineInstance[]`:
+ * one entry per activity EXECUTION (not per activity name — a repeated activity gets one
+ * instance per occurrence), each carrying the resolved start/end `normalizeLog` (RM-049)
+ * already knows how to pair from `lifecycle: "start"`/`"complete"` rows.
+ *
+ * Two things this module adds on top of `normalizeLog`'s own trace:
+ *
+ * - **Waiting-time gaps** — the idle time between the END of one instance and the START of
+ *   the NEXT in the case's own chronological order (not "next occurrence of the same
+ *   activity" — a case has no natural per-activity lane once instances interleave). Surfaced
+ *   as `gap` on the LATER instance, ready to become one `Gantt` `row.gaps` entry (RM-047).
+ * - **Parallel flags** — any pair of instances whose intervals overlap by more than
+ *   `parallelismThreshold` (default `0`: any genuine overlap) are both marked `isParallel`.
+ *   O(n²) over one case's own instance count, which is small enough that this never needs
+ *   the interval-tree machinery a whole-log analysis would.
+ *
+ * Plain `.ts` (no JSX, no `@elabs-ai/components-charts` import) — `case-timeline.tsx` is the
+ * one place that turns an instance into a `Gantt` `GanttTask`, because that is also where the
+ * parallel flag's localized text channel (WCAG 1.4.1 — colour is never the only channel) is
+ * built, and `useLocale()` is only available from a component.
+ */
+import { normalizeLog } from "../core/event-log";
+import type { EventRow } from "../core/types";
+
+export interface CaseTimelineGap {
+  start: number;
+  end: number;
+  durationMs: number;
+}
+
+/** One activity EXECUTION in the case's trace. */
+export interface CaseTimelineInstance {
+  /** Stable within one model build — the instance's position in chronological order. */
+  id: string;
+  activity: string;
+  start: number;
+  end: number;
+  resource?: string;
+  /** True for a `lifecycle: "start"` row that never got a matching `"complete"`. */
+  isOpen: boolean;
+  /** True when this instance's interval overlaps another by more than `parallelismThreshold`. */
+  isParallel: boolean;
+  /** Waiting time since the previous instance ended, when there was a gap. */
+  gap?: CaseTimelineGap;
+}
+
+export interface CaseTimelineModelOptions {
+  /**
+   * Ms of overlap below which two instances are NOT flagged parallel. Default `0` — any
+   * genuine overlap (however small) counts.
+   */
+  parallelismThreshold?: number;
+}
+
+/**
+ * One case's trace as `CaseTimelineInstance[]`, in ascending `start` order — empty when
+ * `events` resolves to no case (e.g. every row has an empty `caseId`/`activity`).
+ */
+export function buildCaseTimelineInstances(
+  events: EventRow[],
+  options: CaseTimelineModelOptions = {},
+): CaseTimelineInstance[] {
+  const threshold = options.parallelismThreshold ?? 0;
+  const normalized = normalizeLog({ events });
+  const kase = normalized.cases[0];
+  if (!kase) return [];
+
+  const instances: CaseTimelineInstance[] = kase.events.map((event, index) => {
+    const instance: CaseTimelineInstance = {
+      id: `${index}`,
+      activity: event.activity,
+      start: event.start,
+      end: event.end,
+      isOpen: event.isOpen,
+      isParallel: false,
+    };
+    if (event.resource !== undefined) instance.resource = event.resource;
+    return instance;
+  });
+
+  // Waiting-time gaps: chronological order, not "same activity" — `kase.events` is already
+  // sorted by resolved start (`normalizeLog`'s own contract).
+  for (let i = 1; i < instances.length; i += 1) {
+    const previous = instances[i - 1] as CaseTimelineInstance;
+    const current = instances[i] as CaseTimelineInstance;
+    if (current.start > previous.end) {
+      current.gap = {
+        start: previous.end,
+        end: current.start,
+        durationMs: current.start - previous.end,
+      };
+    }
+  }
+
+  // Parallel flags: every pair whose intervals overlap by more than `threshold`.
+  for (let i = 0; i < instances.length; i += 1) {
+    for (let j = i + 1; j < instances.length; j += 1) {
+      const a = instances[i] as CaseTimelineInstance;
+      const b = instances[j] as CaseTimelineInstance;
+      const overlap = Math.min(a.end, b.end) - Math.max(a.start, b.start);
+      if (overlap > threshold) {
+        a.isParallel = true;
+        b.isParallel = true;
+      }
+    }
+  }
+
+  return instances;
+}

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

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CaseTimeline } from "./case-timeline";
+import type { EventRow } from "../core/types";
+
+const CASE_ID = "case-1";
+
+/** Three activities, back to back — no waiting time, no overlap. */
+const SEQUENTIAL_EVENTS: EventRow[] = [
+  { caseId: CASE_ID, activity: "Create Order", startTimestamp: 0, timestamp: 1_800_000 },
+  {
+    caseId: CASE_ID,
+    activity: "Check Credit",
+    startTimestamp: 1_800_000,
+    timestamp: 3_600_000,
+  },
+  {
+    caseId: CASE_ID,
+    activity: "Approve Order",
+    startTimestamp: 3_600_000,
+    timestamp: 5_400_000,
+  },
+];
+
+/** Two gaps: the case waits between every pair of activities. */
+const WAITING_TIME_EVENTS: EventRow[] = [
+  { caseId: CASE_ID, activity: "Create Order", startTimestamp: 0, timestamp: 1_800_000 },
+  {
+    caseId: CASE_ID,
+    activity: "Check Credit",
+    startTimestamp: 3_600_000,
+    timestamp: 5_400_000,
+  },
+  {
+    caseId: CASE_ID,
+    activity: "Approve Order",
+    startTimestamp: 9_000_000,
+    timestamp: 10_800_000,
+  },
+];
+
+/** "Check Credit" and "Check Inventory" run at the same time — both flag parallel. */
+const PARALLEL_EVENTS: EventRow[] = [
+  { caseId: CASE_ID, activity: "Check Credit", startTimestamp: 0, timestamp: 3_600_000 },
+  {
+    caseId: CASE_ID,
+    activity: "Check Inventory",
+    startTimestamp: 1_800_000,
+    timestamp: 5_400_000,
+  },
+  {
+    caseId: CASE_ID,
+    activity: "Approve Order",
+    startTimestamp: 7_200_000,
+    timestamp: 9_000_000,
+  },
+];
+
+const meta = {
+  title: "Process/CaseTimeline",
+  component: CaseTimeline,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A thin wrapper over `@elabs-ai/components-charts`'s `Gantt` (§4 R12): one row per " +
+          "activity instance, waiting time as RM-047 gap bands, overlapping instances flagged " +
+          "parallel with an existing `Gantt` tone plus a visible, non-colour text tag.",
+      },
+    },
+  },
+} satisfies Meta<typeof CaseTimeline>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** No waiting time, no overlap — the plain case. */
+export const Sequential: Story = {
+  args: { caseId: CASE_ID, events: SEQUENTIAL_EVENTS },
+};
+
+/** Two hatched gap bands render the idle time between activities (RM-047). */
+export const WithWaitingTime: Story = {
+  args: { caseId: CASE_ID, events: WAITING_TIME_EVENTS },
+};
+
+/** "Check Credit" and "Check Inventory" overlap — both render the parallel tag. */
+export const ParallelActivities: Story = {
+  args: { caseId: CASE_ID, events: PARALLEL_EVENTS },
+};
+
+/** No events for this case yet — `Gantt`'s own built-in empty state. */
+export const Empty: Story = {
+  args: { caseId: CASE_ID, events: [] },
+};

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

@@ -0,0 +1,51 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { CaseTimeline } from "./case-timeline";
+import type { EventRow } from "../core/types";
+
+afterEach(cleanup);
+
+const CASE_ID = "case-1";
+
+const PARALLEL_EVENTS: EventRow[] = [
+  { caseId: CASE_ID, activity: "Check Credit", startTimestamp: 0, timestamp: 3_600_000 },
+  {
+    caseId: CASE_ID,
+    activity: "Check Inventory",
+    startTimestamp: 1_800_000,
+    timestamp: 5_400_000,
+  },
+  { caseId: CASE_ID, activity: "Approve Order", startTimestamp: 7_200_000, timestamp: 9_000_000 },
+];
+
+describe("CaseTimeline — rendering", () => {
+  it("renders one row per activity instance", () => {
+    render(<CaseTimeline caseId={CASE_ID} events={PARALLEL_EVENTS} />);
+    const treeitems = screen.getAllByRole("treeitem");
+    expect(treeitems).toHaveLength(3);
+  });
+
+  it("renders the empty state when the case has no events", () => {
+    render(<CaseTimeline caseId={CASE_ID} events={[]} />);
+    expect(screen.getByText(/no tasks to display/i)).toBeInTheDocument();
+  });
+
+  it("flags overlapping instances with a visible, non-colour 'Parallel' tag (WCAG 1.4.1)", () => {
+    render(<CaseTimeline caseId={CASE_ID} events={PARALLEL_EVENTS} />);
+    // Two overlapping instances ("Check Credit" and "Check Inventory") each carry the
+    // text tag; "Approve Order" (no overlap) does not.
+    const parallelTags = screen.getAllByText("Parallel");
+    expect(parallelTags.length).toBeGreaterThanOrEqual(2);
+
+    const treeitems = screen.getAllByRole("treeitem");
+    const approveOrderRow = treeitems.find((el) => el.textContent?.includes("Approve Order"));
+    expect(approveOrderRow?.textContent).not.toContain("Parallel");
+  });
+
+  it("respects a custom parallelismThreshold", () => {
+    render(
+      <CaseTimeline caseId={CASE_ID} events={PARALLEL_EVENTS} parallelismThreshold={10_000_000} />,
+    );
+    expect(screen.queryByText("Parallel")).not.toBeInTheDocument();
+  });
+});