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/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 */}