How to build an agent dashboard in React
An agent dashboard has to answer five questions at a glance: what is running, who started whom, what needs a person, how long and how much it took, and what went wrong. Build it from a few focused views – an inbox of runs, a tree of agents, a timeline, a trace and approvals – rather than one big table.
Start from the questions
A dashboard for agents is a control room. People open it to check on work they handed off, so each view should answer one question fast.
- What's running, waiting or done? – an inbox grouped by state
- Who started whom? – a tree from the orchestrator down to its sub-agents
- Where is every agent right now? – lanes on a timeline
- Where did the time and money go? – a trace waterfall per run
- What needs me? – approvals and questions, right where the work is
An inbox of runs
Background agents need a place where their work lands. A list or board grouped by needs you, running and done – with live clocks and status – lets people triage dozens of runs without opening each one.
- Agent Inbox – All your background agent tasks in one calm list – live clocks and status tags, filter tabs with rolling counts, rows that unfold to the last steps with Approve, Reject, Retry or Open, and glide to their new place
- Decision Inbox – Open decisions with two quick answers each – answered ones confirm and fold away
- Delegate Board – Hand work to your agents by dragging it onto them – each agent previews its new “busy until” time, or switch to Auto and every new task goes to whoever is free first
Multi-agent runs: tree and lanes
When an orchestrator hands work to sub-agents, a tree shows who started whom, with status, cost and time on every card and costs adding up per branch. Lanes show the same run over time: one lane per agent, tasks growing into now, and hand-offs drawn between them.
- Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
- Agent Lanes – Where every agent is right now – a live timeline with a lane per agent, tasks growing into “now”, hand-offs drawn between agents and approvals right on the block
- Agent Graph – Agents and the tools they call as a living network – a pulse along the link for every call and its answer, busy links growing thicker, agents that breathe while they work and turn amber when they need you
Traces: time and cost per step
For one run, a trace waterfall answers where the time and money went: every LLM call, tool call and sub-agent as a bar on a shared timeline, with duration and cost next to it. Comparing the plan with what actually happened shows which step made a run late.
- Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
- Agent Plan – An agent's step-by-step plan to review before it runs – rename, drag to reorder, remove or add steps, then watch each one run with live timers and retry from a failed step
People in the loop
Agents that can send emails, spend money or change data need a way to ask first. Put the question where the work is – on the task, in the run – with the exact action, its inputs and two clear answers.
- Approval Card – An agent asks before it acts – risk badge, preview, Approve and Deny with shortcuts, a pausing countdown, and a smooth morph into a resolved row
- Permission Request – An agent asks for one specific right – who, why and exactly what will happen – and you allow it once, for an hour or always; then it folds into one line with the time left and Revoke
- Agent Steering – Steer an agent while it works – queue a note for the next step and watch it glide into the plan when the agent picks it up, or interrupt right away
Cost and limits
Show spend against a budget and token use against the context window, so people see a problem before a run fails.
- Usage Meter – Plan usage and AI credits – a stacked credits meter by category, daily sparkline, limits and a button that speaks up near the limit
- Context Window – What fills the model's context, as a field of cells – hover a part to light it up, remove files, and compact the conversation while its cells shimmer and clear
Putting it together
Start with an app shell – sidebar, page, and a work area on the right for details – and put the inbox on the home view. Open a run into its tree or trace, and keep approvals visible in the sidebar or as a badge. All views take plain data as props and animate their own changes, so they update in place as your agents report progress.
- Agent Run – One autonomous agent run: the plan ticking through its steps, the tool calls, an approval it waits on and the draft it wrote
- App Shell Workspace Inset – App Shell Inset with a resizable work area on the right – tools, browser and suggested sources next to the page, like Claude or Codex
Questions
Do I need WebSockets for a live agent dashboard?
Any way of getting updates works – WebSockets, server-sent events or polling. The components only need the latest data as props; they animate the change themselves.
Which framework does this work with?
Any React 19 setup – Next.js, Vite, Remix or React Router. The components don't depend on a framework or a state library.
Can I show runs from LangGraph, CrewAI or the OpenAI Agents SDK?
Yes. Map your framework's runs, steps and tool calls to the components' props – an id, a name, a status, times and costs are usually all they need.
Updated 2026-10-29