feat: Implement automatic API connectivity banner

src/App.tsx

@@ -5,11 +5,10 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
-import * as Cronitor from '@cronitorio/cronitor-rum';
 import { AuthProvider } from "@/hooks/useAuth";
 import { AuthModalProvider } from "@/contexts/AuthModalContext";
 import { MFAStepUpProvider } from "@/contexts/MFAStepUpContext";
-import { CronitorHealthProvider, useCronitorHealth } from "@/contexts/CronitorHealthContext";
+import { APIConnectivityProvider, useAPIConnectivity } from "@/contexts/APIConnectivityContext";
 import { LocationAutoDetectProvider } from "@/components/providers/LocationAutoDetectProvider";
 import { AnalyticsWrapper } from "@/components/analytics/AnalyticsWrapper";
 import { Footer } from "@/components/layout/Footer";
@@ -135,8 +134,8 @@ function NavigationTracker() {
 
 function AppContent(): React.JSX.Element {
   // Check if API status banner is visible to add padding
-  const { passing, isBannerDismissed } = useCronitorHealth();
-  const showBanner = passing === false && !isBannerDismissed;
+  const { isAPIReachable, isBannerDismissed } = useAPIConnectivity();
+  const showBanner = !isAPIReachable && !isBannerDismissed;
 
   return (
     <TooltipProvider>
@@ -399,31 +398,16 @@ function AppContent(): React.JSX.Element {
 }
 
 const App = (): React.JSX.Element => {
-  // Initialize Cronitor RUM before router mounts
-  useEffect(() => {
-    try {
-      Cronitor.load("0b5d17d3f7625ce8766c2c4c85c1895d", {
-        debug: import.meta.env.DEV, // Enable debug logs in development only
-        trackMode: 'history', // Automatically track page views with React Router
-      });
-      
-      // Log successful initialization
-      console.log('[Cronitor] RUM initialized');
-    } catch (error) {
-      console.error('[Cronitor] Failed to initialize:', error);
-    }
-  }, []);
-
   return (
     <QueryClientProvider client={queryClient}>
       <AuthProvider>
         <AuthModalProvider>
           <MFAStepUpProvider>
-            <CronitorHealthProvider>
+            <APIConnectivityProvider>
               <BrowserRouter>
                 <AppContent />
               </BrowserRouter>
-            </CronitorHealthProvider>
+            </APIConnectivityProvider>
           </MFAStepUpProvider>
         </AuthModalProvider>
       </AuthProvider>