fix(ui): compact user panel with status icon and room indicator

public/app.js

@@ -34,7 +34,8 @@ window.__dbg = S; // POC debug handle
 const $ = (sel) => document.querySelector(sel);
 const els = {
   stage: $('#stage'), screens: $('#screens'),
-  spatial: $('#spatial'), status: $('#voice-status'), nick: $('#nick'),
+  spatial: $('#spatial'), status: $('#voice-status'), statusDot: $('#status-dot'),
+  statusRow: $('#status-row'), nick: $('#nick'),
   meAvatar: $('#me-avatar'), mic: $('#btn-mic'), deafen: $('#btn-deafen'),
 };
 
@@ -75,7 +76,7 @@ async function joinVoice(room) {
   if (S.room === room || S.connecting) return;
   if (S.room) leaveVoice('switching channel');
   S.connecting = true;
-  setStatus(`connecting to ${room}…`);
+  setStatus(`connecting to ${room}…`, 'connecting');
 
   try {
     S.iceServers = await fetchIce();
@@ -135,7 +136,22 @@ function leaveVoice(reason) {
   setStatus(reason || 'not connected');
 }
 
-function setStatus(text) { els.status.textContent = text; }
+function setStatus(text, state = '') {
+  if (els.status) {
+    // Concise display text
+    let shortText = text;
+    if (text.startsWith('voice connected')) {
+      shortText = S.room ? `#${S.room}` : 'Connected';
+    } else if (text.startsWith('connecting to')) {
+      shortText = 'Connecting…';
+    }
+    els.status.textContent = shortText;
+  }
+  if (els.statusRow) els.statusRow.title = text;
+  if (els.statusDot) {
+    els.statusDot.className = 'status-indicator' + (state ? ` ${state}` : '');
+  }
+}
 
 // ---------------------------------------------------------------------------
 // signaling
@@ -146,7 +162,7 @@ function openSignaling(room) {
     const url = `${proto}://${location.host}/ws?room=${encodeURIComponent(room)}&name=${encodeURIComponent(S.name)}`;
     const ws = new WebSocket(url);
     S.ws = ws;
-    ws.onerror = () => { S.connecting = false; setStatus('connection failed'); reject(new Error('websocket failed')); };
+    ws.onerror = () => { S.connecting = false; setStatus('connection failed', 'error'); reject(new Error('websocket failed')); };
     ws.onmessage = (ev) => {
       let msg;
       try { msg = JSON.parse(ev.data); } catch { return; }
@@ -185,7 +201,7 @@ function handleSignal(msg) {
       }
       sendMyPos(true);
       renderAll();
-      setStatus(`voice connected — ${msg.peers.length + 1} in ${msg.room}`);
+      setStatus(`voice connected — ${msg.peers.length + 1} in ${msg.room}`, 'online');
       toast(`Joined ${msg.room}`, 'ok');
       break;
     }