feat(orchestrator): add SSE events, queue controls, and mosaic rails sync

apps/web/src/components/widgets/AgentStatusWidget.tsx

@@ -2,7 +2,7 @@
  * Agent Status Widget - shows running agents
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Bot, Activity, AlertCircle, CheckCircle, Clock } from "lucide-react";
 import type { WidgetProps } from "@mosaic/shared";
 
@@ -21,46 +21,57 @@ export function AgentStatusWidget({ id: _id, config: _config }: WidgetProps): Re
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const fetchAgents = useCallback(async (): Promise<void> => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/orchestrator/agents", {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch agents: ${response.statusText}`);
+      }
+
+      const data = (await response.json()) as Agent[];
+      setAgents(data);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      console.error("Failed to fetch agents:", errorMessage);
+      setError(errorMessage);
+      setAgents([]); // Clear agents on error
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
   // Fetch agents from orchestrator API
   useEffect(() => {
-    const fetchAgents = async (): Promise<void> => {
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        const response = await fetch("/api/orchestrator/agents", {
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch agents: ${response.statusText}`);
-        }
-
-        const data = (await response.json()) as Agent[];
-        setAgents(data);
-      } catch (err: unknown) {
-        const errorMessage = err instanceof Error ? err.message : "Unknown error";
-        console.error("Failed to fetch agents:", errorMessage);
-        setError(errorMessage);
-        setAgents([]); // Clear agents on error
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
     void fetchAgents();
 
     // Refresh every 30 seconds
     const interval = setInterval(() => {
       void fetchAgents();
-    }, 30000);
+    }, 20000);
+
+    const eventSource =
+      typeof EventSource !== "undefined" ? new EventSource("/api/orchestrator/events") : null;
+    if (eventSource) {
+      eventSource.onmessage = (): void => {
+        void fetchAgents();
+      };
+      eventSource.onerror = (): void => {
+        // polling remains fallback
+      };
+    }
 
     return (): void => {
       clearInterval(interval);
+      eventSource?.close();
     };
-  }, []);
+  }, [fetchAgents]);
 
   const getStatusIcon = (status: string): React.JSX.Element => {
     const statusLower = status.toLowerCase();