ThoughtChain

• The steps come from the system, not the reader, and they run in order.
• Each step has a short summary and, often, detail the reader opens only when they want it.
• The chain fills in while the answer is being produced, so steps change from loading to done in front of the reader.

Use something else when

• The reader moves through the steps themselves, like a checkout or a setup wizard. That is Steps.
• The entries are events in time with no cause between them, like an order history. That is Timeline.
• The content is a set of independent sections to open and close. That is Collapse.
• There is one tool call to show. Use ThoughtChain.Item on its own instead of a chain of one.

• Give every step a stable key. When the chain streams in, you replace the items array on every update. A step with no key is matched by its position, so after a step is inserted above it the open states no longer match their steps, and expandedKeys has no way to name it.
• Keep the chain short. Group a run of small calls into one step with the detail in content, so the reader scans five steps, not fifty.
• Leave the default step numbers on when the order matters, and pass your own icon per step when the kind of tool matters more.

• A custom icon loses to status. While a step has a status, the status glyph is drawn and your icon is ignored. Clear status to bring your icon back.
• The glyph carries no words, so put the outcome in the title too: “Search failed”, “Stopped by you”.
• Use blink on the one step that is running, together with loading. The shimmer runs until you remove it, so clear it when the step ends.
• When the reader stops a run, mark the step that was running as abort and leave the finished ones as they are.

• A step that is not collapsible always shows its content. Make long output collapsible, or the chain pushes the answer below the fold.
• To open the running step and close the ones that finished, control it: hold expandedKeys in state and update it from onExpand and from your stream.
• Closing a step unmounts its content. A form, a scroll position or a playing video inside it resets on the next open. Set destroyOnHidden: false on that step to keep it mounted.

• line={false} does not hide the line. In this version it still draws a solid rule. The line hangs off each step's icon, so to drop it, set icon: false on the steps.
• dotted draws a solid line too, and fails the type check. Use dashed for a lighter rule.

• variant picks the surface. solid sits on a light fill, outlined adds a border on the container color, and text has neither, for a row of items inside a bubble that already has a fill.
• It has no content and does not collapse. When the reader needs the detail, use a chain with one collapsible step.

• The chain's item keys style every step at once. To pick out one step, style the nodes you pass as its title or content.
• The item fills, the error tint and the shimmer colors are ThoughtChain tokens. Set them under components.ThoughtChain rather than overriding them with classes.