Docs / Plans and tasks /
TaskLifecycleRow
Horizontal lifecycle tracker showing a task's progression through its defined states.
Preview
- Done: Created
- Done: Submitted
- Current: Working
- Upcoming: Completed
Variants
Created
- Current: Created
- Upcoming: Submitted
- Upcoming: Working
- Upcoming: Completed
Submitted
- Done: Created
- Current: Submitted
- Upcoming: Working
- Upcoming: Completed
Working
- Done: Created
- Done: Submitted
- Current: Working
- Upcoming: Completed
Input required
- Done: Created
- Done: Submitted
- Reached: Working
- Upcoming: Completed
- Current: Input required
Blocked
- Done: Created
- Done: Submitted
- Reached: Working
- Upcoming: Completed
- Current: Blocked
Completed
- Done: Created
- Done: Submitted
- Done: Working
- Current: Completed
Failed
- Done: Created
- Done: Submitted
- Reached: Working
- Upcoming: Completed
- Current: Failed
Cancelled
- Done: Created
- Done: Submitted
- Reached: Working
- Upcoming: Completed
- Current: Cancelled
Props
| Prop | Type | Description |
|---|---|---|
| current* | LifecyclePhase | The phase the task is currently in. Happy-path phases (created → submitted → working → completed) render as a connected spine; fork states (input-required, blocked, failed, cancelled) freeze the spine at "working" and append a coloured chip. |
* required.
Usage
import { TaskLifecycleRow } from "@/components/tasks/task-lifecycle-row";
<TaskLifecycleRow current="working" />