KQ-799 · TASK/BOARD
Task Board
Three columns — queued, running, done — and the agent tasks that cross them. When the host changes a task's status its card travels from its old column to its new one on glide through a shared layoutId, the cards it leaves and lands among close and open the gap on glide, a done card's tick draws on flick, a failed card holds the running column with a cross, and each column's count rolls its digits on snap. The board scrolls inside its own box with edge fades on narrow screens, and with onAdvance each open card is a button in a roving tabindex — Up and Down move within a column, Left and Right cross columns, Home and End jump, Enter and Space advance.
Idle · press play
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/task-board
Props
- tasks
- BoardTask[]
- default —
- Every task in board order: id, title, an optional agent, and a status of queued, running, done or failed.
- onAdvance
- (id: string, next: "running" | "done") => void
- default —
- Makes each queued and running card a button that fires with the column it would move to.
- columns
- { queued?: string; running?: string; done?: string }
- default Queued / Running / Done
- Heading overrides for the three columns.
- label
- string
- default —
- Names the board for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| tasks | BoardTask[] | — | Every task in board order: id, title, an optional agent, and a status of queued, running, done or failed. |
| onAdvance | (id: string, next: "running" | "done") => void | — | Makes each queued and running card a button that fires with the column it would move to. |
| columns | { queued?: string; running?: string; done?: string } | Queued / Running / Done | Heading overrides for the three columns. |
| label | string | — | Names the board for assistive technology. |