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/utils/client-logger.ts

@@ -0,0 +1,137 @@
+'use client';
+
+/**
+ * Client-side logging utility
+ * Logs to console in development, can be extended to send to server in production
+ */
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+interface LogContext {
+  [key: string]: any;
+}
+
+class ClientLogger {
+  private isDevelopment: boolean;
+
+  constructor() {
+    this.isDevelopment = process.env.NODE_ENV === 'development';
+  }
+
+  private formatMessage(level: LogLevel, message: string, context?: LogContext): string {
+    const timestamp = new Date().toISOString();
+    const contextStr = context ? ` ${JSON.stringify(context)}` : '';
+    return `[${timestamp}] [${level.toUpperCase()}] ${message}${contextStr}`;
+  }
+
+  private shouldLog(level: LogLevel): boolean {
+    // In production, only log warnings and errors
+    if (!this.isDevelopment && (level === 'debug' || level === 'info')) {
+      return false;
+    }
+    return true;
+  }
+
+  debug(message: string, context?: LogContext): void {
+    if (this.shouldLog('debug')) {
+      console.debug(this.formatMessage('debug', message, context));
+    }
+  }
+
+  info(message: string, context?: LogContext): void {
+    if (this.shouldLog('info')) {
+      console.info(this.formatMessage('info', message, context));
+    }
+  }
+
+  warn(message: string, context?: LogContext): void {
+    if (this.shouldLog('warn')) {
+      console.warn(this.formatMessage('warn', message, context));
+    }
+  }
+
+  error(message: string, error?: Error | unknown, context?: LogContext): void {
+    if (this.shouldLog('error')) {
+      const errorContext = {
+        ...context,
+        error: error instanceof Error ? {
+          message: error.message,
+          stack: error.stack,
+          name: error.name,
+        } : error,
+      };
+      console.error(this.formatMessage('error', message, errorContext));
+    }
+  }
+
+  // Performance timing helper
+  time(label: string): void {
+    if (this.isDevelopment) {
+      console.time(label);
+    }
+  }
+
+  timeEnd(label: string): void {
+    if (this.isDevelopment) {
+      console.timeEnd(label);
+    }
+  }
+
+  // Group logging for related operations
+  group(label: string): void {
+    if (this.isDevelopment) {
+      console.group(label);
+    }
+  }
+
+  groupEnd(): void {
+    if (this.isDevelopment) {
+      console.groupEnd();
+    }
+  }
+}
+
+// Export singleton instance
+export const clientLogger = new ClientLogger();
+
+// Hook-specific logger factory
+export function createHookLogger(hookName: string) {
+  return {
+    debug: (message: string, context?: LogContext) =>
+      clientLogger.debug(`[${hookName}] ${message}`, context),
+    info: (message: string, context?: LogContext) =>
+      clientLogger.info(`[${hookName}] ${message}`, context),
+    warn: (message: string, context?: LogContext) =>
+      clientLogger.warn(`[${hookName}] ${message}`, context),
+    error: (message: string, error?: Error | unknown, context?: LogContext) =>
+      clientLogger.error(`[${hookName}] ${message}`, error, context),
+  };
+}
+
+// Query/Mutation logger factory
+export function createQueryLogger(queryKey: readonly unknown[]) {
+  const key = JSON.stringify(queryKey);
+  return {
+    debug: (message: string, context?: LogContext) =>
+      clientLogger.debug(`[Query: ${key}] ${message}`, context),
+    info: (message: string, context?: LogContext) =>
+      clientLogger.info(`[Query: ${key}] ${message}`, context),
+    warn: (message: string, context?: LogContext) =>
+      clientLogger.warn(`[Query: ${key}] ${message}`, context),
+    error: (message: string, error?: Error | unknown, context?: LogContext) =>
+      clientLogger.error(`[Query: ${key}] ${message}`, error, context),
+  };
+}
+
+export function createMutationLogger(mutationKey: string) {
+  return {
+    debug: (message: string, context?: LogContext) =>
+      clientLogger.debug(`[Mutation: ${mutationKey}] ${message}`, context),
+    info: (message: string, context?: LogContext) =>
+      clientLogger.info(`[Mutation: ${mutationKey}] ${message}`, context),
+    warn: (message: string, context?: LogContext) =>
+      clientLogger.warn(`[Mutation: ${mutationKey}] ${message}`, context),
+    error: (message: string, error?: Error | unknown, context?: LogContext) =>
+      clientLogger.error(`[Mutation: ${mutationKey}] ${message}`, error, context),
+  };
+}