Agent Task Progress Block React component
A live view of an AI agent working through a task: goal, status, gradient progress bar, elapsed time and tokens, a step timeline with tool chips and streaming logs, an automatic retry after a failure, a step that waits for your approval, pause and stop controls, and downloadable files at the end.
About the Agent Task Progress Block component
Agent Task Progress Block shows an AI agent doing a multi-step job in real time. The goal sits at the top with a status pill, a progress bar, the time spent and the tokens used, and below it a timeline lists every step with the tool it uses.
The running step opens a small log that fills in as the agent works. When a step fails, the error stays visible and the agent retries on its own; when a step is risky, the run pauses and asks you to approve or skip it. At the end the files the agent produced can be downloaded.
When to use it
Use it for research agents, coding agents, data pipelines, support automation or any background job people want to watch and control.
Put an approval on steps that act outside your app, such as sending messages, spending money or deleting data.
Installation
Add the Agent Task Progress Block component to your project with the shadcn CLI. It lands in components/agent-task-progress.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/agent-task-progressOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AgentTaskProgress /> accepts 10 props, all optional.
| Prop | Type | Default |
|---|---|---|
| goal | string | "Compare competitor pricing and draft a summary for the team" |
| agentName | string | "Research agent" |
| steps | AgentStep[] | DEFAULT_STEPS |
| artifacts | { name: string; content: string; type?: string }[] | DEFAULT_ARTIFACTS |
| autoStart Start running on mount. | boolean | true |
| speed Playback speed multiplier for the simulation. | number | 1 |
| onApprove | (stepId: string) => void | — |
| onStop | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- goalstringDefault: "Compare competitor pricing and draft a summary for the team"
- agentNamestringDefault: "Research agent"
- stepsAgentStep[]Default: DEFAULT_STEPS
- artifacts{ name: string; content: string; type?: string }[]Default: DEFAULT_ARTIFACTS
- autoStart
Start running on mount.
booleanDefault: true - speed
Playback speed multiplier for the simulation.
numberDefault: 1 - onApprove(stepId: string) => void
- onStop() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Agent Task Progress Block FAQ
- Is the run real?
- The default run is simulated from each step's duration and logs. In production, pass the steps your agent planned and update them from its events, or swap the simulation for your own state.
- How do failures and retries look?
- Give a step fail: { at, error }. The first attempt stops at that time with a red error line, the step shows 'Retrying, attempt 2 of 3', and the logs start again.
- How does approval work?
- A step with an approval question pauses the whole run before it starts. Approve runs it and calls onApprove; Skip step marks it skipped and moves on. Focus moves to Approve so keyboard users can answer.
- Can people stop or pause the agent?
- Yes. Pause freezes the timer and the current step, Resume continues, Stop cancels the running step and calls onStop, and Run again starts over.
- Is it accessible?
- The status pill is a status region, the progress bar has a value, steps are an ordered list with their state in text, the running log is aria-live, finished steps toggle with aria-expanded and artifacts are labelled download buttons.
