KQ-817 · THREAD/TREE

Thread Tree

A conversation drawn as the tree it actually is, above the turns it produced. The path from the root to the chosen turn lights: each edge draws with pathLength on flick one cascade step later per level, so the light travels down from the root, and the nodes it reaches fill cobalt in time to meet it. Choosing another turn slides the messages — shared turns stay, the turns past the fork leave toward the old branch's side on the exit ease and the new ones arrive from the chosen side on snap in a cascade — while the pane's measured height glides.

KQ-817 · THREAD/TREE

Shift plan · Gaugeworks Reasoner

YouDraft next week's shift plan for the Basinworks yard.
AssistantThree eight-hour shifts, six crew each, Monday to Saturday. Ines leads days.
YouMake it two shifts.
AssistantTwo ten-hour shifts, nine crew each. Sunday stays closed and overtime falls to zero.

Branch Two shifts · 4 turns

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/thread-tree

Props

nodes: ThreadNode[]; default —; Every turn — id, parentId (null for the single root), role and text — in any order; leaves take columns and parents centre over their children.
value / defaultValue: string; default —; Controlled or initial selected turn; defaults to the first leaf.
onValueChange: (id: string) => void; default —; Fires from the click or key that chose a turn.
label: string; default —; Names the tree for assistive technology and prints as its heading.

Prop	Type	Default	Description
nodes	ThreadNode[]	—	Every turn — id, parentId (null for the single root), role and text — in any order; leaves take columns and parents centre over their children.
value / defaultValue	string	—	Controlled or initial selected turn; defaults to the first leaf.
onValueChange	(id: string) => void	—	Fires from the click or key that chose a turn.
label	string	—	Names the tree for assistive technology and prints as its heading.