Adds a new billing overview at /settings/billing inspired by Stripe /
OpenAI / Anthropic billing pages. Surfaces current plan, payment method,
recent invoices, and a usage-at-a-glance section with a CTA to the
detailed /settings/usage page.
Gated by the new new-billing-dashboard LaunchDarkly flag (default
off — production users continue to land on the legacy plan picker via
the /settings/billing -> /settings/billing/plans redirect added in the
previous PR). Flip the flag on per-user in LD for internal testing,
then flip globally once hermes PR #9975 + the Stripe-endpoints follow-up
ship and the mock procedures are swapped for real Apollo calls.
Sections:
- Plan summary card — state-aware copy across active / trial / past-due
/ cancel-at-period-end / free / enterprise. CTAs to /plans and the
Stripe Customer Portal
- Payment method card — Visa/Mastercard/etc. ending in last4, expiry,
auto-warns on expired/expiring-soon. Empty state for free tier
- Recent invoices card — last 5 invoices with status badges, PDF
download links, "View all" to Stripe Portal
- Usage card — header reads "$X.XX usage charges this period" + within-
/above-plan copy. 4 KPI tiles (tool calls + quota bar, sessions,
triggers, active users) and a "View detailed usage" link
Implementation notes:
- Every interactive element uses tracked Button/Link/Tabs/Select
from ~/components/tracked
- All queries handle
error with + tracked retry events
- All mutations use mutateAsync + try/catch + showApolloErrorToast
- Theme tokens only (success/warning/destructive, chart-1..5) — no
hardcoded colors
- Components have hydration-safe outer shells (consistent DOM across
loading / loaded / empty states) per the MembersContent pattern
- Plans page's "Back to billing" link is now flag-conditional to avoid
a redirect loop when the dashboard is disabled
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com