AgentPlan
agent-planDisplays an ordered agent plan with pending, active, completed, and failed steps.
Usage
Basic usage
Data-driven task list, mixed status + running rows automatically highlighted.
Execution plan
- Read existing page.tsxConfirmed that only Button / ThemeToggler is used
- Check the reusable primitives in the library
- Replaced block by block with @hulianui/uiTypesetting → Heading/Text, Layout → Stack
- Gap filling component (Dot / AI kit)
- Screenshot to verify light and dark dual themes
tsx
<AgentPlan
tasks={[
{ title: "Read existing page.tsx", status: "done", detail: "Confirm that only Button / ThemeToggler" },
{ title: "Check the reusable primitives in the library", status: "done" },
{ title: "Replace block by block with @hulianui/ui", status: "running", detail: "Typesetting → Heading/Text" },
{ title: "Gap filling component", status: "pending" },
]}
/>Contains failed steps
error status displays a red cross, customize title.
Deployment process
- Build
- Push imageregistry Timeout
- Rolling release
tsx
<AgentPlan
title="Deployment Process"
tasks={[
{ title: "Build", status: "done" },
{ title: "Push Image", status: "error", detail: "registry Timeout" },
{ title: "Rolling Release", status: "pending" },
]}
/>Execution log (retain solid color)
strikeDone={false} Let the completed items not be strikethrough, and display the time consumption with meta.
Execution log
- Pull code120ms
- Run the test2.4s
- Generated products
tsx
<AgentPlan
title="Execution Log"
strikeDone={false}
tasks={[
{ title: "Pull code", status: "done", meta: "120ms" },
{ title: "Run Test", status: "done", meta: "2.4s" },
{ title: "Generated product", status: "running" },
]}
/>Embedded (bare)
bare Remove the outer border/background color for reuse in the card.
- Read existing page.tsxConfirmed that only Button / ThemeToggler is used
- Check the reusable primitives in the library
- Replaced block by block with @hulianui/uiTypesetting → Heading/Text, Layout → Stack
- Gap filling component (Dot / AI kit)
- Screenshot to verify light and dark dual themes
tsx
<AgentPlan bare title={null} tasks={tasks} />When to Use
Use it to show an agent's structured, multi-step plan, including each task's status, details, and optional timing metadata. Use ToolCall for one tool invocation and ThinkingBlock for free-form reasoning.
Import
ts
import { AgentPlan } from "@hulianui/ui"Props
AgentPlanProps:
| Name | Type | Default | Description |
|---|---|---|---|
| tasks * | AgentTask[] | — | Task list (data-driven) |
| bare | boolean | false | Remove the outer border, background, and padding, leaving only the list for inline composition such as TaskRunner |
| strikeDone | boolean | true | Strike through completed tasks for plan semantics; set to false for an execution log that keeps completed entries solid |
| className | string | — | Container class name |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Header title; defaults to "\u6267\u884c\u8ba1\u5212" (Execution Plan); pass null to hide it |
AgentTask:
| Name | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Task title |
| status | "pending" | "running" | "done" | "error" | "pending" | Task state: hollow ring for pending, spinner and highlighted row for running, check and optional strike-through for done, or X for error |
| detail | ReactNode | — | Muted supporting text below the title |
| meta | ReactNode | — | Muted, right-aligned trailing metadata such as 180ms or a small badge |
Usage Guidelines
tasksis a required data array. The component does not manage progress; update the array in the consumer and re-render as tasks advance.- When embedding the list in a component such as TaskRunner, use
bareto remove the outer chrome. For execution-log semantics, setstrikeDone={false}so completed entries remain solid.
Related
ThinkingBlock · ToolCall · Dossier · Artifact · ConfirmCard · ThreadList