fix(web): add connection status banner to thread view #1270#1369
fix(web): add connection status banner to thread view #1270#1369JaskiratAnand wants to merge 3 commits intopingdotgg:mainfrom
Conversation
- Implement ConnectionStatusBanner component to show offline/disconnected states - Update WsTransport to track and emit transport state changes - Expose onTransportStateChange in native API for UI consumption - Integrate banner into ChatView top header section - Add unit tests for ConnectionStatusBanner logic - Fix vitest alias configuration for web app packages
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
github-actions
bot
added
size:L
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| window.removeEventListener("offline", handleOffline); | ||
| unsub(); | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
Online state not re-synced inside useEffect
Low Severity
The transport state is properly synchronized inside the useEffect because onTransportStateChange immediately invokes the listener with the current state (line 27–29). However, isOnline is only read once in the useState initializer (line 13–14) and is never re-synced inside the effect. If an offline event fires between the initial render and the effect setup, the event is missed and isOnline remains stale — the banner stays hidden until the next online/offline event. Adding a setIsOnline(navigator.onLine) call inside the effect after registering the event listeners would close this gap, consistent with how transport state is already handled.
1 participant
FIX: #1270
What Changed
Adds a
ConnectionStatusBannercomponent that surfaces offline and disconnected states to the user in the chat interface.ConnectionStatusBanner— new component rendered in theChatViewtop header to display offline/disconnected statesWsTransport— now tracks and emits transport state changes internallyonTransportStateChangeso the UI layer can react to connection changesConnectionStatusBannerlogicWhy
Users had no visibility into connection issues during a chat session — the app would silently fail or behave unexpectedly when the WebSocket dropped or the device went offline. This PR wires up transport state through to the UI so users get clear, timely feedback about their connection status, reducing confusion and support load.
The banner approach keeps the signal non-blocking and contextually placed (top of chat), which is a common, well-understood pattern for connectivity feedback.
UI Changes
Screenshot:
Video:
https://github.com/user-attachments/assets/78df905c-fd43-4831-834d-909eb4944f28
Checklist
Note
Medium Risk
Touches the core WebSocket transport state machine and adds new state-listener callbacks, which could affect reconnect/dispose behavior if notifications are incorrect. UI changes are straightforward but depend on accurate transport state transitions.
Overview
Adds a new
ConnectionStatusBannertoChatViewto warn users when the browser is offline or when the WebSocket transport isclosed/reconnecting.Plumbs transport connectivity to the UI by exporting
TransportState, addingWsTransport.onStateChange()+ centralizedsetState()notifications, and exposingonTransportStateChange()fromwsNativeApi(forcing instance creation if needed). Includes unit tests covering banner render behavior across online/offline and transport states.Written by Cursor Bugbot for commit 3aa07e1. This will update automatically on new commits. Configure here.
Note
Add connection status banner to thread view for offline and WebSocket disconnect states
ConnectionStatusBanner, a memoized React component that shows a warning alert when the browser is offline or the WebSocket transport is closed/reconnecting.onTransportStateChangefunction added towsNativeApi.ts.WsTransportwith a listener set andonStateChangemethod; all state transitions now go through a singlesetStatenotifier that invokes registered listeners.ChatViewabove the existingProviderHealthBanner.WsTransportnow calls registered listeners on every state transition, including immediately upon subscription with the current state.Macroscope summarized 3aa07e1.