> ## Documentation Index
> Fetch the complete documentation index at: https://smithers.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Plan

> Display ordered agent work with shared statuses, progress, and collapsible details.

Import `Plan` from the base UI package:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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`