@elabs-ai/components-process 4.1.0

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@elabs-ai/components-process",
+  "version": "4.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mreimitz/elabs-components.git",
+    "directory": "packages/process"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
+    },
+    "./test": {
+      "types": "./dist/test/index.d.ts",
+      "default": "./dist/test/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.577.0"
+  },
+  "peerDependencies": {
+    "@xyflow/react": "^12.11.1",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "@elabs-ai/components-charts": "4.1.0",
+    "@elabs-ai/components-flow": "4.1.0",
+    "@elabs-ai/components-data": "4.1.0",
+    "@elabs-ai/components-tokens": "4.1.0",
+    "@elabs-ai/components-ui": "4.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@xyflow/react": "^12.11.1",
+    "eslint": "^9.17.0",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.2",
+    "@elabs-ai/components-charts": "4.1.0",
+    "@elabs-ai/components-data": "4.1.0",
+    "@elabs-ai/components-eslint-config": "0.1.0",
+    "@elabs-ai/components-flow": "4.1.0",
+    "@elabs-ai/components-icons": "4.1.0",
+    "@elabs-ai/components-typescript-config": "0.1.0",
+    "@elabs-ai/components-ui": "4.1.0",
+    "@elabs-ai/components-tokens": "4.1.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "generate:fixtures": "vitest run --config vitest.fixtures.config.ts",
+    "clean": "rm -rf dist .turbo coverage"
+  }
+}

package/src/abstraction-controls/abstraction-controls-fixtures.ts

