How to show what an AI agent is doing
Show an agent's work at three levels: the step it is on right now, with a clock and a plain-language label; the plan it is following, with done, current and upcoming steps; and the whole run as a tree, timeline or trace once several agents or many calls are involved. Each level answers a different question, so show the smallest one that does.
Pick the view by the question
"What is the agent doing?" means different things at different moments. While waiting for an answer, people want to know that something is happening and what. During a long task, they want to see progress against a plan. After a run, they want to know why it took so long or cost so much.
- Is it working, and on what? – a thinking state or a one-line current step
- How far along is it? – the plan with the current step highlighted
- What did it call? – one line per tool call, details on demand
- Who is doing what? – a tree or lanes when several agents work together
- Where did the time and money go? – a trace waterfall after the run
The current step
The smallest useful signal is the step in words – "Reading 12 pages", "Comparing prices" – with a clock that keeps ticking. It tells people the agent hasn't stalled and gives them something to judge. Swap the label in place so nothing around it moves, and settle on a check when the step is done.
- Thinking Loader – A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check
- Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one
The plan
For tasks that take minutes, show the plan before or as the agent starts: a short list of steps where the current one is marked and finished ones check off. Letting people edit the plan before it runs catches wrong turns early; comparing the plan with what actually happened shows which step ran over.
- 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
Tool calls
Every call to a search, a database or an API is a step people may want to check. Show each one as a line with the tool, a short summary, its status and time, and keep the exact arguments and result one click away.
- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
Several agents: tree and lanes
When an orchestrator hands work to sub-agents, a flat log gets confusing fast. A tree shows who started whom, with status, cost and time on each card. Lanes show the same run over time – one lane per agent, so it's clear who was busy when and where work was handed over.
- 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 Handoff – A task passed from agent to agent like a relay – at every handoff what went along to the next one, and what got lost on the way
After the run: the trace
A trace waterfall puts every LLM call, tool call and sub-agent on one timeline with duration and cost. It is the view for questions like "why did this take four minutes?" – the long bar is the answer.
- 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 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
Keep it calm
- Fixed row heights, so a live list doesn't jump as states change
- Plain-language labels first, raw data folded away
- One moving thing at a time – the current step, not the whole screen
- Status changes announced to screen readers, motion off with reduced motion
Questions
Should I show the model's reasoning?
Show what the agent is doing, not every token it thinks. A short label per step, with the full reasoning folded away for those who want it, keeps the interface readable.
How do I get step and status data from my agent framework?
LangGraph, the OpenAI Agents SDK, CrewAI and the Vercel AI SDK all emit events for steps, tool calls and sub-agents. Map each event to an id, a label, a status and start and end times – that is what these components take as props.
Which of these components are free?
Tool Call Card and Thinking Loader are free and MIT-licensed. Agent Tree, Agent Lanes, Agent Plan and Trace Waterfall are part of affectUI Pro.
Updated 2026-10-29