KQ-2058 · DETAIL/DIAL

Detail Dial

One AI answer with a depth dial beside it, from one line to a thorough brief. Turning the dial does not swap texts: every word is a layout element, so the sentences you have read glide apart on springs.glide to make room and the new ones unfurl into the gaps word by word, while the pane holds the sentence you are reading where it was; turning it down folds the extra sentences away on the exit ease and closes the gaps on the same glide. The dial is a real slider — dragged round 1:1 with a rubber band past the ends and a settle on springs.snap that carries the release velocity, or stepped with the arrow keys, Page Up and Page Down, Home, End and the number keys — and under 36rem it becomes a segmented control above the answer.

KQ-2058 · DETAIL/DIAL

Gaugeworks Assist

one answer · 4 depths

Level 2 of 4 · 56 words · 15 s read

Water got into my Gaugeworks G4 thermostat. Is that covered by the warranty?

Water damage usually isn't covered by the G4's warranty, unless the water came from a Gaugeworks part. The warranty covers faults in how the thermostat was made, like a failed relay or a dead display.

If the leak came from the G4's own humidity sensor housing, that counts as a fault and we'll replace the unit.

level 2 · short · 56 words · gaugeworks warranty

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/detail-dial

Props

levels: number; default 4; How many detents the dial offers, 2 to 4; they spread evenly over the answer's levels, and the number keys follow.
unfurlSpeed: number; default 1; How fast new sentences unfurl and leaving ones fold away: 0.5 is slow, 2 is brisk.
accent: string; default "var(--accent-bright)"; Any CSS colour for the dial's arc and pointer, the new-word wash, the segmented pill and the copy confirmation.
question: string; default the Gaugeworks warranty question; The question the answer replies to.
answer: DetailBlock[]; default defaultDetailAnswer; One answer at every depth: paragraphs, headings and list steps of sentences, each with a stable id and the level it first appears at.
levelNames: string[]; default ["One line", "Short", "Full", "Brief"]; A name for each answer level, shallowest first.
depth / defaultDepth: number; default — / 2; The dial's detent, from 1 to levels, controlled or initial.
onDepthChange: (depth: number) => void | Promise<unknown>; default —; Fires from the drag, key or press that changed the depth. Return a promise and the deeper text is shown being written until it resolves; a rejection keeps the shallower text and says so.
onCopyLevel: (depth: number, text: string) => void; default —; Copy this level was pressed, with that level's plain text (also written to the clipboard when one is available).
status: "ready" | "loading" | "error"; default "ready"; Loading draws skeleton lines; error offers Try again.
onReload: () => void; default —; Try again was pressed after the answer failed to load.
model: string; default "Gaugeworks Assist"; The assistant answering, named in the header.
wordsPerMinute: number; default 230; Reading speed behind the time estimate under the dial.
height: number; default 540; The surface's height in px; the answer scrolls inside it.
disabled: boolean; default false; The dial cannot be turned.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
levels	number	4	How many detents the dial offers, 2 to 4; they spread evenly over the answer's levels, and the number keys follow.
unfurlSpeed	number	1	How fast new sentences unfurl and leaving ones fold away: 0.5 is slow, 2 is brisk.
accent	string	"var(--accent-bright)"	Any CSS colour for the dial's arc and pointer, the new-word wash, the segmented pill and the copy confirmation.
question	string	the Gaugeworks warranty question	The question the answer replies to.
answer	DetailBlock[]	defaultDetailAnswer	One answer at every depth: paragraphs, headings and list steps of sentences, each with a stable id and the level it first appears at.
levelNames	string[]	["One line", "Short", "Full", "Brief"]	A name for each answer level, shallowest first.
depth / defaultDepth	number	— / 2	The dial's detent, from 1 to levels, controlled or initial.
onDepthChange	(depth: number) => void \| Promise<unknown>	—	Fires from the drag, key or press that changed the depth. Return a promise and the deeper text is shown being written until it resolves; a rejection keeps the shallower text and says so.
onCopyLevel	(depth: number, text: string) => void	—	Copy this level was pressed, with that level's plain text (also written to the clipboard when one is available).
status	"ready" \| "loading" \| "error"	"ready"	Loading draws skeleton lines; error offers Try again.
onReload	() => void	—	Try again was pressed after the answer failed to load.
model	string	"Gaugeworks Assist"	The assistant answering, named in the header.
wordsPerMinute	number	230	Reading speed behind the time estimate under the dial.
height	number	540	The surface's height in px; the answer scrolls inside it.
disabled	boolean	false	The dial cannot be turned.
className	string	—	Classes for the outer surface.