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.
Agent phases show which phase the agent is in, in one line: its glyph, its name shimmering while the phase lasts, and the seconds so far, with a track of six short segments under it that fills phase by phase. When the agent needs you, is slow or fails, a line under the track says so with what to do; once it is done the line reads how long it took and opens to the phases it ran through.
Usage
<!-- include core.css + agent-phases.css -->
<div class="aph" data-p="read">
<button class="aph-h" aria-expanded="false" aria-disabled="true">
<span class="aph-g"></span><span class="aph-l shim">Reading 3 articles</span>
<span class="aph-t num">7s</span><svg class="i xs aph-chev"><use href="#i-chev-d"/></svg>
</button>
<div class="aph-tr" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="aph-x"></div>
<div class="fold shut aph-fold"><div><ol class="aph-list"></ol></div></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
phase | thinking | searching | reading | waiting | writing | done | Which phase the agent is in. |
label | string | What the line says. Defaults to the phase's name; once done, "Thought for 12s". |
seconds | number | Seconds so far. Counts by itself while left out, and stops while waiting for you. |
error | object | A step that failed: the line turns red and says so, with Retry. Has text, optional detail, and onRetry. |
slow | object | Shown while the phase takes long, with Stop. Has text and an optional onStop. |
ask | object | What the agent waits for in the waiting phase. Has text, optional approveLabel, onApprove and optional onDecline. |
took | Record<phase, number> | Seconds each phase took, for the list a finished line opens to. |
open / defaultOpen | boolean | Whether the finished line 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 glyph
and the current segment take the phase's colour — the accent while it works, amber while it waits,
red on an error and green when done. In Blueprint the segments are squared off and the shimmer rests
on a solid colour.