refactor(user-settings): update terminology for auto-reload and credit features

- Replaced instances of "auto-reload" with "top-ups" for consistency and clarity across user settings and pricing sections.
- Enhanced user feedback messages related to credit balance and top-up settings.
- Improved comments and descriptions in the Purchase History and Credit Balance Display components for better understanding.

surfsense_web/app/dashboard/[workspace_id]/user-settings/components/PurchaseHistoryContent.tsx

@@ -108,9 +108,8 @@ function normalizeCreditPurchase(p: CreditPurchase): UnifiedPurchase {
 function formatGranted(p: UnifiedPurchase): string {
 	if (p.kind === "credits") {
 		const dollars = p.granted / 1_000_000;
-		// Credit packs are always whole dollars at the moment, but future
-		// fractional grants (refunds, partial top-ups, auto-reload) shouldn't
-		// silently round to "$0".
+		// Credit packs are always whole dollars today, but future fractional grants
+		// such as refunds or low-balance refills shouldn't silently round to "$0".
 		if (dollars >= 1) return `$${dollars.toFixed(2)} of credit`;
 		if (dollars > 0) return `$${dollars.toFixed(3)} of credit`;
 		return "$0 of credit";

surfsense_web/components/layout/ui/sidebar/CreditBalanceDisplay.tsx

@@ -27,7 +27,7 @@ function formatUsd(micros: number): string {
  * premium-credit meters. Values come from Zero (live-replicated from Postgres)
  * as integer micro-USD (1_000_000 == $1.00). A low-balance warning highlights
  * the amount when it falls below $0.50 so the user knows to top up or enable
- * auto-reload.
+ * automatic top-ups.
  */
 export function CreditBalanceDisplay() {
 	const isAnonymous = useIsAnonymous();
@@ -46,7 +46,7 @@ export function CreditBalanceDisplay() {
 					"font-medium tabular-nums",
 					isLow ? "text-amber-600 dark:text-amber-500" : "text-foreground"
 				)}
-				title={isLow ? "Low balance — buy credits or enable auto-reload" : undefined}
+				title={isLow ? "Low balance: add credits or enable top-ups" : undefined}
 			>
 				{formatUsd(balanceMicros)}
 			</span>

surfsense_web/components/pricing/pricing-section.tsx

@@ -41,7 +41,7 @@ const demoPlans = [
 			"Premium models like GPT-5.5, Claude Sonnet 5, Gemini 3.1 Pro billed at provider cost",
 			"Scheduled and event-triggered agents for briefs, alerts, and monitoring",
 			"Write results back to Notion, Slack, Linear, and Jira",
-			"Top up any amount, $1 buys $1 of credit, optional auto-reload",
+			"Add credit any time. $1 buys $1 of credit, with optional automatic refills",
 			"Priority support on Discord",
 		],
 		description: "",
@@ -95,7 +95,7 @@ const faqData: FAQSection[] = [
 			{
 				question: "How does Pay As You Go work?",
 				answer:
-					"There is no monthly subscription. Start with $5 of free credit, and when you need more, top up any amount. $1 buys exactly $1 of credit, added to your balance immediately. You can enable auto-reload to top up automatically when your balance runs low, and turn it off any time.",
+					"There is no monthly subscription. Start with $5 of free credit, and when you need more, add any amount. $1 buys exactly $1 of credit, added to your balance immediately. You can enable automatic refills when your balance runs low, and turn them off any time."
 			},
 			{
 				question: "What happens if I run out of credit?",

surfsense_web/components/settings/auto-reload-settings.tsx

@@ -2,15 +2,15 @@
 
 import { useQuery as useZeroQuery } from "@rocicorp/zero/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertTriangle, CreditCard, RefreshCw } from "lucide-react";
+import { AlertTriangle, Info } from "lucide-react";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import { stripeApiService } from "@/lib/apis/stripe-api.service";
@@ -69,7 +69,7 @@ export function AutoReloadSettings() {
 		const setupResult = searchParams.get("auto_reload_setup");
 		if (!setupResult) return;
 		if (setupResult === "success") {
-			toast.success("Card saved. You can now enable auto-reload.");
+			toast.success("Card saved. You can now enable top-ups.");
 			queryClient.invalidateQueries({ queryKey: ["auto-reload-settings"] });
 		} else if (setupResult === "cancel") {
 			toast.info("Card setup canceled.");
@@ -92,19 +92,19 @@ export function AutoReloadSettings() {
 		mutationFn: stripeApiService.updateAutoReloadSettings,
 		onSuccess: (updated) => {
 			queryClient.setQueryData(["auto-reload-settings"], updated);
-			toast.success(updated.enabled ? "Auto-reload is on." : "Auto-reload settings saved.");
+			toast.success(updated.enabled ? "Top-ups are on." : "Top-up settings saved.");
 		},
 		onError: (error) => {
 			if (error instanceof AppError && error.message) {
 				toast.error(error.message);
 				return;
 			}
-			toast.error("Couldn't save auto-reload settings. Please try again.");
+			toast.error("Couldn't save top-up settings. Please try again.");
 		},
 	});
 
 	// Render nothing while loading (avoids a spinner flash on pages where the
-	// feature flag turns out to be off) and when auto-reload is disabled
+	// feature flag turns out to be off) and when top-ups are disabled
 	// server-side.
 	if (isLoading || !settings || !settings.feature_enabled) {
 		return null;
@@ -131,7 +131,7 @@ export function AutoReloadSettings() {
 			return;
 		}
 		if (amountMicros == null || amountMicros < settings.min_amount_micros) {
-			toast.error(`Reload amount must be at least $${minAmountDollars}.`);
+			toast.error(`Top-up amount must be at least $${minAmountDollars}.`);
 			return;
 		}
 
@@ -142,135 +142,168 @@ export function AutoReloadSettings() {
 		});
 	};
 
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle className="flex items-center gap-2 text-base">
-					<RefreshCw className="h-4 w-4 text-amber-500" />
-					Auto-reload
-				</CardTitle>
-				<CardDescription>
-					Automatically top up your credit balance when it drops below a threshold, using a saved
-					card. Current balance:{" "}
-					<span className="font-medium text-foreground">{formatUsd(balanceMicros)}</span>.
-				</CardDescription>
-			</CardHeader>
-			<CardContent className="space-y-5">
+	const addCardButton = (
+		<Button
+			className="w-full sm:w-auto"
+			onClick={() => setupMutation.mutate()}
+			disabled={setupMutation.isPending}
+		>
+			{setupMutation.isPending ? (
+				<>
+					<Spinner size="xs" />
+					Redirecting
+				</>
+			) : (
+				"Add a card"
+			)}
+		</Button>
+	);
+
+	if (!hasCard) {
+		return (
+			<div className="space-y-5">
 				{settings.failed_at && (
 					<Alert variant="destructive">
 						<AlertTriangle className="h-4 w-4" />
-						<AlertTitle>Last auto-reload failed</AlertTitle>
+						<AlertTitle>Last top-up failed</AlertTitle>
 						<AlertDescription>
-							Your saved card was declined and auto-reload was turned off. Update your card and
-							re-enable it below to keep topping up automatically.
+							Your saved card was declined and top-ups were turned off. Update your card and
+							re-enable top-ups below.
 						</AlertDescription>
 					</Alert>
 				)}
 
-				{!hasCard ? (
-					<div className="flex flex-col items-start gap-3 rounded-lg border bg-muted/20 p-4">
-						<div className="flex items-center gap-2 text-sm">
-							<CreditCard className="h-4 w-4 text-muted-foreground" />
-							<span>Add a card to enable automatic top-ups.</span>
+				<div className="space-y-6">
+					<Alert className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+						<div className="flex min-w-0 items-start gap-3">
+							<Info className="mt-0.5 h-4 w-4 shrink-0" />
+							<p className="text-sm leading-relaxed text-muted-foreground">
+								Automatically top up your credit balance when it drops below a threshold, using a
+								saved card. Current balance:{" "}
+								<span className="font-medium text-foreground">{formatUsd(balanceMicros)}</span>.
+							</p>
 						</div>
-						<Button onClick={() => setupMutation.mutate()} disabled={setupMutation.isPending}>
-							{setupMutation.isPending ? (
-								<>
-									<Spinner size="xs" />
-									Redirecting
-								</>
-							) : (
-								"Add a card"
-							)}
-						</Button>
+						{addCardButton}
+					</Alert>
+					<Separator />
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-6">
+			{settings.failed_at && (
+				<Alert variant="destructive">
+					<AlertTriangle className="h-4 w-4" />
+					<AlertTitle>Last top-up failed</AlertTitle>
+					<AlertDescription>
+						Your saved card was declined and top-ups were turned off. Update your card and
+						re-enable top-ups below.
+					</AlertDescription>
+				</Alert>
+			)}
+
+			<section className="space-y-5">
+				<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+					<div className="space-y-1">
+						<h2 className="text-base font-semibold tracking-tight">Automatic top-ups</h2>
+						<p className="text-sm text-muted-foreground">
+							Current balance:{" "}
+							<span className="font-medium text-foreground">{formatUsd(balanceMicros)}</span>
+						</p>
 					</div>
-				) : (
-					<>
-						<div className="flex items-center justify-between gap-4">
-							<div className="space-y-0.5">
-								<Label htmlFor="auto-reload-toggle" className="text-sm font-medium">
-									Enable auto-reload
-								</Label>
-								<p className="text-xs text-muted-foreground">
-									Charge your saved card when the balance gets low.
-								</p>
-							</div>
-							<Switch id="auto-reload-toggle" checked={enabled} onCheckedChange={setEnabled} />
-						</div>
+					<Button
+						className="w-full sm:w-auto"
+						onClick={() => setupMutation.mutate()}
+						disabled={setupMutation.isPending}
+					>
+						{setupMutation.isPending ? (
+							<>
+								<Spinner size="xs" />
+								Redirecting
+							</>
+						) : (
+							"Update card"
+						)}
+					</Button>
+				</div>
 
-						<div className="grid gap-4 sm:grid-cols-2">
-							<div className="space-y-1.5">
-								<Label htmlFor="auto-reload-threshold" className="text-xs">
-									When balance falls below
-								</Label>
-								<div className="relative">
-									<span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
-										$
-									</span>
-									<Input
-										id="auto-reload-threshold"
-										type="number"
-										min="0"
-										step="1"
-										inputMode="decimal"
-										className="pl-6 tabular-nums"
-										value={thresholdInput}
-										onChange={(e) => setThresholdInput(e.target.value)}
-										disabled={!enabled}
-										placeholder="5"
-									/>
-								</div>
-							</div>
-							<div className="space-y-1.5">
-								<Label htmlFor="auto-reload-amount" className="text-xs">
-									Add this much credit
-								</Label>
-								<div className="relative">
-									<span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
-										$
-									</span>
-									<Input
-										id="auto-reload-amount"
-										type="number"
-										min={minAmountDollars}
-										step="1"
-										inputMode="decimal"
-										className="pl-6 tabular-nums"
-										value={amountInput}
-										onChange={(e) => setAmountInput(e.target.value)}
-										disabled={!enabled}
-										placeholder="10"
-									/>
-								</div>
-								<p className="text-[11px] text-muted-foreground">Minimum ${minAmountDollars}.</p>
-							</div>
-						</div>
+				<div className="flex items-center justify-between gap-4">
+					<div className="space-y-0.5">
+						<Label htmlFor="top-ups-toggle" className="text-sm font-medium">
+							Enable top-ups
+						</Label>
+						<p className="text-xs text-muted-foreground">
+							Charge your saved card when the balance gets low.
+						</p>
+					</div>
+					<Switch id="top-ups-toggle" checked={enabled} onCheckedChange={setEnabled} />
+				</div>
 
-						<div className="flex items-center justify-between gap-3">
-							<Button
-								variant="ghost"
-								size="sm"
-								className="text-muted-foreground"
-								onClick={() => setupMutation.mutate()}
-								disabled={setupMutation.isPending}
-							>
-								<CreditCard className="h-3.5 w-3.5" />
-								Update card
-							</Button>
-							<Button onClick={handleSave} disabled={saveMutation.isPending}>
-								{saveMutation.isPending ? (
-									<>
-										<Spinner size="xs" />
-										Saving
-									</>
-								) : (
-									"Save"
-								)}
-							</Button>
+				<div className="grid gap-4 sm:grid-cols-2">
+					<div className="space-y-1.5">
+						<Label htmlFor="top-ups-threshold" className="text-xs">
+							When balance falls below
+						</Label>
+						<div className="relative">
+							<span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
+								$
+							</span>
+							<Input
+								id="top-ups-threshold"
+								type="number"
+								min="0"
+								step="1"
+								inputMode="decimal"
+								className="pl-6 tabular-nums"
+								value={thresholdInput}
+								onChange={(e) => setThresholdInput(e.target.value)}
+								disabled={!enabled}
+								placeholder="5"
+							/>
 						</div>
-					</>
-				)}
-			</CardContent>
-		</Card>
+					</div>
+					<div className="space-y-1.5">
+						<Label htmlFor="top-ups-amount" className="text-xs">
+							Add this much credit
+						</Label>
+						<div className="relative">
+							<span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
+								$
+							</span>
+							<Input
+								id="top-ups-amount"
+								type="number"
+								min={minAmountDollars}
+								step="1"
+								inputMode="decimal"
+								className="pl-6 tabular-nums"
+								value={amountInput}
+								onChange={(e) => setAmountInput(e.target.value)}
+								disabled={!enabled}
+								placeholder="10"
+							/>
+						</div>
+						<p className="text-[11px] text-muted-foreground">Minimum ${minAmountDollars}.</p>
+					</div>
+				</div>
+
+				<div className="flex justify-end">
+					<Button className="w-full sm:w-auto" onClick={handleSave} disabled={saveMutation.isPending}>
+						{saveMutation.isPending ? (
+							<>
+								<Spinner size="xs" />
+								Saving
+							</>
+						) : (
+							"Save"
+						)}
+					</Button>
+				</div>
+			</section>
+
+			<Separator />
+		</div>
 	);
 }