Section 11 · Components

Empty · Loading · Error · Toast.

The unsexy states. Most products half-ass these. We don't.

Empty

No probes yet.

Probes are single requests. They're the building block — a chain is just probes in order.

Headline: what's missing, not "Welcome!"
One sentence of why this thing exists, not what to do.
One primary action.
No illustration. The dashed-square placeholder is enough texture.

Loading

Three loading patterns. Pick by duration.

< 200msno indicator · the response feels instant

200ms – 2sinline spinner in the action button (label changes to verb-in-progress)

> 2sskeleton in the receiving panel · OR · progress bar if measurable

Skeleton uses --vp-color-bg-3 blocks at the layout positions of incoming content, with a subtle shimmer (1.6s, low contrast). Never on neon. Never bouncing.

Error

Connection refused

api.example.com:443 didn't respond. Check the proxy is running, then retry.

Title: what happened, not "Error" or "Oops".
Body: why and what next, in that order.
Always a recovery action — never a dead-end error.
Left border, not a full red box. Don't shout.

Toast

✓

Chain saved

signup-flow.chain.vps · 4 probes

successneon left · auto-dismiss 4s · stack bottom-right

errordanger left · does not auto-dismiss · user closes

infoinfo left · auto-dismiss 6s

stackingmax 3 visible · oldest collapses to "+2 more"

A toast is a receipt, not a dialogue. If the user must respond, it's a modal. If they must read it later, it's a notification. Toasts disappear.