Execution Detail View React component
A full record of one AI agent run: status and totals at the top, every step with its timing, and the input, output and log behind each one.
About the Execution Detail View component
Execution Detail View is the page you open when you need to know exactly what an agent did. The totals sit at the top, and each step shows when it ran and how long it took.
Pick any step, from the list or the chart, to read what went in, what came out and what it logged. A failed step shows in red, so the reason a run was slow or expensive is easy to find.
When to use it
Use it as the detail page for agent runs, workflow executions and pipeline jobs.
Pair it with a list of runs. This view answers what happened in one run, not how runs are going overall.
Installation
Add the Execution Detail View component to your project with the shadcn CLI. It lands in components/execution-detail-view.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/execution-detail-viewProps
<ExecutionDetailView /> accepts 8 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 | "Sort refund tickets" |
| runId Short id, e.g. "482". | string | "482" |
| bot | string | "Sift" |
| cost Dollars. | number | 0.38 |
| steps | ExecutionStep[] | DEFAULT_STEPS |
| onRerun | () => void | — |
| onShare | () => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Sort refund tickets"
- runId
Short id, e.g. "482".
stringDefault: "482" - botstringDefault: "Sift"
- cost
Dollars.
numberDefault: 0.38 - stepsExecutionStep[]Default: DEFAULT_STEPS
- onRerun() => void
- onShare() => void
Execution Detail View FAQ
- Does Run again start a run?
- No. onRerun tells you, and the chart shows a demo sweep.
- How does it work on a phone?
- The step list becomes back and next buttons, and the chart stays.
- Can I select a step from the chart?
- Yes. Clicking any bar selects that step.
- Does the height change between steps?
- No. Every step and tab shares one grid cell.
