Reasoning trail
The agent's plan, notes, sources or edits, under a header it can fold away.
A reasoning trail is the structured record the agent leaves after it thinks: a plan it works
through, the notes it took, the sources it read, or the edits it made. Pick what it shows with
view. The header counts the seconds and shimmers while the run is live, folds the trail away, and
settles on "Reasoned for Ns" once it finishes.
Usage
<!-- include core.css + reasoning-trail.css -->
<div class="rtr panel">
<button class="rtr-h" aria-expanded="true">
<span class="think on rtr-mark"><i></i><i></i><i></i><i></i></span>
<span class="rtr-title shim">Reasoning</span>
<span class="rtr-time num muted">0s</span>
<svg class="i xs rtr-chev"><use href="#i-chev-d"/></svg>
</button>
<div class="fold rtr-fold"><div><div class="rtr-body"></div></div></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
running | boolean | Shimmers the title and counts the seconds while true. |
seconds | number | Seconds to show. Leave it out to let the trail count while it runs. |
title | string | Header text. Defaults to "Reasoning" while running and "Reasoned for Ns" after. |
plan | PlanStep[] | The plan. Each step has a label, an optional detail, and a state of done, now or next. |
notes | string[] | The agent's notes, one per line. |
sources | Source[] | The files and links it read. Each has a label, an optional kind, and an optional tip. |
edits | Edit[] | The changed files. Each has a file, an optional detail, and removed and added lines. |
view | plan | notes | sources | edits | Which part to show. Leave it out to start on the first one there is. |
open | boolean | Whether the trail is open. Leave it out to let the header toggle it. |
bare | boolean | Sits flat in a chat thread (the default). Set false to give it a card of its own. |
onViewChange / viewChange | callback | Fires when the shown view changes. |
onOpenChange / openChange | callback | Fires when the trail opens or folds. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). In
Blueprint the header, chips and edit blocks are squared off with hairline edges; in Soft they are
rounded. The timeline rail, the pulse on the current step, and the shimmer on the title all take
their colors from the tokens; added and removed lines use the add and remove colors.
Thinking States
Ten animated indicators, each a small mark beside a status line that steps through what an agent is doing, with an optional elapsed-seconds counter.
Agent phases
One line for which phase an agent is in, from thinking to done, that stops to ask, says when it is slow, and folds to how long it took.