[Feature]: Add Connection Latency (Ping) Indicator and Heartbeat Mechanism

[Nakshatra480]

Problem Statement

Description

Currently, the useRemoteConnection.ts hook only tracks basic connection states (connected or disconnected).

In a LAN-based remote input tool like Rein, even minor network congestion can lead to frustrating input lag. Currently, users have no way of knowing if "laggy" movement is caused by:

1. Network Latency: Poor Wi-Fi signal or interference.
2. Host Performance: CPU spikes on the desktop computer.
3. Connection Drops: Stale WebSocket connections that haven't explicitly closed.

Technical Overview:

1. Frontend (useRemoteConnection.ts):
   • Implement a timer to send a { type: 'ping', timestamp: Date.now() } message every 2-3 seconds.
   • Calculate the Round-Trip Time (RTT) once the pong response is received.
2. Backend (websocket.ts):
   • Add a listener to respond immediately to ping messages with a pong message containing the original timestamp.
3. UI Implementation:
   • Display the latency (e.g., Ping: 12ms) in the trackpad.tsx or ControlBar.tsx component.
   • Visual cue: Use colors (Green for <50ms, Yellow for 50-150ms, Red for >150ms) to help users diagnose connection quality at a glance.

Proposed Solution

I propose implementing a simple heartbeat (ping/pong) mechanism to provide real-time latency feedback in the UI.

Alternatives Considered

Native WebSocket Pings: While the WebSocket protocol supports native ping/pong frames, they are not exposed to the browser's JavaScript API. An application-level implementation is the most reliable way to measure latency in this context.

Additional Context

Providing transparency into connection quality will significantly improve the user experience, especially when using Rein in environments with unstable Wi-Fi. It helps developers and users quickly identify whether performance issues are network-related or hardware-related.

Checklist

• I have searched for existing feature requests to avoid duplicates