KQ-2091 · TOKEN/BUCKET

Token Bucket

An API rate limit as a glass tank of water that refills at the plan's speed in a steady linear rise, where every request lifts out a slab of exactly its size that floats up on springs.glide and evaporates while the surface drops to the new level on springs.snap and sloshes. When the water is too low, requests hang above the tank as droplets that arrive on snap, a dashed line marks what the first one needs, and when the water reaches it the droplet falls in on the exit ease and its scoop leaves as it lands; a refusal throttles the key and a ring clock counts the retry down. The last ten requests sit in a real list beside the tank (behind a toggle in a narrow container) where Up and Down move, Home and End jump and Enter inspects a request.

KQ-2091 · TOKEN/BUCKET

Waylight API

Team plan · 30k burst · 30k a minute

26.9k/ 30k

tokens · refills 30k a minute

Full in 0:07

Last min · 2 reqs · 4.2k

26.9k of 30k · 0 queued · clear · last /v1/summarise 1.8k

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/token-bucket

Props

capacity: number; default 30000; The size of the bucket: the most tokens you can spend at once.
level: number; default defaultTokenBucketState.level; Tokens available at `now`, as the limit reports them.
refillSpeed: number; default 500; How fast the plan refills the bucket, in tokens per second; the tank rises at this rate between readings.
requests: TokenBucketRequest[]; default defaultTokenBucketState.requests; Recent requests: { id, at, tokens, route, key?, status: served | queued | refused, servedAt? }. The newest are listed; queued ones hang above the tank.
throttledUntil: number | null; default null; When the current throttle lifts (ms); the glass turns warn and a ring clock counts down.
now: number; default defaultTokenBucketNow; The moment the reading was taken (ms). Clocks count from it; the component never reads the wall clock in render.
status: "live" | "paused" | "loading" | "error"; default "live"; Live or paused traffic, or no reading yet.
historySize: number; default 10; How many requests the list keeps.
maxDroplets: number; default 6; Droplets drawn above the tank before the rest are counted as +n.
title: string; default "Waylight API"; The panel's heading.
subtitle: string; default "Team plan · 30k tokens a minute"; Under the heading; by default it states the refill speed.
unit: string; default "tokens"; What the bucket holds, in words.
formatTime: (ms: number) => string; default UTC hh:mm:ss; How a request's time is printed in the list.
liquid: "water" | "flat" | "cells"; default "water"; How the water is drawn: a translucent fill with a rippling surface, a flat solid fill, or measured cells with the top one part-filled.
slosh: number; default 0.6; How much the surface ripples when a scoop leaves, 0 to 1.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The water, the threshold line and the active actions: a named pigment or any CSS colour.
listOpen / defaultListOpen: boolean; default — / false; Whether the request list is open in a narrow container, controlled or initial.
onListOpenChange: (open: boolean) => void; default —; Fires from the Requests toggle with the state it asks for.
onRaiseLimit: () => void; default —; Raise limit was pressed. Omit it and the button is not drawn.
onPause: (paused: boolean) => void; default —; Pause or Resume was pressed, with the state it asks for. Omit it and the button is not drawn.
onInspectRequest: (request: TokenBucketRequest) => void; default —; A request in the list was opened.
onRetry: () => void; default —; Try again was pressed after the limit could not be read.
disabled: boolean; default false; Read only: actions and the list do nothing.
className: string; default —; Classes for the panel.

Prop	Type	Default	Description
capacity	number	30000	The size of the bucket: the most tokens you can spend at once.
level	number	defaultTokenBucketState.level	Tokens available at `now`, as the limit reports them.
refillSpeed	number	500	How fast the plan refills the bucket, in tokens per second; the tank rises at this rate between readings.
requests	TokenBucketRequest[]	defaultTokenBucketState.requests	Recent requests: { id, at, tokens, route, key?, status: served \| queued \| refused, servedAt? }. The newest are listed; queued ones hang above the tank.
throttledUntil	number \| null	null	When the current throttle lifts (ms); the glass turns warn and a ring clock counts down.
now	number	defaultTokenBucketNow	The moment the reading was taken (ms). Clocks count from it; the component never reads the wall clock in render.
status	"live" \| "paused" \| "loading" \| "error"	"live"	Live or paused traffic, or no reading yet.
historySize	number	10	How many requests the list keeps.
maxDroplets	number	6	Droplets drawn above the tank before the rest are counted as +n.
title	string	"Waylight API"	The panel's heading.
subtitle	string	"Team plan · 30k tokens a minute"	Under the heading; by default it states the refill speed.
unit	string	"tokens"	What the bucket holds, in words.
formatTime	(ms: number) => string	UTC hh:mm:ss	How a request's time is printed in the list.
liquid	"water" \| "flat" \| "cells"	"water"	How the water is drawn: a translucent fill with a rippling surface, a flat solid fill, or measured cells with the top one part-filled.
slosh	number	0.6	How much the surface ripples when a scoop leaves, 0 to 1.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The water, the threshold line and the active actions: a named pigment or any CSS colour.
listOpen / defaultListOpen	boolean	— / false	Whether the request list is open in a narrow container, controlled or initial.
onListOpenChange	(open: boolean) => void	—	Fires from the Requests toggle with the state it asks for.
onRaiseLimit	() => void	—	Raise limit was pressed. Omit it and the button is not drawn.
onPause	(paused: boolean) => void	—	Pause or Resume was pressed, with the state it asks for. Omit it and the button is not drawn.
onInspectRequest	(request: TokenBucketRequest) => void	—	A request in the list was opened.
onRetry	() => void	—	Try again was pressed after the limit could not be read.
disabled	boolean	false	Read only: actions and the list do nothing.
className	string	—	Classes for the panel.