Agentic

Task List

The steps an agent plans and how far it has got. It can ask before the agent starts, marks the step in progress, and folds into a summary when every step is done.

idle

Usage

import { TaskList } from "@mizen-labs/ui";

With the AI SDK

The AI SDK has no plan part. Stream the plan as a custom data part and update each step's status as the agent works.

import { useChat } from "@ai-sdk/react";
import { TaskList, type TaskListStep } from "@mizen-labs/ui";

// Your agent streams its plan as a data part, such as data-plan, and
// updates each step's status as it works.
type PlanPart = {
	data: { steps: TaskListStep[]; title: string };
	type: "data-plan";
};

export function AgentPlan({ onApprove }: { onApprove: () => void }) {
	const { messages, status } = useChat();
	const reply = messages.findLast((message) => message.role === "assistant");
	const plan = reply?.parts.findLast(
		(part): part is PlanPart => part.type === "data-plan"
	);
	if (!plan) return null;
	return (
		<TaskList
			// Ask before running while the agent waits for an answer.
			approval={status === "ready" && plan.data.steps.every((step) => step.status === "pending")}
			onApprove={onApprove}
			steps={plan.data.steps}
			title={plan.data.title}
		/>
	);
}

With TanStack AI

Return the plan from a tool, such as a plan tool the model calls first, and read its output from the tool-call part.

import { TaskList, type TaskListStep } from "@mizen-labs/ui";

// part is a tool-call part whose tool returns { title, steps }.
export function PlanFromTool({ part }: { part: { output?: { steps: TaskListStep[]; title: string } } }) {
	return part.output ? (
		<TaskList steps={part.output.steps} title={part.output.title} />
	) : null;
}

Examples

Failed step

A failed step stops the plan and says why, with Retry from here.

Recommendations

Guidance	Practice
Do	Keep step titles short and in the imperative, such as "Run the visual tests". Update each step's status as the agent works, and mark exactly one step as running.

Usage boundaries

Guidance	Boundary
Scope	The application runs the agent and stores the plan. Task List shows each step's state; Approve, Revise, and Retry only report the choice.
Scope	Use it for steps the agent decides on before it starts. Calls it makes along the way belong in Tool Call Group.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`title`	`string`	`—`	The plan's goal, shown in the header and naming the list.
`steps`	`readonly { id; title; status: "pending" \| "running" \| "complete" \| "error"; detail?; duration?; error? }[]`	`—`	Each step with an id, a title, and a status. detail adds a muted second line; duration and error show once it ends.
`approval / onApprove / onRevise`	`boolean / () => void`	`false`	Asks before the agent starts, with Approve and Revise. Each button appears only with its handler.
`onRetry`	`(stepId: string) => void`	`—`	Shows Retry from here under a failed step, with the step's id.
`duration`	`number`	`Measured`	Seconds the plan took, shown once it is done. Measured while the component watches it run; pass it for a plan from history.