feat: Implement Cronitor health monitor

src/components/ui/api-status-banner.tsx

@@ -0,0 +1,56 @@
+import { AlertTriangle, X, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useCronitorHealth } from '@/contexts/CronitorHealthContext';
+
+/**
+ * Banner displayed when Cronitor detects Supabase API is down
+ * Includes link to status page and dismissal option
+ */
+export function APIStatusBanner() {
+  const { passing, isLoading, isBannerDismissed, dismissBanner } = useCronitorHealth();
+  
+  // Don't show if:
+  // - Still loading initial data
+  // - API is healthy (passing === true)
+  // - User dismissed it
+  // - Status unknown (passing === null) after initial load
+  if (isLoading || passing === true || passing === null || isBannerDismissed) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 bg-destructive text-destructive-foreground shadow-lg">
+      <div className="container mx-auto px-4 py-3">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3 flex-1">
+            <AlertTriangle className="h-5 w-5 flex-shrink-0" />
+            <div className="flex-1">
+              <p className="font-semibold">API Monitoring Alert</p>
+              <p className="text-sm opacity-90">
+                Supabase services are experiencing issues. Some features may be temporarily unavailable.
+              </p>
+              <a
+                href="https://status.thrillwiki.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm inline-flex items-center gap-1 mt-1 underline hover:opacity-80 transition-opacity"
+              >
+                View Status Page
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={dismissBanner}
+            className="flex-shrink-0 hover:bg-destructive-foreground/10 text-destructive-foreground"
+            aria-label="Dismiss alert"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}