@@ -0,0 +1,86 @@
+/**
+ * Shared, framework-free fixtures for `AbstractionControls`' stories AND its co-located
+ * test (#376). Lifted into its own module — rather than exported straight from
+ * `abstraction-controls.stories.tsx` — because `tsconfig.json` excludes `**\/*.stories.tsx`
+ * from the package's typecheck project; importing one from a `.test.tsx` would pull the
+ * whole story file (and its pre-existing, Storybook-only `StoryObj` typing) into that
+ * project transitively. This module has no such baggage.
+ */
+import type { ActivityStats, DurationStats, ProcessGraph, TransitionStats } from "../core/types";
+
+const zero: DurationStats = {
+  min: 0,
+  max: 0,
+  mean: 0,
+  median: 0,
+  p90: 0,
+  sum: 0,
+  trimmedMean: 0,
+};
+
+/**
+ * A 60-activity graph shaped like a real process: a 20-step high-frequency BACKBONE plus
+ * 40 rare side activities, each hanging off it as `Step[i] -> Detour -> Step[i+1]`.
+ *
+ * The topology is the point, not the size (#376). `abstractGraph`'s `keepConnected` repair
+ * restores reachability to a start/end activity, so on a strict unbranched CHAIN — the
+ * shape the `Interaction` story's fixture used to be — dropping any suffix forces the whole
+ * remainder back in and no slider position hides anything (measured; see
+ * `auto-abstraction.test.ts`'s "known limitation" block and #343, which owns that runtime
+ * behaviour). Dropping a rare detour here leaves the backbone connected, so a narrowing is a
+ * real narrowing: at the "Auto" fraction for a 25-activity budget this fixture keeps exactly
+ * the 20-step backbone plus 5 detours (25 total), locked in
+ * `abstraction-controls.test.tsx`.
+ */
+export function backboneGraph(backbone = 20, sides = 40): ProcessGraph {
+  const spine = Array.from(
+    { length: backbone },
+    (_, i) => `Step ${String(i + 1).padStart(2, "0")}`,
+  );
+  const side = Array.from({ length: sides }, (_, i) => `Detour ${String(i + 1).padStart(2, "0")}`);
+  const activities: ActivityStats[] = [
+    ...spine.map((id, i) => ({
+      id,
+      label: id,
+      instances: 1000 - i,
+      cases: 1000 - i,
+      isStart: i === 0,
+      isEnd: i === backbone - 1,
+      duration: { ...zero, median: (i + 1) * 900_000 },
+    })),
+    ...side.map((id, i) => ({
+      id,
+      label: id,
+      instances: 40 - i,
+      cases: 40 - i,
+      isStart: false,
+      isEnd: false,
+      duration: { ...zero, median: (i + 1) * 300_000 },
+    })),
+  ];
+  const transitions: TransitionStats[] = [];
+  const push = (source: string, target: string, count: number) => {
+    transitions.push({
+      source,
+      target,
+      count,
+      caseCount: Math.max(1, Math.round(count * 0.8)),
+      duration: { ...zero, median: count * 60_000 },
+      isSelfLoop: source === target,
+      isBackEdge: false,
+    });
+  };
+  for (let i = 0; i < backbone - 1; i += 1) push(spine[i]!, spine[i + 1]!, 900 - i * 5);
+  side.forEach((id, i) => {
+    const anchor = i % (backbone - 1);
+    push(spine[anchor]!, id, 40 - i);
+    push(id, spine[anchor + 1]!, 40 - i);
+  });
+  return {
+    activities,
+    transitions,
+    startActivities: { [spine[0]!]: 1000 },
+    endActivities: { [spine[backbone - 1]!]: 1000 },
+    totals: { cases: 1000, events: 6000, variants: 41 },
+  };
+}

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

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { abstractGraph, type AbstractionOptions } from "../core/abstract-graph";
+import { discoverGraph } from "../core/discover-graph";
+import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
+import type { ProcessGraph } from "../core/types";
+import { AbstractionControls } from "./abstraction-controls";
+import { backboneGraph } from "./abstraction-controls-fixtures";
+
+const log = generateSyntheticLog({ cases: 240, seed: 42 });
+const fullGraph = discoverGraph(log);
+
+/**
+ * `busyGraph` is what makes the `Interaction` story below a REAL narrowing rather than a
+ * round trip back to 100% — see {@link backboneGraph}'s own docblock for why its topology
+ * (not merely its size) is what makes that true (#376).
+ */
+const busyGraph = backboneGraph();
+
+function ControlledAbstractionControls({
+  graph = fullGraph,
+  initial,
+  autoMaxActivities,
+}: {
+  graph?: ProcessGraph;
+  initial: AbstractionOptions;
+  autoMaxActivities?: number;
+}) {
+  const [abstraction, setAbstraction] = useState<AbstractionOptions>(initial);
+  const abstracted = abstractGraph(graph, abstraction);
+  return (
+    <div className="max-w-sm">
+      <AbstractionControls
+        abstraction={abstraction}
+        onAbstractionChange={(next) => setAbstraction((prev) => ({ ...prev, ...next }))}
+        graph={abstracted}
+        hiddenCounts={abstracted.hidden}
+        autoMaxActivities={autoMaxActivities}
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: "Process/AbstractionControls",
+  component: AbstractionControls,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The two sliders every process-mining explorer opens with. Activities/paths " +
+          "abstraction is a VIEW filter over `ProcessMap`, never a re-analysis — dragging a " +
+          "slider hides nodes/edges, it never recomputes a statistic (`abstractGraph`'s own " +
+          "contract). The 'Auto' button runs a bounded, deterministic search " +
+          "(`computeAutoAbstraction`) for the largest activities fraction that still fits a " +
+          "node budget, so a reader can open a busy graph and get a readable one in one click.",
+      },
+    },
+  },
+} satisfies Meta<typeof AbstractionControls>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Identity abstraction — nothing hidden yet. Also the geometry lock for #355: each INTERIOR
+ * tick's measured centre (`getBoundingClientRect`, a real layout, not a JSDOM stand-in) must
+ * sit at its own value's fraction of the slider track — a `justify-between` flex row would
+ * instead land the four ticks at 0/33.3/66.7/100, never at 25/50/75/100 — on BOTH sliders. The
+ * `100%` tick is deliberately right-aligned instead of centred (so it is never clipped by the
+ * rail's own right edge, per the issue's own "translate-x only for interior ticks" option), so
+ * its RIGHT edge — not its centre — is what is asserted against the track's right edge.
+ * Clicking the `50%` tick must move the thumb to that tick's own measured centre.
+ */
+export const Default: Story = {
+  render: () => (
+    <ControlledAbstractionControls
+      initial={{ activities: 1, paths: 1, invert: false, keepConnected: true }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tolerancePx = 2;
+
+    for (const group of ["Activities", "Paths"]) {
+      const slider = canvas.getByRole("slider", { name: group });
+      const trackRect = (slider.closest(".relative") as HTMLElement).getBoundingClientRect();
+      const ticks = within(canvas.getByRole("group", { name: group })).getAllByRole("button", {
+        name: /^\d+%$/,
+      });
+      expect(ticks).toHaveLength(4);
+      for (const tick of ticks) {
+        const percent = Number(tick.textContent?.replace("%", ""));
+        const tickRect = tick.getBoundingClientRect();
+        const expectedX = trackRect.left + (percent / 100) * trackRect.width;
+        if (percent >= 100) {
+          // Right-aligned, not centred — its right edge (not its centre) marks the value.
+          expect(Math.abs(tickRect.right - expectedX)).toBeLessThanOrEqual(tolerancePx);
+          expect(tickRect.right).toBeLessThanOrEqual(trackRect.right + tolerancePx);
+        } else {
+          const tickCentre = tickRect.left + tickRect.width / 2;
+          expect(Math.abs(tickCentre - expectedX)).toBeLessThanOrEqual(tolerancePx);
+        }
+      }
+    }
+
+    // Clicking the 50% tick moves the thumb to that tick's own measured centre.
+    const activitiesSlider = canvas.getByRole("slider", { name: "Activities" });
+    const activitiesTick50 = within(canvas.getByRole("group", { name: "Activities" })).getByRole(
+      "button",
+      { name: "50%" },
+    );
+    const tick50Centre = (() => {
+      const r = activitiesTick50.getBoundingClientRect();
+      return r.left + r.width / 2;
+    })();
+    await userEvent.click(activitiesTick50);
+    await waitFor(() => expect(activitiesSlider).toHaveAttribute("aria-valuenow", "50"));
+    // The attribute and the thumb's own layout both come from the same `value` prop update,
+    // but give layout one more macrotask to settle before measuring it (real-browser paint,
+    // not a JSDOM stand-in).
+    await waitFor(() => {
+      const thumbRect = activitiesSlider.getBoundingClientRect();
+      const thumbCentre = thumbRect.left + thumbRect.width / 2;
+      expect(Math.abs(thumbCentre - tick50Centre)).toBeLessThanOrEqual(tolerancePx);
+    });
+  },
+};
+
+/** Half the activities kept — the hidden-count status line reflects the real hidden count. */
+export const PartiallyAbstracted: Story = {
+  render: () => (
+    <ControlledAbstractionControls
+      initial={{ activities: 0.5, paths: 0.5, invert: false, keepConnected: true }}
+    />
+  ),
+};
+
+/** The "what is rare here" reading — `invert` hides the MOST frequent instead of the least. */
+export const Inverted: Story = {
+  render: () => (
+    <ControlledAbstractionControls
+      initial={{ activities: 0.5, paths: 1, invert: true, keepConnected: true }}
+    />
+  ),
+};
+
+/**
+ * Dragging a percentage tick sets the corresponding slider directly, and clicking "Auto"
+ * runs the bounded heuristic and narrows `busyGraph` (its backbone-plus-detours topology,
+ * see {@link backboneGraph}) down to fit its default 25-activity budget — the RM-052
+ * acceptance criterion for the control, exercised against a real, oversized graph rather
+ * than a stub. This holds for THIS fixture's topology; it is not a general guarantee of
+ * "Auto" — on a strict activity chain the same heuristic's prediction and the abstracted
+ * result can diverge (`keepConnected`'s reachability repair re-adds the whole chain; see
+ * #343, which owns that runtime behaviour and is out of scope here).
+ */
+export const Interaction: Story = {
+  render: () => (
+    <ControlledAbstractionControls
+      graph={busyGraph}
+      initial={{ activities: 1, paths: 1, invert: false, keepConnected: true }}
+      autoMaxActivities={25}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const activitiesSlider = canvas.getByRole("slider", { name: "Activities" });
+    const status = canvasElement.querySelector('[role="status"]');
+    expect(activitiesSlider).toHaveAttribute("aria-valuenow", "100");
+    expect(status).toHaveTextContent("0 activities hidden");
+
+    // A percentage tick sets its slider directly, without requiring a drag.
+    const tick50 = canvas.getAllByRole("button", { name: "50%" })[0]!;
+    await userEvent.click(tick50);
+    await waitFor(() => expect(activitiesSlider).toHaveAttribute("aria-valuenow", "50"));
+
+    // "Auto" narrows toward the 25-activity budget. The slider value is a secondary check —
+    // the assertion that actually catches a non-narrowing run is the live region's own text,
+    // since that is what a reader of the control sees (#376).
+    const autoButton = canvas.getByRole("button", { name: "Auto" });
+    await userEvent.click(autoButton);
+    await waitFor(() => expect(status).toHaveTextContent(/[1-9]\d* activit(?:y|ies) hidden/));
+    const afterAuto = Number(activitiesSlider.getAttribute("aria-valuenow"));
+    expect(Math.round(60 * (afterAuto / 100))).toBeLessThanOrEqual(25);
+  },
+};

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

@@ -0,0 +1,226 @@
+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 { abstractGraph, type AbstractionOptions } from "../core/abstract-graph";
+import type { ActivityStats } from "../core/types";
+import { AbstractionControls } from "./abstraction-controls";
+import { backboneGraph } from "./abstraction-controls-fixtures";
+import { computeAutoAbstraction } from "./auto-abstraction";
+
+afterEach(cleanup);
+
+const identity: AbstractionOptions = {
+  activities: 1,
+  paths: 1,
+  invert: false,
+  keepConnected: true,
+};
+
+/** Only `.length` matters to `AbstractionControls` — minimal-but-valid `ActivityStats` stubs. */
+function fakeActivities(count: number): ActivityStats[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `A${i}`,
+    label: `A${i}`,
+    instances: 1,
+    cases: 1,
+    isStart: i === 0,
+    isEnd: i === count - 1,
+    duration: { min: 0, max: 0, mean: 0, median: 0, p90: 0, sum: 0, trimmedMean: 0 },
+  }));
+}
+
+function renderControls(overrides: Partial<Parameters<typeof AbstractionControls>[0]> = {}) {
+  const onAbstractionChange = vi.fn();
+  const utils = render(
+    <AbstractionControls
+      abstraction={identity}
+      onAbstractionChange={onAbstractionChange}
+      graph={{ activities: fakeActivities(25) }}
+      hiddenCounts={{ activities: 0, paths: 0 }}
+      {...overrides}
+    />,
+  );
+  return { onAbstractionChange, ...utils };
+}
+
+describe("AbstractionControls — rendering", () => {
+  it("renders both sliders, the invert switch and the Auto button", () => {
+    renderControls();
+    expect(screen.getByRole("slider", { name: "Activities" })).toBeInTheDocument();
+    expect(screen.getByRole("slider", { name: "Paths" })).toBeInTheDocument();
+    expect(screen.getByRole("switch")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Auto" })).toBeInTheDocument();
+  });
+
+  it("shows the current abstraction percentages", () => {
+    renderControls({ abstraction: { ...identity, activities: 0.5, paths: 0.25 } });
+    expect(screen.getByRole("slider", { name: "Activities" })).toHaveAttribute(
+      "aria-valuenow",
+      "50",
+    );
+    expect(screen.getByRole("slider", { name: "Paths" })).toHaveAttribute("aria-valuenow", "25");
+  });
+
+  it("announces the hidden counts in a single live region", () => {
+    renderControls({ hiddenCounts: { activities: 3, paths: 7 } });
+    const status = screen.getByRole("status");
+    expect(status).toHaveTextContent("3 activities hidden");
+    expect(status).toHaveTextContent("7 paths hidden");
+  });
+});
+
+describe("AbstractionControls — a percentage tick", () => {
+  it("sets the activities slider directly, without a drag", async () => {
+    const user = userEvent.setup();
+    const { onAbstractionChange, container } = renderControls();
+    // Both sliders render a "75%" tick — scope the query to the activities
+    // section (its own `data-slot`) rather than assuming DOM order.
+    const activitiesSection = container.querySelector(
+      '[data-slot="abstraction-controls-activities"]',
+    ) as HTMLElement;
+    await user.click(within(activitiesSection).getByRole("button", { name: "75%" }));
+    expect(onAbstractionChange).toHaveBeenCalledWith({ activities: 0.75 });
+  });
+});
+
+describe("AbstractionControls — tick position (#355)", () => {
+  it("positions every tick at its own percent, derived from the slider's min/max — not spread evenly by flexbox", () => {
+    renderControls();
+    const ticks = screen.getAllByRole("button", { name: /^\d+%$/ });
+    expect(ticks).toHaveLength(8); // 4 ticks x 2 sliders
+    for (const tick of ticks) {
+      const percent = Number(tick.textContent?.replace("%", ""));
+      // The slider's own range is 0..100, so a tick's rail offset must equal its percent
+      // exactly — a `justify-between` flex row would instead land at 0/33.3/66.7/100 for
+      // this 4-tick set, never at 25/50/75/100.
+      expect(tick.style.left).toBe(`${percent}%`);
+    }
+  });
+
+  it("keeps the 100% tick anchored to the rail's right edge rather than centred past it", () => {
+    renderControls();
+    const tick100 = screen.getAllByRole("button", { name: "100%" })[0]!;
+    expect(tick100.style.left).toBe("100%");
+    expect(tick100.className).toContain("-translate-x-full");
+    expect(tick100.className).not.toContain("-translate-x-1/2");
+  });
+});
+
+describe("AbstractionControls — tick + group accessible names (#356)", () => {
+  it("names three groups — the outer control plus one per slider — reusing the slider's own localized label", () => {
+    renderControls();
+    const groups = screen.getAllByRole("group");
+    expect(groups).toHaveLength(3);
+    expect(screen.getByRole("group", { name: "Abstraction" })).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Activities" })).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Paths" })).toBeInTheDocument();
+  });
+
+  it("gives every tick button its own accessible name (toHaveAccessibleName, exact string, no regex)", () => {
+    renderControls();
+    for (const percent of [25, 50, 75, 100]) {
+      const [activitiesTick, pathsTick] = screen.getAllByRole("button", {
+        name: `${percent}%`,
+      });
+      expect(activitiesTick).toHaveAccessibleName(`${percent}%`);
+      expect(pathsTick).toHaveAccessibleName(`${percent}%`);
+    }
+  });
+
+  it("disambiguates all eight ticks via group name + own name — 8 distinct qualified entries", () => {
+    renderControls();
+    const activitiesGroup = screen.getByRole("group", { name: "Activities" });
+    const pathsGroup = screen.getByRole("group", { name: "Paths" });
+    const qualifiedNames = new Set<string>();
+    for (const [groupName, group] of [
+      ["Activities", activitiesGroup],
+      ["Paths", pathsGroup],
+    ] as const) {
+      const ticks = within(group).getAllByRole("button", { name: /^\d+%$/ });
+      expect(ticks).toHaveLength(4);
+      for (const tick of ticks) {
+        qualifiedNames.add(`${groupName} ${tick.textContent}`);
+      }
+    }
+    expect(qualifiedNames.size).toBe(8);
+  });
+});
+
+describe("AbstractionControls — invert", () => {
+  it("toggles the invert switch", async () => {
+    const user = userEvent.setup();
+    const { onAbstractionChange } = renderControls();
+    await user.click(screen.getByRole("switch"));
+    expect(onAbstractionChange).toHaveBeenCalledWith({ invert: true });
+  });
+});
+
+describe("AbstractionControls — Auto (the RM-052 acceptance criterion)", () => {
+  it("derives the pre-abstraction total from graph.activities.length + hiddenCounts.activities and requests a fraction that fits the budget", async () => {
+    const user = userEvent.setup();
+    // 20 kept + 40 hidden = 60 activities pre-abstraction; a 25-activity budget cannot be
+    // met at 100%, so Auto must request something less than the identity fraction.
+    const { onAbstractionChange } = renderControls({
+      graph: { activities: fakeActivities(20) },
+      hiddenCounts: { activities: 40, paths: 0 },
+      autoMaxActivities: 25,
+    });
+    await user.click(screen.getByRole("button", { name: "Auto" }));
+    expect(onAbstractionChange).toHaveBeenCalledTimes(1);
+    const [call] = onAbstractionChange.mock.calls;
+    const requested = call![0] as { activities: number };
+    expect(requested.activities).toBeLessThan(1);
+    expect(Math.round(60 * requested.activities)).toBeLessThanOrEqual(25);
+  });
+
+  it("is a no-op fraction (1) when the graph is already within budget — and paths caps at 1 too", async () => {
+    const user = userEvent.setup();
+    const { onAbstractionChange } = renderControls({
+      graph: { activities: fakeActivities(10) },
+      hiddenCounts: { activities: 0, paths: 0 },
+      autoMaxActivities: 25,
+    });
+    await user.click(screen.getByRole("button", { name: "Auto" }));
+    // activities: 1 would put the offset ("0.2 above") at 1.2 — proves the cap actually
+    // clamps rather than merely never being exercised.
+    expect(onAbstractionChange).toHaveBeenCalledWith({ activities: 1, paths: 1 });
+  });
+
+  it("sets paths 0.2 above the requested activities fraction — the roadmap's spec (RM-052 round 2, #227, F2 third piece)", async () => {
+    const user = userEvent.setup();
+    // Same over-budget shape as the first Auto test: 20 kept + 40 hidden, budget 25, so the
+    // heuristic requests an activities fraction well under 0.8 — the offset stays additive
+    // here rather than immediately hitting the cap tested above.
+    const { onAbstractionChange } = renderControls({
+      graph: { activities: fakeActivities(20) },
+      hiddenCounts: { activities: 40, paths: 0 },
+      autoMaxActivities: 25,
+    });
+    await user.click(screen.getByRole("button", { name: "Auto" }));
+    const [call] = onAbstractionChange.mock.calls;
+    const requested = call![0] as { activities: number; paths: number };
+    expect(requested.activities).toBeLessThan(0.8);
+    expect(requested.paths).toBeCloseTo(requested.activities + 0.2, 10);
+  });
+});
+
+describe("AbstractionControls — Interaction story fixture suitability (#376)", () => {
+  it("actually narrows under Auto's fraction, unlike the strict-chain topology auto-abstraction.test.ts locks as a known limitation", () => {
+    const graph = backboneGraph();
+    const totalActivities = graph.activities.length;
+    const { activities: autoFraction } = computeAutoAbstraction(totalActivities, {
+      maxActivities: 25,
+    });
+    const abstracted = abstractGraph(graph, {
+      activities: autoFraction,
+      paths: Math.min(1, autoFraction + 0.2),
+      keepConnected: true,
+    });
+    // The mirror image of auto-abstraction.test.ts:154-173's "known limitation" block: that
+    // test locks that a strict chain CANNOT narrow under keepConnected repair; this locks
+    // that this story's backbone-plus-detours fixture CAN — so a future fixture swap cannot
+    // silently reintroduce a non-narrowing graph without this test going red.
+    expect(abstracted.hidden.activities).toBeGreaterThan(0);
+    expect(abstracted.activities.length).toBeLessThanOrEqual(25);
+  });
+});