Implement alert correlation UI

- Add hooks and components for correlated alerts and incidents
- Integrate panels into MonitoringOverview
- Extend query keys for correlation and incidents
- Implement incident actions (create, acknowledge, resolve) and wiring

src/pages/admin/MonitoringOverview.tsx

@@ -4,11 +4,15 @@ import { AdminLayout } from '@/components/layout/AdminLayout';
 import { RefreshButton } from '@/components/ui/refresh-button';
 import { SystemHealthStatus } from '@/components/admin/SystemHealthStatus';
 import { GroupedAlertsPanel } from '@/components/admin/GroupedAlertsPanel';
+import { CorrelatedAlertsPanel } from '@/components/admin/CorrelatedAlertsPanel';
+import { IncidentsPanel } from '@/components/admin/IncidentsPanel';
 import { MonitoringQuickStats } from '@/components/admin/MonitoringQuickStats';
 import { RecentActivityTimeline } from '@/components/admin/RecentActivityTimeline';
 import { MonitoringNavCards } from '@/components/admin/MonitoringNavCards';
 import { useSystemHealth } from '@/hooks/useSystemHealth';
 import { useGroupedAlerts } from '@/hooks/admin/useGroupedAlerts';
+import { useCorrelatedAlerts } from '@/hooks/admin/useCorrelatedAlerts';
+import { useIncidents } from '@/hooks/admin/useIncidents';
 import { useRecentActivity } from '@/hooks/admin/useRecentActivity';
 import { useDatabaseHealth } from '@/hooks/admin/useDatabaseHealth';
 import { useModerationHealth } from '@/hooks/admin/useModerationHealth';
@@ -24,6 +28,8 @@ export default function MonitoringOverview() {
   // Fetch all monitoring data
   const systemHealth = useSystemHealth();
   const groupedAlerts = useGroupedAlerts({ includeResolved: false });
+  const correlatedAlerts = useCorrelatedAlerts();
+  const incidents = useIncidents('open');
   const recentActivity = useRecentActivity(3600000); // 1 hour
   const dbHealth = useDatabaseHealth();
   const moderationHealth = useModerationHealth();
@@ -32,6 +38,8 @@ export default function MonitoringOverview() {
   const isLoading = 
     systemHealth.isLoading ||
     groupedAlerts.isLoading ||
+    correlatedAlerts.isLoading ||
+    incidents.isLoading ||
     recentActivity.isLoading ||
     dbHealth.isLoading ||
     moderationHealth.isLoading ||
@@ -58,14 +66,24 @@ export default function MonitoringOverview() {
       queryKey: queryKeys.monitoring.groupedAlerts(),
       refetchType: 'active'
     });
+    await queryClient.invalidateQueries({
+      queryKey: queryKeys.monitoring.correlatedAlerts(),
+      refetchType: 'active'
+    });
+    await queryClient.invalidateQueries({
+      queryKey: queryKeys.monitoring.incidents(),
+      refetchType: 'active'
+    });
   };
 
   // Calculate error count for nav card (from recent activity)
   const errorCount = recentActivity.data?.filter(e => e.type === 'error').length || 0;
   
-  // Calculate stats from grouped alerts
+  // Calculate stats from grouped alerts and incidents
   const totalGroupedAlerts = groupedAlerts.data?.reduce((sum, g) => sum + g.unresolved_count, 0) || 0;
   const recurringIssues = groupedAlerts.data?.filter(g => g.is_recurring).length || 0;
+  const activeIncidents = incidents.data?.length || 0;
+  const criticalIncidents = incidents.data?.filter(i => i.severity === 'critical').length || 0;
 
   return (
     <AdminLayout>
@@ -106,6 +124,18 @@ export default function MonitoringOverview() {
           isLoading={groupedAlerts.isLoading}
         />
 
+        {/* Correlated Alerts - Potential Incidents */}
+        <CorrelatedAlertsPanel
+          correlations={correlatedAlerts.data}
+          isLoading={correlatedAlerts.isLoading}
+        />
+
+        {/* Active Incidents */}
+        <IncidentsPanel
+          incidents={incidents.data}
+          isLoading={incidents.isLoading}
+        />
+
         {/* Quick Stats Grid */}
         <MonitoringQuickStats
           systemHealth={systemHealth.data ?? undefined}