@elabs-ai/components-process 4.1.0 → 5.0.0

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();
+  });
+});

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;
+}