feat: desktop GUI enhancements — audio level, call timer, VPIO, settings

- Audio level meter with log-scale RMS visualization
- Call duration timer
- VPIO (OS AEC) wired through to engine with fallback to CPAL
- "You" badge on own participant entry
- Recent rooms list (click to reuse)
- Enter key to connect from form fields
- Improved dark theme with pulse animation on status dot
- Settings persistence via localStorage (relay, room, alias, AEC, recent rooms)
- Fingerprint display on connect screen
- Keyboard shortcuts skip input fields

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

desktop/index.html

@@ -11,6 +11,7 @@
       <!-- Connect screen -->
       <div id="connect-screen">
         <h1>WarzonePhone</h1>
+        <p class="subtitle">Encrypted Voice</p>
         <div class="form">
           <label>Relay
             <input id="relay" type="text" value="193.180.213.68:4433" />
@@ -21,36 +22,47 @@
           <label>Alias
             <input id="alias" type="text" placeholder="your name" />
           </label>
+          <div class="form-row">
             <label class="checkbox">
               <input id="os-aec" type="checkbox" checked />
-            OS Echo Cancellation
+              OS Echo Cancel
             </label>
+          </div>
           <button id="connect-btn" class="primary">Connect</button>
           <p id="connect-error" class="error"></p>
         </div>
+        <div class="identity-info">
+          <span id="my-fingerprint" class="fp-display"></span>
+        </div>
+        <div class="recent-rooms" id="recent-rooms"></div>
       </div>
 
       <!-- In-call screen -->
       <div id="call-screen" class="hidden">
         <div class="call-header">
           <div id="room-name" class="room-name"></div>
-          <div id="call-status" class="status">Connected</div>
+          <div class="call-meta">
+            <span id="call-status" class="status-dot"></span>
+            <span id="call-timer" class="call-timer">0:00</span>
+          </div>
+        </div>
+
+        <!-- Audio level meter -->
+        <div class="level-meter">
+          <div id="level-bar" class="level-bar-fill"></div>
         </div>
 
         <div id="participants" class="participants"></div>
 
         <div class="controls">
           <button id="mic-btn" class="control-btn" title="Toggle Mic (m)">
-            <span class="icon">🎙</span>
+            <span class="icon" id="mic-icon">Mic</span>
-            <span class="label">Mic</span>
-          </button>
-          <button id="spk-btn" class="control-btn" title="Toggle Speaker (s)">
-            <span class="icon">🔊</span>
-            <span class="label">Speaker</span>
           </button>
           <button id="hangup-btn" class="control-btn hangup" title="Hang Up (q)">
-            <span class="icon">📞</span>
+            <span class="icon">End</span>
-            <span class="label">End</span>
+          </button>
+          <button id="spk-btn" class="control-btn" title="Toggle Speaker (s)">
+            <span class="icon" id="spk-icon">Spk</span>
           </button>
         </div>
 

desktop/src-tauri/Cargo.toml

@@ -25,7 +25,7 @@ wzp-codec = { path = "../../crates/wzp-codec" }
 wzp-fec = { path = "../../crates/wzp-fec" }
 wzp-crypto = { path = "../../crates/wzp-crypto" }
 wzp-transport = { path = "../../crates/wzp-transport" }
-wzp-client = { path = "../../crates/wzp-client", features = ["audio"] }
+wzp-client = { path = "../../crates/wzp-client", features = ["audio", "vpio"] }
 
 # Platform-specific
 [target.'cfg(target_os = "macos")'.dependencies]

desktop/src-tauri/src/engine.rs

@@ -2,8 +2,9 @@
 //! into a clean async interface for Tauri commands.
 
 use std::net::SocketAddr;
-use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::atomic::{AtomicBool, AtomicU32, AtomicU64, Ordering};
 use std::sync::Arc;
+use std::time::Instant;
 
 use tokio::sync::Mutex;
 use tracing::{error, info};
