[UI] Agent Presence HUD — live who-is-online panel with connection status #53

New Issue

perplexity · 2026-03-19T01:05:06-04:00

perplexity commented

2026-03-19 01:05:06 -04:00

Problem

The Matrix currently shows agents as 3D objects but there's no clear HUD showing who is actually connected via WebSocket vs. just defined in agent-defs.js. During the interview (and any future multi-agent session), operators need to see at a glance: who's online, who's idle, who's talking.

Proposed Solution

Add a minimal HUD panel (top-right or left sidebar) that shows:

Each agent's name + colored dot (green = WS connected, grey = offline, yellow = registered but idle)
Last message timestamp
Current state (idle / active / speaking)
Pulse animation when an agent sends a message

Why This Matters

Interview prep: When Perplexity bot and Timmy connect, you need to see both are online before starting
Debugging: Know immediately if a WS drop happened
Future: Round-table sessions need a participant list

Implementation Notes

Hook into the existing agent_register and agent_message events in websocket.js
Track connection state per agent ID
CSS-only animations for the pulse (no additional JS overhead in the render loop)

Acceptance Criteria

HUD shows all defined agents with online/offline status
Status updates in real-time when agents register/disconnect
Speaking indicator when agent_message received
Works on iPad PWA (responsive)

## Problem The Matrix currently shows agents as 3D objects but there's no clear HUD showing who is actually connected via WebSocket vs. just defined in agent-defs.js. During the interview (and any future multi-agent session), operators need to see at a glance: who's online, who's idle, who's talking. ## Proposed Solution Add a minimal HUD panel (top-right or left sidebar) that shows: - Each agent's name + colored dot (green = WS connected, grey = offline, yellow = registered but idle) - Last message timestamp - Current state (idle / active / speaking) - Pulse animation when an agent sends a message ## Why This Matters - **Interview prep**: When Perplexity bot and Timmy connect, you need to see both are online before starting - **Debugging**: Know immediately if a WS drop happened - **Future**: Round-table sessions need a participant list ## Implementation Notes - Hook into the existing `agent_register` and `agent_message` events in websocket.js - Track connection state per agent ID - CSS-only animations for the pulse (no additional JS overhead in the render loop) ## Acceptance Criteria - [ ] HUD shows all defined agents with online/offline status - [ ] Status updates in real-time when agents register/disconnect - [ ] Speaking indicator when agent_message received - [ ] Works on iPad PWA (responsive)

perplexity referenced this issue from a commit

2026-03-19 02:54:35 -04:00

feat: Smoke test, Presence HUD, Rain optimization (#55, #53, #34)

perplexity referenced this issue

2026-03-19 02:54:52 -04:00

feat: Smoke test, Presence HUD, Rain optimization (#55, #53, #34) #59

perplexity commented

2026-03-19 02:55:08 -04:00

Implemented in PR #59.

js/presence.js — live who-is-online panel with colored pulse dots, IDLE/ACTIVE state, uptime counters, LOCAL/LIVE/OFFLINE mode. Positioned above PiP camera. Exports setAgentOnline()/setAgentOffline() for WS events.

Implemented in PR #59. `js/presence.js` — live who-is-online panel with colored pulse dots, IDLE/ACTIVE state, uptime counters, LOCAL/LIVE/OFFLINE mode. Positioned above PiP camera. Exports `setAgentOnline()`/`setAgentOffline()` for WS events.

perplexity closed this issue

2026-03-19 02:55:09 -04:00

perplexity referenced this issue from a commit

2026-03-19 02:58:26 -04:00

feat: Smoke test, Presence HUD, Rain optimization (#55, #53, #34)

perplexity referenced this issue from a commit

2026-03-19 02:58:37 -04:00

Merge pull request 'feat: Smoke test, Presence HUD, Rain optimization (#55, #53, #34)' (#59) from feat/smoke-test-presence-rain into main

Sign in to join this conversation.