KQ-936 · PRIORITY/FLAG/CHAT

Priority Ping

A thread whose urgent messages arrive louder and quieten when somebody says they have seen them. An urgent message settles into place on glide while a danger rail draws down its leading edge from scaleY 0 and a wash behind it breathes on a repeating tween, since a spring takes exactly two keyframes and a pulse has to come back. Acknowledging stops the wash, cools the rail to hairline, and swaps the flag's pennant for a tick on flick; the controls are one tab stop under a roving tabindex where Down and Up step, Home and End jump, and Enter or Space acknowledges without the control losing its place or its focus.

KQ-936 · PRIORITY/FLAG/CHAT

Priority1 waiting

Rui
Dock three is free from nine.
Urgent message.
Ines
Pallet 4471 is held at the gate, no paperwork.
Marta
Loader booked until half past.

1 urgent waiting · 0 acknowledged

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/priority-flag-chat

Props

messages: PriorityMessage[]; default —; The thread, oldest first: id, author, text, and the optional urgent, acknowledged and acknowledgedBy flags.
onAcknowledge: (id: string) => void; default —; Fires from a row's control and from Enter or Space on it; set acknowledged on that message here.
onPendingChange: (pending: number) => void; default —; Fires when the number of unacknowledged urgent messages changes.
onAnnounce: (sentence: string) => void; default —; Fires once per frozen change sentence, the same one the status region speaks.
label: string; default —; Names the thread for assistive technology.
acknowledgeLabel: string; default "Acknowledge"; Copy for the row control.
heading: string; default "Priority"; The strip above the thread.
maxHeight: number; default 260; How tall the thread grows before it scrolls inside its own box.

Prop	Type	Default	Description
messages	PriorityMessage[]	—	The thread, oldest first: id, author, text, and the optional urgent, acknowledged and acknowledgedBy flags.
onAcknowledge	(id: string) => void	—	Fires from a row's control and from Enter or Space on it; set acknowledged on that message here.
onPendingChange	(pending: number) => void	—	Fires when the number of unacknowledged urgent messages changes.
onAnnounce	(sentence: string) => void	—	Fires once per frozen change sentence, the same one the status region speaks.
label	string	—	Names the thread for assistive technology.
acknowledgeLabel	string	"Acknowledge"	Copy for the row control.
heading	string	"Priority"	The strip above the thread.
maxHeight	number	260	How tall the thread grows before it scrolls inside its own box.