Task

A single task row: status, title, mono detail, a live timer that becomes a duration, and details on demand.

Markdown

On this page

Done with a duration, running with a live timer, failed with details, blocked, skipped and pending.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/task.json

Usage

tsx

import { Task } from "@/components/ui/chatcn/task"

<Task status="in-progress" title="Run the test suite" activeTitle="Running the test suite" detail="pnpm test" />

<Task status="failed" title="Build the docs" detail="pnpm build">
  Type error in app/runs/page.tsx. Regenerate the types, then build again.
</Task>

Task also exports TaskStatusGlyph, the 16 px status mark that Plan, TodoList, Subagent and Workflow share, so a status looks the same everywhere.

Statuses

Status	Shows
`pending`	A hollow ring: a place in the queue
`in-progress`	The spinner, the active title in medium weight
`done`	An ink disc whose check draws itself in 180 ms
`blocked`	A circled minus and the reason underneath
`skipped`	A dashed ring, struck through and dimmed
`failed`	A red cross with the word Failed
`cancelled`	A stop glyph, dimmed

Props

Prop	Type	Notes
`status`	`TaskStatus`	One of the seven statuses above
`title`	`ReactNode`	Imperative form
`activeTitle`	`ReactNode`	Shown while in progress
`detail`	`ReactNode`	Mono context; truncates first
`meta`	`ReactNode`	Replaces the timer or status text
`durationMs`, `startedAt`	`number`	Measured automatically when omitted
`children`	`ReactNode`	Expandable details; failed and blocked tasks open by themselves
`open`, `defaultOpen`, `onOpenChange`		Controlled or uncontrolled

Keyboard

Key	Action
`Enter`, `Space`	Expand or collapse the details

Accessibility

Rows with details are real buttons with aria-expanded, from Base UI Collapsible.
The status is spoken before the title; failure is never color alone.
The timer is not a live region: a timer that speaks every second is noise.

Motion

Status changes swap the glyph with a 150 ms blur crossfade; done draws its check.
Details open over 200 ms and the chevron turns with them. Reduced motion snaps.