# Thinking steps

A visible list of agent work, with one shared state per step.

**Install:** `tokens.css` + `thinking-steps.css`.

**Parts:** `__dot`, `__label`, `__time`, optional `__detail` (streaming or synthesis text under the active step).

**States:** each step supports `idle`, `running`, `success`, `error`, and `cancelled`. **No-JS:** pre-rendered steps remain readable. **Accessibility:** use an accessible label and expose elapsed time as text; do not rely on the dot alone. **CSS variables:** none. **JavaScript:** optional host updates only. Escape detail text before insertion.