feat: Implement Cronitor health monitor

src/App.tsx

@@ -9,6 +9,7 @@ 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 { LocationAutoDetectProvider } from "@/components/providers/LocationAutoDetectProvider";
 import { AnalyticsWrapper } from "@/components/analytics/AnalyticsWrapper";
 import { Footer } from "@/components/layout/Footer";
@@ -19,6 +20,8 @@ import { EntityErrorBoundary } from "@/components/error/EntityErrorBoundary";
 import { breadcrumb } from "@/lib/errorBreadcrumbs";
 import { handleError } from "@/lib/errorHandler";
 import { RetryStatusIndicator } from "@/components/ui/retry-status-indicator";
+import { APIStatusBanner } from "@/components/ui/api-status-banner";
+import { cn } from "@/lib/utils";
 
 // Core routes (eager-loaded for best UX)
 import Index from "./pages/Index";
@@ -142,9 +145,15 @@ function AppContent(): React.JSX.Element {
     console.log('[Cronitor] RUM initialized');
   }, []);
 
+  // Check if API status banner is visible to add padding
+  const { passing, isBannerDismissed } = useCronitorHealth();
+  const showBanner = passing === false && !isBannerDismissed;
+
   return (
     <TooltipProvider>
-      <NavigationTracker />
+      <APIStatusBanner />
+      <div className={cn(showBanner && "pt-20")}>
+        <NavigationTracker />
         <LocationAutoDetectProvider />
         <RetryStatusIndicator />
         <Toaster />
@@ -395,7 +404,8 @@ function AppContent(): React.JSX.Element {
           </div>
           <Footer />
         </div>
-      </TooltipProvider>
+      </div>
+    </TooltipProvider>
   );
 }
 
@@ -404,9 +414,11 @@ const App = (): React.JSX.Element => (
     <AuthProvider>
       <AuthModalProvider>
         <MFAStepUpProvider>
-          <BrowserRouter>
-            <AppContent />
-          </BrowserRouter>
+          <CronitorHealthProvider>
+            <BrowserRouter>
+              <AppContent />
+            </BrowserRouter>
+          </CronitorHealthProvider>
         </MFAStepUpProvider>
       </AuthModalProvider>
     </AuthProvider>