init

hooks/use-sse.ts

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useRef, useCallback, useState } from "react";
+
+export interface SSEEvent {
+  type: string;
+  data: Record<string, unknown>;
+}
+
+interface UseSSEOptions {
+  url: string;
+  onEvent?: (event: SSEEvent) => void;
+  enabled?: boolean;
+}
+
+export function useSSE({ url, onEvent, enabled = true }: UseSSEOptions) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [lastEvent, setLastEvent] = useState<SSEEvent | null>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const onEventRef = useRef(onEvent);
+
+  // Keep callback ref updated
+  onEventRef.current = onEvent;
+
+  const connect = useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    const es = new EventSource(url);
+    eventSourceRef.current = es;
+
+    es.onopen = () => setIsConnected(true);
+    es.onerror = () => {
+      setIsConnected(false);
+      // Auto-reconnect is built into EventSource
+    };
+
+    // Listen for all event types
+    const eventTypes = ["heartbeat", "task", "stats", "online", "offline", "connected"];
+    eventTypes.forEach((type) => {
+      es.addEventListener(type, (e: MessageEvent) => {
+        try {
+          const data = JSON.parse(e.data);
+          const event: SSEEvent = { type, data };
+          setLastEvent(event);
+          onEventRef.current?.(event);
+        } catch {
+          // skip malformed events
+        }
+      });
+    });
+
+    return es;
+  }, [url]);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const es = connect();
+    return () => {
+      es.close();
+      setIsConnected(false);
+    };
+  }, [connect, enabled]);
+
+  return { isConnected, lastEvent };
+}