Error recovery
A failed step with retry, skip or hand over to a person.
A run that hit an error, with the steps around it and a choice of how the agent should carry on.
Each step carries a state — done, fail, run, wait, skip or hand — that picks its
glyph, and an optional note under it that crossfades when it changes. The options are the ways
the agent can continue; pick one and press Continue, and the choices fold away.
Usage
<!-- include core.css + error-recovery.css -->
<div class="erx panel">
<div class="erx-h"><span class="erx-t">Sync the pipeline to Sheets</span><span class="erx-s muted">Stopped at step 2</span></div>
<div class="erx-list"><!-- one .erx-row per step --></div>
<div class="erx-box"><div><div class="erx-in">
<div class="erx-q">How should the agent continue?</div>
<div class="erx-opts" role="radiogroup">
<button class="erx-o on" data-o="retry" role="radio" aria-checked="true"><i></i><span>Ask for edit access, then retry</span></button>
<!-- more .erx-o options -->
</div>
<button class="pill primary sm erx-go">Continue</button>
</div></div></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | What the agent was doing, like "Sync the pipeline to Sheets". |
status | string | Where the run stands, like "Stopped at step 2". Crossfades when it changes. |
steps | RecoveryStep[] | The steps around the failure. Each has a label, a state and an optional note. |
step.state | done | fail | run | wait | skip | hand | Picks the glyph: a check, a red alert, a spinner, a quiet dot, a struck-through skip or a hand-off. |
step.note | string | The quiet line under the step, like "Done in 8s" or the error. Crossfades when it changes. |
question | string | The question above the choices. Defaults to "How should the agent continue?". |
options | RecoveryOption[] | The ways the agent can carry on, each a { value, label }. |
value / defaultValue | string | The chosen option, controlled or uncontrolled. Defaults to the first option. |
onValueChange | (value) => void | Called when a different choice is picked. |
onContinue | (value) => void | Called with the chosen option when Continue is pressed. |
continueLabel | string | The label on the confirm button. Defaults to "Continue". |
open / defaultOpen | boolean | Whether the choices show. Leave it out and they fold away once Continue is pressed. |
onOpenChange | (open) => void | Called when the choices fold open or closed. |
bare | boolean | Sits flat in a chat thread (the default). Set false to give it a card of its own. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The step
glyphs take their colour from the theme tokens — a green check, a red alert, a plum hand-off — and
the rail between steps, the selected choice and the Continue pill all draw from the same tokens, so
the whole block reads against either background; in Soft the choices and the pill are rounder.