Make it yours
npx shadcn@latest add https://elabs-ai.com/r/developer-platform-page.jsonPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui template "Developer Platform" (developer-platform-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. A platform team's delivery control room. The headline says how many of today's runs failed and whether main is green; the four DORA numbers sit above the pipeline graph, the run's own log and the table of runs; picking a failed run opens the stage it stopped at, the failing check and the change under test as a diff, with the re-run one click away and written to the audit trail. 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. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), then the packages the template imports: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-editor, @elabs-ai/components-flow, @elabs-ai/components-icons, @elabs-ai/components-terminal, @elabs-ai/components-tokens, @elabs-ai/components-ui. 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`. 3. Copy the template in with `npx shadcn@latest add https://elabs-ai.com/r/developer-platform-page.json` — it brings its blocks with it (agent-ops-parts, audit-log-01, workspace-shell); if that url does not answer, copy the folders from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks instead. 4. Mount the page at a route, keep its `WorkspaceShell` frame, and replace the seeded data with ours: [the route, the real data source, and what should change from the template] 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.
What each view shows
The screens the navigation names, one line each.
- Pipelines
- The stages of the selected run as a graph, and its log as it printed.
- Runs
- Every run of the day under its filters, most urgent first.
- Deployments
- Deploys per day, lead time, change failure rate and time to restore.
- Audit
- Who re-ran or cancelled what, append-only.
Try it on the screen above: Open a failed run from the table: the dock names the stage it stopped at and shows the diff under test; Re-run failed stage queues it again — the graph, the nav badge and the audit trail agree, and the toast's Undo takes it back.
What it is made of
The blocks and packages the template composes — each has its own page. Copy the template and you copy the blocks with it.
3 blocks
Who did what?
An append-only audit table whose actor column tells three authors apart by glyph — copilot, delegated agent, person — and whose result column is a status badge with an icon (Applied / Held / Stopped / Reverted), so a row still reads in greyscale. Monospace tabular timestamps; the action is one plain sentence with the number it wrote in it.
Examples
Rerun Failed Stage
Open the failed run, read the failing test, re-run the stage: the dock, the log and the nav badge agree.