Components · Legibility

Agent Task List

A spinner says trust me. A plan says check me. The task list shows the agent's intent before execution, keeps exactly one task active with a live sublabel, and leaves failures in place with the error attached, because the plan itself is the best recovery interface.

When to use

Multi-step agent runs where the user benefits from seeing the plan up front: bookings, refactors, research tasks, batch operations. Skip it for single-step actions; a plan of one item is ceremony.

Behavior

Statuses: pending, active, done, failed. One active task at a time with a live sublabel. Completed tasks dim rather than disappear so the run stays auditable. A failed step keeps its error inline and doesn't block later steps from rendering their eventual outcome.

Usage

tsx

import { AgentTaskList } from "@/components/agent-task-list";

<AgentTaskList
  label="Booking your trip"
  tasks={[
    { title: "Find flights SFO → JFK", status: "done" },
    { title: "Compare prices", status: "active", detail: "14 flights vs $400 cap" },
    { title: "Hold the best option", status: "pending" },
  ]}
/>

Install

shell

npx shadcn@latest add https://agent-pitstop.vercel.app/r/agent-task-list.json

Or copy the source from registry/agent-task-list. MIT licensed.

Booking your trip0/4

Find flights SFO → JFKChecking 3 providers…
Compare prices with your budget
Hold the best option
Draft itinerary email