clean up billing page: remove fluff, fix auto-refresh flicker

- Remove "How billing works" explainer card
- Remove verbose description text from auto-topup and current spend
- Remove redundant billing portal button from auto-topup card
- Stop 30s auto-refresh on credits (caused page flicker)
- Change default auto-topup threshold from €2 to €5

Made-with: Cursor

Author: albertsalgueda

src/app/(dashboard)/[orgSlug]/billing/page.tsx

@@ -12,68 +12,28 @@ import { AutoTopupSettings } from '@/components/billing/auto-topup-settings'
 import { CreditActivity } from '@/components/billing/credit-activity'
 import { UsageAnalytics } from '@/components/billing/usage-analytics'
 import { Loading } from '@/components/shared/loading'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { ArrowDownToLine, CreditCard, Sparkles } from 'lucide-react'
 
 export default function BillingPage() {
   const { usage, isLoading: usageLoading } = useUsage()
   const { credits, isLoading: creditsLoading, mutate } = useCredits()
   const { instances, isLoading: instancesLoading } = useInstances()
 
-  if (usageLoading || creditsLoading || instancesLoading) return <Loading />
-
-  const topUpNowLabel = credits
-    ? `Top Up €${credits.auto_topup_amount_eur} Now`
-    : 'Top Up Now'
+  if (creditsLoading || instancesLoading) return <Loading />
 
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div className="space-y-1">
-          <h1 className="text-2xl font-bold">Billing</h1>
-          <p className="max-w-3xl text-sm text-muted-foreground">
-            Keep an eye on your AI credit balance, monthly usage, and the automatic refill setup that buys more credits when your balance gets low.
-          </p>
-        </div>
+        <h1 className="text-2xl font-bold">Billing</h1>
         <div className="flex items-center gap-2">
           <AddCreditsButton
             amountEur={credits?.auto_topup_amount_eur ?? 20}
-            label={topUpNowLabel}
+            label="+ Add Credits"
             onSuccess={() => mutate()}
           />
           <BillingPortalButton />
         </div>
       </div>
 
-      <Card className="border border-border/70 bg-gradient-to-br from-muted/40 via-background to-background">
-        <CardHeader>
-          <CardTitle>How billing works</CardTitle>
-        </CardHeader>
-        <CardContent className="grid gap-4 lg:grid-cols-3">
-          <div className="rounded-xl border border-border/70 bg-background/80 p-4">
-            <Sparkles className="h-5 w-5 text-muted-foreground" />
-            <p className="mt-3 font-medium">AI usage spends credits</p>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Every model request deducts from your credit balance, so the balance card tells you how much AI usage you can still run.
-            </p>
-          </div>
-          <div className="rounded-xl border border-border/70 bg-background/80 p-4">
-            <ArrowDownToLine className="h-5 w-5 text-muted-foreground" />
-            <p className="mt-3 font-medium">Auto top-up refills low balances</p>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Choose a refill amount and a threshold. When the balance drops below that threshold, we charge your default card and add more credits automatically.
-            </p>
-          </div>
-          <div className="rounded-xl border border-border/70 bg-background/80 p-4">
-            <CreditCard className="h-5 w-5 text-muted-foreground" />
-            <p className="mt-3 font-medium">Cards and invoices live in Stripe</p>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Use the billing portal to update payment methods, recover from failed top-ups, and review invoices in one place.
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-
       <div className="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
         <CurrentSpend
           baseCost={usage?.base_cost ?? 0}

src/app/api/billing/credits/route.ts

@@ -24,7 +24,7 @@ export async function GET() {
     credit_balance_eur: orgData ? Number(orgData.credit_balance_eur) : 0,
     auto_topup_enabled: orgData?.auto_topup_enabled ?? true,
     auto_topup_amount_eur: orgData ? Number(orgData.auto_topup_amount_eur) : 20,
-    auto_topup_threshold_eur: orgData ? Number(orgData.auto_topup_threshold_eur) : 2,
+    auto_topup_threshold_eur: orgData ? Number(orgData.auto_topup_threshold_eur) : 5,
     auto_topup_failed: orgData?.auto_topup_failed ?? false,
     recent_transactions: transactions ?? [],
   })

