RunHistory

Code

import { RunHistory, type RunRecord } from "@fadymondy/nasaq/web";export function Runs({ runs }: { runs: RunRecord[] }) {  return <RunHistory runs={runs} onRetry={async (run) => { await rerun(run.id); }} />;}

Workflow · beta

Live examples and controls: RunHistory in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/run-history.json

Answers "what happened when it ran?". Runs are listed newest first with a status filter and search. Choosing one shows its steps on a shared time axis, each expandable to its input, output, logs and screenshots; the step that failed is called out and opened for you. A Trace tab lays the spans out as a waterfall with attributes, and a Raw tab shows the payload. RunDetail is exported on its own for a page that already knows which run to show.

When to useCopy Anchor Link

• The execution log of a workflow, job or automation.
• A detail page for one run reached from an alert or a list.

When not to useCopy Anchor Link

• Live request tracing across services with sampling and percentiles: use apm-panels.
• Editing the workflow itself: use workflow-canvas or step-editor.

ImportCopy Anchor Link

import { RunHistory, RunDetail } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { RunHistory, type RunRecord } from "@fadymondy/nasaq/web";

export function Runs({ runs }: { runs: RunRecord[] }) {
  return <RunHistory runs={runs} onRetry={async (run) => { await rerun(run.id); }} />;
}

AnatomyCopy Anchor Link

RunHistory                data-slot="run-history"
├─ list section           search, status ToggleGroup with counts, run rows (data-run-row)
└─ detail section
   └─ RunDetail           data-slot="run-detail"
      ├─ header           status, id, started, duration, trigger, Run again / Cancel
      ├─ Alert            failing step with a "Show the step" button
      └─ Tabs             Steps (data-step rows) | Trace (run-trace, run-span-detail) | Raw

APICopy Anchor Link

RunHistoryCopy Anchor Link

RunDetailCopy Anchor Link

run, onRetry, onCancel, defaultTab ("steps" | "trace" | "raw"), leading, labels.

RunRecordCopy Anchor Link

{ id, name?, status, startedAt, durationMs?, trigger?, steps: RunStep[], spans?: RunSpan[], payload?, error? }. RunStep has startedAtMs?, durationMs?, depth? (for nested steps), input?, output?, error?, logs?, screenshots?, attempt?. RunSpan has id, parentId?, name, service?, startMs, durationMs, error?, attributes?.

Statuses are the workflow ones: idle, running, success, error, waiting, skipped.

ExamplesCopy Anchor Link

Start on the trace of one run:

<RunDetail run={run} defaultTab="trace" />

AccessibilityCopy Anchor Link

Status is an icon plus a word. Step rows are buttons with aria-expanded. Span bars carry a text alternative with the duration. The span detail is a polite live region. Screenshots open in a dialog with their alt text.

RTL & i18nCopy Anchor Link

• The layout mirrors: bars grow from the start edge, the back arrow flips, nesting indents on the start side.
• Ids, span names, attributes, durations and code stay left-to-right.
• English and Arabic strings ship; pass labels to change any.

Styling & tokensCopy Anchor Link

• Uses --nq-danger-soft, --nq-selected, --nq-hover and border tokens. Extend with className; never pass raw hex.

Do / Don'tCopy Anchor Link

• Do record startedAtMs on steps so the bars show real overlap.
• Do keep screenshots small or served by URL.
• Don't put secrets in input, output or payload; they are displayed.

RelatedCopy Anchor Link

• workflow-canvas
• cron-builder
• apm-panels

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-workflow-run-history--docs