KQ-1687 · ERRAND/TOASTS

Errand Toasts

Toasts for long-running work whose border is the progress bar: a line traced round each toast's rounded outline, measured in pixels, chases every report on springs.glide, or laps it as a segment while the job cannot measure itself. Finishing closes the lap and seals it — the outline swells once and fades — while the glyph turns to a check on springs.flick, the text cross-fades into the result with its action and the toast lands on springs.recoil; a failure stops the line and turns the outline a muted red with Retry. Toasts stack newest on top, fold into a count past max, live in a labelled region with one polite status, and F6 reaches them from anywhere.

KQ-1687 · ERRAND/TOASTS

Calibration synced
60 sensors · Harbour line
Nightly backup finished
2.1 GB · kept for 30 days

waiting to start · F6 reaches the toasts

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/errand-toasts

Props

tasks: ErrandTask[]; default defaultErrandTasks; The errands in the order they started (the newest is drawn on top): { id, kind, title, detail?, progress?, state, result?, error? }; progress null means unknown.
max: number; default 3; Toasts shown before older ones fold into a "+N more" count that unfolds them.
corner: "bottom-right" | "bottom-left" | "top-right" | "top-center"; default "bottom-right"; Where the stack sits in its container and the side toasts enter from.
borderStyle: "line" | "band" | "dotted"; default "line"; How progress runs round the border: a fine line, a 3.5px band, or a trail of round dots.
accent: string; default "var(--accent-bright)"; The progress line, its seal and the percentage; any CSS colour.
layout: "overlay" | "inline"; default "overlay"; Overlay pins the stack to a corner of the nearest positioned ancestor (never position: fixed); inline keeps it in flow.
width: number; default 360; Toast width in px; under 30rem of container the toasts span it.
doneTimeout: number; default 8000; Finished toasts dismiss themselves after this long, paused while hovered or focused; 0 keeps them.
dismissed / defaultDismissed: string[]; default — / []; Dismissed task ids, controlled or initial.
onDismiss: (taskId: string) => void; default —; A toast was dismissed by its ×, Escape, Delete or its own timeout.
onAction: (taskId: string, actionId: string) => void; default —; A finished toast's action (Open, View) was pressed.
onRetry: (taskId: string) => void; default —; Retry was pressed on a failed toast.
onExpandChange: (expanded: boolean) => void; default —; The folded count was opened or closed.
hotkey: string; default "F6"; The key that moves focus to the newest toast and, pressed again (or with Shift), back to where it was.
label: string; default "Background tasks"; The region's name; the hotkey is appended to it.
className: string; default —; Classes for the overlay layer (or the inline wrapper).

Prop	Type	Default	Description
tasks	ErrandTask[]	defaultErrandTasks	The errands in the order they started (the newest is drawn on top): { id, kind, title, detail?, progress?, state, result?, error? }; progress null means unknown.
max	number	3	Toasts shown before older ones fold into a "+N more" count that unfolds them.
corner	"bottom-right" \| "bottom-left" \| "top-right" \| "top-center"	"bottom-right"	Where the stack sits in its container and the side toasts enter from.
borderStyle	"line" \| "band" \| "dotted"	"line"	How progress runs round the border: a fine line, a 3.5px band, or a trail of round dots.
accent	string	"var(--accent-bright)"	The progress line, its seal and the percentage; any CSS colour.
layout	"overlay" \| "inline"	"overlay"	Overlay pins the stack to a corner of the nearest positioned ancestor (never position: fixed); inline keeps it in flow.
width	number	360	Toast width in px; under 30rem of container the toasts span it.
doneTimeout	number	8000	Finished toasts dismiss themselves after this long, paused while hovered or focused; 0 keeps them.
dismissed / defaultDismissed	string[]	— / []	Dismissed task ids, controlled or initial.
onDismiss	(taskId: string) => void	—	A toast was dismissed by its ×, Escape, Delete or its own timeout.
onAction	(taskId: string, actionId: string) => void	—	A finished toast's action (Open, View) was pressed.
onRetry	(taskId: string) => void	—	Retry was pressed on a failed toast.
onExpandChange	(expanded: boolean) => void	—	The folded count was opened or closed.
hotkey	string	"F6"	The key that moves focus to the newest toast and, pressed again (or with Shift), back to where it was.
label	string	"Background tasks"	The region's name; the hotkey is appended to it.
className	string	—	Classes for the overlay layer (or the inline wrapper).