# Polish: WebSocket & Real-Time

## 1. Connection Status Indicator
Add to App.vue header: green dot (connected), amber pulse (reconnecting), red (disconnected).
Connect to actual WebSocket state from websocket.ts.

## 2. Reconnection UX
After max reconnect attempts, show persistent banner "Connection lost. Click to retry."
Add `forceReconnect()` method that resets attempt counter.

## 3. Heartbeat
Active ping every 30s with 5s pong timeout (replace passive 60s stale detection).
Backend must respond to `ping` with `pong` — check handler.rs.

## 4. Session Timeout
In rpc-client.ts base `call()`: on 401/403 response, redirect to `/login`.

## 5. Race Condition Fix
Use listener deduplication (Set) or remove-all-then-resubscribe on reconnect.

## 6. Message Queuing
Queue subscription requests while disconnected, replay on reconnect.

## Verify
Kill backend → shows "Disconnected" → restart → auto-reconnects. Toggle wifi → status updates. Session timeout → redirects to login.