[Billing Credits] PR-I3: Credit usage card

[Vu-John]

[Billing Credits] PR-I3: Credit usage card

Adds a usage card to the organization billing page. Two stacked progress
bars (daily limit + paid credits) gated on user state. Replaces the
placeholder copy that previously sat above the plan-comparison table.

Visual

┌─ Credit usage ──────────────────────────────────┐
│ Your model credits                  [Top up]    │
│ Credits are linked to your user, not the org.   │
│                                                 │
│ Daily limit               9% used · resets 11h  │
│ ▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
│                                                 │
│ Paid credits                        30% used    │
│ ▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
└─────────────────────────────────────────────────┘

The paid bar is hidden until the user's first top-up. Both bars use a
bare percent ("X% used") with no dollar values surfaced anywhere on
the card.

Changes

• New useCreditBalance hook. Calls the server's read-side balance
  endpoint, normalizes defensively, and useMemos the result so
  consumers don't churn on every parent render. Auth-gated via
  useConvexAuth().isAuthenticated + Convex "skip" sentinel.
• New CreditBalanceCard: header + sub-line clarifying credits are
  user-scoped (not org-scoped) + two usage bars + Top up button.
• New TopupActionButton: renders the Top up button only when the
  preset endpoint resolves with at least one preset. Wrapped in an
  inner error boundary so a missing-function error collapses to no
  button rather than crashing the whole card.
• OrganizationBillingSection slots the card in above the
  plan-comparison view, wrapped in <ErrorBoundary fallback={null}>,
  and removes a stale placeholder note that surfaced an outdated
  per-user-per-day pricing line.
• Imports the relocated ErrorBoundary from
  @/components/ui/error-boundary (moved out of evals/ in PR-I2 —
  no longer a domain-specific primitive).

Why no dollar values

The card surfaces only percentages. Showing dollar amounts on the
paid-credits row would invite the user to compute a wrong remaining
dollar value (since the bar's denominator is in the credited domain,
not the paid domain). Bare percentages match the well-validated
gas-gauge UX pattern used by similar credit pages — the row label
("Daily limit", "Paid credits") tells the user what the pool is, and
the percent tells them where they are within it.

Tests

• CreditBalanceCard.test.tsx: skeleton loading state, hidden paid
  bar before any top-up, paid row renders as % used only,
  top-up button opens dialog, regression guard that neither row
  ever renders a $ character, lock-in test for the user-scope
  sub-line copy.
• TopupActionButton.test.tsx: renders only when presets are
  available, hides on loading + empty, click handler.
• OrganizationsTab.billing.test.tsx: extended convex/react mock
  to include useQuery stub for the new auth-gated hook.

Stack

• PR-I1 ✅
• PR-I2 ✅
• This PR ← you are here

Notes

• Marked draft. Backend Fix 6 (response payload trim) shipped in
  mcpjam-backend#184; remaining gate is full backend deploy to
  production.
• The activity-table feature considered earlier was dropped in design
  review — Stripe email receipts are the source of truth for payment
  history; in-inspector duplication added complexity and surface area
  without a clear win.

Risk

Low. Net-new card on the billing page; only existing surface changed
is the removal of a stale tooltip line in the plan-comparison table
and a small semantic tightening of the shared ErrorBoundary
primitive (in PR-I2). The card handles missing data, missing
endpoints, and unauthenticated states without crashing.

[chelojimenez]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[Vu-John]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• [Billing Credits] PR-I4: Wallet-locked + concurrency error states #1995
• [Billing Credits] PR-I3: Credit usage card #1990 👈 (View in Graphite)
• [Billing Credits] PR-I2: Top-up dialog + chat banner CTA #1989
• [Billing Credits] PR-I1: Error type plumbing #1988
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Internal preview

Preview URL: https://mcp-inspector-pr-1990.up.railway.app
Deployed commit: a659407
PR head commit: 0c7f604
Backend target: staging fallback.
Health: ❌ Convex unreachable — see upsert-preview job logs (staging may need convex deploy)
Access is employee-only in non-production environments.

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.