Feat/websocket

[nafiuishaaq]

Summary of Changes

I've successfully implemented all the requested improvements to the WebSocket infrastructure:

1. Exponential Backoff Implemented ✅

• Added exponential backoff with configurable initial interval (default: 1s), max interval (default: 30s), and backoff multiplier (default: 2x)
• Added jitter to the delay to prevent thundering herd problems
• The backoff sequence for reconnection attempts is: ~1s, ~2s, ~4s, ~8s, ~16s, then capped at 30s
• Maximum reconnection attempts increased from 5 to 10

2. Memory Leaks Prevented ✅

• Added isMountedRef to track component mount state and prevent state updates after unmount
• Centralized timer management with clearAllTimers() to ensure all timeouts and intervals are properly cleaned up
• All event listeners are cleared on unmount
• WebSocket connections are properly closed and nullified
• Guards added to all socket event handlers to prevent execution if component is unmounted

3. Sync Status Indicators Enhanced ✅

• WebSocket status indicator already existed in the UI (used in Topbar)
• Enhanced to show current reconnection attempt number when reconnecting: "Reconnecting... (Attempt 3)"
• Connection states properly reflected: connecting (amber spinner), connected (green wifi), offline (gray wifi off), error (gray)
• WebSocketIndicator component shows animated pulse for reconnecting state

4. Additional Improvements

• Added backward compatibility for deprecated reconnectInterval config
• Exposed reconnectAttempts through the WebSocket context for UI components to use
• Added logging for reconnection attempts to help with debugging
• Clear error state when max reconnection attempts are reached
• Proper cleanup of all resources in the useEffect cleanup function

Files Modified:

1. src/hooks/useWebSocket.ts - Major refactoring to add exponential backoff and memory leak prevention
2. src/app/types/websocket.ts - Updated WebSocketConfig with new options
3. src/components/providers/WebSocketProvider.tsx - Updated context to include reconnectAttempts
4. src/components/ui/WebSocketStatus.tsx - Enhanced to show reconnection attempt number

The WebSocket implementation now has robust reconnection logic with exponential backoff, no memory leaks, and clear visual feedback to users about the real-time connection status.

closes #204