Components / Blocks / JobRunCenter
Job Run Center.
ProBlockOperationsv0.2.0A run list with status filters beside an attempts inspector. Cancel requested stays distinct from canceled, progress comes only from the job, and retries confirm repeated side effects first.
Demo dataResponsive
Runs
RUN-5821 · Manual · Maya Chen
Import contacts from northline-contacts.csv
Started Oct 14, 10:02 · 1m 48s
Progress812 / 1,200 rows
Stopped after Validate email addresses. Work before that step is already saved.
Attempts (2)
- #2FailedRow 813: email column is empty1m 48s
- #1FailedRate limited by mail provider12s
Installation
Add the licensed registry once. Keep your license key in the project’s uncommitted environment.
components.json
{
"registries": {
"@elements-pro": {
"headers": {
"Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
},
"url": "https://pro.elements.micropreneur.dev/r/{name}.json"
}
}
}export ELEMENTS_PRO_LICENSE_KEY=mpro_...pnpm dlx shadcn@latest add @elements-pro/job-run-centerThe shadcn CLI writes the source into your project. Files added:
- components/elements-pro/job-run-center.tsxblock
- components/ui/badge.tsxui
- components/ui/button.tsxui
- components/ui/card.tsxui
Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| runs (required) | JobRun[] | — | Runs with status, progress, last step, attempts and an optional retry warning. |
| onRetry | (runId) => void | Promise<void> | — | Called after the retry is confirmed. |
| onCancel | (runId) => void | Promise<void> | — | Request cancellation of a queued or running job. |
| onOpenLogs | (runId, attemptId) => void | — | Open logs for an attempt. |
RunStatus
| Prop | Type | Default | Description |
|---|---|---|---|
| status (required) | 'queued' | 'running' | 'succeeded' | 'failed' | 'cancel_requested' | 'canceled' | — |
Accessibility
- Progress is a progressbar with the job's own counts as its values.
- The retry confirmation is an alert that explains side effects before anything runs.
- Statuses always pair an icon with a word.