End of Run Summary React component
The report an AI agent leaves when it finishes: how it went, what it cost and which bot spent it, how it compares to last time, and what still needs you.
About the End of Run Summary component
End of Run Summary is what an agent should leave behind when it finishes. A plain verdict comes first, then what the run cost, which bot spent it and how it compares with the last run.
Notes are split into what changed, what needs a look and what was skipped, so nobody has to read a log to find out what's left. A quick rating tells you which runs were worth it.
When to use it
Use it at the end of any long agent run, in coding tools, automations and report builders.
Be honest in the verdict. A summary that always says everything went well soon stops being read.
Installation
Add the End of Run Summary component to your project with the shadcn CLI. It lands in components/end-of-run-summary.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/end-of-run-summaryProps
<EndOfRunSummary /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Move invoices to the new billing API" |
| outcome | "success" | "partial" | "failed" | "partial" |
| verdict One line saying how it ended. | string | "The work is done, with two things to check." |
| costs | { id: string; label: string; amount: number }[] | DEFAULT_COSTS |
| stats | { label: string; value: string; change?: string; better?: boolean }[] | DEFAULT_STATS |
| groups | { id: string; label: string; notes: RunNote[] }[] | DEFAULT_GROUPS |
| action The main action, e.g. opening the pull request. | { label: string; onClick?: () => void } | { label: "Open pull request" } |
| onRunAgain | () => void | — |
| onRate | (useful: boolean | null) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Move invoices to the new billing API"
- outcome"success" | "partial" | "failed"Default: "partial"
- verdict
One line saying how it ended.
stringDefault: "The work is done, with two things to check." - costs{ id: string; label: string; amount: number }[]Default: DEFAULT_COSTS
- stats{ label: string; value: string; change?: string; better?: boolean }[]Default: DEFAULT_STATS
- groups{ id: string; label: string; notes: RunNote[] }[]Default: DEFAULT_GROUPS
- action
The main action, e.g. opening the pull request.
{ label: string; onClick?: () => void }Default: { label: "Open pull request" } - onRunAgain() => void
- onRate(useful: boolean | null) => void
End of Run Summary FAQ
- What outcomes are there?
- success, partial and failed, each with its own label and colour.
- What does better mean on a stat?
- It sets whether the change shows as good or bad, since lower is better for some stats and worse for others.
- How does the cost bar work?
- It's drawn from your costs. Pick a pill to highlight that part and see its share.
- Does the card change height?
- No. All the note lists share one grid cell.
