fix: switch to Gemini AI, fix free-tier output, fix spinner state, upgrade prompts, multi-domain routing

app/[tool]/page.tsx

@@ -19,6 +19,7 @@ export default function ToolPage() {
   const [generating, setGenerating] = useState(false);
   const [paymentLoading, setPaymentLoading] = useState(false);
   const [email, setEmail] = useState('');
+  const [error, setError] = useState<string | null>(null);
 
   if (!tool) {
     return (
@@ -32,6 +33,7 @@ export default function ToolPage() {
     setGenerating(true);
     setPreview(null);
     setSessionId(null);
+    setError(null);
     try {
       const res = await fetch(`/api/${slug}/generate-draft`, {
         method: 'POST',
@@ -39,11 +41,19 @@ export default function ToolPage() {
         body: JSON.stringify({ input, email: email || undefined }),
       });
       const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || `Server error: ${res.status}`);
+        return;
+      }
       setSessionId(data.session_id);
       setPreview(data.preview);
       setIsPaid(data.is_paid);
+      if (data.full_output) {
+        setFullOutput(data.full_output);
+      }
     } catch (e) {
       console.error('Generate failed:', e);
+      setError(e instanceof Error ? e.message : 'An unexpected error occurred. Please try again.');
     } finally {
       setGenerating(false);
     }
@@ -125,12 +135,18 @@ export default function ToolPage() {
 
         {/* Right: Output */}
         <div className="min-h-[400px]">
+          {error && (
+            <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+              <strong>Error:</strong> {error}
+            </div>
+          )}
           <OutputPanel
             tool={slug}
             sessionId={sessionId}
             preview={preview}
             fullOutput={fullOutput}
             isPaid={isPaid}
+            generating={generating}
             onPaymentRequest={handlePayment}
             paymentLoading={paymentLoading}
           />