TaskRunner

task-runner

任务运行卡 · dogfood AgentPlan(bare)步骤列表 + Progress顶部进度 + Tag标签 + Dot状态徽标 · idle/running/success/error四态派生 + 每步耗时(meta)/running行高亮/pending空心环 + progress省略按完成比派生 + 累计耗时footer + headerExtra/footerExtra送掣 · 纯展示RSC(计时驱动留消费侧)

用法

运行中

status=running 头部徽标脉冲；progress 显式控制进度条。

Sandboxnode26

Running

Allocate microVM180ms
Restore snapshot820ms
Boot runtime · Node 261082ms
Execute main.js…
Reclaim sandbox

3.12sExecuting…

tsx

<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…"
/>

成功

status=success；省略 progress 时按 done 步骤比自动派生为 100%。

Buildci

Done

Install deps4.2s
Typecheck8.1s
Bundle12.6s

24.9sDone

tsx

<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"
/>

失败

status=error 红色徽标；失败步骤用 detail 写明原因。

Deploy

Failed

Build image31s
Push registryregistry 超时—
Rolling update

46sFailed

tsx

<TaskRunner
  title="Deploy"
  status="error"
  steps={[
    { title: "Build image", status: "done", meta: "31s" },
    { title: "Push registry", status: "error", detail: "registry 超时", meta: "—" },
    { title: "Rolling update", status: "pending" },
  ]}
  elapsed="46s"
  footerStatus="Failed"
/>

无底栏

省略 elapsed/footerStatus/footerExtra 时不渲染底栏。

Lint

Running

Scan files
Apply rules

tsx

<TaskRunner
  title="Lint"
  status="running"
  steps={[
    { title: "Scan files", status: "done" },
    { title: "Apply rules", status: "running" },
  ]}
/>

何时用

展示一组按序执行的任务步骤及整体运行状态（沙箱启动、部署流水线等），需要顶部进度条、每步耗时、running 高亮、累计耗时页脚时用。区别于 AgentPlan（纯计划/勾选清单），本组件多了运行态徽标 + 进度 + 计时框架。本组件是纯展示 RSC，计时/状态推进逻辑留在消费侧。

导入

import { TaskRunner, resolveProgress, statusMeta } from "@hulianui/ui"

Props

名称	类型	默认	说明
steps*	`AgentTask[]`	—	步骤清单（复用 AgentTask：title/status/detail/meta，耗时放 meta）
status	`"idle" \| "running" \| "success" \| "error"`	`"idle"`	整体运行状态：驱动头部徽标色 + 进度条 tone
progress	`number`	—	顶部进度 0-100；省略则按 steps 完成(done)比自动派生
className	`string`	—	容器附加类

Slots

插槽	类型	说明
title*	`ReactNode`	卡头标题（如 `"Sandbox"`）
tag	`ReactNode`	标题旁标签（如 `"node26"`），渲染为浅底 Tag
statusLabel	`ReactNode`	头部徽标文字覆盖；省略时按 status 派生（Idle/Running/Done/Failed）
elapsed	`ReactNode`	底部左侧累计耗时（如 `"3.12s"`）
footerStatus	`ReactNode`	底部右侧状态文字；footerExtra 存在时被其替换
headerExtra	`ReactNode`	头部右侧追加（按钮/菜单等）
footerExtra	`ReactNode`	替换底部右侧内容

AgentTask 步骤项 status："done"（已完成，meta 显耗时）/ "running"（高亮）/ "pending"（空心环）/ "error"。

禁忌 / 坑

纯展示组件：不自带计时器/步骤推进。运行驱动（setInterval 推进 status、累计 elapsed）放消费侧，把派生出的 steps/status/elapsed 喂进来。
progress 省略时按 steps 中 done 占比自动派生；想要平滑的非整步进度（如 58%）须显式传 progress。
footerExtra 会覆盖 footerStatus，二者不要指望同时显示。
暂无其它已知坑。

用法

运行中

status=running 头部徽标脉冲；progress 显式控制进度条。

Sandboxnode26

Running

Allocate microVM180ms
Restore snapshot820ms
Boot runtime · Node 261082ms
Execute main.js…
Reclaim sandbox

3.12sExecuting…

tsx

<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…"
/>

成功

status=success；省略 progress 时按 done 步骤比自动派生为 100%。

Buildci

Done

Install deps4.2s
Typecheck8.1s
Bundle12.6s

24.9sDone

tsx

<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"
/>

失败

status=error 红色徽标；失败步骤用 detail 写明原因。

Deploy

Failed

Build image31s
Push registryregistry 超时—
Rolling update

46sFailed

tsx

<TaskRunner
  title="Deploy"
  status="error"
  steps={[
    { title: "Build image", status: "done", meta: "31s" },
    { title: "Push registry", status: "error", detail: "registry 超时", meta: "—" },
    { title: "Rolling update", status: "pending" },
  ]}
  elapsed="46s"
  footerStatus="Failed"
/>

无底栏

省略 elapsed/footerStatus/footerExtra 时不渲染底栏。

Lint

Running

Scan files
Apply rules

tsx

<TaskRunner
  title="Lint"
  status="running"
  steps={[
    { title: "Scan files", status: "done" },
    { title: "Apply rules", status: "running" },
  ]}
/>

何时用

Props

名称	类型	默认	说明
steps*	`AgentTask[]`	—	步骤清单（复用 AgentTask：title/status/detail/meta，耗时放 meta）
status	`"idle" \| "running" \| "success" \| "error"`	`"idle"`	整体运行状态：驱动头部徽标色 + 进度条 tone
progress	`number`	—	顶部进度 0-100；省略则按 steps 完成(done)比自动派生
className	`string`	—	容器附加类

Slots

插槽	类型	说明
title*	`ReactNode`	卡头标题（如 `"Sandbox"`）
tag	`ReactNode`	标题旁标签（如 `"node26"`），渲染为浅底 Tag
statusLabel	`ReactNode`	头部徽标文字覆盖；省略时按 status 派生（Idle/Running/Done/Failed）
elapsed	`ReactNode`	底部左侧累计耗时（如 `"3.12s"`）
footerStatus	`ReactNode`	底部右侧状态文字；footerExtra 存在时被其替换
headerExtra	`ReactNode`	头部右侧追加（按钮/菜单等）
footerExtra	`ReactNode`	替换底部右侧内容

AgentTask 步骤项 status："done"（已完成，meta 显耗时）/ "running"（高亮）/ "pending"（空心环）/ "error"。

禁忌 / 坑

纯展示组件：不自带计时器/步骤推进。运行驱动（setInterval 推进 status、累计 elapsed）放消费侧，把派生出的 steps/status/elapsed 喂进来。

progress 省略时按 steps 中 done 占比自动派生；想要平滑的非整步进度（如 58%）须显式传 progress。

footerExtra 会覆盖 footerStatus，二者不要指望同时显示。

暂无其它已知坑。

TaskRunner

用法

运行中

成功

失败

无底栏

何时用

导入

Props

Slots

禁忌 / 坑

相关

TaskRunner

用法

运行中

成功

失败

无底栏

何时用

导入

Props

Slots

禁忌 / 坑

相关