import { ProcessCompare } from "@elabs-ai/components-process";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-processPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui ProcessCompare component (from @elabs-ai/components-process) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look ProcessCompare up before writing code: `npx -y @elabs-ai/components-cli docs ProcessCompare` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-process is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Superimposed
One map over the union of both graphs, with the diff legend and diff-labelled titles.
Before After
The named use case: a "Before"/"After" pair from the same process, toggled into the accessible table twin, which both sides always share (RM-064's own contract — the same numbers the canvas draws, never a second source of truth).
No Overlap
Two graphs that share no activity at all — every entry reads A-only or B-only.
Loading
Neither side has a graph yet — every map's own loading panel, one shared control shell.
Empty
Two graphs with no activities — an abstraction that hid everything, or two empty logs.
API
ProcessCompare
| Prop | Type | Description |
|---|---|---|
arequired | ProcessCompareSide | |
brequired | ProcessCompareSide | |
mode | ProcessCompareMode | @default "side-by-side" |
metricrequired | ProcessMapProps["metric"] | |
abstractionrequired | AbstractionOptions | Shared abstraction, synced across both sides (or the one superimposed map). |
direction | FlowLayoutDirection | @default "TB" |
loading | boolean | Neither side has a graph yet. Renders every map's own loading panel. @default false |
label | string | Accessible name for the region. Defaults to the localized `process.compare.label`. |