src/components/billing/auto-topup-settings.tsx

@@ -15,7 +15,6 @@ import {
 } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
 import { AlertTriangle, Loader2 } from 'lucide-react'
-import { BillingPortalButton } from '@/components/billing/billing-portal-button'
 import { AddCreditsButton } from '@/components/billing/add-credits-button'
 
 interface AutoTopupSettingsProps {
@@ -101,22 +100,12 @@ export function AutoTopupSettings({
         </div>
       </CardHeader>
       <CardContent className="space-y-5">
-        <div className="rounded-xl border border-border/70 bg-muted/30 p-4">
-          <p className="text-sm font-medium">
-            {enabled
-              ? `Currently adds ${formatCurrency(amountEur)} when balance drops below ${formatCurrency(thresholdEur)}.`
-              : 'Auto top-up is currently off.'}
-          </p>
-          <p className="mt-2 text-sm text-muted-foreground">
-            Set the refill amount and the low-balance trigger, then enable the setup. If a payment fails, update your card and save again to retry.
-          </p>
-          {failed && (
-            <div className="mt-3 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
-              <AlertTriangle className="h-4 w-4 shrink-0" />
-              Last auto top-up failed. Update your payment method, then save this setup again.
-            </div>
-          )}
-        </div>
+        {failed && (
+          <div className="flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+            <AlertTriangle className="h-4 w-4 shrink-0" />
+            Last auto top-up failed. Update your payment method and save again to retry.
+          </div>
+        )}
 
         <div className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-2">
@@ -177,15 +166,6 @@ export function AutoTopupSettings({
           />
         </div>
 
-        <div className="rounded-xl border border-dashed border-border px-4 py-3">
-          <p className="text-sm font-medium">Need to update the card used for top-ups?</p>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Open the Stripe billing portal to change your default payment method or review invoices.
-          </p>
-          <div className="mt-3">
-            <BillingPortalButton />
-          </div>
-        </div>
       </CardContent>
     </Card>
   )

src/components/billing/current-spend.tsx

@@ -68,9 +68,6 @@ export function CurrentSpend({
             <p className="mt-1 text-xl font-semibold">{formatCurrency(baseCost)}</p>
           </div>
         </div>
-        <p className="text-sm text-muted-foreground">
-          Credits cover AI usage. Compute and plan charges are shown separately so it is clear what is prepaid vs billed monthly.
-        </p>
       </CardContent>
     </Card>
   )

src/hooks/use-credits.ts

@@ -25,7 +25,7 @@ export function useCredits() {
   const { data, error, isLoading, mutate } = useSWR<CreditInfo>(
     '/api/billing/credits',
     fetcher,
-    { refreshInterval: 30_000 },
+    { revalidateOnFocus: false },
   )
 
   return {

src/lib/db/schema.ts

@@ -58,7 +58,7 @@ export const organizations = pgTable('organizations', {
   credit_balance_eur: numeric('credit_balance_eur', { precision: 10, scale: 6 }).notNull().default('0'),
   auto_topup_enabled: boolean('auto_topup_enabled').notNull().default(true),
   auto_topup_amount_eur: numeric('auto_topup_amount_eur', { precision: 10, scale: 2 }).notNull().default('20'),
-  auto_topup_threshold_eur: numeric('auto_topup_threshold_eur', { precision: 10, scale: 2 }).notNull().default('2'),
+  auto_topup_threshold_eur: numeric('auto_topup_threshold_eur', { precision: 10, scale: 2 }).notNull().default('5'),
   credit_limit_eur: numeric('credit_limit_eur', { precision: 10, scale: 2 }),
   auto_topup_failed: boolean('auto_topup_failed').notNull().default(false),
   created_at: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),