React Agent Plan / Task List

Copy Page

An opaque “the agent is working” becomes a legible “here is the plan, here is where it is, here is what's left.” The plan is the agent's own to-do list, updating live as it executes each step.

Installation

Props

One active task, and an honest failure

A task is pending, active, done, failed, or skipped, and the list is designed so a glance answers "where is it": exactly one task spins as active (with a working tag in accent-bold), completed tasks settle into muted with a one-line note of what they found, and the rest wait. The header count tracks progress.

The failed state matters most. When a step fails, the plan says so and stops — it does not grey the remaining tasks as though they'll still run, because an agent that hit a wall on step two is not going to quietly finish steps three and four, and pretending otherwise is how a user waits on a run that died minutes ago. Notes carry the evidence (3 violations, trend rising), which turns the plan into a skimmable summary once the run is done.