Agent Tasks
The plan an agent is working from, as it works through it. Not a trace of what happened — a list of what it intends to do, which is what lets you see it heading somewhere wrong while there is still time to stop it.
src/components/ui/agent-tasks.tsxAbout
From the component's own source, where it was written.
The plan an agent is working from, as it works through it.
Not a trace of what happened — a list of what it *intends* to do, which is the difference that makes it useful while a run is live. A trace tells you where it went wrong afterwards; a plan lets you see it heading somewhere wrong and stop it.
**Exactly one task is in progress at a time, and that is enforced here.** An agent that reports three tasks running has lost track of its own plan, and rendering all three as active hides the bug. Later ones are demoted to pending, with the first kept as the live one.
Nesting is one level deep on purpose. A plan that needs a tree is a plan the agent will not finish, and the sub-steps that matter are the ones under the task in flight.
Install
npx astralyx-ui add agent-tasks
Usage
import { AgentTasks } from '@/components/ui/agent-tasks'
<AgentTasks tasks={plan} />Composer
Change the props and the source below follows.
Plan
2/5Read the ticket and classify it
Look up the customer and their plan
- get_customer
- get_invoice
Check the refund against policy
Requested £340; the per-run cap is £200.
- Read the refund policy
- Compare against the cap
Draft a reply
Issue the refund
Over the cap — a human has to approve it.
No props to configure.
<AgentTasks tasks={plan} />Examples
A plan mid-run
<AgentTasks tasks={plan} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
AgentTasks
The plan an agent is working from, as it works through it.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| tasks | AgentTask[] | required | { id, title, status, steps?, note? } where status is 'pending' | 'active' | 'done' | 'failed' | 'skipped'. |
| summary | (done: number, total: number) => ReactNode | — | Caption. Receives done and total counts. |
| emptyLabel | string | 'No plan yet.' | — |
| label | string | 'Plan' | — |
| statusLabels | Partial<Record<AgentTaskStatus, string>> | — | — |
Types
AgentTask
| Field | Type | Description |
|---|---|---|
| id | string | — |
| title | ReactNode | — |
| status | AgentTaskStatus | — |
| steps? | { id: string; title: ReactNode; status: AgentTaskStatus }[] | Deliberately not a tree. A plan that needs deep nesting is a plan the agent will not finish. |
| note? | ReactNode | — |
| Type | Definition | Description |
|---|---|---|
AgentTaskStatus | 'pending' | 'active' | 'done' | 'failed' | 'skipped' | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| one active task | enforced here | An agent reporting three tasks in progress has lost track of its plan. Later actives are demoted to pending rather than all being drawn live, which would hide the bug. |