React Reasoning Panel
A model's chain of thought is valuable for trust and debugging but shouldn't compete with the answer for attention. This folds it away behind a one-line summary that opens on demand — shimmering while the model is still thinking, settling into “Thought for Ns” once it's done.
Your process is precise but off-centre: a Cp of 1.6 with a Cpk of 1.1 means the spread is fine and the mean has drifted toward one spec limit. Correct the centering offset — a variance-reduction project would be aimed at the wrong problem.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| content | string | Reasoning text; newlines become separate lines |
| active | boolean | Still thinking — header shimmers, panel opens |
| durationMs | number | When settled, shown as “Thought for Ns” |
| defaultOpen | boolean | Initial open state |
Open while thinking, folded when done
The panel follows the run: while active it opens and the header carries the accent-bold shimmer, so a reader can watch the reasoning arrive; the moment thinking finishes it collapses to Thought for 6s and gets out of the answer's way. That transition is automatic — until the reader takes control by toggling it, after which their choice sticks, because nothing is more irritating than a panel that keeps re-collapsing the thing you just opened.
The reasoning renders with a quiet left rule in muted text — visibly secondary to the answer, which is the point. Chain of thought is scaffolding; show it to anyone who wants to check the model's work, but never let it upstage the conclusion they actually came for.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.