ns-ui

Router Tier Cascade

Model routing drawn as a cascade of weirs — one hairline row per model tier, each with a spill notch at its cost ceiling, so a request that a cheap tier can't hold visibly spills down a row and every escalation and its price are readable in one still frame.

Use when the panel that shows where an LLM router actually sent traffic and what each tier cost, with the escalation itself drawn as a spill over a weir notch you can drag to re-route settled traffic. Pick sankey-ascii-flow when the subject is proportional flow between arbitrary stages rather than an ordered price ladder, chart-funnel-stage-drop when the subject is attrition through a fixed funnel, and meter-quota-rule when there is one budget rather than a cascade of tiers.

Install

npx shadcn add https://design.helpmarq.com/r/router-tier-cascade.json

View source and playground

ns-ui / router-tier-cascade

Support agent — model routing, last 15 minutes

Every request enters at the cheapest tier and runs right until it hits that tier's notch. If it is harder than the notch allows it spills one row down and keeps going. Where a request stops is what it cost.

tierdifficulty spill →accepted · spend

edge-2b$0.0004

0$0

fast-8b$0.0025

0$0

pro-70b$0.0150

0$0

frontier$0.0750

0$0

each row spills at its notch — median per request on hover

drag a notch (or Tab to it and use ← →) to re-route settled traffic

Props

Prop	Type	Default	Description
tiers	RouterTier[]	—	model tiers, cheapest first — one hairline row each
requests	RouterRequest[]	—	the routed traffic; appending to this array is what animates a cascade
decayMs?	number	—	ms for a settled tick to fade 1 -> 0.25 (default 45000)
onCeilingChange?	(tierId: string, ceiling: number) => void	—	fires when a notch is dragged or arrow-keyed to a new ceiling
formatCost?	(amount: number) => string	—	formats a spend figure for the right gutter
ariaLabel?	string	—	—
className?	string	—	—

Back to the catalog