Task Rows

Task Rows shows where each task in a run stands: queued, running, completed, or failed. A task with details opens to show what it is made of, and a failed task can offer Retry.

It shows the status you pass for each task. Update the array as your agent reports progress.

Use Tool Chips for individual tool calls and their output, and Task Rows for the larger units of work a person would recognize.

Installing task-rows brings Button and Collapsible along as registry dependencies.

Status

Each status has an icon and a word. The word is always shown, so the icon's color is never the only cue.

Details

A task with details is a button that opens them. A task without details is plain text.

Retry

Pass onRetry to show Retry on every failed task. It calls your handler with the task id. Changing the task's status is your application's work.

Variants

cards gives each task its own bordered card. list joins the tasks in one block with dividers, which suits a longer run.

The tasks are a list. A task with details is a button that reports whether it is expanded. Retry is named with its task, such as "Retry: Draft supplier emails". Icons are decorative, and with reduced motion the running icon does not rotate.

Task Rows does not announce status changes. If the person needs to hear that a task failed, announce it from your own status region.

import { TaskRows } from "@/components/ai/task-rows"

<TaskRows
  tasks={run.tasks.map((task) => ({
    id: task.id,
    label: task.title,
    status: task.state,
    summary: task.summary,
  }))}
  onRetry={(taskId) => agent.retryTask(run.id, taskId)}
/>

List variant

The same tasks joined in one block.

TaskRows

Accepts native ul props beyond those listed.

Types