TaskTree
StableA list of tasks and the smaller tasks inside them, each with a status and an Open button.
Also known as tree view, subtasks, task hierarchy
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Tasks inside tasks
- Plan the trip3 nested tasks Running
- Look up flightsDone
- Compare hotels1 nested tasks Running
- Read guest reviewsPartial
- Email the travel agentFailed
<TaskTree tasks={tasks} onOpen={(id) => open(id)} />The (+N) count includes every task inside. Close a parent task to hide what is inside.
When to use it
Shows the helpers an assistant has started, with smaller tasks indented under the task that started them. Failed rows wait for you, and finished rows can tidy themselves away.
Made of: Open and close arrow · Status icon · Name · (+N) count · Status in words · Open button · Dismiss button (failed rows) · Spoken update
Use it for
- Beside the box where people type, to show what helpers are doing.
- A task that splits into smaller tasks, each with its own status.
- Letting people open one helper to see what it did.
Not for
- The steps of one task in the order they happen: use StepTimeline.
- Separate tasks grouped by what they need from the person: use AgentSessionList.
- A to-do list the person ticks off: use Checklist.
Do and avoid
- Plan the trip2 nested tasks Partial
- Find flightsDone
- Book the hotelFailed
- Plan the trip4 nested tasks Partial
- Book travel3 nested tasks Partial
- Flights2 nested tasks Partial
- Outbound1 nested tasks Partial
- Seat choiceFailed
Do
- Keep failed rows visible until the person dismisses them.
- Remove the row from your own data when it is dismissed, so a later update does not bring it back.
- Let finished rows leave on their own when they would otherwise pile up.
- Use Open to take people to that task's own page.
Avoid
- Don't show status with only color. Each row has an icon shape and words.
- Don't make the wait so short that a result vanishes before it can be read.
- Don't nest deeper than people can follow. Each level moves further right.
- Don't use it for a simple list of steps in order. Use StepTimeline.
On a phone
- Each level of nesting indents by 20px, so deep trees leave less width for the task name, which is cut with an ellipsis.
- The status word and Open button wrap under the name when the row is narrow.
- The expand, Open and dismiss controls keep their size and have a 44px tap area on a touch screen.
Seen in products
- Claude Code shows a task panel below the prompt input.
- Each Claude Code row has the subagent name, a status (Running, Done, Failed, Stopped or Partial), a custom color and a (+N) count of nested children, shown as an indented tree.
- In Claude Code, Enter opens the subagent's own transcript, where the user can type follow-ups.
- In Claude Code a finished row disappears after 30 seconds, and failed rows persist until dismissed with x.
- Background subagents' permission prompts surface in the main session labeled with the subagent's name.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| tasksrequired | TaskNode[] | none | Root tasks. Each has id, name, status (running, done, failed, stopped or partial) and optional children. |
| onOpen | (id: string) => void | none | Called by a row's Open button. |
| onDismiss | (id: string) => void | none | Called when a row is dismissed, either by the Dismiss button on a failed row or by dismissAfterMs on a done row. The tree hides the row at once, and your app removes it from its data here. |
| dismissAfterMs | number | undefined | Milliseconds after which a done row is dismissed and onDismiss(id) is called. Off when undefined. Failed rows never auto-dismiss. A done parent waits until its nested rows are done. The timer is not motion, so reduced motion does not change it. |
| defaultCollapsed | string[] | [] | Ids of parents that start collapsed. |
| labels | TaskTreeLabels | none | Replace status names and button text. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- running
- A task with status running shows the working icon.
- done
- A task with status done shows the completed icon, and is removed after dismissAfterMs if that is set and its children are also done.
- failed
- A task with status failed shows the failed icon and a dismiss button that hides it.
- stopped
- A task with status stopped shows the stopped icon.
- partial
- A task with status partial shows a half-filled circle.
- collapsed
- A task with children can be collapsed to hide them; pass their ids in defaultCollapsed to start closed.
- hover
- A row gets a soft background under the pointer.
Tokens
Change one of these and every part that uses it follows.
--surface--border--surface-hover--danger--success--radius-control--radius-card
Built in
- Rows are list items, and bigger tasks have a button that says Expand or Collapse with the task name.
- Screen readers hear the (+N) count as the number of tasks inside.
- Status is an icon shape plus words. Partial uses a half-filled circle.
- Open and Dismiss buttons include the task name, and each removal, timed ones too, is announced.
- The running icon spins, and stops when people turn off motion in their system settings.
What you need to do
- Leave dismissAfterMs off if people need time to read finished rows.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide