Agents

TaskList

Floating agent task progress pill above the composer that expands into the full task list.

Composition

The preferred shape for composing the installed agent from its exported parts.

Parts

Exported compound parts from the installed source.

TaskList

├── TaskListTrigger

├── TaskListProgress

├── TaskListLabel

├── TaskListContent

├── TaskListItem

└── TaskListIndicator

This agent installs from the task-list registry. Install the bundle with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/task-list.json

See registry manifest

Usage

import type { TaskStatus } from "@/components/refined-ui/contracts";

import { TaskList, TaskListContent, TaskListItem, TaskListTrigger } from "@/components/refined-ui/task-list";

// Map your agent's plan/todo state (e.g. a todo tool's items) onto TaskListItem rows;

// the collapsed pill derives "Task 3 of 5" and the current label from item statuses.

export function Example({ tasks }: { tasks: { id: string; label: string; status: TaskStatus }[] }) {

return (

<TaskList defaultOpen={false}>

<TaskListTrigger />

<TaskListContent>

{tasks.map((task) => (

<TaskListItem key={task.id} status={task.status}>

{task.label}

</TaskListItem>

))}

</TaskListContent>

</TaskList>

);

}

Raw code

Primary installed agent source

Component

src/registry/sources/refined/task-list.tsx

Primitives

This agent composes these library primitives, installed under components/refined-ui/ui/*.

Collapsiblecomponents/refined-ui/ui/collapsible.tsxLibrary slot