KQ-938 · SUMMARY/STRIP

Summary Strip

The gist of a long thread, sitting above it. A new summary types itself from an effect that holds while the tab is hidden, with the rest of the sentence laid out invisibly ahead of the caret so the box stays still, and the old line is wiped left to right by an animated clipPath on the exit ease rather than faded. A ResizeObserver measures the content and the strip's height joins it on glide, the refresh arrow turns one full turn per press on glide, and Enter or Space on that control refreshes while it stays aria-disabled rather than leaving the tab order.

KQ-938 · SUMMARY/STRIP

SummaryFrom 46 messages

Two crates are short a label and the gate opens at eleven.

Rui
Dock three is free from nine.
Marta
Two crates are short a label.
Ines
Waylight Pay is holding the yard fee.
Rui
Gate opens at eleven, not half past.
Marta
Handover sheet is on the desk.

Summary 1 of 3 · 46 messages · settled

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/summary-strip

Props

summary: string; default —; The current summary. A new value wipes the old one and types itself.
covers: number; default —; How many messages this reading covers; printed and spoken, pluralised.
refreshing: boolean; default false; The host is writing a new one; the strip sweeps and reads busy.
typeSpeed: number; default 18; Milliseconds per character.
onRefresh: () => void; default —; Fires from the refresh control.
onSettle: (text: string) => void; default —; Fires once, from an effect, when a summary finishes typing.
label: string; default "Summary"; The strip's small heading.
refreshLabel: string; default "Write the summary again"; The control's spoken name.

Prop	Type	Default	Description
summary	string	—	The current summary. A new value wipes the old one and types itself.
covers	number	—	How many messages this reading covers; printed and spoken, pluralised.
refreshing	boolean	false	The host is writing a new one; the strip sweeps and reads busy.
typeSpeed	number	18	Milliseconds per character.
onRefresh	() => void	—	Fires from the refresh control.
onSettle	(text: string) => void	—	Fires once, from an effect, when a summary finishes typing.
label	string	"Summary"	The strip's small heading.
refreshLabel	string	"Write the summary again"	The control's spoken name.