1

frontend/src/layout/AppLayout.tsx

@@ -7,6 +7,8 @@ import AppSidebar from "./AppSidebar";
 import { useSiteStore } from "../store/siteStore";
 import { useSectorStore } from "../store/sectorStore";
 import { useAuthStore } from "../store/authStore";
+import { useBillingStore } from "../store/billingStore";
+import { useHeaderMetrics } from "../context/HeaderMetricsContext";
 import { useErrorHandler } from "../hooks/useErrorHandler";
 import { trackLoading } from "../components/common/LoadingStateMonitor";
 import ResourceDebugOverlay from "../components/debug/ResourceDebugOverlay";
@@ -16,6 +18,8 @@ const LayoutContent: React.FC = () => {
   const { loadActiveSite, activeSite } = useSiteStore();
   const { loadSectorsForSite } = useSectorStore();
   const { refreshUser, isAuthenticated } = useAuthStore();
+  const { balance, loadBalance } = useBillingStore();
+  const { setMetrics } = useHeaderMetrics();
   const { addError } = useErrorHandler('AppLayout');
   const hasLoadedSite = useRef(false);
   const lastSiteId = useRef<number | null>(null);
@@ -203,6 +207,48 @@ const LayoutContent: React.FC = () => {
     };
   }, [isAuthenticated, refreshUser]);
 
+  // Load credit balance and set in header metrics
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setMetrics([]);
+      return;
+    }
+    
+    // Load balance if not already loaded
+    if (!balance && !useBillingStore.getState().loading) {
+      loadBalance().catch((error) => {
+        console.error('AppLayout: Error loading credit balance:', error);
+        // Don't show error to user - balance is not critical for app functionality
+      });
+    }
+  }, [isAuthenticated, balance, loadBalance, setMetrics]);
+
+  // Update header metrics when balance changes
+  useEffect(() => {
+    if (!isAuthenticated || !balance) {
+      setMetrics([]);
+      return;
+    }
+    
+    // Determine accent color based on credit level
+    let accentColor: 'blue' | 'green' | 'amber' | 'purple' = 'blue';
+    if (balance.credits > 1000) {
+      accentColor = 'green';
+    } else if (balance.credits > 100) {
+      accentColor = 'blue';
+    } else if (balance.credits > 0) {
+      accentColor = 'amber';
+    } else {
+      accentColor = 'purple';
+    }
+    
+    setMetrics([{
+      label: 'Credits',
+      value: balance.credits,
+      accentColor,
+    }]);
+  }, [balance, isAuthenticated, setMetrics]);
+
   // Listen for debug toggle changes
   useEffect(() => {
     const saved = localStorage.getItem('debug_resource_tracking_enabled');