# Task

Task [#task]

The **Task** primitive renders a multi-step agent process as an ordered list of steps. Each `TaskItem` shows its index, tool, status, and — when expanded — args and observation, with the `finish` step styled as the distinguished final answer. Its data shape mirrors `@localmode/react` `useAgent` steps (`{ index, type, toolName, toolArgs, observation, result }`) so agent UIs wire up without adapters.

Preview [#preview]

```tsx
'use client';

/**
 * @file task-demo.tsx
 * @description Docs preview for `Task`. Renders a small ReAct-style step list
 * shaped like `useAgent().steps`, ending in a distinguished final answer.
 */
import { Task, TaskItem, type TaskStep } from '@/components/task';

const STEPS: TaskStep[] = [
  {
    index: 0,
    type: 'tool_call',
    toolName: 'search_documents',
    toolArgs: { query: 'pricing' },
    observation: 'Found 3 matching passages.',
    status: 'completed',
  },
  {
    index: 1,
    type: 'tool_call',
    toolName: 'summarize',
    toolArgs: { topK: 3 },
    observation: 'Synthesized an answer from the top passages.',
    status: 'running',
  },
  {
    index: 2,
    type: 'finish',
    result: 'The pro plan is $20/mo and includes priority support.',
  },
];

export default function TaskDemo() {
  return (
    <div className="w-full max-w-xl">
      <Task>
        {STEPS.map((s) => (
          <TaskItem key={s.index} step={s} />
        ))}
      </Task>
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/conversation/task
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders the step list you pass — works with any backend. Recommended producer: `useAgent().steps` from `@localmode/react` (on-device, optional).

* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `task.tsx` — `Task` + `TaskItem`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**TaskItem**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `step` | `object` | — | **Required.** The step to render. |

Examples [#examples]

Render agent steps [#render-agent-steps]

```tsx
import { useAgent } from '@localmode/react';
import { Task, TaskItem } from '@/components/task';

const { steps } = useAgent({ model, tools });

<Task>
  {steps.map((s) => <TaskItem key={s.index} step={s} />)}
</Task>
```

Customization [#customization]

For a richer vertical timeline with durations, finish-reason badges, and nested sub-agents, use [Agent Step Timeline](/docs/conversation/agent-step-timeline). `Task` is the lighter, list-style option.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. `useAgent`) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.