# AI Ops Dashboard block

> AI Operations Dashboard with Provider Failover Timeline and Token Activity Chart

Full-page LLM ops dashboard for provider health, token usage, routing rules, and safety drift: metric cards, failover timeline, token activity chart, routing grid. ReUI Frame, Timeline, DataGrid, Badge; shadcn Button, Chart. Admin panel, monitoring.

- Type: Pro block
- Category: [AI Ops](https://web.dev.reui.io/blocks/solutions/ai-ops.md)
- Page: https://web.dev.reui.io/blocks/solutions/ai-ops/solution-ai-ops-1
- MCP: `get_block("solution-ai-ops-1")`
- Built with: Avatar, Badge, Button, Chart, Collapsible, Data Grid, Dropdown Menu, Filters, Frame, Item, Select, Separator, Skeleton, Spinner, Timeline, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Failover steps with owner rows that expand to notes and assignees, beside a 3 line token chart and above a routing rule table

## Agent notes

- Sample data lives in `providerMetrics`, `failoverSteps`, `tokenActivityData` and `ROUTING_RULES`, and the counts in the headings are typed text
- The header Last 30 Days, Refresh and Export buttons have no handler, and only the chart `Select` changes the range
- Open Rule and Export in `ActionsCell` and the grid Export button only toast, and `simulateAsyncFiltering` fakes a 400 ms delay

## When not to use

- A queue of autonomous runs with a throughput chart and an incident timeline: use [Agent Fleet Overview](https://web.dev.reui.io/blocks/solutions/agents/solution-agents-1.md) (`get_block("solution-agents-1")`)
- Fulfillment capacity KPI cards above an exception queue with selectable rows: use [Fulfillment Exceptions](https://web.dev.reui.io/blocks/application/dashboard/dashboard-1.md) (`get_block("dashboard-1")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-ai-ops-1
```

## About AI Ops blocks

### When to use

- Model operations dashboards that track provider health, token volume and spend against a budget cap
- Provider connection and routing pages that set priority order, fallback providers and risk tier controls
- Prompt, feature flag and token usage registries, a prompt editor and a safety policy wizard

### When not to use

- Autonomous agent runs, tool permissions and human approval of agent actions: use the [Agents blocks](https://web.dev.reui.io/blocks/solutions/agents.md)
- A bare table for your own columns and rows, with no provider or token sample records: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A KPI tile and trend chart overview for a fulfillment, staffing, revenue or payouts team: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)

### Agent notes

- Each page.tsx wraps the block in a `min-h-svh` container; remove it when the block sits inside your app shell
- No block calls an API: changes stay in local `useState` or uncontrolled inputs, so wire each save, switch, export and row action to your backend

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.