Add Real-Time Presence Indicators to a Chat App with WebSockets

PROJECT CONTEXT:
The project is an existing chat application that already supports user accounts, conversations, and message sending. The goal is to add real-time presence indicators so users can see whether other users are online, recently active, or currently typing in a conversation.

GOAL:
Implement real working presence indicators in the chat app using WebSockets, with backend-tracked online state, frontend subscription and rendering, typing indicators, disconnect handling, and testable real-time behavior across multiple clients.

REQUIREMENTS:
- Use WebSockets for real-time presence updates instead of polling
- Track whether a user is online based on active socket connections
- Broadcast presence changes to relevant chat participants
- Show online or offline state in the chat UI
- Optionally show last seen or recently active timestamp when offline
- Support typing indicators per conversation in real time
- Handle multiple tabs or multiple devices for the same user correctly
- Do not mark a user offline if they still have another active connection
- Handle reconnects and stale disconnects safely
- Initialize presence state correctly when the chat view loads

CONSTRAINTS:
- Must integrate into the existing chat app rather than replacing it
- Presence must reflect real backend connection state, not fake UI-only toggles
- Typing indicators must expire or clear correctly when typing stops or disconnect happens
- Do not break existing messaging flows while adding WebSocket presence

DEFINITION OF DONE:
- When User A opens the app, User B sees User A become online without refreshing
- When User A closes their last active tab or disconnects, User B sees User A become offline or last seen
- If User A opens two tabs, closing one tab does not mark them offline
- Typing indicators appear only inside the relevant conversation and disappear when typing stops or the user disconnects
- Presence state loads correctly on initial page load before or immediately after socket connection is established
- Reconnect after temporary network loss restores socket connection and correct presence state
- Backend logs or debug output confirm presence events are driven by real socket connect and disconnect activity

COMMON FAILURES TO AVOID:
- AI adds a green dot UI but never connects it to real WebSocket events
- AI marks users offline on any disconnect without checking for other active connections
- AI implements typing indicators that never clear or clear globally across all chats
- AI only updates local client state and does not broadcast to other participants
- AI uses polling or fake timers instead of actual socket presence tracking