Make it yours
npx shadcn@latest add https://elabs-ai.com/r/agent-ops-center-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 "Agent Operations Center" (agent-ops-center-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. The control room for a fleet of AI agents in production. Spend against limits, the escalation boundary and the insight feed on one tab; the trace waterfall and the hand-off inspector on the next; a run review with its decision record; and the audit log. 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-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/agent-ops-center-page.json` — it brings its blocks with it (agent-run-review-01, agent-trace-waterfall-01, audit-log-01, decision-record-01, escalation-boundary-01, handoff-inspector-01, insight-feed-01, spend-against-limit-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.
- Overview
- The insight feed, spend against limit and the escalation boundary.
- Runs
- The trace waterfall and the hand-off inspector.
- Review queue
- Runs waiting for a human decision, with the decision record.
- Audit log
- Every action, by whom, with what evidence.
- Agents
- The fleet and each agent's state.
- Budgets
- Spend limits per agent and team.
- Guardrails
- What the agents may not do.
- Evaluations
- How each agent scores over time.
Try it on the screen above: Approve or reject a run in the review queue: the decision is recorded, the count in the navigation and the header changes.
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.
9 blocks
What did the agent do, and what is it asking me?
One agent run, reviewable end to end: a Plan with its decision contract, an AgentTimeline whose last step follows your answer, a Tool call with arguments and result one click away, a ToolResultCard hosting the chart the run produced, TokenUsage in the header and an ApprovalCard for the one side effect that waits for a human. Reports the decision through onDecision and never performs it.
Where did the run fail?
An execution waterfall for one multi-agent run: a stat strip where every number carries its comparison (duration vs p95, retries, tokens in/out, cost vs workflow average, failed at), the charts package’s Gantt at sub-second granularity with one row per agent span nested under its caller, and a context-flow chain that shows the hop where a required field was dropped.
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.
Why did the AI do that?
Every AI action expanded into the reason it happened: what it did, what it looked at (named, openable evidence), what rule applied (the clause, monospace), how confident (or an honest "not applicable"), and how to reverse it. Below: the check list (confirmed / not confirmed) and what the copilot proposes — numbered, editable, nothing actioned until a person approves.
Where does autonomy end?
The one dial an AI-ops product must put on screen: a stacked distribution bar of every decision by how well it was corroborated, with the evidence threshold drawn as a mark; the evidence ladder (countable tick meter, meaning, decisions, share, side); and three "If you move it" scenario cards that state the trade in the reader’s units (cleared share, queue delta, catches, reviews per catch) and MOVE the boundary when clicked.
Where was the context dropped?
One edge of a multi-agent run: sender → a metric pill on the arrow (context size, latency, tokens, fields present of required) → receiver; a context-comparison table (sent vs expected, status badge per field) that shows the required field that was not sent; the payload size against the workflow baseline as a Meter with a marker; and the edge’s 24-hour health beside it.
What changed while you were away?
The AI-ops briefing pattern: a numbered feed of things the copilot did or noticed — a one-sentence fact, a paragraph of why, the evidence it read, its confidence and two actions — with a conflict item that carries no confidence ("No verdict — a person decides"). Beside it, a "Needs a person" rail of what stopped and a "Derivation load" split of applied / sent to you / pinned by people.
How close is each agent to its ceiling?
Every non-human spender on the card programme, sorted by share of ceiling: monospace agent id, autonomy band as a status badge (Auto / Review / Hold), a bar with the ceiling drawn as a vertical mark, the literal "$612 of $500", and Revoke. Over the ceiling paints the destructive rung and says so. Above it, three autonomy-band tiles total the envelopes per band.
Examples
Review Queue
Opened on the review queue — the two things that wait for a human.
Failed Run
Opened on a failed run: the waterfall and the handoff that dropped a field.