PR18: Events + Admin SSE diagnostics

api/admin_ui/package.json

@@ -9,32 +9,33 @@
     "test": "vitest"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@mui/material": "^5.14.20",
-    "@mui/icons-material": "^5.14.19",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "react-router-dom": "^6.20.1",
-    "react-hook-form": "^7.48.2",
-    "@xterm/xterm": "^5.5.0",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.20",
+    "@xterm/addon-attach": "^0.11.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
-    "@xterm/addon-attach": "^0.11.0"
+    "@xterm/xterm": "^5.5.0",
+    "date-fns": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
+    "react-router-dom": "^6.20.1"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.0",
+    "msw": "^2.3.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.8",
-    "vitest": "^1.0.4",
-    "@testing-library/react": "^14.1.2",
-    "msw": "^2.3.1"
+    "vitest": "^1.0.4"
   },
   "msw": {
     "workerDirectory": [
       "public"
     ]
   }
-}
+}

api/admin_ui/src/api/client.ts

@@ -237,6 +237,84 @@ export class AdminAPIClient {
     return res.json();
   }
 
+  // Events & Diagnostics
+  async getRecentEvents(params: {
+    limit?: number;
+    provider_id?: string;
+    event_type?: string;
+    from_db?: boolean
+  } = {}): Promise<{ events: any[]; total: number; source: string }> {
+    const search = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        search.append(key, String(value));
+      }
+    });
+    const res = await this.fetch(`/admin/diagnostics/events/recent?${search}`);
+    return res.json();
+  }
+
+  async getEventTypes(): Promise<{ event_types: Array<{ value: string; label: string }> }> {
+    const res = await this.fetch('/admin/diagnostics/events/types');
+    return res.json();
+  }
+
+  createEventSSE(): EventSource {
+    // Note: EventSource doesn't support custom headers directly
+    // Pass API key as query parameter for authentication
+    const params = new URLSearchParams();
+    params.append('X-API-Key', this.apiKey);
+    return new EventSource(`${this.baseURL}/admin/diagnostics/events/sse?${params.toString()}`);
+  }
+
+  // Provider Health Management
+  async getProviderHealthStatus(): Promise<{
+    provider_statuses: Record<string, any>;
+    total_providers: number;
+    healthy_count: number;
+    degraded_count: number;
+    circuit_open_count: number;
+    disabled_count: number;
+  }> {
+    const res = await this.fetch('/admin/providers/health');
+    return res.json();
+  }
+
+  async enableProvider(providerId: string): Promise<{
+    success: boolean;
+    provider_id: string;
+    new_status: string;
+    message?: string;
+  }> {
+    const res = await this.fetch('/admin/providers/enable', {
+      method: 'POST',
+      body: JSON.stringify({ provider_id: providerId }),
+    });
+    return res.json();
+  }
+
+  async disableProvider(providerId: string): Promise<{
+    success: boolean;
+    provider_id: string;
+    new_status: string;
+    message?: string;
+  }> {
+    const res = await this.fetch('/admin/providers/disable', {
+      method: 'POST',
+      body: JSON.stringify({ provider_id: providerId }),
+    });
+    return res.json();
+  }
+
+  async shouldAllowRequests(providerId: string): Promise<{
+    provider_id: string;
+    allowed: boolean;
+    reason: string;
+  }> {
+    const res = await this.fetch(`/admin/providers/circuit-breaker/${encodeURIComponent(providerId)}/should-allow`);
+    return res.json();
+  }
+
   // Jobs
   async listJobs(params: { 
     status?: string; 

api/admin_ui/src/components/Diagnostics.tsx

@@ -46,6 +46,8 @@ import AdminAPIClient from '../api/client';
 import type { DiagnosticsResult } from '../api/types';
 import { useTraits } from '../hooks/useTraits';
 import { ResponsiveFormSection } from './common/ResponsiveFormFields';
+import EventStream from './EventStream';
+import ProviderHealthStatus from './ProviderHealthStatus';
 
 interface DiagnosticsProps {
   client: AdminAPIClient;
@@ -1031,6 +1033,22 @@ function Diagnostics({ client, onNavigate, docsBase }: DiagnosticsProps) {
                   renderCheckSection(title.charAt(0).toUpperCase() + title.slice(1), checks as Record<string, any>)
                 ))}
               </Box>
+
+              {/* Event Stream */}
+              <Box sx={{ mt: 4 }}>
+                <Typography variant="h6" fontWeight={600} sx={{ mb: 2 }}>
+                  Real-time Event Stream
+                </Typography>
+                <EventStream client={client} />
+              </Box>
+
+              {/* Provider Health Status */}
+              <Box sx={{ mt: 4 }}>
+                <Typography variant="h6" fontWeight={600} sx={{ mb: 2 }}>
+                  Provider Health Status
+                </Typography>
+                <ProviderHealthStatus client={client} />
+              </Box>
             </Box>
           </Fade>
         )}