TaskRunner
task-runnerSummarizes agent task status, plan steps, completion progress, tags, and elapsed time.
Usage
Running
status=running Head logo pulse; progress Explicit control of progress bar.
- Allocate microVM180ms
- Restore snapshot820ms
- Boot runtime · Node 261082ms
- Execute main.js…
- Reclaim sandbox
<TaskRunner
title="Sandbox"
tag="node26"
status="running"
steps={[
{ title: "Allocate microVM", status: "done", meta: "180ms" },
{ title: "Restore snapshot", status: "done", meta: "820ms" },
{ title: "Boot runtime · Node 26", status: "done", meta: "1082ms" },
{ title: "Execute main.js", status: "running", meta: "…" },
{ title: "Reclaim sandbox", status: "pending" },
]}
progress={58}
elapsed="3.12s"
footerStatus="Executing…"
/>Success
status=success; when progress is omitted, the step ratio is automatically derived as 100% by done.
- Install deps4.2s
- Typecheck8.1s
- Bundle12.6s
<TaskRunner
title="Build"
tag="ci"
status="success"
steps={[
{ title: "Install deps", status: "done", meta: "4.2s" },
{ title: "Typecheck", status: "done", meta: "8.1s" },
{ title: "Bundle", status: "done", meta: "12.6s" },
]}
elapsed="24.9s"
footerStatus="Done"
/>Failed
status=error red logo; use detail to indicate the reason for failed steps.
- Build image31s
- Push registryregistry Timeout—
- Rolling update
<TaskRunner
title="Deploy"
status="error"
steps={[
{ title: "Build image", status: "done", meta: "31s" },
{ title: "Push registry", status: "error", detail: "registry timeout", meta: "—" },
{ title: "Rolling update", status: "pending" },
]}
elapsed="46s"
footerStatus="Failed"
/>No bottom bar
Bottom bar is not rendered when elapsed/footerStatus/footerExtra is omitted.
- Scan files
- Apply rules
<TaskRunner
title="Lint"
status="running"
steps={[
{ title: "Scan files", status: "done" },
{ title: "Apply rules", status: "running" },
]}
/>When to Use
Use it to present sequential task execution—such as sandbox startup or a deployment pipeline—with overall status, progress, per-step timing, active-step highlighting, and an elapsed-time footer. Unlike AgentPlan, TaskRunner adds execution status and timing, but the consumer remains responsible for advancing state.
Import
import { TaskRunner, resolveProgress, statusMeta } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| steps* | AgentTask[] | — | Step list using AgentTask; use meta for per-step timing |
| status | "idle" | "running" | "success" | "error" | "idle" | Overall running status: driver head logo color + progress bar tone |
| progress | number | — | Top progress 0-100; if omitted, the steps completion (done) ratio will be automatically derived |
| className | string | — | Container additional class |
Slots
| Slot | Type | Description |
|---|---|---|
| title* | ReactNode | Card header title (such as "Sandbox") |
| tag | ReactNode | Tag next to the title (such as "node26"), rendered as a light background Tag |
| statusLabel | ReactNode | Head logo text overlay; when omitted, press status derivation (Idle/Running/Done/Failed) |
| elapsed | ReactNode | The accumulated time on the left side of the bottom (such as "3.12s") |
| footerStatus | ReactNode | Bottom right status text; replaced by footerExtra when it exists |
| headerExtra | ReactNode | Add to the right side of the head (buttons/menus, etc.) |
| footerExtra | ReactNode | Replace the bottom right content |
AgentTask step item status: "done" (completed, metadata can show elapsed time) / "running" (highlighted) / "pending" (hollow ring) / "error".
Usage Guidelines
- Pure display component: does not come with timer/step advancement. Run the driver (setInterval advances status, accumulate elapsed) on the consumer side, and feed in the derived steps/status/elapsed.
- When
progressis omitted, it is automatically derived according to the proportion of done in steps; if you want smooth non-intact step progress (such as 58%), you must explicitly passprogress. footerExtrawill overwritefooterStatus, do not expect both to be displayed at the same time.resolveProgresscounts completed steps; error, running, and pending steps do not contribute to the derived percentage.
Related
ThinkingBlock · ToolCall · AgentPlan · Dossier · Artifact · ConfirmCard