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
+    },
+  });
+}

app/page.tsx

@@ -1,16 +1,33 @@
 'use client';
 
+import { useState } from 'react';
 import { Activity, Server, FileText, Settings } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { SystemStatus } from '@/components/process/SystemStatus';
 import { ProcessStateChart } from '@/components/charts/ProcessStateChart';
 import { ProcessUptimeChart } from '@/components/charts/ProcessUptimeChart';
 import { GroupStatistics } from '@/components/charts/GroupStatistics';
+import { ConnectionStatus } from '@/components/ui/ConnectionStatus';
 import { useProcesses } from '@/lib/hooks/useSupervisor';
+import { useEventSource } from '@/lib/hooks/useEventSource';
 import { ProcessState } from '@/lib/supervisor/types';
 
 export default function HomePage() {
-  const { data: processes, isLoading } = useProcesses();
+  const [realtimeEnabled] = useState(true);
+  const { data: processes, isLoading, isError, refetch } = useProcesses();
+
+  // Real-time updates via Server-Sent Events
+  const { status: connectionStatus, reconnectAttempts, reconnect } = useEventSource(
+    '/api/supervisor/events',
+    {
+      enabled: realtimeEnabled && !isLoading && !isError,
+      onMessage: (message) => {
+        if (message.event === 'process-update') {
+          refetch();
+        }
+      },
+    }
+  );
 
   const stats = {
     total: processes?.length ?? 0,
@@ -22,13 +39,20 @@ export default function HomePage() {
   return (
     <div className="space-y-8 animate-fade-in">
       {/* Header */}
-      <div>
-        <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
-          Supervisor Dashboard
-        </h1>
-        <p className="text-muted-foreground mt-2">
-          Monitor and manage your processes in real-time
-        </p>
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            Supervisor Dashboard
+          </h1>
+          <p className="text-muted-foreground mt-2">
+            Monitor and manage your processes in real-time
+          </p>
+        </div>
+        <ConnectionStatus
+          status={connectionStatus}
+          reconnectAttempts={reconnectAttempts}
+          onReconnect={reconnect}
+        />
       </div>
 
       {/* System Status */}

app/processes/page.tsx

@@ -11,6 +11,8 @@ import { RefreshCw, AlertCircle, CheckSquare, Keyboard } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useKeyboardShortcuts } from '@/lib/hooks/useKeyboardShortcuts';
 import { KeyboardShortcutsHelp } from '@/components/ui/KeyboardShortcutsHelp';
+import { ConnectionStatus } from '@/components/ui/ConnectionStatus';
+import { useEventSource } from '@/lib/hooks/useEventSource';
 import type { ProcessInfo } from '@/lib/supervisor/types';
 
 export default function ProcessesPage() {
@@ -19,9 +21,30 @@ export default function ProcessesPage() {
   const [filteredProcesses, setFilteredProcesses] = useState<ProcessInfo[]>([]);
   const [showShortcutsHelp, setShowShortcutsHelp] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState<number>(-1);
+  const [realtimeEnabled, setRealtimeEnabled] = useState(true);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const { data: processes, isLoading, isError, refetch } = useProcesses();
 
+  // Real-time updates via Server-Sent Events
+  const { status: connectionStatus, reconnectAttempts, reconnect } = useEventSource(
+    '/api/supervisor/events',
+    {
+      enabled: realtimeEnabled && !isLoading && !isError,
+      onMessage: (message) => {
+        if (message.event === 'process-update') {
+          // Invalidate and refetch process data
+          refetch();
+        }
+      },
+      onConnect: () => {
+        console.log('SSE connected');
+      },
+      onDisconnect: () => {
+        console.log('SSE disconnected');
+      },
+    }
+  );
+
   const handleFilterChange = useCallback((filtered: ProcessInfo[]) => {
     setFilteredProcesses(filtered);
   }, []);
@@ -193,12 +216,19 @@ export default function ProcessesPage() {
   return (
     <div className="space-y-6 animate-fade-in">
       <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold">Processes</h1>
-          <p className="text-muted-foreground mt-1">
-            {displayedProcesses.length} of {processes?.length ?? 0} processes
-            {displayedProcesses.length !== (processes?.length ?? 0) && ' (filtered)'}
-          </p>
+        <div className="flex items-center gap-4">
+          <div>
+            <h1 className="text-3xl font-bold">Processes</h1>
+            <p className="text-muted-foreground mt-1">
+              {displayedProcesses.length} of {processes?.length ?? 0} processes
+              {displayedProcesses.length !== (processes?.length ?? 0) && ' (filtered)'}
+            </p>
+          </div>
+          <ConnectionStatus
+            status={connectionStatus}
+            reconnectAttempts={reconnectAttempts}
+            onReconnect={reconnect}
+          />
         </div>
         <div className="flex items-center gap-4">
           {viewMode === 'flat' && displayedProcesses.length > 0 && (