Screens / The app around the agent

Billing and usage

Show where the subscription stands, what has been used against each limit, and what a change of plan would take away.

For: Account owners and admins.

Markdown

3 ways to lay it out

1. Plan, seats and meters

Pick it when: The default: the subscription on top, what has been used below it.

The subscription status across the top; usage meters and a spend chart beneath.

Subscription statusProPlan, seats paid against seats used, the card on file, and when it renews or ends.
Usage metersProWhat's used against each limit: seats, an environment's daily API allowance, agent work.
Spend breakdownProAI spend over time, split by model, agent or feature.
Stat cardProOne metric with its change against a named period.

Install plan, seats and meters

Pro and Premium items need a licence key; free ones install as they are.

2. Choose a plan, see the cost of leaving one

Pick it when: The person is changing plan or seats.

Plans side by side; confirming a smaller one opens a dialog listing what is lost and the new total.

Plan pickerProChoose a plan and seats.
Downgrade impactProWhat a smaller plan takes away, the new monthly total and when it takes effect.
Alert dialogProA dialog that stops for a decision.

Install choose a plan, see the cost of leaving one

Pro and Premium items need a licence key; free ones install as they are.

3. A limit reached inside the app

Pick it when: The person meets a limit while working and needs to know which one and when it resets.

A notice above the composer naming the limit; the run control stays and says why it can't be used.

Service noticeProA notice about the service itself: a usage limit, a model that's down.
Usage metersProThe meter behind the notice.
LockedFreeRun stays and says which limit it is and when it resets.

Install a limit reached inside the app

Pro and Premium items need a licence key; free ones install as they are.

Rules that matter most here

Unknown stays unknown
A meter whose figure isn't known says so; it isn't drawn as zero.
Say what can and can't be undone
Moving to a smaller plan lists what is lost, what happens to what used it, and the date it takes effect.
Nothing is pre-selected in a decision
The plan picker doesn't start on the paid plan; the person chooses.

Already covered elsewhere

Pattern: Agent cost guard: estimates, budgets and spend

Brief for a coding agent

Paste this into the agent that builds the screen. The docs MCP server returns the same text from get_screen.

Build billing and usage with Candor UI.
SubscriptionStatus is the top: plan, seats paid against used, the card on file and the renewal or end date.
UsageMeters shows used against each limit. Where a figure is unknown, say so; don't draw an empty bar.
SpendBreakdown splits AI spend by model, agent or feature, from the service's own figures.
PlanPicker chooses plan and seats and starts with nothing chosen. Before a smaller plan is confirmed, DowngradeImpact says what is lost and the new total.
At a limit, put a ServiceNotice above the composer and keep Run in Locked, naming the limit and its reset.
Candor draws the screens. Taking payment and the card itself stay with your billing provider.

Start from the "Plan, seats and meters" layout: The subscription status across the top; usage meters and a spend chart beneath.
Candor items: subscription-status (https://candor.themethodic.com/docs/subscription-status.md), usage-meters (https://candor.themethodic.com/docs/usage-meters.md), spend-breakdown (https://candor.themethodic.com/docs/spend-breakdown.md), stat-card (https://candor.themethodic.com/docs/stat-card.md).
Install: npx candor-ui add subscription-status usage-meters spend-breakdown stat-card
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.