> ## Documentation Index
> Fetch the complete documentation index at: https://smithers.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# TaskItem

> Render a compact unit-of-work row with shared status semantics.

`TaskItem` works on its own or inside a `Plan` step detail:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { TaskItem } from "smithers-orchestrator/ui";

<TaskItem
  label="Run focused tests"
  status="running"
  files={["tests/plan.test.tsx"]}
  elapsedSeconds={72}
/>
```

The `status` string goes through the shared `normalizeStatus`, `statusClass`,
and `formatStatus` helpers. Every tinted dot has matching screen-reader text.

## Props

| Prop             | Type                | Description                                                                      |
| ---------------- | ------------------- | -------------------------------------------------------------------------------- |
| `label`          | `ReactNode`         | Unit-of-work label.                                                              |
| `status`         | `string`            | Any shared status vocabulary string, such as `running`, `complete`, or `failed`. |
| `files`          | `readonly string[]` | Optional text-only monospace file badges.                                        |
| `elapsedSeconds` | `number`            | Optional elapsed duration, formatted as seconds or minutes and seconds.          |

**Source**: `packages/ui/src/agentic/TaskItem.tsx`

**Tests**: `packages/ui/tests/task-item.test.tsx`