many fixes

frontend/src/components/auth/ProtectedRoute.tsx

@@ -4,8 +4,6 @@ import { useAuthStore } from "../../store/authStore";
 import { useErrorHandler } from "../../hooks/useErrorHandler";
 import { trackLoading } from "../common/LoadingStateMonitor";
 
-const PRICING_URL = "https://igny8.com/pricing";
-
 interface ProtectedRouteProps {
   children: ReactNode;
 }
@@ -21,6 +19,20 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
   const [showError, setShowError] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
 
+  const PLAN_ALLOWED_PATHS = [
+    '/account/plans',
+    '/account/billing',
+    '/account/purchase-credits',
+    '/account/settings',
+    '/account/team',
+    '/account/usage',
+    '/billing',
+  ];
+
+  const isPlanAllowedPath = PLAN_ALLOWED_PATHS.some((prefix) =>
+    location.pathname.startsWith(prefix)
+  );
+
   // Track loading state
   useEffect(() => {
     trackLoading('auth-loading', loading);
@@ -37,11 +49,6 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
       logout();
       return;
     }
-
-    if (!user.account.plan) {
-      logout();
-      window.location.href = PRICING_URL;
-    }
   }, [isAuthenticated, user, logout]);
 
   // Immediate check on mount: if loading is true, reset it immediately
@@ -111,6 +118,11 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
     return <Navigate to="/signin" state={{ from: location }} replace />;
   }
 
+  // If authenticated but missing an active plan, keep user inside billing/onboarding
+  if (user?.account && !user.account.plan && !isPlanAllowedPath) {
+    return <Navigate to="/account/plans" state={{ from: location }} replace />;
+  }
+
   return <>{children}</>;
 }
 

frontend/src/components/auth/SignUpForm.tsx

@@ -51,8 +51,8 @@ export default function SignUpForm() {
         last_name: formData.lastName,
       });
       
-      // Redirect to home after successful registration
-      navigate("/", { replace: true });
+      // Redirect to plan selection after successful registration
+      navigate("/account/plans", { replace: true });
     } catch (err: any) {
       setError(err.message || "Registration failed. Please try again.");
     }

frontend/src/components/billing/BillingBalancePanel.tsx

@@ -1,35 +1,20 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import PageMeta from '../../components/common/PageMeta';
-import { useToast } from '../../components/ui/toast/ToastContainer';
-import { getCreditBalance } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
 import { DollarLineIcon } from '../../icons';
+import { useBillingStore } from '../../store/billingStore';
 
 export default function BillingBalancePanel() {
-  const toast = useToast();
-  const [balance, setBalance] = useState<any | null>(null);
-  const [loading, setLoading] = useState(true);
+  const { balance, loading, error, loadBalance } = useBillingStore();
 
   useEffect(() => {
     loadBalance();
-  }, []);
+  }, [loadBalance]);
 
-  const loadBalance = async () => {
-    try {
-      setLoading(true);
-      const data = await getCreditBalance();
-      setBalance(data as any);
-    } catch (error: any) {
-      toast.error(`Failed to load credit balance: ${error?.message || error}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (loading) {
+  if (loading && !balance) {
     return (
       <div className="p-4">
         <div className="text-gray-500">Loading credit balance...</div>
@@ -51,6 +36,17 @@ export default function BillingBalancePanel() {
         </Link>
       </div>
 
+      {error && !balance && (
+        <div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
+          Balance unavailable. {error}
+          <div className="mt-3">
+            <Button variant="outline" size="sm" onClick={loadBalance}>
+              Retry
+            </Button>
+          </div>
+        </div>
+      )}
+
       {balance && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card className="p-6">
@@ -89,6 +85,11 @@ export default function BillingBalancePanel() {
         </div>
       )}
 
+      {error && balance && (
+        <div className="text-sm text-amber-600 dark:text-amber-400">
+          Latest balance may be stale: {error}
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/billing/BillingUsagePanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { getCreditTransactions, getCreditBalance, CreditTransaction as BillingTransaction, CreditBalance } from '../../services/billing.api';
+import { getCreditTransactions, CreditTransaction as BillingTransaction } from '../../services/billing.api';
+import { useBillingStore } from '../../store/billingStore';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import { CompactPagination } from '../ui/pagination';
@@ -21,24 +22,22 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
 export default function BillingUsagePanel() {
   const toast = useToast();
   const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
-  const [balance, setBalance] = useState<CreditBalance | null>(null);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
+  const { balance, usageLimits, loadBalance, loadUsageLimits } = useBillingStore();
 
   useEffect(() => {
     loadUsage();
-  }, []);
+    loadBalance();
+    loadUsageLimits();
+  }, [loadBalance, loadUsageLimits]);
 
   const loadUsage = async () => {
     try {
       setLoading(true);
-      const [txnData, balanceData] = await Promise.all([
-        getCreditTransactions(),
-        getCreditBalance()
-      ]);
+      const txnData = await getCreditTransactions();
       setTransactions(txnData.results || []);
-      setBalance(balanceData as any);
     } catch (error: any) {
       toast.error(`Failed to load credit usage: ${error.message}`);
     } finally {
@@ -90,6 +89,38 @@ export default function BillingUsagePanel() {
         </div>
       )}
 
+      {usageLimits && (
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Plan Limits</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {usageLimits.plan_credits_per_month?.toLocaleString?.() || 0}
+              </div>
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                {usageLimits.credits_used_this_month?.toLocaleString?.() || 0} used
+              </div>
+            </div>
+            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-400">Remaining</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {usageLimits.credits_remaining?.toLocaleString?.() || 0}
+              </div>
+              {usageLimits.approaching_limit && (
+                <div className="text-sm text-amber-600 dark:text-amber-400 mt-1">Approaching limit</div>
+              )}
+            </div>
+            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-400">Usage %</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {usageLimits.percentage_used?.toFixed?.(0) || 0}%
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+
       <Card className="p-6">
         <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
         <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Understanding how credits are consumed for each operation type</p>

frontend/src/components/dashboard/CreditBalanceWidget.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import { useBillingStore } from '../../store/billingStore';
 import ComponentCard from '../common/ComponentCard';
+import Button from '../ui/button/Button';
 
 export default function CreditBalanceWidget() {
-  const { balance, loading, loadBalance } = useBillingStore();
+  const { balance, loading, error, loadBalance } = useBillingStore();
   
   useEffect(() => {
     loadBalance();
@@ -16,6 +17,17 @@ export default function CreditBalanceWidget() {
       </ComponentCard>
     );
   }
+
+  if (error && !balance) {
+    return (
+      <ComponentCard title="Credit Balance" desc="Balance unavailable">
+        <div className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</div>
+        <Button variant="outline" size="sm" onClick={loadBalance}>
+          Retry
+        </Button>
+      </ComponentCard>
+    );
+  }
   
   if (!balance) return null;
   
@@ -53,6 +65,11 @@ export default function CreditBalanceWidget() {
             <span className="text-sm text-gray-600 dark:text-gray-400">Remaining</span>
             <span className="text-sm font-medium text-success">{balance.credits_remaining}</span>
           </div>
+          {error && (
+            <div className="mt-2 text-xs text-amber-600 dark:text-amber-400">
+              Balance may be outdated. {error}
+            </div>
+          )}
         </div>
       </div>
     </ComponentCard>