AI Usage
A usage page for AI products — the plan and its price, this period's token, request and seat allowances, daily activity, and each model's share of the tokens or the spend.
The panel is a composition, so it follows your theme preset. Copy the source from the Code tab and feed it your own plan, totals and models. Upgrade is simulated; nothing is charged.
What it's made of
| Part | Component |
|---|---|
| Card shell | Card, filled, one section per job split by hairlines |
| Upgrade and Undo | Button |
| Allowances | Meter, one per allowance, with a custom value |
| Daily activity | A description list and an Activity Heatmap |
| Tokens and Spend | Segmented Control, solid |
| Model shares | One small Meter per model |
| Retiring model | Badge, warning |
Allowances
Each allowance reads as used, of its limit, then how much is left. From 85% used the meter turns to its warning state, shows its status glyph and adds "near limit" to its line, so the state never rests on colour alone.
Upgrading
Upgrade moves the workspace to the next plan for the rest of the period and shows the prorated charge in place of the renewal date. Every allowance re-reads against the new limits, and Undo puts the plan back. Upgrade and Undo are one button whose label changes, so focus stays where it was and the button keeps its width.
By model
Each row names a model, its tokens and requests, and its share of the period. Switch between Tokens and Spend to see where the money goes rather than where the tokens go — an expensive model can be a small share of the tokens and the largest share of the spend. A model that is being retired says when.
Motion
Every movement explains a change, and none plays when the panel first appears.
- After an upgrade or an undo, each allowance's fill slides to its new share.
- Switching between Tokens and Spend slides the selection and each model's fill to its new share.
With reduced motion, fills and the selection move at once.
Keyboard and screen readers
- Each section is a region named by its heading.
- Each meter is named by its allowance and reads "6.2M of 10M tokens, 62% used".
- Each stat is a term and value pair, so it reads as "Sessions, 3,812", and the activity grid names every day.
- An upgrade or an undo is announced once, with the new token allowance.