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/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();
 });

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;
 }