@elabs-ai/components-process 4.1.0 → 5.0.0

package/src/process-compare/process-compare.test.tsx

@@ -0,0 +1,224 @@
+/**
+ * Unit coverage for `ProcessCompare` (RM-064). Every side mounts a real `ProcessMap` canvas
+ * on first render regardless of whether a test later toggles into `tableView` — the twin
+ * bypasses React Flow/dagre entirely and is the cheapest way to assert on diff-state TEXT
+ * (see `process-compare.tsx`'s own module docblock for why text, not a glyph, is the second
+ * channel here), but the INITIAL mount still needs React Flow's transform math, hence the
+ * same `DOMMatrixReadOnly` polyfill `process-map.test.tsx` carries.
+ */
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { discoverGraph } from "../core/discover-graph";
+import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
+import type { AbstractionOptions } from "../core/abstract-graph";
+import { ProcessCompare } from "./process-compare";
+
+// jsdom ships no `DOMMatrixReadOnly`/`DOMMatrix` at all, which `@xyflow/react`'s internal
+// transform math calls unconditionally — see `process-map.test.tsx`'s identical polyfill.
+if (typeof globalThis.DOMMatrixReadOnly === "undefined") {
+  class DOMMatrixReadOnlyPolyfill {
+    m22 = 1;
+    constructor(_init?: unknown) {}
+  }
+  globalThis.DOMMatrixReadOnly = DOMMatrixReadOnlyPolyfill as unknown as typeof DOMMatrixReadOnly;
+}
+if (typeof globalThis.DOMMatrix === "undefined") {
+  globalThis.DOMMatrix = globalThis.DOMMatrixReadOnly as unknown as typeof DOMMatrix;
+}
+
+afterEach(cleanup);
+
+const METRIC = { node: "absolute_case", edge: "absolute" } as const;
+const IDENTITY_ABSTRACTION: AbstractionOptions = {
+  activities: 1,
+  paths: 1,
+  invert: false,
+  keepConnected: true,
+};
+
+const logA = generateSyntheticLog({ cases: 30, seed: 1 });
+const logB = generateSyntheticLog({ cases: 45, seed: 2 });
+const graphA = discoverGraph(logA);
+const graphB = discoverGraph(logB);
+
+function noop() {}
+
+describe("ProcessCompare — side-by-side", () => {
+  it("renders both sides' own headers and table twin, in A-then-B order", () => {
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: graphA, log: logA }}
+        b={{ label: "After", graph: graphB, log: logB }}
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={noop}
+      />,
+    );
+
+    const headings = screen.getAllByRole("heading", { level: 3 });
+    expect(headings.map((h) => h.textContent)).toEqual(["Before", "After"]);
+
+    // Both panels render a real canvas region — two, not one, and A before B in the DOM.
+    const regions = screen.getAllByLabelText(/Process map — /);
+    expect(regions).toHaveLength(2);
+    expect(regions[0]).toHaveAccessibleName("Process map — Before");
+    expect(regions[1]).toHaveAccessibleName("Process map — After");
+  });
+
+  it("shares one AbstractionControls that patches the same handler for both sides", async () => {
+    const onAbstractionChange = vi.fn();
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: graphA }}
+        b={{ label: "After", graph: graphB }}
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={onAbstractionChange}
+      />,
+    );
+
+    // Only ONE abstraction control group — not one per side.
+    expect(screen.getAllByRole("group", { name: "Abstraction" })).toHaveLength(1);
+
+    const auto = screen.getByRole("button", { name: /Auto/i });
+    await userEvent.click(auto);
+    expect(onAbstractionChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("toggles both sides into the accessible table twin together", async () => {
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: graphA }}
+        b={{ label: "After", graph: graphB }}
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={noop}
+      />,
+    );
+
+    expect(screen.queryAllByRole("table")).toHaveLength(0);
+    await userEvent.click(screen.getByRole("switch", { name: "Table view" }));
+    // Two activity tables + two transition tables, one pair per side.
+    expect(screen.getAllByRole("table")).toHaveLength(4);
+  });
+
+  it("shows the KPI strip's cases pair with a delta on B's tile", () => {
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: graphA, log: logA }}
+        b={{ label: "After", graph: graphB, log: logB }}
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={noop}
+      />,
+    );
+
+    // MetricCard's own value rung (`text-2xl`) disambiguates from the abstraction
+    // controls' unrelated "30%"/"45%"-shaped tick text elsewhere in the same tree.
+    expect(screen.getByText("30", { selector: ".text-2xl" })).toBeInTheDocument();
+    expect(screen.getByText("45", { selector: ".text-2xl" })).toBeInTheDocument();
+    // (45-30)/30 = +50%.
+    expect(screen.getByText("+50%")).toBeInTheDocument();
+  });
+
+  it("renders every map's own loading panel while neither side has a graph yet", () => {
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: undefined }}
+        b={{ label: "After", graph: undefined }}
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={noop}
+        loading
+      />,
+    );
+
+    expect(screen.getAllByRole("status")).not.toHaveLength(0);
+  });
+});
+
+describe("ProcessCompare — superimposed", () => {
+  it("renders exactly one map with a three-entry, text-first diff legend", () => {
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: graphA }}
+        b={{ label: "After", graph: graphB }}
+        mode="superimposed"
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={noop}
+      />,
+    );
+
+    expect(screen.getAllByLabelText(/Process map — Before vs After/)).toHaveLength(1);
+    expect(screen.getByText("common")).toBeInTheDocument();
+    expect(screen.getByText("Before only")).toBeInTheDocument();
+    expect(screen.getByText("After only")).toBeInTheDocument();
+  });
+
+  it("suffixes every activity's title with its diff-state word — never colour alone", async () => {
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: graphA }}
+        b={{ label: "After", graph: graphB }}
+        mode="superimposed"
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={noop}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole("switch", { name: "Table view" }));
+    const activityTable = screen.getAllByRole("table")[0]!;
+    const rowText = within(activityTable)
+      .getAllByRole("row")
+      .map((row) => row.textContent ?? "");
+    // Every activity row carries one of the three diff words as real text.
+    expect(rowText.some((text) => /common|Before only|After only/.test(text))).toBe(true);
+  });
+
+  it("marks activities unique to one side when the two graphs share no activity at all", async () => {
+    // `generateSyntheticLog` draws from one fixed activity vocabulary, so two seeds are not
+    // a reliable way to get a GUARANTEED disjoint pair — hand-built graphs are.
+    const disjointGraph = (id: string): ReturnType<typeof discoverGraph> => ({
+      activities: [
+        {
+          id,
+          label: id,
+          instances: 5,
+          cases: 5,
+          isStart: true,
+          isEnd: true,
+          duration: { min: 1, max: 1, mean: 1, median: 1, p90: 1, sum: 5, trimmedMean: 1 },
+        },
+      ],
+      transitions: [],
+      startActivities: { [id]: 5 },
+      endActivities: { [id]: 5 },
+      totals: { cases: 5, events: 5, variants: 1 },
+    });
+
+    render(
+      <ProcessCompare
+        a={{ label: "Before", graph: disjointGraph("OnlyBefore") }}
+        b={{ label: "After", graph: disjointGraph("OnlyAfter") }}
+        mode="superimposed"
+        metric={METRIC}
+        abstraction={IDENTITY_ABSTRACTION}
+        onAbstractionChange={noop}
+      />,
+    );
+    // The legend always names all three possible states (it documents the encoding, not
+    // which ones are present) — the table twin is what proves NEITHER activity row here
+    // reads "common".
+    await userEvent.click(screen.getByRole("switch", { name: "Table view" }));
+    const activityTable = screen.getAllByRole("table")[0]!;
+    const rowText = within(activityTable)
+      .getAllByRole("row")
+      .map((row) => row.textContent ?? "");
+    expect(rowText.some((text) => text.includes("Before only"))).toBe(true);
+    expect(rowText.some((text) => text.includes("After only"))).toBe(true);
+    expect(rowText.some((text) => text.includes("common"))).toBe(false);
+  });
+});

