Invalidate all system-alerts queries on resolve

Update PipelineHealthAlerts resolve flow to invalidate all severity-specific system_alerts queries (not just the base key), ensuring resolved alerts disappear from UI. Adds broad invalidation pattern and preserves loading state handling.

src/components/admin/PipelineHealthAlerts.tsx

@@ -5,14 +5,17 @@
  * Shows top 10 active alerts with severity-based styling and resolution actions.
  */
 
+import { useState } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useSystemAlerts } from '@/hooks/useSystemHealth';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { AlertTriangle, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { AlertTriangle, CheckCircle, XCircle, AlertCircle, Loader2 } from 'lucide-react';
 import { format } from 'date-fns';
 import { supabase } from '@/lib/supabaseClient';
 import { toast } from 'sonner';
+import { useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from '@/lib/queryKeys';
 
 const SEVERITY_CONFIG = {
   critical: { color: 'destructive', icon: XCircle },
@@ -38,6 +41,8 @@ const ALERT_TYPE_LABELS: Record<string, string> = {
 };
 
 export function PipelineHealthAlerts() {
+  const queryClient = useQueryClient();
+  const [resolvingAlertId, setResolvingAlertId] = useState<string | null>(null);
   const { data: criticalAlerts } = useSystemAlerts('critical');
   const { data: highAlerts } = useSystemAlerts('high');
   const { data: mediumAlerts } = useSystemAlerts('medium');
@@ -49,15 +54,34 @@ export function PipelineHealthAlerts() {
   ].slice(0, 10);
 
   const resolveAlert = async (alertId: string) => {
-    const { error } = await supabase
+    console.log('🔴 Resolve button clicked in PipelineHealthAlerts', { alertId });
-      .from('system_alerts')
+    setResolvingAlertId(alertId);
-      .update({ resolved_at: new Date().toISOString() })
-      .eq('id', alertId);
     
-    if (error) {
+    try {
-      toast.error('Failed to resolve alert');
+      const { error } = await supabase
-    } else {
+        .from('system_alerts')
+        .update({ resolved_at: new Date().toISOString() })
+        .eq('id', alertId);
+
+      if (error) {
+        console.error('❌ Error resolving alert:', error);
+        toast.error('Failed to resolve alert');
+        return;
+      }
+      
+      console.log('✅ Alert resolved successfully');
       toast.success('Alert resolved');
+      
+      // Invalidate all system-alerts queries (critical, high, medium, etc.)
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['system-alerts'] }),
+        queryClient.invalidateQueries({ queryKey: queryKeys.monitoring.systemHealth() })
+      ]);
+    } catch (err) {
+      console.error('❌ Unexpected error resolving alert:', err);
+      toast.error('An unexpected error occurred');
+    } finally {
+      setResolvingAlertId(null);
     }
   };
 
@@ -113,8 +137,16 @@ export function PipelineHealthAlerts() {
                 variant="outline"
                 size="sm"
                 onClick={() => resolveAlert(alert.id)}
+                disabled={resolvingAlertId === alert.id}
               >
-                Resolve
+                {resolvingAlertId === alert.id ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Resolving...
+                  </>
+                ) : (
+                  'Resolve'
+                )}
               </Button>
             </div>
           );