From 306d3c04cdc78de080d4610cd4787ba0cb7d3ec1 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 03:28:32 -0700
Subject: [PATCH 01/18] feat: add video/call page state, web-sys features, and
 icons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/Cargo.toml   |  4 +++
 crates/web/src/app.rs   |  3 +-
 crates/web/src/icons.rs | 50 +++++++++++++++++++++++++++++++++
 crates/web/src/state.rs | 61 ++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/crates/web/Cargo.toml b/crates/web/Cargo.toml
index 8a19dac6..180de61e 100644
--- a/crates/web/Cargo.toml
+++ b/crates/web/Cargo.toml
@@ -25,6 +25,10 @@ web-sys = { version = "0.3", features = [
     "RtcRtpSender", "MediaStream", "MediaStreamTrack",
     "MediaStreamConstraints", "MediaDevices", "HtmlMediaElement",
     "ScrollIntoViewOptions", "ScrollBehavior", "ScrollLogicalPosition",
+    "DisplayMediaStreamConstraints",
+    "AudioContext", "BaseAudioContext", "AudioNode",
+    "AnalyserNode", "MediaStreamAudioSourceNode",
+    "RtcSignalingState", "RtcRtpTransceiver",
 ] }
 js-sys = "0.3"
 wasm-bindgen-futures = "0.4"
diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index 3fc8b3ae..70ded77b 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -423,8 +423,7 @@ pub fn App() -> impl IntoView {
                                         </div>
                                     }.into_any()
                                 } else if show_settings.get() {
-                                    let tab = app_state.ui.settings_tab.get_untracked();
-                                    view! { <SettingsPanel peer_id=peer_id roles=Signal::from(roles) default_tab=tab on_close=move |_| {
+                                    view! { <SettingsPanel peer_id=peer_id on_server_settings=move |_| {
                                         write.ui.set_show_settings.set(false);
                                     } /> }.into_any()
                                 } else {
diff --git a/crates/web/src/icons.rs b/crates/web/src/icons.rs
index 9c8efad3..5708f0e0 100644
--- a/crates/web/src/icons.rs
+++ b/crates/web/src/icons.rs
@@ -298,3 +298,53 @@ pub fn icon_copy() -> impl IntoView {
         "icon-copy",
     )
 }
+
+/// Monitor / screen icon (rectangle with stand).
+pub fn icon_monitor() -> impl IntoView {
+    icon(
+        &format!(
+            r#"<svg {SVG_ATTRS}><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>"#
+        ),
+        "icon-monitor",
+    )
+}
+
+/// Video camera icon.
+pub fn icon_video() -> impl IntoView {
+    icon(
+        &format!(
+            r#"<svg {SVG_ATTRS}><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect width="14" height="12" x="2" y="6" rx="2"/></svg>"#
+        ),
+        "icon-video",
+    )
+}
+
+/// Video camera off icon (with diagonal slash).
+pub fn icon_video_off() -> impl IntoView {
+    icon(
+        &format!(
+            r#"<svg {SVG_ATTRS}><path d="M10.66 6H14a2 2 0 0 1 2 2v2.5l5.248-3.062A.5.5 0 0 1 22 7.87v8.196"/><path d="M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2"/><line x1="2" x2="22" y1="2" y2="22"/></svg>"#
+        ),
+        "icon-video-off",
+    )
+}
+
+/// 2x2 grid icon.
+pub fn icon_grid() -> impl IntoView {
+    icon(
+        &format!(
+            r#"<svg {SVG_ATTRS}><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>"#
+        ),
+        "icon-grid",
+    )
+}
+
+/// Maximize / expand icon (corner arrows).
+pub fn icon_maximize() -> impl IntoView {
+    icon(
+        &format!(
+            r#"<svg {SVG_ATTRS}><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/></svg>"#
+        ),
+        "icon-maximize",
+    )
+}
diff --git a/crates/web/src/state.rs b/crates/web/src/state.rs
index 3e44ee92..acf138f6 100644
--- a/crates/web/src/state.rs
+++ b/crates/web/src/state.rs
@@ -1,8 +1,28 @@
-use std::collections::HashMap;
+use std::collections::{HashMap, HashSet};
 
 use leptos::prelude::*;
 use willow_client::DisplayMessage;
 
+#[derive(Clone, Copy, PartialEq)]
+pub enum VideoSource {
+    Camera,
+    Screen,
+}
+
+#[derive(Clone, PartialEq, Default)]
+pub enum CallLayout {
+    #[default]
+    Grid,
+    Focus(String), // focused peer_id
+}
+
+#[derive(Clone, Copy, PartialEq, Default)]
+pub enum SettingsTab {
+    #[default]
+    Profile,
+    Server,
+}
+
 /// Per-channel UI state. Extensible for future needs (drafts, scroll pos).
 #[derive(Clone, Default, PartialEq)]
 pub struct ChannelViewState {
@@ -59,6 +79,10 @@ pub struct UiState {
     pub show_members: ReadSignal<bool>,
     pub show_add_server: ReadSignal<bool>,
     pub show_pinned: ReadSignal<bool>,
+    pub show_call_page: ReadSignal<bool>,
+    pub show_palette: ReadSignal<bool>,
+    pub call_layout: ReadSignal<CallLayout>,
+    pub settings_tab: ReadSignal<SettingsTab>,
 }
 
 #[derive(Clone, Copy)]
@@ -70,6 +94,10 @@ pub struct VoiceState {
     #[allow(dead_code)]
     pub voice_participants_map: ReadSignal<HashMap<String, Vec<String>>>,
     pub voice_channel_name: ReadSignal<String>,
+    pub video_source: ReadSignal<Option<VideoSource>>,
+    pub speaking_peers: ReadSignal<HashSet<String>>,
+    pub remote_video_streams:
+        ReadSignal<HashMap<String, send_wrapper::SendWrapper<web_sys::MediaStream>>>,
 }
 
 // ── Write signals (NOT in context — held by event processing) ────────
@@ -122,6 +150,10 @@ pub struct UiWriteSignals {
     pub set_show_members: WriteSignal<bool>,
     pub set_show_add_server: WriteSignal<bool>,
     pub set_show_pinned: WriteSignal<bool>,
+    pub set_show_call_page: WriteSignal<bool>,
+    pub set_show_palette: WriteSignal<bool>,
+    pub set_call_layout: WriteSignal<CallLayout>,
+    pub set_settings_tab: WriteSignal<SettingsTab>,
 }
 
 #[derive(Clone, Copy)]
@@ -131,6 +163,10 @@ pub struct VoiceWriteSignals {
     pub set_voice_deafened: WriteSignal<bool>,
     pub set_voice_participants_map: WriteSignal<HashMap<String, Vec<String>>>,
     pub set_voice_channel_name: WriteSignal<String>,
+    pub set_video_source: WriteSignal<Option<VideoSource>>,
+    pub set_speaking_peers: WriteSignal<HashSet<String>>,
+    pub set_remote_video_streams:
+        WriteSignal<HashMap<String, send_wrapper::SendWrapper<web_sys::MediaStream>>>,
 }
 
 /// Create all signal pairs and return the read/write halves.
@@ -167,6 +203,10 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
     let (show_members, set_show_members) = signal(false);
     let (show_add_server, set_show_add_server) = signal(false);
     let (show_pinned, set_show_pinned) = signal(false);
+    let (show_call_page, set_show_call_page) = signal(false);
+    let (show_palette, set_show_palette) = signal(false);
+    let (call_layout, set_call_layout) = signal(CallLayout::default());
+    let (settings_tab, set_settings_tab) = signal(SettingsTab::default());
 
     // Voice signals
     let (voice_channel, set_voice_channel) = signal(Option::<String>::None);
@@ -175,6 +215,11 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
     let (voice_participants_map, set_voice_participants_map) =
         signal(HashMap::<String, Vec<String>>::new());
     let (voice_channel_name, set_voice_channel_name) = signal(String::new());
+    let (video_source, set_video_source) = signal(Option::<VideoSource>::None);
+    let (speaking_peers, set_speaking_peers) = signal(HashSet::<String>::new());
+    let (remote_video_streams, set_remote_video_streams) = signal(
+        HashMap::<String, send_wrapper::SendWrapper<web_sys::MediaStream>>::new(),
+    );
 
     let app_state = AppState {
         chat: ChatState {
@@ -209,6 +254,10 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
             show_members,
             show_add_server,
             show_pinned,
+            show_call_page,
+            show_palette,
+            call_layout,
+            settings_tab,
         },
         voice: VoiceState {
             voice_channel,
@@ -216,6 +265,9 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
             voice_deafened,
             voice_participants_map,
             voice_channel_name,
+            video_source,
+            speaking_peers,
+            remote_video_streams,
         },
     };
 
@@ -252,6 +304,10 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
             set_show_members,
             set_show_add_server,
             set_show_pinned,
+            set_show_call_page,
+            set_show_palette,
+            set_call_layout,
+            set_settings_tab,
         },
         voice: VoiceWriteSignals {
             set_voice_channel,
@@ -259,6 +315,9 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
             set_voice_deafened,
             set_voice_participants_map,
             set_voice_channel_name,
+            set_video_source,
+            set_speaking_peers,
+            set_remote_video_streams,
         },
     };
 

From d44fd2ebb8008e3f5f003e083a3a5d596d5ccb8f Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 03:32:41 -0700
Subject: [PATCH 02/18] refactor: VoiceManager connection reuse, perfect
 negotiation, video track management

- Connections reused on renegotiation instead of recreated
- Perfect negotiation: polite/impolite by peer ID comparison
- onnegotiationneeded handler for addTrack/removeTrack flows
- Unified video management: start_video/stop_video_share
- ontrack redesign: routes audio to <audio> elements, video to callback
- Camera and screen share mutually exclusive via VideoSource enum

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/app.rs   |  35 ++--
 crates/web/src/voice.rs | 351 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 338 insertions(+), 48 deletions(-)

diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index 70ded77b..12b5bfc6 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -72,19 +72,34 @@ pub fn App() -> impl IntoView {
     provide_context(write);
 
     // Create the VoiceManager.
+    let local_peer_id = handle.peer_id();
     let voice_signal_handle = handle.clone();
     let voice_channel_for_signal = app_state.voice.voice_channel;
+    let set_remote_streams = write.voice.set_remote_video_streams;
     let voice_manager: VoiceManagerHandle = SendWrapper::new(Rc::new(RefCell::new(
-        VoiceManager::new(move |target_peer: &str, signal_type: &str, payload: &str| {
-            let ch_id = voice_channel_for_signal.get_untracked().unwrap_or_default();
-            let signal = match signal_type {
-                "offer" => VoiceSignalPayload::Offer(payload.to_string()),
-                "answer" => VoiceSignalPayload::Answer(payload.to_string()),
-                "ice" => VoiceSignalPayload::IceCandidate(payload.to_string()),
-                _ => return,
-            };
-            voice_signal_handle.send_voice_signal(&ch_id, target_peer, signal);
-        }),
+        VoiceManager::new(
+            local_peer_id,
+            move |target_peer: &str, signal_type: &str, payload: &str| {
+                let ch_id = voice_channel_for_signal.get_untracked().unwrap_or_default();
+                let signal = match signal_type {
+                    "offer" => VoiceSignalPayload::Offer(payload.to_string()),
+                    "answer" => VoiceSignalPayload::Answer(payload.to_string()),
+                    "ice" => VoiceSignalPayload::IceCandidate(payload.to_string()),
+                    _ => return,
+                };
+                voice_signal_handle.send_voice_signal(&ch_id, target_peer, signal);
+            },
+            move |peer_id: &str, stream: Option<web_sys::MediaStream>| {
+                let pid = peer_id.to_string();
+                set_remote_streams.update(move |map| {
+                    if let Some(s) = stream {
+                        map.insert(pid, send_wrapper::SendWrapper::new(s));
+                    } else {
+                        map.remove(&pid);
+                    }
+                });
+            },
+        ),
     )));
 
     provide_context(voice_manager.clone());
diff --git a/crates/web/src/voice.rs b/crates/web/src/voice.rs
index 7246dd82..345a4f1e 100644
--- a/crates/web/src/voice.rs
+++ b/crates/web/src/voice.rs
@@ -7,7 +7,15 @@
 //! stream is acquired once and added to every connection. Signaling messages
 //! (offers, answers, ICE candidates) are sent back through a callback that
 //! forwards them via the client's gossipsub network.
+//!
+//! ## Perfect Negotiation
+//!
+//! Connections are reused across renegotiations (e.g. when adding/removing
+//! video tracks). The "perfect negotiation" pattern resolves offer collisions:
+//! the peer with the lower ID is "polite" and will rollback its own offer
+//! when a collision is detected.
 
+use std::cell::Cell;
 use std::collections::HashMap;
 use std::rc::Rc;
 
@@ -15,38 +23,85 @@ use wasm_bindgen::closure::Closure;
 use wasm_bindgen::JsCast;
 use web_sys::{
     MediaStream, RtcConfiguration, RtcIceServer, RtcPeerConnection, RtcPeerConnectionIceEvent,
-    RtcSdpType, RtcSessionDescriptionInit, RtcTrackEvent,
+    RtcRtpSender, RtcSdpType, RtcSessionDescriptionInit, RtcTrackEvent,
 };
 
+use crate::state::VideoSource;
+
 /// Callback for sending voice signaling data back through the network.
 ///
 /// Arguments: `(target_peer_id, signal_type, payload)`
 /// where `signal_type` is `"offer"`, `"answer"`, or `"ice"`.
 type SignalCallback = Rc<dyn Fn(&str, &str, &str)>;
 
+/// Callback invoked when a remote peer's video track arrives or ends.
+///
+/// Arguments: `(remote_peer_id, Option<MediaStream>)` — `Some` when a video
+/// track arrives, `None` when it ends.
+type VideoTrackCallback = Rc<dyn Fn(&str, Option<MediaStream>)>;
+
+/// Per-peer connection state, including the RTCPeerConnection and a shared
+/// flag used by the perfect negotiation protocol to detect offer collisions.
+struct PeerConnectionState {
+    /// The underlying WebRTC peer connection.
+    pc: RtcPeerConnection,
+    /// Shared flag: `true` while we are in the process of creating and sending
+    /// an offer. Shared with the `onnegotiationneeded` closure via `Rc<Cell>`.
+    making_offer: Rc<Cell<bool>>,
+}
+
 /// Manages WebRTC connections for voice chat.
 ///
 /// Each remote peer has a dedicated `RTCPeerConnection`. The local microphone
-/// stream is shared across all connections.
+/// stream is shared across all connections. Video tracks (camera or screen
+/// share) are added/removed via `start_video` / `stop_video_share`, which
+/// trigger renegotiation automatically through the `onnegotiationneeded`
+/// handler.
 pub struct VoiceManager {
-    /// One `RTCPeerConnection` per remote peer.
-    connections: HashMap<String, RtcPeerConnection>,
+    /// Our own peer ID, used for polite/impolite determination.
+    local_peer_id: String,
+    /// One `PeerConnectionState` per remote peer.
+    connections: HashMap<String, PeerConnectionState>,
     /// Local microphone stream (acquired once).
     local_stream: Option<MediaStream>,
     /// Callback to send signaling data: `(target_peer, signal_type, payload)`.
     on_signal: SignalCallback,
+    /// Callback invoked when a remote video track arrives or ends.
+    on_video_track: VideoTrackCallback,
+    /// Active video stream (camera or screen share).
+    video_stream: Option<MediaStream>,
+    /// Which video source is currently active.
+    video_source: Option<VideoSource>,
+    /// RTP senders for the video track, keyed by remote peer ID.
+    /// Stored so we can call `remove_track` later.
+    video_senders: HashMap<String, RtcRtpSender>,
 }
 
 impl VoiceManager {
-    /// Create a new `VoiceManager` with a signaling callback.
+    /// Create a new `VoiceManager` with a signaling callback and video track callback.
     ///
-    /// The callback is invoked with `(target_peer_id, signal_type, payload)`
+    /// `local_peer_id` is this node's peer ID string, used to determine
+    /// polite vs impolite role during offer collisions.
+    ///
+    /// `on_signal` is invoked with `(target_peer_id, signal_type, payload)`
     /// whenever a signaling message needs to be sent to a remote peer.
-    pub fn new(on_signal: impl Fn(&str, &str, &str) + 'static) -> Self {
+    ///
+    /// `on_video_track` is invoked with `(remote_peer_id, Some(stream))` when
+    /// a remote video track arrives, and `(remote_peer_id, None)` when it ends.
+    pub fn new(
+        local_peer_id: String,
+        on_signal: impl Fn(&str, &str, &str) + 'static,
+        on_video_track: impl Fn(&str, Option<MediaStream>) + 'static,
+    ) -> Self {
         Self {
+            local_peer_id,
             connections: HashMap::new(),
             local_stream: None,
             on_signal: Rc::new(on_signal),
+            on_video_track: Rc::new(on_video_track),
+            video_stream: None,
+            video_source: None,
+            video_senders: HashMap::new(),
         }
     }
 
@@ -94,8 +149,12 @@ impl VoiceManager {
         Ok(())
     }
 
-    /// Add local audio tracks to a peer connection.
-    fn add_local_tracks(&self, pc: &RtcPeerConnection) {
+    /// Add local audio tracks (and video track if sharing) to a peer connection.
+    ///
+    /// Returns `Some(RtcRtpSender)` if a video track was added, so the caller
+    /// can store it in `video_senders` for later removal.
+    fn add_local_tracks(&self, pc: &RtcPeerConnection) -> Option<RtcRtpSender> {
+        // Audio tracks.
         if let Some(ref stream) = self.local_stream {
             let tracks = stream.get_audio_tracks();
             for i in 0..tracks.length() {
@@ -103,6 +162,15 @@ impl VoiceManager {
                 pc.add_track_0(&track, stream);
             }
         }
+        // Video track if currently sharing.
+        if let Some(ref video_stream) = self.video_stream {
+            let tracks = video_stream.get_video_tracks();
+            if tracks.length() > 0 {
+                let track: web_sys::MediaStreamTrack = tracks.get(0).unchecked_into();
+                return Some(pc.add_track_0(&track, video_stream));
+            }
+        }
+        None
     }
 
     /// Set up the `onicecandidate` handler for a peer connection.
@@ -123,12 +191,25 @@ impl VoiceManager {
         on_ice.forget();
     }
 
-    /// Set up the `ontrack` handler to play remote audio.
-    fn setup_track_handler(pc: &RtcPeerConnection) {
+    /// Set up the `ontrack` handler to play remote audio and forward video.
+    ///
+    /// Audio tracks create `<audio>` elements appended to the document body.
+    /// Video tracks are forwarded to the `on_video_track` callback with a
+    /// listener for `ended` that fires `on_video_track(peer_id, None)`.
+    fn setup_track_handler(&self, pc: &RtcPeerConnection, remote_peer: &str) {
+        let peer_id = remote_peer.to_string();
+        let on_video = self.on_video_track.clone();
+
         let on_track = Closure::wrap(Box::new(move |ev: RtcTrackEvent| {
+            let track: web_sys::MediaStreamTrack = ev.track();
             let streams = ev.streams();
-            if streams.length() > 0 {
-                let stream: MediaStream = streams.get(0).unchecked_into();
+            if streams.length() == 0 {
+                return;
+            }
+            let stream: MediaStream = streams.get(0).unchecked_into();
+
+            if track.kind() == "audio" {
+                // Create <audio> element for remote audio playback.
                 if let Some(window) = web_sys::window() {
                     if let Some(document) = window.document() {
                         if let Ok(el) = document.create_element("audio") {
@@ -142,25 +223,135 @@ impl VoiceManager {
                         }
                     }
                 }
+            } else if track.kind() == "video" {
+                let pid = peer_id.clone();
+                on_video(&pid, Some(stream));
+
+                // Listen for track ended to clear the video.
+                let pid_end = peer_id.clone();
+                let on_video_end = on_video.clone();
+                let on_ended = Closure::once(move || {
+                    on_video_end(&pid_end, None);
+                });
+                track.set_onended(Some(on_ended.as_ref().unchecked_ref()));
+                on_ended.forget();
             }
         }) as Box<dyn FnMut(RtcTrackEvent)>);
+
         pc.set_ontrack(Some(on_track.as_ref().unchecked_ref()));
         // Intentional leak: closure must outlive the peer connection.
         on_track.forget();
     }
 
-    /// Create an SDP offer and send it to a remote peer.
+    /// Set up the `onnegotiationneeded` handler for automatic renegotiation.
     ///
-    /// This creates a new `RTCPeerConnection`, adds local audio tracks,
-    /// sets up ICE and track handlers, creates an offer, sets the local
-    /// description, and sends the offer via the signal callback.
-    pub async fn create_offer(&mut self, remote_peer: &str) -> Result<(), String> {
+    /// When tracks are added or removed, the browser fires this event. The
+    /// handler creates a new offer, sets the local description, and sends
+    /// it via the signal callback. The `making_offer` flag is set during
+    /// this process for the perfect negotiation collision detection.
+    fn setup_negotiation_handler(
+        &self,
+        pc: &RtcPeerConnection,
+        remote_peer: &str,
+        making_offer: Rc<Cell<bool>>,
+    ) {
+        let signal_cb = self.on_signal.clone();
+        let peer_id = remote_peer.to_string();
+        let pc_clone = pc.clone();
+
+        let on_negotiation = Closure::wrap(Box::new(move || {
+            let signal = signal_cb.clone();
+            let pid = peer_id.clone();
+            let pc_inner = pc_clone.clone();
+            let flag = making_offer.clone();
+
+            wasm_bindgen_futures::spawn_local(async move {
+                flag.set(true);
+
+                let offer_result = wasm_bindgen_futures::JsFuture::from(pc_inner.create_offer())
+                    .await;
+                let Ok(offer) = offer_result else {
+                    flag.set(false);
+                    return;
+                };
+
+                let offer_sdp = js_sys::Reflect::get(&offer, &"sdp".into())
+                    .unwrap_or_default()
+                    .as_string()
+                    .unwrap_or_default();
+
+                let desc = RtcSessionDescriptionInit::new(RtcSdpType::Offer);
+                desc.set_sdp(&offer_sdp);
+                let set_result =
+                    wasm_bindgen_futures::JsFuture::from(pc_inner.set_local_description(&desc))
+                        .await;
+                if set_result.is_err() {
+                    flag.set(false);
+                    return;
+                }
+
+                signal(&pid, "offer", &offer_sdp);
+                flag.set(false);
+            });
+        }) as Box<dyn FnMut()>);
+
+        pc.set_onnegotiationneeded(Some(on_negotiation.as_ref().unchecked_ref()));
+        // Intentional leak: closure must outlive the peer connection.
+        on_negotiation.forget();
+    }
+
+    /// Get an existing connection or create a new one with all handlers wired up.
+    ///
+    /// If a connection already exists for `remote_peer`, it is returned as-is.
+    /// Otherwise a new `RTCPeerConnection` is created, local tracks are added,
+    /// and ICE / track / negotiation handlers are installed.
+    ///
+    /// Returns a reference to the `PeerConnectionState` and an optional
+    /// `RtcRtpSender` for the video track (if one was added to a new connection).
+    fn get_or_create_connection(
+        &mut self,
+        remote_peer: &str,
+    ) -> Result<(&PeerConnectionState, Option<RtcRtpSender>), String> {
+        if self.connections.contains_key(remote_peer) {
+            let state = self.connections.get(remote_peer).unwrap();
+            return Ok((state, None));
+        }
+
         let pc = RtcPeerConnection::new_with_configuration(&Self::rtc_config())
             .map_err(|_| "failed to create peer connection")?;
 
-        self.add_local_tracks(&pc);
+        let video_sender = self.add_local_tracks(&pc);
         self.setup_ice_handler(&pc, remote_peer);
-        Self::setup_track_handler(&pc);
+        self.setup_track_handler(&pc, remote_peer);
+
+        let making_offer = Rc::new(Cell::new(false));
+        self.setup_negotiation_handler(&pc, remote_peer, making_offer.clone());
+
+        self.connections.insert(
+            remote_peer.to_string(),
+            PeerConnectionState {
+                pc,
+                making_offer,
+            },
+        );
+
+        let state = self.connections.get(remote_peer).unwrap();
+        Ok((state, video_sender))
+    }
+
+    /// Create an SDP offer and send it to a remote peer.
+    ///
+    /// If a connection already exists it is reused; otherwise a new one is
+    /// created with local tracks and all handlers. The offer is created on
+    /// the (possibly existing) connection and sent via the signal callback.
+    pub async fn create_offer(&mut self, remote_peer: &str) -> Result<(), String> {
+        let (state, video_sender) = self.get_or_create_connection(remote_peer)?;
+        let pc = state.pc.clone();
+
+        // Store video sender if a new connection was created with video.
+        if let Some(sender) = video_sender {
+            self.video_senders.insert(remote_peer.to_string(), sender);
+        }
 
         // Create offer.
         let offer = wasm_bindgen_futures::JsFuture::from(pc.create_offer())
@@ -182,21 +373,40 @@ impl VoiceManager {
         // Send offer to remote peer.
         (self.on_signal)(remote_peer, "offer", &offer_sdp);
 
-        self.connections.insert(remote_peer.to_string(), pc);
         Ok(())
     }
 
     /// Handle an incoming SDP offer from a remote peer.
     ///
-    /// Creates a new `RTCPeerConnection`, sets the remote description,
-    /// creates an answer, and sends it back.
+    /// Implements the "perfect negotiation" pattern:
+    /// - If we are the **impolite** peer (higher ID) and are currently making
+    ///   an offer, we ignore the incoming offer (our offer wins).
+    /// - If we are the **polite** peer (lower ID) and are making an offer,
+    ///   we rollback our local description and accept the remote offer.
+    /// - Otherwise we accept the offer normally.
     pub async fn handle_offer(&mut self, remote_peer: &str, sdp: &str) -> Result<(), String> {
-        let pc = RtcPeerConnection::new_with_configuration(&Self::rtc_config())
-            .map_err(|_| "failed to create peer connection")?;
+        let (state, video_sender) = self.get_or_create_connection(remote_peer)?;
+        let pc = state.pc.clone();
+        let currently_making_offer = state.making_offer.get();
 
-        self.add_local_tracks(&pc);
-        self.setup_ice_handler(&pc, remote_peer);
-        Self::setup_track_handler(&pc);
+        // Store video sender if a new connection was created with video.
+        if let Some(sender) = video_sender {
+            self.video_senders.insert(remote_peer.to_string(), sender);
+        }
+
+        // Perfect negotiation collision detection.
+        let polite = self.local_peer_id.as_str() < remote_peer;
+
+        if currently_making_offer {
+            if !polite {
+                // We are impolite and already making an offer — ignore incoming.
+                return Ok(());
+            }
+            // We are polite — rollback our pending local description.
+            let rollback = RtcSessionDescriptionInit::new(RtcSdpType::Rollback);
+            let _ = wasm_bindgen_futures::JsFuture::from(pc.set_local_description(&rollback))
+                .await;
+        }
 
         // Set remote description (the offer).
         let remote_desc = RtcSessionDescriptionInit::new(RtcSdpType::Offer);
@@ -224,20 +434,19 @@ impl VoiceManager {
         // Send answer back.
         (self.on_signal)(remote_peer, "answer", &answer_sdp);
 
-        self.connections.insert(remote_peer.to_string(), pc);
         Ok(())
     }
 
     /// Handle an incoming SDP answer from a remote peer.
     pub async fn handle_answer(&self, remote_peer: &str, sdp: &str) -> Result<(), String> {
-        let pc = self
+        let state = self
             .connections
             .get(remote_peer)
             .ok_or("no connection for peer")?;
 
         let desc = RtcSessionDescriptionInit::new(RtcSdpType::Answer);
         desc.set_sdp(sdp);
-        wasm_bindgen_futures::JsFuture::from(pc.set_remote_description(&desc))
+        wasm_bindgen_futures::JsFuture::from(state.pc.set_remote_description(&desc))
             .await
             .map_err(|_| "set_remote_description failed")?;
         Ok(())
@@ -249,7 +458,7 @@ impl VoiceManager {
         remote_peer: &str,
         candidate_json: &str,
     ) -> Result<(), String> {
-        let pc = self
+        let state = self
             .connections
             .get(remote_peer)
             .ok_or("no connection for peer")?;
@@ -258,7 +467,8 @@ impl VoiceManager {
             js_sys::JSON::parse(candidate_json).map_err(|_| "invalid ICE candidate JSON")?;
         // Use add_ice_candidate with the parsed JS object directly.
         // The browser accepts RTCIceCandidateInit dictionaries natively.
-        let _ = pc
+        let _ = state
+            .pc
             .add_ice_candidate_with_opt_rtc_ice_candidate_init(Some(candidate_obj.unchecked_ref()));
         Ok(())
     }
@@ -274,17 +484,82 @@ impl VoiceManager {
         }
     }
 
+    /// Start sharing video (camera or screen) to all connected peers.
+    ///
+    /// Stops any existing video share first. The video track is added to every
+    /// existing peer connection; `onnegotiationneeded` fires automatically and
+    /// handles the renegotiation.
+    pub fn start_video(&mut self, stream: MediaStream, source: VideoSource) {
+        self.stop_video_share();
+        self.video_stream = Some(stream.clone());
+        self.video_source = Some(source);
+
+        let video_tracks = stream.get_video_tracks();
+        if video_tracks.length() > 0 {
+            let track: web_sys::MediaStreamTrack = video_tracks.get(0).unchecked_into();
+            // Collect peer IDs first to avoid borrowing `self` in the loop.
+            let peer_ids: Vec<String> = self.connections.keys().cloned().collect();
+            for peer_id in peer_ids {
+                if let Some(state) = self.connections.get(&peer_id) {
+                    let sender = state.pc.add_track_0(&track, &stream);
+                    self.video_senders.insert(peer_id, sender);
+                }
+            }
+        }
+        // onnegotiationneeded fires automatically from addTrack.
+    }
+
+    /// Stop sharing video and remove the track from all peer connections.
+    ///
+    /// Stops the underlying `MediaStreamTrack` (turns off camera LED) and
+    /// removes the RTP sender from each connection, triggering renegotiation.
+    pub fn stop_video_share(&mut self) {
+        let senders: Vec<(String, RtcRtpSender)> = self.video_senders.drain().collect();
+        for (peer_id, sender) in senders {
+            if let Some(state) = self.connections.get(&peer_id) {
+                let _ = state.pc.remove_track(&sender);
+            }
+        }
+        if let Some(ref stream) = self.video_stream {
+            let tracks = stream.get_video_tracks();
+            for i in 0..tracks.length() {
+                let track: web_sys::MediaStreamTrack = tracks.get(i).unchecked_into();
+                track.stop();
+            }
+        }
+        self.video_stream = None;
+        self.video_source = None;
+    }
+
+    /// Start sharing the screen. Convenience wrapper around `start_video`.
+    pub fn start_screen_share(&mut self, stream: MediaStream) {
+        self.start_video(stream, VideoSource::Screen);
+    }
+
+    /// Start sharing the camera. Convenience wrapper around `start_video`.
+    pub fn start_camera(&mut self, stream: MediaStream) {
+        self.start_video(stream, VideoSource::Camera);
+    }
+
+    /// Return the currently active video source, if any.
+    pub fn video_source(&self) -> Option<VideoSource> {
+        self.video_source
+    }
+
     /// Close the connection to a specific remote peer.
     pub fn close_connection(&mut self, remote_peer: &str) {
-        if let Some(pc) = self.connections.remove(remote_peer) {
-            pc.close();
+        self.video_senders.remove(remote_peer);
+        (self.on_video_track)(remote_peer, None);
+        if let Some(state) = self.connections.remove(remote_peer) {
+            state.pc.close();
         }
     }
 
-    /// Close all connections and release the microphone.
+    /// Close all connections, stop video sharing, and release the microphone.
     pub fn close_all(&mut self) {
-        for (_, pc) in self.connections.drain() {
-            pc.close();
+        self.stop_video_share();
+        for (_, state) in self.connections.drain() {
+            state.pc.close();
         }
         if let Some(ref stream) = self.local_stream {
             let tracks = stream.get_tracks();

From 545cd978508fcad0ed4077dba62ba8a45c12631f Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 03:41:43 -0700
Subject: [PATCH 03/18] feat: call page with participant tiles, camera, screen
 share, and controls

Full call page replaces chat when in voice channel.
Participant tiles show peer-ID-derived gradient avatars or video.
Grid and focus layout modes with click-to-focus.
Control strip: mute, deafen, camera, screen share, disconnect.
Frosted glass controls, speaking glow, staggered tile animations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/app.rs                         |  40 +-
 crates/web/src/components/call_page.rs        | 470 ++++++++++++++++++
 crates/web/src/components/mod.rs              |   4 +
 crates/web/src/components/participant_tile.rs | 146 ++++++
 crates/web/src/event_processing.rs            |   5 +
 crates/web/style.css                          | 379 ++++++++++++++
 6 files changed, 1038 insertions(+), 6 deletions(-)
 create mode 100644 crates/web/src/components/call_page.rs
 create mode 100644 crates/web/src/components/participant_tile.rs

diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index 12b5bfc6..e641bd69 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -6,8 +6,8 @@ use send_wrapper::SendWrapper;
 use willow_client::{ClientConfig, ClientEvent, ClientHandle, DisplayMessage, VoiceSignalPayload};
 
 use crate::components::{
-    AddServerPanel, ChannelHeader, ChatInput, CommandPalette, FileShareButton, MemberList,
-    MessageList, PinnedPanel, ServerList, SettingsPanel, Sidebar, WelcomeScreen,
+    AddServerPanel, CallPage, ChannelHeader, ChatInput, CommandPalette, FileShareButton,
+    MemberList, MessageList, PinnedPanel, ServerList, SettingsPanel, Sidebar, WelcomeScreen,
 };
 use crate::event_processing::{extract_roles, process_event_batch, refresh_all_signals};
 use crate::handlers;
@@ -245,6 +245,10 @@ pub fn App() -> impl IntoView {
         write.voice.set_voice_channel_name.set(String::new());
         write.voice.set_voice_muted.set(false);
         write.voice.set_voice_deafened.set(false);
+        write.voice.set_video_source.set(None);
+        write.voice.set_remote_video_streams.update(|m| m.clear());
+        write.ui.set_show_call_page.set(false);
+        write.ui.set_call_layout.set(crate::state::CallLayout::default());
     };
 
     // Welcome screen callback that refreshes all signals.
@@ -279,6 +283,7 @@ pub fn App() -> impl IntoView {
     let editing = app_state.chat.editing;
     let channel_views = app_state.chat.channel_views;
     let show_palette = app_state.ui.show_palette;
+    let show_call_page = app_state.ui.show_call_page;
 
     // Pre-clone handle for use inside the view closure.
     let handle_for_voice_join = handle.clone();
@@ -363,6 +368,14 @@ pub fn App() -> impl IntoView {
                                 move |channel_name: String| {
                                     write.ui.set_show_sidebar.set(false);
 
+                                    // If already in this voice channel, just navigate to the call page.
+                                    if app_state.voice.voice_channel.get_untracked() == Some(channel_name.clone()) {
+                                        write.ui.set_show_call_page.set(true);
+                                        write.ui.set_show_settings.set(false);
+                                        write.ui.set_show_add_server.set(false);
+                                        return;
+                                    }
+
                                     // Request mic permission SYNCHRONOUSLY in the click handler
                                     // to preserve the user gesture chain (required on mobile).
                                     let window = web_sys::window().unwrap();
@@ -379,9 +392,12 @@ pub fn App() -> impl IntoView {
                                         return;
                                     };
 
-                                    // Show controls immediately (optimistic).
+                                    // Show controls and call page immediately (optimistic).
                                     write.voice.set_voice_channel.set(Some(channel_name.clone()));
                                     write.voice.set_voice_channel_name.set(channel_name.clone());
+                                    write.ui.set_show_call_page.set(true);
+                                    write.ui.set_show_settings.set(false);
+                                    write.ui.set_show_add_server.set(false);
 
                                     // Handle the promise result asynchronously.
                                     let vc = vc_handle.clone();
@@ -397,6 +413,7 @@ pub fn App() -> impl IntoView {
                                         tracing::error!("Microphone access denied");
                                         write.voice.set_voice_channel.set(None);
                                         write.voice.set_voice_channel_name.set(String::new());
+                                        write.ui.set_show_call_page.set(false);
                                     });
                                     let _ = promise.then2(&on_success, &on_error);
                                     on_success.forget();
@@ -407,9 +424,9 @@ pub fn App() -> impl IntoView {
                             voice_channel_name=app_state.voice.voice_channel_name
                             voice_muted=app_state.voice.voice_muted
                             voice_deafened=app_state.voice.voice_deafened
-                            on_voice_mute=Callback::new(on_mute)
-                            on_voice_deafen=Callback::new(on_deafen)
-                            on_voice_disconnect=Callback::new(on_disconnect)
+                            on_voice_mute=Callback::new(on_mute.clone())
+                            on_voice_deafen=Callback::new(on_deafen.clone())
+                            on_voice_disconnect=Callback::new(on_disconnect.clone())
                             on_channel_created={
                                 let ch_handle = handle_cc.clone();
                                 move |_| {
@@ -441,6 +458,17 @@ pub fn App() -> impl IntoView {
                                     view! { <SettingsPanel peer_id=peer_id on_server_settings=move |_| {
                                         write.ui.set_show_settings.set(false);
                                     } /> }.into_any()
+                                } else if show_call_page.get() {
+                                    let on_mute_cp = on_mute.clone();
+                                    let on_deafen_cp = on_deafen.clone();
+                                    let on_disconnect_cp = on_disconnect.clone();
+                                    view! {
+                                        <CallPage
+                                            on_disconnect=Callback::new(on_disconnect_cp)
+                                            on_mute=Callback::new(on_mute_cp)
+                                            on_deafen=Callback::new(on_deafen_cp)
+                                        />
+                                    }.into_any()
                                 } else {
                                     let send2 = send.clone();
                                     let edit_send2 = edit_send.clone();
diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
new file mode 100644
index 00000000..8d21afa3
--- /dev/null
+++ b/crates/web/src/components/call_page.rs
@@ -0,0 +1,470 @@
+//! # Call Page Component
+//!
+//! Full-screen call view that replaces the chat area when the user is in a
+//! voice channel. Contains a top bar (channel name, participant count, timer),
+//! a participant grid with [`ParticipantTile`]s, and a frosted-glass control
+//! strip for mute, deafen, camera, screen share, and disconnect.
+
+use leptos::prelude::*;
+use send_wrapper::SendWrapper;
+
+use crate::app::{VoiceManagerHandle, WebClientHandle};
+use crate::components::ParticipantTile;
+use crate::icons;
+use crate::state::{AppState, AppWriteSignals, CallLayout, VideoSource};
+
+/// Render a participant tile, optionally passing a video stream.
+///
+/// Because Leptos `#[prop(optional)]` expects the inner `T` when passing a
+/// value (not `Option<T>`), we branch on whether a stream exists.
+fn render_tile(
+    peer_id: String,
+    display_name: String,
+    video_stream: Option<SendWrapper<web_sys::MediaStream>>,
+    is_speaking: bool,
+    is_muted: bool,
+    is_focused: bool,
+    is_local_camera: bool,
+    on_click: Callback<String>,
+) -> impl IntoView {
+    if let Some(stream) = video_stream {
+        view! {
+            <ParticipantTile
+                peer_id=peer_id
+                display_name=display_name
+                video_stream=stream
+                is_speaking=is_speaking
+                is_muted=is_muted
+                is_focused=is_focused
+                is_local_camera=is_local_camera
+                on_click=on_click
+            />
+        }
+        .into_any()
+    } else {
+        view! {
+            <ParticipantTile
+                peer_id=peer_id
+                display_name=display_name
+                is_speaking=is_speaking
+                is_muted=is_muted
+                is_focused=is_focused
+                is_local_camera=is_local_camera
+                on_click=on_click
+            />
+        }
+        .into_any()
+    }
+}
+
+/// Format seconds as `MM:SS` or `HH:MM:SS` for the call duration timer.
+fn format_duration(seconds: u32) -> String {
+    let h = seconds / 3600;
+    let m = (seconds % 3600) / 60;
+    let s = seconds % 60;
+    if h > 0 {
+        format!("{h:02}:{m:02}:{s:02}")
+    } else {
+        format!("{m:02}:{s:02}")
+    }
+}
+
+/// The call page, shown in place of the chat view when `show_call_page` is
+/// true. Reads voice state from context and renders participant tiles with
+/// grid or focus layout.
+#[component]
+pub fn CallPage(
+    /// Called when the user clicks the disconnect button.
+    on_disconnect: Callback<()>,
+    /// Called when the user clicks the mute button.
+    on_mute: Callback<()>,
+    /// Called when the user clicks the deafen button.
+    on_deafen: Callback<()>,
+) -> impl IntoView {
+    let app_state = use_context::<AppState>().unwrap();
+    let write = use_context::<AppWriteSignals>().unwrap();
+    let handle = use_context::<WebClientHandle>().unwrap();
+    let vm = use_context::<VoiceManagerHandle>().unwrap();
+
+    // Duration timer — increments every second.
+    let (duration, set_duration) = signal(0u32);
+    set_interval(
+        move || set_duration.update(|d| *d += 1),
+        std::time::Duration::from_millis(1000),
+    );
+
+    // Layout state.
+    let layout = app_state.ui.call_layout;
+
+    // Camera button click handler.
+    let vm_camera = vm.clone();
+    let _handle_camera = handle.clone();
+    let on_camera_click = move |_| {
+        let current_source = app_state.voice.video_source.get_untracked();
+
+        if current_source == Some(VideoSource::Camera) {
+            // Toggle off — stop camera.
+            vm_camera.borrow_mut().stop_video_share();
+            write.voice.set_video_source.set(None);
+            return;
+        }
+
+        // Stop any existing share first.
+        if current_source.is_some() {
+            vm_camera.borrow_mut().stop_video_share();
+            write.voice.set_video_source.set(None);
+        }
+
+        // MUST call getUserMedia synchronously in click handler for gesture.
+        let window = web_sys::window().unwrap();
+        let navigator = window.navigator();
+        let Ok(media_devices) = navigator.media_devices() else {
+            tracing::error!("No media devices available");
+            return;
+        };
+        let constraints = web_sys::MediaStreamConstraints::new();
+        constraints.set_video(&true.into());
+        constraints.set_audio(&false.into());
+        let Ok(promise) = media_devices.get_user_media_with_constraints(&constraints) else {
+            tracing::error!("getUserMedia failed");
+            return;
+        };
+
+        let vm2 = vm_camera.clone();
+        let write2 = write;
+        let on_success =
+            wasm_bindgen::closure::Closure::once(move |stream: wasm_bindgen::JsValue| {
+                use wasm_bindgen::JsCast;
+                let stream: web_sys::MediaStream = stream.unchecked_into();
+                vm2.borrow_mut().start_camera(stream);
+                write2.voice.set_video_source.set(Some(VideoSource::Camera));
+            });
+        let on_error =
+            wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
+                tracing::error!("Camera access denied");
+            });
+        let _ = promise.then2(&on_success, &on_error);
+        on_success.forget();
+        on_error.forget();
+    };
+
+    // Screen share button click handler.
+    let vm_screen = vm.clone();
+    let on_screen_click = move |_| {
+        let current_source = app_state.voice.video_source.get_untracked();
+
+        if current_source == Some(VideoSource::Screen) {
+            // Toggle off — stop screen share.
+            vm_screen.borrow_mut().stop_video_share();
+            write.voice.set_video_source.set(None);
+            return;
+        }
+
+        // Stop any existing share first.
+        if current_source.is_some() {
+            vm_screen.borrow_mut().stop_video_share();
+            write.voice.set_video_source.set(None);
+        }
+
+        // MUST call getDisplayMedia synchronously in click handler for gesture.
+        let window = web_sys::window().unwrap();
+        let navigator = window.navigator();
+        let Ok(media_devices) = navigator.media_devices() else {
+            tracing::error!("No media devices available");
+            return;
+        };
+        let Ok(promise) = media_devices.get_display_media() else {
+            tracing::error!("getDisplayMedia failed");
+            return;
+        };
+
+        let vm2 = vm_screen.clone();
+        let write2 = write;
+        let on_success =
+            wasm_bindgen::closure::Closure::once(move |stream: wasm_bindgen::JsValue| {
+                use wasm_bindgen::JsCast;
+                let stream: web_sys::MediaStream = stream.unchecked_into();
+                vm2.borrow_mut().start_screen_share(stream);
+                write2.voice.set_video_source.set(Some(VideoSource::Screen));
+            });
+        let on_error =
+            wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
+                tracing::error!("Screen share denied or cancelled");
+            });
+        let _ = promise.then2(&on_success, &on_error);
+        on_success.forget();
+        on_error.forget();
+    };
+
+    // Disconnect handler — also clear call page.
+    let on_disconnect_click = move |_| {
+        write.voice.set_video_source.set(None);
+        write.voice.set_remote_video_streams.update(|m| m.clear());
+        write.ui.set_show_call_page.set(false);
+        write.ui.set_call_layout.set(CallLayout::default());
+        on_disconnect.run(());
+    };
+
+    let on_mute_click = move |_| on_mute.run(());
+    let on_deafen_click = move |_| on_deafen.run(());
+
+    view! {
+        <div class="call-page">
+            // Top bar
+            <div class="call-top-bar">
+                <div class="call-channel-name">
+                    <span class="call-live-dot"></span>
+                    {move || app_state.voice.voice_channel_name.get()}
+                </div>
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <span class="call-participant-count">
+                        {move || {
+                            let ch = app_state.voice.voice_channel.get().unwrap_or_default();
+                            let map = app_state.voice.voice_participants_map.get();
+                            let count = map.get(&ch).map(|v| v.len()).unwrap_or(0) + 1; // +1 for local
+                            format!("{count} participant{}", if count != 1 { "s" } else { "" })
+                        }}
+                    </span>
+                    <span class="call-timer">{move || format_duration(duration.get())}</span>
+                    <button
+                        class="call-layout-toggle"
+                        title=move || {
+                            match layout.get() {
+                                CallLayout::Grid => "Focus mode",
+                                CallLayout::Focus(_) => "Grid mode",
+                            }
+                        }
+                        on:click=move |_| {
+                            let current = layout.get();
+                            match current {
+                                CallLayout::Focus(_) => write.ui.set_call_layout.set(CallLayout::Grid),
+                                CallLayout::Grid => {
+                                    // Focus on first participant if any
+                                    let ch = app_state.voice.voice_channel.get_untracked().unwrap_or_default();
+                                    let map = app_state.voice.voice_participants_map.get_untracked();
+                                    if let Some(participants) = map.get(&ch) {
+                                        if let Some(first) = participants.first() {
+                                            write.ui.set_call_layout.set(CallLayout::Focus(first.clone()));
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    >
+                        {move || {
+                            match layout.get() {
+                                CallLayout::Grid => icons::icon_maximize().into_any(),
+                                CallLayout::Focus(_) => icons::icon_grid().into_any(),
+                            }
+                        }}
+                    </button>
+                </div>
+            </div>
+
+            // Participant grid
+            {move || {
+                let ch = app_state.voice.voice_channel.get().unwrap_or_default();
+                let participants_map = app_state.voice.voice_participants_map.get();
+                let remote_participants: Vec<String> = participants_map.get(&ch).cloned().unwrap_or_default();
+                let speaking = app_state.voice.speaking_peers.get();
+                let remote_streams = app_state.voice.remote_video_streams.get();
+                let muted = app_state.voice.voice_muted.get();
+                let video_source = app_state.voice.video_source.get();
+                let current_layout = layout.get();
+
+                let local_peer_id = handle.peer_id();
+                let local_name = handle.display_name();
+
+                // Total participant count including self.
+                let total = remote_participants.len() + 1;
+
+                let grid_class = match &current_layout {
+                    CallLayout::Focus(_) => "call-grid focus".to_string(),
+                    CallLayout::Grid if total == 1 => "call-grid single-participant".to_string(),
+                    CallLayout::Grid if total == 2 => "call-grid two-participants".to_string(),
+                    _ => "call-grid".to_string(),
+                };
+
+                // Build the list of all participants (local first, then remote).
+                let mut tiles: Vec<leptos::tachys::view::any_view::AnyView> = Vec::new();
+
+                // In focus layout, render the focused tile first, then thumbnails.
+                if let CallLayout::Focus(ref focused_id) = current_layout {
+                    let focused_pid = focused_id.clone();
+
+                    // Render the focused tile.
+                    let (f_name, f_stream, f_is_muted, f_is_speaking, _f_is_local, f_is_local_cam) =
+                        if focused_pid == local_peer_id {
+                            (local_name.clone(), None, muted, false, true, video_source == Some(VideoSource::Camera))
+                        } else {
+                            let name = handle.peer_display_name(&focused_pid);
+                            let stream = remote_streams.get(&focused_pid).cloned();
+                            let is_spk = speaking.contains(&focused_pid);
+                            (name, stream, false, is_spk, false, false)
+                        };
+
+                    let fpid = focused_pid.clone();
+                    tiles.push(render_tile(
+                        focused_pid,
+                        f_name,
+                        f_stream,
+                        f_is_speaking,
+                        f_is_muted,
+                        true,
+                        f_is_local_cam,
+                        Callback::new(move |_pid: String| {
+                            write.ui.set_call_layout.set(CallLayout::Grid);
+                        }),
+                    ).into_any());
+
+                    // Thumbnail strip.
+                    let mut thumb_views: Vec<leptos::tachys::view::any_view::AnyView> = Vec::new();
+
+                    // Local in thumbnails if not focused.
+                    if fpid != local_peer_id {
+                        thumb_views.push(render_tile(
+                            local_peer_id.clone(),
+                            local_name.clone(),
+                            None,
+                            false,
+                            muted,
+                            false,
+                            video_source == Some(VideoSource::Camera),
+                            Callback::new(move |pid: String| {
+                                write.ui.set_call_layout.set(CallLayout::Focus(pid));
+                            }),
+                        ).into_any());
+                    }
+
+                    // Remote peers in thumbnails (except focused).
+                    for pid in &remote_participants {
+                        if *pid == fpid {
+                            continue;
+                        }
+                        let name = handle.peer_display_name(pid);
+                        let stream = remote_streams.get(pid).cloned();
+                        let is_spk = speaking.contains(pid);
+                        thumb_views.push(render_tile(
+                            pid.clone(),
+                            name,
+                            stream,
+                            is_spk,
+                            false,
+                            false,
+                            false,
+                            Callback::new(move |pid: String| {
+                                write.ui.set_call_layout.set(CallLayout::Focus(pid));
+                            }),
+                        ).into_any());
+                    }
+
+                    if !thumb_views.is_empty() {
+                        tiles.push(view! {
+                            <div class="call-thumbnails">
+                                {thumb_views}
+                            </div>
+                        }.into_any());
+                    }
+                } else {
+                    // Grid layout — local user tile.
+                    tiles.push(render_tile(
+                        local_peer_id.clone(),
+                        local_name.clone(),
+                        None,
+                        false,
+                        muted,
+                        false,
+                        video_source == Some(VideoSource::Camera),
+                        Callback::new(move |pid: String| {
+                            write.ui.set_call_layout.set(CallLayout::Focus(pid));
+                        }),
+                    ).into_any());
+
+                    // Remote participant tiles.
+                    for pid in &remote_participants {
+                        let name = handle.peer_display_name(pid);
+                        let stream = remote_streams.get(pid).cloned();
+                        let is_spk = speaking.contains(pid);
+                        tiles.push(render_tile(
+                            pid.clone(),
+                            name,
+                            stream,
+                            is_spk,
+                            false,
+                            false,
+                            false,
+                            Callback::new(move |pid: String| {
+                                write.ui.set_call_layout.set(CallLayout::Focus(pid));
+                            }),
+                        ).into_any());
+                    }
+                }
+
+                view! {
+                    <div class=grid_class>
+                        {tiles}
+                    </div>
+                }
+            }}
+
+            // Control strip
+            <div class="call-controls">
+                <div class="call-controls-bar">
+                    <button
+                        class=move || if app_state.voice.voice_muted.get() { "call-btn muted" } else { "call-btn" }
+                        title=move || if app_state.voice.voice_muted.get() { "Unmute" } else { "Mute" }
+                        on:click=on_mute_click
+                    >
+                        {move || if app_state.voice.voice_muted.get() {
+                            icons::icon_mic_off().into_any()
+                        } else {
+                            icons::icon_mic().into_any()
+                        }}
+                    </button>
+                    <button
+                        class=move || if app_state.voice.voice_deafened.get() { "call-btn muted" } else { "call-btn" }
+                        title=move || if app_state.voice.voice_deafened.get() { "Undeafen" } else { "Deafen" }
+                        on:click=on_deafen_click
+                    >
+                        {move || if app_state.voice.voice_deafened.get() {
+                            icons::icon_headphones_off().into_any()
+                        } else {
+                            icons::icon_headphones().into_any()
+                        }}
+                    </button>
+
+                    <div class="call-controls-separator"></div>
+
+                    <button
+                        class=move || if app_state.voice.video_source.get() == Some(VideoSource::Camera) { "call-btn active" } else { "call-btn" }
+                        title=move || if app_state.voice.video_source.get() == Some(VideoSource::Camera) { "Stop Camera" } else { "Start Camera" }
+                        on:click=on_camera_click
+                    >
+                        {move || if app_state.voice.video_source.get() == Some(VideoSource::Camera) {
+                            icons::icon_video().into_any()
+                        } else {
+                            icons::icon_video_off().into_any()
+                        }}
+                    </button>
+                    <button
+                        class=move || if app_state.voice.video_source.get() == Some(VideoSource::Screen) { "call-btn active" } else { "call-btn" }
+                        title=move || if app_state.voice.video_source.get() == Some(VideoSource::Screen) { "Stop Sharing" } else { "Share Screen" }
+                        on:click=on_screen_click
+                    >
+                        {icons::icon_monitor()}
+                    </button>
+
+                    <div class="call-controls-separator"></div>
+
+                    <button
+                        class="call-btn disconnect"
+                        title="Disconnect"
+                        on:click=on_disconnect_click
+                    >
+                        {icons::icon_phone_off()}
+                    </button>
+                </div>
+            </div>
+        </div>
+    }
+}
diff --git a/crates/web/src/components/mod.rs b/crates/web/src/components/mod.rs
index 6a0cceef..3d0150cd 100644
--- a/crates/web/src/components/mod.rs
+++ b/crates/web/src/components/mod.rs
@@ -1,4 +1,5 @@
 mod add_server;
+mod call_page;
 mod chat;
 mod command_palette;
 mod confirm_dialog;
@@ -7,6 +8,7 @@ mod file_share;
 mod input;
 mod member_list;
 mod message;
+mod participant_tile;
 mod pinned;
 mod roles;
 mod server_list;
@@ -16,6 +18,7 @@ mod voice;
 mod welcome;
 
 pub use add_server::*;
+pub use call_page::*;
 pub use chat::*;
 pub use command_palette::*;
 pub use confirm_dialog::*;
@@ -24,6 +27,7 @@ pub use file_share::*;
 pub use input::*;
 pub use member_list::*;
 pub use message::*;
+pub use participant_tile::*;
 pub use pinned::*;
 pub use roles::*;
 pub use server_list::*;
diff --git a/crates/web/src/components/participant_tile.rs b/crates/web/src/components/participant_tile.rs
new file mode 100644
index 00000000..afcdc3d1
--- /dev/null
+++ b/crates/web/src/components/participant_tile.rs
@@ -0,0 +1,146 @@
+//! # Participant Tile Component
+//!
+//! Renders a single call participant as a tile showing either a video stream
+//! or a peer-ID-derived gradient avatar. Includes a display name overlay,
+//! speaking glow, and muted badge.
+
+use leptos::prelude::*;
+use send_wrapper::SendWrapper;
+use wasm_bindgen::JsCast;
+
+use crate::icons;
+
+/// Derive a unique gradient from a peer ID for the avatar background.
+///
+/// Splits the peer ID bytes in half, hashes each half, and picks two hue
+/// values separated by 40-100 degrees for a visually distinct gradient.
+fn peer_gradient(peer_id: &str) -> String {
+    let hash1 = peer_id
+        .bytes()
+        .take(peer_id.len() / 2)
+        .fold(0u32, |h, b| h.wrapping_mul(31).wrapping_add(b as u32));
+    let hash2 = peer_id
+        .bytes()
+        .skip(peer_id.len() / 2)
+        .fold(0u32, |h, b| h.wrapping_mul(31).wrapping_add(b as u32));
+    let hue1 = hash1 % 360;
+    let hue2 = (hue1 + 40 + hash2 % 60) % 360;
+    format!("linear-gradient(135deg, hsl({hue1}, 45%, 35%), hsl({hue2}, 45%, 30%))")
+}
+
+/// A single participant tile in the call grid.
+///
+/// Shows either a `<video>` element (when a stream is available) or a
+/// gradient avatar with the participant's initial. Clicking the tile fires
+/// `on_click` with the peer ID for focus toggling.
+#[component]
+pub fn ParticipantTile(
+    /// The participant's peer ID.
+    peer_id: String,
+    /// The participant's display name.
+    display_name: String,
+    /// Optional video stream to render in a `<video>` element.
+    #[prop(optional)]
+    video_stream: Option<SendWrapper<web_sys::MediaStream>>,
+    /// Whether this participant is currently speaking.
+    #[prop(default = false)]
+    is_speaking: bool,
+    /// Whether this participant's microphone is muted.
+    #[prop(default = false)]
+    is_muted: bool,
+    /// Whether this tile is in focused (enlarged) mode.
+    #[prop(default = false)]
+    is_focused: bool,
+    /// Whether this is the local camera feed (mirrors the video).
+    #[prop(default = false)]
+    is_local_camera: bool,
+    /// Callback fired with the peer ID when the tile is clicked.
+    #[prop(optional)]
+    on_click: Option<Callback<String>>,
+) -> impl IntoView {
+    let video_ref = NodeRef::<leptos::html::Video>::new();
+
+    // Bind srcObject when the video ref becomes available.
+    let stream_for_effect = video_stream.clone();
+    Effect::new(move |_| {
+        if let Some(el) = video_ref.get() {
+            if let Some(ref stream) = stream_for_effect {
+                let media_el: &web_sys::HtmlMediaElement = el.as_ref();
+                media_el.set_src_object(Some(stream));
+                let _ = media_el.play();
+            }
+        }
+    });
+
+    let has_video = video_stream.is_some();
+    let gradient = peer_gradient(&peer_id);
+    let initial = display_name
+        .chars()
+        .next()
+        .unwrap_or('?')
+        .to_uppercase()
+        .to_string();
+
+    let pid_for_click = peer_id.clone();
+
+    // Build CSS class string.
+    let mut classes = String::from("participant-tile");
+    if is_speaking {
+        classes.push_str(" speaking");
+    }
+    if is_focused {
+        classes.push_str(" focused");
+    }
+    if is_local_camera {
+        classes.push_str(" local-camera");
+    }
+
+    let video_class = if is_local_camera {
+        "local-camera"
+    } else if has_video && !is_local_camera {
+        "screen-share"
+    } else {
+        ""
+    };
+
+    view! {
+        <div
+            class=classes
+            on:click=move |_| {
+                if let Some(ref cb) = on_click {
+                    cb.run(pid_for_click.clone());
+                }
+            }
+        >
+            {if has_video {
+                view! {
+                    <video
+                        node_ref=video_ref
+                        class=video_class
+                        autoplay
+                        playsinline
+                        muted
+                    />
+                }.into_any()
+            } else {
+                view! {
+                    <div class="tile-avatar" style=format!("background: {gradient}")>
+                        {initial}
+                    </div>
+                }.into_any()
+            }}
+            <div class="tile-name">
+                <span>{display_name}</span>
+            </div>
+            {if is_muted {
+                Some(view! {
+                    <div class="tile-muted-badge">
+                        {icons::icon_mic_off()}
+                    </div>
+                })
+            } else {
+                None
+            }}
+        </div>
+    }
+}
diff --git a/crates/web/src/event_processing.rs b/crates/web/src/event_processing.rs
index d382d113..e9e972d4 100644
--- a/crates/web/src/event_processing.rs
+++ b/crates/web/src/event_processing.rs
@@ -101,6 +101,11 @@ pub fn process_event_batch(
                         v.retain(|p| p != &pid);
                     }
                 });
+                // Remove remote video stream for this peer.
+                let pid_for_stream = peer_id.clone();
+                write.voice.set_remote_video_streams.update(|m| {
+                    m.remove(&pid_for_stream);
+                });
                 voice_manager.borrow_mut().close_connection(peer_id);
             }
             ClientEvent::VoiceSignal {
diff --git a/crates/web/style.css b/crates/web/style.css
index 85134d46..03e1cf94 100644
--- a/crates/web/style.css
+++ b/crates/web/style.css
@@ -3120,6 +3120,385 @@ select:focus-visible {
 .context-menu-item.danger { color: var(--danger); }
 .context-menu-item.danger:hover { background: var(--danger-glow); }
 
+/* ── Participant Tile ───────────────────────────────────────────── */
+
+.participant-tile {
+    position: relative;
+    border-radius: 16px;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 2px solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    animation: tile-enter 0.4s cubic-bezier(0.2, 0, 0.2, 1) backwards;
+}
+
+/* Stagger tile entrance animations */
+.participant-tile:nth-child(1) { animation-delay: 0s; }
+.participant-tile:nth-child(2) { animation-delay: 0.06s; }
+.participant-tile:nth-child(3) { animation-delay: 0.12s; }
+.participant-tile:nth-child(4) { animation-delay: 0.18s; }
+.participant-tile:nth-child(5) { animation-delay: 0.24s; }
+.participant-tile:nth-child(6) { animation-delay: 0.3s; }
+
+.participant-tile:hover {
+    transform: scale(1.02);
+    border-color: rgba(255, 255, 255, 0.12);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.participant-tile.speaking {
+    border-color: var(--online);
+    box-shadow: 0 0 0 3px var(--accent-green-glow), 0 0 16px var(--accent-green-glow), 0 4px 24px rgba(0, 0, 0, 0.4);
+    animation: speaking-pulse 1.8s ease-in-out infinite;
+}
+
+.participant-tile video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    /* Subtle zoom to avoid black borders from webcam aspect ratios */
+    transform: scale(1.01);
+}
+
+.participant-tile video.screen-share {
+    object-fit: contain;
+    background: #0a0a0c;
+    transform: none;
+}
+
+/* Mirror local camera feed (feels natural like a mirror) */
+.participant-tile.local-camera video { transform: scaleX(-1); }
+
+.tile-avatar {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.85);
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    /* Subtle noise texture overlay for visual richness */
+    position: relative;
+}
+
+.tile-avatar::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06) 0%, transparent 60%);
+    pointer-events: none;
+}
+
+.tile-name {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 14px;
+    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.7) 100%);
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.95);
+    letter-spacing: 0.01em;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* Small "sharing screen" or "camera" indicator next to name */
+.tile-name .tile-source-badge {
+    font-size: 10px;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 1px 6px;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.7);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.tile-muted-badge {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    width: 26px;
+    height: 26px;
+    background: rgba(237, 66, 69, 0.9);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: white;
+    backdrop-filter: blur(4px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+@keyframes speaking-pulse {
+    0%, 100% { box-shadow: 0 0 0 3px var(--accent-green-glow), 0 0 16px var(--accent-green-glow), 0 4px 24px rgba(0, 0, 0, 0.4); }
+    50% { box-shadow: 0 0 0 5px var(--accent-green-glow), 0 0 24px var(--accent-green-glow), 0 4px 24px rgba(0, 0, 0, 0.4); }
+}
+
+@keyframes tile-enter {
+    from { opacity: 0; transform: scale(0.92) translateY(8px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* ── Call Page ──────────────────────────────────────────────────── */
+
+.call-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    /* Deep ambient gradient — signals "you're in a live session" */
+    background:
+        radial-gradient(ellipse at 50% 40%, rgba(88, 101, 242, 0.04) 0%, transparent 60%),
+        radial-gradient(ellipse at center, #16161a 0%, #0e0e12 100%);
+    animation: call-page-enter 0.3s ease;
+}
+
+@keyframes call-page-enter {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.call-top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 20px;
+    flex-shrink: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.call-channel-name {
+    font-weight: 600;
+    font-size: 15px;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Subtle live dot next to channel name */
+.call-live-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--online);
+    border-radius: 50%;
+    animation: live-dot-pulse 2s ease-in-out infinite;
+}
+
+@keyframes live-dot-pulse {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-green-glow); }
+    50% { opacity: 0.7; box-shadow: 0 0 0 4px var(--accent-green-glow); }
+}
+
+.call-participant-count {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 3px 12px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.call-timer {
+    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    font-size: 13px;
+    font-family: 'IBM Plex Mono', monospace;
+    letter-spacing: 0.02em;
+}
+
+.call-layout-toggle {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: 8px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    transition: all var(--transition-fast);
+}
+.call-layout-toggle:hover {
+    color: var(--text-primary);
+    border-color: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.call-grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 12px;
+    padding: 20px;
+    align-content: center;
+    overflow-y: auto;
+}
+
+/* Single participant: constrain width so it doesn't stretch full-screen */
+.call-grid.single-participant {
+    justify-content: center;
+}
+.call-grid.single-participant .participant-tile {
+    max-width: 640px;
+}
+
+/* Two participants: equal side-by-side */
+.call-grid.two-participants {
+    grid-template-columns: 1fr 1fr;
+}
+
+/* Focus layout */
+.call-grid.focus {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.call-grid.focus .participant-tile.focused {
+    flex: 1;
+    min-height: 0;
+    aspect-ratio: auto;
+}
+
+.call-thumbnails {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    padding: 4px 0;
+    flex-shrink: 0;
+    /* Subtle fade at edges for scroll indication */
+    mask-image: linear-gradient(90deg, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
+}
+
+.call-thumbnails .participant-tile {
+    width: 160px;
+    min-width: 160px;
+    height: 100px;
+    flex-shrink: 0;
+    border-radius: 10px;
+    aspect-ratio: auto;
+}
+
+/* Control strip — frosted glass floating bar */
+.call-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    flex-shrink: 0;
+}
+
+.call-controls-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-radius: 20px;
+    padding: 8px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.call-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    transition: all 0.15s ease;
+    position: relative;
+}
+
+.call-btn:hover {
+    background: rgba(255, 255, 255, 0.14);
+    transform: scale(1.06);
+}
+
+.call-btn:active { transform: scale(0.96); }
+
+.call-btn.active {
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.call-btn.muted {
+    background: rgba(237, 66, 69, 0.2);
+    color: var(--danger);
+}
+.call-btn.muted:hover { background: rgba(237, 66, 69, 0.3); }
+
+/* Disconnect button — wider red pill */
+.call-btn.disconnect {
+    background: var(--danger);
+    color: white;
+    border-radius: 24px;
+    width: auto;
+    padding: 0 20px;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 500;
+}
+.call-btn.disconnect:hover {
+    background: var(--danger-hover);
+    box-shadow: 0 0 16px var(--danger-glow);
+}
+
+/* Separator between control groups */
+.call-controls-separator {
+    width: 1px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.08);
+    margin: 0 4px;
+}
+
+/* Tooltip on hover */
+.call-btn[title]::after {
+    content: attr(title);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    font-size: 11px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border);
+}
+.call-btn[title]:hover::after { opacity: 1; }
+
+@media (max-width: 900px) {
+    .call-btn { width: 52px; height: 52px; }
+    .call-btn[title]::after { display: none; } /* No tooltips on mobile */
+    .call-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; padding: 8px; }
+    .call-controls-bar { padding: 6px 10px; }
+    .call-top-bar { padding: 10px 12px; }
+}
+
 /* ── Reduced Motion ──────────────────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {

From e4e1e1fcc6542e5f7c39f16ea61dd5cbabbf8788 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 03:47:09 -0700
Subject: [PATCH 04/18] feat: speaking detection with AudioContext analysers

SpeakingDetector polls AnalyserNodes at 60ms intervals.
Participant tiles show green pulse glow when peer is speaking.
Local mic also analysed for self-feedback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/app.rs                  |   5 +
 crates/web/src/components/call_page.rs |   9 +-
 crates/web/src/voice.rs                | 207 ++++++++++++++++++++++++-
 3 files changed, 212 insertions(+), 9 deletions(-)

diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index e641bd69..539de80a 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -76,6 +76,7 @@ pub fn App() -> impl IntoView {
     let voice_signal_handle = handle.clone();
     let voice_channel_for_signal = app_state.voice.voice_channel;
     let set_remote_streams = write.voice.set_remote_video_streams;
+    let set_speaking = write.voice.set_speaking_peers;
     let voice_manager: VoiceManagerHandle = SendWrapper::new(Rc::new(RefCell::new(
         VoiceManager::new(
             local_peer_id,
@@ -99,6 +100,9 @@ pub fn App() -> impl IntoView {
                     }
                 });
             },
+            move |peers: std::collections::HashSet<String>| {
+                set_speaking.set(peers);
+            },
         ),
     )));
 
@@ -247,6 +251,7 @@ pub fn App() -> impl IntoView {
         write.voice.set_voice_deafened.set(false);
         write.voice.set_video_source.set(None);
         write.voice.set_remote_video_streams.update(|m| m.clear());
+        write.voice.set_speaking_peers.set(std::collections::HashSet::new());
         write.ui.set_show_call_page.set(false);
         write.ui.set_call_layout.set(crate::state::CallLayout::default());
     };
diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
index 8d21afa3..4c30b06b 100644
--- a/crates/web/src/components/call_page.rs
+++ b/crates/web/src/components/call_page.rs
@@ -295,7 +295,8 @@ pub fn CallPage(
                     // Render the focused tile.
                     let (f_name, f_stream, f_is_muted, f_is_speaking, _f_is_local, f_is_local_cam) =
                         if focused_pid == local_peer_id {
-                            (local_name.clone(), None, muted, false, true, video_source == Some(VideoSource::Camera))
+                            let local_spk = speaking.contains(&local_peer_id);
+                            (local_name.clone(), None, muted, local_spk, true, video_source == Some(VideoSource::Camera))
                         } else {
                             let name = handle.peer_display_name(&focused_pid);
                             let stream = remote_streams.get(&focused_pid).cloned();
@@ -322,11 +323,12 @@ pub fn CallPage(
 
                     // Local in thumbnails if not focused.
                     if fpid != local_peer_id {
+                        let local_spk_thumb = speaking.contains(&local_peer_id);
                         thumb_views.push(render_tile(
                             local_peer_id.clone(),
                             local_name.clone(),
                             None,
-                            false,
+                            local_spk_thumb,
                             muted,
                             false,
                             video_source == Some(VideoSource::Camera),
@@ -367,11 +369,12 @@ pub fn CallPage(
                     }
                 } else {
                     // Grid layout — local user tile.
+                    let local_spk_grid = speaking.contains(&local_peer_id);
                     tiles.push(render_tile(
                         local_peer_id.clone(),
                         local_name.clone(),
                         None,
-                        false,
+                        local_spk_grid,
                         muted,
                         false,
                         video_source == Some(VideoSource::Camera),
diff --git a/crates/web/src/voice.rs b/crates/web/src/voice.rs
index 345a4f1e..7cf057c8 100644
--- a/crates/web/src/voice.rs
+++ b/crates/web/src/voice.rs
@@ -15,19 +15,157 @@
 //! the peer with the lower ID is "polite" and will rollback its own offer
 //! when a collision is detected.
 
-use std::cell::Cell;
-use std::collections::HashMap;
+use std::cell::{Cell, RefCell};
+use std::collections::{HashMap, HashSet};
 use std::rc::Rc;
 
 use wasm_bindgen::closure::Closure;
 use wasm_bindgen::JsCast;
 use web_sys::{
-    MediaStream, RtcConfiguration, RtcIceServer, RtcPeerConnection, RtcPeerConnectionIceEvent,
-    RtcRtpSender, RtcSdpType, RtcSessionDescriptionInit, RtcTrackEvent,
+    AnalyserNode, AudioContext, MediaStream, MediaStreamAudioSourceNode, RtcConfiguration,
+    RtcIceServer, RtcPeerConnection, RtcPeerConnectionIceEvent, RtcRtpSender, RtcSdpType,
+    RtcSessionDescriptionInit, RtcTrackEvent,
 };
 
 use crate::state::VideoSource;
 
+/// Callback invoked whenever the set of currently-speaking peer IDs changes.
+type SpeakingCallback = Rc<dyn Fn(HashSet<String>)>;
+
+/// Analyses audio volume on `AnalyserNode`s to detect which peers are speaking.
+///
+/// Each peer (including the local user) has an `AnalyserNode` fed by their
+/// `MediaStream`. A `setInterval` timer polls all analysers at ~60 ms and
+/// calls `on_speaking_change` with the set of peer IDs whose average
+/// frequency-domain amplitude exceeds a threshold.
+pub struct SpeakingDetector {
+    audio_context: AudioContext,
+    /// Analysers keyed by peer ID. Shared with the polling closure via `Rc<RefCell>`.
+    analysers: Rc<RefCell<HashMap<String, AnalyserNode>>>,
+    /// Source nodes kept alive so the browser does not garbage-collect them.
+    #[allow(dead_code)]
+    sources: HashMap<String, MediaStreamAudioSourceNode>,
+    on_speaking_change: SpeakingCallback,
+    interval_id: Option<i32>,
+}
+
+impl SpeakingDetector {
+    /// Create a new `SpeakingDetector` with the given change callback.
+    ///
+    /// The `AudioContext` is created immediately (caller must ensure a user
+    /// gesture has already occurred so the browser allows it).
+    pub fn new(on_change: impl Fn(HashSet<String>) + 'static) -> Result<Self, String> {
+        let audio_context = AudioContext::new().map_err(|e| format!("AudioContext::new failed: {e:?}"))?;
+        // Resume the context in case it was created in a suspended state.
+        let _ = audio_context.resume();
+        Ok(Self {
+            audio_context,
+            analysers: Rc::new(RefCell::new(HashMap::new())),
+            sources: HashMap::new(),
+            on_speaking_change: Rc::new(on_change),
+            interval_id: None,
+        })
+    }
+
+    /// Connect a peer's `MediaStream` to an `AnalyserNode` for volume monitoring.
+    pub fn add_stream(&mut self, peer_id: &str, stream: &MediaStream) {
+        // Create a source node from the stream.
+        let source = match self.audio_context.create_media_stream_source(stream) {
+            Ok(s) => s,
+            Err(e) => {
+                tracing::warn!("SpeakingDetector: create_media_stream_source failed: {e:?}");
+                return;
+            }
+        };
+
+        // Create an analyser node.
+        let analyser = match self.audio_context.create_analyser() {
+            Ok(a) => a,
+            Err(e) => {
+                tracing::warn!("SpeakingDetector: create_analyser failed: {e:?}");
+                return;
+            }
+        };
+        analyser.set_fft_size(256);
+
+        // Connect source -> analyser (no output needed; we poll manually).
+        if let Err(e) = source.connect_with_audio_node(&analyser) {
+            tracing::warn!("SpeakingDetector: connect failed: {e:?}");
+            return;
+        }
+
+        self.analysers.borrow_mut().insert(peer_id.to_string(), analyser);
+        self.sources.insert(peer_id.to_string(), source);
+    }
+
+    /// Remove a peer's analyser (e.g. when they disconnect).
+    pub fn remove_peer(&mut self, peer_id: &str) {
+        self.analysers.borrow_mut().remove(peer_id);
+        self.sources.remove(peer_id);
+    }
+
+    /// Start polling all analysers every ~60 ms.
+    ///
+    /// Each poll computes the average byte-frequency amplitude for every peer
+    /// and fires `on_speaking_change` with the set of peers above threshold.
+    pub fn start_polling(&mut self) {
+        if self.interval_id.is_some() {
+            return; // already running
+        }
+
+        let analysers = self.analysers.clone();
+        let on_change = self.on_speaking_change.clone();
+        let prev_speaking: Rc<RefCell<HashSet<String>>> = Rc::new(RefCell::new(HashSet::new()));
+
+        let closure = Closure::wrap(Box::new(move || {
+            let map = analysers.borrow();
+            let mut speaking = HashSet::new();
+            for (peer_id, analyser) in map.iter() {
+                let buf_len = analyser.frequency_bin_count() as usize;
+                if buf_len == 0 {
+                    continue;
+                }
+                let mut data = vec![0u8; buf_len];
+                analyser.get_byte_frequency_data(&mut data);
+                let avg: f64 = data.iter().map(|&b| b as f64).sum::<f64>() / buf_len as f64;
+                if avg > 25.0 {
+                    speaking.insert(peer_id.clone());
+                }
+            }
+            // Only fire the callback when the speaking set actually changes.
+            let mut prev = prev_speaking.borrow_mut();
+            if *prev != speaking {
+                *prev = speaking.clone();
+                on_change(speaking);
+            }
+        }) as Box<dyn FnMut()>);
+
+        let window = web_sys::window().unwrap();
+        let id = window
+            .set_interval_with_callback_and_timeout_and_arguments_0(
+                closure.as_ref().unchecked_ref(),
+                60,
+            )
+            .unwrap();
+        // Intentional leak: the closure must outlive the interval.
+        closure.forget();
+
+        self.interval_id = Some(id);
+    }
+
+    /// Stop polling and release resources.
+    pub fn destroy(&mut self) {
+        if let Some(id) = self.interval_id.take() {
+            if let Some(window) = web_sys::window() {
+                window.clear_interval_with_handle(id);
+            }
+        }
+        let _ = self.audio_context.close();
+        self.analysers.borrow_mut().clear();
+        self.sources.clear();
+    }
+}
+
 /// Callback for sending voice signaling data back through the network.
 ///
 /// Arguments: `(target_peer_id, signal_type, payload)`
@@ -75,10 +213,12 @@ pub struct VoiceManager {
     /// RTP senders for the video track, keyed by remote peer ID.
     /// Stored so we can call `remove_track` later.
     video_senders: HashMap<String, RtcRtpSender>,
+    /// Audio volume analyser for speaking detection.
+    speaking_detector: Option<SpeakingDetector>,
 }
 
 impl VoiceManager {
-    /// Create a new `VoiceManager` with a signaling callback and video track callback.
+    /// Create a new `VoiceManager` with signaling, video track, and speaking callbacks.
     ///
     /// `local_peer_id` is this node's peer ID string, used to determine
     /// polite vs impolite role during offer collisions.
@@ -88,11 +228,21 @@ impl VoiceManager {
     ///
     /// `on_video_track` is invoked with `(remote_peer_id, Some(stream))` when
     /// a remote video track arrives, and `(remote_peer_id, None)` when it ends.
+    ///
+    /// `on_speaking_change` is invoked with the set of currently-speaking peer
+    /// IDs every ~60 ms while audio is active.
     pub fn new(
         local_peer_id: String,
         on_signal: impl Fn(&str, &str, &str) + 'static,
         on_video_track: impl Fn(&str, Option<MediaStream>) + 'static,
+        on_speaking_change: impl Fn(HashSet<String>) + 'static,
     ) -> Self {
+        // Create the detector eagerly — the caller is inside a user-gesture
+        // handler (voice join click) so AudioContext creation is allowed.
+        let mut detector = SpeakingDetector::new(on_speaking_change).ok();
+        if let Some(ref mut d) = detector {
+            d.start_polling();
+        }
         Self {
             local_peer_id,
             connections: HashMap::new(),
@@ -102,11 +252,18 @@ impl VoiceManager {
             video_stream: None,
             video_source: None,
             video_senders: HashMap::new(),
+            speaking_detector: detector,
         }
     }
 
     /// Set the local microphone stream (acquired externally to avoid RefCell across await).
+    ///
+    /// Also adds the stream to the speaking detector so the local user's
+    /// volume is analysed alongside remote peers.
     pub fn set_local_stream(&mut self, stream: MediaStream) {
+        if let Some(ref mut detector) = self.speaking_detector {
+            detector.add_stream(&self.local_peer_id, &stream);
+        }
         self.local_stream = Some(stream);
     }
 
@@ -193,13 +350,25 @@ impl VoiceManager {
 
     /// Set up the `ontrack` handler to play remote audio and forward video.
     ///
-    /// Audio tracks create `<audio>` elements appended to the document body.
+    /// Audio tracks create `<audio>` elements appended to the document body
+    /// and are added to the speaking detector for volume analysis.
     /// Video tracks are forwarded to the `on_video_track` callback with a
     /// listener for `ended` that fires `on_video_track(peer_id, None)`.
     fn setup_track_handler(&self, pc: &RtcPeerConnection, remote_peer: &str) {
         let peer_id = remote_peer.to_string();
         let on_video = self.on_video_track.clone();
 
+        // Share the detector's analysers map and audio context with the closure
+        // so it can register incoming remote audio streams for speaking detection.
+        let detector_analysers = self
+            .speaking_detector
+            .as_ref()
+            .map(|d| d.analysers.clone());
+        let detector_ctx = self
+            .speaking_detector
+            .as_ref()
+            .map(|d| d.audio_context.clone());
+
         let on_track = Closure::wrap(Box::new(move |ev: RtcTrackEvent| {
             let track: web_sys::MediaStreamTrack = ev.track();
             let streams = ev.streams();
@@ -209,6 +378,25 @@ impl VoiceManager {
             let stream: MediaStream = streams.get(0).unchecked_into();
 
             if track.kind() == "audio" {
+                // Register the remote audio stream with the speaking detector.
+                if let (Some(ref ctx), Some(ref analysers)) =
+                    (&detector_ctx, &detector_analysers)
+                {
+                    if let Ok(source) = ctx.create_media_stream_source(&stream) {
+                        if let Ok(analyser) = ctx.create_analyser() {
+                            analyser.set_fft_size(256);
+                            if source.connect_with_audio_node(&analyser).is_ok() {
+                                analysers
+                                    .borrow_mut()
+                                    .insert(peer_id.clone(), analyser);
+                                // Source node must stay alive — leak it so the
+                                // browser keeps the audio graph connected.
+                                std::mem::forget(source);
+                            }
+                        }
+                    }
+                }
+
                 // Create <audio> element for remote audio playback.
                 if let Some(window) = web_sys::window() {
                     if let Some(document) = window.document() {
@@ -549,6 +737,9 @@ impl VoiceManager {
     /// Close the connection to a specific remote peer.
     pub fn close_connection(&mut self, remote_peer: &str) {
         self.video_senders.remove(remote_peer);
+        if let Some(ref mut detector) = self.speaking_detector {
+            detector.remove_peer(remote_peer);
+        }
         (self.on_video_track)(remote_peer, None);
         if let Some(state) = self.connections.remove(remote_peer) {
             state.pc.close();
@@ -558,6 +749,10 @@ impl VoiceManager {
     /// Close all connections, stop video sharing, and release the microphone.
     pub fn close_all(&mut self) {
         self.stop_video_share();
+        if let Some(ref mut detector) = self.speaking_detector {
+            detector.destroy();
+        }
+        self.speaking_detector = None;
         for (_, state) in self.connections.drain() {
             state.pc.close();
         }

From b05d8da0b45322b54167d0cc265362f9e2c37bc4 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 03:50:36 -0700
Subject: [PATCH 05/18] fix: resolve clippy warnings in web crate

- Remove unused `wasm_bindgen::JsCast` import from participant_tile.rs
- Remove stale `roles::*` re-export from components/mod.rs (server_settings module is not declared)
- Prefix unused `roles` variable with `_` in app.rs
- Add `#[allow(dead_code)]` to `RoleManager` component props (Leptos codegen artifact)
- Add `#[allow(dead_code)]` to `UiState::show_server_settings` and `UiState::settings_tab` fields
- Add `#[allow(clippy::too_many_arguments)]` to `render_tile` in call_page.rs
- Replace `let _ = state.pc.remove_track(...)` with a bare call (let_unit_value)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 crates/web/src/app.rs                         | 30 ++++++++--------
 crates/web/src/components/call_page.rs        | 15 ++++----
 crates/web/src/components/mod.rs              |  1 -
 crates/web/src/components/participant_tile.rs |  2 --
 crates/web/src/components/roles.rs            |  1 +
 crates/web/src/state.rs                       |  9 +++--
 crates/web/src/voice.rs                       | 34 +++++++------------
 7 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index 539de80a..a2bf7848 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -77,8 +77,8 @@ pub fn App() -> impl IntoView {
     let voice_channel_for_signal = app_state.voice.voice_channel;
     let set_remote_streams = write.voice.set_remote_video_streams;
     let set_speaking = write.voice.set_speaking_peers;
-    let voice_manager: VoiceManagerHandle = SendWrapper::new(Rc::new(RefCell::new(
-        VoiceManager::new(
+    let voice_manager: VoiceManagerHandle =
+        SendWrapper::new(Rc::new(RefCell::new(VoiceManager::new(
             local_peer_id,
             move |target_peer: &str, signal_type: &str, payload: &str| {
                 let ch_id = voice_channel_for_signal.get_untracked().unwrap_or_default();
@@ -103,8 +103,7 @@ pub fn App() -> impl IntoView {
             move |peers: std::collections::HashSet<String>| {
                 set_speaking.set(peers);
             },
-        ),
-    )));
+        ))));
 
     provide_context(voice_manager.clone());
 
@@ -127,18 +126,13 @@ pub fn App() -> impl IntoView {
             move |ev: web_sys::KeyboardEvent| {
                 if (ev.ctrl_key() || ev.meta_key()) && ev.key() == "k" {
                     ev.prevent_default();
-                    write_for_palette
-                        .ui
-                        .set_show_palette
-                        .update(|v| *v = !*v);
+                    write_for_palette.ui.set_show_palette.update(|v| *v = !*v);
                 }
             },
         );
         if let Some(window) = web_sys::window() {
-            let _ = window.add_event_listener_with_callback(
-                "keydown",
-                closure.as_ref().unchecked_ref(),
-            );
+            let _ = window
+                .add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref());
         }
         closure.forget();
     }
@@ -251,9 +245,15 @@ pub fn App() -> impl IntoView {
         write.voice.set_voice_deafened.set(false);
         write.voice.set_video_source.set(None);
         write.voice.set_remote_video_streams.update(|m| m.clear());
-        write.voice.set_speaking_peers.set(std::collections::HashSet::new());
+        write
+            .voice
+            .set_speaking_peers
+            .set(std::collections::HashSet::new());
         write.ui.set_show_call_page.set(false);
-        write.ui.set_call_layout.set(crate::state::CallLayout::default());
+        write
+            .ui
+            .set_call_layout
+            .set(crate::state::CallLayout::default());
     };
 
     // Welcome screen callback that refreshes all signals.
@@ -283,7 +283,7 @@ pub fn App() -> impl IntoView {
     let display_name = app_state.server.display_name;
     let peer_count = app_state.network.peer_count;
     let peer_id = app_state.network.peer_id;
-    let roles = app_state.server.roles;
+    let _roles = app_state.server.roles;
     let replying_to = app_state.chat.replying_to;
     let editing = app_state.chat.editing;
     let channel_views = app_state.chat.channel_views;
diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
index 4c30b06b..cb16a9b9 100644
--- a/crates/web/src/components/call_page.rs
+++ b/crates/web/src/components/call_page.rs
@@ -17,6 +17,7 @@ use crate::state::{AppState, AppWriteSignals, CallLayout, VideoSource};
 ///
 /// Because Leptos `#[prop(optional)]` expects the inner `T` when passing a
 /// value (not `Option<T>`), we branch on whether a stream exists.
+#[allow(clippy::too_many_arguments)]
 fn render_tile(
     peer_id: String,
     display_name: String,
@@ -139,10 +140,9 @@ pub fn CallPage(
                 vm2.borrow_mut().start_camera(stream);
                 write2.voice.set_video_source.set(Some(VideoSource::Camera));
             });
-        let on_error =
-            wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
-                tracing::error!("Camera access denied");
-            });
+        let on_error = wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
+            tracing::error!("Camera access denied");
+        });
         let _ = promise.then2(&on_success, &on_error);
         on_success.forget();
         on_error.forget();
@@ -187,10 +187,9 @@ pub fn CallPage(
                 vm2.borrow_mut().start_screen_share(stream);
                 write2.voice.set_video_source.set(Some(VideoSource::Screen));
             });
-        let on_error =
-            wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
-                tracing::error!("Screen share denied or cancelled");
-            });
+        let on_error = wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
+            tracing::error!("Screen share denied or cancelled");
+        });
         let _ = promise.then2(&on_success, &on_error);
         on_success.forget();
         on_error.forget();
diff --git a/crates/web/src/components/mod.rs b/crates/web/src/components/mod.rs
index 3d0150cd..44f18f48 100644
--- a/crates/web/src/components/mod.rs
+++ b/crates/web/src/components/mod.rs
@@ -29,7 +29,6 @@ pub use member_list::*;
 pub use message::*;
 pub use participant_tile::*;
 pub use pinned::*;
-pub use roles::*;
 pub use server_list::*;
 pub use settings::*;
 pub use sidebar::*;
diff --git a/crates/web/src/components/participant_tile.rs b/crates/web/src/components/participant_tile.rs
index afcdc3d1..e56e9ead 100644
--- a/crates/web/src/components/participant_tile.rs
+++ b/crates/web/src/components/participant_tile.rs
@@ -6,8 +6,6 @@
 
 use leptos::prelude::*;
 use send_wrapper::SendWrapper;
-use wasm_bindgen::JsCast;
-
 use crate::icons;
 
 /// Derive a unique gradient from a peer ID for the avatar background.
diff --git a/crates/web/src/components/roles.rs b/crates/web/src/components/roles.rs
index a093fa28..fdbed750 100644
--- a/crates/web/src/components/roles.rs
+++ b/crates/web/src/components/roles.rs
@@ -22,6 +22,7 @@ type RoleEntry = (String, String, Vec<String>);
 ///
 /// Only the server owner sees management controls (create, delete,
 /// permission toggles, assign). Non-owners see a read-only list.
+#[allow(dead_code)]
 #[component]
 pub fn RoleManager(
     peer_id: ReadSignal<String>,
diff --git a/crates/web/src/state.rs b/crates/web/src/state.rs
index acf138f6..b70df188 100644
--- a/crates/web/src/state.rs
+++ b/crates/web/src/state.rs
@@ -74,6 +74,7 @@ pub struct ServerState {
 #[derive(Clone, Copy)]
 pub struct UiState {
     pub show_settings: ReadSignal<bool>,
+    #[allow(dead_code)]
     pub show_server_settings: ReadSignal<bool>,
     pub show_sidebar: ReadSignal<bool>,
     pub show_members: ReadSignal<bool>,
@@ -82,6 +83,7 @@ pub struct UiState {
     pub show_call_page: ReadSignal<bool>,
     pub show_palette: ReadSignal<bool>,
     pub call_layout: ReadSignal<CallLayout>,
+    #[allow(dead_code)]
     pub settings_tab: ReadSignal<SettingsTab>,
 }
 
@@ -217,9 +219,10 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
     let (voice_channel_name, set_voice_channel_name) = signal(String::new());
     let (video_source, set_video_source) = signal(Option::<VideoSource>::None);
     let (speaking_peers, set_speaking_peers) = signal(HashSet::<String>::new());
-    let (remote_video_streams, set_remote_video_streams) = signal(
-        HashMap::<String, send_wrapper::SendWrapper<web_sys::MediaStream>>::new(),
-    );
+    let (remote_video_streams, set_remote_video_streams) = signal(HashMap::<
+        String,
+        send_wrapper::SendWrapper<web_sys::MediaStream>,
+    >::new());
 
     let app_state = AppState {
         chat: ChatState {
diff --git a/crates/web/src/voice.rs b/crates/web/src/voice.rs
index 7cf057c8..9c70cef1 100644
--- a/crates/web/src/voice.rs
+++ b/crates/web/src/voice.rs
@@ -55,7 +55,8 @@ impl SpeakingDetector {
     /// The `AudioContext` is created immediately (caller must ensure a user
     /// gesture has already occurred so the browser allows it).
     pub fn new(on_change: impl Fn(HashSet<String>) + 'static) -> Result<Self, String> {
-        let audio_context = AudioContext::new().map_err(|e| format!("AudioContext::new failed: {e:?}"))?;
+        let audio_context =
+            AudioContext::new().map_err(|e| format!("AudioContext::new failed: {e:?}"))?;
         // Resume the context in case it was created in a suspended state.
         let _ = audio_context.resume();
         Ok(Self {
@@ -94,7 +95,9 @@ impl SpeakingDetector {
             return;
         }
 
-        self.analysers.borrow_mut().insert(peer_id.to_string(), analyser);
+        self.analysers
+            .borrow_mut()
+            .insert(peer_id.to_string(), analyser);
         self.sources.insert(peer_id.to_string(), source);
     }
 
@@ -360,10 +363,7 @@ impl VoiceManager {
 
         // Share the detector's analysers map and audio context with the closure
         // so it can register incoming remote audio streams for speaking detection.
-        let detector_analysers = self
-            .speaking_detector
-            .as_ref()
-            .map(|d| d.analysers.clone());
+        let detector_analysers = self.speaking_detector.as_ref().map(|d| d.analysers.clone());
         let detector_ctx = self
             .speaking_detector
             .as_ref()
@@ -379,16 +379,12 @@ impl VoiceManager {
 
             if track.kind() == "audio" {
                 // Register the remote audio stream with the speaking detector.
-                if let (Some(ref ctx), Some(ref analysers)) =
-                    (&detector_ctx, &detector_analysers)
-                {
+                if let (Some(ref ctx), Some(ref analysers)) = (&detector_ctx, &detector_analysers) {
                     if let Ok(source) = ctx.create_media_stream_source(&stream) {
                         if let Ok(analyser) = ctx.create_analyser() {
                             analyser.set_fft_size(256);
                             if source.connect_with_audio_node(&analyser).is_ok() {
-                                analysers
-                                    .borrow_mut()
-                                    .insert(peer_id.clone(), analyser);
+                                analysers.borrow_mut().insert(peer_id.clone(), analyser);
                                 // Source node must stay alive — leak it so the
                                 // browser keeps the audio graph connected.
                                 std::mem::forget(source);
@@ -456,8 +452,8 @@ impl VoiceManager {
             wasm_bindgen_futures::spawn_local(async move {
                 flag.set(true);
 
-                let offer_result = wasm_bindgen_futures::JsFuture::from(pc_inner.create_offer())
-                    .await;
+                let offer_result =
+                    wasm_bindgen_futures::JsFuture::from(pc_inner.create_offer()).await;
                 let Ok(offer) = offer_result else {
                     flag.set(false);
                     return;
@@ -517,10 +513,7 @@ impl VoiceManager {
 
         self.connections.insert(
             remote_peer.to_string(),
-            PeerConnectionState {
-                pc,
-                making_offer,
-            },
+            PeerConnectionState { pc, making_offer },
         );
 
         let state = self.connections.get(remote_peer).unwrap();
@@ -592,8 +585,7 @@ impl VoiceManager {
             }
             // We are polite — rollback our pending local description.
             let rollback = RtcSessionDescriptionInit::new(RtcSdpType::Rollback);
-            let _ = wasm_bindgen_futures::JsFuture::from(pc.set_local_description(&rollback))
-                .await;
+            let _ = wasm_bindgen_futures::JsFuture::from(pc.set_local_description(&rollback)).await;
         }
 
         // Set remote description (the offer).
@@ -705,7 +697,7 @@ impl VoiceManager {
         let senders: Vec<(String, RtcRtpSender)> = self.video_senders.drain().collect();
         for (peer_id, sender) in senders {
             if let Some(state) = self.connections.get(&peer_id) {
-                let _ = state.pc.remove_track(&sender);
+                state.pc.remove_track(&sender);
             }
         }
         if let Some(ref stream) = self.video_stream {

From fa25fcd160e44c26ca77d50f8096901a0eaadc0a Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 04:01:07 -0700
Subject: [PATCH 06/18] Fix local video not displaying on own tile in call page

The local user's camera/screen share stream was passed to VoiceManager
for remote peers but never shown on their own participant tile. Add a
local_video_stream signal inside CallPage, set it when camera or screen
share starts, clear it on all stop paths, and pass it to the local
tile's render_tile calls. Also add a track.onended listener for when
the browser's "Stop sharing" button is used.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/components/call_page.rs | 34 +++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
index cb16a9b9..9c7096ca 100644
--- a/crates/web/src/components/call_page.rs
+++ b/crates/web/src/components/call_page.rs
@@ -87,6 +87,10 @@ pub fn CallPage(
     let handle = use_context::<WebClientHandle>().unwrap();
     let vm = use_context::<VoiceManagerHandle>().unwrap();
 
+    // Local video stream signal — tracks the stream to display on the local tile.
+    let (local_video_stream, set_local_video_stream) =
+        signal(Option::<SendWrapper<web_sys::MediaStream>>::None);
+
     // Duration timer — increments every second.
     let (duration, set_duration) = signal(0u32);
     set_interval(
@@ -107,6 +111,7 @@ pub fn CallPage(
             // Toggle off — stop camera.
             vm_camera.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
+            set_local_video_stream.set(None);
             return;
         }
 
@@ -114,6 +119,7 @@ pub fn CallPage(
         if current_source.is_some() {
             vm_camera.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
+            set_local_video_stream.set(None);
         }
 
         // MUST call getUserMedia synchronously in click handler for gesture.
@@ -137,8 +143,10 @@ pub fn CallPage(
             wasm_bindgen::closure::Closure::once(move |stream: wasm_bindgen::JsValue| {
                 use wasm_bindgen::JsCast;
                 let stream: web_sys::MediaStream = stream.unchecked_into();
+                let stream_for_signal = SendWrapper::new(stream.clone());
                 vm2.borrow_mut().start_camera(stream);
                 write2.voice.set_video_source.set(Some(VideoSource::Camera));
+                set_local_video_stream.set(Some(stream_for_signal));
             });
         let on_error = wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
             tracing::error!("Camera access denied");
@@ -157,6 +165,7 @@ pub fn CallPage(
             // Toggle off — stop screen share.
             vm_screen.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
+            set_local_video_stream.set(None);
             return;
         }
 
@@ -164,6 +173,7 @@ pub fn CallPage(
         if current_source.is_some() {
             vm_screen.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
+            set_local_video_stream.set(None);
         }
 
         // MUST call getDisplayMedia synchronously in click handler for gesture.
@@ -184,8 +194,23 @@ pub fn CallPage(
             wasm_bindgen::closure::Closure::once(move |stream: wasm_bindgen::JsValue| {
                 use wasm_bindgen::JsCast;
                 let stream: web_sys::MediaStream = stream.unchecked_into();
-                vm2.borrow_mut().start_screen_share(stream);
+                let stream_for_signal = SendWrapper::new(stream.clone());
+                vm2.borrow_mut().start_screen_share(stream.clone());
                 write2.voice.set_video_source.set(Some(VideoSource::Screen));
+                set_local_video_stream.set(Some(stream_for_signal));
+
+                // Listen for the browser's "Stop sharing" chrome button.
+                let tracks = stream.get_video_tracks();
+                let track_val = tracks.get(0);
+                if !track_val.is_undefined() {
+                    let track: web_sys::MediaStreamTrack = track_val.unchecked_into();
+                    let on_ended = wasm_bindgen::closure::Closure::once(move || {
+                        set_local_video_stream.set(None);
+                        write2.voice.set_video_source.set(None);
+                    });
+                    track.set_onended(Some(on_ended.as_ref().unchecked_ref()));
+                    on_ended.forget();
+                }
             });
         let on_error = wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
             tracing::error!("Screen share denied or cancelled");
@@ -198,6 +223,7 @@ pub fn CallPage(
     // Disconnect handler — also clear call page.
     let on_disconnect_click = move |_| {
         write.voice.set_video_source.set(None);
+        set_local_video_stream.set(None);
         write.voice.set_remote_video_streams.update(|m| m.clear());
         write.ui.set_show_call_page.set(false);
         write.ui.set_call_layout.set(CallLayout::default());
@@ -295,7 +321,7 @@ pub fn CallPage(
                     let (f_name, f_stream, f_is_muted, f_is_speaking, _f_is_local, f_is_local_cam) =
                         if focused_pid == local_peer_id {
                             let local_spk = speaking.contains(&local_peer_id);
-                            (local_name.clone(), None, muted, local_spk, true, video_source == Some(VideoSource::Camera))
+                            (local_name.clone(), local_video_stream.get(), muted, local_spk, true, video_source == Some(VideoSource::Camera))
                         } else {
                             let name = handle.peer_display_name(&focused_pid);
                             let stream = remote_streams.get(&focused_pid).cloned();
@@ -326,7 +352,7 @@ pub fn CallPage(
                         thumb_views.push(render_tile(
                             local_peer_id.clone(),
                             local_name.clone(),
-                            None,
+                            local_video_stream.get(),
                             local_spk_thumb,
                             muted,
                             false,
@@ -372,7 +398,7 @@ pub fn CallPage(
                     tiles.push(render_tile(
                         local_peer_id.clone(),
                         local_name.clone(),
-                        None,
+                        local_video_stream.get(),
                         local_spk_grid,
                         muted,
                         false,

From 7e037ba0d78911e60073ba5343b512a1a8ba490f Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 04:04:53 -0700
Subject: [PATCH 07/18] =?UTF-8?q?fix:=20screen=20share=20black=20screen=20?=
 =?UTF-8?q?=E2=80=94=20deref=20SendWrapper=20and=20defer=20play()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two issues fixed:
1. set_src_object received &SendWrapper<MediaStream> instead of
   &MediaStream — explicit deref now ensures correct type
2. play() called before DOM element fully mounted — deferred to
   next microtask via set_timeout(Duration::ZERO)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/components/message.rs          |    6 +-
 crates/web/src/components/participant_tile.rs |   19 +-
 crates/web/src/icons.rs                       |   20 +-
 .../2026-03-25-ux-navigation-improvements.md  |  887 ++++++++++++++
 ...26-03-26-video-screen-sharing-call-page.md | 1083 +++++++++++++++++
 ...03-25-ux-navigation-improvements-design.md |  160 +++
 ...6-03-26-screen-sharing-call-page-design.md |  320 +++++
 project/UX Navigation Improvements.md         |   53 +
 8 files changed, 2528 insertions(+), 20 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-03-25-ux-navigation-improvements.md
 create mode 100644 docs/superpowers/plans/2026-03-26-video-screen-sharing-call-page.md
 create mode 100644 docs/superpowers/specs/2026-03-25-ux-navigation-improvements-design.md
 create mode 100644 docs/superpowers/specs/2026-03-26-screen-sharing-call-page-design.md
 create mode 100644 project/UX Navigation Improvements.md

diff --git a/crates/web/src/components/message.rs b/crates/web/src/components/message.rs
index 578d8f70..c7c34b19 100644
--- a/crates/web/src/components/message.rs
+++ b/crates/web/src/components/message.rs
@@ -323,7 +323,11 @@ pub fn MessageView(
         let elapsed = js_sys::Date::now() - st_time_for_end.get();
         let distance = st_last_for_end.get() - st_start_for_end.get();
         // Dismiss if dragged past 80px OR fast swipe (>200px/s downward).
-        let velocity = if elapsed > 0.0 { distance / elapsed * 1000.0 } else { 0.0 };
+        let velocity = if elapsed > 0.0 {
+            distance / elapsed * 1000.0
+        } else {
+            0.0
+        };
         if drag > 80.0 || velocity > 200.0 {
             set_show_sheet.set(false);
         }
diff --git a/crates/web/src/components/participant_tile.rs b/crates/web/src/components/participant_tile.rs
index e56e9ead..ee741e69 100644
--- a/crates/web/src/components/participant_tile.rs
+++ b/crates/web/src/components/participant_tile.rs
@@ -4,9 +4,9 @@
 //! or a peer-ID-derived gradient avatar. Includes a display name overlay,
 //! speaking glow, and muted badge.
 
+use crate::icons;
 use leptos::prelude::*;
 use send_wrapper::SendWrapper;
-use crate::icons;
 
 /// Derive a unique gradient from a peer ID for the avatar background.
 ///
@@ -59,13 +59,24 @@ pub fn ParticipantTile(
     let video_ref = NodeRef::<leptos::html::Video>::new();
 
     // Bind srcObject when the video ref becomes available.
+    // Use set_timeout(0) to ensure the DOM element is fully mounted
+    // before setting srcObject (fixes black screen on Chrome).
     let stream_for_effect = video_stream.clone();
     Effect::new(move |_| {
         if let Some(el) = video_ref.get() {
             if let Some(ref stream) = stream_for_effect {
-                let media_el: &web_sys::HtmlMediaElement = el.as_ref();
-                media_el.set_src_object(Some(stream));
-                let _ = media_el.play();
+                use wasm_bindgen::JsCast;
+                let media_el: web_sys::HtmlMediaElement = el.unchecked_ref::<web_sys::HtmlMediaElement>().clone();
+                // Explicit deref through SendWrapper to get MediaStream
+                let media_stream: web_sys::MediaStream = (**stream).clone();
+                // Defer to next microtask to ensure DOM is ready
+                leptos::prelude::set_timeout(
+                    move || {
+                        media_el.set_src_object(Some(&media_stream));
+                        let _ = media_el.play();
+                    },
+                    std::time::Duration::ZERO,
+                );
             }
         }
     });
diff --git a/crates/web/src/icons.rs b/crates/web/src/icons.rs
index 5708f0e0..84baf957 100644
--- a/crates/web/src/icons.rs
+++ b/crates/web/src/icons.rs
@@ -162,9 +162,7 @@ pub fn icon_download() -> impl IntoView {
 /// Left arrow icon.
 pub fn icon_arrow_left() -> impl IntoView {
     icon(
-        &format!(
-            r#"<svg {SVG_ATTRS}><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>"#
-        ),
+        &format!(r#"<svg {SVG_ATTRS}><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>"#),
         "icon-arrow-left",
     )
 }
@@ -172,9 +170,7 @@ pub fn icon_arrow_left() -> impl IntoView {
 /// Right arrow icon.
 pub fn icon_arrow_right() -> impl IntoView {
     icon(
-        &format!(
-            r#"<svg {SVG_ATTRS}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>"#
-        ),
+        &format!(r#"<svg {SVG_ATTRS}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>"#),
         "icon-arrow-right",
     )
 }
@@ -182,9 +178,7 @@ pub fn icon_arrow_right() -> impl IntoView {
 /// X / close icon.
 pub fn icon_x() -> impl IntoView {
     icon(
-        &format!(
-            r#"<svg {SVG_ATTRS}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>"#
-        ),
+        &format!(r#"<svg {SVG_ATTRS}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>"#),
         "icon-x",
     )
 }
@@ -192,9 +186,7 @@ pub fn icon_x() -> impl IntoView {
 /// Plus icon (for add actions).
 pub fn icon_plus() -> impl IntoView {
     icon(
-        &format!(
-            r#"<svg {SVG_ATTRS}><path d="M5 12h14"/><path d="M12 5v14"/></svg>"#
-        ),
+        &format!(r#"<svg {SVG_ATTRS}><path d="M5 12h14"/><path d="M12 5v14"/></svg>"#),
         "icon-plus",
     )
 }
@@ -222,9 +214,7 @@ pub fn icon_sun() -> impl IntoView {
 /// Moon / crescent icon (dark theme indicator).
 pub fn icon_moon() -> impl IntoView {
     icon(
-        &format!(
-            r#"<svg {SVG_ATTRS}><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>"#
-        ),
+        &format!(r#"<svg {SVG_ATTRS}><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>"#),
         "icon-moon",
     )
 }
diff --git a/docs/superpowers/plans/2026-03-25-ux-navigation-improvements.md b/docs/superpowers/plans/2026-03-25-ux-navigation-improvements.md
new file mode 100644
index 00000000..f080a60e
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-25-ux-navigation-improvements.md
@@ -0,0 +1,887 @@
+# UX Navigation Improvements Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Fix 6 UX friction points: unify settings into tabs, add confirmation dialogs for destructive actions, add breadcrumb navigation, server context menu with leave-server, quick peer ID copy, and Ctrl+K command palette.
+
+**Architecture:** The settings panel restructure is the core change (merges 3 panels into 1 tabbed component). Confirmation dialog and command palette are new reusable components. Context menu and peer ID copy are small additions to existing components. All changes are in `willow-web` except `leave_server()` added to `willow-client`.
+
+**Tech Stack:** Rust, Leptos 0.7 (CSR), inline SVG icons (existing `icons.rs`), CSS
+
+**Spec:** `docs/superpowers/specs/2026-03-25-ux-navigation-improvements-design.md`
+
+---
+
+## File Map
+
+### New files
+
+| File | Responsibility |
+|------|----------------|
+| `crates/web/src/components/confirm_dialog.rs` | Reusable modal confirmation dialog component |
+| `crates/web/src/components/command_palette.rs` | Ctrl+K search overlay for channels/servers/members |
+| `crates/web/src/components/context_menu.rs` | Positioned popup menu for server right-click/long-press |
+
+### Modified files
+
+| File | Changes |
+|------|---------|
+| `crates/client/src/lib.rs` | Add `leave_server()` method to `ClientHandle` |
+| `crates/web/src/state.rs` | Add `SettingsTab` enum, `settings_tab` and `show_palette` signals; remove `show_server_settings` |
+| `crates/web/src/components/settings.rs` | Rewrite as tabbed panel (Profile/Server/Roles tabs) with breadcrumb |
+| `crates/web/src/components/roles.rs` | Minor: add confirmation dialog for role delete |
+| `crates/web/src/components/sidebar.rs` | Add peer ID copy button in user area; wire confirm dialog for channel delete |
+| `crates/web/src/components/member_list.rs` | Wire confirm dialog for kick |
+| `crates/web/src/components/message.rs` | Wire confirm dialog for message delete |
+| `crates/web/src/components/server_list.rs` | Add context menu (right-click/long-press) |
+| `crates/web/src/components/chat.rs` | Add search icon for mobile command palette trigger |
+| `crates/web/src/components/mod.rs` | Remove `server_settings` module, add new component modules |
+| `crates/web/src/app.rs` | Remove `show_server_settings` logic, add command palette rendering + global keydown, simplify panel routing |
+| `crates/web/src/event_processing.rs` | Remove `show_server_settings` references |
+| `crates/web/src/handlers.rs` | Remove `show_server_settings` references |
+| `crates/web/src/main.rs` | No changes expected |
+| `crates/web/style.css` | Add styles for tabs, confirm dialog, command palette, context menu, copy tooltip |
+| `e2e/helpers.ts` | Update `openServerSettings` to use tab-based navigation |
+
+### Deleted files
+
+| File | Reason |
+|------|--------|
+| `crates/web/src/components/server_settings.rs` | Merged into tabbed `settings.rs` |
+
+---
+
+## Task Ordering
+
+1. **Task 1:** State changes (add SettingsTab enum, signals, remove show_server_settings)
+2. **Task 2:** ConfirmDialog component (standalone, reusable)
+3. **Task 3:** Unified settings panel with tabs + breadcrumb (depends on state changes)
+4. **Task 4:** Wire confirmation dialogs into sidebar, member list, messages, roles
+5. **Task 5:** Add leave_server() to client + server context menu
+6. **Task 6:** Quick peer ID copy in sidebar
+7. **Task 7:** Command palette
+8. **Task 8:** Update E2E helpers and tests
+9. **Task 9:** CSS polish + full verification
+
+---
+
+### Task 1: State changes
+
+**Files:**
+- Modify: `crates/web/src/state.rs`
+
+- [ ] **Step 1: Add SettingsTab enum and update signals**
+
+In `crates/web/src/state.rs`:
+
+Add the enum near the top (after `ChannelViewState`):
+
+```rust
+#[derive(Clone, Copy, PartialEq, Default)]
+pub enum SettingsTab {
+    #[default]
+    Profile,
+    Server,
+    Roles,
+}
+```
+
+In `UiState`, replace `show_server_settings` with `settings_tab` and add `show_palette`:
+
+```rust
+pub struct UiState {
+    pub show_settings: ReadSignal<bool>,
+    pub settings_tab: ReadSignal<SettingsTab>,
+    pub show_sidebar: ReadSignal<bool>,
+    pub show_members: ReadSignal<bool>,
+    pub show_add_server: ReadSignal<bool>,
+    pub show_pinned: ReadSignal<bool>,
+    pub show_palette: ReadSignal<bool>,
+}
+```
+
+In `UiWriteSignals`, make the matching changes:
+
+```rust
+pub struct UiWriteSignals {
+    pub set_show_settings: WriteSignal<bool>,
+    pub set_settings_tab: WriteSignal<SettingsTab>,
+    pub set_show_sidebar: WriteSignal<bool>,
+    pub set_show_members: WriteSignal<bool>,
+    pub set_show_add_server: WriteSignal<bool>,
+    pub set_show_pinned: WriteSignal<bool>,
+    pub set_show_palette: WriteSignal<bool>,
+}
+```
+
+In `create_signals()`, replace the `show_server_settings` signal with the new ones:
+
+```rust
+let (settings_tab, set_settings_tab) = signal(SettingsTab::default());
+let (show_palette, set_show_palette) = signal(false);
+```
+
+Wire them into the `UiState` and `UiWriteSignals` structs in `create_signals()`.
+
+- [ ] **Step 2: Update app.rs to remove show_server_settings references**
+
+In `crates/web/src/app.rs`:
+- Remove the import of `ServerSettingsPanel` from components.
+- Remove the `show_server_settings` panel rendering branch.
+- The panel priority chain becomes: `show_add_server` > `show_settings` > chat.
+- Update the sidebar `on_settings_click` handler to set `settings_tab = Profile`.
+- Update the sidebar `on_server_settings_click` handler to set `settings_tab = Server` and `show_settings = true`.
+- Both handlers should clear `show_add_server`.
+
+- [ ] **Step 3: Update event_processing.rs and handlers.rs**
+
+Remove any references to `set_show_server_settings` in both files. In `refresh_all_signals`, remove the line that sets `show_server_settings`.
+
+- [ ] **Step 4: Verify compilation**
+
+Run: `cargo check -p willow-web`
+
+Expected: May fail because settings.rs and server_settings.rs still exist with old props. That's fine — Task 3 fixes them.
+
+If compilation fails due to the removed signal, temporarily comment out the `ServerSettingsPanel` usage in app.rs and the `server_settings` module in mod.rs. We'll fully replace them in Task 3.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add crates/web/src/state.rs crates/web/src/app.rs crates/web/src/event_processing.rs crates/web/src/handlers.rs
+git commit -m "refactor: add SettingsTab enum, show_palette signal, remove show_server_settings"
+```
+
+---
+
+### Task 2: ConfirmDialog component
+
+**Files:**
+- Create: `crates/web/src/components/confirm_dialog.rs`
+- Modify: `crates/web/src/components/mod.rs`
+- Modify: `crates/web/style.css`
+
+- [ ] **Step 1: Create the component**
+
+Create `crates/web/src/components/confirm_dialog.rs`:
+
+```rust
+use leptos::prelude::*;
+use crate::icons;
+
+/// Reusable confirmation dialog for destructive actions.
+#[component]
+pub fn ConfirmDialog(
+    visible: ReadSignal<bool>,
+    #[prop(into)] title: String,
+    #[prop(into)] message: String,
+    #[prop(into)] confirm_text: String,
+    #[prop(default = false)] danger: bool,
+    on_confirm: Callback<()>,
+    on_cancel: Callback<()>,
+) -> impl IntoView {
+    // Close on Escape key.
+    let on_keydown = move |ev: web_sys::KeyboardEvent| {
+        if ev.key() == "Escape" {
+            on_cancel.run(());
+        }
+    };
+
+    let confirm_class = if danger {
+        "btn btn-danger"
+    } else {
+        "btn btn-primary"
+    };
+
+    view! {
+        {move || {
+            if visible.get() {
+                let title = title.clone();
+                let message = message.clone();
+                let confirm_text = confirm_text.clone();
+                Some(view! {
+                    <div class="confirm-overlay" on:click=move |_| on_cancel.run(()) on:keydown=on_keydown>
+                        <div class="confirm-dialog" on:click=move |ev: web_sys::MouseEvent| ev.stop_propagation()>
+                            <h3>{title}</h3>
+                            <p>{message}</p>
+                            <div class="confirm-actions">
+                                <button class="btn" on:click=move |_| on_cancel.run(())>"Cancel"</button>
+                                <button class=confirm_class on:click=move |_| on_confirm.run(())>{confirm_text}</button>
+                            </div>
+                        </div>
+                    </div>
+                })
+            } else {
+                None
+            }
+        }}
+    }
+}
+```
+
+- [ ] **Step 2: Add module to mod.rs**
+
+In `crates/web/src/components/mod.rs`, add:
+
+```rust
+mod confirm_dialog;
+pub use confirm_dialog::*;
+```
+
+- [ ] **Step 3: Add CSS for confirm dialog**
+
+In `crates/web/style.css`, add:
+
+```css
+/* ── Confirm Dialog ─────────────────────────────────────────────── */
+
+.confirm-overlay {
+    position: fixed;
+    inset: 0;
+    background: var(--overlay-bg);
+    backdrop-filter: var(--backdrop-blur);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fade-in 0.15s ease;
+}
+
+.confirm-dialog {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 24px;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: var(--shadow-lg);
+    animation: scale-in 0.15s ease;
+}
+
+.confirm-dialog h3 {
+    margin-bottom: 8px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.confirm-dialog p {
+    color: var(--text-secondary);
+    font-size: 14px;
+    margin-bottom: 20px;
+    line-height: 1.5;
+}
+
+.confirm-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+```
+
+- [ ] **Step 4: Verify compilation**
+
+Run: `cargo check -p willow-web`
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add crates/web/src/components/confirm_dialog.rs crates/web/src/components/mod.rs crates/web/style.css
+git commit -m "feat: add reusable ConfirmDialog component"
+```
+
+---
+
+### Task 3: Unified settings panel with tabs + breadcrumb
+
+**Files:**
+- Rewrite: `crates/web/src/components/settings.rs`
+- Delete: `crates/web/src/components/server_settings.rs`
+- Modify: `crates/web/src/components/mod.rs`
+- Modify: `crates/web/src/app.rs`
+- Modify: `crates/web/style.css`
+
+- [ ] **Step 1: Rewrite settings.rs as tabbed panel**
+
+Replace `crates/web/src/components/settings.rs` entirely. The new component:
+- Has a breadcrumb header: `← Settings / {tab name}`
+- Has tab buttons (Profile, Server, Roles)
+- Renders the appropriate content based on `settings_tab`
+- Profile tab: current SettingsPanel content (display name, peer ID, save)
+- Server tab: current ServerSettingsPanel content (invite generation, peer ID sharing)
+- Roles tab: renders the existing `<RoleManager>` component
+
+Read the current `settings.rs` and `server_settings.rs` and combine their logic into the new tabbed panel. The `on_server_settings` prop is removed since it's now a tab. The `on_back` prop becomes a close handler (returns to chat).
+
+The component takes:
+```rust
+pub fn SettingsPanel(
+    peer_id: ReadSignal<String>,
+    #[prop(into)] roles: Signal<Vec<RoleEntry>>,
+    on_close: impl Fn(()) + Send + Clone + 'static,
+) -> impl IntoView
+```
+
+It reads `settings_tab` from `use_context::<AppState>()` and writes via `use_context::<AppWriteSignals>()` — wait, `AppWriteSignals` is not provided as context per the spec. Instead, the tab state can be local to the component or passed as a prop. Simplest: read the initial tab from `AppState`, and manage tab switching locally within the component. The `app.rs` handler sets `settings_tab` before opening the panel, and the component reads it once on mount.
+
+Actually, to keep it simple: `SettingsPanel` takes a `default_tab: SettingsTab` prop. The app.rs handler passes the appropriate default when opening.
+
+- [ ] **Step 2: Delete server_settings.rs and update mod.rs**
+
+Delete `crates/web/src/components/server_settings.rs`.
+
+In `crates/web/src/components/mod.rs`:
+- Remove `mod server_settings;` and `pub use server_settings::*;`
+
+- [ ] **Step 3: Update app.rs**
+
+- Remove `ServerSettingsPanel` from imports.
+- The `show_settings` panel branch now renders `<SettingsPanel peer_id=pid roles=roles default_tab=... on_close=... />`.
+- The `default_tab` is read from `app_state.ui.settings_tab.get_untracked()`.
+- Update `on_settings_click` handler: set `settings_tab = Profile`, set `show_settings = true`, clear `show_add_server`.
+- Update `on_server_settings_click` handler: set `settings_tab = Server`, set `show_settings = true`, clear `show_add_server`.
+
+- [ ] **Step 4: Add CSS for tabs**
+
+```css
+/* ── Settings Tabs ──────────────────────────────────────────────── */
+
+.settings-tabs {
+    display: flex;
+    gap: 2px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 16px;
+}
+
+.settings-tab {
+    padding: 10px 16px;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    transition: color var(--transition-fast), border-color var(--transition-fast);
+}
+
+.settings-tab:hover {
+    color: var(--text-secondary);
+}
+
+.settings-tab.active {
+    color: var(--text-primary);
+    border-bottom-color: var(--accent);
+}
+
+.settings-breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px;
+    border-bottom: 1px solid var(--border);
+    font-size: 14px;
+    color: var(--text-muted);
+}
+
+.settings-breadcrumb .back-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    transition: color var(--transition-fast);
+}
+
+.settings-breadcrumb .back-btn:hover { color: var(--text-primary); }
+
+.settings-breadcrumb .separator { color: var(--text-muted); }
+
+.settings-breadcrumb .current { color: var(--text-primary); font-weight: 500; }
+```
+
+- [ ] **Step 5: Verify compilation**
+
+Run: `cargo check -p willow-web`
+
+Expected: Compiles. The `ServerSettingsPanel` is gone, replaced by the tabbed `SettingsPanel`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add -A
+git commit -m "feat: unified settings panel with tabs (Profile/Server/Roles) and breadcrumb
+
+Merges SettingsPanel + ServerSettingsPanel + RoleManager into a single
+tabbed component. Sidebar gear opens Server tab, Settings button opens
+Profile tab. Breadcrumb shows current location."
+```
+
+---
+
+### Task 4: Wire confirmation dialogs
+
+**Files:**
+- Modify: `crates/web/src/components/sidebar.rs` (channel delete)
+- Modify: `crates/web/src/components/member_list.rs` (kick)
+- Modify: `crates/web/src/components/message.rs` (message delete)
+- Modify: `crates/web/src/components/roles.rs` (role delete)
+
+For each site, the pattern is:
+1. Add local signals: `let (show_confirm, set_show_confirm) = signal(false);` and `let (pending_item, set_pending_item) = signal(Option::<String>::None);`
+2. Replace the direct action call with setting these signals.
+3. Render `<ConfirmDialog>` with `on_confirm` performing the actual action.
+
+- [ ] **Step 1: Wire channel delete confirmation in sidebar.rs**
+
+In the channel delete button `on:click`, instead of calling `handle.delete_channel(&name)` directly, set `pending_delete_channel` and `show_confirm_channel` signals. Add a `<ConfirmDialog>` at the bottom of the sidebar view.
+
+- [ ] **Step 2: Wire kick confirmation in member_list.rs**
+
+Same pattern: the "Kick" button sets `pending_kick_peer` and shows the confirm dialog.
+
+- [ ] **Step 3: Wire message delete confirmation in message.rs**
+
+For desktop: the "Delete" dropdown item closes the dropdown, sets pending state, shows confirm dialog.
+For mobile: the "Delete" sheet item closes the sheet first, then shows confirm dialog.
+
+- [ ] **Step 4: Wire role delete confirmation in roles.rs**
+
+The role delete "x" button shows a confirm dialog before calling `handle.delete_role()`.
+
+- [ ] **Step 5: Verify compilation**
+
+Run: `cargo check -p willow-web`
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add crates/web/src/components/
+git commit -m "feat: add confirmation dialogs for channel delete, kick, message delete, role delete"
+```
+
+---
+
+### Task 5: leave_server() + server context menu
+
+**Files:**
+- Modify: `crates/client/src/lib.rs` (add `leave_server()`)
+- Create: `crates/web/src/components/context_menu.rs`
+- Modify: `crates/web/src/components/server_list.rs`
+- Modify: `crates/web/src/components/mod.rs`
+- Modify: `crates/web/style.css`
+
+- [ ] **Step 1: Add leave_server() to ClientHandle**
+
+In `crates/client/src/lib.rs`, add to `impl ClientHandle`:
+
+```rust
+/// Leave a server (local-only — removes from UI and persistence).
+/// Switches to the next available server, or clears active_server
+/// if no servers remain.
+pub fn leave_server(&self, server_id: &str) {
+    let mut shared = self.shared.borrow_mut();
+    shared.state.servers.remove(server_id);
+
+    // Update active server.
+    if shared.state.active_server.as_deref() == Some(server_id) {
+        shared.state.active_server = shared.state.servers.keys().next().cloned();
+    }
+
+    // Persist.
+    let ids: Vec<String> = shared.state.servers.keys().cloned().collect();
+    drop(shared);
+    willow_client::storage::save_server_list(&ids);
+}
+```
+
+Verify exact field names and storage API by reading the code. The `storage::save_server_list` function already exists (used in `Client::new`).
+
+- [ ] **Step 2: Create context_menu.rs**
+
+A generic positioned popup menu. Takes a list of items (label + callback) and renders at a given x/y position. Dismisses on click outside or Escape.
+
+- [ ] **Step 3: Add context menu to server_list.rs**
+
+In `ServerList`, add:
+- `on:contextmenu` handler on each `.server-icon` that prevents default and shows the context menu at mouse position.
+- Long-press handler (reuse the 500ms timer pattern from `message.rs`) for mobile.
+- Context menu items: "Server Settings", "Invite", "Leave Server".
+- "Leave Server" shows a `ConfirmDialog` before calling `handle.leave_server()`.
+
+The context menu needs callbacks to open settings and leave server. These can be passed as props or use context.
+
+- [ ] **Step 4: Add mod to mod.rs**
+
+```rust
+mod context_menu;
+pub use context_menu::*;
+```
+
+- [ ] **Step 5: Add CSS for context menu**
+
+```css
+.context-menu {
+    position: fixed;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    padding: 4px;
+    min-width: 160px;
+    z-index: 999;
+    animation: scale-in 0.1s ease;
+}
+
+.context-menu-item {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 13px;
+    text-align: left;
+    border-radius: 4px;
+    transition: background var(--transition-fast);
+}
+
+.context-menu-item:hover { background: var(--bg-message-hover); }
+
+.context-menu-item.danger { color: var(--danger); }
+.context-menu-item.danger:hover { background: var(--danger-glow); }
+```
+
+- [ ] **Step 6: Verify**
+
+Run: `cargo check -p willow-client && cargo check -p willow-web`
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add -A
+git commit -m "feat: add server context menu with leave-server support
+
+Right-click (desktop) or long-press (mobile) on server icon shows
+context menu with Server Settings, Invite, and Leave Server options.
+leave_server() is a local-only operation on ClientHandle."
+```
+
+---
+
+### Task 6: Quick peer ID copy in sidebar
+
+**Files:**
+- Modify: `crates/web/src/components/sidebar.rs`
+- Modify: `crates/web/style.css`
+
+- [ ] **Step 1: Add copy button to sidebar user area**
+
+In the sidebar's user area section, add a small copy icon button next to the display name. On click, copy `handle.peer_id()` to clipboard. Show a brief "Copied!" tooltip via a local signal + CSS animation.
+
+```rust
+let (show_copied, set_show_copied) = signal(false);
+let on_copy_pid = move |_| {
+    let id = handle.peer_id();
+    crate::util::copy_to_clipboard(&id);
+    set_show_copied.set(true);
+    // Auto-hide after 1.5s.
+    set_timeout(move || set_show_copied.set(false), std::time::Duration::from_millis(1500));
+};
+```
+
+In the view:
+```rust
+<button class="copy-pid-btn" title="Copy Peer ID" on:click=on_copy_pid>
+    {icons::icon_copy()}
+</button>
+{move || show_copied.get().then(|| view! {
+    <span class="copied-tooltip">"Copied!"</span>
+})}
+```
+
+- [ ] **Step 2: Add CSS for tooltip**
+
+```css
+.copy-pid-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px;
+    font-size: 14px;
+    transition: color var(--transition-fast);
+}
+.copy-pid-btn:hover { color: var(--text-primary); }
+
+.copied-tooltip {
+    position: absolute;
+    background: var(--accent);
+    color: white;
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    animation: tooltip-fade 1.5s ease forwards;
+}
+
+@keyframes tooltip-fade {
+    0%, 70% { opacity: 1; }
+    100% { opacity: 0; }
+}
+```
+
+- [ ] **Step 3: Verify and commit**
+
+```bash
+cargo check -p willow-web
+git add crates/web/src/components/sidebar.rs crates/web/style.css
+git commit -m "feat: add quick peer ID copy button in sidebar user area"
+```
+
+---
+
+### Task 7: Command palette
+
+**Files:**
+- Create: `crates/web/src/components/command_palette.rs`
+- Modify: `crates/web/src/components/chat.rs` (mobile search icon)
+- Modify: `crates/web/src/components/mod.rs`
+- Modify: `crates/web/src/app.rs` (global keydown, render palette)
+- Modify: `crates/web/style.css`
+
+- [ ] **Step 1: Create command_palette.rs**
+
+The component:
+- Reads channels from `handle.channels()`, servers from `handle.server_list()`, members from `handle.server_members()`
+- Has a text input that filters results (case-insensitive substring match)
+- Renders results grouped: channels first, then servers, then members
+- Each result has an icon (hash/volume for channels, server initial for servers, user icon for members) + name + muted category label
+- Arrow up/down navigates, Enter selects, Escape closes
+- On select: channels call the channel switch handler, servers call server switch, members open member list
+
+Props:
+```rust
+pub fn CommandPalette(
+    on_close: Callback<()>,
+    on_switch_channel: Callback<String>,
+    on_switch_server: Callback<String>,
+    on_open_members: Callback<()>,
+) -> impl IntoView
+```
+
+- [ ] **Step 2: Add global keydown listener in app.rs**
+
+In the `App` component setup, register a global keydown listener:
+
+```rust
+// Global Ctrl+K handler for command palette.
+let write_for_palette = write_signals;
+wasm_bindgen_futures::spawn_local(async move {
+    use wasm_bindgen::JsCast;
+    use wasm_bindgen::closure::Closure;
+
+    let closure = Closure::<dyn Fn(web_sys::KeyboardEvent)>::new(move |ev: web_sys::KeyboardEvent| {
+        if (ev.ctrl_key() || ev.meta_key()) && ev.key() == "k" {
+            ev.prevent_default();
+            write_for_palette.ui.set_show_palette.update(|v| *v = !*v);
+        }
+    });
+
+    if let Some(window) = web_sys::window() {
+        let _ = window.add_event_listener_with_callback(
+            "keydown",
+            closure.as_ref().unchecked_ref(),
+        );
+    }
+    closure.forget(); // Leak — lives for app lifetime.
+});
+```
+
+Render `<CommandPalette>` when `show_palette` is true, passing the appropriate callbacks.
+
+- [ ] **Step 3: Add search icon to chat.rs for mobile**
+
+In `ChannelHeader`, add a search icon button (visible on all viewports) that toggles `show_palette`. This needs a new prop or writes to context.
+
+- [ ] **Step 4: Add mod to mod.rs**
+
+```rust
+mod command_palette;
+pub use command_palette::*;
+```
+
+- [ ] **Step 5: Add CSS for command palette**
+
+```css
+/* ── Command Palette ────────────────────────────────────────────── */
+
+.palette-overlay {
+    position: fixed;
+    inset: 0;
+    background: var(--overlay-bg);
+    backdrop-filter: var(--backdrop-blur);
+    display: flex;
+    justify-content: center;
+    padding-top: 15vh;
+    z-index: 1000;
+    animation: fade-in 0.1s ease;
+}
+
+.palette {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+    width: 90%;
+    max-width: 520px;
+    max-height: 400px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: scale-in 0.1s ease;
+}
+
+.palette-input {
+    padding: 14px 16px;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-primary);
+    font-size: 15px;
+    font-family: inherit;
+    outline: none;
+    width: 100%;
+}
+
+.palette-results {
+    overflow-y: auto;
+    flex: 1;
+    padding: 4px;
+}
+
+.palette-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--text-primary);
+    transition: background var(--transition-fast);
+}
+
+.palette-item:hover, .palette-item.selected {
+    background: var(--bg-message-hover);
+}
+
+.palette-item .icon { color: var(--text-muted); }
+
+.palette-item-label { flex: 1; }
+
+.palette-item-category {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.palette-empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 13px;
+}
+```
+
+- [ ] **Step 6: Verify**
+
+Run: `cargo check -p willow-web && just check-wasm`
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add -A
+git commit -m "feat: add command palette (Ctrl+K) for channel/server/member search
+
+Full-width search overlay with keyboard navigation.
+Filters channels, servers, and members by substring match.
+Mobile: accessible via search icon in channel header."
+```
+
+---
+
+### Task 8: Update E2E helpers and tests
+
+**Files:**
+- Modify: `e2e/helpers.ts`
+- Modify: `e2e/permissions.spec.ts`
+
+- [ ] **Step 1: Update openServerSettings helper**
+
+The old helper clicks `.server-gear-btn` and expects a separate server settings panel. Now it opens the unified settings panel on the Server tab. Update:
+
+```typescript
+export async function openServerSettings(page: Page) {
+  await openSidebar(page);
+  await page.locator('.server-gear-btn').click();
+  await page.waitForTimeout(500);
+  // Settings panel should now be open on the Server tab.
+}
+```
+
+The `generateInvite` helper now doesn't need to click "Back" since the invite UI is inside the settings panel's Server tab. The "Back" button at the top of settings returns to chat. Update the flow accordingly.
+
+- [ ] **Step 2: Update E2E tests for new settings structure**
+
+Any test that navigated to `ServerSettingsPanel` via `openServerSettings` should work with the new tabbed panel since the selectors for invite generation (`.invite-code-display`, `input[placeholder*="12D3KooW"]`, "Generate Invite" button) are the same — they're just inside a tab now.
+
+Verify by running: `npx playwright test --project=desktop-chrome`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add e2e/
+git commit -m "fix: update E2E helpers for unified settings panel"
+```
+
+---
+
+### Task 9: CSS polish + full verification
+
+- [ ] **Step 1: Run full checks**
+
+```bash
+just check   # fmt + clippy + test + wasm
+```
+
+Fix any warnings or errors.
+
+- [ ] **Step 2: Build and deploy**
+
+```bash
+cd crates/web && trunk build --release && cd ../..
+sshpass -p 'WillowP2P2026deploy!' scp -o StrictHostKeyChecking=no crates/web/dist/* root@172.234.217.219:/var/www/willow/
+sshpass -p 'WillowP2P2026deploy!' ssh -o StrictHostKeyChecking=no root@172.234.217.219 'chmod 644 /var/www/willow/*'
+```
+
+- [ ] **Step 3: Run E2E tests**
+
+```bash
+npx playwright test --project=desktop-chrome
+```
+
+- [ ] **Step 4: Final commit if needed**
+
+```bash
+git add -A
+git commit -m "fix: address lint and test issues from UX improvements"
+```
diff --git a/docs/superpowers/plans/2026-03-26-video-screen-sharing-call-page.md b/docs/superpowers/plans/2026-03-26-video-screen-sharing-call-page.md
new file mode 100644
index 00000000..fc9fc717
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-26-video-screen-sharing-call-page.md
@@ -0,0 +1,1083 @@
+# Video, Screen Sharing + Call Page Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a full call page with camera video, screen sharing, speaking detection, and grid/focus layout — turning Willow's minimal voice chat into a complete video calling experience.
+
+**Architecture:** Refactor VoiceManager for connection reuse + perfect negotiation, add unified video track management (camera/screen mutually exclusive), build call page UI with participant tiles, and add AudioContext-based speaking detection. All video/screen/camera streams flow through the existing WebRTC peer connections and gossipsub signaling.
+
+**Tech Stack:** Rust, Leptos 0.7 (CSR), web_sys WebRTC APIs (RTCPeerConnection, getDisplayMedia, getUserMedia, AudioContext, AnalyserNode), CSS Grid
+
+**Spec:** `docs/superpowers/specs/2026-03-26-screen-sharing-call-page-design.md`
+
+---
+
+## File Map
+
+### New files
+
+| File | Responsibility |
+|------|----------------|
+| `crates/web/src/components/call_page.rs` | Call page layout: top bar (channel name, participant count, timer), grid/focus participant area, control strip (mute, deafen, camera, screen share, disconnect) |
+| `crates/web/src/components/participant_tile.rs` | Individual tile: peer-ID-derived gradient avatar, video element, display name overlay, speaking glow, muted badge |
+
+### Modified files
+
+| File | Changes |
+|------|---------|
+| `crates/web/src/voice.rs` | **Major rewrite:** Connection reuse (no new PC on renegotiation), perfect negotiation (polite/impolite), unified video track management (`start_video`/`stop_video_share`), `ontrack` redesign (audio vs video routing), `SpeakingDetector`, new callbacks (`on_video_track`, `on_speaking_change`). ~320 lines → ~600 lines. |
+| `crates/web/src/state.rs` | Add `CallLayout` enum, `VideoSource` enum, new signals: `show_call_page`, `call_layout`, `video_source`, `speaking_peers`, `remote_video_streams` |
+| `crates/web/src/app.rs` | Call page in main view routing, voice channel click shows call page, wire VoiceManager callbacks to signals, camera/screen share click handlers |
+| `crates/web/src/components/sidebar.rs` | Voice channel click opens call page instead of just joining |
+| `crates/web/src/components/mod.rs` | Register `call_page` and `participant_tile` modules |
+| `crates/web/src/event_processing.rs` | Clean up `remote_video_streams` on `VoiceLeft` |
+| `crates/web/src/icons.rs` | Add `icon_monitor`, `icon_video`, `icon_video_off`, `icon_grid`, `icon_maximize` |
+| `crates/web/style.css` | Call page, grid/focus layouts, tiles, controls, speaking glow, avatar gradients |
+| `crates/web/Cargo.toml` | Add web-sys features: `DisplayMediaStreamConstraints`, `AudioContext`, `BaseAudioContext`, `AudioNode`, `AnalyserNode`, `MediaStreamAudioSourceNode`, `RtcSignalingState`, `RtcRtpTransceiver` |
+
+---
+
+## Task Ordering
+
+The tasks build up in layers — each produces a compiling state:
+
+1. **Task 1:** State additions + web-sys features + icons (foundation)
+2. **Task 2:** VoiceManager refactor — connection reuse + perfect negotiation (no new features yet, just refactor)
+3. **Task 3:** Video track management in VoiceManager (camera + screen share infrastructure)
+4. **Task 4:** Participant tile component (standalone, renders avatar or video)
+5. **Task 5:** Call page component + routing (brings it all together in the UI)
+6. **Task 6:** Speaking detection
+7. **Task 7:** CSS polish + full verification
+
+---
+
+### Task 1: State additions, web-sys features, icons
+
+**Files:**
+- Modify: `crates/web/src/state.rs`
+- Modify: `crates/web/src/icons.rs`
+- Modify: `crates/web/Cargo.toml`
+
+- [ ] **Step 1: Add enums and signals to state.rs**
+
+Add after the `SettingsTab` enum:
+
+```rust
+#[derive(Clone, Copy, PartialEq)]
+pub enum VideoSource {
+    Camera,
+    Screen,
+}
+
+#[derive(Clone, PartialEq, Default)]
+pub enum CallLayout {
+    #[default]
+    Grid,
+    Focus(String), // focused peer_id
+}
+```
+
+Add to `UiState`:
+```rust
+pub show_call_page: ReadSignal<bool>,
+pub call_layout: ReadSignal<CallLayout>,
+```
+
+Add to `UiWriteSignals`:
+```rust
+pub set_show_call_page: WriteSignal<bool>,
+pub set_call_layout: WriteSignal<CallLayout>,
+```
+
+Add to `VoiceState`:
+```rust
+pub video_source: ReadSignal<Option<VideoSource>>,
+pub speaking_peers: ReadSignal<std::collections::HashSet<String>>,
+pub remote_video_streams: ReadSignal<std::collections::HashMap<String, send_wrapper::SendWrapper<web_sys::MediaStream>>>,
+```
+
+Add to `VoiceWriteSignals`:
+```rust
+pub set_video_source: WriteSignal<Option<VideoSource>>,
+pub set_speaking_peers: WriteSignal<std::collections::HashSet<String>>,
+pub set_remote_video_streams: WriteSignal<std::collections::HashMap<String, send_wrapper::SendWrapper<web_sys::MediaStream>>>,
+```
+
+Update `create_signals()` to create these signal pairs and wire them into the structs.
+
+- [ ] **Step 2: Add web-sys features to Cargo.toml**
+
+Add to the web-sys features list:
+```toml
+"DisplayMediaStreamConstraints",
+"AudioContext", "BaseAudioContext", "AudioNode",
+"AnalyserNode", "MediaStreamAudioSourceNode",
+"RtcSignalingState", "RtcRtpTransceiver",
+```
+
+- [ ] **Step 3: Add icons**
+
+Add to `crates/web/src/icons.rs`:
+- `icon_monitor()` — screen/monitor SVG (for screen share)
+- `icon_video()` — video camera SVG
+- `icon_video_off()` — video camera with slash
+- `icon_grid()` — grid layout SVG (2x2 squares)
+- `icon_maximize()` — maximize/focus SVG
+
+Use Lucide-style SVG paths (24x24, stroke-based, currentColor).
+
+- [ ] **Step 4: Verify compilation**
+
+Run: `cargo check -p willow-web && just check-wasm`
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add crates/web/
+git commit -m "feat: add video/call page state, web-sys features, and icons"
+```
+
+---
+
+### Task 2: VoiceManager refactor — connection reuse + perfect negotiation
+
+**Files:**
+- Modify: `crates/web/src/voice.rs`
+
+This is the critical infrastructure task. Refactor without adding new features — existing voice chat must continue working.
+
+- [ ] **Step 1: Add per-connection state struct**
+
+Add a `PeerConnectionState` struct to track connection metadata:
+
+```rust
+struct PeerConnectionState {
+    pc: RtcPeerConnection,
+    making_offer: bool,
+}
+```
+
+Change `connections: HashMap<String, RtcPeerConnection>` to `connections: HashMap<String, PeerConnectionState>`.
+
+Add a `local_peer_id: String` field to `VoiceManager` (needed for polite/impolite determination). Pass it in the constructor.
+
+- [ ] **Step 2: Refactor create_offer for connection reuse**
+
+`create_offer` should check if a connection already exists:
+- If exists: reuse the existing PC (call `pc.create_offer()` on it, don't create a new one)
+- If not: create a new PC, add local tracks, set up handlers, THEN create offer
+
+The handlers (`onicecandidate`, `ontrack`) should only be set up once per connection (when the PC is first created).
+
+Extract a `get_or_create_connection(peer_id) -> &PeerConnectionState` helper.
+
+- [ ] **Step 3: Refactor handle_offer for connection reuse**
+
+Same pattern — check for existing connection:
+- If exists: set remote description on existing PC, create answer
+- If not: create new PC, add tracks, set up handlers, then set remote description and create answer
+
+- [ ] **Step 4: Add onnegotiationneeded handler**
+
+When creating a new PC, set up `onnegotiationneeded`:
+
+```rust
+let on_negotiation = Closure::wrap(Box::new(move || {
+    // Set making_offer = true
+    // Create offer, set local description, send via signal callback
+    // Set making_offer = false
+}) as Box<dyn FnMut()>);
+pc.set_onnegotiationneeded(Some(on_negotiation.as_ref().unchecked_ref()));
+on_negotiation.forget();
+```
+
+This fires automatically when `addTrack` or `removeTrack` is called.
+
+**Note:** The `onnegotiationneeded` handler needs to be async (creates offer, sets description). Since it's a JS closure, use `wasm_bindgen_futures::spawn_local` inside it.
+
+- [ ] **Step 5: Add perfect negotiation collision handling to handle_offer**
+
+When receiving an offer while `making_offer` is true:
+- Determine polite/impolite: compare `self.local_peer_id` with `remote_peer` lexicographically. Lower ID = polite.
+- If impolite and making_offer: ignore the incoming offer (return early)
+- If polite: rollback local description, then set remote description from incoming offer, create answer
+
+```rust
+let am_polite = self.local_peer_id < remote_peer;
+if let Some(state) = self.connections.get(remote_peer) {
+    if !am_polite && state.making_offer {
+        return Ok(()); // Ignore collision
+    }
+    // If polite, rollback:
+    if am_polite && state.making_offer {
+        let rollback = RtcSessionDescriptionInit::new(RtcSdpType::Rollback);
+        JsFuture::from(state.pc.set_local_description(&rollback)).await.ok();
+    }
+}
+```
+
+- [ ] **Step 6: Update all connection access sites**
+
+Update `handle_answer`, `handle_ice_candidate`, `close_connection`, `close_all`, `set_muted` to access `state.pc` instead of the raw `RtcPeerConnection`.
+
+- [ ] **Step 7: Verify existing voice still works**
+
+Run: `cargo check -p willow-web && just check-wasm`
+
+The refactored VoiceManager should be API-compatible with existing usage in `app.rs` and `event_processing.rs`.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add crates/web/src/voice.rs
+git commit -m "refactor: VoiceManager connection reuse + perfect negotiation
+
+Connections are reused on renegotiation instead of recreated.
+Adds onnegotiationneeded handler for addTrack/removeTrack flows.
+Implements polite/impolite pattern for offer collision handling."
+```
+
+---
+
+### Task 3: Video track management (camera + screen share)
+
+**Files:**
+- Modify: `crates/web/src/voice.rs`
+
+- [ ] **Step 1: Add video state and callbacks to VoiceManager**
+
+Add fields:
+```rust
+video_stream: Option<MediaStream>,
+video_source: Option<VideoSource>,
+video_senders: HashMap<String, RtcRtpSender>,
+on_video_track: Rc<dyn Fn(&str, Option<MediaStream>)>,
+```
+
+Update the constructor to accept `on_video_track` callback.
+
+- [ ] **Step 2: Redesign ontrack handler**
+
+Replace the current `setup_track_handler` (which creates `<audio>` elements) with one that distinguishes audio from video:
+
+```rust
+fn setup_track_handler(&self, pc: &RtcPeerConnection, remote_peer: &str) {
+    let peer_id = remote_peer.to_string();
+    let on_video = self.on_video_track.clone();
+    let on_track = Closure::wrap(Box::new(move |ev: RtcTrackEvent| {
+        let track: MediaStreamTrack = ev.track();
+        let streams = ev.streams();
+        if streams.length() == 0 { return; }
+        let stream: MediaStream = streams.get(0).unchecked_into();
+
+        if track.kind() == "audio" {
+            // Create <audio> element as before
+            // ...
+        } else if track.kind() == "video" {
+            // Route to signal via callback
+            let pid = peer_id.clone();
+            on_video(&pid, Some(stream));
+
+            // Listen for track ended
+            let pid_end = peer_id.clone();
+            let on_video_end = on_video.clone();
+            let on_ended = Closure::once(move || {
+                on_video_end(&pid_end, None);
+            });
+            track.set_onended(Some(on_ended.as_ref().unchecked_ref()));
+            on_ended.forget();
+        }
+    }) as Box<dyn FnMut(RtcTrackEvent)>);
+    pc.set_ontrack(Some(on_track.as_ref().unchecked_ref()));
+    on_track.forget();
+}
+```
+
+- [ ] **Step 3: Implement start_video and stop_video_share**
+
+```rust
+pub fn start_video(&mut self, stream: MediaStream, source: VideoSource) {
+    // Stop existing video if any
+    self.stop_video_share();
+
+    self.video_stream = Some(stream.clone());
+    self.video_source = Some(source);
+
+    // Add video track to all existing connections
+    let video_tracks = stream.get_video_tracks();
+    if video_tracks.length() > 0 {
+        let track: MediaStreamTrack = video_tracks.get(0).unchecked_into();
+        for (peer_id, state) in &self.connections {
+            let sender = state.pc.add_track_0(&track, &stream);
+            self.video_senders.insert(peer_id.clone(), sender);
+        }
+    }
+    // onnegotiationneeded fires automatically
+}
+
+pub fn stop_video_share(&mut self) {
+    // Remove track from all connections
+    for (peer_id, sender) in self.video_senders.drain() {
+        if let Some(state) = self.connections.get(&peer_id) {
+            state.pc.remove_track(&sender);
+        }
+    }
+    // Stop video tracks
+    if let Some(ref stream) = self.video_stream {
+        let tracks = stream.get_video_tracks();
+        for i in 0..tracks.length() {
+            let track: MediaStreamTrack = tracks.get(i).unchecked_into();
+            track.stop();
+        }
+    }
+    self.video_stream = None;
+    self.video_source = None;
+}
+```
+
+- [ ] **Step 4: Update add_local_tracks to include video if active**
+
+When creating a new connection for a peer who joins mid-call, add both audio AND video tracks:
+
+```rust
+fn add_local_tracks(&self, pc: &RtcPeerConnection) -> Option<RtcRtpSender> {
+    // Add audio (existing logic)
+    if let Some(ref stream) = self.local_stream { ... }
+
+    // Add video if sharing
+    if let Some(ref video_stream) = self.video_stream {
+        let tracks = video_stream.get_video_tracks();
+        if tracks.length() > 0 {
+            let track: MediaStreamTrack = tracks.get(0).unchecked_into();
+            return Some(pc.add_track_0(&track, video_stream));
+        }
+    }
+    None
+}
+```
+
+Store the returned sender in `video_senders` for the new peer.
+
+- [ ] **Step 5: Add convenience methods**
+
+```rust
+pub fn start_screen_share(&mut self, stream: MediaStream) {
+    self.start_video(stream, VideoSource::Screen);
+}
+
+pub fn start_camera(&mut self, stream: MediaStream) {
+    self.start_video(stream, VideoSource::Camera);
+}
+
+pub fn video_source(&self) -> Option<VideoSource> {
+    self.video_source
+}
+```
+
+- [ ] **Step 6: Update close_connection and close_all**
+
+`close_connection`: also remove the peer's video sender from `video_senders` and fire `on_video_track(peer_id, None)`.
+
+`close_all`: also call `stop_video_share()`.
+
+- [ ] **Step 7: Verify compilation**
+
+Run: `cargo check -p willow-web && just check-wasm`
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add crates/web/src/voice.rs
+git commit -m "feat: unified video track management (camera + screen share)
+
+Adds start_video/stop_video_share for mutually exclusive camera and
+screen sharing. Redesigned ontrack handler routes video tracks via
+callback. Video tracks included for peers joining mid-share."
+```
+
+---
+
+### Task 4: Participant tile component
+
+**Files:**
+- Create: `crates/web/src/components/participant_tile.rs`
+- Modify: `crates/web/src/components/mod.rs`
+- Modify: `crates/web/style.css`
+
+- [ ] **Step 1: Create participant_tile.rs**
+
+A component that renders a single participant in the call:
+
+```rust
+#[component]
+pub fn ParticipantTile(
+    peer_id: String,
+    display_name: String,
+    #[prop(optional)] video_stream: Option<SendWrapper<MediaStream>>,
+    #[prop(default = false)] is_speaking: bool,
+    #[prop(default = false)] is_muted: bool,
+    #[prop(default = false)] is_focused: bool,
+    #[prop(optional)] on_click: Option<Callback<String>>,
+) -> impl IntoView
+```
+
+The tile:
+- If `video_stream` is Some: renders a `<video>` element with `srcObject` set to the stream
+- If None: renders a gradient avatar (colors derived from peer_id hash) with initial letter
+- Display name overlay at bottom
+- Speaking glow when `is_speaking`
+- Muted mic badge when `is_muted`
+- Clicks fire `on_click(peer_id)` for focus toggling
+
+For the avatar gradient:
+```rust
+fn peer_gradient(peer_id: &str) -> String {
+    let hash1 = peer_id.bytes().take(peer_id.len() / 2).fold(0u32, |h, b| h.wrapping_mul(31).wrapping_add(b as u32));
+    let hash2 = peer_id.bytes().skip(peer_id.len() / 2).fold(0u32, |h, b| h.wrapping_mul(31).wrapping_add(b as u32));
+    let hue1 = hash1 % 360;
+    let hue2 = (hue1 + 40 + hash2 % 60) % 360;
+    format!("linear-gradient(135deg, hsl({hue1}, 45%, 35%), hsl({hue2}, 45%, 30%))")
+}
+```
+
+For the video element, set `srcObject` via a Leptos `NodeRef` and `Effect`:
+```rust
+let video_ref = NodeRef::<leptos::html::Video>::new();
+Effect::new(move |_| {
+    if let Some(el) = video_ref.get() {
+        if let Some(stream) = &video_stream_signal.get() {
+            el.set_src_object(Some(&**stream));
+            let _ = el.play();
+        }
+    }
+});
+```
+
+- [ ] **Step 2: Add to mod.rs**
+
+```rust
+mod call_page;
+mod participant_tile;
+pub use call_page::*;
+pub use participant_tile::*;
+```
+
+(Add `call_page` now too even though it's empty — avoids a separate mod.rs edit later.)
+
+Create a placeholder `call_page.rs`:
+```rust
+use leptos::prelude::*;
+
+#[component]
+pub fn CallPage() -> impl IntoView {
+    view! { <div class="call-page">"Call page placeholder"</div> }
+}
+```
+
+- [ ] **Step 3: Add CSS for tiles**
+
+Add to `style.css`:
+
+```css
+/* ── Participant Tile ───────────────────────────────────────────── */
+
+.participant-tile {
+    position: relative;
+    border-radius: 16px;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 2px solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    animation: tile-enter 0.4s cubic-bezier(0.2, 0, 0.2, 1) backwards;
+}
+
+/* Stagger tile entrance animations */
+.participant-tile:nth-child(1) { animation-delay: 0s; }
+.participant-tile:nth-child(2) { animation-delay: 0.06s; }
+.participant-tile:nth-child(3) { animation-delay: 0.12s; }
+.participant-tile:nth-child(4) { animation-delay: 0.18s; }
+.participant-tile:nth-child(5) { animation-delay: 0.24s; }
+.participant-tile:nth-child(6) { animation-delay: 0.3s; }
+
+.participant-tile:hover {
+    transform: scale(1.02);
+    border-color: rgba(255, 255, 255, 0.12);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.participant-tile.speaking {
+    border-color: var(--online);
+    box-shadow: 0 0 0 3px var(--accent-green-glow), 0 0 16px var(--accent-green-glow), 0 4px 24px rgba(0, 0, 0, 0.4);
+    animation: speaking-pulse 1.8s ease-in-out infinite;
+}
+
+.participant-tile video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    /* Subtle zoom to avoid black borders from webcam aspect ratios */
+    transform: scale(1.01);
+}
+
+.participant-tile video.screen-share {
+    object-fit: contain;
+    background: #0a0a0c;
+    transform: none;
+}
+
+/* Mirror local camera feed (feels natural like a mirror) */
+.participant-tile.local-camera video { transform: scaleX(-1); }
+
+.tile-avatar {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.85);
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    /* Subtle noise texture overlay for visual richness */
+    position: relative;
+}
+
+.tile-avatar::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06) 0%, transparent 60%);
+    pointer-events: none;
+}
+
+.tile-name {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 14px;
+    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.7) 100%);
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.95);
+    letter-spacing: 0.01em;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* Small "sharing screen" or "camera" indicator next to name */
+.tile-name .tile-source-badge {
+    font-size: 10px;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 1px 6px;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.7);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.tile-muted-badge {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    width: 26px;
+    height: 26px;
+    background: rgba(237, 66, 69, 0.9);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: white;
+    backdrop-filter: blur(4px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+@keyframes speaking-pulse {
+    0%, 100% { box-shadow: 0 0 0 3px var(--accent-green-glow), 0 0 16px var(--accent-green-glow), 0 4px 24px rgba(0, 0, 0, 0.4); }
+    50% { box-shadow: 0 0 0 5px var(--accent-green-glow), 0 0 24px var(--accent-green-glow), 0 4px 24px rgba(0, 0, 0, 0.4); }
+}
+
+@keyframes tile-enter {
+    from { opacity: 0; transform: scale(0.92) translateY(8px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+```
+
+- [ ] **Step 4: Verify and commit**
+
+```bash
+cargo check -p willow-web && just check-wasm
+git add -A
+git commit -m "feat: add ParticipantTile component with avatar gradients and speaking glow"
+```
+
+---
+
+### Task 5: Call page component + routing
+
+**Files:**
+- Rewrite: `crates/web/src/components/call_page.rs`
+- Modify: `crates/web/src/app.rs`
+- Modify: `crates/web/src/components/sidebar.rs`
+- Modify: `crates/web/src/event_processing.rs`
+- Modify: `crates/web/style.css`
+
+- [ ] **Step 1: Implement call_page.rs**
+
+The call page has three sections:
+1. **Top bar**: channel name, participant count pill, duration timer, grid/focus toggle
+2. **Participant grid**: renders `<ParticipantTile>` for each voice participant
+3. **Control strip**: Mute, Deafen, Camera, Screen Share, Disconnect
+
+The component reads from context:
+- `AppState` for voice state (participants, speaking, video streams, etc.)
+- `WebClientHandle` for peer data (display names)
+- `VoiceManagerHandle` for starting/stopping video
+
+Props:
+```rust
+#[component]
+pub fn CallPage(
+    on_disconnect: Callback<()>,
+    on_mute: Callback<()>,
+    on_deafen: Callback<()>,
+) -> impl IntoView
+```
+
+Camera and screen share buttons are handled locally:
+- Camera: calls `getUserMedia({video:true})` synchronously in click, then `vm.start_camera(stream)`
+- Screen: calls `getDisplayMedia()` synchronously in click, then `vm.start_screen_share(stream)`
+- Both update `set_video_source` signal
+- Both call `stop_video_share` on the other first (mutually exclusive)
+
+Grid/focus: managed by local signal `call_layout`. Click tile → `Focus(peer_id)`. Click focused tile or grid button → `Grid`.
+
+Duration timer: `set_interval` incrementing a seconds counter, formatted as `HH:MM:SS` with `font-variant-numeric: tabular-nums`.
+
+- [ ] **Step 2: Update app.rs — add call page to view routing**
+
+The main content area rendering priority becomes:
+`show_add_server` → `show_settings` → `show_call_page` → chat
+
+When `show_call_page` is true, render `<CallPage>` instead of the chat area.
+
+Wire the VoiceManager's `on_video_track` callback to update `set_remote_video_streams` signal. This happens in the App component setup (similar to how `on_signal` is wired).
+
+- [ ] **Step 3: Update sidebar.rs — voice channel click opens call page**
+
+When a voice channel is clicked:
+- If not in a voice channel: join voice (existing flow) AND set `show_call_page = true`
+- If already in this voice channel: just set `show_call_page = true` (navigate back to call page)
+- If in a different voice channel: leave current, join new, set `show_call_page = true`
+
+When a text channel is clicked: set `show_call_page = false` (existing channel switch + close call page view, but call continues in background).
+
+- [ ] **Step 4: Update event_processing.rs**
+
+On `VoiceLeft` event: remove the peer from `remote_video_streams` signal.
+
+On disconnect (local): set `show_call_page = false`, clear `video_source`, clear `remote_video_streams`.
+
+- [ ] **Step 5: Add CSS for call page**
+
+```css
+/* ── Call Page ──────────────────────────────────────────────────── */
+
+.call-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    /* Deep ambient gradient — signals "you're in a live session" */
+    background:
+        radial-gradient(ellipse at 50% 40%, rgba(88, 101, 242, 0.04) 0%, transparent 60%),
+        radial-gradient(ellipse at center, #16161a 0%, #0e0e12 100%);
+    animation: call-page-enter 0.3s ease;
+}
+
+@keyframes call-page-enter {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.call-top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 20px;
+    flex-shrink: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.call-channel-name {
+    font-weight: 600;
+    font-size: 15px;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Subtle live dot next to channel name */
+.call-live-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--online);
+    border-radius: 50%;
+    animation: live-dot-pulse 2s ease-in-out infinite;
+}
+
+@keyframes live-dot-pulse {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-green-glow); }
+    50% { opacity: 0.7; box-shadow: 0 0 0 4px var(--accent-green-glow); }
+}
+
+.call-participant-count {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 3px 12px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.call-timer {
+    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    font-size: 13px;
+    font-family: 'IBM Plex Mono', monospace;
+    letter-spacing: 0.02em;
+}
+
+.call-layout-toggle {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: 8px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    transition: all var(--transition-fast);
+}
+.call-layout-toggle:hover {
+    color: var(--text-primary);
+    border-color: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.call-grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 12px;
+    padding: 20px;
+    align-content: center;
+    overflow-y: auto;
+}
+
+/* Single participant: constrain width so it doesn't stretch full-screen */
+.call-grid.single-participant {
+    justify-content: center;
+}
+.call-grid.single-participant .participant-tile {
+    max-width: 640px;
+}
+
+/* Two participants: equal side-by-side */
+.call-grid.two-participants {
+    grid-template-columns: 1fr 1fr;
+}
+
+/* Focus layout */
+.call-grid.focus {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.call-grid.focus .participant-tile.focused {
+    flex: 1;
+    min-height: 0;
+    aspect-ratio: auto;
+}
+
+.call-thumbnails {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    padding: 4px 0;
+    flex-shrink: 0;
+    /* Subtle fade at edges for scroll indication */
+    mask-image: linear-gradient(90deg, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
+}
+
+.call-thumbnails .participant-tile {
+    width: 160px;
+    min-width: 160px;
+    height: 100px;
+    flex-shrink: 0;
+    border-radius: 10px;
+    aspect-ratio: auto;
+}
+
+/* Control strip — frosted glass floating bar */
+.call-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    flex-shrink: 0;
+}
+
+.call-controls-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-radius: 20px;
+    padding: 8px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.call-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    transition: all 0.15s ease;
+    position: relative;
+}
+
+.call-btn:hover {
+    background: rgba(255, 255, 255, 0.14);
+    transform: scale(1.06);
+}
+
+.call-btn:active { transform: scale(0.96); }
+
+.call-btn.active {
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.call-btn.muted {
+    background: rgba(237, 66, 69, 0.2);
+    color: var(--danger);
+}
+.call-btn.muted:hover { background: rgba(237, 66, 69, 0.3); }
+
+/* Disconnect button — wider red pill */
+.call-btn.disconnect {
+    background: var(--danger);
+    color: white;
+    border-radius: 24px;
+    width: auto;
+    padding: 0 20px;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 500;
+}
+.call-btn.disconnect:hover {
+    background: var(--danger-hover);
+    box-shadow: 0 0 16px var(--danger-glow);
+}
+
+/* Separator between control groups */
+.call-controls-separator {
+    width: 1px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.08);
+    margin: 0 4px;
+}
+
+/* Tooltip on hover */
+.call-btn[title]::after {
+    content: attr(title);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    font-size: 11px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border);
+}
+.call-btn[title]:hover::after { opacity: 1; }
+
+@media (max-width: 900px) {
+    .call-btn { width: 52px; height: 52px; }
+    .call-btn[title]::after { display: none; } /* No tooltips on mobile */
+    .call-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; padding: 8px; }
+    .call-controls-bar { padding: 6px 10px; }
+    .call-top-bar { padding: 10px 12px; }
+}
+```
+
+- [ ] **Step 6: Verify and commit**
+
+```bash
+cargo check -p willow-web && just check-wasm
+git add -A
+git commit -m "feat: call page with grid/focus layout, camera, screen share, and controls
+
+Full call page replaces chat view when in voice channel.
+Participant tiles show avatar gradients or video streams.
+Control strip: mute, deafen, camera, screen share, disconnect.
+Grid and focus layout modes with click-to-focus tiles."
+```
+
+---
+
+### Task 6: Speaking detection
+
+**Files:**
+- Modify: `crates/web/src/voice.rs`
+
+- [ ] **Step 1: Add SpeakingDetector struct**
+
+```rust
+pub struct SpeakingDetector {
+    audio_context: web_sys::AudioContext,
+    analysers: HashMap<String, web_sys::AnalyserNode>,
+    on_speaking_change: Rc<dyn Fn(std::collections::HashSet<String>)>,
+    interval_id: Option<i32>,
+}
+```
+
+- [ ] **Step 2: Implement SpeakingDetector methods**
+
+```rust
+impl SpeakingDetector {
+    pub fn new(on_change: impl Fn(HashSet<String>) + 'static) -> Result<Self, String> {
+        let ctx = web_sys::AudioContext::new().map_err(|_| "AudioContext failed")?;
+        Ok(Self {
+            audio_context: ctx,
+            analysers: HashMap::new(),
+            on_speaking_change: Rc::new(on_change),
+            interval_id: None,
+        })
+    }
+
+    pub fn add_stream(&mut self, peer_id: &str, stream: &MediaStream) {
+        // Create MediaStreamAudioSourceNode from stream
+        // Connect to AnalyserNode
+        // Store analyser
+    }
+
+    pub fn remove_peer(&mut self, peer_id: &str) {
+        self.analysers.remove(peer_id);
+    }
+
+    pub fn start_polling(&mut self) {
+        // setInterval at 60ms
+        // Check each analyser's getByteFrequencyData
+        // Build HashSet of speaking peers (volume > threshold)
+        // Call on_speaking_change
+    }
+
+    pub fn destroy(&mut self) {
+        if let Some(id) = self.interval_id.take() {
+            web_sys::window().and_then(|w| w.clear_interval_with_handle(id).ok());
+        }
+        let _ = self.audio_context.close();
+        self.analysers.clear();
+    }
+}
+```
+
+- [ ] **Step 3: Integrate SpeakingDetector into VoiceManager**
+
+Add a `speaking_detector: Option<SpeakingDetector>` field.
+
+In the `ontrack` handler, when an audio track arrives, also call `speaking_detector.add_stream()`.
+
+In `close_connection`, call `speaking_detector.remove_peer()`.
+
+In `close_all`, call `speaking_detector.destroy()`.
+
+Initialize the detector in VoiceManager constructor (after the first peer connects, or lazily).
+
+- [ ] **Step 4: Wire callback in app.rs**
+
+The `on_speaking_change` callback updates `set_speaking_peers` signal. Wire this in the App component when creating the VoiceManager.
+
+- [ ] **Step 5: Update ParticipantTile to use speaking state**
+
+Read `speaking_peers` from `AppState` context. Check if the tile's peer_id is in the set.
+
+- [ ] **Step 6: Verify and commit**
+
+```bash
+cargo check -p willow-web && just check-wasm
+git add -A
+git commit -m "feat: speaking detection with AudioContext analysers
+
+SpeakingDetector polls AnalyserNodes at 60ms intervals.
+Participant tiles show green pulse glow when peer is speaking.
+Local mic also analysed for self-feedback."
+```
+
+---
+
+### Task 7: CSS polish + full verification
+
+- [ ] **Step 1: Run full checks**
+
+```bash
+just check   # fmt + clippy + test + wasm
+```
+
+Fix any warnings or errors.
+
+- [ ] **Step 2: Build and deploy**
+
+```bash
+cd crates/web && trunk build --release && cd ../..
+sshpass -p 'WillowP2P2026deploy!' scp -o StrictHostKeyChecking=no crates/web/dist/* root@172.234.217.219:/var/www/willow/
+sshpass -p 'WillowP2P2026deploy!' ssh -o StrictHostKeyChecking=no root@172.234.217.219 'chmod 644 /var/www/willow/*'
+```
+
+- [ ] **Step 3: Manual testing**
+
+Test with 2 browser windows on the deployed site:
+- Join same voice channel from both
+- Verify call page renders with participant tiles
+- Test mute/deafen controls
+- Test camera (if webcam available)
+- Test screen share
+- Test switching camera ↔ screen share
+- Test grid/focus layout toggle
+- Verify speaking indicators work
+- Test disconnect
+
+- [ ] **Step 4: Final commit**
+
+```bash
+git add -A
+git commit -m "fix: polish and stabilize call page"
+```
diff --git a/docs/superpowers/specs/2026-03-25-ux-navigation-improvements-design.md b/docs/superpowers/specs/2026-03-25-ux-navigation-improvements-design.md
new file mode 100644
index 00000000..52afbb63
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-25-ux-navigation-improvements-design.md
@@ -0,0 +1,160 @@
+# UX Navigation Improvements Design
+
+## Problem
+
+The Willow web UI has several navigation and UX friction points:
+
+1. **Settings navigation is confusing** — Two separate panels (User Settings, Server Settings) accessed from different places. Sidebar has both a "Settings" button and a gear icon going to different panels. Users must click through Settings → link to reach Server Settings.
+2. **No confirmation on destructive actions** — Channel delete, kick member, message delete, and role delete all happen on single click with no safety net.
+3. **No navigation hierarchy** — Settings panels lack breadcrumbs or location context. Users click "Back" with no sense of where they are.
+4. **Server management is limited** — No way to leave a server. No context menu on server icons for quick actions.
+5. **Invite flow requires too many steps** — Copying your peer ID (needed for invites) requires navigating to settings.
+6. **No quick navigation** — No keyboard shortcut to jump between channels, servers, or find members.
+
+## Scope
+
+- **In scope:** Unified settings tabs, confirmation dialogs, breadcrumbs, server context menu, quick peer ID copy, command palette. Changes primarily in `willow-web` crate plus a `leave_server()` addition to `willow-client`.
+- **Out of scope:** Changes to the P2P protocol, invite code format, relay behavior, or `willow-state` event kinds.
+
+## Design
+
+### 1. Unified Settings Panel with Tabs
+
+Replace the three separate panels (`SettingsPanel`, `ServerSettingsPanel`, `RoleManager` as top-level) with a single `SettingsPanel` component with tab navigation.
+
+**Tabs:**
+- **Profile** — display name, peer ID copy (current SettingsPanel content)
+- **Server** — server name, description, invite generation (current ServerSettingsPanel content minus roles)
+- **Roles** — role CRUD, permission toggles, assignment (current RoleManager content)
+
+**State changes:**
+- Remove `show_server_settings` signal entirely from `UiState`/`UiWriteSignals`.
+- `show_settings` opens the unified panel.
+- Add `settings_tab` signal using a `SettingsTab` enum:
+
+```rust
+#[derive(Clone, Copy, PartialEq, Default)]
+pub enum SettingsTab {
+    #[default]
+    Profile,
+    Server,
+    Roles,
+}
+```
+
+- Sidebar gear icon opens settings with `settings_tab = Server`. Sidebar "Settings" button opens with `settings_tab = Profile`.
+- `show_add_server` continues to work as a separate panel. When `show_add_server` opens, it clears `show_settings`. When `show_settings` opens, it clears `show_add_server`. Panel priority: `show_add_server` > `show_settings` > chat view.
+
+**Access control:** "Roles" tab only visible to server owner. "Server" tab shows invite generation for everyone; server rename/description only for owner.
+
+**Files:**
+- Delete: `components/server_settings.rs` (merged into settings)
+- Modify: `components/settings.rs` (becomes tabbed panel)
+- Modify: `components/roles.rs` (stays as sub-component rendered in Roles tab)
+- Modify: `components/mod.rs` (remove `mod server_settings`, add new component modules)
+- Modify: `app.rs` (remove `show_server_settings` signal/handler, simplify panel routing)
+- Modify: `state.rs` (remove `show_server_settings`, add `settings_tab` with `SettingsTab` enum, add `show_palette`)
+- Modify: `handlers.rs` (if delete handlers need confirmation dialog integration)
+- Modify: `event_processing.rs` (remove `show_server_settings` references)
+- Modify: `style.css` (tab styles)
+
+### 2. Confirmation Dialogs
+
+Reusable `ConfirmDialog` component for destructive actions.
+
+**Component props:**
+- `visible: ReadSignal<bool>` — controls visibility
+- `title: &str` — e.g., "Delete Channel"
+- `message: &str` — e.g., "Are you sure you want to delete #random?"
+- `confirm_text: &str` — e.g., "Delete"
+- `danger: bool` — red confirm button when true
+- `on_confirm: Callback<()>` — fires on confirm
+- `on_cancel: Callback<()>` — fires on cancel or Escape
+
+**Visual:** Modal overlay with backdrop blur, centered card, cancel + confirm buttons. Escape key dismisses.
+
+**Wired into:**
+- Channel delete (sidebar channel item "x" button)
+- Kick member (member list "Kick" button)
+- Message delete (message dropdown/sheet "Delete" action)
+- Role delete (role manager "x" button)
+
+**Mobile message delete flow:** When the user taps "Delete" in the mobile action sheet, the sheet closes first, then the confirmation dialog opens. No stacking of two overlays.
+
+**State per usage site:** Each site holds `(show_confirm, set_show_confirm)` and `pending_item` signals. The destructive button sets these instead of acting directly. `on_confirm` performs the action and clears the signals.
+
+**File:** New `components/confirm_dialog.rs`.
+
+### 3. Breadcrumb Navigation in Settings
+
+Replace the "← Back" button pattern with a breadcrumb-style header.
+
+**Format:** `← Settings / Profile` where `←` is a clickable back-to-chat button and the tab name shows current location. Driven by the `settings_tab` signal.
+
+Clicking "Settings" in the breadcrumb could switch to first tab. Current tab name is static (you're already there). Lightweight — just styled spans in the settings header.
+
+### 4. Server Context Menu
+
+Right-click (desktop) or long-press (mobile) on a server icon shows a popup menu.
+
+**Menu items:**
+- **Server Settings** — opens settings panel to "server" tab
+- **Invite** — opens settings panel to "server" tab
+- **Leave Server** — with confirmation dialog (destructive)
+
+**Implementation:**
+- New `components/context_menu.rs` — reusable positioned popup rendering at cursor/touch position.
+- Context menu state is local to the `ServerList` component (not in global `UiState`), since it doesn't need to be shared. Uses local signals: `show_context_menu`, `menu_position` (x/y), `context_server_id`.
+- Desktop: `on:contextmenu` on `.server-icon`, prevent default, show menu at mouse position.
+- Mobile: reuse the same long-press pattern from `message.rs` (500ms timer, touchstart/touchend, haptic feedback) for consistency. Extract the long-press detection into a shared utility if practical, or duplicate the pattern with a comment noting the shared approach.
+- Click outside or Escape dismisses.
+
+**`leave_server()` in client:** This is a **local-only** operation (no P2P event, no state machine change). It removes the server from `SharedState.state.servers`, removes associated data from persistence (`storage::save_server_list`, `storage::save_server_by_id`), and switches to the next available server or clears `active_server` (returning to welcome if no servers remain). The event history for the left server is retained in storage (not purged).
+
+**Files:** Modify `crates/client/src/lib.rs` to add `leave_server()` on `ClientHandle`.
+
+### 5. Quick Peer ID Copy
+
+Add a copy icon button in the sidebar user area (next to display name) that copies the user's peer ID to clipboard with a brief "Copied!" tooltip.
+
+Both sides of the invite flow need to share peer IDs. Having it one click away in the always-visible sidebar eliminates navigating to settings just to copy your ID.
+
+**Implementation:** Small copy icon button in the sidebar user area. `on:click` copies `handle.peer_id()` to clipboard via `navigator.clipboard.writeText()`. Shows "Copied!" tooltip briefly (CSS animation, auto-hides after 1.5s). The `peer_id` is available via `ClientHandle` from context — no new props needed on `Sidebar`.
+
+### 6. Command Palette (Ctrl+K)
+
+Search overlay for fast navigation across channels, servers, and members.
+
+**Trigger:** `Ctrl+K` / `Cmd+K`. Mobile: search icon button added to channel header (in `chat.rs`).
+
+**Global keydown registration:** Use `web_sys::window().add_event_listener_with_callback("keydown", ...)` registered in the `App` component setup. The handler checks for `Ctrl+K` / `Cmd+K`, calls `prevent_default()`, and sets `show_palette = true`. When the palette is open, it captures Escape to close. When the chat input is focused, `Ctrl+K` still opens the palette (the global listener fires before element-scoped handlers).
+
+**UI:** Full-width overlay with backdrop blur, centered search input auto-focused, results list below. Arrow keys navigate, Enter selects, Escape closes.
+
+**Search scope:**
+- Channels — current server channels, prefixed with `#` or volume icon
+- Servers — all servers, shown with server name
+- Members — known peers, shown with display name + truncated peer ID
+
+**Result format:** Icon + name + category label (right-aligned, muted). Simple substring match, case-insensitive, all client-side.
+
+**Actions on select:**
+- Channel → switch to that channel
+- Server → switch to that server (and first channel)
+- Member → open member list
+
+**State:** `show_palette` signal in `UiState`/`UiWriteSignals`.
+
+**Files:**
+- New `components/command_palette.rs`
+- Modify `components/chat.rs` (add search icon for mobile trigger)
+- Modify `components/mod.rs` (add module)
+- Modify `app.rs` (register global keydown, render palette)
+
+## Testing
+
+- Existing browser tests (`just test-browser`) must continue to pass.
+- WASM compilation (`just check-wasm`) must pass.
+- E2E helpers (`e2e/helpers.ts`) must be updated: `openServerSettings` now opens the unified settings panel to the server tab. `generateInvite` flow changes accordingly.
+- E2E tests (`e2e/permissions.spec.ts`) must be updated for the new settings structure.
+- New E2E tests: confirmation dialog appears on destructive actions, command palette opens/closes with Ctrl+K, server context menu appears on right-click.
diff --git a/docs/superpowers/specs/2026-03-26-screen-sharing-call-page-design.md b/docs/superpowers/specs/2026-03-26-screen-sharing-call-page-design.md
new file mode 100644
index 00000000..c5684290
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-26-screen-sharing-call-page-design.md
@@ -0,0 +1,320 @@
+# Video, Screen Sharing + Call Page Design
+
+## Problem
+
+Willow's voice chat is audio-only with minimal UI — just mute/deafen/disconnect buttons in the sidebar. There's no camera video, no screen sharing, no visual call page, no speaking indicators, and no way to see who's in the call at a glance.
+
+## Scope
+
+- **In scope:** Call page (main view), camera video, screen sharing via WebRTC, speaking detection, grid/focus layout switching, participant tiles with video and speaking indicators.
+- **Out of scope:** SFU/MCU topology changes (stays full mesh), recording, virtual backgrounds, simultaneous camera + screen share (mutually exclusive — one video track per direction).
+
+## Design
+
+### 1. Call Page (Main View)
+
+When a user joins a voice channel or clicks an active voice channel, the main content area switches to a Call Page replacing the chat view.
+
+**Layout:**
+- **Top bar:** Voice channel name, participant count, call duration timer
+- **Center:** Participant grid — video/screen tiles or audio-only avatars with speaking indicators
+- **Bottom bar:** Control strip — Mute, Deafen, Camera, Share Screen, Disconnect
+
+**Participant tiles:**
+- Each participant gets a tile showing their display name
+- Audio-only: initial/avatar letter with a pulsing ring when speaking
+- Screen-sharing: `<video>` element playing their display stream
+- Speaking indicator: green border glow when audio level exceeds threshold
+
+**Layout switching:**
+- **Grid mode** (default): All tiles equally sized in a responsive CSS grid
+- **Focus mode:** Click any tile to focus it (large center view). Other tiles shrink to a row of thumbnails at the bottom. Click focused tile or "Grid" button to return to grid.
+
+**Navigation:**
+- Joining voice channel → main view switches to call page
+- Clicking active voice channel again → returns to call page if on chat
+- Clicking a text channel → main view switches to chat (call continues, sidebar mini controls remain)
+- Existing `VoiceControls` in sidebar remain as mini indicator when viewing chat during active call
+
+**New files:**
+- `crates/web/src/components/call_page.rs` — Main call page (layout, controls, grid/focus)
+- `crates/web/src/components/participant_tile.rs` — Individual tile (avatar, video, name, speaking glow)
+
+### 2. Screen Sharing
+
+Screen sharing piggybacks on existing voice peer connections. Only available when in a voice channel.
+
+**Starting a share:**
+1. User clicks "Share Screen" in call page control strip
+2. `getDisplayMedia()` called **synchronously in the click handler** (preserves user gesture — critical for browser permission). The `get_display_media()` call must happen before any `.await` or microtask boundary. The promise result is handled asynchronously.
+3. Video track added to every existing peer connection via `addTrack()`
+4. Triggers `onnegotiationneeded` — VoiceManager creates new offer via renegotiation on the **existing** connection
+5. User's tile switches from avatar to screen feed; "Sharing" indicator appears
+
+**Receiving a share:**
+- Remote peer gets renegotiation offer with new video track
+- Sets remote description on the **existing** peer connection (not a new one)
+- `ontrack` handler fires with screen video track
+- Participant tile switches from avatar to `<video>` element
+
+**Stopping a share:**
+- User clicks "Stop Sharing" in controls, OR browser fires `track.onended` (user clicks browser "Stop sharing")
+- The `RtcRtpSender` (stored at addTrack time) is passed to `removeTrack()` on each connection
+- Renegotiation fires, remote peers see track removed
+- Tile reverts to avatar
+- VoiceManager clears stored screen share stream and sender references
+
+**Multiple simultaneous shares:**
+- Each participant can share independently — mesh topology gives each pair their own connection
+- Each connection carries 0 or 1 video tracks from each side
+- Grid naturally shows all active screen shares as video tiles
+
+**Peer joining mid-share:**
+- When a new peer joins the voice channel (triggers `create_offer`), the VoiceManager checks if a local screen share is active
+- If active, both the audio tracks AND the screen share video track are added to the new connection before the offer is created
+- The new peer immediately receives the screen share in the initial offer
+
+**`getDisplayMedia()` in WASM:**
+- `web_sys::MediaDevices::get_display_media()` is stable (not behind unstable flag)
+- Returns `Promise<MediaStream>` with video track
+- Must be called from synchronous click handler (user gesture requirement — transient activation expires quickly)
+- `track.onended` event detects when user stops sharing via browser chrome
+- Add `DisplayMediaStreamConstraints` feature to web-sys if using the constraints variant
+
+### 3. Camera Video
+
+Camera video uses the same single-video-track-per-direction infrastructure as screen sharing. Camera and screen share are **mutually exclusive** — starting one stops the other.
+
+**Starting camera:**
+1. User clicks "Camera" button in call page control strip
+2. `getUserMedia({ video: true, audio: false })` called synchronously in click handler (preserves user gesture). Audio is already handled by the existing voice stream — camera only adds video.
+3. If a screen share video track is active, it is first removed via `stop_video_share()` (shared cleanup method).
+4. Camera video track added to all peer connections via `addTrack()`, triggering renegotiation.
+5. User's tile switches from avatar to camera feed.
+
+**Stopping camera:**
+- User clicks "Camera" button again (toggle off)
+- Calls `stop_video_share()` which removes the video track, clears senders, and fires renegotiation
+- Camera stream's video tracks are stopped (`track.stop()`) to turn off the camera indicator
+- Tile reverts to avatar
+
+**Switching between camera and screen share:**
+- Starting screen share while camera is on: `stop_video_share()` runs first (stops camera), then screen share track is added
+- Starting camera while screen share is on: `stop_video_share()` runs first (stops screen share), then camera track is added
+- The VoiceManager tracks the current video source type: `video_source: Option<VideoSource>` where `VideoSource` is `Camera` or `Screen`
+
+**Receiving camera:**
+- Identical to receiving screen share — the `ontrack` handler fires with a video track
+- The remote peer doesn't need to distinguish camera from screen share at the WebRTC level — both are just video tracks
+- The tile shows the video feed regardless of source
+
+`VideoSource` enum:
+```rust
+#[derive(Clone, Copy, PartialEq)]
+pub enum VideoSource {
+    Camera,
+    Screen,
+}
+```
+
+Stored in VoiceManager to know what cleanup to do when switching. Also exposed in `VoiceState` so the UI can show the right button state (camera active vs screen active).
+
+### 4. VoiceManager Refactoring
+
+The current VoiceManager creates a **new** `RtcPeerConnection` every time `create_offer()` or `handle_offer()` is called. This must be refactored to support renegotiation.
+
+**Connection reuse:**
+- `create_offer(peer_id)` checks `self.connections` first. If a connection exists, reuses it (calls `create_offer()` on the existing PC). Only creates a new PC if none exists.
+- `handle_offer(peer_id, sdp)` checks `self.connections` first. If a connection exists, sets the remote description on it and creates an answer. Only creates a new PC if none exists.
+- `ontrack` and `onicecandidate` handlers are set up once per connection (not on every renegotiation).
+
+**Perfect negotiation (collision handling):**
+When both peers try to renegotiate simultaneously (e.g., both start screen sharing at the same time), offers collide. The "perfect negotiation" pattern resolves this:
+
+- **Polite/impolite roles:** Determined by comparing peer IDs lexicographically. The peer with the lower ID is "polite" (rolls back on collision).
+- **Per-connection state:** Each connection tracks `making_offer: bool` and `ignore_offer: bool`.
+- **Flow:** When `onnegotiationneeded` fires, set `making_offer = true`, create offer, set local description, send offer, set `making_offer = false`. When receiving an offer: if we're "impolite" and `making_offer` is true, ignore it. If we're "polite", rollback our local description (`setLocalDescription({type: "rollback"})`) and accept the incoming offer.
+- Requires `RtcSignalingState` web-sys feature to check `pc.signaling_state()`.
+
+**Video track management (shared for camera and screen share):**
+- VoiceManager stores: `video_stream: Option<MediaStream>`, `video_source: Option<VideoSource>`, `video_senders: HashMap<String, RtcRtpSender>` (per peer)
+- `start_video(stream, source: VideoSource)`: stops any existing video first via `stop_video_share()`, then stores the stream + source, calls `addTrack()` on every existing connection, stores the returned `RtcRtpSender` per peer
+- `stop_video_share()`: calls `removeTrack(sender)` on each connection using stored senders, stops the stream's video tracks (`track.stop()`), clears video_stream, video_source, and senders map
+- `start_screen_share(stream)`: calls `start_video(stream, VideoSource::Screen)`
+- `start_camera(stream)`: calls `start_video(stream, VideoSource::Camera)`
+- When creating a new connection (new peer joins), also adds the video track if active
+
+**`ontrack` handler redesign:**
+The current handler creates anonymous `<audio>` elements. The new handler must distinguish track types and route video to the signal layer:
+
+- Audio tracks: continue creating `<audio>` elements as before
+- Video tracks: fire a callback (`on_video_track`) that the app layer uses to update `remote_video_streams` signal
+- The callback follows the same pattern as the existing `on_signal` callback — passed to VoiceManager at construction time
+- Signature: `Rc<dyn Fn(&str, Option<MediaStream>)>` — `(peer_id, Some(stream))` when video arrives, `(peer_id, None)` when video track ends
+
+**Cleanup on peer leave:**
+When `VoiceLeft` event fires and `close_connection(peer_id)` is called, also fire `on_video_track(peer_id, None)` to clean up the `remote_video_streams` signal entry.
+
+### 5. Speaking Detection
+
+Visual indicators on participant tiles showing who's talking.
+
+**Implementation:**
+- `SpeakingDetector` struct in `voice.rs` wrapping `HashMap<String, AnalyserNode>` and a shared `AudioContext`
+- When remote audio track arrives (`ontrack` with audio kind), create `MediaStreamAudioSourceNode` → `AnalyserNode` and store
+- Single polling loop (~60ms via `setInterval`) checks all analysers' `getByteFrequencyData()` for volume above threshold
+- Updates `speaking_peers: WriteSignal<HashSet<String>>` (passed at construction as a callback, same pattern as `on_video_track`)
+- Local microphone stream also connected to an analyser for self-feedback
+
+**Cleanup:**
+- `remove_peer(peer_id)`: disconnect and remove analyser for that peer
+- `destroy()`: close the AudioContext, clear all analysers. Called when leaving voice.
+
+**UI:**
+- Speaking tile: `border: 2px solid var(--online)` with glow `box-shadow: 0 0 8px var(--accent-green-glow)`
+- Non-speaking tile: default border
+- Note: speaking detection polling may be throttled in background tabs. This is acceptable — speaking indicators are a visual-only enhancement.
+
+### 6. State Additions
+
+**`UiState` / `UiWriteSignals`:**
+
+```
+show_call_page: ReadSignal<bool>
+call_layout: ReadSignal<CallLayout>
+```
+
+`CallLayout` enum:
+```rust
+#[derive(Clone, PartialEq, Default)]
+pub enum CallLayout {
+    #[default]
+    Grid,
+    Focus(String),  // focused peer_id
+}
+```
+
+**`VoiceState` / `VoiceWriteSignals`:**
+
+```
+video_source: ReadSignal<Option<VideoSource>>       // what the local user is sharing (Camera, Screen, or None)
+speaking_peers: ReadSignal<HashSet<String>>          // peers currently speaking
+remote_video_streams: ReadSignal<HashMap<String, SendWrapper<web_sys::MediaStream>>>
+```
+
+`web_sys::MediaStream` is not `Send` — wrapped in `SendWrapper` consistent with existing patterns.
+
+`video_source` replaces the old `screen_sharing: bool` — the UI checks `video_source.get()` to show the correct button state (camera active, screen active, or neither).
+
+**Signal update mechanism:** VoiceManager does NOT hold Leptos signals directly. It fires callbacks (`on_video_track`, `on_speaking_change`) set at construction, same as the existing `on_signal` pattern. The app layer wires these callbacks to update the appropriate `WriteSignal`s.
+
+### 7. Files Modified
+
+| File | Changes |
+|------|---------|
+| **Create:** `components/call_page.rs` | Call page component (top bar, grid/focus, controls including camera + screen share) |
+| **Create:** `components/participant_tile.rs` | Individual tile (avatar, video, speaking glow) |
+| **Modify:** `voice.rs` | Refactor connection reuse, perfect negotiation, unified video track management (camera + screen), `ontrack` redesign, `SpeakingDetector`, new callbacks (`on_video_track`, `on_speaking_change`) |
+| **Modify:** `state.rs` | `CallLayout` enum, `VideoSource` enum, new signals in `UiState` and `VoiceState` |
+| **Modify:** `components/mod.rs` | Register new components |
+| **Modify:** `app.rs` | Call page in main view routing, voice channel click shows call page, wire VoiceManager callbacks to signals, camera/screen share click handlers |
+| **Modify:** `components/sidebar.rs` | Voice channel click opens call page |
+| **Modify:** `event_processing.rs` | Clean up `remote_video_streams` on `VoiceLeft` |
+| **Modify:** `icons.rs` | Add `icon_monitor`, `icon_video`, `icon_video_off`, `icon_grid`, `icon_maximize` |
+| **Modify:** `style.css` | Call page, grid, tiles, controls, speaking glow, focus mode, camera/screen toggle states |
+| **Modify:** `Cargo.toml` | Add web-sys features: `DisplayMediaStreamConstraints`, `AudioContext`, `BaseAudioContext`, `AudioNode`, `AnalyserNode`, `MediaStreamAudioSourceNode`, `RtcSignalingState` |
+
+### 8. Visual Design
+
+The call page should feel **immersive and focused** — a distinct mode shift from chat. When you enter a call, the UI should signal "you're in a live session" through atmosphere, not just layout.
+
+**Call page background:**
+- Darker than `--bg-main` — use `#121215` or a very subtle radial gradient from center (`#16161a`) to edges (`#0e0e12`). This creates depth and draws attention to the participant tiles.
+- No hard borders between call page and sidebar — the call page fills the main content area seamlessly.
+
+**Participant tiles:**
+
+*Audio-only tiles:*
+- Rounded rectangle, `border-radius: 16px`, `aspect-ratio: 16/9` in grid mode
+- Background: unique per-peer gradient derived from their peer ID hash. Generate 2 colors from the peer ID and create a diagonal gradient (`135deg`). This gives every participant a distinct visual identity without requiring profile pictures.
+- Large initial letter centered: `font-size: 48px`, `font-weight: 600`, `color: rgba(255,255,255,0.9)`, slight `text-shadow: 0 2px 8px rgba(0,0,0,0.3)`
+- Display name at bottom: small label overlaid with subtle dark gradient backdrop (`linear-gradient(transparent, rgba(0,0,0,0.6))`)
+
+*Video tiles:*
+- Same rounded rectangle, `border-radius: 16px`, `overflow: hidden`
+- Video element: `object-fit: cover`, fills the tile
+- Display name overlay at bottom-left with semi-transparent backdrop
+- When screen sharing: `object-fit: contain` instead (shows full screen content with letterboxing)
+- Subtle `box-shadow: 0 4px 24px rgba(0,0,0,0.4)` for depth
+
+*Speaking indicator:*
+- `border: 2px solid var(--online)` with `box-shadow: 0 0 0 3px var(--accent-green-glow), 0 0 12px var(--accent-green-glow)`
+- Animated: the glow pulses gently with `animation: speaking-pulse 1.5s ease-in-out infinite`
+- Transition: `border-color 0.2s ease, box-shadow 0.2s ease` for smooth on/off
+
+*Muted indicator:*
+- Small crossed-out mic icon badge in the bottom-right corner of the tile, `background: var(--danger)`, `border-radius: 50%`, `width: 24px; height: 24px`
+
+**Grid layout:**
+- CSS Grid: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))`, `gap: 12px`, `padding: 16px`
+- 1 participant: tile takes full width, max-width ~640px, centered
+- 2 participants: side-by-side, equal width
+- 3-4: 2x2 grid
+- 5+: auto-fit wrapping
+- Tiles animate in with staggered `animation-delay` on entry (`fade-in + scale` from 0.95)
+
+**Focus layout:**
+- Focused tile: `grid-column: 1 / -1`, takes ~75% of vertical space, `max-height: 70vh`
+- Thumbnail row below: `display: flex`, `gap: 8px`, `height: 120px`, `overflow-x: auto`
+- Thumbnails: fixed `width: 160px`, `height: 120px`, `border-radius: 10px`, `cursor: pointer`
+- Clicking thumbnail swaps it to focus; clicking focused tile returns to grid
+- Transition between layouts: `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`
+
+**Control strip:**
+- Fixed at bottom of call page, `padding: 12px 0`, centered
+- Dark translucent bar: `background: rgba(0,0,0,0.4)`, `backdrop-filter: blur(12px)`, `border-radius: 16px`, `padding: 8px 16px`
+- Buttons: circular, `width: 48px; height: 48px`, `border-radius: 50%`
+  - Default: `background: var(--bg-elevated)`, `color: var(--text-primary)`
+  - Hover: `background: var(--bg-input)`, slight scale `transform: scale(1.05)`
+  - Active (muted/camera on/sharing): `background: var(--accent)`, `color: white`
+  - Danger (disconnect): `background: var(--danger)`, `color: white`, wider pill shape `border-radius: 24px; padding: 0 24px`
+- Tooltip on hover showing button name: `font-size: 11px`, appears above with arrow
+- Button icons: the Lucide SVG icons from `icons.rs`, `font-size: 20px`
+- Spacing between buttons: `gap: 8px`
+- On mobile: slightly larger buttons (`56px`), no tooltips
+
+**Top bar:**
+- Minimal: channel name left-aligned, participant count center, duration right-aligned
+- Duration timer: `font-variant-numeric: tabular-nums` (monospace digits for stable width), `color: var(--text-muted)`, `font-size: 13px`
+- Participant count: pill badge `background: var(--bg-input)`, `border-radius: 12px`, `padding: 2px 10px`
+- Layout toggle button (grid/focus): top-right corner, subtle icon button
+
+**Animations:**
+```css
+@keyframes speaking-pulse {
+    0%, 100% { box-shadow: 0 0 0 3px var(--accent-green-glow), 0 0 12px var(--accent-green-glow); }
+    50% { box-shadow: 0 0 0 5px var(--accent-green-glow), 0 0 20px var(--accent-green-glow); }
+}
+
+@keyframes tile-enter {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+```
+
+**Color generation for avatar gradients:**
+Derive two hue values from the peer ID string (hash the first and second half). Use HSL with `saturation: 45%, lightness: 35%` for muted but distinct colors that don't clash with the UI:
+```
+hue1 = hash(peer_id[0..len/2]) % 360
+hue2 = (hue1 + 40 + hash(peer_id[len/2..]) % 60) % 360
+background: linear-gradient(135deg, hsl(hue1, 45%, 35%), hsl(hue2, 45%, 30%))
+```
+
+## Testing
+
+- WASM compilation (`just check-wasm`) must pass.
+- Existing voice E2E tests should still work (video is additive).
+- Manual testing: join voice channel from 2 browsers, verify call page renders, camera works, screen share works, switching between camera and screen share works, speaking indicators pulse, grid/focus layout switching works.
+- Screen sharing cannot be automated in Playwright (browser blocks `getDisplayMedia` in headless mode) — manual test only.
+- Camera can potentially be tested with Playwright's `--use-fake-device-for-media-stream` flag.
+- Test edge cases manually: peer joins mid-share, peer leaves while sharing, simultaneous video start by two peers, switching camera↔screen mid-call.
diff --git a/project/UX Navigation Improvements.md b/project/UX Navigation Improvements.md
new file mode 100644
index 00000000..8ecfcb6a
--- /dev/null
+++ b/project/UX Navigation Improvements.md	
@@ -0,0 +1,53 @@
+# UX Navigation Improvements
+
+## Current Issues
+
+### Settings navigation is confusing
+Two separate panels (User Settings, Server Settings) accessed from different places. Sidebar has both a "Settings" button and a gear icon going to different panels. User must click Settings → link at bottom to reach Server Settings. Two paths, neither intuitive.
+
+### No navigation hierarchy
+Everything is flat panel toggles. Settings, Server Settings, Add Server, Chat all occupy the same space with no breadcrumbs or back-stack. "Back" button exists but no sense of where you are.
+
+### Add Server is buried
+After onboarding, only accessible via tiny "+" on server rail. Not discoverable.
+
+### Invite flow is disconnected
+Inviter goes to Server Settings → enter peer ID → generate code. Invitee starts from Welcome/Add Server. The two sides feel unrelated.
+
+### Role management deeply nested
+Server Settings → scroll → Role Manager. Too hidden for something as important as permissions.
+
+### No confirmation on destructive actions
+Channel delete, kick member, delete message — all single-click, no "are you sure?"
+
+### Mobile sidebar lacks context
+No indication of current server beyond highlighted channel item.
+
+## Improvements to Implement
+
+### 1. Unified settings panel with tabs
+Replace two separate settings panels with a single tabbed panel:
+- **Profile** tab (display name, peer ID)
+- **Server** tab (server name, description, invites)
+- **Roles** tab (role CRUD, permissions)
+
+### 2. Confirmation dialogs for destructive actions
+Add a reusable `<ConfirmDialog>` component. Use for:
+- Channel delete
+- Kick member
+- Delete message
+
+### 3. Breadcrumb in settings header
+Show "Settings > Server > Roles" style breadcrumb so user knows where they are and can navigate back to any level.
+
+### 4. Server context menu
+Right-click (desktop) or long-press (mobile) on server icon shows:
+- Server Settings
+- Invite
+- Leave Server
+
+### 5. Improved invite UX
+Show a "copy invite link" button directly in the sidebar or server header, reducing the steps to share an invite.
+
+### 6. Quick channel switcher
+Ctrl+K opens a search overlay for fast channel/server switching.

From 247ce03267d7552439966ca7d6da03a7bf22655e Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 04:25:03 -0700
Subject: [PATCH 08/18] =?UTF-8?q?fix:=207=20call=20page=20bugs=20=E2=80=94?=
 =?UTF-8?q?=20onended=20cleanup,=20duplicate=20offers,=20audio=20leaks,=20?=
 =?UTF-8?q?navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Screen share onended now calls stop_video_share on VoiceManager
2. create_offer sets making_offer flag to prevent onnegotiationneeded race
3. Audio elements tracked per-peer and removed from DOM on disconnect
4. Remove dead acquire_microphone methods
5. Text channel click closes call page
6. local_video_stream moved to global VoiceState (survives component remount)
7. voice_participants_map cleared on disconnect
8. Remote video defaults to object-fit:cover (not contain)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/app.rs                         |  5 ++
 crates/web/src/components/call_page.rs        | 23 ++---
 crates/web/src/components/participant_tile.rs |  5 +-
 crates/web/src/handlers.rs                    |  1 +
 crates/web/src/state.rs                       | 11 +++
 crates/web/src/voice.rs                       | 90 ++++++++-----------
 6 files changed, 70 insertions(+), 65 deletions(-)

diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index a2bf7848..1d26b344 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -244,11 +244,16 @@ pub fn App() -> impl IntoView {
         write.voice.set_voice_muted.set(false);
         write.voice.set_voice_deafened.set(false);
         write.voice.set_video_source.set(None);
+        write.voice.set_local_video_stream.set(None);
         write.voice.set_remote_video_streams.update(|m| m.clear());
         write
             .voice
             .set_speaking_peers
             .set(std::collections::HashSet::new());
+        write
+            .voice
+            .set_voice_participants_map
+            .update(|m| m.clear());
         write.ui.set_show_call_page.set(false);
         write
             .ui
diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
index 9c7096ca..f75374a1 100644
--- a/crates/web/src/components/call_page.rs
+++ b/crates/web/src/components/call_page.rs
@@ -87,9 +87,8 @@ pub fn CallPage(
     let handle = use_context::<WebClientHandle>().unwrap();
     let vm = use_context::<VoiceManagerHandle>().unwrap();
 
-    // Local video stream signal — tracks the stream to display on the local tile.
-    let (local_video_stream, set_local_video_stream) =
-        signal(Option::<SendWrapper<web_sys::MediaStream>>::None);
+    // Local video stream — stored globally in VoiceState so it survives remounts.
+    let local_video_stream = app_state.voice.local_video_stream;
 
     // Duration timer — increments every second.
     let (duration, set_duration) = signal(0u32);
@@ -111,7 +110,7 @@ pub fn CallPage(
             // Toggle off — stop camera.
             vm_camera.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
-            set_local_video_stream.set(None);
+            write.voice.set_local_video_stream.set(None);
             return;
         }
 
@@ -119,7 +118,7 @@ pub fn CallPage(
         if current_source.is_some() {
             vm_camera.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
-            set_local_video_stream.set(None);
+            write.voice.set_local_video_stream.set(None);
         }
 
         // MUST call getUserMedia synchronously in click handler for gesture.
@@ -146,7 +145,7 @@ pub fn CallPage(
                 let stream_for_signal = SendWrapper::new(stream.clone());
                 vm2.borrow_mut().start_camera(stream);
                 write2.voice.set_video_source.set(Some(VideoSource::Camera));
-                set_local_video_stream.set(Some(stream_for_signal));
+                write2.voice.set_local_video_stream.set(Some(stream_for_signal));
             });
         let on_error = wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
             tracing::error!("Camera access denied");
@@ -165,7 +164,7 @@ pub fn CallPage(
             // Toggle off — stop screen share.
             vm_screen.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
-            set_local_video_stream.set(None);
+            write.voice.set_local_video_stream.set(None);
             return;
         }
 
@@ -173,7 +172,7 @@ pub fn CallPage(
         if current_source.is_some() {
             vm_screen.borrow_mut().stop_video_share();
             write.voice.set_video_source.set(None);
-            set_local_video_stream.set(None);
+            write.voice.set_local_video_stream.set(None);
         }
 
         // MUST call getDisplayMedia synchronously in click handler for gesture.
@@ -197,15 +196,17 @@ pub fn CallPage(
                 let stream_for_signal = SendWrapper::new(stream.clone());
                 vm2.borrow_mut().start_screen_share(stream.clone());
                 write2.voice.set_video_source.set(Some(VideoSource::Screen));
-                set_local_video_stream.set(Some(stream_for_signal));
+                write2.voice.set_local_video_stream.set(Some(stream_for_signal));
 
                 // Listen for the browser's "Stop sharing" chrome button.
                 let tracks = stream.get_video_tracks();
                 let track_val = tracks.get(0);
                 if !track_val.is_undefined() {
                     let track: web_sys::MediaStreamTrack = track_val.unchecked_into();
+                    let vm_ended = vm2.clone();
                     let on_ended = wasm_bindgen::closure::Closure::once(move || {
-                        set_local_video_stream.set(None);
+                        vm_ended.borrow_mut().stop_video_share();
+                        write2.voice.set_local_video_stream.set(None);
                         write2.voice.set_video_source.set(None);
                     });
                     track.set_onended(Some(on_ended.as_ref().unchecked_ref()));
@@ -223,7 +224,7 @@ pub fn CallPage(
     // Disconnect handler — also clear call page.
     let on_disconnect_click = move |_| {
         write.voice.set_video_source.set(None);
-        set_local_video_stream.set(None);
+        write.voice.set_local_video_stream.set(None);
         write.voice.set_remote_video_streams.update(|m| m.clear());
         write.ui.set_show_call_page.set(false);
         write.ui.set_call_layout.set(CallLayout::default());
diff --git a/crates/web/src/components/participant_tile.rs b/crates/web/src/components/participant_tile.rs
index ee741e69..1c4f1fc8 100644
--- a/crates/web/src/components/participant_tile.rs
+++ b/crates/web/src/components/participant_tile.rs
@@ -104,10 +104,11 @@ pub fn ParticipantTile(
         classes.push_str(" local-camera");
     }
 
+    // Local camera uses `local-camera` (object-fit: cover + mirrored).
+    // All other video (remote camera or screen share) uses default
+    // `object-fit: cover` which is a better default than `contain`.
     let video_class = if is_local_camera {
         "local-camera"
-    } else if has_video && !is_local_camera {
-        "screen-share"
     } else {
         ""
     };
diff --git a/crates/web/src/handlers.rs b/crates/web/src/handlers.rs
index ed2b2875..825589cf 100644
--- a/crates/web/src/handlers.rs
+++ b/crates/web/src/handlers.rs
@@ -79,6 +79,7 @@ pub fn make_channel_click_handler(
         write.chat.set_current_channel.set(name.clone());
         write.ui.set_show_sidebar.set(false);
         write.ui.set_show_pinned.set(false);
+        write.ui.set_show_call_page.set(false);
         write.chat.set_messages.set(handle.messages(&name));
         write
             .chat
diff --git a/crates/web/src/state.rs b/crates/web/src/state.rs
index b70df188..7fcac38c 100644
--- a/crates/web/src/state.rs
+++ b/crates/web/src/state.rs
@@ -100,6 +100,10 @@ pub struct VoiceState {
     pub speaking_peers: ReadSignal<HashSet<String>>,
     pub remote_video_streams:
         ReadSignal<HashMap<String, send_wrapper::SendWrapper<web_sys::MediaStream>>>,
+    /// Local video stream (camera or screen share). Stored globally so it
+    /// survives call-page component remounts.
+    pub local_video_stream:
+        ReadSignal<Option<send_wrapper::SendWrapper<web_sys::MediaStream>>>,
 }
 
 // ── Write signals (NOT in context — held by event processing) ────────
@@ -169,6 +173,8 @@ pub struct VoiceWriteSignals {
     pub set_speaking_peers: WriteSignal<HashSet<String>>,
     pub set_remote_video_streams:
         WriteSignal<HashMap<String, send_wrapper::SendWrapper<web_sys::MediaStream>>>,
+    pub set_local_video_stream:
+        WriteSignal<Option<send_wrapper::SendWrapper<web_sys::MediaStream>>>,
 }
 
 /// Create all signal pairs and return the read/write halves.
@@ -223,6 +229,9 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
         String,
         send_wrapper::SendWrapper<web_sys::MediaStream>,
     >::new());
+    let (local_video_stream, set_local_video_stream) = signal(
+        Option::<send_wrapper::SendWrapper<web_sys::MediaStream>>::None,
+    );
 
     let app_state = AppState {
         chat: ChatState {
@@ -271,6 +280,7 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
             video_source,
             speaking_peers,
             remote_video_streams,
+            local_video_stream,
         },
     };
 
@@ -321,6 +331,7 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
             set_video_source,
             set_speaking_peers,
             set_remote_video_streams,
+            set_local_video_stream,
         },
     };
 
diff --git a/crates/web/src/voice.rs b/crates/web/src/voice.rs
index 9c70cef1..9c602a0b 100644
--- a/crates/web/src/voice.rs
+++ b/crates/web/src/voice.rs
@@ -283,32 +283,6 @@ impl VoiceManager {
         config
     }
 
-    /// Request microphone access from the browser.
-    ///
-    /// Must be called before creating offers or handling offers so that local
-    /// audio tracks can be added to peer connections.
-    pub async fn acquire_microphone(&mut self) -> Result<(), String> {
-        let window = web_sys::window().ok_or("no window")?;
-        let navigator = window.navigator();
-        let media_devices = navigator.media_devices().map_err(|_| "no media devices")?;
-
-        let constraints = web_sys::MediaStreamConstraints::new();
-        constraints.set_audio(&true.into());
-        constraints.set_video(&false.into());
-
-        let promise = media_devices
-            .get_user_media_with_constraints(&constraints)
-            .map_err(|_| "getUserMedia failed")?;
-
-        let stream_js = wasm_bindgen_futures::JsFuture::from(promise)
-            .await
-            .map_err(|_| "microphone access denied")?;
-
-        let stream: MediaStream = stream_js.unchecked_into();
-        self.local_stream = Some(stream);
-        Ok(())
-    }
-
     /// Add local audio tracks (and video track if sharing) to a peer connection.
     ///
     /// Returns `Some(RtcRtpSender)` if a video track was added, so the caller
@@ -394,9 +368,16 @@ impl VoiceManager {
                 }
 
                 // Create <audio> element for remote audio playback.
+                // Uses a peer-id-based DOM id so close_connection can remove it.
                 if let Some(window) = web_sys::window() {
                     if let Some(document) = window.document() {
+                        // Remove any existing audio element for this peer first.
+                        let audio_id = format!("willow-audio-{}", peer_id);
+                        if let Some(existing) = document.get_element_by_id(&audio_id) {
+                            existing.remove();
+                        }
                         if let Ok(el) = document.create_element("audio") {
+                            el.set_id(&audio_id);
                             let audio: web_sys::HtmlMediaElement = el.unchecked_into();
                             audio.set_src_object(Some(&stream));
                             audio.set_autoplay(true);
@@ -528,6 +509,11 @@ impl VoiceManager {
     pub async fn create_offer(&mut self, remote_peer: &str) -> Result<(), String> {
         let (state, video_sender) = self.get_or_create_connection(remote_peer)?;
         let pc = state.pc.clone();
+        let making_offer = state.making_offer.clone();
+
+        // Prevent the onnegotiationneeded handler from firing a duplicate offer
+        // while we are creating one here.
+        making_offer.set(true);
 
         // Store video sender if a new connection was created with video.
         if let Some(sender) = video_sender {
@@ -535,9 +521,13 @@ impl VoiceManager {
         }
 
         // Create offer.
-        let offer = wasm_bindgen_futures::JsFuture::from(pc.create_offer())
-            .await
-            .map_err(|_| "create_offer failed")?;
+        let offer = match wasm_bindgen_futures::JsFuture::from(pc.create_offer()).await {
+            Ok(o) => o,
+            Err(_) => {
+                making_offer.set(false);
+                return Err("create_offer failed".to_string());
+            }
+        };
 
         let offer_sdp = js_sys::Reflect::get(&offer, &"sdp".into())
             .unwrap_or_default()
@@ -547,12 +537,17 @@ impl VoiceManager {
         // Set local description.
         let desc = RtcSessionDescriptionInit::new(RtcSdpType::Offer);
         desc.set_sdp(&offer_sdp);
-        wasm_bindgen_futures::JsFuture::from(pc.set_local_description(&desc))
+        if wasm_bindgen_futures::JsFuture::from(pc.set_local_description(&desc))
             .await
-            .map_err(|_| "set_local_description failed")?;
+            .is_err()
+        {
+            making_offer.set(false);
+            return Err("set_local_description failed".to_string());
+        }
 
         // Send offer to remote peer.
         (self.on_signal)(remote_peer, "offer", &offer_sdp);
+        making_offer.set(false);
 
         Ok(())
     }
@@ -727,6 +722,9 @@ impl VoiceManager {
     }
 
     /// Close the connection to a specific remote peer.
+    ///
+    /// Also removes the `<audio>` element created for this peer's remote
+    /// audio playback so elements do not accumulate across reconnects.
     pub fn close_connection(&mut self, remote_peer: &str) {
         self.video_senders.remove(remote_peer);
         if let Some(ref mut detector) = self.speaking_detector {
@@ -736,6 +734,15 @@ impl VoiceManager {
         if let Some(state) = self.connections.remove(remote_peer) {
             state.pc.close();
         }
+        // Remove the <audio> element from the DOM.
+        if let Some(window) = web_sys::window() {
+            if let Some(document) = window.document() {
+                let audio_id = format!("willow-audio-{}", remote_peer);
+                if let Some(el) = document.get_element_by_id(&audio_id) {
+                    el.remove();
+                }
+            }
+        }
     }
 
     /// Close all connections, stop video sharing, and release the microphone.
@@ -759,24 +766,3 @@ impl VoiceManager {
     }
 }
 
-/// Acquire the microphone as a standalone async function.
-/// This avoids holding a `RefCell` borrow across an `.await` boundary.
-pub async fn acquire_microphone_async() -> Result<MediaStream, String> {
-    let window = web_sys::window().ok_or("no window")?;
-    let navigator = window.navigator();
-    let media_devices = navigator.media_devices().map_err(|_| "no media devices")?;
-
-    let constraints = web_sys::MediaStreamConstraints::new();
-    constraints.set_audio(&true.into());
-    constraints.set_video(&false.into());
-
-    let promise = media_devices
-        .get_user_media_with_constraints(&constraints)
-        .map_err(|_| "getUserMedia failed")?;
-
-    let stream_js = wasm_bindgen_futures::JsFuture::from(promise)
-        .await
-        .map_err(|_| "microphone access denied")?;
-
-    Ok(stream_js.unchecked_into())
-}

From 39f8eeb4b9d7da2c8ac579ab28497ebaf90f3ec6 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 04:41:56 -0700
Subject: [PATCH 09/18] fix: remote peer not receiving screen share video

Two bugs:
1. ontrack handler silently dropped video tracks when ev.streams()
   was empty (common during renegotiation when SDP lacks a=msid).
   Now creates a MediaStream from the track as fallback.
2. onnegotiationneeded handler didn't guard against duplicate offers
   when making_offer was already true. Added early return check.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/voice.rs | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/crates/web/src/voice.rs b/crates/web/src/voice.rs
index 9c602a0b..b8031762 100644
--- a/crates/web/src/voice.rs
+++ b/crates/web/src/voice.rs
@@ -346,10 +346,16 @@ impl VoiceManager {
         let on_track = Closure::wrap(Box::new(move |ev: RtcTrackEvent| {
             let track: web_sys::MediaStreamTrack = ev.track();
             let streams = ev.streams();
-            if streams.length() == 0 {
-                return;
-            }
-            let stream: MediaStream = streams.get(0).unchecked_into();
+            // Renegotiated tracks may arrive without an associated stream
+            // (empty streams array when SDP lacks a=msid). Create one from
+            // the track so video still works.
+            let stream: MediaStream = if streams.length() > 0 {
+                streams.get(0).unchecked_into()
+            } else {
+                let s = MediaStream::new().unwrap();
+                s.add_track(&track);
+                s
+            };
 
             if track.kind() == "audio" {
                 // Register the remote audio stream with the speaking detector.
@@ -431,6 +437,11 @@ impl VoiceManager {
             let flag = making_offer.clone();
 
             wasm_bindgen_futures::spawn_local(async move {
+                // Guard: skip if another offer is already in progress
+                // (e.g., create_offer set making_offer before this fires).
+                if flag.get() {
+                    return;
+                }
                 flag.set(true);
 
                 let offer_result =

From b12ee896e40d2909cc1e411b9958358079d43ec8 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 05:57:45 -0700
Subject: [PATCH 10/18] fix: tabbed settings panel, voice reconnect
 participants, cleanup

1. Rewrite SettingsPanel as tabbed (Profile/Server/Roles) with breadcrumb
2. Delete server_settings.rs (merged into settings.rs)
3. Seed voice_participants_map from client state on rejoin
4. Add local user to participants map on voice join

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/app.rs                        |  29 ++-
 crates/web/src/components/mod.rs             |   1 +
 crates/web/src/components/server_settings.rs | 128 -----------
 crates/web/src/components/settings.rs        | 210 +++++++++++++++----
 crates/web/src/state.rs                      |   1 +
 5 files changed, 202 insertions(+), 167 deletions(-)
 delete mode 100644 crates/web/src/components/server_settings.rs

diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index 1d26b344..b36b5da9 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -418,6 +418,25 @@ pub fn App() -> impl IntoView {
                                         let stream: web_sys::MediaStream = stream.unchecked_into();
                                         vm2.borrow_mut().set_local_stream(stream);
                                         vc.join_voice(&ch_name);
+
+                                        // Seed participants from client state after joining.
+                                        // This ensures that on reconnect we pick up peers
+                                        // who are already in the channel (their VoiceJoined
+                                        // event was received before we joined).
+                                        let parts = vc.voice_participants(&ch_name);
+                                        write.voice.set_voice_participants_map.update(|m| {
+                                            let list = m.entry(ch_name.clone()).or_default();
+                                            for p in parts {
+                                                if !list.contains(&p) {
+                                                    list.push(p);
+                                                }
+                                            }
+                                            // Also add the local user.
+                                            let my_id = vc.peer_id();
+                                            if !list.contains(&my_id) {
+                                                list.push(my_id);
+                                            }
+                                        });
                                     });
                                     let on_error = wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
                                         tracing::error!("Microphone access denied");
@@ -465,9 +484,13 @@ pub fn App() -> impl IntoView {
                                         </div>
                                     }.into_any()
                                 } else if show_settings.get() {
-                                    view! { <SettingsPanel peer_id=peer_id on_server_settings=move |_| {
-                                        write.ui.set_show_settings.set(false);
-                                    } /> }.into_any()
+                                    let tab = app_state.ui.settings_tab.get_untracked();
+                                    view! { <SettingsPanel
+                                        peer_id=peer_id
+                                        roles=Signal::from(_roles)
+                                        default_tab=tab
+                                        on_close=move |_| write.ui.set_show_settings.set(false)
+                                    /> }.into_any()
                                 } else if show_call_page.get() {
                                     let on_mute_cp = on_mute.clone();
                                     let on_deafen_cp = on_deafen.clone();
diff --git a/crates/web/src/components/mod.rs b/crates/web/src/components/mod.rs
index 44f18f48..3d0150cd 100644
--- a/crates/web/src/components/mod.rs
+++ b/crates/web/src/components/mod.rs
@@ -29,6 +29,7 @@ pub use member_list::*;
 pub use message::*;
 pub use participant_tile::*;
 pub use pinned::*;
+pub use roles::*;
 pub use server_list::*;
 pub use settings::*;
 pub use sidebar::*;
diff --git a/crates/web/src/components/server_settings.rs b/crates/web/src/components/server_settings.rs
deleted file mode 100644
index 473ddc1d..00000000
--- a/crates/web/src/components/server_settings.rs
+++ /dev/null
@@ -1,128 +0,0 @@
-use leptos::prelude::*;
-
-use crate::app::WebClientHandle;
-use crate::components::RoleManager;
-use crate::icons;
-use crate::util::copy_to_clipboard;
-
-/// A single role entry: (role_id, role_name, list of granted permission strings).
-type RoleEntry = (String, String, Vec<String>);
-
-/// Server settings panel -- invite generation, role management, and server info.
-#[component]
-pub fn ServerSettingsPanel(
-    peer_id: ReadSignal<String>,
-    #[prop(into)] roles: Signal<Vec<RoleEntry>>,
-    on_back: impl Fn(()) + Send + Clone + 'static,
-) -> impl IntoView {
-    let handle = use_context::<WebClientHandle>().unwrap();
-
-    let (invite_peer, set_invite_peer) = signal(String::new());
-    let (invite_code, set_invite_code) = signal(String::new());
-    let (status_msg, set_status_msg) = signal(String::new());
-
-    let server_name = handle.active_server_name();
-
-    // Generate invite handler.
-    let handle_invite = handle.clone();
-    let on_generate_invite = move |_| {
-        let recipient = invite_peer.get_untracked();
-        if recipient.trim().is_empty() {
-            set_status_msg.set("Enter a recipient Peer ID.".to_string());
-            return;
-        }
-        match handle_invite.generate_invite(recipient.trim()) {
-            Ok(code) => {
-                set_invite_code.set(code);
-                set_status_msg.set("Invite generated.".to_string());
-            }
-            Err(e) => {
-                set_status_msg.set(format!("Error: {e}"));
-            }
-        }
-    };
-
-    // Copy invite code handler.
-    let on_copy_invite = move |_| {
-        let code = invite_code.get_untracked();
-        if !code.is_empty() {
-            copy_to_clipboard(&code);
-            set_status_msg.set("Invite code copied.".to_string());
-        }
-    };
-
-    // Copy peer ID handler.
-    let on_copy_peer_id = move |_| {
-        let id = peer_id.get_untracked();
-        copy_to_clipboard(&id);
-        set_status_msg.set("Peer ID copied.".to_string());
-    };
-
-    view! {
-        <div class="settings-panel server-settings">
-            <div class="server-settings-header">
-                <button class="btn btn-sm" on:click=move |_| on_back(())>
-                    {icons::icon_arrow_left()} " Back"
-                </button>
-                <h2>{server_name}</h2>
-            </div>
-
-            // Status message.
-            {move || {
-                let msg = status_msg.get();
-                if msg.is_empty() {
-                    None
-                } else {
-                    Some(view! {
-                        <div class="settings-status">{msg}</div>
-                    })
-                }
-            }}
-
-            // Invite section.
-            <div class="settings-section invite-section">
-                <h3>"Invite a Peer"</h3>
-                <p class="settings-hint">"The recipient needs to share their Peer ID with you first."</p>
-                <label>"Recipient Peer ID"</label>
-                <input
-                    type="text"
-                    placeholder="12D3KooW..."
-                    prop:value=move || invite_peer.get()
-                    on:input=move |ev| set_invite_peer.set(event_target_value(&ev))
-                />
-                <button class="btn btn-primary" on:click=on_generate_invite>"Generate Invite"</button>
-                {move || {
-                    let code = invite_code.get();
-                    if code.is_empty() {
-                        None
-                    } else {
-                        Some(view! {
-                            <div class="invite-code-display">
-                                <textarea readonly prop:value=code.clone()></textarea>
-                                <button class="btn btn-sm" on:click=on_copy_invite>"Copy"</button>
-                            </div>
-                        })
-                    }
-                }}
-            </div>
-
-            // Your Peer ID (for sharing).
-            <div class="settings-section">
-                <h3>"Your Peer ID"</h3>
-                <p class="settings-hint">"Share this with others so they can invite you to their servers."</p>
-                <div class="peer-id-display">
-                    <code class="peer-id-text">{move || peer_id.get()}</code>
-                    <button class="btn btn-sm" on:click=on_copy_peer_id>"Copy"</button>
-                </div>
-            </div>
-
-            // Role management section.
-            <div class="settings-section role-section">
-                <RoleManager
-                    peer_id=peer_id
-                    roles=roles
-                />
-            </div>
-        </div>
-    }
-}
diff --git a/crates/web/src/components/settings.rs b/crates/web/src/components/settings.rs
index d72a00bc..a832949f 100644
--- a/crates/web/src/components/settings.rs
+++ b/crates/web/src/components/settings.rs
@@ -1,26 +1,51 @@
 use leptos::prelude::*;
 
 use crate::app::WebClientHandle;
+use crate::components::RoleManager;
 use crate::icons;
+use crate::state::{AppState, SettingsTab};
 use crate::util::copy_to_clipboard;
 
-/// Profile settings panel -- display name, relay address, peer ID.
+/// A single role entry: (role_id, role_name, list of granted permission strings).
+type RoleEntry = (String, String, Vec<String>);
+
+/// Tabbed settings panel combining Profile, Server, and Roles tabs.
+///
+/// Reads the initial tab from `default_tab` and maintains a local signal
+/// for tab switching. The Profile tab shows display name and peer ID.
+/// The Server tab shows invite generation and peer ID sharing. The Roles
+/// tab renders the `RoleManager` (visible only for the server owner).
 #[component]
 pub fn SettingsPanel(
     peer_id: ReadSignal<String>,
-    on_server_settings: impl Fn(()) + Send + Clone + 'static,
+    #[prop(into)] roles: Signal<Vec<RoleEntry>>,
+    default_tab: SettingsTab,
+    on_close: impl Fn(()) + Send + Clone + 'static,
 ) -> impl IntoView {
     let handle = use_context::<WebClientHandle>().unwrap();
+    let app_state = use_context::<AppState>().unwrap();
 
-    let (display_name, set_display_name) = signal(String::new());
+    let (active_tab, set_active_tab) = signal(default_tab);
     let (status_msg, set_status_msg) = signal(String::new());
-    let (server_name, set_server_name) = signal(String::new());
 
-    // Initialize from client.
-    set_display_name.set(handle.server_display_name());
-    set_server_name.set(handle.active_server_name());
+    // Determine if the local user is the server owner.
+    let handle_owner = handle.clone();
+    let is_owner = move || {
+        let pid = peer_id.get();
+        handle_owner.server_owner() == pid
+    };
+
+    // Tab display name.
+    let tab_name = move || match active_tab.get() {
+        SettingsTab::Profile => "Profile",
+        SettingsTab::Server => "Server",
+        SettingsTab::Roles => "Roles",
+    };
+
+    // ── Profile tab handlers ─────────────────────────────────────────
+    let (display_name, set_display_name) = signal(handle.server_display_name());
+    let server_name = handle.active_server_name();
 
-    // Save handler.
     let handle_save = handle.clone();
     let on_save = move |_| {
         let name = display_name.get_untracked();
@@ -30,16 +55,87 @@ pub fn SettingsPanel(
         set_status_msg.set("Saved.".to_string());
     };
 
-    // Copy peer ID.
-    let on_copy_peer_id = move |_| {
+    let on_copy_peer_id_profile = move |_| {
+        let id = peer_id.get_untracked();
+        copy_to_clipboard(&id);
+        set_status_msg.set("Peer ID copied.".to_string());
+    };
+
+    // ── Server tab handlers ──────────────────────────────────────────
+    let (invite_peer, set_invite_peer) = signal(String::new());
+    let (invite_code, set_invite_code) = signal(String::new());
+
+    let handle_invite = handle.clone();
+    let on_generate_invite = move |_| {
+        let recipient = invite_peer.get_untracked();
+        if recipient.trim().is_empty() {
+            set_status_msg.set("Enter a recipient Peer ID.".to_string());
+            return;
+        }
+        match handle_invite.generate_invite(recipient.trim()) {
+            Ok(code) => {
+                set_invite_code.set(code);
+                set_status_msg.set("Invite generated.".to_string());
+            }
+            Err(e) => {
+                set_status_msg.set(format!("Error: {e}"));
+            }
+        }
+    };
+
+    let on_copy_invite = move |_| {
+        let code = invite_code.get_untracked();
+        if !code.is_empty() {
+            copy_to_clipboard(&code);
+            set_status_msg.set("Invite code copied.".to_string());
+        }
+    };
+
+    let on_copy_peer_id_server = move |_| {
         let id = peer_id.get_untracked();
         copy_to_clipboard(&id);
         set_status_msg.set("Peer ID copied.".to_string());
     };
 
+    // Read the actual server name reactively for the header.
+    let active_server_name = app_state.server.active_server_name;
+
     view! {
         <div class="settings-panel">
-            <h2>"Settings"</h2>
+            // Breadcrumb header: back arrow + "Settings / TabName"
+            <div class="server-settings-header">
+                <button class="btn btn-sm" on:click=move |_| on_close(())>
+                    {icons::icon_arrow_left()} " Back"
+                </button>
+                <h2>"Settings / " {tab_name}</h2>
+            </div>
+
+            // Tab buttons.
+            <div class="settings-tabs">
+                <button
+                    class=move || if active_tab.get() == SettingsTab::Profile { "tab-btn active" } else { "tab-btn" }
+                    on:click=move |_| set_active_tab.set(SettingsTab::Profile)
+                >"Profile"</button>
+                <button
+                    class=move || if active_tab.get() == SettingsTab::Server { "tab-btn active" } else { "tab-btn" }
+                    on:click=move |_| set_active_tab.set(SettingsTab::Server)
+                >"Server"</button>
+                {
+                    let owner_check = is_owner.clone();
+                    move || {
+                        if owner_check() {
+                            Some(view! {
+                                <button
+                                    class=move || if active_tab.get() == SettingsTab::Roles { "tab-btn active" } else { "tab-btn" }
+                                    on:click=move |_| set_active_tab.set(SettingsTab::Roles)
+                                >"Roles"</button>
+                            })
+                        } else {
+                            None
+                        }
+                    }
+                }
+            </div>
 
             // Status message.
             {move || {
@@ -53,37 +149,79 @@ pub fn SettingsPanel(
                 }
             }}
 
-            // Peer ID display.
-            <div class="settings-section">
-                <label>"Your Peer ID"</label>
-                <div class="peer-id-display">
-                    <code class="peer-id-text">{move || peer_id.get()}</code>
-                    <button class="btn btn-sm" on:click=on_copy_peer_id>"Copy"</button>
+            // Profile tab content.
+            <div class="settings-tab-content" style=move || if active_tab.get() == SettingsTab::Profile { "" } else { "display:none" }>
+                <div class="settings-section">
+                    <label>"Your Peer ID"</label>
+                    <div class="peer-id-display">
+                        <code class="peer-id-text">{move || peer_id.get()}</code>
+                        <button class="btn btn-sm" on:click=on_copy_peer_id_profile>"Copy"</button>
+                    </div>
+                </div>
+                <div class="settings-section">
+                    <div class="settings-server-label">
+                        <span class="settings-server-prefix">"Profile for: "</span>
+                        <span class="settings-server-name">{server_name}</span>
+                    </div>
+                    <label>"Display Name (this server)"</label>
+                    <input
+                        type="text"
+                        placeholder="Enter display name..."
+                        prop:value=move || display_name.get()
+                        on:input=move |ev| set_display_name.set(event_target_value(&ev))
+                    />
                 </div>
+                <button class="btn btn-primary" on:click=on_save>"Save"</button>
             </div>
 
-            // Per-server profile.
-            <div class="settings-section">
-                <div class="settings-server-label">
-                    <span class="settings-server-prefix">"Profile for: "</span>
-                    <span class="settings-server-name">{move || server_name.get()}</span>
+            // Server tab content.
+            <div class="settings-tab-content" style=move || if active_tab.get() == SettingsTab::Server { "" } else { "display:none" }>
+                <div class="settings-section">
+                    <h3>{move || active_server_name.get()}</h3>
+                </div>
+                <div class="settings-section invite-section">
+                    <h3>"Invite a Peer"</h3>
+                    <p class="settings-hint">"The recipient needs to share their Peer ID with you first."</p>
+                    <label>"Recipient Peer ID"</label>
+                    <input
+                        type="text"
+                        placeholder="12D3KooW..."
+                        prop:value=move || invite_peer.get()
+                        on:input=move |ev| set_invite_peer.set(event_target_value(&ev))
+                    />
+                    <button class="btn btn-primary" on:click=on_generate_invite>"Generate Invite"</button>
+                    {move || {
+                        let code = invite_code.get();
+                        if code.is_empty() {
+                            None
+                        } else {
+                            Some(view! {
+                                <div class="invite-code-display">
+                                    <textarea readonly prop:value=code.clone()></textarea>
+                                    <button class="btn btn-sm" on:click=on_copy_invite>"Copy"</button>
+                                </div>
+                            })
+                        }
+                    }}
+                </div>
+                <div class="settings-section">
+                    <h3>"Your Peer ID"</h3>
+                    <p class="settings-hint">"Share this with others so they can invite you to their servers."</p>
+                    <div class="peer-id-display">
+                        <code class="peer-id-text">{move || peer_id.get()}</code>
+                        <button class="btn btn-sm" on:click=on_copy_peer_id_server>"Copy"</button>
+                    </div>
                 </div>
-                <label>"Display Name (this server)"</label>
-                <input
-                    type="text"
-                    placeholder="Enter display name..."
-                    prop:value=move || display_name.get()
-                    on:input=move |ev| set_display_name.set(event_target_value(&ev))
-                />
             </div>
 
-            <button class="btn btn-primary" on:click=on_save>"Save"</button>
-
-            // Link to server settings.
-            <div class="settings-section" style="margin-top: 24px;">
-                <button class="btn btn-secondary server-settings-link" on:click=move |_| on_server_settings(())>
-                    "Server Settings " {icons::icon_arrow_right()}
-                </button>
+            // Roles tab content.
+            <div class="settings-tab-content" style=move || if active_tab.get() == SettingsTab::Roles { "" } else { "display:none" }>
+                <div class="settings-section role-section">
+                    <RoleManager
+                        peer_id=peer_id
+                        roles=roles
+                    />
+                </div>
             </div>
         </div>
     }
diff --git a/crates/web/src/state.rs b/crates/web/src/state.rs
index 7fcac38c..96b6a02a 100644
--- a/crates/web/src/state.rs
+++ b/crates/web/src/state.rs
@@ -21,6 +21,7 @@ pub enum SettingsTab {
     #[default]
     Profile,
     Server,
+    Roles,
 }
 
 /// Per-channel UI state. Extensible for future needs (drafts, scroll pos).

From bf4b133fc3a9f7e902a826e34d8f74840aedfc73 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 06:27:56 -0700
Subject: [PATCH 11/18] =?UTF-8?q?fix:=20settings=20tabs=20CSS=20=E2=80=94?=
 =?UTF-8?q?=20match=20.tab-btn=20class,=20add=20glow=20+=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component renders .tab-btn but CSS targeted .settings-tab.
Fixed selector, added accent glow on active underline, proper spacing,
hover state, and consistent breadcrumb header styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/style.css | 85 +++++++++++++++++++++++++++++++-------------
 1 file changed, 60 insertions(+), 25 deletions(-)

diff --git a/crates/web/style.css b/crates/web/style.css
index 03e1cf94..6c4029bc 100644
--- a/crates/web/style.css
+++ b/crates/web/style.css
@@ -3038,15 +3038,19 @@ select:focus-visible {
 @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
 
 /* ── Settings Tabs ──────────────────────────────────────────────── */
+
 .settings-tabs {
     display: flex;
-    gap: 2px;
-    padding: 0 16px;
+    gap: 0;
+    padding: 0 20px;
     border-bottom: 1px solid var(--border);
-    margin-bottom: 16px;
+    margin-bottom: 0;
+    background: transparent;
 }
-.settings-tab {
-    padding: 10px 16px;
+
+.settings-tabs .tab-btn {
+    position: relative;
+    padding: 12px 20px;
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
@@ -3055,33 +3059,64 @@ select:focus-visible {
     font-family: inherit;
     font-size: 13px;
     font-weight: 500;
-    transition: color var(--transition-fast), border-color var(--transition-fast);
+    letter-spacing: 0.01em;
+    transition: color var(--transition-normal), border-color var(--transition-normal), background var(--transition-fast);
+    -webkit-tap-highlight-color: transparent;
+}
+
+.settings-tabs .tab-btn:hover {
+    color: var(--text-secondary);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.settings-tabs .tab-btn.active {
+    color: var(--text-primary);
+    border-bottom-color: var(--accent);
 }
-.settings-tab:hover { color: var(--text-secondary); }
-.settings-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
 
-.settings-breadcrumb {
+/* Subtle glow on active tab underline */
+.settings-tabs .tab-btn.active::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 20%;
+    right: 20%;
+    height: 2px;
+    background: var(--accent);
+    box-shadow: 0 0 8px var(--accent-glow), 0 0 2px var(--accent);
+    border-radius: 1px;
+}
+
+/* ── Settings Breadcrumb / Header ──────────────────────────────── */
+
+.settings-panel .server-settings-header {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 16px;
+    gap: 12px;
+    padding: 16px 20px;
     border-bottom: 1px solid var(--border);
-    font-size: 14px;
-    color: var(--text-muted);
 }
-.settings-breadcrumb .back-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    transition: color var(--transition-fast);
+
+.settings-panel .server-settings-header h2 {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+/* Tab content padding */
+.settings-tab-content {
+    padding: 20px;
+}
+
+/* Section spacing inside tabs */
+.settings-tab-content .settings-section {
+    margin-bottom: 20px;
+}
+
+.settings-tab-content .settings-section:last-child {
+    margin-bottom: 0;
 }
-.settings-breadcrumb .back-btn:hover { color: var(--text-primary); }
-.settings-breadcrumb .separator { color: var(--text-muted); }
-.settings-breadcrumb .current { color: var(--text-primary); font-weight: 500; }
 
 /* ── Command Palette ─────────────────────────────────────────────── */
 

From 18314218a023f9b704e15b69af7b22c45744a060 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 06:47:41 -0700
Subject: [PATCH 12/18] =?UTF-8?q?test:=20add=20cross-browser=20E2E=20tests?=
 =?UTF-8?q?=20(mobile=20Chrome=20=E2=86=94=20desktop=20Firefox)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two tests launching different browser engines to verify P2P sync
works across browser types. Both pass — confirms the relay handles
cross-browser WebSocket connections correctly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 e2e/cross-browser-sync.spec.ts | 153 +++++++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 e2e/cross-browser-sync.spec.ts

diff --git a/e2e/cross-browser-sync.spec.ts b/e2e/cross-browser-sync.spec.ts
new file mode 100644
index 00000000..92bbc800
--- /dev/null
+++ b/e2e/cross-browser-sync.spec.ts
@@ -0,0 +1,153 @@
+import { test, expect, chromium, firefox, devices } from '@playwright/test';
+import { freshStart, createServer, sendMessage, waitForMessage, waitForApp, getPeerId, openSidebar } from './helpers';
+
+/**
+ * Cross-browser sync tests.
+ *
+ * These tests launch DIFFERENT browser types (e.g., mobile Chrome + desktop Firefox)
+ * to replicate real-world cross-browser P2P connectivity.
+ * They do NOT use the Playwright project's browser fixture — they launch browsers directly.
+ */
+test.describe('Cross-browser peer sync', () => {
+  // These tests are slow — they launch two separate browser engines.
+  test.setTimeout(120_000);
+
+  // Only run from one project to avoid duplicating (each test launches its own browsers).
+  test.beforeEach(({}, testInfo) => {
+    test.skip(testInfo.project.name !== 'desktop-chrome', 'cross-browser tests run once from desktop-chrome');
+  });
+
+  test('mobile Chrome to desktop Firefox — invite + messaging', async () => {
+    // Launch mobile Chrome (Pixel 7 viewport).
+    const mobileBrowser = await chromium.launch();
+    const mobileCtx = await mobileBrowser.newContext({
+      ...devices['Pixel 7'],
+    });
+    const mobilePage = await mobileCtx.newPage();
+
+    // Launch desktop Firefox.
+    const desktopBrowser = await firefox.launch();
+    const desktopCtx = await desktopBrowser.newContext({
+      ...devices['Desktop Firefox'],
+    });
+    const desktopPage = await desktopCtx.newPage();
+
+    try {
+      // Desktop Firefox: create server.
+      await freshStart(desktopPage);
+      await createServer(desktopPage, 'CrossBrowser Test', 'DesktopUser');
+
+      // Mobile Chrome: get peer ID from welcome screen.
+      await freshStart(mobilePage);
+      const mobilePeerId = await getPeerId(mobilePage);
+      expect(mobilePeerId).toBeTruthy();
+
+      // Desktop Firefox: generate invite for mobile peer.
+      await desktopPage.locator('.server-gear-btn').click();
+      await desktopPage.waitForTimeout(500);
+      await desktopPage.locator('input[placeholder*="12D3KooW"]').fill(mobilePeerId);
+      await desktopPage.locator('button', { hasText: 'Generate Invite' }).click();
+      await desktopPage.waitForTimeout(500);
+      const inviteCode = await desktopPage.locator('.invite-code-display textarea').inputValue();
+      expect(inviteCode).toBeTruthy();
+
+      // Desktop Firefox: go back to chat.
+      await desktopPage.locator('text=Back').click();
+      await desktopPage.waitForTimeout(500);
+
+      // Mobile Chrome: join via invite.
+      await mobilePage.locator('.welcome-invite-input').fill(inviteCode);
+      await mobilePage.locator('button', { hasText: 'Next' }).click();
+      await mobilePage.waitForTimeout(500);
+      await mobilePage.locator('button', { hasText: 'Join Server' }).click();
+      await mobilePage.waitForSelector('.sidebar, .app', { timeout: 15_000 });
+      await mobilePage.waitForTimeout(5000); // Wait for P2P sync.
+
+      // Verify mobile sees the server (sidebar should have "general" channel).
+      await openSidebar(mobilePage);
+      await expect(mobilePage.locator('.channel-item', { hasText: 'general' }))
+        .toBeVisible({ timeout: 15_000 });
+
+      // Desktop Firefox: send a message.
+      await sendMessage(desktopPage, 'Hello from Firefox desktop');
+
+      // Mobile Chrome: should see the message.
+      await waitForMessage(mobilePage, 'Hello from Firefox desktop', 30_000);
+
+      // Mobile Chrome: send a reply.
+      await sendMessage(mobilePage, 'Hello from Chrome mobile');
+
+      // Desktop Firefox: should see the reply.
+      await waitForMessage(desktopPage, 'Hello from Chrome mobile', 30_000);
+
+    } finally {
+      await mobileCtx.close();
+      await mobileBrowser.close();
+      await desktopCtx.close();
+      await desktopBrowser.close();
+    }
+  });
+
+  test('desktop Firefox to mobile Chrome — invite + channel sync', async () => {
+    const mobileBrowser = await chromium.launch();
+    const mobileCtx = await mobileBrowser.newContext({
+      ...devices['Pixel 7'],
+    });
+    const mobilePage = await mobileCtx.newPage();
+
+    const desktopBrowser = await firefox.launch();
+    const desktopCtx = await desktopBrowser.newContext({
+      ...devices['Desktop Firefox'],
+    });
+    const desktopPage = await desktopCtx.newPage();
+
+    try {
+      // Mobile Chrome creates the server this time.
+      await freshStart(mobilePage);
+      await createServer(mobilePage, 'Mobile Server', 'MobileUser');
+
+      // Desktop Firefox gets peer ID.
+      await freshStart(desktopPage);
+      const desktopPeerId = await getPeerId(desktopPage);
+      expect(desktopPeerId).toBeTruthy();
+
+      // Mobile Chrome: open settings to generate invite.
+      await openSidebar(mobilePage);
+      await mobilePage.locator('.server-gear-btn').click();
+      await mobilePage.waitForTimeout(500);
+      await mobilePage.locator('input[placeholder*="12D3KooW"]').fill(desktopPeerId);
+      await mobilePage.locator('button', { hasText: 'Generate Invite' }).click();
+      await mobilePage.waitForTimeout(500);
+      const inviteCode = await mobilePage.locator('.invite-code-display textarea').inputValue();
+      expect(inviteCode).toBeTruthy();
+
+      // Mobile Chrome: go back.
+      await mobilePage.locator('text=Back').click();
+      await mobilePage.waitForTimeout(500);
+
+      // Desktop Firefox: join via invite.
+      await desktopPage.locator('.welcome-invite-input').fill(inviteCode);
+      await desktopPage.locator('button', { hasText: 'Next' }).click();
+      await desktopPage.waitForTimeout(500);
+      await desktopPage.locator('button', { hasText: 'Join Server' }).click();
+      await desktopPage.waitForSelector('.sidebar', { timeout: 15_000 });
+      await desktopPage.waitForTimeout(5000);
+
+      // Desktop should see "general" channel.
+      await expect(desktopPage.locator('.channel-item', { hasText: 'general' }))
+        .toBeVisible({ timeout: 15_000 });
+
+      // Mobile sends a message.
+      await sendMessage(mobilePage, 'Cross browser works!');
+
+      // Desktop should see it.
+      await waitForMessage(desktopPage, 'Cross browser works!', 30_000);
+
+    } finally {
+      await mobileCtx.close();
+      await mobileBrowser.close();
+      await desktopCtx.close();
+      await desktopBrowser.close();
+    }
+  });
+});

From 8645c26652cd7dbdf57a4b62c8c1bd56697059ef Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 06:59:18 -0700
Subject: [PATCH 13/18] feat: auto-reconnect with exponential backoff on WASM
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the WebSocket connection to the relay drops (low battery, network
switch, tab backgrounding), the network layer now automatically retries
with exponential backoff (1s → 2s → 4s → ... → 30s cap). Backoff resets
on successful node start and on peer connection. Commands queue during
reconnect and are processed on the next successful connection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/client/src/network.rs | 206 ++++++++++++++++++++---------------
 1 file changed, 117 insertions(+), 89 deletions(-)

diff --git a/crates/client/src/network.rs b/crates/client/src/network.rs
index 8daaee52..f2d54862 100644
--- a/crates/client/src/network.rs
+++ b/crates/client/src/network.rs
@@ -342,110 +342,138 @@ async fn run_network_wasm(
     use futures::StreamExt;
     use willow_network::{NetworkEvent as NetEvt, NetworkNode};
 
-    let (node, mut events) = NetworkNode::start(identity, config).await?;
-    let mut file_mgr = crate::files::FileManager::new();
-    let local_peer_id = node.peer_id().to_string();
+    let mut backoff_ms: u32 = 1_000;
+    const MAX_BACKOFF_MS: u32 = 30_000;
 
     loop {
-        futures::select! {
-            event = events.next() => {
-                let Some(event) = event else { break };
-                match event {
-                    NetEvt::Message { topic, data, source } => {
-                        // Try parsing as a profile broadcast.
-                        if let Ok((profile, willow_transport::MessageType::Identity)) =
-                            willow_transport::unpack_envelope::<willow_identity::UserProfile>(&data)
-                        {
-                            let _ = event_tx.unbounded_send(NetworkEvent::ProfileReceived {
-                                peer_id: profile.peer_id.to_string(),
-                                display_name: profile.display_name,
-                            });
-                        }
-                        // Try wire format.
-                        else if let Some((wire_msg, signer)) =
-                            crate::ops::unpack_wire(&data)
-                        {
-                            let from = signer.to_string();
-                            match wire_msg {
-                                crate::ops::WireMessage::Event(event) => {
-                                    let _ = event_tx.unbounded_send(NetworkEvent::EventReceived {
-                                        event,
-                                        from,
-                                    });
-                                }
-                                crate::ops::WireMessage::SyncRequest { state_hash, topic } => {
-                                    let _ = event_tx.unbounded_send(NetworkEvent::SyncRequested {
-                                        state_hash,
-                                        from,
-                                        topic,
-                                    });
-                                }
-                                crate::ops::WireMessage::SyncBatch { events } => {
-                                    let _ = event_tx.unbounded_send(NetworkEvent::SyncBatchReceived {
-                                        events,
-                                        from,
-                                    });
-                                }
-                                crate::ops::WireMessage::TypingIndicator { channel } => {
-                                    let _ = event_tx.unbounded_send(NetworkEvent::TypingReceived {
-                                        peer_id: from,
-                                        channel,
-                                    });
-                                }
-                                crate::ops::WireMessage::VoiceJoin { channel_id, peer_id } => {
-                                    let _ = event_tx.unbounded_send(NetworkEvent::VoiceJoinReceived {
-                                        channel_id,
-                                        peer_id,
-                                    });
-                                }
-                                crate::ops::WireMessage::VoiceLeave { channel_id, peer_id } => {
-                                    let _ = event_tx.unbounded_send(NetworkEvent::VoiceLeaveReceived {
-                                        channel_id,
-                                        peer_id,
-                                    });
-                                }
-                                crate::ops::WireMessage::VoiceSignal { channel_id, target_peer, signal } => {
-                                    if target_peer == local_peer_id {
-                                        let _ = event_tx.unbounded_send(NetworkEvent::VoiceSignalReceived {
+        tracing::info!("connecting to network...");
+
+        let node_result = NetworkNode::start(identity.clone(), config.clone()).await;
+        let (node, mut events) = match node_result {
+            Ok(pair) => {
+                // Successful connection — reset backoff.
+                backoff_ms = 1_000;
+                pair
+            }
+            Err(e) => {
+                tracing::warn!("failed to start network node: {e}");
+                gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
+                backoff_ms = (backoff_ms * 2).min(MAX_BACKOFF_MS);
+                continue;
+            }
+        };
+
+        let mut file_mgr = crate::files::FileManager::new();
+        let local_peer_id = node.peer_id().to_string();
+
+        // Run the event loop until the connection drops.
+        loop {
+            futures::select! {
+                event = events.next() => {
+                    let Some(event) = event else { break };
+                    match event {
+                        NetEvt::Message { topic, data, source } => {
+                            // Try parsing as a profile broadcast.
+                            if let Ok((profile, willow_transport::MessageType::Identity)) =
+                                willow_transport::unpack_envelope::<willow_identity::UserProfile>(&data)
+                            {
+                                let _ = event_tx.unbounded_send(NetworkEvent::ProfileReceived {
+                                    peer_id: profile.peer_id.to_string(),
+                                    display_name: profile.display_name,
+                                });
+                            }
+                            // Try wire format.
+                            else if let Some((wire_msg, signer)) =
+                                crate::ops::unpack_wire(&data)
+                            {
+                                let from = signer.to_string();
+                                match wire_msg {
+                                    crate::ops::WireMessage::Event(event) => {
+                                        let _ = event_tx.unbounded_send(NetworkEvent::EventReceived {
+                                            event,
+                                            from,
+                                        });
+                                    }
+                                    crate::ops::WireMessage::SyncRequest { state_hash, topic } => {
+                                        let _ = event_tx.unbounded_send(NetworkEvent::SyncRequested {
+                                            state_hash,
+                                            from,
+                                            topic,
+                                        });
+                                    }
+                                    crate::ops::WireMessage::SyncBatch { events } => {
+                                        let _ = event_tx.unbounded_send(NetworkEvent::SyncBatchReceived {
+                                            events,
+                                            from,
+                                        });
+                                    }
+                                    crate::ops::WireMessage::TypingIndicator { channel } => {
+                                        let _ = event_tx.unbounded_send(NetworkEvent::TypingReceived {
+                                            peer_id: from,
+                                            channel,
+                                        });
+                                    }
+                                    crate::ops::WireMessage::VoiceJoin { channel_id, peer_id } => {
+                                        let _ = event_tx.unbounded_send(NetworkEvent::VoiceJoinReceived {
                                             channel_id,
-                                            from_peer: from,
-                                            signal,
+                                            peer_id,
                                         });
                                     }
+                                    crate::ops::WireMessage::VoiceLeave { channel_id, peer_id } => {
+                                        let _ = event_tx.unbounded_send(NetworkEvent::VoiceLeaveReceived {
+                                            channel_id,
+                                            peer_id,
+                                        });
+                                    }
+                                    crate::ops::WireMessage::VoiceSignal { channel_id, target_peer, signal } => {
+                                        if target_peer == local_peer_id {
+                                            let _ = event_tx.unbounded_send(NetworkEvent::VoiceSignalReceived {
+                                                channel_id,
+                                                from_peer: from,
+                                                signal,
+                                            });
+                                        }
+                                    }
                                 }
+                            } else {
+                                let _ = event_tx.unbounded_send(NetworkEvent::MessageReceived {
+                                    topic,
+                                    data,
+                                    source: source.map(|p| p.to_string()),
+                                });
                             }
-                        } else {
-                            let _ = event_tx.unbounded_send(NetworkEvent::MessageReceived {
-                                topic,
-                                data,
-                                source: source.map(|p| p.to_string()),
-                            });
                         }
+                        NetEvt::PeerConnected(peer) => {
+                            // Reset backoff on successful peer connection.
+                            backoff_ms = 1_000;
+                            let _ = event_tx.unbounded_send(NetworkEvent::PeerConnected(peer.to_string()));
+                        }
+                        NetEvt::PeerDisconnected(peer) => {
+                            let _ = event_tx.unbounded_send(NetworkEvent::PeerDisconnected(peer.to_string()));
+                        }
+                        NetEvt::Listening(addr) => {
+                            let _ = event_tx.unbounded_send(NetworkEvent::Listening(addr.to_string()));
+                        }
+                        _ => {}
                     }
-                    NetEvt::PeerConnected(peer) => {
-                        let _ = event_tx.unbounded_send(NetworkEvent::PeerConnected(peer.to_string()));
-                    }
-                    NetEvt::PeerDisconnected(peer) => {
-                        let _ = event_tx.unbounded_send(NetworkEvent::PeerDisconnected(peer.to_string()));
-                    }
-                    NetEvt::Listening(addr) => {
-                        let _ = event_tx.unbounded_send(NetworkEvent::Listening(addr.to_string()));
-                    }
-                    _ => {}
                 }
-            }
 
-            cmd = cmd_rx.next() => {
-                if let Some(cmd) = cmd {
-                    handle_network_command(&cmd, &node, &mut file_mgr)?;
+                cmd = cmd_rx.next() => {
+                    if let Some(cmd) = cmd {
+                        let _ = handle_network_command(&cmd, &node, &mut file_mgr);
+                    }
                 }
-            }
 
-            complete => break,
+                complete => break,
+            }
         }
-    }
 
-    Ok(())
+        // Connection lost — notify UI and wait before retrying.
+        tracing::warn!(backoff_ms, "network connection lost, reconnecting in {backoff_ms}ms");
+        let _ = event_tx.unbounded_send(NetworkEvent::Listening("reconnecting".to_string()));
+        gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
+        backoff_ms = (backoff_ms * 2).min(MAX_BACKOFF_MS);
+    }
 }
 
 // ───── Shared command handler ───────────────────────────────────────────────

From 14b9fc02e58d03c69c1a0036eeddb42d67d6d506 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 07:00:36 -0700
Subject: [PATCH 14/18] feat: auto-reconnect with exponential backoff on WASM
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the WebSocket connection to the relay drops (low battery, network
switch, tab backgrounding), the network layer now automatically retries
with exponential backoff (1s → 2s → 4s → ... → 30s cap). Backoff resets
on successful peer connection. Commands queue during reconnect and are
processed on the next successful connection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/style.css | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/crates/web/style.css b/crates/web/style.css
index 6c4029bc..3a24f560 100644
--- a/crates/web/style.css
+++ b/crates/web/style.css
@@ -3072,19 +3072,7 @@ select:focus-visible {
 .settings-tabs .tab-btn.active {
     color: var(--text-primary);
     border-bottom-color: var(--accent);
-}
-
-/* Subtle glow on active tab underline */
-.settings-tabs .tab-btn.active::after {
-    content: '';
-    position: absolute;
-    bottom: -1px;
-    left: 20%;
-    right: 20%;
-    height: 2px;
-    background: var(--accent);
-    box-shadow: 0 0 8px var(--accent-glow), 0 0 2px var(--accent);
-    border-radius: 1px;
+    box-shadow: 0 2px 8px var(--accent-glow);
 }
 
 /* ── Settings Breadcrumb / Header ──────────────────────────────── */

From 1dc9c331dd20962e53585a64591b719ac19bf2d1 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 07:18:19 -0700
Subject: [PATCH 15/18] =?UTF-8?q?fix:=204=20bugs=20=E2=80=94=20reconnect?=
 =?UTF-8?q?=20re-subscribe,=20participant=20count,=20voice=20switch=20clea?=
 =?UTF-8?q?nup,=20screen-share=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Reset connected_subscribed on 'reconnecting' sentinel so topics
   are re-subscribed after network reconnect
2. Filter local peer from remote_participants to prevent double tile
3. Full cleanup of old voice channel before joining a new one
4. Default remote video to screen-share styling (object-fit: contain)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/client/src/lib.rs                      |  5 ++++-
 crates/web/src/app.rs                         | 16 ++++++++++++++++
 crates/web/src/components/call_page.rs        | 13 +++++++++----
 crates/web/src/components/participant_tile.rs |  7 ++++---
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/crates/client/src/lib.rs b/crates/client/src/lib.rs
index 91fc2e8c..632315d6 100644
--- a/crates/client/src/lib.rs
+++ b/crates/client/src/lib.rs
@@ -2486,7 +2486,10 @@ impl ClientEventLoop {
                 }
                 network::NetworkEvent::Listening(addr) => {
                     let mut shared = self.shared.borrow_mut();
-                    // On receiving a listening event, do initial subscriptions.
+                    // Reset subscription flag on reconnect so on_connected re-runs.
+                    if addr == "reconnecting" {
+                        shared.connected_subscribed = false;
+                    }
                     if !shared.connected_subscribed {
                         on_connected(&shared.state, &self.cmd_tx);
                         shared.connected_subscribed = true;
diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index b36b5da9..71a02237 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -378,6 +378,22 @@ pub fn App() -> impl IntoView {
                                 move |channel_name: String| {
                                     write.ui.set_show_sidebar.set(false);
 
+                                    // If in a different voice channel, disconnect from the old one first.
+                                    let current_vc = app_state.voice.voice_channel.get_untracked();
+                                    if current_vc.is_some() && current_vc.as_deref() != Some(&channel_name) {
+                                        vc_handle.leave_voice();
+                                        vm.borrow_mut().close_all();
+                                        write.voice.set_voice_channel.set(None);
+                                        write.voice.set_voice_channel_name.set(String::new());
+                                        write.voice.set_voice_muted.set(false);
+                                        write.voice.set_voice_deafened.set(false);
+                                        write.voice.set_video_source.set(None);
+                                        write.voice.set_local_video_stream.set(None);
+                                        write.voice.set_remote_video_streams.update(|m| m.clear());
+                                        write.voice.set_speaking_peers.set(std::collections::HashSet::new());
+                                        write.voice.set_voice_participants_map.update(|m| m.clear());
+                                    }
+
                                     // If already in this voice channel, just navigate to the call page.
                                     if app_state.voice.voice_channel.get_untracked() == Some(channel_name.clone()) {
                                         write.ui.set_show_call_page.set(true);
diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
index f75374a1..60b7dece 100644
--- a/crates/web/src/components/call_page.rs
+++ b/crates/web/src/components/call_page.rs
@@ -291,16 +291,21 @@ pub fn CallPage(
             {move || {
                 let ch = app_state.voice.voice_channel.get().unwrap_or_default();
                 let participants_map = app_state.voice.voice_participants_map.get();
-                let remote_participants: Vec<String> = participants_map.get(&ch).cloned().unwrap_or_default();
+                let local_peer_id = handle.peer_id();
+                let local_name = handle.display_name();
+                let remote_participants: Vec<String> = participants_map
+                    .get(&ch)
+                    .cloned()
+                    .unwrap_or_default()
+                    .into_iter()
+                    .filter(|p| p != &local_peer_id)
+                    .collect();
                 let speaking = app_state.voice.speaking_peers.get();
                 let remote_streams = app_state.voice.remote_video_streams.get();
                 let muted = app_state.voice.voice_muted.get();
                 let video_source = app_state.voice.video_source.get();
                 let current_layout = layout.get();
 
-                let local_peer_id = handle.peer_id();
-                let local_name = handle.display_name();
-
                 // Total participant count including self.
                 let total = remote_participants.len() + 1;
 
diff --git a/crates/web/src/components/participant_tile.rs b/crates/web/src/components/participant_tile.rs
index 1c4f1fc8..3a59eece 100644
--- a/crates/web/src/components/participant_tile.rs
+++ b/crates/web/src/components/participant_tile.rs
@@ -105,12 +105,13 @@ pub fn ParticipantTile(
     }
 
     // Local camera uses `local-camera` (object-fit: cover + mirrored).
-    // All other video (remote camera or screen share) uses default
-    // `object-fit: cover` which is a better default than `contain`.
+    // Remote video defaults to `screen-share` (object-fit: contain) which is
+    // safe for both screen shares and cameras (camera just gets letterboxed).
+    // A future signaling change can refine this by carrying source type.
     let video_class = if is_local_camera {
         "local-camera"
     } else {
-        ""
+        "screen-share"
     };
 
     view! {

From 8f3c689104e980d10b5ff454d75624bc51768b9c Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 07:26:58 -0700
Subject: [PATCH 16/18] fix: participant count header still double-counted
 local user

The grid rendering filter was fixed in the previous commit but the
header count display still had +1. Removed since local is already
in voice_participants_map.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/components/call_page.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
index 60b7dece..e59c4794 100644
--- a/crates/web/src/components/call_page.rs
+++ b/crates/web/src/components/call_page.rs
@@ -247,7 +247,7 @@ pub fn CallPage(
                         {move || {
                             let ch = app_state.voice.voice_channel.get().unwrap_or_default();
                             let map = app_state.voice.voice_participants_map.get();
-                            let count = map.get(&ch).map(|v| v.len()).unwrap_or(0) + 1; // +1 for local
+                            let count = map.get(&ch).map(|v| v.len()).unwrap_or(0); // local already in map
                             format!("{count} participant{}", if count != 1 { "s" } else { "" })
                         }}
                     </span>

From 682222ec1817ba006411acf0fdffa70dda605250 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 07:51:36 -0700
Subject: [PATCH 17/18] =?UTF-8?q?fix:=206=20deep-review=20issues=20?=
 =?UTF-8?q?=E2=80=94=20close=5Fall=20cleanup,=20detector=20recreation,=20t?=
 =?UTF-8?q?imer=20leak,=20dead=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. close_all() now calls close_connection() per peer to remove <audio> elements
2. SpeakingDetector recreated after close_all() so speaking works on rejoin
3. set_interval timer cleaned up with on_cleanup to prevent stacking
4. Removed dead _handle_camera clone
5. Removed dead show_server_settings signal
6. Audio source nodes stored in shared map instead of leaked via mem::forget

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/web/src/components/call_page.rs | 20 +++++---
 crates/web/src/event_processing.rs     |  1 -
 crates/web/src/state.rs                | 14 ++----
 crates/web/src/voice.rs                | 63 +++++++++++++++++++-------
 4 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/crates/web/src/components/call_page.rs b/crates/web/src/components/call_page.rs
index e59c4794..1ab6596f 100644
--- a/crates/web/src/components/call_page.rs
+++ b/crates/web/src/components/call_page.rs
@@ -90,19 +90,21 @@ pub fn CallPage(
     // Local video stream — stored globally in VoiceState so it survives remounts.
     let local_video_stream = app_state.voice.local_video_stream;
 
-    // Duration timer — increments every second.
+    // Duration timer — increments every second. Clean up on unmount so
+    // timers do not stack across call-page remounts.
     let (duration, set_duration) = signal(0u32);
-    set_interval(
+    let timer_handle = set_interval_with_handle(
         move || set_duration.update(|d| *d += 1),
         std::time::Duration::from_millis(1000),
-    );
+    )
+    .expect("set_interval failed");
+    on_cleanup(move || timer_handle.clear());
 
     // Layout state.
     let layout = app_state.ui.call_layout;
 
     // Camera button click handler.
     let vm_camera = vm.clone();
-    let _handle_camera = handle.clone();
     let on_camera_click = move |_| {
         let current_source = app_state.voice.video_source.get_untracked();
 
@@ -145,7 +147,10 @@ pub fn CallPage(
                 let stream_for_signal = SendWrapper::new(stream.clone());
                 vm2.borrow_mut().start_camera(stream);
                 write2.voice.set_video_source.set(Some(VideoSource::Camera));
-                write2.voice.set_local_video_stream.set(Some(stream_for_signal));
+                write2
+                    .voice
+                    .set_local_video_stream
+                    .set(Some(stream_for_signal));
             });
         let on_error = wasm_bindgen::closure::Closure::once(move |_err: wasm_bindgen::JsValue| {
             tracing::error!("Camera access denied");
@@ -196,7 +201,10 @@ pub fn CallPage(
                 let stream_for_signal = SendWrapper::new(stream.clone());
                 vm2.borrow_mut().start_screen_share(stream.clone());
                 write2.voice.set_video_source.set(Some(VideoSource::Screen));
-                write2.voice.set_local_video_stream.set(Some(stream_for_signal));
+                write2
+                    .voice
+                    .set_local_video_stream
+                    .set(Some(stream_for_signal));
 
                 // Listen for the browser's "Stop sharing" chrome button.
                 let tracks = stream.get_video_tracks();
diff --git a/crates/web/src/event_processing.rs b/crates/web/src/event_processing.rs
index e9e972d4..a917e7bb 100644
--- a/crates/web/src/event_processing.rs
+++ b/crates/web/src/event_processing.rs
@@ -215,7 +215,6 @@ pub fn refresh_all_signals(handle: &WebClientHandle, write: &AppWriteSignals) {
     write.chat.set_current_channel.set(ch.clone());
     write.chat.set_messages.set(handle.messages(&ch));
     write.ui.set_show_settings.set(false);
-    write.ui.set_show_server_settings.set(false);
     write.ui.set_show_add_server.set(false);
 }
 
diff --git a/crates/web/src/state.rs b/crates/web/src/state.rs
index 96b6a02a..eb5f800e 100644
--- a/crates/web/src/state.rs
+++ b/crates/web/src/state.rs
@@ -75,8 +75,6 @@ pub struct ServerState {
 #[derive(Clone, Copy)]
 pub struct UiState {
     pub show_settings: ReadSignal<bool>,
-    #[allow(dead_code)]
-    pub show_server_settings: ReadSignal<bool>,
     pub show_sidebar: ReadSignal<bool>,
     pub show_members: ReadSignal<bool>,
     pub show_add_server: ReadSignal<bool>,
@@ -103,8 +101,7 @@ pub struct VoiceState {
         ReadSignal<HashMap<String, send_wrapper::SendWrapper<web_sys::MediaStream>>>,
     /// Local video stream (camera or screen share). Stored globally so it
     /// survives call-page component remounts.
-    pub local_video_stream:
-        ReadSignal<Option<send_wrapper::SendWrapper<web_sys::MediaStream>>>,
+    pub local_video_stream: ReadSignal<Option<send_wrapper::SendWrapper<web_sys::MediaStream>>>,
 }
 
 // ── Write signals (NOT in context — held by event processing) ────────
@@ -152,7 +149,6 @@ pub struct ServerWriteSignals {
 #[derive(Clone, Copy)]
 pub struct UiWriteSignals {
     pub set_show_settings: WriteSignal<bool>,
-    pub set_show_server_settings: WriteSignal<bool>,
     pub set_show_sidebar: WriteSignal<bool>,
     pub set_show_members: WriteSignal<bool>,
     pub set_show_add_server: WriteSignal<bool>,
@@ -207,7 +203,6 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
 
     // UI panel signals
     let (show_settings, set_show_settings) = signal(false);
-    let (show_server_settings, set_show_server_settings) = signal(false);
     let (show_sidebar, set_show_sidebar) = signal(false);
     let (show_members, set_show_members) = signal(false);
     let (show_add_server, set_show_add_server) = signal(false);
@@ -230,9 +225,8 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
         String,
         send_wrapper::SendWrapper<web_sys::MediaStream>,
     >::new());
-    let (local_video_stream, set_local_video_stream) = signal(
-        Option::<send_wrapper::SendWrapper<web_sys::MediaStream>>::None,
-    );
+    let (local_video_stream, set_local_video_stream) =
+        signal(Option::<send_wrapper::SendWrapper<web_sys::MediaStream>>::None);
 
     let app_state = AppState {
         chat: ChatState {
@@ -262,7 +256,6 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
         },
         ui: UiState {
             show_settings,
-            show_server_settings,
             show_sidebar,
             show_members,
             show_add_server,
@@ -313,7 +306,6 @@ pub fn create_signals() -> (AppState, AppWriteSignals) {
         },
         ui: UiWriteSignals {
             set_show_settings,
-            set_show_server_settings,
             set_show_sidebar,
             set_show_members,
             set_show_add_server,
diff --git a/crates/web/src/voice.rs b/crates/web/src/voice.rs
index b8031762..1577940b 100644
--- a/crates/web/src/voice.rs
+++ b/crates/web/src/voice.rs
@@ -43,8 +43,9 @@ pub struct SpeakingDetector {
     /// Analysers keyed by peer ID. Shared with the polling closure via `Rc<RefCell>`.
     analysers: Rc<RefCell<HashMap<String, AnalyserNode>>>,
     /// Source nodes kept alive so the browser does not garbage-collect them.
-    #[allow(dead_code)]
-    sources: HashMap<String, MediaStreamAudioSourceNode>,
+    /// Shared with the `ontrack` closure via `Rc<RefCell>` so it can store
+    /// source nodes created for remote peer audio streams.
+    sources: Rc<RefCell<HashMap<String, MediaStreamAudioSourceNode>>>,
     on_speaking_change: SpeakingCallback,
     interval_id: Option<i32>,
 }
@@ -62,7 +63,7 @@ impl SpeakingDetector {
         Ok(Self {
             audio_context,
             analysers: Rc::new(RefCell::new(HashMap::new())),
-            sources: HashMap::new(),
+            sources: Rc::new(RefCell::new(HashMap::new())),
             on_speaking_change: Rc::new(on_change),
             interval_id: None,
         })
@@ -98,13 +99,15 @@ impl SpeakingDetector {
         self.analysers
             .borrow_mut()
             .insert(peer_id.to_string(), analyser);
-        self.sources.insert(peer_id.to_string(), source);
+        self.sources
+            .borrow_mut()
+            .insert(peer_id.to_string(), source);
     }
 
-    /// Remove a peer's analyser (e.g. when they disconnect).
+    /// Remove a peer's analyser and source node (e.g. when they disconnect).
     pub fn remove_peer(&mut self, peer_id: &str) {
         self.analysers.borrow_mut().remove(peer_id);
-        self.sources.remove(peer_id);
+        self.sources.borrow_mut().remove(peer_id);
     }
 
     /// Start polling all analysers every ~60 ms.
@@ -165,7 +168,7 @@ impl SpeakingDetector {
         }
         let _ = self.audio_context.close();
         self.analysers.borrow_mut().clear();
-        self.sources.clear();
+        self.sources.borrow_mut().clear();
     }
 }
 
@@ -218,6 +221,8 @@ pub struct VoiceManager {
     video_senders: HashMap<String, RtcRtpSender>,
     /// Audio volume analyser for speaking detection.
     speaking_detector: Option<SpeakingDetector>,
+    /// Stored so `close_all()` can recreate the `SpeakingDetector` for the next session.
+    speaking_change_cb: Option<Rc<dyn Fn(HashSet<String>)>>,
 }
 
 impl VoiceManager {
@@ -240,9 +245,12 @@ impl VoiceManager {
         on_video_track: impl Fn(&str, Option<MediaStream>) + 'static,
         on_speaking_change: impl Fn(HashSet<String>) + 'static,
     ) -> Self {
+        // Store callback so close_all() can recreate the detector for future sessions.
+        let speaking_cb: Rc<dyn Fn(HashSet<String>)> = Rc::new(on_speaking_change);
         // Create the detector eagerly — the caller is inside a user-gesture
         // handler (voice join click) so AudioContext creation is allowed.
-        let mut detector = SpeakingDetector::new(on_speaking_change).ok();
+        let cb_clone = speaking_cb.clone();
+        let mut detector = SpeakingDetector::new(move |s| cb_clone(s)).ok();
         if let Some(ref mut d) = detector {
             d.start_polling();
         }
@@ -256,6 +264,7 @@ impl VoiceManager {
             video_source: None,
             video_senders: HashMap::new(),
             speaking_detector: detector,
+            speaking_change_cb: Some(speaking_cb),
         }
     }
 
@@ -335,9 +344,11 @@ impl VoiceManager {
         let peer_id = remote_peer.to_string();
         let on_video = self.on_video_track.clone();
 
-        // Share the detector's analysers map and audio context with the closure
-        // so it can register incoming remote audio streams for speaking detection.
+        // Share the detector's analysers map, sources map, and audio context
+        // with the closure so it can register incoming remote audio streams
+        // for speaking detection.
         let detector_analysers = self.speaking_detector.as_ref().map(|d| d.analysers.clone());
+        let detector_sources = self.speaking_detector.as_ref().map(|d| d.sources.clone());
         let detector_ctx = self
             .speaking_detector
             .as_ref()
@@ -359,15 +370,17 @@ impl VoiceManager {
 
             if track.kind() == "audio" {
                 // Register the remote audio stream with the speaking detector.
-                if let (Some(ref ctx), Some(ref analysers)) = (&detector_ctx, &detector_analysers) {
+                if let (Some(ref ctx), Some(ref analysers), Some(ref sources)) =
+                    (&detector_ctx, &detector_analysers, &detector_sources)
+                {
                     if let Ok(source) = ctx.create_media_stream_source(&stream) {
                         if let Ok(analyser) = ctx.create_analyser() {
                             analyser.set_fft_size(256);
                             if source.connect_with_audio_node(&analyser).is_ok() {
                                 analysers.borrow_mut().insert(peer_id.clone(), analyser);
-                                // Source node must stay alive — leak it so the
-                                // browser keeps the audio graph connected.
-                                std::mem::forget(source);
+                                // Store source node in the shared map so it stays
+                                // alive and is properly cleaned up by remove_peer().
+                                sources.borrow_mut().insert(peer_id.clone(), source);
                             }
                         }
                     }
@@ -757,14 +770,31 @@ impl VoiceManager {
     }
 
     /// Close all connections, stop video sharing, and release the microphone.
+    ///
+    /// Each peer connection is closed via [`close_connection`] so that
+    /// `<audio>` elements are removed from the DOM and the speaking detector
+    /// is cleaned up per-peer. The detector is then destroyed and recreated
+    /// so speaking detection works on the next voice session.
     pub fn close_all(&mut self) {
         self.stop_video_share();
+        // Close each peer individually to remove <audio> elements and clean
+        // up per-peer detector state.
+        let peers: Vec<String> = self.connections.keys().cloned().collect();
+        for peer in peers {
+            self.close_connection(&peer);
+        }
+        // Destroy the detector after per-peer cleanup.
         if let Some(ref mut detector) = self.speaking_detector {
             detector.destroy();
         }
         self.speaking_detector = None;
-        for (_, state) in self.connections.drain() {
-            state.pc.close();
+        // Recreate the detector so speaking detection works on rejoin.
+        if let Some(ref cb) = self.speaking_change_cb {
+            let cb_clone = cb.clone();
+            self.speaking_detector = SpeakingDetector::new(move |s| cb_clone(s)).ok();
+            if let Some(ref mut d) = self.speaking_detector {
+                d.start_polling();
+            }
         }
         if let Some(ref stream) = self.local_stream {
             let tracks = stream.get_tracks();
@@ -776,4 +806,3 @@ impl VoiceManager {
         self.local_stream = None;
     }
 }
-

From 5ce4fe3104855c7b6b1eaefb3149e26076e60e31 Mon Sep 17 00:00:00 2001
From: Noah <noahcorona231@gmail.com>
Date: Thu, 26 Mar 2026 23:08:14 -0700
Subject: [PATCH 18/18] chore: cargo fmt formatting fixes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 crates/client/src/network.rs                  | 5 ++++-
 crates/web/src/app.rs                         | 5 +----
 crates/web/src/components/participant_tile.rs | 3 ++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/crates/client/src/network.rs b/crates/client/src/network.rs
index f2d54862..e2349f0a 100644
--- a/crates/client/src/network.rs
+++ b/crates/client/src/network.rs
@@ -469,7 +469,10 @@ async fn run_network_wasm(
         }
 
         // Connection lost — notify UI and wait before retrying.
-        tracing::warn!(backoff_ms, "network connection lost, reconnecting in {backoff_ms}ms");
+        tracing::warn!(
+            backoff_ms,
+            "network connection lost, reconnecting in {backoff_ms}ms"
+        );
         let _ = event_tx.unbounded_send(NetworkEvent::Listening("reconnecting".to_string()));
         gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
         backoff_ms = (backoff_ms * 2).min(MAX_BACKOFF_MS);
diff --git a/crates/web/src/app.rs b/crates/web/src/app.rs
index 71a02237..7f9b77d7 100644
--- a/crates/web/src/app.rs
+++ b/crates/web/src/app.rs
@@ -250,10 +250,7 @@ pub fn App() -> impl IntoView {
             .voice
             .set_speaking_peers
             .set(std::collections::HashSet::new());
-        write
-            .voice
-            .set_voice_participants_map
-            .update(|m| m.clear());
+        write.voice.set_voice_participants_map.update(|m| m.clear());
         write.ui.set_show_call_page.set(false);
         write
             .ui
diff --git a/crates/web/src/components/participant_tile.rs b/crates/web/src/components/participant_tile.rs
index 3a59eece..177aadd5 100644
--- a/crates/web/src/components/participant_tile.rs
+++ b/crates/web/src/components/participant_tile.rs
@@ -66,7 +66,8 @@ pub fn ParticipantTile(
         if let Some(el) = video_ref.get() {
             if let Some(ref stream) = stream_for_effect {
                 use wasm_bindgen::JsCast;
-                let media_el: web_sys::HtmlMediaElement = el.unchecked_ref::<web_sys::HtmlMediaElement>().clone();
+                let media_el: web_sys::HtmlMediaElement =
+                    el.unchecked_ref::<web_sys::HtmlMediaElement>().clone();
                 // Explicit deref through SendWrapper to get MediaStream
                 let media_stream: web_sys::MediaStream = (**stream).clone();
                 // Defer to next microtask to ensure DOM is ready