Usage Panel
An AI usage and cost panel with cost to date against budget and a projection, stacked daily token bars with a keyboard readout, a per-model breakdown, rate-limit status and CSV export.
Preview
Usage and cost
October
$738.91of $1,400.00 budgetProjected $954.43
53% usedDay 24 of 31
Tokens per day
Input 17.7MOutput 4.8M17.7M input and 4.8M output tokens over 24 days.
By model
- Pebble 312.3M tokens$553.1275% of spend
- Pebble Mini7.8M tokens$121.0416% of spend
- Pebble 70B2.4M tokens$64.759% of spend
Rate limit
Near limit412/ 500 requests / min
Window resets in 38 s
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| days | UsageDay[] | — | One bar per day: { label, input, output, cost }. |
| models | UsageModel[] | — | Per-model breakdown: { name, input, output, cost }. |
| budget | number | — | Budget for the period. |
| periodDays | number | days.length | Days in the period, used for the end-of-period projection. |
| rateLimit | { used, limit, unit, resets? } | — | Shows the rate-limit meter and status (Near limit at 80%). |
| title | string | "Usage" | Panel heading. |
| period | string | — | Subtitle; also names the CSV file. |
| currency | string | "USD" | ISO currency code. |
| onExport | () => void | built-in CSV | Replaces the built-in CSV download. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.