Unread indicator dot for sessions with new messages

[sagarsrc]

Summary

Show an unread indicator dot on sessions in the sidebar when new messages arrive, similar to chat app notification badges.

Problem

When monitoring multiple sessions, there's no visual indication that a session has new activity. Users have to manually check each session to see if anything new happened.

Proposed Solution

Add a small colored dot indicator next to session names in the sidebar when new messages are detected.

Implementation

Frontend:

• Track "last viewed" timestamp per session (localStorage or state)
• Compare with session's latest message timestamp
• Show dot indicator when session has messages newer than last viewed
• Clear dot when user clicks/views the session
• Dot styling: small colored circle (e.g., blue or accent color)

Backend:

• Include latest_message_timestamp in session list response (may already exist)

UX:

• Dot appears on sidebar session item
• Optional: show count of unread messages instead of just dot
• Dot clears immediately when session is selected
• Persist "last viewed" across page refreshes

Visual Example

Sessions
├── quickcall-supertrace  ●  <- new messages
├── my-project
└── another-session       ●  <- new messages

Benefits

• Quick visibility into which sessions have new activity
• Better multi-session monitoring workflow
• Familiar UX pattern from chat/messaging apps

[sagarsrc]

✅ Implemented unread indicator dot for sessions

Changes:

• Added unreadSessionIds state tracked in localStorage (persists across refreshes)
• Show pulsing blue dot (●) next to sessions with unread messages
• Bold text styling for unread session names
• Mark sessions as unread when WebSocket session_updated event reports new messages
• Clear unread status automatically when user selects the session
• Dot only appears when session is not currently selected

Implementation Details:

• App.tsx: Added unread state management with useLocalStorage hook
• SessionList.tsx: Added unreadSessionIds prop and dot indicator UI
• Uses existing WebSocket infrastructure - no backend changes needed

Visual:

Sessions
├── quickcall-supertrace  ● (pulsing dot + bold)
├── my-project
└── another-session       ● (pulsing dot + bold)

Commit: 0cf0e65
Branch: feature/issues-90-85-combined

[sagarsrc]

🔧 Fixed unread indicator visibility issue

Root Cause: The backend was using broadcast_to_session() for session_updated events, which only sent updates to clients subscribed to that specific session. Users wouldn't see updates for sessions they weren't currently viewing.

Fix:

• Changed backend to use broadcast_to_all() for session_updated events
• All connected clients now receive updates for ALL sessions
• Frontend can properly track which sessions have unread messages

Also:

• Removed pulse animation from unread dot (per feedback)
• Changed dot color to teal-500 for better visibility

Commit: cc59d6f

[sagarsrc]

✅ Implementation Complete

Overview

Implemented unread indicator dots for sessions with new messages, providing visual feedback when sessions have activity while viewing another session.

Features

• Teal dot indicator appears in the top-right corner of session items with unread messages
• Bold text for unread session names
• "New messages" button appears when clicking on an unread session (if scrolled up)
• Persisted state - unread status survives page refreshes (localStorage)
• Auto-clear - dot disappears when session is selected

Commits

Commit	Description
0cf0e65	Initial implementation - unread state tracking, dot indicator, localStorage persistence
cc59d6f	Backend fix - broadcast session_updated to ALL clients (was only sending to subscribed clients)
b587d5e	Move dot to top-right corner
64b8f85	Show "New messages" button when clicking unread session
0043b79	Adjust dot position for better alignment
5a51f68	Fix useEffect race condition using ref

Files Changed

Frontend:

• packages/web/src/App.tsx - Unread state management, WebSocket handling, session selection logic
• packages/web/src/components/SessionList.tsx - Dot indicator UI

Backend:

• packages/server/src/quickcall_supertrace/ingest/poller.py - Changed broadcast_to_session() → broadcast_to_all() for session_updated events

How It Works

1. WebSocket broadcasts session_updated to ALL connected clients
2. Frontend marks session as unread if it's not the currently selected session
3. Unread session IDs stored in localStorage (supertrace-unread-sessions)
4. When user clicks unread session, dot clears and "New messages" button shows
5. Uses ref pattern to preserve unread state across React's useEffect lifecycle

Visual

Sessions
├── quickcall-supertrace     ● (teal dot, bold text)
├── my-project
└── another-session          ● (teal dot, bold text)

Branch: feature/issues-90-85-combined