feat: Implement network status banner

src/hooks/useCircuitBreakerStatus.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { supabaseCircuitBreaker, CircuitState } from '@/lib/circuitBreaker';
+import { logger } from '@/lib/logger';
+
+export function useCircuitBreakerStatus() {
+  const [state, setState] = useState<CircuitState>(CircuitState.CLOSED);
+  const [failureCount, setFailureCount] = useState(0);
+  const [lastStateChange, setLastStateChange] = useState<Date>(new Date());
+
+  useEffect(() => {
+    // Check immediately on mount
+    const checkState = () => {
+      const currentState = supabaseCircuitBreaker.getState();
+      const currentFailures = supabaseCircuitBreaker.getFailureCount();
+      
+      setState(prevState => {
+        if (prevState !== currentState) {
+          setLastStateChange(new Date());
+          
+          // Log state changes for monitoring
+          logger.info('Circuit breaker state changed', {
+            from: prevState,
+            to: currentState,
+            failureCount: currentFailures
+          });
+          
+          // Emit custom event for other components
+          window.dispatchEvent(new CustomEvent('circuit-breaker-state-change', {
+            detail: { state: currentState, failureCount: currentFailures }
+          }));
+        }
+        return currentState;
+      });
+      
+      setFailureCount(currentFailures);
+    };
+
+    checkState();
+    
+    // Poll every 5 seconds
+    const interval = setInterval(checkState, 5000);
+    
+    return () => clearInterval(interval);
+  }, []);
+
+  return {
+    state,
+    failureCount,
+    lastStateChange,
+    isOpen: state === CircuitState.OPEN,
+    isHalfOpen: state === CircuitState.HALF_OPEN,
+    isClosed: state === CircuitState.CLOSED
+  };
+}