@@ -25,6 +26,9 @@ pub struct EngineStatus {
     pub participants: Vec<ParticipantInfo>,
     pub frames_sent: u64,
     pub frames_received: u64,
+    pub audio_level: u32,
+    pub call_duration_secs: f64,
+    pub fingerprint: String,
 }
 
 pub struct CallEngine {
@@ -32,9 +36,12 @@ pub struct CallEngine {
     mic_muted: Arc<AtomicBool>,
     spk_muted: Arc<AtomicBool>,
     participants: Arc<Mutex<Vec<ParticipantInfo>>>,
-    frames_sent: Arc<std::sync::atomic::AtomicU64>,
+    frames_sent: Arc<AtomicU64>,
-    frames_received: Arc<std::sync::atomic::AtomicU64>,
+    frames_received: Arc<AtomicU64>,
+    audio_level: Arc<AtomicU32>,
     transport: Arc<wzp_transport::QuinnTransport>,
+    start_time: Instant,
+    fingerprint: String,
 }
 
 impl CallEngine {
@@ -80,6 +87,7 @@ impl CallEngine {
         };
 
         let fp = seed.derive_identity().public_identity().fingerprint;
+        let fingerprint = fp.to_string();
         info!(%fp, "identity loaded");
 
         // Connect
@@ -100,27 +108,69 @@ impl CallEngine {
         info!("connected to relay, handshake complete");
         event_cb("connected", &format!("joined room {room}"));
 
-        // Audio I/O
+        // Audio I/O — VPIO (OS AEC) on macOS, plain CPAL otherwise
-        // TODO: support VPIO on macOS when os_aec is true
+        #[cfg(target_os = "macos")]
+        let _vpio_handle;
+        let (capture_ring, playout_ring) = if _os_aec {
+            #[cfg(target_os = "macos")]
+            {
+                // Try VPIO; fall back to CPAL if it fails
+                match wzp_client::audio_vpio::VpioAudio::start() {
+                    Ok(v) => {
+                        let cr = v.capture_ring().clone();
+                        let pr = v.playout_ring().clone();
+                        _vpio_handle = Some(v);
+                        info!("using VoiceProcessingIO (OS AEC)");
+                        (cr, pr)
+                    }
+                    Err(e) => {
+                        info!("VPIO failed ({e}), falling back to CPAL");
+                        _vpio_handle = None;
                         let capture = AudioCapture::start()?;
                         let playback = AudioPlayback::start()?;
-        let capture_ring = capture.ring().clone();
+                        let cr = capture.ring().clone();
-        let playout_ring = playback.ring().clone();
+                        let pr = playback.ring().clone();
                         std::mem::forget(capture);
                         std::mem::forget(playback);
+                        (cr, pr)
+                    }
+                }
+            }
+            #[cfg(not(target_os = "macos"))]
+            {
+                info!("OS AEC not available on this platform, using CPAL");
+                let capture = AudioCapture::start()?;
+                let playback = AudioPlayback::start()?;
+                let cr = capture.ring().clone();
+                let pr = playback.ring().clone();
+                std::mem::forget(capture);
+                std::mem::forget(playback);
+                (cr, pr)
+            }
+        } else {
+            let capture = AudioCapture::start()?;
+            let playback = AudioPlayback::start()?;
+            let cr = capture.ring().clone();
+            let pr = playback.ring().clone();
+            std::mem::forget(capture);
+            std::mem::forget(playback);
+            (cr, pr)
+        };
 
         let running = Arc::new(AtomicBool::new(true));
         let mic_muted = Arc::new(AtomicBool::new(false));
         let spk_muted = Arc::new(AtomicBool::new(false));
         let participants: Arc<Mutex<Vec<ParticipantInfo>>> = Arc::new(Mutex::new(vec![]));
-        let frames_sent = Arc::new(std::sync::atomic::AtomicU64::new(0));
+        let frames_sent = Arc::new(AtomicU64::new(0));
-        let frames_received = Arc::new(std::sync::atomic::AtomicU64::new(0));
+        let frames_received = Arc::new(AtomicU64::new(0));
+        let audio_level = Arc::new(AtomicU32::new(0));
 
         // Send task
         let send_t = transport.clone();
         let send_r = running.clone();
         let send_mic = mic_muted.clone();
         let send_fs = frames_sent.clone();
+        let send_level = audio_level.clone();
         tokio::spawn(async move {
             let config = CallConfig {
                 noise_suppression: false,
@@ -140,6 +190,14 @@ impl CallEngine {
                     continue;
                 }
                 capture_ring.read(&mut buf);
+
+                // Compute RMS audio level for UI meter
+                if !buf.is_empty() {
+                    let sum_sq: f64 = buf.iter().map(|&s| (s as f64) * (s as f64)).sum();
+                    let rms = (sum_sq / buf.len() as f64).sqrt() as u32;
+                    send_level.store(rms, Ordering::Relaxed);
+                }
+
                 if send_mic.load(Ordering::Relaxed) {
                     buf.fill(0);
                 }
@@ -248,7 +306,10 @@ impl CallEngine {
             participants,
             frames_sent,
             frames_received,
+            audio_level,
             transport,
+            start_time: Instant::now(),
+            fingerprint,
         })
     }
 
@@ -278,6 +339,9 @@ impl CallEngine {
                 .collect(),
             frames_sent: self.frames_sent.load(Ordering::Relaxed),
             frames_received: self.frames_received.load(Ordering::Relaxed),
+            audio_level: self.audio_level.load(Ordering::Relaxed),
+            call_duration_secs: self.start_time.elapsed().as_secs_f64(),
+            fingerprint: self.fingerprint.clone(),
         }
     }
 

desktop/src-tauri/src/main.rs

@@ -28,6 +28,9 @@ struct CallStatus {
     participants: Vec<Participant>,
     encode_fps: u64,
     recv_fps: u64,
+    audio_level: u32,
+    call_duration_secs: f64,
+    fingerprint: String,
 }
 
 struct AppState {
@@ -120,6 +123,9 @@ async fn get_status(state: tauri::State<'_, Arc<AppState>>) -> Result<CallStatus
                 .collect(),
             encode_fps: status.frames_sent,
             recv_fps: status.frames_received,
+            audio_level: status.audio_level,
+            call_duration_secs: status.call_duration_secs,
+            fingerprint: status.fingerprint,
         })
     } else {
         Ok(CallStatus {
@@ -129,6 +135,9 @@ async fn get_status(state: tauri::State<'_, Arc<AppState>>) -> Result<CallStatus
             participants: vec![],
             encode_fps: 0,
             recv_fps: 0,
+            audio_level: 0,
+            call_duration_secs: 0.0,
+            fingerprint: String::new(),
         })
     }
 }

desktop/src/main.ts

@@ -1,7 +1,7 @@
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 
-// Elements
+// ── Elements ──
 const connectScreen = document.getElementById("connect-screen")!;
 const callScreen = document.getElementById("call-screen")!;
 const relayInput = document.getElementById("relay") as HTMLInputElement;
@@ -11,40 +11,97 @@ const osAecCheckbox = document.getElementById("os-aec") as HTMLInputElement;
 const connectBtn = document.getElementById("connect-btn") as HTMLButtonElement;
 const connectError = document.getElementById("connect-error")!;
 const roomName = document.getElementById("room-name")!;
+const callTimer = document.getElementById("call-timer")!;
+const levelBar = document.getElementById("level-bar")!;
 const participantsDiv = document.getElementById("participants")!;
 const micBtn = document.getElementById("mic-btn")!;
+const micIcon = document.getElementById("mic-icon")!;
 const spkBtn = document.getElementById("spk-btn")!;
+const spkIcon = document.getElementById("spk-icon")!;
 const hangupBtn = document.getElementById("hangup-btn")!;
 const statsDiv = document.getElementById("stats")!;
+const myFingerprintEl = document.getElementById("my-fingerprint")!;
+const recentRoomsDiv = document.getElementById("recent-rooms")!;
 
 let statusInterval: number | null = null;
+let myFingerprint = "";
 
-// Load saved settings
+// ── Settings persistence ──
-const saved = localStorage.getItem("wzp-settings");
+interface Settings {
-if (saved) {
+  relay: string;
+  room: string;
+  alias: string;
+  osAec: boolean;
+  recentRooms: string[];
+}
+
+function loadSettings(): Settings {
+  const defaults: Settings = {
+    relay: "193.180.213.68:4433",
+    room: "android",
+    alias: "",
+    osAec: true,
+    recentRooms: [],
+  };
   try {
-    const s = JSON.parse(saved);
+    const raw = localStorage.getItem("wzp-settings");
-    if (s.relay) relayInput.value = s.relay;
+    if (raw) return { ...defaults, ...JSON.parse(raw) };
-    if (s.room) roomInput.value = s.room;
-    if (s.alias) aliasInput.value = s.alias;
-    if (s.osAec !== undefined) osAecCheckbox.checked = s.osAec;
   } catch {}
+  return defaults;
 }
 
 function saveSettings() {
-  localStorage.setItem(
+  const s = loadSettings();
-    "wzp-settings",
+  s.relay = relayInput.value;
-    JSON.stringify({
+  s.room = roomInput.value;
-      relay: relayInput.value,
+  s.alias = aliasInput.value;
-      room: roomInput.value,
+  s.osAec = osAecCheckbox.checked;
-      alias: aliasInput.value,
+  // Add room to recent list (dedup, max 5)
-      osAec: osAecCheckbox.checked,
+  const room = roomInput.value.trim();
-    })
+  if (room) {
+    s.recentRooms = [room, ...s.recentRooms.filter((r) => r !== room)].slice(
+      0,
+      5
     );
+  }
+  localStorage.setItem("wzp-settings", JSON.stringify(s));
 }
 
-// Connect
+function applySettings() {
-connectBtn.addEventListener("click", async () => {
+  const s = loadSettings();
+  relayInput.value = s.relay;
+  roomInput.value = s.room;
+  aliasInput.value = s.alias;
+  osAecCheckbox.checked = s.osAec;
+  renderRecentRooms(s.recentRooms);
+}
+
+function renderRecentRooms(rooms: string[]) {
+  recentRoomsDiv.innerHTML = rooms
+    .map(
+      (r) =>
+        `<span class="recent-room" data-room="${escapeHtml(r)}">${escapeHtml(r)}</span>`
+    )
+    .join("");
+  recentRoomsDiv.querySelectorAll(".recent-room").forEach((el) => {
+    el.addEventListener("click", () => {
+      roomInput.value = (el as HTMLElement).dataset.room || "";
+    });
+  });
+}
+
+applySettings();
+
+// ── Connect ──
+connectBtn.addEventListener("click", doConnect);
+// Enter key to connect
+[relayInput, roomInput, aliasInput].forEach((el) =>
+  el.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") doConnect();
+  })
+);
+
+async function doConnect() {
   connectError.textContent = "";
   connectBtn.disabled = true;
   connectBtn.textContent = "Connecting...";
@@ -63,15 +120,13 @@ connectBtn.addEventListener("click", async () => {
     connectBtn.disabled = false;
     connectBtn.textContent = "Connect";
   }
-});
+}
 
 function showCallScreen() {
   connectScreen.classList.add("hidden");
   callScreen.classList.remove("hidden");
   roomName.textContent = roomInput.value;
-
+  statusInterval = window.setInterval(pollStatus, 250);
-  // Poll status
-  statusInterval = window.setInterval(pollStatus, 500);
 }
 
 function showConnectScreen() {
@@ -79,17 +134,19 @@ function showConnectScreen() {
   connectScreen.classList.remove("hidden");
   connectBtn.disabled = false;
   connectBtn.textContent = "Connect";
+  levelBar.style.width = "0%";
   if (statusInterval) {
     clearInterval(statusInterval);
     statusInterval = null;
   }
 }
 
-// Mute buttons
+// ── Mute buttons ──
 micBtn.addEventListener("click", async () => {
   try {
     const muted: boolean = await invoke("toggle_mic");
     micBtn.classList.toggle("muted", muted);
+    micIcon.textContent = muted ? "Mic Off" : "Mic";
   } catch {}
 });
 
@@ -97,10 +154,10 @@ spkBtn.addEventListener("click", async () => {
   try {
     const muted: boolean = await invoke("toggle_speaker");
     spkBtn.classList.toggle("muted", muted);
+    spkIcon.textContent = muted ? "Spk Off" : "Spk";
   } catch {}
 });
 
-// Hangup
 hangupBtn.addEventListener("click", async () => {
   try {
     await invoke("disconnect");
@@ -108,15 +165,16 @@ hangupBtn.addEventListener("click", async () => {
   showConnectScreen();
 });
 
-// Keyboard shortcuts
+// Keyboard shortcuts (only when in call, and not typing in an input)
 document.addEventListener("keydown", (e) => {
   if (callScreen.classList.contains("hidden")) return;
+  if ((e.target as HTMLElement).tagName === "INPUT") return;
   if (e.key === "m") micBtn.click();
   if (e.key === "s") spkBtn.click();
   if (e.key === "q") hangupBtn.click();
 });
 
-// Status polling
+// ── Status polling ──
 interface CallStatus {
   active: boolean;
   mic_muted: boolean;
@@ -124,41 +182,69 @@ interface CallStatus {
   participants: { fingerprint: string; alias: string | null }[];
   encode_fps: number;
   recv_fps: number;
+  audio_level: number;
+  call_duration_secs: number;
+  fingerprint: string;
+}
+
+function formatDuration(secs: number): string {
+  const m = Math.floor(secs / 60);
+  const s = Math.floor(secs % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
 async function pollStatus() {
   try {
-    const status: CallStatus = await invoke("get_status");
+    const st: CallStatus = await invoke("get_status");
-    if (!status.active) {
+    if (!st.active) {
       showConnectScreen();
       return;
     }
 
-    // Update mute state
+    myFingerprint = st.fingerprint;
-    micBtn.classList.toggle("muted", status.mic_muted);
+    myFingerprintEl.textContent = st.fingerprint
-    spkBtn.classList.toggle("muted", status.spk_muted);
+      ? `ID: ${st.fingerprint}`
+      : "";
 
-    // Update participants
+    // Mute state
-    participantsDiv.innerHTML = status.participants
+    micBtn.classList.toggle("muted", st.mic_muted);
+    micIcon.textContent = st.mic_muted ? "Mic Off" : "Mic";
+    spkBtn.classList.toggle("muted", st.spk_muted);
+    spkIcon.textContent = st.spk_muted ? "Spk Off" : "Spk";
+
+    // Timer
+    callTimer.textContent = formatDuration(st.call_duration_secs);
+
+    // Audio level (RMS 0–32767 → percentage, log scale)
+    const rms = st.audio_level;
+    const pct = rms > 0 ? Math.min(100, (Math.log(rms) / Math.log(32767)) * 100) : 0;
+    levelBar.style.width = `${pct}%`;
+
+    // Participants
+    if (st.participants.length === 0) {
+      participantsDiv.innerHTML =
+        '<div class="participants-empty">Waiting for participants...</div>';
+    } else {
+      participantsDiv.innerHTML = st.participants
         .map((p) => {
           const name = p.alias || "Anonymous";
           const initial = name.charAt(0).toUpperCase();
-        const fp = p.fingerprint
+          const fp = p.fingerprint ? p.fingerprint.substring(0, 16) : "";
-          ? p.fingerprint.substring(0, 8) + "..."
+          const isMe = p.fingerprint && myFingerprint.includes(p.fingerprint);
-          : "";
           return `
             <div class="participant">
-            <div class="avatar">${initial}</div>
+              <div class="avatar ${isMe ? "me" : ""}">${initial}</div>
               <div class="info">
-              <div class="name">${escapeHtml(name)}</div>
+                <div class="name">${escapeHtml(name)} ${isMe ? '<span class="you-badge">you</span>' : ""}</div>
                 <div class="fp">${escapeHtml(fp)}</div>
               </div>
             </div>`;
         })
         .join("");
+    }
 
     // Stats
-    statsDiv.textContent = `TX: ${status.encode_fps} frames | RX: ${status.recv_fps} frames`;
+    statsDiv.textContent = `TX: ${st.encode_fps} | RX: ${st.recv_fps}`;
   } catch {}
 }
 
@@ -168,10 +254,8 @@ function escapeHtml(s: string): string {
   return d.innerHTML;
 }
 
-// Listen for events from backend
+// ── Events from backend ──
 listen("call-event", (event: any) => {
-  const { kind, message } = event.payload;
+  const { kind } = event.payload;
-  if (kind === "room-update") {
+  if (kind === "room-update") pollStatus();
-    pollStatus();
-  }
 });

desktop/src/style.css

@@ -1,20 +1,18 @@
 :root {
-  --bg: #1a1a2e;
+  --bg: #0f0f1a;
-  --surface: #16213e;
+  --surface: #1a1a2e;
+  --surface2: #222244;
   --primary: #0f3460;
   --accent: #e94560;
   --text: #eee;
-  --text-dim: #888;
+  --text-dim: #777;
   --green: #4ade80;
   --red: #ef4444;
+  --yellow: #facc15;
   --radius: 12px;
 }
 
-* {
+* { margin: 0; padding: 0; box-sizing: border-box; }
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -32,30 +30,36 @@ body {
   padding: 20px;
 }
 
-.hidden {
+.hidden { display: none !important; }
-  display: none !important;
-}
 
-/* Connect screen */
+/* ── Connect screen ── */
 #connect-screen {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   flex: 1;
-  gap: 24px;
+  gap: 20px;
 }
 
 #connect-screen h1 {
-  font-size: 24px;
+  font-size: 26px;
-  font-weight: 600;
+  font-weight: 700;
   letter-spacing: 1px;
 }
 
+.subtitle {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-top: -12px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
+
 .form {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 12px;
   width: 100%;
   max-width: 320px;
 }
@@ -64,7 +68,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -85,17 +89,21 @@ body {
   border-color: var(--accent);
 }
 
+.form-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
 .checkbox {
   flex-direction: row !important;
   align-items: center;
   gap: 8px !important;
   cursor: pointer;
+  font-size: 13px !important;
 }
 
-.checkbox input {
+.checkbox input { width: 16px; height: 16px; }
-  width: 16px;
-  height: 16px;
-}
 
 button.primary {
   background: var(--accent);
@@ -107,55 +115,129 @@ button.primary {
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s;
-  margin-top: 8px;
+  margin-top: 4px;
 }
 
-button.primary:hover {
+button.primary:hover { opacity: 0.9; }
-  opacity: 0.9;
+button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
-}
-
-button.primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
 
 .error {
   color: var(--red);
   font-size: 13px;
-  min-height: 20px;
+  min-height: 18px;
 }
 
-/* Call screen */
+.identity-info {
+  text-align: center;
+}
+
+.fp-display {
+  font-family: monospace;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.recent-rooms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 320px;
+}
+
+.recent-room {
+  background: var(--surface);
+  border: 1px solid #333;
+  border-radius: 16px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.recent-room:hover {
+  border-color: var(--accent);
+  color: var(--text);
+}
+
+/* ── Call screen ── */
 #call-screen {
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 20px;
+  gap: 16px;
 }
 
 .call-header {
   text-align: center;
-  padding: 12px;
+  padding: 8px;
 }
 
 .room-name {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 600;
 }
 
-.status {
+.call-meta {
-  font-size: 13px;
+  display: flex;
-  color: var(--green);
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   margin-top: 4px;
 }
 
-/* Participants */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--green);
+  display: inline-block;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.call-timer {
+  font-size: 14px;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Audio level meter ── */
+.level-meter {
+  height: 4px;
+  background: var(--surface);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.level-bar-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--green) 0%, var(--yellow) 60%, var(--red) 100%);
+  border-radius: 2px;
+  transition: width 0.1s ease-out;
+}
+
+/* ── Participants ── */
 .participants {
   background: var(--surface);
   border-radius: var(--radius);
-  padding: 16px;
+  padding: 12px 16px;
   flex: 1;
   overflow-y: auto;
+  min-height: 80px;
+}
+
+.participants-empty {
+  color: var(--text-dim);
+  font-size: 13px;
+  text-align: center;
+  padding: 20px 0;
 }
 
 .participant {
@@ -163,12 +245,10 @@ button.primary:disabled {
   align-items: center;
   gap: 10px;
   padding: 8px 0;
-  border-bottom: 1px solid #ffffff10;
+  border-bottom: 1px solid #ffffff08;
 }
 
-.participant:last-child {
+.participant:last-child { border-bottom: none; }
-  border-bottom: none;
-}
 
 .participant .avatar {
   width: 36px;
@@ -180,79 +260,85 @@ button.primary:disabled {
   justify-content: center;
   font-size: 14px;
   font-weight: 600;
+  flex-shrink: 0;
 }
 
-.participant .info {
+.participant .avatar.me {
-  flex: 1;
+  background: var(--accent);
 }
 
+.participant .info { flex: 1; min-width: 0; }
+
 .participant .name {
   font-size: 14px;
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .participant .fp {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-dim);
   font-family: monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* Controls */
+.participant .you-badge {
+  font-size: 10px;
+  color: var(--accent);
+  background: #e9456020;
+  padding: 1px 6px;
+  border-radius: 8px;
+}
+
+/* ── Controls ── */
 .controls {
   display: flex;
   justify-content: center;
-  gap: 20px;
+  gap: 24px;
-  padding: 16px;
+  padding: 12px;
 }
 
 .control-btn {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
-  background: var(--surface);
+  background: var(--surface2);
+  color: var(--text);
   border: none;
   border-radius: 50%;
-  width: 64px;
+  width: 56px;
-  height: 64px;
+  height: 56px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.15s;
-  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
 }
 
-.control-btn .icon {
+.control-btn:hover { background: var(--primary); }
-  font-size: 24px;
-}
-
-.control-btn .label {
-  font-size: 10px;
-  color: var(--text-dim);
-}
-
-.control-btn:hover {
-  background: var(--primary);
-}
 
 .control-btn.muted {
   background: var(--red);
-}
-
-.control-btn.muted .label {
   color: white;
 }
 
 .control-btn.hangup {
   background: var(--red);
+  color: white;
+  width: 64px;
+  height: 64px;
+  font-size: 14px;
 }
 
-.control-btn.hangup:hover {
+.control-btn.hangup:hover { opacity: 0.85; }
-  opacity: 0.8;
-}
 
+/* ── Stats ── */
 .stats {
   text-align: center;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-dim);
   font-family: monospace;
-  padding: 8px;
+  padding: 4px;
 }