Plan

Import Plan from the base UI package:

import { Plan, TaskItem } from "smithers-orchestrator/ui";

<Plan
  streaming
  steps={[
    { id: "inspect", label: "Inspect files", status: "done" },
    {
      id: "implement",
      label: "Implement changes",
      status: "active",
      detail: <TaskItem label="Update Plan.tsx" status="running" />,
    },
  ]}
/>

The header shows done/total done, counting only steps whose status is done. The whole plan starts open by default; both the plan and each available detail use native disclosure buttons, with closed bodies unmounted.

Props

Prop	Type	Default	Description
`title`	`string`	`"Plan"`	Header title.
`steps`	`readonly PlanStep[]`	required	Ordered steps with `id`, plain-string `label`, `status`, optional `detail`, and optional `defaultOpen`.
`streaming`	`boolean`	`false`	Shimmers the title while upstream work streams.
`open`, `defaultOpen`, `onOpenChange`	controlled disclosure trio	open	Controls the whole-plan disclosure.
`openStepIds`, `onOpenStepIdsChange`	`readonly string[]`, callback	uncontrolled	Controls every step-detail disclosure.

PlanStepStatus is pending | active | done | failed | skipped. planStepStatus maps those values to the shared status vocabulary used by the rest of the component library. Source: packages/ui/src/agentic/Plan.tsx Tests: packages/ui/tests/plan.test.tsx

ChainOfThought

TaskItem

Overview

Core API

Runtime

Types & errors

Gateway RPC

Props

​Props

Props