Docs / Plans and tasks /

PlanTodo

Single to-do item in a plan: label, status indicator, and optional sub-items.

Preview

Deploy v2.4.0

1/4

Migrate user schema

Completed in 340 ms

Run test suite

47 / 120 tests passed

Unit tests

Integration tests

E2E tests

Deploy to staging

Notify on-call engineer

Variants

Pending

Migrate user schema

Active

Run test suite

47 / 120 tests passed

Done

Deploy to staging

Skipped

Notify on-call engineer

No incident declared

Props

Prop	Type	Description
steps*	PlanStep[]	Ordered list of plan steps. Each step may carry nested children.
title	string	Optional section title. Renders with a done/total counter on the right.
onToggle	(id: string, nextStatus: PlanStepStatus) => void	When provided, pending and done steps render as clickable toggles.

* required.

Usage

import { PlanTodo } from "@/components/agent/plan-todo";

const [steps, setSteps] = React.useState([
  { id: "1", label: "Migrate user schema", status: "done" },
  { id: "2", label: "Run test suite", status: "running" },
  { id: "3", label: "Deploy to staging", status: "pending" },
]);

<PlanTodo
  title="Deploy v2.4.0"
  steps={steps}
  onToggle={(id, next) =>
    setSteps(prev => prev.map(s => s.id === id ? { ...s, status: next } : s))
  }
/>