Run history

The screen where a team looks back at what their AI agent did. A table of runs (status, agent, trigger, when, how long, tokens and cost) with search, filters and a date range, and a page for any one run: its trace as a waterfall of model and tool calls, retries and the failing step called out, each call's prompt, arguments and result, a token and cost breakdown, the final output, and Re-run, Copy ID and Share link.

Runs that are still going update in place. Their duration counts up in a column that never changes width, the arc in the status turns into a tick that draws on when they finish, and the row tints for a moment. New runs don't push rows down under the pointer: they wait behind Show 2 new runs.

<RunHistory  runs={page.runs}               // one page, filtered on the server, newest first  total={page.total}  page={pageNumber}  onPageChange={setPageNumber}  filters={filters}              // { query, status, agent, trigger, range, from?, to? }  onFiltersChange={setFilters}   // search arrives 250ms after typing stops  agents={["Menu planner", "Guest replies", "Shopping list"]}  newRuns={held.length}  onShowNewRuns={showHeld}  loading={isFirstLoad}  refreshing={isFetching}  error={listError}  onRetry={refetch}  selectedId={params.run ?? null}  onSelect={(id) => router.push(id ? `/runs/${id}` : "/runs")}  detail={trace}                 // { id, steps, output?, cancelNote? }  detailLoading={traceLoading}  detailError={traceError}  onRetryDetail={refetchTrace}  onRerun={(run) => api.post(`/runs/${run.id}/rerun`).then((r) => r.id)}  onShare={(run) => api.post(`/runs/${run.id}/share`).then((r) => r.url)}  timeZone={viewer.timeZone}  emptyAction={<Button onClick={startFirstRun}>Run Menu planner</Button>}/>

When to use it

• The "Runs" or "Activity" page of a product with an agent in it, for the people who need to know what it did, why it failed, and what it cost.
• Support and ops: find the run a customer is asking about by ID or by the words in its error, open it, and share a link to it.
• As the place a failed-run alert links to: pass selectedId and the page opens on the run, with the failing step open.

When not to

• Watching one run as it works, in the product itself: use Agent task or Tool steps beside the conversation. This screen is for looking back.
• Aggregate analytics: cost per week, failure rates, latency percentiles. That's a dashboard; link to it from here.
• Raw logs or OpenTelemetry spans with dozens of nested levels. The trace here is one level of steps, in order, which is what an agent run is.

States

Props

Every callback can return a promise; the block shows busy until it settles and the rejection's message if it fails. It never fetches: filters, pages and traces come in as props.

Customizing

• Columns are in RunRow and the <thead> in run-history.tsx. Widths are on the header cells, because the table is fixed-layout: that's what keeps a counting duration from nudging anything.
• Step colors: --rh-llm and --rh-tool on .root. A model call is accent mixed toward danger, so green and red keep meaning done and failed.
• Fold length: FIRST_LINES and FIRST_CHARS in detail.tsx.
• Trigger wording: triggeredBy is shown as is ("Mondays at 07:00", "Stripe · checkout completed"). Keep it short; it wraps if it isn't.
• Inset: every panel is padded --ui-pad-card (16 narrow, 24 from 560px), read once as --rh-inset.
• Widths: the Trigger and Tokens columns move under the title below 880px, and every run becomes a card below 600px. The trace puts each bar under its name below 560px. The filter selects sit two to a line, and one to a line below 300px. All container queries, so it fits a narrow pane.

Accessibility

• A real <table> named by the title. Each run's title is a button whose hit area covers the row, read as "Draft the menu for Saturday's harvest supper, Running". As cards, the header row is visually hidden but read, and every value is still in the card.
• Opening a run moves focus to its title; Runs goes back and returns focus to the row it came from.
• Status is a glyph and a word, never color alone. Each step reads "Step 5 of 5, Failed: send_invites, took 2.3s" and is a disclosure button with aria-expanded; folded content is inert.
• The failure alert's Show step opens the step, scrolls it into view (no smooth scroll with reduced motion) and focuses it.
• A polite status region announces what lands: "Copied run_W7kQ2mPx.", "Link copied.", "Started run_…", "3 new runs added at the top."
• / focuses search. Escape clears it.
• Reduced motion: the arc breathes instead of turning, bars land at their length, steps open without a slide.

Before / after

Before: a log table with a JSON blob per row, a status string, and no way to see which call failed without reading all of it.

<table>  {runs.map((r) => (    <tr key={r.id}><td>{r.id}</td><td>{r.status}</td><td><pre>{JSON.stringify(r.trace)}</pre></td></tr>  ))}</table>

After: what each run was asked and how it ended, at a glance; one click to its trace, with the failing step open and its error in words; long outputs folded; and the cost of every call.

<RunHistory  runs={runs}  total={total}  filters={filters}  onFiltersChange={setFilters}  selectedId={runId}  onSelect={openRun}  detail={trace}  onRerun={rerun}  onShare={share}/>