@wopr-network/platform-ui-core 1.27.8 → 1.27.9

package/src/components/admin/products/nav-editor.tsx

@@ -38,9 +38,7 @@ function newItem(sortOrder: number): NavItem {
 }
 
 export function NavEditor({ initial, onSave }: NavEditorProps) {
-  const [items, setItems] = useState<NavItem[]>(
-    [...initial].sort((a, b) => a.sortOrder - b.sortOrder),
-  );
+  const [items, setItems] = useState<NavItem[]>([...initial].sort((a, b) => a.sortOrder - b.sortOrder));
   const [saving, setSaving] = useState(false);
 
   function update(id: string, patch: Partial<NavItem>) {
@@ -84,14 +82,9 @@ export function NavEditor({ initial, onSave }: NavEditorProps) {
         <CardTitle>Navigation Items</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
-        {items.length === 0 && (
-          <p className="text-sm text-muted-foreground">No navigation items. Add one below.</p>
-        )}
+        {items.length === 0 && <p className="text-sm text-muted-foreground">No navigation items. Add one below.</p>}
         {items.map((item, index) => (
-          <div
-            key={item.id}
-            className="flex items-start gap-3 rounded-md border border-border bg-muted/30 p-3"
-          >
+          <div key={item.id} className="flex items-start gap-3 rounded-md border border-border bg-muted/30 p-3">
             <div className="flex flex-col gap-1 pt-1">
               <Button
                 variant="ghost"

package/src/components/admin/promotions/promotion-form.tsx

@@ -8,13 +8,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { toUserMessage } from "@/lib/errors";
 import type { Promotion, PromotionType, UserSegment, ValueType } from "@/lib/promotions-types";
@@ -51,21 +45,15 @@ export function PromotionForm({ initialData }: PromotionFormProps) {
   const [endsAt, setEndsAt] = useState(initialData?.endsAt ?? "");
 
   // Eligibility
-  const [firstPurchaseOnly, setFirstPurchaseOnly] = useState(
-    initialData?.firstPurchaseOnly ?? false,
-  );
+  const [firstPurchaseOnly, setFirstPurchaseOnly] = useState(initialData?.firstPurchaseOnly ?? false);
   const [minPurchaseCents, setMinPurchaseCents] = useState(initialData?.minPurchaseCents ?? 0);
   const [userSegment, setUserSegment] = useState<UserSegment>(initialData?.userSegment ?? "all");
 
   // Limits
-  const [unlimited, setUnlimited] = useState(
-    initialData ? initialData.totalUseLimit === null : true,
-  );
+  const [unlimited, setUnlimited] = useState(initialData ? initialData.totalUseLimit === null : true);
   const [totalUseLimit, setTotalUseLimit] = useState(initialData?.totalUseLimit ?? 1000);
   const [perUserLimit, setPerUserLimit] = useState(initialData?.perUserLimit ?? 1);
-  const [noBudgetCap, setNoBudgetCap] = useState(
-    initialData ? initialData.budgetCap === null : true,
-  );
+  const [noBudgetCap, setNoBudgetCap] = useState(initialData ? initialData.budgetCap === null : true);
   const [budgetCap, setBudgetCap] = useState(initialData?.budgetCap ?? 0);
 
   // Coupon
@@ -178,11 +166,7 @@ export function PromotionForm({ initialData }: PromotionFormProps) {
           <CardTitle className="text-sm">Value</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
-          <RadioGroup
-            value={valueType}
-            onValueChange={(v) => setValueType(v as ValueType)}
-            className="flex gap-4"
-          >
+          <RadioGroup value={valueType} onValueChange={(v) => setValueType(v as ValueType)} className="flex gap-4">
             <div className="flex items-center gap-2">
               <RadioGroupItem value="flat_credits" id="vt-flat" />
               <Label htmlFor="vt-flat" className="text-sm cursor-pointer">
@@ -249,22 +233,13 @@ export function PromotionForm({ initialData }: PromotionFormProps) {
             </div>
           )}
           <div className="flex items-center gap-2">
-            <Checkbox
-              id="no-expiry"
-              checked={noExpiry}
-              onCheckedChange={(v) => setNoExpiry(v === true)}
-            />
+            <Checkbox id="no-expiry" checked={noExpiry} onCheckedChange={(v) => setNoExpiry(v === true)} />
             <Label htmlFor="no-expiry">No expiry</Label>
           </div>
           {!noExpiry && (
             <div>
               <Label htmlFor="promo-ends">End date</Label>
-              <Input
-                id="promo-ends"
-                type="datetime-local"
-                value={endsAt}
-                onChange={(e) => setEndsAt(e.target.value)}
-              />
+              <Input id="promo-ends" type="datetime-local" value={endsAt} onChange={(e) => setEndsAt(e.target.value)} />
             </div>
           )}
         </CardContent>
@@ -328,11 +303,7 @@ export function PromotionForm({ initialData }: PromotionFormProps) {
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex items-center gap-2">
-            <Checkbox
-              id="unlimited"
-              checked={unlimited}
-              onCheckedChange={(v) => setUnlimited(v === true)}
-            />
+            <Checkbox id="unlimited" checked={unlimited} onCheckedChange={(v) => setUnlimited(v === true)} />
             <Label htmlFor="unlimited">Unlimited uses</Label>
           </div>
           {!unlimited && (
@@ -358,11 +329,7 @@ export function PromotionForm({ initialData }: PromotionFormProps) {
             />
           </div>
           <div className="flex items-center gap-2">
-            <Checkbox
-              id="no-budget-cap"
-              checked={noBudgetCap}
-              onCheckedChange={(v) => setNoBudgetCap(v === true)}
-            />
+            <Checkbox id="no-budget-cap" checked={noBudgetCap} onCheckedChange={(v) => setNoBudgetCap(v === true)} />
             <Label htmlFor="no-budget-cap">No budget cap</Label>
           </div>
           {!noBudgetCap && (

package/src/components/admin/roles-dashboard.tsx

@@ -6,22 +6,9 @@ import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import type { AdminRole, UserRoleAssignment } from "@/lib/admin-api";
 import { assignRole, getRolesList, revokeRole } from "@/lib/admin-api";
 import { toUserMessage } from "@/lib/errors";
@@ -86,10 +73,7 @@ function RoleRow({ assignment, onChanged }: RoleRowProps) {
         <code className="text-xs text-muted-foreground">{assignment.tenant_id}</code>
       </TableCell>
       <TableCell>
-        <Badge
-          variant="secondary"
-          className={`${roleBadgeClass(assignment.role)} inline-flex items-center gap-1`}
-        >
+        <Badge variant="secondary" className={`${roleBadgeClass(assignment.role)} inline-flex items-center gap-1`}>
           <RoleIcon role={assignment.role} />
           {assignment.role}
         </Badge>
@@ -134,9 +118,7 @@ function RoleCatalog({ roles }: { roles: AdminRole[] }) {
                 </Badge>
                 {role.is_system && <span className="text-xs text-muted-foreground">(system)</span>}
               </div>
-              {role.description && (
-                <p className="text-xs text-muted-foreground">{role.description}</p>
-              )}
+              {role.description && <p className="text-xs text-muted-foreground">{role.description}</p>}
             </div>
           </div>
         ))}
@@ -173,9 +155,7 @@ export function RolesDashboard() {
 
   function handleRoleChanged(userId: string, tenantId: string, newRole: string) {
     setAssignments((prev) =>
-      prev.map((a) =>
-        a.user_id === userId && a.tenant_id === tenantId ? { ...a, role: newRole } : a,
-      ),
+      prev.map((a) => (a.user_id === userId && a.tenant_id === tenantId ? { ...a, role: newRole } : a)),
     );
   }
 
@@ -247,20 +227,13 @@ export function RolesDashboard() {
                 <TableBody>
                   {filtered.length === 0 ? (
                     <TableRow>
-                      <TableCell
-                        colSpan={5}
-                        className="text-center text-muted-foreground py-8 text-sm"
-                      >
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
                         No users found.
                       </TableCell>
                     </TableRow>
                   ) : (
                     filtered.map((a) => (
-                      <RoleRow
-                        key={`${a.user_id}-${a.tenant_id}`}
-                        assignment={a}
-                        onChanged={handleRoleChanged}
-                      />
+                      <RoleRow key={`${a.user_id}-${a.tenant_id}`} assignment={a} onChanged={handleRoleChanged} />
                     ))
                   )}
                 </TableBody>

package/src/components/admin/suspend-dialog.tsx

@@ -52,13 +52,12 @@ export function SuspendDialog({ open, onOpenChange, user, onComplete }: SuspendD
           <DialogDescription>
             {isSuspended ? (
               <>
-                Reactivate <span className="font-mono text-terminal">{user.email}</span>? Their bots
-                will resume.
+                Reactivate <span className="font-mono text-terminal">{user.email}</span>? Their bots will resume.
               </>
             ) : (
               <>
-                Suspend <span className="font-mono text-terminal">{user.email}</span>? Their running
-                bots will be paused immediately.
+                Suspend <span className="font-mono text-terminal">{user.email}</span>? Their running bots will be paused
+                immediately.
               </>
             )}
           </DialogDescription>
@@ -83,13 +82,7 @@ export function SuspendDialog({ open, onOpenChange, user, onComplete }: SuspendD
             disabled={(!isSuspended && !reason.trim()) || submitting}
             onClick={handleConfirm}
           >
-            {submitting
-              ? isSuspended
-                ? "Reactivating..."
-                : "Suspending..."
-              : isSuspended
-                ? "Reactivate"
-                : "Suspend"}
+            {submitting ? (isSuspended ? "Reactivating..." : "Suspending...") : isSuspended ? "Reactivate" : "Suspend"}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/admin/tenant-notes-panel.tsx

@@ -120,9 +120,7 @@ export function TenantNotesPanel({ tenantId }: TenantNotesPanelProps) {
             <div key={note.id} className="px-4 py-3 space-y-1">
               <div className="flex items-center justify-between">
                 <span className="text-xs font-medium text-muted-foreground">{note.admin_user}</span>
-                <span className="text-xs text-muted-foreground">
-                  {relativeTime(note.created_at)}
-                </span>
+                <span className="text-xs text-muted-foreground">{relativeTime(note.created_at)}</span>
               </div>
               <p className="text-sm whitespace-pre-wrap">{note.content}</p>
             </div>

package/src/components/admin/tenant-row-actions.tsx

@@ -42,18 +42,12 @@ export function TenantRowActions({ user, onAction }: TenantRowActionsProps) {
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           {user.status === "active" ? (
-            <DropdownMenuItem
-              onClick={() => setSuspendOpen(true)}
-              className="text-amber-500 focus:text-amber-500"
-            >
+            <DropdownMenuItem onClick={() => setSuspendOpen(true)} className="text-amber-500 focus:text-amber-500">
               <ShieldBan className="size-4" />
               Suspend
             </DropdownMenuItem>
           ) : user.status === "suspended" ? (
-            <DropdownMenuItem
-              onClick={() => setSuspendOpen(true)}
-              className="text-terminal focus:text-terminal"
-            >
+            <DropdownMenuItem onClick={() => setSuspendOpen(true)} className="text-terminal focus:text-terminal">
               <ShieldCheck className="size-4" />
               Reactivate
             </DropdownMenuItem>
@@ -61,18 +55,8 @@ export function TenantRowActions({ user, onAction }: TenantRowActionsProps) {
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <SuspendDialog
-        open={suspendOpen}
-        onOpenChange={setSuspendOpen}
-        user={user}
-        onComplete={onAction}
-      />
-      <GrantCreditsDialog
-        open={grantOpen}
-        onOpenChange={setGrantOpen}
-        user={user}
-        onComplete={onAction}
-      />
+      <SuspendDialog open={suspendOpen} onOpenChange={setSuspendOpen} user={user} onComplete={onAction} />
+      <GrantCreditsDialog open={grantOpen} onOpenChange={setGrantOpen} user={user} onComplete={onAction} />
     </>
   );
 }

package/src/components/admin/tenant-table.tsx

@@ -7,14 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   type AdminUserSummary,
   bulkGrantCredits,
@@ -119,9 +112,7 @@ export function TenantTable() {
       setSelected(new Set());
       reload();
     } catch (err) {
-      toast.error(
-        `Failed to suspend tenants: ${err instanceof Error ? err.message : "Unknown error"}`,
-      );
+      toast.error(`Failed to suspend tenants: ${err instanceof Error ? err.message : "Unknown error"}`);
     }
   }
 
@@ -131,9 +122,7 @@ export function TenantTable() {
       setSelected(new Set());
       reload();
     } catch (err) {
-      toast.error(
-        `Failed to reactivate tenants: ${err instanceof Error ? err.message : "Unknown error"}`,
-      );
+      toast.error(`Failed to reactivate tenants: ${err instanceof Error ? err.message : "Unknown error"}`);
     }
   }
 
@@ -149,9 +138,7 @@ export function TenantTable() {
       setSelected(new Set());
       reload();
     } catch (err) {
-      toast.error(
-        `Failed to grant credits: ${err instanceof Error ? err.message : "Unknown error"}`,
-      );
+      toast.error(`Failed to grant credits: ${err instanceof Error ? err.message : "Unknown error"}`);
     }
   }
 
@@ -193,30 +180,18 @@ export function TenantTable() {
           <TableHeader>
             <TableRow className="bg-secondary crt-scanlines">
               <TableHead className="w-10">
-                <Checkbox
-                  checked={total > 0 && selected.size === total}
-                  onCheckedChange={toggleAll}
-                />
+                <Checkbox checked={total > 0 && selected.size === total} onCheckedChange={toggleAll} />
               </TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Email</TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Name</TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Status</TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Plan</TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider text-right">
-                Credits
-              </TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider text-right">
-                Agents
-              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider text-right">Credits</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider text-right">Agents</TableHead>
               <TableHead className="w-10" />
             </TableRow>
           </TableHeader>
-          <TableBody
-            className={cn(
-              "transition-opacity duration-150",
-              loading && users.length > 0 && "opacity-60",
-            )}
-          >
+          <TableBody className={cn("transition-opacity duration-150", loading && users.length > 0 && "opacity-60")}>
             {loading && users.length === 0 ? (
               Array.from({ length: 8 }).map((_, i) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable ID
@@ -242,19 +217,14 @@ export function TenantTable() {
                     &gt; No users found
                     <span className="animate-ellipsis" />
                   </p>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Try adjusting your search query
-                  </p>
+                  <p className="text-xs text-muted-foreground mt-1">Try adjusting your search query</p>
                 </TableCell>
               </TableRow>
             ) : (
               users.map((user) => (
                 <TableRow
                   key={user.id}
-                  className={cn(
-                    "h-10 hover:bg-secondary/50",
-                    selected.has(user.tenant_id) && "bg-terminal/5",
-                  )}
+                  className={cn("h-10 hover:bg-secondary/50", selected.has(user.tenant_id) && "bg-terminal/5")}
                 >
                   <TableCell>
                     <Checkbox
@@ -275,17 +245,10 @@ export function TenantTable() {
                     </span>
                   </TableCell>
                   <TableCell className="text-xs text-muted-foreground">{user.role}</TableCell>
-                  <TableCell
-                    className={cn(
-                      "text-right font-mono text-xs",
-                      creditColor(user.credit_balance_cents),
-                    )}
-                  >
+                  <TableCell className={cn("text-right font-mono text-xs", creditColor(user.credit_balance_cents))}>
                     {formatCreditStandard(user.credit_balance_cents / 100)}
                   </TableCell>
-                  <TableCell className="text-right text-xs text-muted-foreground">
-                    {user.agent_count}
-                  </TableCell>
+                  <TableCell className="text-right text-xs text-muted-foreground">{user.agent_count}</TableCell>
                   <TableCell>
                     <TenantRowActions user={user} onAction={reload} />
                   </TableCell>

package/src/components/auth/auth-redirect.tsx

@@ -1,19 +1,27 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { useSession } from "@/lib/auth-client";
 import { getBrandConfig } from "@/lib/brand-config";
+import { sanitizeRedirectUrl } from "@/lib/utils";
 
+/**
+ * Redirects authenticated users away from auth pages.
+ * Checks callbackUrl param first, falls back to brand homePath.
+ */
 export function AuthRedirect() {
   const { data: session, isPending } = useSession();
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   useEffect(() => {
     if (!isPending && session) {
-      router.replace(getBrandConfig().homePath);
+      const callback = searchParams.get("callbackUrl");
+      const homePath = getBrandConfig().homePath ?? "/dashboard";
+      router.replace(callback ? sanitizeRedirectUrl(callback) : homePath);
     }
-  }, [isPending, session, router]);
+  }, [isPending, session, router, searchParams]);
 
   return null;
 }

package/src/components/auth/email-verification-result-banner.tsx

@@ -53,9 +53,7 @@ export function EmailVerificationResultBanner() {
   return (
     <Banner variant="destructive" role="alert">
       <XCircle className="size-4 shrink-0" />
-      <span className="flex-1">
-        Email verification failed. Please try again or contact support.
-      </span>
+      <span className="flex-1">Email verification failed. Please try again or contact support.</span>
       <Button
         variant="ghost"
         size="xs"

package/src/components/auth/resend-verification-button.tsx

@@ -11,11 +11,7 @@ interface ResendVerificationButtonProps {
   className?: string;
 }
 
-export function ResendVerificationButton({
-  email,
-  variant = "terminal",
-  className,
-}: ResendVerificationButtonProps) {
+export function ResendVerificationButton({ email, variant = "terminal", className }: ResendVerificationButtonProps) {
   const [cooldown, setCooldown] = useState(0);
   const [sending, setSending] = useState(false);
   const [sent, setSent] = useState(false);
@@ -61,11 +57,7 @@ export function ResendVerificationButton({
     }
   }, [email, cooldown, sending]);
 
-  const buttonText = sending
-    ? "Sending..."
-    : cooldown > 0
-      ? `Resend in ${cooldown}s`
-      : "Resend verification email";
+  const buttonText = sending ? "Sending..." : cooldown > 0 ? `Resend in ${cooldown}s` : "Resend verification email";
 
   return (
     <div className="flex flex-col gap-1">

package/src/components/auth/wopr-wordmark.tsx

@@ -6,9 +6,7 @@ export function BrandWordmark() {
   const tagline = getBrandConfig().tagline;
   return (
     <div className="mb-6 flex flex-col items-center gap-1">
-      <span className="text-2xl font-bold uppercase tracking-[0.3em] text-terminal">
-        {brandName()}
-      </span>
+      <span className="text-2xl font-bold uppercase tracking-[0.3em] text-terminal">{brandName()}</span>
       <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground">{tagline}</span>
     </div>
   );

package/src/components/billing/add-payment-method-dialog.tsx

@@ -74,8 +74,7 @@ export function AddPaymentMethodDialog({
         <DialogHeader>
           <DialogTitle>{orgId ? "Add org payment method" : "Add payment method"}</DialogTitle>
           <DialogDescription>
-            Your card details are handled securely by Stripe. We never see or store your card
-            number.
+            Your card details are handled securely by Stripe. We never see or store your card number.
           </DialogDescription>
         </DialogHeader>
 

package/src/components/billing/affiliate-dashboard.tsx

@@ -30,10 +30,7 @@ export function AffiliateDashboard() {
     setLoading(true);
     setError(null);
     try {
-      const [statsData, referralsData] = await Promise.all([
-        getAffiliateStats(),
-        getAffiliateReferrals(),
-      ]);
+      const [statsData, referralsData] = await Promise.all([getAffiliateStats(), getAffiliateReferrals()]);
       setStats(statsData);
       setReferrals(referralsData.referrals);
       setTotal(referralsData.total);
@@ -140,9 +137,7 @@ export function AffiliateDashboard() {
     <div className="max-w-3xl space-y-6">
       <div>
         <h1 className="text-2xl font-bold tracking-tight">Refer & Earn</h1>
-        <p className="text-sm text-muted-foreground">
-          Share your link and earn credits when friends join
-        </p>
+        <p className="text-sm text-muted-foreground">Share your link and earn credits when friends join</p>
       </div>
 
       {/* Referral link card */}
@@ -205,9 +200,7 @@ export function AffiliateDashboard() {
         </Card>
         <Card>
           <CardContent className="pt-6 text-center">
-            <div className="text-3xl font-bold text-emerald-500">
-              {formatCents(stats.totalEarnedCents)}
-            </div>
+            <div className="text-3xl font-bold text-emerald-500">{formatCents(stats.totalEarnedCents)}</div>
             <p className="text-xs text-muted-foreground mt-1">earned</p>
           </CardContent>
         </Card>
@@ -280,12 +273,7 @@ export function AffiliateDashboard() {
                 {error && <p className="text-sm text-destructive">{error}</p>}
                 {offset < total && (
                   <div className="pt-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={handleLoadMore}
-                      disabled={loadingMore}
-                    >
+                    <Button variant="outline" size="sm" onClick={handleLoadMore} disabled={loadingMore}>
                       {loadingMore ? "Loading more..." : "Load more"}
                     </Button>
                   </div>

package/src/components/billing/amount-selector.tsx

@@ -31,9 +31,7 @@ export function AmountSelector({ onSelect }: AmountSelectorProps) {
             }}
             className={cn(
               "rounded-md border p-3 text-lg font-bold transition-colors hover:bg-accent",
-              selected === amt && !custom
-                ? "border-primary bg-primary/5 ring-1 ring-primary"
-                : "border-border",
+              selected === amt && !custom ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border",
             )}
           >
             ${amt}

package/src/components/billing/auto-topup-card.tsx

@@ -6,13 +6,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import type { AutoTopupInterval, AutoTopupSettings } from "@/lib/api";
@@ -73,10 +67,7 @@ export function AutoTopupCard() {
     load();
   }, [load]);
 
-  async function save(
-    update: Parameters<typeof updateAutoTopupSettings>[0],
-    prevSettings: AutoTopupSettings,
-  ) {
+  async function save(update: Parameters<typeof updateAutoTopupSettings>[0], prevSettings: AutoTopupSettings) {
     setSaving(true);
     setError(null);
     try {

package/src/components/billing/buy-credits-panel.tsx

@@ -134,9 +134,7 @@ export function BuyCreditsPanel() {
           </p>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-muted-foreground">
-            Credit purchases are not available at this time.
-          </p>
+          <p className="text-sm text-muted-foreground">Credit purchases are not available at this time.</p>
         </CardContent>
       </Card>
     );
@@ -146,9 +144,7 @@ export function BuyCreditsPanel() {
     <Card>
       <CardHeader>
         <CardTitle>Buy Credits</CardTitle>
-        <p className="text-xs text-muted-foreground">
-          Every purchase resets your 7-day dividend window
-        </p>
+        <p className="text-xs text-muted-foreground">Every purchase resets your 7-day dividend window</p>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
@@ -169,19 +165,13 @@ export function BuyCreditsPanel() {
             >
               <span className="text-lg font-bold">{tier.label}</span>
               {tier.bonusPercent > 0 && (
-                <Badge className="bg-primary/15 text-primary border-primary/25 text-xs">
-                  +{tier.bonusPercent}%
-                </Badge>
+                <Badge className="bg-primary/15 text-primary border-primary/25 text-xs">+{tier.bonusPercent}%</Badge>
               )}
             </motion.button>
           ))}
         </div>
         {error && <p className="text-sm text-destructive">{error}</p>}
-        <Button
-          onClick={handleCheckout}
-          disabled={selected === null || loading}
-          className="w-full sm:w-auto"
-        >
+        <Button onClick={handleCheckout} disabled={selected === null || loading} className="w-full sm:w-auto">
           {loading ? "Redirecting..." : "Buy credits"}
         </Button>
       </CardContent>