Thinking
The live trace an agent writes as it works, each step turning green as it finishes, then folded away into a summary.
A thinking trace is the reasoning log an agent writes as it works. Each step arrives on a line that spins while it runs and turns into a green check once it finishes, with what it found written under it and how long it took at its right. The header counts seconds while it runs; once the last step lands it becomes a summary of the work and the trace folds itself away.
Usage
<!-- include core.css + thinking.css -->
<div class="tk" data-open="1">
<button class="tk-h" aria-expanded="true">
<span class="tk-mark"><span class="think on"><i></i><i></i><i></i><i></i></span></span>
<span class="tk-title shim">Checking the pricing page</span>
<span class="tk-time num">0s</span>
<svg class="i xs tk-chev"><use href="#i-chev-d"/></svg>
</button>
<div class="fold tk-fold"><div><ol class="tk-list" aria-live="polite"></ol></div></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
steps | ThinkingStep[] | The steps the agent has taken so far. Each has a label, a state of running, retry or done, an optional result and time. |
running | boolean | Spins, counts seconds and keeps the trace open while true. |
seconds | number | Seconds to show. Leave it out to let it count while running. |
title | string | The header while it runs, like "Checking the pricing page". |
summary | string | The header once it is done. Defaults to the number of steps. |
collapseWhenDone | boolean | Folds the trace away a moment after it finishes. |
open / defaultOpen | boolean | Whether the trace is open. Leave open out to let the header toggle it. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
running step turns in the accent with a soft halo, finished steps and the rail between them turn
green, and a slow step waits in amber. In Blueprint the marks are squared off and the result writes
in with a plain fade instead of a blur.