Merge Subscription Credits with API Credits - Frontend Updates

[AnthonyRonning]

Overview

This issue implements the frontend changes needed to support merged subscription and API credits. Users will now be able to:

1. Use their subscription credits via the API
2. Purchase API credits to extend their subscription when they run out
3. See combined credit information in the UI

Background

The billing server is being updated to merge subscription and API credits. The frontend needs updates to:

1. Reflect the new unified credit system in the UI
2. Update messaging around API credits and usage limits
3. Show combined credit information

Required Changes

1. Update BillingStatus Type (src/billing/billingApi.ts)

Add API credit balance to the billing status type:

export type BillingStatus = {
  // ... existing fields ...
  api_credit_balance?: number;  // NEW: API credit balance from billing server
};

2. Update Credit Usage Display (src/components/CreditUsage.tsx)

Currently shows only subscription usage. Options:

• Show combined view: "Plan Credits: X/Y | API Credits: Z available"
• Show subscription bar + separate API credit indicator
• Show unified progress bar that accounts for both pools

Consider showing API credit balance when subscription is close to exhausted (e.g., >75% used).

3. Update Usage Limit Dialogs

File: src/components/UpgradePromptDialog.tsx

When feature === "usage", update the messaging:

Current (lines 71-85):

• Free tier: "Upgrade to Pro"
• Pro: "Upgrade to Max"
• Max: "Contact us" / "Wait for next billing cycle"

New messaging should include:

• "Purchase API credits to keep chatting" option
• Button/link to API credits purchase page
• Explain that API credits can extend subscription usage

Example for Pro users hitting limit:

"You've reached your Pro plan's monthly limit. You can:
- Upgrade to Max for 10x more usage
- Purchase API credits to continue chatting until your next billing cycle"

4. Update BillingStatus.tsx Component

File: src/components/BillingStatus.tsx

When !billingStatus.can_chat:

• Currently shows "upgrade to keep chatting" or "Contact us" (for Max)
• Should also mention API credits as an option

Update getChatsText() function (lines 54-70):

if (!billingStatus.can_chat) {
  if (isMax) {
    return "Purchase API credits or contact us to increase limits";
  }
  return "Upgrade your plan or purchase API credits to keep chatting!";
}

5. Update Pricing Page (src/routes/pricing.tsx)

Update FAQ section to mention API usage with subscription:

• Add FAQ: "Can I use my subscription for API access?"
• Answer: "Yes! Pro, Max, and Team plans include API access. Your subscription credits work interchangeably with the API."

Update plan features in src/config/pricingConfig.tsx:

• Change "API Access" to be more descriptive
• E.g., "API Access (use your plan credits via API)"

6. Update API Credits Section (src/components/apikeys/ApiCreditsSection.tsx)

Update the description text (line ~173):

Current:

"$1 per 1,000 credits • Use for API requests"

New:

"$1 per 1,000 credits • Extends your subscription when plan credits run out"

Or more detailed:

"API credits work alongside your subscription. When your monthly plan credits are used up, API credits kick in automatically."

7. Update API Key Dashboard Messaging (src/components/apikeys/ApiKeyDashboard.tsx)

The upgrade prompt for non-Pro/Max/Team users (lines 85-130) should clarify:

• Subscription credits can be used via API
• API credits are for extending usage, not required for basic API access

Files to Modify

1. src/billing/billingApi.ts - Add api_credit_balance to type
2. src/components/CreditUsage.tsx - Show combined/both credit pools
3. src/components/UpgradePromptDialog.tsx - Add API credits option when hitting limits
4. src/components/BillingStatus.tsx - Mention API credits when can_chat is false
5. src/routes/pricing.tsx - Update FAQ
6. src/config/pricingConfig.tsx - Update API Access feature description
7. src/components/apikeys/ApiCreditsSection.tsx - Update description
8. src/components/apikeys/ApiKeyDashboard.tsx - Update messaging

UX Considerations

1. Don't block users unnecessarily: If can_chat is false but user has API credits, backend will now allow chatting. Frontend should not show blocking dialogs in this case.

2. Clear messaging: Users should understand that:

   • Subscription credits are used first
   • API credits kick in when subscription is exhausted
   • They can purchase API credits to extend their subscription

3. Credit visibility: Consider always showing API credit balance for paid users, not just on the API page.

Dependency

This depends on billing server changes that will:

1. Add api_credit_balance to the subscription status response
2. Implement fallback logic so can_chat: true when user has either subscription OR API credits