Run recovery
When a run fails partway, shows what finished, what broke and why, and lets you retry from that step, skip it, or change the input.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/run-recovery-inline.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/run-recovery-inline.json
Usage & API
Example
import { RunRecovery } from "@/components/ai/run-recovery-inline"
<RunRecovery
title="…"
state={state}
steps={[]}
onRetry={() => {}}
onCancelQueue={() => {}}
onRetryWith={() => {}}
onSkip={() => {}}
onStop={() => {}}
/>Props RunRecovery
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
state | RunState | Required |
steps | RunStep[] | Required |
failure | StepFailure | null | Optional |
input | InputField[]The failed step's input, editable before a retry. | Optional |
waitLeft | numberSeconds the service asked us to wait. 0 means go ahead. | Optional |
waitTotal | number | Optional |
queued | booleanA retry is queued for when the wait ends. | Optional |
elapsed | string | Optional |
onRetry | (now: boolean) => void | Required |
onCancelQueue | () => void | Required |
onRetryWith | (input: InputField[]) => void | Required |
onSkip | () => void | Required |
onStop | () => void | Required |
onResume | () => void | Optional |
onRunAgain | () => void | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The card titles the run and badges the state. Done steps show a check and can expand their detail. The running step shows a progress bar. A skipped step is struck through. The failed step prints the summary, the explanation, and a Technical detail disclosure with the raw text in a scroller. Retry this step is the primary button. Edit input and retry opens a form of the keys you passed, with Cancel and Retry with these, the latter disabled until a value changed and every field is valid. Skip and continue and Stop sit beside them. A wait from the service shows an hourglass, the seconds left, and, if a retry is queued, Cancel. Once the person stops the run, Resume appears. Once it finishes, Run again appears.
Example
import { RunResume } from "@/components/ai/run-recovery-resume"
<RunResume
name="…"
runId="…"
meta="…"
state={state}
steps={[]}
selected="…"
onSelect={() => {}}
edits={edits}
onEdit={() => {}}
onResume={() => {}}
spent="…"
/>Props RunResume
| Prop | Type & description | Required |
|---|---|---|
name | string | Required |
runId | string | Required |
meta | string | Required |
state | RunPageState | Required |
steps | ResumeStep[] | Required |
selected | string | Required |
onSelect | (id: string) => void | Required |
edits | Record<string, Record<string, InputValue>>Input changes waiting for the next resume, by step id. | Required |
onEdit | (stepId: string, input: Record<string, InputValue> | null) => void | Required |
onResume | (from: number) => voidResume after step `from` (index), or -1 for the start. | Required |
resumedFrom | number | nullIndex the current or last resume started from. | Optional |
spent | string | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The page header is a breadcrumb, Runs, the run name, the run id, and a chip: Failed at step n, Resuming, or Completed. Meta and the amount spent sit on the right. Resume from… opens a menu of checkpoints. Steps that will run again are marked, and the last successful checkpoint is called out. Selecting a step opens Input, Output or the error. A step with no error says so. The error tab can copy the message. Editing replaces that step's input, and the resume action tells you which index to start from. While the run is going, the menu is disabled and the chip names the current step.
Choosing a layout
Use the inline card when the person is still in the conversation and the failure is one step with a short explanation. Use the resume page when the run has enough steps that picking a checkpoint, reading the error and editing the input need a full page, with the other steps still visible.
Editing a tool call before the first attempt is edit before run. A decision that has not been answered yet is the decision inbox. Recovery is for a run that already started and did not finish. A thread of comments on a finished run is the agent thread, which does not offer skip or retry-from-here.
Does Skip and continue delete the failed step's work?
Skip marks that step skipped and asks you to carry on. The card does not roll back earlier steps. Their results stay listed. Stop is the control that halts the run, and the preview's note says what had already been written.
Can a retry change the input, or only repeat it?
Both. Retry this step repeats the step. Edit input and retry, on the card, and the editor on the resume page, send the replacement values. Numbers have to fall inside min and max, and an empty text field is rejected.