From f726f8cfa417670ba666deea1351eb1a23b12037 Mon Sep 17 00:00:00 2001
From: Siavash Sameni <manwe@MacBook-Air.local>
Date: Mon, 6 Apr 2026 11:40:07 +0400
Subject: [PATCH] =?UTF-8?q?feat:=20desktop=20GUI=20enhancements=20?=
 =?UTF-8?q?=E2=80=94=20audio=20level,=20call=20timer,=20VPIO,=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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              |  38 +++--
 desktop/src-tauri/Cargo.toml    |   2 +-
 desktop/src-tauri/src/engine.rs |  90 ++++++++++--
 desktop/src-tauri/src/main.rs   |   9 ++
 desktop/src/main.ts             | 198 ++++++++++++++++++--------
 desktop/src/style.css           | 240 ++++++++++++++++++++++----------
 6 files changed, 416 insertions(+), 161 deletions(-)

diff --git a/desktop/index.html b/desktop/index.html
index af7a4ed..a231c7b 100644
--- a/desktop/index.html
+++ b/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>
-          <label class="checkbox">
-            <input id="os-aec" type="checkbox" checked />
-            OS Echo Cancellation
-          </label>
+          <div class="form-row">
+            <label class="checkbox">
+              <input id="os-aec" type="checkbox" checked />
+              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="label">Mic</span>
-          </button>
-          <button id="spk-btn" class="control-btn" title="Toggle Speaker (s)">
-            <span class="icon">🔊</span>
-            <span class="label">Speaker</span>
+            <span class="icon" id="mic-icon">Mic</span>
           </button>
           <button id="hangup-btn" class="control-btn hangup" title="Hang Up (q)">
-            <span class="icon">📞</span>
-            <span class="label">End</span>
+            <span class="icon">End</span>
+          </button>
+          <button id="spk-btn" class="control-btn" title="Toggle Speaker (s)">
+            <span class="icon" id="spk-icon">Spk</span>
           </button>
         </div>
 
diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml
index 59f47ef..a8663e7 100644
--- a/desktop/src-tauri/Cargo.toml
+++ b/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]
diff --git a/desktop/src-tauri/src/engine.rs b/desktop/src-tauri/src/engine.rs
index c4b3ff3..5f25d93 100644
--- a/desktop/src-tauri/src/engine.rs
+++ b/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_received: Arc<std::sync::atomic::AtomicU64>,
+    frames_sent: Arc<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
-        // TODO: support VPIO on macOS when os_aec is true
-        let capture = AudioCapture::start()?;
-        let playback = AudioPlayback::start()?;
-        let capture_ring = capture.ring().clone();
-        let playout_ring = playback.ring().clone();
-        std::mem::forget(capture);
-        std::mem::forget(playback);
+        // Audio I/O — VPIO (OS AEC) on macOS, plain CPAL otherwise
+        #[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 cr = capture.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_received = Arc::new(std::sync::atomic::AtomicU64::new(0));
+        let frames_sent = Arc::new(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(),
         }
     }
 
diff --git a/desktop/src-tauri/src/main.rs b/desktop/src-tauri/src/main.rs
index 548a697..5c83082 100644
--- a/desktop/src-tauri/src/main.rs
+++ b/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(),
         })
     }
 }
diff --git a/desktop/src/main.ts b/desktop/src/main.ts
index dd5b2c7..1fb9fbe 100644
--- a/desktop/src/main.ts
+++ b/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
-const saved = localStorage.getItem("wzp-settings");
-if (saved) {
+// ── Settings persistence ──
+interface Settings {
+  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);
-    if (s.relay) relayInput.value = s.relay;
-    if (s.room) roomInput.value = s.room;
-    if (s.alias) aliasInput.value = s.alias;
-    if (s.osAec !== undefined) osAecCheckbox.checked = s.osAec;
+    const raw = localStorage.getItem("wzp-settings");
+    if (raw) return { ...defaults, ...JSON.parse(raw) };
   } catch {}
