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/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 && (