Agent Task List

Shows the steps an agent is working through: the active task shimmers (using the reusable TextShimmer component) while it's being worked on, tasks complete one at a time in order, and the progress dots and count turn green once every task is done, before looping back to the first task.

pnpm dlx shadcn@latest add @ditherui/agent-task-list

Agent is Performing Task

0/4

Read project files
Plan implementation
Write component code
Run tests

Install

$ pnpm dlx shadcn@latest add @ditherui/agent-task-list

Props

PropTypeDefault

tasksAgentTask[]—

stepDurationnumber (ms)1800

holdDurationnumber (ms)2200

When to use the agent task list

Use the task list to show the steps an agent is working through. The active task shimmers and tasks complete one at a time in order.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

TSsum.ts
const sum = (a: number, b: number) => a + b console.info(sum(2, 3))
Code BlockSyntax-highlighted code with copy feedback and a tidy header.

TSformat-price.ts+1-1

export function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`
  return fmt.format(cents / 100)
}

Inline DiffInline additions and removals so users can review what an agent changed.

R
Refactor agent
Ready · 0.0s
Agent RunA step-by-step run timeline with tool calls and approval gates.