Billing API

Add a credit balance display to my app header.

Use the Bugrit API: GET /api/billing/status
Pass the API key in the "x-api-key" header (stored in BUGRIT_API_KEY env var).

The response has this structure:
- credits.remaining: number of credits left
- credits.included: total credits in plan
- credits.percentUsed: percentage used (0-100)
- tier: current plan name
- canScan: whether user can run scans
- needsUpgrade: whether they're running low

Display as "X / Y credits" with a progress bar.
Show yellow warning when percentUsed > 80.
Show red warning with "Buy Credits" link when percentUsed > 90.
Refresh every 60 seconds.

Create a "scan cost estimator" component that shows users what a scan will cost before they run it.

Use the Bugrit API: POST /api/billing/quote
Pass API key in "x-api-key" header.

Send this request body:
{
  "estimatedLines": 50000,
  "config": {
    "categories": ["linting", "security"],
    "aiFeatures": ["summary"]
  }
}

The response includes:
- options.categories: array of tool categories with creditCost for each
- options.aiFeatures: array of AI features with creditCost for each
- balance.remaining: user's current credits
- estimate.total: total cost for this scan
- estimate.breakdown: cost breakdown (base, lines, tools, ai)
- canAfford: boolean - can they run this scan?
- overage: if they'll go over, shows extra cost

Build a UI with:
1. Toggles for each tool category (security, accessibility, performance)
2. Toggles for AI features (summary, explanations, fix suggestions)
3. Live-updating cost estimate as user toggles options
4. Show breakdown: "Base: 1 + Lines: 5 + Security: 1 = 7 credits"
5. Green "Run Scan" button if canAfford is true
6. Red "Insufficient Credits" message with upgrade link if false
7. If there's overage, show: "This will use 3 overage credits ($0.90)"

Update the estimate on every toggle change.

Create a usage analytics dashboard for Bugrit credits.

Use the Bugrit API: GET /api/billing/usage?include=both
Pass API key in "x-api-key" header.
Add ?period=previous to see last month's data.

The response includes:
- summary.totalScans: number of scans run
- summary.totalCreditsUsed: credits consumed
- summary.totalIssuesFound: issues detected
- summary.byCategory: credits per tool category (linting, security, etc.)
- summary.topProjects: which projects used most credits
- transactions: array of individual credit transactions

Build a dashboard with:
1. Summary cards: Total Scans, Credits Used, Issues Found
2. Bar chart showing credits by category (use Recharts or Chart.js)
3. Pie chart of top projects by credit usage
4. Transaction table with: date, type, credits, scan details
5. Dropdown to switch between "Current Period" and "Previous Period"

Make it look professional with cards and proper spacing.

Create an auto top-up settings page for Bugrit credits.

First, fetch current settings:
GET /api/settings/subscription (returns current autoTopup config)

And available credit packages:
GET /api/credit-packages (returns array of packages with id, name, credits, price)

Build a settings form with:
1. Toggle switch: "Enable Auto Top-up"
2. Number input: "Top up when credits fall below" (default: 10)
3. Dropdown: "Package to purchase" (show packages from API)
4. Number input: "Maximum purchases per month" (1-10, default: 3)
5. Save button

On save, POST to /api/settings/subscription/auto-topup with:
{
  "enabled": true,
  "triggerThreshold": 10,
  "packageId": "pro-pack",
  "maxPerMonth": 3
}

Show success toast on save.
Add a note: "Requires a payment method on file."
Link to billing portal if no payment method.

Create a credit purchase page for Bugrit.

First, fetch available packages:
GET /api/credit-packages

Response is array of packages:
- id: package identifier
- name: display name (e.g., "Pro Pack")
- credits: number of credits
- price: price in dollars
- isFeatured: highlight this one

Build a page with:
1. Grid of package cards showing: name, credits, price, price per credit
2. Highlight the "isFeatured" package with a "Best Value" badge
3. Click a package → show confirmation modal
4. On confirm, POST to /api/billing/purchase-credits with { "packageId": "selected-id" }
5. Response has { "checkoutUrl": "..." } - redirect user there
6. After payment, user returns to your app with ?success=true or ?canceled=true

Handle the return URL:
- If ?success=true, show "Thanks! Credits added to your account"
- If ?canceled=true, show "Purchase canceled"

Add loading spinners during API calls.

Write a shell script for CI/CD that checks Bugrit credits before running a scan.

The script should:
1. Call GET https://bugrit.com/api/billing/status
2. Pass the BUGRIT_API_KEY environment variable in the x-api-key header
3. Parse the JSON response to get credits.remaining

Decision logic:
- If credits < 1: Print "ERROR: No credits remaining" and exit 1 (fail build)
- If credits < 5: Print "WARNING: Low credits (X remaining)" but continue
- Otherwise: Print "Credits OK: X remaining" and continue

Use curl and jq for JSON parsing.
Make sure it works in GitHub Actions, GitLab CI, and CircleCI.

Also create a GitHub Actions workflow step I can copy-paste.

When calling Bugrit APIs, always:
1. Store the API key in environment variable BUGRIT_API_KEY
2. Pass it in the "x-api-key" header
3. Never hardcode the API key in source code
4. Add .env to .gitignore