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>
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>
