@hyperyai/sdk 1.0.0

package/src/components/ModernAuthForm.tsx

@@ -0,0 +1,322 @@
+/**
+ * ModernAuthForm Component
+ * Beautiful, embeddable authentication form
+ * Inspired by modern SaaS login pages
+ * Can be used standalone on login/signup pages
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { useHyperyAuth } from '../lib/context';
+
+export interface ModernAuthFormProps {
+  /** Auth mode: signin or signup */
+  mode?: 'signin' | 'signup';
+  /** Allow switching between signin/signup */
+  allowModeSwitch?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Show card wrapper */
+  showCard?: boolean;
+  /** Show social OAuth buttons */
+  showSocial?: boolean;
+  /** Show email/password form */
+  showEmailPassword?: boolean;
+  /** Callback after successful auth */
+  onSuccess?: () => void;
+  /** Callback on error */
+  onError?: (error: string) => void;
+  /** Custom branding */
+  branding?: {
+    logo?: string;
+    appName?: string;
+    primaryColor?: string;
+  };
+}
+
+/**
+ * Modern authentication form with beautiful design
+ * Perfect for dedicated login/signup pages
+ * 
+ * @example
+ * ```tsx
+ * // On login page
+ * <ModernAuthForm 
+ *   mode="signin"
+ *   showCard
+ *   allowModeSwitch
+ *   onSuccess={() => router.push('/dashboard')}
+ *   branding={{
+ *     logo: '/logo.png',
+ *     appName: 'My App',
+ *     primaryColor: '#8b5cf6'
+ *   }}
+ * />
+ * ```
+ */
+export function ModernAuthForm({
+  mode: initialMode = 'signin',
+  allowModeSwitch = true,
+  className = '',
+  showCard = true,
+  showSocial = true,
+  showEmailPassword = true,
+  onSuccess,
+  onError,
+  branding,
+}: ModernAuthFormProps) {
+  const { login } = useHyperyAuth();
+  const [mode, setMode] = useState<'signin' | 'signup'>(initialMode);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingProvider, setLoadingProvider] = useState<string | null>(null);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSocialSignIn = (provider: 'google' | 'github') => {
+    setLoadingProvider(provider);
+    setError('');
+    try {
+      login();
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : `${provider} sign in failed`;
+      setError(errorMessage);
+      if (onError) {
+        onError(errorMessage);
+      }
+      setLoadingProvider(null);
+    }
+  };
+
+  const handleEmailSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    if (!email || !password) {
+      setError('Please fill in all fields');
+      setIsLoading(false);
+      return;
+    }
+
+    if (mode === 'signup' && !name) {
+      setError('Please enter your name');
+      setIsLoading(false);
+      return;
+    }
+
+    setError('Direct email authentication coming soon. Please use social sign-in.');
+    setIsLoading(false);
+  };
+
+  const primaryColor = branding?.primaryColor || '#8b5cf6';
+
+  const formContent = (
+    <div className={!showCard ? className : ''}>
+      {/* Header */}
+      <div className="text-center mb-8">
+        {branding?.logo && (
+          <img src={branding.logo} alt="Logo" className="h-12 mx-auto mb-6" />
+        )}
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
+          {mode === 'signin' ? 'Welcome back' : 'Create your account'}
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          {mode === 'signin' 
+            ? `Sign in to ${branding?.appName || 'continue'}`
+            : `Get started with ${branding?.appName || 'your account'}`
+          }
+        </p>
+      </div>
+
+      {/* Error message */}
+      {error && (
+        <div className="mb-6 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 text-sm flex items-start gap-3">
+          <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+          </svg>
+          <span>{error}</span>
+        </div>
+      )}
+
+      {/* Social buttons */}
+      {showSocial && (
+        <div className="space-y-3 mb-6">
+          <button
+            onClick={() => handleSocialSignIn('google')}
+            disabled={!!loadingProvider}
+            className="w-full bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white py-3.5 px-4 rounded-xl flex items-center justify-center gap-3 font-medium transition-all disabled:opacity-50 shadow-sm hover:shadow-md"
+          >
+            {loadingProvider === 'google' ? (
+              <div className="w-5 h-5 border-2 border-gray-300 border-t-transparent rounded-full animate-spin" />
+            ) : (
+              <svg className="w-5 h-5" viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+              </svg>
+            )}
+            <span>Continue with Google</span>
+          </button>
+
+          <button
+            onClick={() => handleSocialSignIn('github')}
+            disabled={!!loadingProvider}
+            className="w-full bg-gray-900 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-750 text-white py-3.5 px-4 rounded-xl flex items-center justify-center gap-3 font-medium transition-all disabled:opacity-50 shadow-sm hover:shadow-md"
+          >
+            {loadingProvider === 'github' ? (
+              <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+            ) : (
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+              </svg>
+            )}
+            <span>Continue with GitHub</span>
+          </button>
+        </div>
+      )}
+
+      {/* Divider */}
+      {showSocial && showEmailPassword && (
+        <div className="relative mb-6">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-gray-300 dark:border-gray-700" />
+          </div>
+          <div className="relative flex justify-center text-sm">
+            <span className="px-4 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400 font-medium">
+              Or continue with email
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Email/Password form */}
+      {showEmailPassword && (
+        <form onSubmit={handleEmailSubmit} className="space-y-5">
+          {mode === 'signup' && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Full name
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full px-4 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-offset-2 focus:outline-none transition-all"
+                style={{ '--tw-ring-color': primaryColor } as React.CSSProperties}
+                placeholder="John Doe"
+                disabled={isLoading}
+              />
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Email address
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full px-4 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-offset-2 focus:outline-none transition-all"
+              style={{ '--tw-ring-color': primaryColor } as React.CSSProperties}
+              placeholder="you@example.com"
+              disabled={isLoading}
+              autoComplete="email"
+            />
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Password
+              </label>
+              {mode === 'signin' && (
+                <a 
+                  href="/forgot-password" 
+                  className="text-sm font-medium hover:underline"
+                  style={{ color: primaryColor }}
+                >
+                  Forgot?
+                </a>
+              )}
+            </div>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-4 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-offset-2 focus:outline-none transition-all"
+              style={{ '--tw-ring-color': primaryColor } as React.CSSProperties}
+              placeholder="••••••••"
+              disabled={isLoading}
+              autoComplete={mode === 'signin' ? 'current-password' : 'new-password'}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full py-3.5 px-4 rounded-xl font-semibold text-white shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-[1.02] active:scale-[0.98]"
+            style={{ backgroundColor: primaryColor }}
+          >
+            {isLoading ? (
+              <span className="flex items-center justify-center gap-2">
+                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                {mode === 'signin' ? 'Signing in...' : 'Creating account...'}
+              </span>
+            ) : (
+              mode === 'signin' ? 'Sign in' : 'Create account'
+            )}
+          </button>
+        </form>
+      )}
+
+      {/* Mode switcher */}
+      {allowModeSwitch && (
+        <div className="mt-6 text-center text-sm">
+          <span className="text-gray-600 dark:text-gray-400">
+            {mode === 'signin' ? "Don't have an account?" : 'Already have an account?'}
+          </span>
+          {' '}
+          <button
+            onClick={() => setMode(mode === 'signin' ? 'signup' : 'signin')}
+            className="font-semibold hover:underline"
+            style={{ color: primaryColor }}
+          >
+            {mode === 'signin' ? 'Sign up' : 'Sign in'}
+          </button>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-800 text-center text-xs text-gray-500 dark:text-gray-500">
+        By continuing, you agree to our{' '}
+        <a href="/terms" className="hover:underline font-medium" style={{ color: primaryColor }}>
+          Terms of Service
+        </a>
+        {' '}and{' '}
+        <a href="/privacy" className="hover:underline font-medium" style={{ color: primaryColor }}>
+          Privacy Policy
+        </a>
+      </div>
+    </div>
+  );
+
+  if (!showCard) {
+    return <div className={className}>{formContent}</div>;
+  }
+
+  return (
+    <div className={`bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-10 max-w-md w-full ${className}`}>
+      {formContent}
+    </div>
+  );
+}
+
+

package/src/components/RestrictionModal.tsx

@@ -0,0 +1,373 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+export interface RestrictionError {
+  code: string;
+  message: string;
+  type?: string;
+  // Spending limit specific
+  limitType?: 'daily' | 'monthly' | 'total';
+  limit?: number;
+  current?: number;
+  requested?: number;
+  resetsAt?: string;
+  // Insufficient credits specific
+  available?: number;
+  required?: number;
+  // Generic extensible fields
+  [key: string]: any;
+}
+
+type BillingMode = 'metered' | 'prepaid';
+
+interface WalletState {
+  mode: BillingMode;
+  balance: { current: number; reserved: number; monthlySpent: number; monthlyLimit: number };
+  paymentMethod: { exists: boolean; last4?: string; brand?: string };
+  autoTopUp: { enabled: boolean; threshold?: number; amount?: number };
+  lowBalance: { isLow: boolean; threshold: number; current: number };
+  topupTiers: Array<{ name: string; usdAmount: number; credits: number; bonus: number; popular?: boolean }>;
+  settingsUrls: { billing: string; topup: string; addPaymentMethod: string };
+}
+
+interface RestrictionModalProps {
+  error: RestrictionError | null;
+  /** OAuth clientId of the app making the requests. Preferred name. */
+  clientId?: string;
+  /**
+   * @deprecated Use `clientId` instead. This prop is actually the OAuth clientId,
+   * not the DB app id. Kept as a backward-compatible alias.
+   */
+  appId?: string;
+  gatewayUrl: string;
+  getAccessToken: () => Promise<string | null>;
+  onClose: () => void;
+  onRetry?: () => void;
+  /** Called after funds/card are successfully added. */
+  onFunded?: () => void;
+  className?: string;
+  overlayClassName?: string;
+}
+
+const QUICK_AMOUNTS = [10, 25, 50];
+
+/**
+ * Mode-aware restriction / funds modal.
+ *
+ * Reads the team's wallet state (GET /api/wallet/state) and renders the CTA that
+ * matches the billing lever:
+ *   - metered + no card → "Add a payment method" (Stripe-hosted Checkout)
+ *   - metered + declined → "Update payment method"
+ *   - prepaid           → 1-click "Add $X" (charges the saved card in place)
+ */
+export function RestrictionModal({
+  error,
+  clientId,
+  appId,
+  gatewayUrl,
+  getAccessToken,
+  onClose,
+  onRetry,
+  onFunded,
+  className = '',
+  overlayClassName = '',
+}: RestrictionModalProps) {
+  // `appId` is a deprecated alias for `clientId`; prefer `clientId` when both are set.
+  const resolvedClientId = clientId ?? appId;
+  const [wallet, setWallet] = useState<WalletState | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [funded, setFunded] = useState(false);
+
+  const authHeaders = useCallback(async () => {
+    const token = await getAccessToken();
+    if (!token) throw new Error('Not authenticated');
+    const headers: Record<string, string> = {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    };
+    if (resolvedClientId) headers['X-Hypery-Client-Id'] = resolvedClientId;
+    return headers;
+  }, [getAccessToken, resolvedClientId]);
+
+  const loadWallet = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setFetchError(null);
+      const headers = await authHeaders();
+      const res = await fetch(`${gatewayUrl}/api/wallet/state`, { headers });
+      if (!res.ok) throw new Error(`Failed to load wallet (${res.status})`);
+      setWallet((await res.json()) as WalletState);
+    } catch (err) {
+      setFetchError(err instanceof Error ? err.message : 'Failed to load wallet');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [authHeaders, gatewayUrl]);
+
+  useEffect(() => {
+    if (!error) return;
+    void loadWallet();
+  }, [error, loadWallet]);
+
+  // 1-click: charge the saved card and credit the team.
+  const addFunds = useCallback(
+    async (usd: number) => {
+      setBusy(true);
+      setActionError(null);
+      try {
+        const headers = await authHeaders();
+        const res = await fetch(`${gatewayUrl}/api/wallet/topup`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({ amount: usd }),
+        });
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok || !body?.success) {
+          throw new Error(body?.error || `Top-up failed (${res.status})`);
+        }
+        await loadWallet();
+        setFunded(true);
+        onFunded?.();
+      } catch (err) {
+        setActionError(err instanceof Error ? err.message : 'Top-up failed');
+      } finally {
+        setBusy(false);
+      }
+    },
+    [authHeaders, gatewayUrl, loadWallet, onFunded]
+  );
+
+  // Stripe-hosted Checkout (setup) in a popup — no Stripe Elements here.
+  const addPaymentMethod = useCallback(async () => {
+    setBusy(true);
+    setActionError(null);
+    try {
+      const headers = await authHeaders();
+      const res = await fetch(`${gatewayUrl}/api/payments/stripe/checkout-setup`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({}),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok || !body?.url) {
+        throw new Error(body?.error || `Could not start checkout (${res.status})`);
+      }
+
+      const popup = window.open(body.url, 'hypery-add-card', 'width=480,height=720');
+
+      const added = await new Promise<boolean>((resolve) => {
+        let settled = false;
+        const finish = (ok: boolean) => {
+          if (settled) return;
+          settled = true;
+          window.removeEventListener('message', onMessage);
+          clearInterval(poll);
+          resolve(ok);
+        };
+        // Only trust the completion message from the gateway's own origin.
+        const expectedOrigin = (() => {
+          try {
+            return new URL(gatewayUrl).origin;
+          } catch {
+            return typeof window !== 'undefined' ? window.location.origin : '';
+          }
+        })();
+        const onMessage = (event: MessageEvent) => {
+          if (event.origin !== expectedOrigin) return;
+          if (event?.data?.type === 'hypery:payment-method') {
+            finish(event.data.status === 'added');
+          }
+        };
+        window.addEventListener('message', onMessage);
+        const poll = setInterval(() => {
+          if (popup && popup.closed) finish(false);
+        }, 700);
+      });
+
+      await loadWallet();
+      if (added) onFunded?.();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : 'Could not add payment method');
+    } finally {
+      setBusy(false);
+    }
+  }, [authHeaders, gatewayUrl, loadWallet, onFunded]);
+
+  if (!error) return null;
+
+  const openSettings = (path?: string) => {
+    if (!path) return;
+    window.open(`${gatewayUrl}${path}`, '_blank');
+  };
+
+  const isSpendingLimit = error.code === 'SPENDING_LIMIT_EXCEEDED';
+  const isPaymentDeclined = error.code === 'PAYMENT_DECLINED';
+  const isPaymentMethodRequired = error.code === 'PAYMENT_METHOD_REQUIRED';
+
+  const title = funded
+    ? 'You’re all set'
+    : isPaymentMethodRequired
+    ? 'Add a payment method'
+    : isPaymentDeclined
+    ? 'Payment failed'
+    : isSpendingLimit
+    ? 'Spending limit reached'
+    : 'Add funds';
+
+  const mode = wallet?.mode;
+  const hasCard = !!wallet?.paymentMethod?.exists;
+
+  return (
+    <div className={`fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm ${overlayClassName}`}>
+      <div className={`relative w-full max-w-md bg-gray-900 border border-gray-700 rounded-lg shadow-2xl ${className}`}>
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-gray-100 transition-colors z-10"
+          aria-label="Close"
+        >
+          <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+
+        <div className="p-6">
+          <h2 className="text-2xl font-bold text-center mb-4 text-white">{title}</h2>
+
+          {isLoading && (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
+              <span className="ml-3 text-gray-400">Loading your account…</span>
+            </div>
+          )}
+
+          {!isLoading && (
+            <>
+              {/* Wallet summary */}
+              {wallet && (
+                <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-4">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-gray-400">Available credits</span>
+                    <span className="text-2xl font-bold text-white">{wallet.balance.current}</span>
+                  </div>
+                  <div className="flex justify-between items-center mt-1">
+                    <span className="text-xs text-gray-500">
+                      {mode === 'metered' ? 'Pay-as-you-go billing' : 'Prepaid balance'}
+                    </span>
+                    {wallet.paymentMethod.exists && (
+                      <span className="text-xs text-gray-500">
+                        {wallet.paymentMethod.brand} •••• {wallet.paymentMethod.last4}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {fetchError && (
+                <p className="text-sm text-red-400 mb-4">⚠️ {fetchError}</p>
+              )}
+              {actionError && (
+                <p className="text-sm text-red-400 mb-4">⚠️ {actionError}</p>
+              )}
+
+              {/* Context message */}
+              {!funded && (
+                <p className="text-sm text-gray-400 text-center mb-5">{error.message}</p>
+              )}
+
+              {/* Actions */}
+              <div className="space-y-3">
+                {funded ? (
+                  <button
+                    onClick={() => {
+                      onRetry?.();
+                      onClose();
+                    }}
+                    className="w-full px-4 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors font-medium"
+                  >
+                    Continue
+                  </button>
+                ) : isSpendingLimit ? (
+                  <>
+                    <button
+                      onClick={() => openSettings(wallet?.settingsUrls.billing)}
+                      className="w-full px-4 py-3 bg-gray-800 hover:bg-gray-700 text-white border border-gray-600 rounded-lg transition-colors"
+                    >
+                      Manage spending limits
+                    </button>
+                    {onRetry && (
+                      <button
+                        onClick={onRetry}
+                        className="w-full px-4 py-3 bg-gray-800 hover:bg-gray-700 text-white border border-gray-600 rounded-lg transition-colors"
+                      >
+                        Try again
+                      </button>
+                    )}
+                  </>
+                ) : mode === 'metered' || !hasCard || isPaymentMethodRequired || isPaymentDeclined ? (
+                  // Metered, or no card on file → capture/update a card first.
+                  <>
+                    <button
+                      onClick={addPaymentMethod}
+                      disabled={busy}
+                      className="w-full px-4 py-3 bg-blue-600 hover:bg-blue-500 disabled:opacity-60 text-white rounded-lg transition-colors font-medium"
+                    >
+                      {busy ? 'Opening secure checkout…' : hasCard ? 'Update payment method' : 'Add a payment method'}
+                    </button>
+                    {mode === 'metered' && (
+                      <p className="text-xs text-gray-500 text-center">
+                        You’ll be billed automatically as you use the service.
+                      </p>
+                    )}
+                    {onRetry && (
+                      <button
+                        onClick={onRetry}
+                        className="w-full px-4 py-2 text-gray-400 hover:text-white text-sm transition-colors"
+                      >
+                        Try again
+                      </button>
+                    )}
+                  </>
+                ) : (
+                  // Prepaid + card on file → 1-click add funds.
+                  <>
+                    <div className="grid grid-cols-3 gap-2">
+                      {QUICK_AMOUNTS.map((usd) => (
+                        <button
+                          key={usd}
+                          onClick={() => addFunds(usd)}
+                          disabled={busy}
+                          className="px-3 py-3 bg-blue-600 hover:bg-blue-500 disabled:opacity-60 text-white rounded-lg transition-colors font-medium"
+                        >
+                          ${usd}
+                        </button>
+                      ))}
+                    </div>
+                    <button
+                      onClick={() => openSettings(wallet?.settingsUrls.topup)}
+                      className="w-full px-4 py-2 text-gray-400 hover:text-white text-sm transition-colors"
+                    >
+                      Other amount…
+                    </button>
+                  </>
+                )}
+
+                {!funded && (
+                  <button
+                    onClick={onClose}
+                    className="w-full px-4 py-2 text-gray-500 hover:text-gray-300 text-sm transition-colors"
+                  >
+                    Close
+                  </button>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}