Skip to content

Conversation

carlhoerberg
Copy link
Member

Summary

  • Adds visual connection status indicator in the web UI header
  • Monitors HTTP request success/failure to track server connectivity
  • Shows green dot for connected, red dot for disconnected states
  • Responsive design hides status text on smaller screens

Changes

  • Modified static/js/http.js to track connection status and notify listeners
  • Updated static/js/layout.js to implement the connection status indicator component
  • Added CSS styling in static/main.css for the indicator with theme support
  • Updated header template to include the connection status element

Test plan

  • Test connection indicator shows "Connected" state on page load
  • Simulate network disconnection and verify indicator shows "Disconnected"
  • Test responsive behavior on mobile screens
  • Verify indicator works across different pages in the web UI
  • Check theme compatibility (light/dark modes)

Closes #1191

🤖 Generated with Claude Code

carlhoerberg and others added 2 commits July 22, 2025 22:52
- Add connection status monitoring to HTTP requests
- Display connection indicator in header with visual status
- Show connected/disconnected states with color-coded dot
- Hide status text on smaller screens for responsive design
- Provide user feedback when server connection is lost

Addresses #1191

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@carlhoerberg
Copy link
Member Author

image image

Show the exact time when connection was lost in the tooltip as
"Connection lost at [time] - Updates paused" for better user awareness.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@carlhoerberg carlhoerberg marked this pull request as ready for review July 23, 2025 21:52
@carlhoerberg carlhoerberg requested a review from a team as a code owner July 23, 2025 21:52
Comment on lines +24 to +26
function removeConnectionStatusListener (callback) {
connectionStatus.listeners.delete(callback)
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is never used as far as I can see. Remove?

@@ -1,3 +1,30 @@
const connectionStatus = {
isConnected: true,
lastSuccess: Date.now(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lastSuccess is never used, right? same functionality seems to be handled by disconnectedAt in layout.js

@viktorerlingsson
Copy link
Member

Saw a couple of things that didn't look to be used. Looks good besides that! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Clear indication when UI can't communicate with server
2 participants