# Task Rows > List the tasks in an agent run with the status of each, and offer a retry on the ones that failed. Source: https://ai.honestui.com/docs/components/task-rows ```tsx "use client" import * as React from "react" import { TaskRows, type Task } from "@/components/ai/task-rows" // Sample tasks. const sampleTasks: Task[] = [ { id: "verify", label: "Verify vendor records", summary: "12 suppliers", status: "done", details: [ { label: "Matched tax and contact IDs", value: "12/12" }, { label: "Flagged stale records", value: "0" }, ], }, { id: "reorder", label: "Build the reorder list", summary: "7 SKUs", status: "running", details: [ { label: "Reading the POS export", value: "3 files" }, { label: "Scoring stockout risk", value: "68%" }, ], }, { id: "emails", label: "Draft supplier emails", summary: "2 messages", status: "error" }, { id: "summary", label: "Write the summary", status: "queued" }, ] /** No agent runs here. Retry moves the failed task to running, as your handler would. */ export function TaskRowsDemo() { const [tasks, setTasks] = React.useState(sampleTasks) return (
setTasks((current) => current.map((task) => (task.id === taskId ? { ...task, status: "running" } : task)) ) } />
) } ``` ## Overview [#overview] 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](/docs/components/tool-chips) for individual tool calls and their output, and Task Rows for the larger units of work a person would recognize. ## Anatomy [#anatomy] Installing `task-rows` brings [Button](https://www.honestui.com/docs/components/button) and [Collapsible](https://www.honestui.com/docs/components/collapsible) along as registry dependencies. ## Behavior [#behavior] ### Status [#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 [#details] A task with `details` is a button that opens them. A task without details is plain text. ### Retry [#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 [#variants] `cards` gives each task its own bordered card. `list` joins the tasks in one block with dividers, which suits a longer run. ## Accessibility [#accessibility] 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. | Key | Action | | ------------------------------------ | ------------------------------------------------ | | Tab | Move across tasks with details and Retry buttons | | Enter or Space | Open or close the focused task, or retry it | ## Installation [#installation] Add the components it is built from. Copy and paste this file into your project. ### components/ai/task-rows.tsx ```tsx "use client" import * as React from "react" import { ChevronDown as ChevronDownIcon, CircleAlert as CircleAlertIcon, CircleCheck as CircleCheckIcon, CircleDashed as CircleDashedIcon, LoaderCircle as LoaderCircleIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@/components/ui/collapsible" export type TaskStatus = "queued" | "running" | "done" | "error" export type TaskDetail = { label: string /** A count, a percentage, or a short state, shown at the end of the line. */ value?: string } export type Task = { id: string label: string status: TaskStatus /** A short quantity shown after the label, such as "12 suppliers". */ summary?: string /** What the task is made of. A task with details can be expanded. */ details?: TaskDetail[] } export type TaskRowsLabels = Record & { retry: string } export const defaultTaskRowsLabels: TaskRowsLabels = { queued: "Queued", running: "Running", done: "Completed", error: "Failed", retry: "Retry", } const rowText = "[font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]" const statusIcon: Record = { queued: { Icon: CircleDashedIcon, className: "text-[var(--hui-color-foreground-base-tertiary)]" }, running: { Icon: LoaderCircleIcon, className: "text-[var(--hui-color-foreground-base-secondary)] motion-safe:animate-spin", }, done: { Icon: CircleCheckIcon, className: "text-[var(--hui-color-foreground-success-primary)]" }, error: { Icon: CircleAlertIcon, className: "text-[var(--hui-color-foreground-danger-primary)]" }, } export type TaskRowsProps = Omit, "children"> & { tasks: Task[] /** "cards" separates the tasks. "list" joins them in one bordered block. */ variant?: "cards" | "list" /** Passing it shows Retry on every failed task. */ onRetry?: (taskId: string) => void labels?: Partial } /** * The tasks in an agent run and where each one stands. It shows the status * you pass for each task; update the array as your agent reports progress. */ function TaskRows({ tasks, variant = "cards", onRetry, labels: labelsProp, className, ...props }: TaskRowsProps) { const labels = React.useMemo( () => ({ ...defaultTaskRowsLabels, ...labelsProp }), [labelsProp] ) const isList = variant === "list" return (
    {tasks.map((task) => ( ))}
) } function TaskRow({ task, isList, labels, onRetry, }: { task: Task isList: boolean labels: TaskRowsLabels onRetry?: (taskId: string) => void }) { const { Icon, className: iconClassName } = statusIcon[task.status] const hasDetails = Boolean(task.details?.length) const canRetry = task.status === "error" && onRetry !== undefined const summary = ( <>