+  return defaults;
 }
 
 function saveSettings() {
-  localStorage.setItem(
-    "wzp-settings",
-    JSON.stringify({
-      relay: relayInput.value,
-      room: roomInput.value,
-      alias: aliasInput.value,
-      osAec: osAecCheckbox.checked,
-    })
-  );
+  const s = loadSettings();
+  s.relay = relayInput.value;
+  s.room = roomInput.value;
+  s.alias = aliasInput.value;
+  s.osAec = osAecCheckbox.checked;
+  // Add room to recent list (dedup, max 5)
+  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
-connectBtn.addEventListener("click", async () => {
+function applySettings() {
+  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;
-
-  // Poll status
-  statusInterval = window.setInterval(pollStatus, 500);
+  statusInterval = window.setInterval(pollStatus, 250);
 }
 
 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");
-    if (!status.active) {
+    const st: CallStatus = await invoke("get_status");
+    if (!st.active) {
       showConnectScreen();
       return;
     }
 
-    // Update mute state
-    micBtn.classList.toggle("muted", status.mic_muted);
-    spkBtn.classList.toggle("muted", status.spk_muted);
+    myFingerprint = st.fingerprint;
+    myFingerprintEl.textContent = st.fingerprint
+      ? `ID: ${st.fingerprint}`
+      : "";
 
-    // Update participants
-    participantsDiv.innerHTML = status.participants
-      .map((p) => {
-        const name = p.alias || "Anonymous";
-        const initial = name.charAt(0).toUpperCase();
-        const fp = p.fingerprint
-          ? p.fingerprint.substring(0, 8) + "..."
-          : "";
-        return `
-          <div class="participant">
-            <div class="avatar">${initial}</div>
-            <div class="info">
-              <div class="name">${escapeHtml(name)}</div>
-              <div class="fp">${escapeHtml(fp)}</div>
-            </div>
-          </div>`;
-      })
-      .join("");
+    // Mute state
+    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 ? p.fingerprint.substring(0, 16) : "";
+          const isMe = p.fingerprint && myFingerprint.includes(p.fingerprint);
+          return `
+            <div class="participant">
+              <div class="avatar ${isMe ? "me" : ""}">${initial}</div>
+              <div class="info">
+                <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;
-  if (kind === "room-update") {
-    pollStatus();
-  }
+  const { kind } = event.payload;
+  if (kind === "room-update") pollStatus();
 });
diff --git a/desktop/src/style.css b/desktop/src/style.css
index f1aed0c..f2d5a06 100644
--- a/desktop/src/style.css
+++ b/desktop/src/style.css
@@ -1,20 +1,18 @@
 :root {
-  --bg: #1a1a2e;
-  --surface: #16213e;
+  --bg: #0f0f1a;
+  --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 {
-  display: none !important;
-}
+.hidden { 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-weight: 600;
+  font-size: 26px;
+  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 {
-  width: 16px;
-  height: 16px;
-}
+.checkbox input { 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 {
-  opacity: 0.9;
-}
-
-button.primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+button.primary:hover { opacity: 0.9; }
+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 {
-  font-size: 13px;
-  color: var(--green);
+.call-meta {
+  display: flex;
+  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 {
-  border-bottom: none;
-}
+.participant:last-child { 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 {
-  flex: 1;
+.participant .avatar.me {
+  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;
-  padding: 16px;
+  gap: 24px;
+  padding: 12px;
 }
 
 .control-btn {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 6px;
-  background: var(--surface);
+  justify-content: center;
+  background: var(--surface2);
+  color: var(--text);
   border: none;
   border-radius: 50%;
-  width: 64px;
-  height: 64px;
+  width: 56px;
+  height: 56px;
   cursor: pointer;
-  transition: all 0.2s;
-  justify-content: center;
+  transition: all 0.15s;
+  font-size: 13px;
+  font-weight: 600;
 }
 
-.control-btn .icon {
-  font-size: 24px;
-}
-
-.control-btn .label {
-  font-size: 10px;
-  color: var(--text-dim);
-}
-
-.control-btn:hover {
-  background: var(--primary);
-}
+.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 {
-  opacity: 0.8;
-}
+.control-btn.hangup:hover { opacity: 0.85; }
 
+/* ── Stats ── */
 .stats {
   text-align: center;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-dim);
   font-family: monospace;
-  padding: 8px;
+  padding: 4px;
 }