package/src/process-compare/process-compare.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+/**
+ * ProcessCompare — side-by-side or superimposed diff of two process maps (RM-064).
+ *
+ * ## What it is
+ *
+ * A composition, like every other view in this package: `side-by-side` renders two
+ * `CompareSide` panels — each a plain `ProcessMap` — with ONE `AbstractionControls` above
+ * both (fanned out to both maps, the same "lift state, drive two children" shape
+ * `useProcessExplorer` already uses for a single map); `superimposed` renders a SINGLE
+ * `ProcessMap` over the union of both graphs. Either way, `CompareKpiStrip` reads underneath
+ * — cases and median throughput, A vs B, with a delta on B's tile.
+ *
+ * ## The diff channel is never colour alone
+ *
+ * Superimposed mode paints each activity's accent swatch with a diff-state colour token
+ * (`--success` common, `--chart-1` A-only, `--destructive` B-only — {@link diffColorScale})
+ * AND appends the diff state as real text to the activity's own title
+ * ({@link withDiffLabels}) — the same text a screen reader announces as part of the node's
+ * accessible name, not a decorative glyph a colour-blind or non-visual reader could miss
+ * (WCAG 1.4.1). The `Legend` alongside states the same three words. Transitions carry no
+ * diff encoding of their own: `ProcessMap` has no per-edge colour hook to repurpose the way
+ * `colorScale` lets a node's accent be repurposed, and adding one is a `ProcessMap` change
+ * outside this item's scope (see this component's own module test for the deviation this
+ * records).
+ *
+ * ## No new `ProcessMap` prop
+ *
+ * Both modes compose the SHIPPED `ProcessMap` twice or once — no fork, no new prop on it.
+ * One consequence: `ProcessMap` exposes no viewport ref or controlled-viewport prop, so
+ * `side-by-side`'s two `CanvasShell`s cannot be zoom/pan-synced from outside it. The
+ * roadmap's `onZoomSync` is therefore NOT implemented here — a prop that could only ever be
+ * a no-op is a worse API than no prop at all (see `.claude/rules/conventions.md`'s "no
+ * speculative props"). Two panes with independent pan/zoom, laid out side by side so a
+ * reader can still eyeball the same region on both, is what ships.
+ */
+import { forwardRef, useId, useMemo, useState, type HTMLAttributes } from "react";
+import { Table2 } from "lucide-react";
+import { Label, Switch, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Legend, type FlowLayoutDirection } from "@elabs-ai/components-flow";
+import { abstractGraph, type AbstractionOptions } from "../core/abstract-graph";
+import { diffGraphs } from "../core/diff-graphs";
+import type { EventLog, ProcessGraph } from "../core/types";
+import { AbstractionControls } from "../abstraction-controls/abstraction-controls";
+import { ProcessMap, type ProcessMapProps } from "../process-map/process-map";
+import { CompareKpiStrip } from "./compare-kpi-strip";
+import { CompareSide } from "./compare-side";
+import { resolveCompareKpis, withDiffLabels } from "./compare-model";
+import { diffColorScale, diffToProcessGraph, EMPTY_PROCESS_GRAPH } from "./diff-to-graph";
+
+/** One side of the comparison. */
+export interface ProcessCompareSide {
+  /** How this side is named in headers, the KPI strip and the diff legend/labels. */
+  label: string;
+  /** A discovered graph. `undefined` while this side is still loading. */
+  graph: ProcessGraph | undefined;
+  /** The raw log, for `CompareKpiStrip`'s median-throughput reading. Optional. */
+  log?: EventLog;
+}
+
+export type ProcessCompareMode = "side-by-side" | "superimposed";
+
+export interface ProcessCompareProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  a: ProcessCompareSide;
+  b: ProcessCompareSide;
+  /** @default "side-by-side" */
+  mode?: ProcessCompareMode;
+  metric: ProcessMapProps["metric"];
+  /** Shared abstraction, synced across both sides (or the one superimposed map). */
+  abstraction: AbstractionOptions;
+  onAbstractionChange(next: Partial<AbstractionOptions>): void;
+  /** @default "TB" */
+  direction?: FlowLayoutDirection;
+  /** Neither side has a graph yet. Renders every map's own loading panel. @default false */
+  loading?: boolean;
+  /** Accessible name for the region. Defaults to the localized `process.compare.label`. */
+  label?: string;
+}
+
+/** ProcessMap's own narrower abstraction shape — `AbstractionControls` needs the full options. */
+function toMapAbstraction(
+  abstraction: AbstractionOptions,
+): Pick<AbstractionOptions, "activities" | "paths"> {
+  return { activities: abstraction.activities, paths: abstraction.paths };
+}
+
+/**
+ * Side-by-side or superimposed diff of two process maps.
+ *
+ * @example
+ * ```tsx
+ * <ProcessCompare
+ *   a={{ label: "Before", graph: beforeGraph }}
+ *   b={{ label: "After", graph: afterGraph }}
+ *   metric={{ node: "absolute_case", edge: "absolute" }}
+ *   abstraction={abstraction}
+ *   onAbstractionChange={setAbstraction}
+ * />
+ * ```
+ */
+export const ProcessCompare = forwardRef<HTMLDivElement, ProcessCompareProps>(
+  function ProcessCompare(
+    {
+      a,
+      b,
+      mode = "side-by-side",
+      metric,
+      abstraction,
+      onAbstractionChange,
+      direction = "TB",
+      loading = false,
+      label,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const { t } = useLocale();
+    const tableViewId = useId();
+    const [tableView, setTableView] = useState(false);
+
+    const mapAbstraction = useMemo(() => toMapAbstraction(abstraction), [abstraction]);
+
+    // The union of both sides — read for the ONE shared `AbstractionControls` (both modes)
+    // and, in superimposed mode, for the single map's own `graph` prop below. Computed
+    // unconditionally: it is a cheap linear scan, and building it once keeps the "auto"
+    // heuristic's reference graph and the superimposed render byte-identical rather than two
+    // independently-maintained unions.
+    const diff = useMemo(
+      () => diffGraphs(a.graph ?? EMPTY_PROCESS_GRAPH, b.graph ?? EMPTY_PROCESS_GRAPH),
+      [a.graph, b.graph],
+    );
+    const unionGraph = useMemo(() => diffToProcessGraph(diff), [diff]);
+    const abstracted = useMemo(
+      () => abstractGraph(unionGraph, abstraction),
+      [unionGraph, abstraction],
+    );
+
+    const aKpis = useMemo(() => resolveCompareKpis(a), [a]);
+    const bKpis = useMemo(() => resolveCompareKpis(b), [b]);
+
+    const superimposedGraph = useMemo(
+      () => withDiffLabels(unionGraph, diff, a.label, b.label, t),
+      [unionGraph, diff, a.label, b.label, t],
+    );
+    const superimposedColorScale = useMemo(() => diffColorScale(diff), [diff]);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="process-compare"
+        role="group"
+        aria-label={label ?? t("process.compare.label")}
+        className={cn("flex flex-col gap-4", className)}
+        {...props}
+      >
+        <div
+          data-slot="process-compare-toolbar"
+          className="flex flex-wrap items-start justify-between gap-3"
+        >
+          <AbstractionControls
+            abstraction={abstraction}
+            onAbstractionChange={onAbstractionChange}
+            graph={abstracted}
+            hiddenCounts={abstracted.hidden}
+          />
+          <div className="flex items-center gap-2">
+            <Switch id={tableViewId} checked={tableView} onCheckedChange={setTableView} />
+            <Label htmlFor={tableViewId} className="inline-flex items-center gap-1.5 text-body">
+              <Table2 aria-hidden="true" className="size-4" />
+              {t("process.compare.tableView")}
+            </Label>
+          </div>
+        </div>
+
+        {mode === "superimposed" ? (
+          <div data-slot="process-compare-superimposed" className="flex flex-col gap-3">
+            <Legend
+              variant="categorical"
+              title={t("process.compare.legendTitle")}
+              items={[
+                { label: t("process.compare.diffSuffixCommon"), color: "var(--success)" },
+                {
+                  label: t("process.compare.diffSuffixOnly", { label: a.label }),
+                  color: "var(--chart-1)",
+                },
+                {
+                  label: t("process.compare.diffSuffixOnly", { label: b.label }),
+                  color: "var(--destructive)",
+                },
+              ]}
+            />
+            <div className="min-h-96 flex-1">
+              <ProcessMap
+                graph={superimposedGraph}
+                metric={metric}
+                abstraction={mapAbstraction}
+                direction={direction}
+                colorScale={superimposedColorScale}
+                tableView={tableView}
+                loading={loading}
+                label={t("process.compare.superimposedMapLabel", {
+                  aLabel: a.label,
+                  bLabel: b.label,
+                })}
+                className="size-full"
+              />
+            </div>
+          </div>
+        ) : (
+          <div data-slot="process-compare-sides" className="grid gap-4 md:grid-cols-2">
+            <CompareSide
+              label={a.label}
+              map={{
+                graph: a.graph,
+                log: a.log,
+                metric,
+                abstraction: mapAbstraction,
+                direction,
+                tableView,
+                loading,
+                label: t("process.compare.mapLabel", { label: a.label }),
+              }}
+            />
+            <CompareSide
+              label={b.label}
+              map={{
+                graph: b.graph,
+                log: b.log,
+                metric,
+                abstraction: mapAbstraction,
+                direction,
+                tableView,
+                loading,
+                label: t("process.compare.mapLabel", { label: b.label }),
+              }}
+            />
+          </div>
+        )}
+
+        <CompareKpiStrip
+          a={{ label: a.label, kpis: aKpis }}
+          b={{ label: b.label, kpis: bKpis }}
+          loading={loading}
+        />
+      </div>
+    );
+  },
+);

