import { PerformanceSpectrum } from "@elabs-ai/components-process";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-processPrompt for your coding agent
Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui PerformanceSpectrum 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 PerformanceSpectrum up before writing code: `npx -y @elabs-ai/components-cli docs PerformanceSpectrum` 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
Variant Path
The rows follow the most frequent variant's path, in order. Keyboard: Tab row by row.
Aggregated
One bar per day per segment — height is cases entering, fill the median quartile.
With Selection
The selected transition's row carries a rail and says “selected” to assistive tech.
Table View
The accessible table twin: cases, median and p90 duration per segment.
Loading
Data not ready yet.
Empty
The chosen segments never occur in the log.
API
PerformanceSpectrum
| Prop | Type | Description |
|---|---|---|
logrequired | EventLog | |
order | PerformanceSpectrumOrder | Row order: explicit segments, the busiest transitions, or one variant's path. @default "frequency" |
segmentLimit | number | At most this many rows, whichever `order` is used. @default 12 |
mode | "lines" | "aggregated" | One line per occurrence, or one bar per time bucket. @default "lines" |
binSize | number | Bucket width in ms, aggregated mode only. @default 86_400_000 (1 day) |
selection | ProcessSelection | null | Rows whose segment is (or touches) the selected transition/activity are marked. |
onFilterIntent | (intent: PerformanceSpectrumFilterIntent) => void | When given, the time axis becomes a brush that emits `{ kind: "cases", ids }`. |
onCaseSelect | (caseId: string, occurrence: SpectrumLine) => void | Click or `Enter` on an occurrence (lines) or on a bar's first case (aggregated). |
height | number | Total plot height in CSS px, split evenly across rows (min 24 px a row). |
tableView | boolean | Render the accessible table twin instead of the chart. @default false |
loading | boolean | Data not ready yet — renders the loading panel. |
labels | Partial<PerformanceSpectrumLabels> | Override any user-visible string. |