feat(component): AutoReload — Auto-Reload Configuration

[bntvllnt]

Summary

Toggle + configuration form for automatic credit reloading. When enabled, reveals threshold and reload amount inputs. Handles toggle state, form validation, and save with loading feedback. A common pattern in any prepaid credit system.

Proposed API

<AutoReload
  enabled={settings.autoReloadEnabled}
  thresholdCents={settings.thresholdCents}
  reloadAmountCents={settings.reloadAmountCents}
  currency="EUR"
  onToggle={handleToggle}
  onSave={handleSave}
  isSaving={isSaving}
/>

// Disabled state (e.g., no wallet yet)
<AutoReload
  disabled
  disabledMessage="Subscribe to enable auto-reload settings."
/>

Requirements

• Toggle switch: enable/disable auto-reload with immediate callback
• Expandable form: revealed when toggle is on, hidden when off
• Threshold input: "Reload when balance drops below X" (number, min/max/step)
• Amount input: "Amount to add when triggered" (number, min/max/step)
• Currency-aware labels (€, $, etc.)
• Save button with loading state (isSaving)
• Disabled state with message (e.g., "Subscribe first")
• Values in cents internally, displayed as currency units
• Descriptions below each input explaining behavior
• onToggle(enabled: boolean) and onSave({ thresholdCents, reloadAmountCents }) callbacks
• Dark mode: card with border styling
• Accessible: form labels linked to inputs, toggle has descriptive label

Layout

┌──────────────────────────────────────────────────┐
│  Auto-reload                         [Toggle ◯]  │
│  Automatically reload credits when balance low   │
│  ─────────────────────────────────────────────── │
│  (when enabled:)                                 │
│  ┌──────────────┐  ┌──────────────┐              │
│  │ Threshold (€) │  │ Reload amt (€)│              │
│  │ [  10.00    ] │  │ [  20.00    ] │              │
│  │ Reload when   │  │ Amount to add │              │
│  │ below this    │  │ when triggered│              │
│  └──────────────┘  └──────────────┘              │
│                                                  │
│  [Save settings]                                 │
└──────────────────────────────────────────────────┘

Use Cases

• SaaS credit wallet auto-reload settings
• API platform automatic top-up configuration
• Cloud platform spending auto-replenish
• Prepaid service balance maintenance

Composes

• Switch, Input, Label, Button, Card

Origin

Extracted from AutoReloadSettings and AutoReloadForm in apps/web-ai-os/app/account/billing/billing-client.tsx in vllnt/vllnt monorepo.