feat: add ping latency indicator and heartbeat.#244
Merged
imxade merged 2 commits intoMar 4, 2026
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
💤 Files with no reviewable changes (1)
WalkthroughThe PR implements a heartbeat-based latency measurement system. The client sends ping messages every 2 seconds; the server echoes back pong messages with timestamps. The client calculates round-trip time and displays it via a color-coded LatencyBadge component. The status prop is removed from TouchArea as it's replaced by latency visualization. Changes
Sequence DiagramsequenceDiagram
participant Client as Client<br/>(React)
participant WebSocket as WebSocket<br/>(Connection)
participant Server as Server<br/>(ws handler)
participant UI as UI<br/>(LatencyBadge)
Note over Client: status = "connected"
Client->>Client: Set up 2s heartbeat interval
loop Every 2 seconds
Client->>WebSocket: Send ping<br/>(type: "ping", timestamp: now)
WebSocket->>Server: Receive ping
Server->>Server: Extract timestamp
Server->>WebSocket: Send pong<br/>(type: "pong", timestamp: echo)
WebSocket->>Client: Receive pong
Client->>Client: Calculate RTT<br/>(now - pong.timestamp)
Client->>Client: Update latency state
Client->>UI: Render LatencyBadge
UI->>UI: Color code based<br/>on latency value
end
Note over Client: status changed or unmount
Client->>Client: Clear interval
Client->>Client: Unsubscribe pong listener
Client->>Client: Reset latency = null
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Trackpad/ControlBar.tsx`:
- Around line 43-45: The hardcoded "ms" unit in the ControlBar render should be
moved into i18n so the UI string is localizable: replace the literal "ms" in
src/components/Trackpad/ControlBar.tsx (the span that renders {latency}ms) with
a lookup from the i18n resource (e.g., t('latency.unit') or similar) and add the
corresponding key/value to the locale files; ensure the component imports and
uses the existing translation hook (e.g., useTranslation or t) and that the
rendered text becomes `${latency}${t('latency.unit')}` (or the equivalent
translation interpolation pattern used in the codebase).
- Around line 35-39: The ternary in ControlBar.tsx that chooses the text color
uses `latency < 150`, which makes 150ms render red; change that comparison to
`latency <= 150` so the middle branch covers 50–150ms inclusive. Update the
conditional expression that returns "text-green-400" / "text-yellow-400" /
"text-red-400" (the latency color selection logic) to use `<= 150` for the
yellow case so only values >150ms become red.
In `@src/contexts/ConnectionProvider.tsx`:
- Around line 178-182: The pong handler in ConnectionProvider uses
subscribe("pong", ...) and casts msg to { timestamp?: number } then computes
setLatency(Date.now() - pong.timestamp) without validating timestamp, which can
produce NaN; update the callback to explicitly check the type of pong.timestamp
(e.g., typeof pong.timestamp === "number" && Number.isFinite(pong.timestamp"))
before calculating RTT and only call setLatency when valid, otherwise ignore or
set a fallback/clear value to avoid propagating NaN into the context/UI.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: da695c80-7bee-4804-9294-32ba6a8aec45
📒 Files selected for processing (3)
src/components/Trackpad/ControlBar.tsxsrc/contexts/ConnectionProvider.tsxsrc/server/websocket.ts
28 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #83
Description
This PR implements a real-time connection latency indicator and heartbeat mechanism to help users diagnose network performance issues, as requested in #83.
Key Changes
Backend
websocket.ts: Added a minimalist ping handler that echoes back the client's timestamp via a pong message.Core
ConnectionProvider.tsx: Implemented a 2-second heartbeat interval that calculates Round-Trip Time (RTT) and exposes it via the connection context.UI
ControlBar.tsx: Added a color-coded LatencyBadge to the bottom toolbar:Green (<50ms): Excellent connection.
Yellow (50-150ms): Noticeable lag.
Red (>150ms): High latency/unstable connection.
Screenshots/Recordings:
Functional Verification
Screen Mirror
Authentication
Basic Gestures
One-finger tap: Verified as Left Click.
Two-finger tap: Verified as Right Click.
Click and drag: Verified selection behavior.
Pinch to zoom: Verified zoom functionality (if applicable).
Modes & Settings
Cursor mode: Cursor moves smoothly and accurately.
Scroll mode: Page scrolls as expected.
Sensitivity: Verified changes in cursor speed/sensitivity settings.
Copy and Paste: Verified both Copy and Paste functionality.
Invert Scrolling: Verified scroll direction toggles correctly.
Advanced Input
Key combinations: Verified "hold" behavior for modifiers (e.g., Ctrl+C) and held keys are shown in buffer.
Keyboard input: Verified Space, Backspace, and Enter keys work correctly.
Glide typing: Verified path drawing and text output.
Voice input: Verified speech-to-text functionality for full sentences.
Backspace doesn't send the previous input.
Any other gesture or input behavior introduced:
Additional Notes:
Checklist
My PR addresses a single issue, fixes a single bug or makes a single improvement.
My code follows the project's code style and conventions
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
If applicable, I have made corresponding changes or additions to the documentation
If applicable, I have made corresponding changes or additions to tests
My changes generate no new warnings or errors
I have joined the and I will share a link to this PR with the project maintainers there
I have read the
Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
Incase of UI change I've added a demo video.
Summary by CodeRabbit
Release Notes
New Features
Refactor