feat(logging): add comprehensive client-side logging (Phase 5)

Created client-side logging infrastructure for React Query and hooks:

New Client Logger (lib/utils/client-logger.ts):
- Environment-aware logging (debug/info in dev, warn/error in prod)
- Structured logging with context objects
- Performance timing helpers (time/timeEnd)
- Group logging for related operations
- Factory functions for hook/query/mutation-specific loggers

React Query Configuration (components/providers/Providers.tsx):
- Added custom logger to QueryClient
- Integrated with client-side logger for consistent formatting
- Configured mutation retry defaults

SSE Hook Logging (lib/hooks/useEventSource.ts):
- Connection lifecycle logging (connect/disconnect/reconnect)
- Heartbeat and process update event logging
- Error tracking with reconnection attempt details
- Exponential backoff logging for reconnections

Supervisor Hooks Logging (lib/hooks/useSupervisor.ts):
- Added logging to all critical mutation hooks:
  - Process control (start/stop/restart)
  - Batch operations (start-all/stop-all/restart-all)
  - Configuration reload
  - Signal operations
- Logs mutation start, success, and error states
- Includes contextual metadata (process names, signals, etc.)

All client-side logs:
- Use structured format with timestamps
- Include relevant context for debugging
- Respect environment (verbose in dev, minimal in prod)
- Compatible with browser devtools

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

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

lib/hooks/useEventSource.ts

@@ -1,4 +1,7 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
+import { createHookLogger } from '@/lib/utils/client-logger';
+
+const logger = createHookLogger('useEventSource');
 
 export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
 
@@ -36,6 +39,7 @@ export function useEventSource(url: string, options: UseEventSourceOptions = {})
   const connect = useCallback(() => {
     if (!enabled || eventSourceRef.current) return;
 
+    logger.info('Connecting to SSE', { url });
     setStatus('connecting');
 
     try {
@@ -43,6 +47,7 @@ export function useEventSource(url: string, options: UseEventSourceOptions = {})
       eventSourceRef.current = eventSource;
 
       eventSource.addEventListener('connected', () => {
+        logger.info('SSE connected successfully', { url });
         setStatus('connected');
         setReconnectAttempts(0);
         onConnect?.();
@@ -51,6 +56,7 @@ export function useEventSource(url: string, options: UseEventSourceOptions = {})
       eventSource.addEventListener('heartbeat', (event) => {
         // Keep connection alive
         if (status !== 'connected') {
+          logger.debug('SSE heartbeat received, updating status to connected');
           setStatus('connected');
         }
       });
@@ -58,15 +64,20 @@ export function useEventSource(url: string, options: UseEventSourceOptions = {})
       eventSource.addEventListener('process-update', (event) => {
         try {
           const data = JSON.parse(event.data);
+          logger.debug('Process update received', {
+            processCount: data.processes?.length,
+            timestamp: data.timestamp,
+          });
           onMessage?.({ event: 'process-update', data });
         } catch (error) {
-          console.error('Failed to parse SSE message:', error);
+          logger.error('Failed to parse SSE message', error, { event: event.data });
         }
       });
 
       eventSource.addEventListener('error', (event) => {
         try {
           const data = JSON.parse((event as MessageEvent).data);
+          logger.warn('SSE error event received', { error: data });
           onMessage?.({ event: 'error', data });
         } catch (error) {
           // Not a message error, connection error
@@ -74,7 +85,7 @@ export function useEventSource(url: string, options: UseEventSourceOptions = {})
       });
 
       eventSource.onerror = (event) => {
-        console.error('EventSource error:', event);
+        logger.error('EventSource connection error', event);
         setStatus('error');
         onError?.(event);
 
@@ -85,24 +96,33 @@ export function useEventSource(url: string, options: UseEventSourceOptions = {})
         // Attempt reconnection with exponential backoff
         if (reconnectAttempts < maxReconnectAttempts) {
           const delay = Math.min(reconnectInterval * Math.pow(2, reconnectAttempts), 30000);
-          console.log(`Reconnecting in ${delay}ms (attempt ${reconnectAttempts + 1}/${maxReconnectAttempts})`);
+          logger.info('Scheduling reconnection', {
+            delay,
+            attempt: reconnectAttempts + 1,
+            maxAttempts: maxReconnectAttempts,
+          });
 
           reconnectTimeoutRef.current = setTimeout(() => {
             setReconnectAttempts((prev) => prev + 1);
             connect();
           }, delay);
         } else {
+          logger.warn('Max reconnection attempts reached, disconnecting', {
+            maxAttempts: maxReconnectAttempts,
+          });
           setStatus('disconnected');
           onDisconnect?.();
         }
       };
     } catch (error) {
-      console.error('Failed to create EventSource:', error);
+      logger.error('Failed to create EventSource', error, { url });
       setStatus('error');
     }
   }, [url, enabled, status, reconnectAttempts, maxReconnectAttempts, reconnectInterval, onMessage, onError, onConnect, onDisconnect]);
 
   const disconnect = useCallback(() => {
+    logger.info('Disconnecting from SSE');
+
     if (reconnectTimeoutRef.current) {
       clearTimeout(reconnectTimeoutRef.current);
       reconnectTimeoutRef.current = null;
@@ -118,6 +138,7 @@ export function useEventSource(url: string, options: UseEventSourceOptions = {})
   }, []);
 
   const reconnect = useCallback(() => {
+    logger.info('Manual reconnection requested');
     disconnect();
     setReconnectAttempts(0);
     connect();