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

# ChainOfThought

> Render an ordered list of model reasoning steps with accessible statuses.

`ChainOfThought` gives reasoning steps a compact, ordered visual treatment.
Step status is never color-only; each dot has matching screen-reader text.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { ChainOfThought } from "smithers-orchestrator/ui";

<ChainOfThought
  streaming
  steps={[
    { id: "inspect", label: "Inspect the parser", status: "done" },
    { id: "patch", label: "Apply the fix", status: "active", detail: "Editing parser.ts" },
    { id: "test", label: "Run tests", status: "pending" },
  ]}
/>
```

## Step shape

| Field    | Type                        | Purpose                                                              |
| -------- | --------------------------- | -------------------------------------------------------------------- |
| `id`     | `string`                    | Stable React key.                                                    |
| `label`  | `ReactNode`                 | Visible step label.                                                  |
| `status` | `pending \| active \| done` | Maps to shared `pending`, `running`, or `complete` status semantics. |
| `detail` | `ReactNode`                 | Optional detail shown while the whole block is open.                 |

The whole block uses the same controlled disclosure and streaming behavior as
`Reasoning`.