@elabs-ai/components-process 4.2.0 → 5.1.0

package/src/process-filter-bar/process-filter-bar.test.tsx

@@ -0,0 +1,201 @@
+/**
+ * process-filter-bar.test.tsx — RM-056, #205.
+ *
+ * `intents` carries no ids (`useProcessExplorer`'s real contract) — every assertion below
+ * keys by ARRAY INDEX, matching `onRemove(index)`/`clearIntent(index)`.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FilterIntent } from "../use-process-explorer";
+import { ProcessFilterBar } from "./process-filter-bar";
+
+const chainIntents: FilterIntent[] = [
+  { kind: "with", activity: "Reject Order" },
+  { kind: "without", activity: "Amend Order" },
+  { kind: "variant", ids: ["v-1", "v-2"] },
+  { kind: "cases", ids: ["c-1", "c-2", "c-3"] },
+];
+
+describe("ProcessFilterBar", () => {
+  it("renders one chip per intent, worded as a sentence fragment, with its own excluded count", () => {
+    render(
+      <ProcessFilterBar
+        intents={chainIntents}
+        excludedByIntent={[12, 4, 30, 7]}
+        totalCases={100}
+        filteredCases={60}
+        onRemove={vi.fn()}
+        onClearAll={vi.fn()}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Remove filter: Contains Reject Order · excluded 12" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove filter: Excludes Amend Order · excluded 4" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove filter: 2 variants selected · excluded 30" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove filter: 3 cases selected · excluded 7" }),
+    ).toBeInTheDocument();
+  });
+
+  it("removing a chip calls onRemove with that intent's index and nothing else", async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(
+      <ProcessFilterBar
+        intents={chainIntents}
+        excludedByIntent={[12, 4, 30, 7]}
+        totalCases={100}
+        filteredCases={60}
+        onRemove={onRemove}
+        onClearAll={vi.fn()}
+      />,
+    );
+    await user.click(
+      screen.getByRole("button", { name: "Remove filter: Excludes Amend Order · excluded 4" }),
+    );
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onRemove).toHaveBeenCalledWith(1);
+  });
+
+  it("Enter on a focused chip removes it, matching FilterChip's own keyboard contract", async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(
+      <ProcessFilterBar
+        intents={chainIntents}
+        excludedByIntent={[12, 4, 30, 7]}
+        totalCases={100}
+        filteredCases={60}
+        onRemove={onRemove}
+        onClearAll={vi.fn()}
+      />,
+    );
+    screen
+      .getByRole("button", { name: "Remove filter: Contains Reject Order · excluded 12" })
+      .focus();
+    await user.keyboard("{Enter}");
+    expect(onRemove).toHaveBeenCalledWith(0);
+  });
+
+  it("Clear all calls onClearAll exactly once regardless of intent count", async () => {
+    const user = userEvent.setup();
+    const onClearAll = vi.fn();
+    render(
+      <ProcessFilterBar
+        intents={chainIntents}
+        excludedByIntent={[12, 4, 30, 7]}
+        totalCases={100}
+        filteredCases={60}
+        onRemove={vi.fn()}
+        onClearAll={onClearAll}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Clear all" }));
+    expect(onClearAll).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders no chips and no group when there are no active intents", () => {
+    render(
+      <ProcessFilterBar
+        intents={[]}
+        excludedByIntent={[]}
+        totalCases={100}
+        filteredCases={100}
+        onRemove={vi.fn()}
+        onClearAll={vi.fn()}
+      />,
+    );
+    expect(screen.queryByRole("group")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(screen.getByText("Showing all 100 cases")).toBeInTheDocument();
+  });
+
+  it("states the filtered/total split exactly, with no abstraction clause when nothing is hidden", () => {
+    render(
+      <ProcessFilterBar
+        intents={chainIntents}
+        excludedByIntent={[12, 4, 30, 7]}
+        totalCases={13087}
+        filteredCases={3210}
+        onRemove={vi.fn()}
+        onClearAll={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Showing 3,210 of 13,087 cases")).toBeInTheDocument();
+  });
+
+  it("appends the abstraction clause, matching hiddenCounts.activities exactly (no double counting)", () => {
+    render(
+      <ProcessFilterBar
+        intents={chainIntents}
+        excludedByIntent={[12, 4, 30, 7]}
+        totalCases={13087}
+        filteredCases={3210}
+        hiddenCounts={{ activities: 12, paths: 40 }}
+        onRemove={vi.fn()}
+        onClearAll={vi.fn()}
+      />,
+    );
+    expect(
+      screen.getByText("Showing 3,210 of 13,087 cases · 12 activities hidden by abstraction"),
+    ).toBeInTheDocument();
+  });
+
+  it("omits the abstraction clause when hiddenCounts.activities is zero", () => {
+    render(
+      <ProcessFilterBar
+        intents={[]}
+        excludedByIntent={[]}
+        totalCases={100}
+        filteredCases={100}
+        hiddenCounts={{ activities: 0, paths: 0 }}
+        onRemove={vi.fn()}
+        onClearAll={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Showing all 100 cases")).toBeInTheDocument();
+  });
+
+  it("labels startsWith/endsWith intents as sentence fragments", () => {
+    render(
+      <ProcessFilterBar
+        intents={[
+          { kind: "startsWith", activity: "Create Order" },
+          { kind: "endsWith", activity: "Ship Order" },
+        ]}
+        excludedByIntent={[1, 2]}
+        totalCases={10}
+        filteredCases={5}
+        onRemove={vi.fn()}
+        onClearAll={vi.fn()}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Remove filter: Starts with Create Order · excluded 1" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove filter: Ends with Ship Order · excluded 2" }),
+    ).toBeInTheDocument();
+  });
+
+  it("merges a caller className onto the root", () => {
+    const { container } = render(
+      <ProcessFilterBar
+        intents={[]}
+        excludedByIntent={[]}
+        totalCases={0}
+        filteredCases={0}
+        onRemove={vi.fn()}
+        onClearAll={vi.fn()}
+        className="extra"
+      />,
+    );
+    expect(container.querySelector('[data-slot="process-filter-bar"]')).toHaveClass("extra");
+  });
+});

package/src/process-filter-bar/process-filter-bar.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+/**
+ * ProcessFilterBar — filter chain breadcrumbs with excluded-count chips (RM-056, #205).
+ *
+ * §4 R13 of the process-mining components analysis requires "filter breadcrumbs showing
+ * the active filter chain, removable, with 'excluded' counts" for every persona — the 2026
+ * literature review's first systematic gap is "no visible reference to what was filtered
+ * out", and this component is that visible reference. It composes `@elabs-ai/components-data`'s
+ * `FilterBar`/`FilterChip` — the chip's own `count`/`countLabel`/`onRemove` contract already
+ * carries the "excluded N" reading (RM-047) — and authors no chip markup of its own
+ * (`pnpm check --rule process-reuse`).
+ *
+ * ## Index keys, not intent ids
+ *
+ * `useProcessExplorer`'s `intents: FilterIntent[]` carries no id field — `clearIntent` and
+ * this bar's own `onRemove` both key by ARRAY INDEX, matching the hook's real contract
+ * (`.claude/scratch/process-mining/wave-2/common-brief.md`). `excludedByIntent` is the
+ * hook's own additive field (same file, this item's other touch): index `i` there is the
+ * case count intent `i` ALONE excludes from the chain, parallel to `intents[i]`.
+ *
+ * ## The summary line never double-counts
+ *
+ * `filteredCases`/`totalCases` describe what FILTERING removed; `hiddenCounts.activities`
+ * (from `AbstractionControls`, RM-052) describes what ABSTRACTION additionally hides from
+ * the picture. The two are disjoint by construction (`useProcessExplorer`'s own module
+ * docblock, Invariant F) — this component states them as two independently-omittable
+ * clauses of one sentence rather than merging them into one number, the same "two
+ * independently-pluralized fragments, composed at the call site" shape `AbstractionControls`
+ * already uses for its own hidden-count line.
+ */
+import { forwardRef, type HTMLAttributes } from "react";
+import { Button, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { FilterBar, FilterChip } from "@elabs-ai/components-data";
+import type { FilterIntent } from "../use-process-explorer";
+
+/** One intent, worded as a chip label — label-in-value text, never a bare activity name. */
+function intentChipLabel(t: ReturnType<typeof useLocale>["t"], intent: FilterIntent): string {
+  switch (intent.kind) {
+    case "with":
+      return t("process.filterBar.with", { activity: intent.activity });
+    case "without":
+      return t("process.filterBar.without", { activity: intent.activity });
+    case "startsWith":
+      return t("process.filterBar.startsWith", { activity: intent.activity });
+    case "endsWith":
+      return t("process.filterBar.endsWith", { activity: intent.activity });
+    case "variant":
+      return t("process.filterBar.variant", { count: intent.ids.length });
+    case "cases":
+      return t("process.filterBar.cases", { count: intent.ids.length });
+    default:
+      return t("process.filterBar.filter");
+  }
+}
+
+export interface ProcessFilterBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** The active filter chain — `useProcessExplorer`'s own `intents`, in order. */
+  intents: FilterIntent[];
+  /**
+   * How many cases EACH intent alone excludes, parallel to {@link intents} (same index) —
+   * `useProcessExplorer`'s own additive `excludedByIntent` field.
+   */
+  excludedByIntent: number[];
+  /** The unfiltered case count — the right half of the summary line's "X of Y". */
+  totalCases: number;
+  /** `useProcessExplorer`'s `kpis.cases` — the left half of the summary line's "X of Y". */
+  filteredCases: number;
+  /** What abstraction currently hides — `useProcessExplorer`'s own `hiddenCounts`. */
+  hiddenCounts?: { activities: number; paths: number };
+  /** Remove one intent by its index into {@link intents} — wire to `clearIntent`. */
+  onRemove(index: number): void;
+  /** Remove every intent at once. */
+  onClearAll(): void;
+  /** Accessible name for the chip row. Default from locale. */
+  label?: string;
+}
+
+/**
+ * Filter chain breadcrumbs: one removable chip per active intent, each carrying how many
+ * cases that intent alone excludes, plus a summary line stating what filtering and
+ * abstraction currently hide.
+ */
+export const ProcessFilterBar = forwardRef<HTMLDivElement, ProcessFilterBarProps>(
+  function ProcessFilterBar(
+    {
+      intents,
+      excludedByIntent,
+      totalCases,
+      filteredCases,
+      hiddenCounts,
+      onRemove,
+      onClearAll,
+      label,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const { t, formatNumber } = useLocale();
+
+    const hasIntents = intents.length > 0;
+    const hasHiddenByAbstraction = (hiddenCounts?.activities ?? 0) > 0;
+
+    // Two independently-omittable clauses, joined — mirrors `AbstractionControls`' own
+    // hidden-count line (see the module docblock): "what filtering removed" and "what
+    // abstraction additionally hides" are disjoint numbers, never merged into one.
+    const casesClause =
+      filteredCases === totalCases
+        ? t("process.filterBar.showingAll", {
+            count: totalCases,
+            total: formatNumber(totalCases),
+          })
+        : t("process.filterBar.showing", {
+            filtered: formatNumber(filteredCases),
+            total: formatNumber(totalCases),
+          });
+    const summary = hasHiddenByAbstraction
+      ? `${casesClause} · ${t("process.filterBar.hiddenByAbstraction", {
+          count: hiddenCounts!.activities,
+        })}`
+      : casesClause;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="process-filter-bar"
+        className={cn("flex flex-col gap-2", className)}
+        {...props}
+      >
+        {hasIntents ? (
+          // `FilterBar` (data package) has no `role`/`aria-label` of its own to forward —
+          // this wrapping `div` is the group's real accessible-name carrier.
+          <div role="group" aria-label={label ?? t("process.filterBar.label")}>
+            <FilterBar
+              actions={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  data-slot="process-filter-bar-clear-all"
+                  onClick={onClearAll}
+                >
+                  {t("process.filterBar.clearAll")}
+                </Button>
+              }
+            >
+              {intents.map((intent, index) => (
+                <FilterChip
+                  key={`${intent.kind}-${index}`}
+                  label={intentChipLabel(t, intent)}
+                  count={excludedByIntent[index] ?? 0}
+                  countLabel={t("process.filterBar.excludedLabel")}
+                  onRemove={() => onRemove(index)}
+                />
+              ))}
+            </FilterBar>
+          </div>
+        ) : null}
+        <p data-slot="process-filter-bar-summary" className="text-meta text-muted-foreground">
+          {summary}
+        </p>
+      </div>
+    );
+  },
+);

