feat: implement Phase 11 - Real-time Updates with SSE

Features added:
- Created SSE (Server-Sent Events) endpoint at /api/supervisor/events
  - Polls supervisor every 2 seconds for state changes
  - Sends process-update events when state changes detected
  - Sends heartbeat events to keep connection alive
  - Includes error handling with error events
- Created useEventSource hook for managing SSE connections
  - Automatic reconnection with exponential backoff
  - Configurable max reconnection attempts (default 10)
  - Connection status tracking (connecting, connected, disconnected, error)
  - Clean event listener management with proper cleanup
  - Heartbeat monitoring for connection health
- Created ConnectionStatus component
  - Visual status indicator with icons (Wifi, WifiOff, Loader, AlertCircle)
  - Color-coded states (green=connected, yellow=connecting, red=error)
  - Shows reconnection attempt count
  - Manual reconnect button when disconnected/error
- Integrated real-time updates into dashboard and processes pages
  - Auto-refresh process data when state changes occur
  - Connection status indicator in page headers
  - No manual refresh needed for live updates
- Implemented proper cleanup on unmount
  - EventSource properly closed
  - Reconnection timeouts cleared
  - No memory leaks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/api/supervisor/events/route.ts

@@ -0,0 +1,84 @@
+import { NextRequest } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * Server-Sent Events endpoint for real-time process state updates
+ * Polls supervisor every 2 seconds and sends state changes to clients
+ */
+export async function GET(request: NextRequest) {
+  const encoder = new TextEncoder();
+  let intervalId: NodeJS.Timeout | null = null;
+  let previousState: string | null = null;
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      // Helper to send SSE message
+      const sendEvent = (event: string, data: any) => {
+        const message = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+        controller.enqueue(encoder.encode(message));
+      };
+
+      // Send initial connection message
+      sendEvent('connected', { timestamp: Date.now() });
+
+      // Poll supervisor for state changes
+      const pollSupervisor = async () => {
+        try {
+          const client = createSupervisorClient();
+          const processes = await client.getAllProcessInfo();
+
+          // Create state snapshot
+          const currentState = JSON.stringify(
+            processes.map((p) => ({
+              name: `${p.group}:${p.name}`,
+              state: p.state,
+              pid: p.pid,
+              statename: p.statename,
+            }))
+          );
+
+          // Send update if state changed
+          if (currentState !== previousState) {
+            sendEvent('process-update', {
+              processes,
+              timestamp: Date.now(),
+            });
+            previousState = currentState;
+          }
+
+          // Send heartbeat every poll
+          sendEvent('heartbeat', { timestamp: Date.now() });
+        } catch (error: any) {
+          console.error('SSE polling error:', error);
+          sendEvent('error', {
+            message: error.message || 'Failed to fetch process state',
+            timestamp: Date.now(),
+          });
+        }
+      };
+
+      // Initial poll
+      await pollSupervisor();
+
+      // Poll every 2 seconds
+      intervalId = setInterval(pollSupervisor, 2000);
+    },
+
+    cancel() {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      'Connection': 'keep-alive',
+      'X-Accel-Buffering': 'no', // Disable nginx buffering
+    },
+  });
+}