Other

CreditMeter

AI credits used: the name with how much is used ("20% used") on top, the bar, then when they reset with the count ("60 / 300") under the bar on the right.

Props

Prop	Type	Description
`left`Required	`number`
`total`Required	`number`
`label`	`React.ReactNode`	Default: "AI credits".
`detail`	`React.ReactNode`	When they start again: "Resets November 1".
`cost`	`number`	The AI credits the next action uses: "This uses 1 AI credit." (or that it needs more than are left).
`costLabel`	`string`	Your own words for the cost line.
`forecast`	`string`	A heads up when the pace would run out before the reset.
`icon`	`IconName`
`tone`	`'accent' \| 'neutral'`
`size`	`'S' \| 'M'`
`href`	`string`
`onClick`	`(e: React.MouseEvent) => void`
`className`	`string`
`children`	`React.ReactNode`	Actions under the block, such as Buy more.

Guidelines

AI credits used: the name with how much is used ("20% used") on top, the bar, then when they reset with the count ("60 / 300") under the bar on the right. With cost, it also says what the next AI action will use, so nobody spends a credit without knowing.

Provide: left and total. Optional label (default "AI credits"), detail ("Resets November 1"), forecast (a heads up when the pace would run out before the reset), cost, costLabel, icon (default magic-wand), tone (neutral for the free tries), size (S beside an AI action), href or onClick to open Billing, and actions as children (Buy more).

Use the same block everywhere credits show: your menu, Settings, Billing, Replies, and next to every AI action (Autofill, drafting replies). Credits always read the same way.
Put it right under the button that runs the AI action (not at the top of a menu of choices), and say the cost on that button too: "Look it up (1 AI credit)".
Next to an AI action, pass cost (every AI action uses 1 AI credit today): "This uses 1 AI credit." When there aren't enough, it says so in words with an alert icon: "This needs 1 AI credit. You have 0."
total is the month's credits plus any bought on top, so the bar never runs past full.
The bar's fill and its edge both hold 3:1 against the tint in every color theme, light and dark. Status is in the words, never the bar alone.
Solid tint only, never glass, and no gradient in the fill.
Words frame AI as help with the workflow: "AI credits", never "assists".
The bar shows what's used, like any usage meter, and the words say it two ways: "20% used" on top and "60 / 300" under the bar.
forecast is said plainly, never as a warning in red: "At this pace they run out around Oct 28, before the November 1 reset."