Usage Component on the Billing Page

Unify, a sales platform, charges customers in credits for its data and AI services, so they need to see where their credits go before they run out. A static mock shows one state, and engineering has to guess the rest. This spec is a working prototype instead, so every state the component can reach is on screen and easy to discuss before anyone builds it.

• States you can scrub through. The markers are draggable in the prototype only, "to help look through different types of states," so you can push usage and projections around and see what the component does at each point.
• Edge cases shown, not described. When the projection overshoots the total it turns to red dashes; when markers crowd each other they push apart; the service list stays ordered by usage as values change.
• Every warning and its copy. Approaching a limit, paused at a limit, credits running low, credits gone. Each state has its message in place, ready for copy to be adjusted.
• Behavior engineering can match. Set a cap on a service, watch it warn as usage nears the line and pause when it gets there, then change or remove the limit.
• Clear about what is prototype. The spec calls out what won't ship (dragging, live reordering) so the build matches the intent, not the demo.