package/src/process-kpi-strip/process-kpi-strip.stories.tsx

@@ -1,7 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, within } from "storybook/test";
+import { conformanceRateSeries } from "../core/conformance";
+import { liftHappyPath } from "../core/reference-model";
+import { tokenReplay } from "../core/token-replay";
+import {
+  CONFORMANCE_FIXTURE_LOG,
+  CONFORMANCE_FIXTURE_PATH,
+} from "../conformance-overlay/conformance-fixture";
 import { ProcessKpiStrip } from "./process-kpi-strip";
 
+const conformanceModel = liftHappyPath(CONFORMANCE_FIXTURE_PATH);
+
 const meta = {
   title: "Process/ProcessKpiStrip",
   component: ProcessKpiStrip,
@@ -83,6 +92,43 @@ export const WithTrends: Story = {
   },
 };
 
+/**
+ * `layout="inline"`: the same six numbers as one dense ribbon, for a workspace whose height
+ * belongs to the process map. Cells are divided by hairlines and the ribbon scrolls sideways
+ * when it runs out of room.
+ */
+export const Inline: Story = {
+  args: { ...WithTrends.args, layout: "inline" },
+  play: async ({ canvasElement }) => {
+    const strip = canvasElement.querySelector<HTMLElement>('[data-slot="process-kpi-strip"]');
+    await expect(strip).toHaveAttribute("data-layout", "inline");
+    await expect(
+      canvasElement.querySelectorAll('[data-slot="process-kpi-strip-cell"]').length,
+    ).toBe(6);
+    // One row: the ribbon is no taller than a single card line.
+    await expect(strip!.getBoundingClientRect().height).toBeLessThan(80);
+  },
+};
+
+/**
+ * RM-062: the conformance tile reads a token-replay result directly (its mean fitness) and
+ * plots `conformanceRateSeries` as its sparkline.
+ */
+export const ConformanceFromReplay: Story = {
+  args: {
+    kpis,
+    conformance: tokenReplay(CONFORMANCE_FIXTURE_LOG, conformanceModel),
+    conformanceSeries: conformanceRateSeries(CONFORMANCE_FIXTURE_LOG, conformanceModel, "month"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("91.7%")).toBeVisible();
+    await expect(canvas.getByRole("img", { name: /^Conformance,/ })).toHaveAccessibleName(
+      "Conformance, 5-period trend, falling from 100% to 75%",
+    );
+  },
+};
+
 /** No data yet — `loading` reserves every tile's final shape (`MetricGrid`'s own skeleton). */
 export const Loading: Story = {
   args: { kpis, conformance: 0.91, loading: true },
@@ -98,6 +144,7 @@ export const Loading: Story = {
  * them.
  */
 export const ReflowRegressionLock: Story = {
+  name: "Conformance tile keeps its height when unmeasured",
   render: () => (
     <div className="flex flex-col gap-6">
       <ProcessKpiStrip kpis={kpis} conformance={0.91} data-testid="measured" />

package/src/process-kpi-strip/process-kpi-strip.test.tsx

@@ -1,6 +1,13 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 import { ProcessKpiStrip, type ProcessKpiStripKpis } from "./process-kpi-strip";
+import { conformanceRateSeries } from "../core/conformance";
+import { liftHappyPath } from "../core/reference-model";
+import { tokenReplay } from "../core/token-replay";
+import {
+  CONFORMANCE_FIXTURE_LOG,
+  CONFORMANCE_FIXTURE_PATH,
+} from "../conformance-overlay/conformance-fixture";
 
 afterEach(cleanup);
 
@@ -104,3 +111,63 @@ describe("ProcessKpiStrip — trend sparkline accessible names (#359)", () => {
     );
   });
 });
+
+// RM-062 — the conformance tile reads a replay result and its rate-over-time series.
+describe("ProcessKpiStrip — conformance from a replay result (RM-062)", () => {
+  const model = liftHappyPath(CONFORMANCE_FIXTURE_PATH);
+  const conformance = tokenReplay(CONFORMANCE_FIXTURE_LOG, model);
+
+  it("prints the fixture's hand-computed mean fitness", () => {
+    // Six conforming cases fit 1; the two skips and the incomplete case fit ¾; the
+    // undesired case fits ½(1 − 0/5) + ½(1 − 1/6) = 11/12.
+    const expected = (6 + 3 * 0.75 + 11 / 12) / 10;
+    expect(conformance.overallFitness).toBeCloseTo(expected, 12);
+    render(<ProcessKpiStrip kpis={kpis} conformance={conformance} />);
+    expect(screen.getByText("91.7%")).toBeInTheDocument();
+    expect(screen.queryByText("Not available")).not.toBeInTheDocument();
+  });
+
+  it("plots conformanceRateSeries as the tile's sparkline, ahead of trends.conformance", () => {
+    const series = conformanceRateSeries(CONFORMANCE_FIXTURE_LOG, model, "month");
+    render(
+      <ProcessKpiStrip
+        kpis={kpis}
+        conformance={conformance}
+        conformanceSeries={series}
+        trends={{ conformance: [0.1, 0.2] }}
+      />,
+    );
+    expect(screen.getByRole("img", { name: /^Conformance,/ })).toHaveAccessibleName(
+      `Conformance, ${series.length}-period trend, falling from 100% to 75%`,
+    );
+  });
+});
+
+describe('ProcessKpiStrip — layout="inline"', () => {
+  it("renders the same six KPIs as one ribbon of cells, with no card grid", () => {
+    const { container } = render(
+      <ProcessKpiStrip kpis={kpis} conformance={0.91} layout="inline" />,
+    );
+    const strip = container.querySelector('[data-slot="process-kpi-strip"]');
+    expect(strip).toHaveAttribute("data-layout", "inline");
+    expect(container.querySelectorAll('[data-slot="process-kpi-strip-cell"]')).toHaveLength(6);
+    expect(container.querySelector('[data-slot="metric-card"]')).toBeNull();
+    expect(screen.getByText("240")).toBeInTheDocument();
+    expect(screen.getByText("18%")).toBeInTheDocument();
+    expect(screen.getByText("91%")).toBeInTheDocument();
+    expect(screen.getByText("3.0 d")).toBeInTheDocument();
+  });
+
+  it("keeps the honest 'not available' state and never prints a fabricated 0%", () => {
+    render(<ProcessKpiStrip kpis={kpis} conformance={null} layout="inline" />);
+    expect(screen.getByText("Not available")).toBeInTheDocument();
+    expect(screen.queryByText("0%")).not.toBeInTheDocument();
+  });
+
+  it("the default layout is unchanged: no data-layout attribute, six metric cards", () => {
+    const { container } = render(<ProcessKpiStrip kpis={kpis} conformance={0.91} />);
+    expect(container.querySelector('[data-slot="process-kpi-strip"]')).not.toHaveAttribute(
+      "data-layout",
+    );
+  });
+});