PaceUI

Intro

Agents

Crafts

Charts

Workflow Board

An interactive agent task viewer showing tasks in progress, doing, and done with tool telemetry and animated transitions.

Empty Board

A standalone empty column board state showing the dashed empty drop indicator.

Task Card

An interactive single task card demonstrating tool telemetry pills, live task steps with status spinners, and approval actions.

When to use

Visualizing autonomous AI agent task planning, queuing, and execution stages.
Tracking real-time tool telemetry ("Doing"), subtask checklist progress, and active agent operations.
Multi-agent orchestration workflows where tasks transfer between specialized agent personas.
Allowing users or supervisors to drag, re-order, or approve agent deliverables.

When not to use

Simple one-shot prompt/response interfaces with no decomposition into subtasks.
Linear single-thread loading indicators where a simple spinner or progress bar is sufficient.

API Reference

AgentWorkflowBoardProps

Prop	Type	Default	Description
`tasks`	`AgentWorkflowTask[]`	—	Controlled list of agent tasks.
`defaultTasks`	`AgentWorkflowTask[]`	`[]`	Uncontrolled initial list of agent tasks.
`columns`	`AgentWorkflowColumn[]`	`DEFAULT_AGENT_WORKFLOW_COLUMNS`	Board columns configuration. Defaults to To Do, In Progress, and Done.
`title`	`string`	—	Board title rendered in the breadcrumb header.
`breadcrumbs`	`BreadcrumbItemData[]`	—	Custom breadcrumb trail items for navigation.
`showComposer`	`boolean`	`true`	Whether to display the bottom floating task composer.
`composerPlaceholder`	`string`	`"Assign a task to agent..."`	Placeholder text for the floating input.
`onTaskMove`	`(taskId: string, targetStatus: string) => void`	—	Callback fired when a task is moved via drag-and-drop.
`onTaskClick`	`(task: AgentWorkflowTask) => void`	—	Callback fired when a task card is clicked.
`onStepToggle`	`(taskId: string, stepId: string) => void`	—	Callback fired when a task step is clicked or toggled.
`onApprove`	`(taskId: string) => void`	—	Callback fired when the Approve button on a card is clicked.
`onDecline`	`(taskId: string) => void`	—	Callback fired when the Decline button on a card is clicked.
`onSubmitPrompt`	`(prompt: string) => void`	—	Callback fired when a task prompt is submitted from the floating composer.

AgentWorkflowTask

Field	Type	Description
`id`	`string`	Unique identifier for the task.
`title`	`string`	Concise title of 2–4 words describing the task.
`status`	`string`	Current task column identifier (`"todo"`, `"in_progress"`, `"doing"`, `"done"`).
`steps`	`AgentTaskStep[]`	List of execution steps displayed directly on the card.
`exploring`	`AgentExploringSource[]`	List of apps or integrations explored by the agent (Slack, Mail, Notion, etc.).
`needsApproval`	`boolean`	Whether to display the Approve and Decline action buttons.
`actions`	`React.ReactNode`	Custom action buttons rendered at the bottom of the card.

AgentExploringSource

Field	Type	Description
`id`	`string`	Unique identifier for the source (e.g. `"slack"`, `"gmail"`).
`label`	`string`	Display label (e.g. `"Slack"`, `"Mail"`).
`iconSrc`	`string`	Optional URL or path to the integration logo.
`invertDark`	`boolean`	Whether to invert logo colors in dark mode.
`status`	`"pending" \| "running" \| "completed" \| "error"`	Exploration status.

AgentTaskStep

Field	Type	Description
`id`	`string`	Unique identifier for the step.
`title`	`string`	Display title of the step.
`status`	`"pending" \| "running" \| "completed" \| "error"`	Step execution status (spinner for running, checkmark for completed, dot for pending).
`completed`	`boolean`	Optional completion boolean flag.
`iconSrc`	`string`	Optional logo icon for app-specific exploration steps.
`invertDark`	`boolean`	Whether to invert step logo colors in dark mode.

AgentWorkflowColumn

Field	Type	Description
`id`	`string`	Unique identifier matching task status.
`title`	`string`	Column display label (e.g. `"To Do"`, `"In Progress"`, `"Done"`).
`icon`	`React.ReactNode`	Icon displayed in the column header.
`accepts`	`string[]`	Optional list of status aliases mapped into this column.

Accessibility

Columns and task cards maintain high contrast semantics conforming to WCAG AA guidelines.
All icon-only buttons include explicit aria-label and title attributes for assistive technologies.
Tasks can be transitioned via keyboard and menu controls in addition to HTML5 drag-and-drop.

Motion

Coordinates shared animated transitions across columns using <LayoutGroup> to eliminate jarring layout shifts.
Cards transition with spring physics (stiffness: 420, damping: 28, mass: 0.8).
Subtask checklists and expanding details animate cleanly with height and opacity springs.

Chat Composer Thinking States