package/src/process-explorer.stories.tsx

@@ -24,7 +24,7 @@
  *
  * 1. **Header + KPI strip** — the reading a stakeholder needs before any interaction.
  * 2. **`ViewToolbar`** — the repo's one-row grammar for "what am I looking at / what can I
- *    do about it" (`Docs/View Toolbar Contract`). Active filters are `FilterChip`s here,
+ *    do about it" (`Layout/ViewToolbar → Contract`). Active filters are `FilterChip`s here,
  *    not a bespoke pill row, and the case count is a `ResultCount` so "142 of 240" reads
  *    the same as it does on every table in the system.
  * 3. **Rail + canvas** — a `SplitPanel` with the two dials and the inspector on the

package/src/process-filter-bar/index.ts

@@ -0,0 +1,2 @@
+export { ProcessFilterBar } from "./process-filter-bar";
+export type { ProcessFilterBarProps } from "./process-filter-bar";

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

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useMemo, useRef } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
+import type { AbstractionOptions } from "../core/abstract-graph";
+import type { FilterIntent } from "../use-process-explorer";
+import { useProcessExplorer } from "../use-process-explorer";
+import { ProcessFilterBar } from "./process-filter-bar";
+
+const log = generateSyntheticLog({ cases: 300, seed: 7 });
+
+const SINGLE_INTENT: FilterIntent[] = [{ kind: "with", activity: "Reject Order" }];
+
+const CHAIN_INTENTS: FilterIntent[] = [
+  { kind: "without", activity: "Cancel Order" },
+  { kind: "with", activity: "Amend Order" },
+  { kind: "endsWith", activity: "Receive Payment" },
+];
+
+/**
+ * Real `useProcessExplorer` state, seeded once with `initialIntents` — this is the same
+ * hook `ProcessFilterBar` is meant to sit beside (RM-056, #205), so every number the bar
+ * renders (per-chip excluded counts, the filtered/total split, hidden-by-abstraction) is
+ * the hook's own live output, not a hand-typed stand-in.
+ */
+function ProcessFilterBarDemo({
+  initialIntents = [],
+  abstraction,
+}: {
+  initialIntents?: FilterIntent[];
+  abstraction?: Partial<AbstractionOptions>;
+}) {
+  const explorer = useProcessExplorer(log, { abstraction });
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    for (const intent of initialIntents) explorer.applyIntent(intent);
+  }, [explorer, initialIntents]);
+
+  const totalCases = useMemo(() => new Set(log.events.map((event) => event.caseId)).size, []);
+
+  return (
+    <div className="max-w-2xl">
+      <ProcessFilterBar
+        intents={explorer.intents}
+        excludedByIntent={explorer.excludedByIntent}
+        totalCases={totalCases}
+        filteredCases={explorer.kpis.cases}
+        hiddenCounts={explorer.hiddenCounts}
+        onRemove={explorer.clearIntent}
+        onClearAll={() => {
+          for (let index = explorer.intents.length - 1; index >= 0; index -= 1) {
+            explorer.clearIntent(index);
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: "Process/ProcessFilterBar",
+  component: ProcessFilterBar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Filter chain breadcrumbs (§4 R13): one removable chip per active " +
+          "`useProcessExplorer` intent, each carrying how many cases that intent ALONE " +
+          "excludes (`excludedByIntent`, the hook's own additive field), plus a summary " +
+          "line stating what filtering and abstraction currently hide. Composes " +
+          "`@elabs-ai/components-data`'s `FilterBar`/`FilterChip` — no chip markup of its " +
+          "own (`pnpm check --rule process-reuse`).",
+      },
+    },
+  },
+} satisfies Meta<typeof ProcessFilterBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** One active intent — the simplest non-empty chain. */
+export const SingleFilter: Story = {
+  render: () => <ProcessFilterBarDemo initialIntents={SINGLE_INTENT} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() =>
+      expect(canvas.getByRole("button", { name: /Contains Reject Order/ })).toBeInTheDocument(),
+    );
+  },
+};
+
+/**
+ * A three-intent chain — the breadcrumb reading this component exists for. Each chip's
+ * "excluded N" is the MARGINAL count that one intent removes on top of the ones before it,
+ * never the whole chain's total.
+ */
+export const FilterChain: Story = {
+  render: () => <ProcessFilterBarDemo initialIntents={CHAIN_INTENTS} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getAllByRole("button").length).toBeGreaterThan(1));
+
+    // Removing the middle chip by CLICK drops it, and only it.
+    const beforeCount = canvas.getAllByRole("button", { name: /^Remove filter:/ }).length;
+    await userEvent.click(canvas.getByRole("button", { name: /Contains Amend Order/ }));
+    await waitFor(() =>
+      expect(canvas.getAllByRole("button", { name: /^Remove filter:/ }).length).toBe(
+        beforeCount - 1,
+      ),
+    );
+    expect(canvas.queryByRole("button", { name: /Contains Amend Order/ })).not.toBeInTheDocument();
+
+    // Keyboard: Tab lands on a chip (a real <button>), Enter removes it — no new
+    // interaction pattern, the same contract `FilterChip` already ships.
+    const remaining = canvas.getByRole("button", { name: /Excludes Cancel Order/ });
+    remaining.focus();
+    await userEvent.keyboard("{Enter}");
+    await waitFor(() =>
+      expect(canvas.getAllByRole("button", { name: /^Remove filter:/ }).length).toBe(
+        beforeCount - 2,
+      ),
+    );
+  },
+};
+
+/** The chain plus a busy abstraction — the summary line states both clauses at once. */
+export const WithAbstractionHidden: Story = {
+  render: () => (
+    <ProcessFilterBarDemo
+      initialIntents={CHAIN_INTENTS}
+      abstraction={{ activities: 0.4, paths: 0.4 }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() =>
+      expect(canvas.getByText(/activit(?:y|ies) hidden by abstraction/)).toBeInTheDocument(),
+    );
+  },
+};
+
+/**
+ * No active intents: the chip row and its "Clear all" action render nothing at all — the
+ * summary line is the only thing left, and it reads as "showing everything".
+ */
+export const Empty: Story = {
+  render: () => <ProcessFilterBarDemo />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByRole("group")).not.toBeInTheDocument();
+    expect(canvas.queryByRole("button")).not.toBeInTheDocument();
+    await waitFor(() => expect(canvas.getByText(/^Showing all /)).toBeInTheDocument());
+  },
+};