Design exploration: AI credit usage, limits, and purchase flows

[shaunandrews]

Important

This is a design exploration, not a merge recommendation. It is intentionally broader and more prototype-oriented than production code should be. The goal is to make the pricing, usage, limit, lockout, and purchase states tangible enough to evaluate together.

Individual pieces are deliberately easy to cherry-pick or reimplement. If the team decides the whole direction is close enough to productionize and ship, that would be great too—but this PR should not be treated as ready to ship in its current form.

This exploration asks how Studio’s agentic UI should communicate AI credit consumption before, during, and after a user reaches their allowance. It covers the settings surface, persistent sidebar messaging, an in-composer warning, hard lockout states, a simulated credit-purchase handoff, and purchase confirmation.

Proposed Changes

• Make the Usage settings tab a simpler, meter-led summary of monthly allowance, extra AI credits, and preview-site usage.
• Lead each meter with the dollar value still available and put the credit count underneath, at a rate of $1 to 100 credits.
• Represent monthly allowance and purchased credits as separate pools, including the case where credits are purchased before the monthly allowance is exhausted.
• Surface persistent usage messages in the sidebar at 80% and 90%.
• Attach a compact, yellow-tinted warning strip to the composer at 90%.
• Replace the composer with a purchase-focused message when no credits remain, with distinct monthly-allowance and purchased-credit copy.
• Keep adding credits available from settings, warnings, and lockout states.
• Compare three one-time purchase selectors: fixed cards, presets plus a custom amount, and a range slider with an editable value.
• Prototype a simulated handoff to WordPress.com checkout.
• Confirm a simulated purchase with a success toast.
• Include explicit prototype controls for reviewing every usage state and purchase variant.

Review guide

The most valuable review is on the product and interaction decisions:

1. Information hierarchy: Is the simplified Usage panel enough, and are monthly allowance and extra credits understandable as separate pools?
2. Threshold behavior: Is a sidebar message at 80% plus an attached composer strip at 90% the right escalation?
3. Lockout behavior: Should chat and New chat be unavailable when all credit pools are exhausted?
4. Copy: Do the monthly and extra-credit exhaustion messages explain the next step without feeling like errors?
5. Purchase trust: Does the modal clearly set the expectation that checkout happens on WordPress.com?
6. Purchase amount selection: Which selector best balances speed, flexibility, and clarity that one dollar buys 100 credits?
7. Message system: Sidebar messages currently carry semantic intent, but the shared card presentation remains visually neutral. Is that desirable, or should warning/success intent become visible there?

Okay to skim

• The local prototype scenario store and state-switching controls.
• Screenshot binaries under docs/design-explorations/usage-interfaces/.
• The simulated purchase mutation; it exists only to make the end-to-end interaction reviewable.

Screenshots

Purchase UI variants

These are intentionally competing directions presented together for design review, not three interfaces intended to ship.

Fixed cards	Presets + custom amount	Editable slider

Core journey

Usage approaching the limit	Warning attached to the composer

Monthly allowance exhausted	Extra credits exhausted

Purchase handoff	Purchase confirmation

Complete 17-state gallery

Monthly allowance states

36%	80%	90%	100%

Extra-credit states

In reserve	36%	80%	90%	100%

Chat states

Monthly 80%	Monthly 90%

Extra credits 80%	Extra credits 90%

Monthly lockout	Extra-credit lockout

Purchase flow

Add credits	Credits added