Implement mumble UDP ping protocol for server status display

Adds ping_server method to PlatformInterface. The desktop implementation
sends a 12-byte UDP datagram (4 zero bytes + 8-byte request ID) and
parses the 24-byte response to extract version, current users, max
users, and bandwidth. Includes a 2-second timeout.

The ServerPingInfo component uses use_resource to asynchronously ping
each server and displays user count (e.g. "3/50") on the server card.
Web and mobile platforms return an error (UDP not available in browsers).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

common/src/lib.rs

@@ -16,3 +16,13 @@ pub struct ServerStatus {
     pub max_users: Option<u32>,
     pub bandwidth: Option<u32>,
 }
+
+#[derive(Debug, Clone, Deserialize, Serialize, Default, PartialEq)]
+pub struct ServerEntry {
+    pub name: String,
+    pub address: String,
+    pub port: u16,
+    pub username: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub password: Option<String>,
+}

gui/assets/main.scss

@@ -688,6 +688,78 @@ a:visited {
     border-color: rgba(135, 196, 255, 1);
 }
 
+/* Delete button (danger) */
+
+.modal-btn--danger {
+    background: rgba(220, 60, 60, 0.85);
+    border-color: rgba(220, 60, 60, 1);
+    color: #ffffff;
+}
+
+.modal-btn--danger:hover {
+    background: rgba(240, 80, 80, 0.95);
+    border-color: rgba(255, 120, 120, 1);
+}
+
+.modal-actions__spacer {
+    flex: 1;
+}
+
+/* Override mode username row */
+
+.override-username-row {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    padding: 0.75rem 1.25rem;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.override-username-input {
+    flex: 1;
+    padding: 0.55rem 0.6rem;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    background: rgba(0, 0, 0, 0.35);
+    color: #fff;
+    font-size: 0.85rem;
+    outline: none;
+    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+
+.override-username-input:focus {
+    border-color: rgba(255, 255, 255, 0.55);
+    background: rgba(0, 0, 0, 0.55);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.override-username-input::placeholder {
+    color: rgba(255, 255, 255, 0.45);
+}
+
+/* Connect action button highlight */
+
+.server-card__action--connect:hover {
+    background: rgba(67, 156, 255, 0.3);
+    border-color: rgba(67, 156, 255, 0.6);
+}
+
+/* Ping info on server card */
+
+.server-card__ping {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.1rem;
+    font-size: 0.75rem;
+    opacity: 0.6;
+    flex-shrink: 0;
+    min-width: 60px;
+    text-align: right;
+}
+
 /* Keyframes */
 
 @keyframes backdrop-fade-in {

gui/src/app.rs

@@ -2,7 +2,7 @@
 
 use dioxus::prelude::*;
 use mime_guess::Mime;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerEntry};
 use ordermap::OrderSet;
 use std::collections::{HashMap, HashSet};
 
@@ -686,99 +686,101 @@ pub fn ServerView(config: Resource<ClientConfig>) -> Element {
 pub fn LoginView(config: Resource<ClientConfig>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
 
-    let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
-    use_resource(move || async move {
-        let client = reqwest::Client::new();
-        loop {
-            *last_status.write_unchecked() = Some(Platform::get_status(&client).await);
-            Platform::sleep(std::time::Duration::from_secs_f32(1.0)).await;
-        }
-    });
+    let mut servers = use_signal(|| Platform::load_servers());
+    let mut show_add_modal = use_signal(|| false);
+    let mut editing_index = use_signal(|| None::<usize>);
 
-    let mut address_input = use_signal(|| Platform::load_server_url());
-    let address = use_memo(move || {
-        if let Some(addr) = address_input() {
-            addr.clone()
-        } else {
-            config()
-                .and_then(|c| c.proxy_url.clone())
-                .unwrap_or_default()
-        }
-    });
+    let version = option_env!("MUMBLE_WEB2_VERSION");
 
-    let previous_username = Platform::load_username();
-    let mut username = use_signal(|| previous_username.unwrap_or(String::new()));
+    let is_override_mode = config
+        .read()
+        .as_ref()
+        .is_some_and(|c| !c.any_server);
 
-    let do_connect = move |_| {
-        //let _ = set_default_username(&username.read());
-        let _ = Platform::set_default_username(&username.read());
-        if config.read().as_ref().is_some_and(|cfg| cfg.any_server) {
-            Platform::set_default_server(&address.read());
-        }
-        net.send(Connect {
-            address: address.read().clone(),
-            username: username.read().clone(),
-            config: config.read().clone().unwrap_or_default(),
-        })
-    };
-    let status = &STATE.status;
-    let bottom = match &*status.read() {
-        Disconnected => rsx! {
-            button {
-                class: "login_bttn",
-                onclick: do_connect.clone(),
-                "Connect"
-            }
-        },
-        Connecting => rsx! {
+    // --- Overrides mode: single preset server, username-only input ---
+    if is_override_mode {
+        let proxy_url = config
+            .read()
+            .as_ref()
+            .and_then(|c| c.proxy_url.clone())
+            .unwrap_or_default();
+
+        let previous_username = Platform::load_username();
+        let mut username = use_signal(|| previous_username.unwrap_or_default());
+
+        let status = &STATE.status;
+        let is_connecting = matches!(&*status.read(), Connecting);
+
+        return rsx!(
             div {
-                class: "login_bttn",
-                "Connecting..."
-            }
-        },
-        Failed(msg) => rsx!(
-            button {
-                class: "login_bttn",
-                onclick: do_connect.clone(),
-                "Reconnect"
-            }
-            div {
-                class: "login_error",
-                "Failed to connect:"
-                pre {
-                    "{msg}"
+                class: "server-list-page",
+                h1 {
+                    "Mumble Web"
+                    match version {
+                        Some(v) => rsx!(div { class: "login_version", "({v})" }),
+                        None => rsx!(),
+                    }
+                }
+                div {
+                    class: "server-list",
+                    div {
+                        class: "server-card",
+                        img {
+                            class: "server-card__icon",
+                            src: asset!("assets/earth-14-svgrepo-com.svg"),
+                            alt: "Server icon",
+                        }
+                        div {
+                            class: "server-card__info",
+                            span { class: "server-card__name", "Server" }
+                            span { class: "server-card__address", "{proxy_url}" }
+                        }
+                    }
+                    div {
+                        class: "override-username-row",
+                        input {
+                            class: "override-username-input",
+                            r#type: "text",
+                            placeholder: "Username",
+                            value: "{username.read()}",
+                            oninput: move |evt| username.set(evt.value().clone()),
+                        }
+                        button {
+                            class: "server-card__action server-card__action--connect",
+                            disabled: is_connecting || username.read().is_empty(),
+                            onclick: {
+                                let proxy_url = proxy_url.clone();
+                                move |_| {
+                                    let _ = Platform::set_default_username(&username.read());
+                                    net.send(Connect {
+                                        address: proxy_url.clone(),
+                                        username: username.read().clone(),
+                                        config: config.read().clone().unwrap_or_default(),
+                                    });
+                                }
+                            },
+                            img {
+                                src: asset!("assets/arrow-right-svgrepo-com.svg"),
+                                alt: "Connect",
+                            }
+                        }
+                    }
+                    match &*STATE.status.read() {
+                        Failed(msg) => rsx!(
+                            div {
+                                class: "login_error",
+                                "Failed to connect:"
+                                pre { "{msg}" }
+                            }
+                        ),
+                        _ => rsx!(),
+                    }
                 }
             }
-        ),
-        Connected => unreachable!(),
-    };
-
-    struct Server {
-        name: String,
-        username: String,
-        address: String,
+        );
     }
 
-    let servers: [Server; 3] = [
-        Server {
-            name: "name0".to_string(),
-            username: "username0".to_string(),
-            address: "address0".to_string(),
-        },
-        Server {
-            name: "name1".to_string(),
-            username: "username1".to_string(),
-            address: "address1".to_string(),
-        },
-        Server {
-            name: "name2".to_string(),
-            username: "username2".to_string(),
-            address: "address2".to_string(),
-        },
-    ];
-
-    let mut show_add_modal = use_signal(|| false);
-    let version = option_env!("MUMBLE_WEB2_VERSION");
+    // --- Normal mode: editable server list ---
     rsx!(
         div {
             class: "server-list-page",
@@ -791,76 +793,194 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
             }
             div {
                 class: "server-list",
-                for server in servers {
-                    div {
-                        key: "{server.address}",      // use the most unique field
-                        class: "server-card",
-                        img {
-                            class: "server-card__icon",
-                            src: asset!("assets/earth-14-svgrepo-com.svg"),
-                            alt: "Server icon",
-                        }
-                        div {
-                            class: "server-card__info",
-                            span { class: "server-card__name",    "{server.name}" }
-                            span { class: "server-card__address", "{server.address}" }
-                        }
-                        button {
-                            class: "server-card__action",
-                            onclick: move |_| { /* TODO: initiate connection */ },
-                            img {
-                                src: asset!("assets/edit-3-svgrepo-com.svg"),
-                                alt: "Connect",
+                for (idx, server) in servers.read().iter().enumerate() {
+                    {
+                        let address = format!("{}:{}", server.address, server.port);
+                        let connect_entry = server.clone();
+                        rsx!(
+                            div {
+                                key: "{idx}",
+                                class: "server-card",
+                                img {
+                                    class: "server-card__icon",
+                                    src: asset!("assets/earth-14-svgrepo-com.svg"),
+                                    alt: "Server icon",
+                                }
+                                div {
+                                    class: "server-card__info",
+                                    span { class: "server-card__name", "{server.name}" }
+                                    span { class: "server-card__address", "{address}" }
+                                }
+                                ServerPingInfo {
+                                    address: server.address.clone(),
+                                    port: server.port,
+                                }
+                                button {
+                                    class: "server-card__action",
+                                    onclick: move |_| editing_index.set(Some(idx)),
+                                    img {
+                                        src: asset!("assets/edit-3-svgrepo-com.svg"),
+                                        alt: "Edit",
+                                    }
+                                }
+                                button {
+                                    class: "server-card__action server-card__action--connect",
+                                    onclick: {
+                                        let entry = connect_entry.clone();
+                                        move |_| {
+                                            let _ = Platform::set_default_username(&entry.username);
+                                            let addr = format!("{}:{}", entry.address, entry.port);
+                                            net.send(Connect {
+                                                address: addr,
+                                                username: entry.username.clone(),
+                                                config: config.read().clone().unwrap_or_default(),
+                                            });
+                                        }
+                                    },
+                                    img {
+                                        src: asset!("assets/arrow-right-svgrepo-com.svg"),
+                                        alt: "Connect",
+                                    }
+                                }
                             }
-                        }
-                        button {
-                            class: "server-card__action",
-                            onclick: move |_| { /* TODO: initiate connection */ },
-                            img {
-                                src: asset!("assets/arrow-right-svgrepo-com.svg"),
-                                alt: "Connect",
-                            }
-                        }
-
+                        )
                     }
                 }
             }
+            match &*STATE.status.read() {
+                Failed(msg) => rsx!(
+                    div {
+                        class: "server-list",
+                        div {
+                            class: "login_error",
+                            "Failed to connect:"
+                            pre { "{msg}" }
+                        }
+                    }
+                ),
+                _ => rsx!(),
+            }
             button {
                 class: "add-server-btn",
                 onclick: move |_| show_add_modal.set(true),
                 "+ Add Server"
             }
 
-            // Conditionally render the modal
             if *show_add_modal.read() {
-                AddServerModal { show: show_add_modal }
+                AddServerModal {
+                    on_save: move |entry: ServerEntry| {
+                        servers.write().push(entry);
+                        Platform::save_servers(&servers.read());
+                        show_add_modal.set(false);
+                    },
+                    on_cancel: move |_| show_add_modal.set(false),
+                }
+            }
+
+            if let Some(idx) = *editing_index.read() {
+                if let Some(entry) = servers.read().get(idx).cloned() {
+                    EditServerModal {
+                        entry,
+                        on_save: move |updated: ServerEntry| {
+                            servers.write()[idx] = updated;
+                            Platform::save_servers(&servers.read());
+                            editing_index.set(None);
+                        },
+                        on_delete: move |_| {
+                            servers.write().remove(idx);
+                            Platform::save_servers(&servers.read());
+                            editing_index.set(None);
+                        },
+                        on_cancel: move |_| editing_index.set(None),
+                    }
+                }
             }
         }
     )
 }
 
+/// Displays live ping info (user count, latency) for a server using the mumble UDP ping protocol.
 #[component]
-fn AddServerModal(show: Signal<bool>) -> Element {
+fn ServerPingInfo(address: String, port: u16) -> Element {
+    let ping_result = use_resource(move || {
+        let addr = address.clone();
+        async move { Platform::ping_server(&addr, port).await }
+    });
+
+    let read = ping_result.read();
+    match &*read {
+        Some(Ok(status)) => {
+            let users_text = match (status.users, status.max_users) {
+                (Some(u), Some(m)) => format!("{u}/{m}"),
+                (Some(u), None) => format!("{u} online"),
+                _ => String::new(),
+            };
+            rsx!(
+                div {
+                    class: "server-card__ping",
+                    if !users_text.is_empty() {
+                        span { "{users_text}" }
+                    }
+                }
+            )
+        }
+        Some(Err(_)) => rsx!(
+            div {
+                class: "server-card__ping",
+                span { "offline" }
+            }
+        ),
+        None => rsx!(
+            div {
+                class: "server-card__ping",
+                span { "..." }
+            }
+        ),
+    }
+}
+
+#[component]
+fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()>) -> Element {
+    let mut name = use_signal(|| String::new());
+    let mut address = use_signal(|| String::new());
+    let mut port = use_signal(|| "64738".to_string());
+    let mut username = use_signal(|| Platform::load_username().unwrap_or_default());
+    let mut password = use_signal(|| String::new());
+
+    let do_save = move |_| {
+        let port_num: u16 = port.read().parse().unwrap_or(64738);
+        on_save.call(ServerEntry {
+            name: name.read().clone(),
+            address: address.read().clone(),
+            port: port_num,
+            username: username.read().clone(),
+            password: if password.read().is_empty() {
+                None
+            } else {
+                Some(password.read().clone())
+            },
+        });
+    };
+
     rsx! {
-        // Full-screen overlay
         div {
             class: "modal-backdrop",
-            onclick: move |_| show.set(false),
+            onclick: move |_| on_cancel.call(()),
         }
-        // Centering container
         div {
             class: "modal-container",
             onclick: move |evt| evt.stop_propagation(),
             div {
                 class: "modal",
                 h2 { "Add Server" }
-
                 div {
                     class: "modal-field",
                     label { "Name" }
                     input {
                         r#type: "text",
                         placeholder: "My Mumble Server",
+                        value: "{name.read()}",
+                        oninput: move |evt| name.set(evt.value().clone()),
                     }
                 }
                 div {
@@ -869,6 +989,8 @@ fn AddServerModal(show: Signal<bool>) -> Element {
                     input {
                         r#type: "text",
                         placeholder: "mumble.example.com",
+                        value: "{address.read()}",
+                        oninput: move |evt| address.set(evt.value().clone()),
                     }
                 }
                 div {
@@ -877,6 +999,8 @@ fn AddServerModal(show: Signal<bool>) -> Element {
                     input {
                         r#type: "number",
                         placeholder: "64738",
+                        value: "{port.read()}",
+                        oninput: move |evt| port.set(evt.value().clone()),
                     }
                 }
                 div {
@@ -885,6 +1009,8 @@ fn AddServerModal(show: Signal<bool>) -> Element {
                     input {
                         r#type: "text",
                         placeholder: "Nickname",
+                        value: "{username.read()}",
+                        oninput: move |evt| username.set(evt.value().clone()),
                     }
                 }
                 div {
@@ -893,18 +1019,135 @@ fn AddServerModal(show: Signal<bool>) -> Element {
                     input {
                         r#type: "password",
                         placeholder: "Password",
+                        value: "{password.read()}",
+                        oninput: move |evt| password.set(evt.value().clone()),
                     }
                 }
                 div {
                     class: "modal-actions",
                     button {
                         class: "modal-btn",
-                        onclick: move |_| show.set(false),
+                        onclick: move |_| on_cancel.call(()),
                         "Cancel"
                     }
                     button {
                         class: "modal-btn modal-btn--primary",
-                        onclick: move |_| { /* TODO: save server */ },
+                        disabled: address.read().is_empty() || username.read().is_empty(),
+                        onclick: do_save,
+                        "Save"
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn EditServerModal(
+    entry: ServerEntry,
+    on_save: EventHandler<ServerEntry>,
+    on_delete: EventHandler<()>,
+    on_cancel: EventHandler<()>,
+) -> Element {
+    let mut name = use_signal(|| entry.name.clone());
+    let mut address = use_signal(|| entry.address.clone());
+    let mut port = use_signal(|| entry.port.to_string());
+    let mut username = use_signal(|| entry.username.clone());
+    let mut password = use_signal(|| entry.password.clone().unwrap_or_default());
+
+    let do_save = move |_| {
+        let port_num: u16 = port.read().parse().unwrap_or(64738);
+        on_save.call(ServerEntry {
+            name: name.read().clone(),
+            address: address.read().clone(),
+            port: port_num,
+            username: username.read().clone(),
+            password: if password.read().is_empty() {
+                None
+            } else {
+                Some(password.read().clone())
+            },
+        });
+    };
+
+    rsx! {
+        div {
+            class: "modal-backdrop",
+            onclick: move |_| on_cancel.call(()),
+        }
+        div {
+            class: "modal-container",
+            onclick: move |evt| evt.stop_propagation(),
+            div {
+                class: "modal",
+                h2 { "Edit Server" }
+                div {
+                    class: "modal-field",
+                    label { "Name" }
+                    input {
+                        r#type: "text",
+                        placeholder: "My Mumble Server",
+                        value: "{name.read()}",
+                        oninput: move |evt| name.set(evt.value().clone()),
+                    }
+                }
+                div {
+                    class: "modal-field",
+                    label { "Address" }
+                    input {
+                        r#type: "text",
+                        placeholder: "mumble.example.com",
+                        value: "{address.read()}",
+                        oninput: move |evt| address.set(evt.value().clone()),
+                    }
+                }
+                div {
+                    class: "modal-field",
+                    label { "Port" }
+                    input {
+                        r#type: "number",
+                        placeholder: "64738",
+                        value: "{port.read()}",
+                        oninput: move |evt| port.set(evt.value().clone()),
+                    }
+                }
+                div {
+                    class: "modal-field",
+                    label { "Username" }
+                    input {
+                        r#type: "text",
+                        placeholder: "Nickname",
+                        value: "{username.read()}",
+                        oninput: move |evt| username.set(evt.value().clone()),
+                    }
+                }
+                div {
+                    class: "modal-field",
+                    label { "Password (optional)" }
+                    input {
+                        r#type: "password",
+                        placeholder: "Password",
+                        value: "{password.read()}",
+                        oninput: move |evt| password.set(evt.value().clone()),
+                    }
+                }
+                div {
+                    class: "modal-actions",
+                    button {
+                        class: "modal-btn modal-btn--danger",
+                        onclick: move |_| on_delete.call(()),
+                        "Delete"
+                    }
+                    span { class: "modal-actions__spacer" }
+                    button {
+                        class: "modal-btn",
+                        onclick: move |_| on_cancel.call(()),
+                        "Cancel"
+                    }
+                    button {
+                        class: "modal-btn modal-btn--primary",
+                        disabled: address.read().is_empty() || username.read().is_empty(),
+                        onclick: do_save,
                         "Save"
                     }
                 }

gui/src/imp/desktop.rs

@@ -1,8 +1,8 @@
 use crate::app::Command;
-use color_eyre::eyre::Error;
+use color_eyre::eyre::{bail, Error};
 use dioxus::hooks::UnboundedReceiver;
 use etcetera::{choose_app_strategy, AppStrategy, AppStrategyArgs};
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerEntry, ServerStatus};
 use std::collections::HashMap;
 use std::time::Duration;
 
@@ -46,6 +46,22 @@ impl super::PlatformInterface for DesktopPlatform {
         save_config_map(&config).ok()
     }
 
+    fn load_servers() -> Vec<ServerEntry> {
+        let config = load_config_map();
+        config
+            .get("servers")
+            .and_then(|s| serde_json::from_str(s).ok())
+            .unwrap_or_default()
+    }
+
+    fn save_servers(servers: &[ServerEntry]) {
+        let mut config = load_config_map();
+        if let Ok(json) = serde_json::to_string(servers) {
+            config.insert("servers".to_string(), json);
+            let _ = save_config_map(&config);
+        }
+    }
+
     async fn network_connect(
         address: String,
         username: String,
@@ -59,6 +75,10 @@ impl super::PlatformInterface for DesktopPlatform {
         super::connect::get_status(client).await
     }
 
+    async fn ping_server(address: &str, port: u16) -> color_eyre::Result<ServerStatus> {
+        mumble_udp_ping(address, port).await
+    }
+
     fn init_logging() {
         use tracing::level_filters::LevelFilter;
         use tracing_subscriber::filter::EnvFilter;
@@ -106,3 +126,57 @@ fn save_config_map(config: &HashMap<String, String>) -> color_eyre::Result<()> {
     std::fs::write(&config_path, contents)?;
     Ok(())
 }
+
+/// Mumble UDP ping protocol.
+///
+/// Send a 12-byte packet: 4 zero bytes + 8-byte identifier.
+/// Receive a 24-byte response: 4 bytes version (1 byte each: major.minor.patch + padding)
+/// + 8 bytes identifier echo + 4 bytes current_users + 4 bytes max_users + 4 bytes bandwidth.
+async fn mumble_udp_ping(address: &str, port: u16) -> color_eyre::Result<ServerStatus> {
+    use std::net::ToSocketAddrs;
+    use tokio::net::UdpSocket;
+
+    let dest = format!("{}:{}", address, port)
+        .to_socket_addrs()?
+        .next()
+        .ok_or_else(|| color_eyre::eyre::eyre!("could not resolve address"))?;
+
+    let bind_addr = if dest.is_ipv6() { "[::]:0" } else { "0.0.0.0:0" };
+    let socket = UdpSocket::bind(bind_addr).await?;
+    socket.connect(dest).await?;
+
+    // Build ping packet: 4 zero bytes + 8-byte request ID
+    let request_id: u64 = std::time::SystemTime::now()
+        .duration_since(std::time::UNIX_EPOCH)
+        .unwrap_or_default()
+        .as_nanos() as u64;
+
+    let mut buf = [0u8; 12];
+    buf[4..12].copy_from_slice(&request_id.to_be_bytes());
+    socket.send(&buf).await?;
+
+    let mut response = [0u8; 24];
+    let timeout = tokio::time::timeout(Duration::from_secs(2), socket.recv(&mut response)).await;
+
+    match timeout {
+        Ok(Ok(len)) if len >= 24 => {
+            let version_major = response[0] as u32;
+            let version_minor = response[1] as u32;
+            let version_patch = response[2] as u32;
+            let users = u32::from_be_bytes([response[12], response[13], response[14], response[15]]);
+            let max_users = u32::from_be_bytes([response[16], response[17], response[18], response[19]]);
+            let bandwidth = u32::from_be_bytes([response[20], response[21], response[22], response[23]]);
+
+            Ok(ServerStatus {
+                success: true,
+                version: Some((version_major, version_minor, version_patch)),
+                users: Some(users),
+                max_users: Some(max_users),
+                bandwidth: Some(bandwidth),
+            })
+        }
+        Ok(Ok(_)) => bail!("ping response too short"),
+        Ok(Err(e)) => Err(e.into()),
+        Err(_) => bail!("ping timed out"),
+    }
+}

gui/src/imp/mobile.rs

@@ -1,7 +1,7 @@
 use crate::app::Command;
 use color_eyre::eyre::Error;
 use dioxus::hooks::UnboundedReceiver;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerEntry, ServerStatus};
 use std::future::Future;
 use std::time::Duration;
 
@@ -31,10 +31,16 @@ impl super::PlatformInterface for MobilePlatform {
         None
     }
 
-    fn set_default_server(server: &str) -> Option<()> {
+    fn set_default_server(_server: &str) -> Option<()> {
         None
     }
 
+    fn load_servers() -> Vec<ServerEntry> {
+        Vec::new()
+    }
+
+    fn save_servers(_servers: &[ServerEntry]) {}
+
     async fn network_connect(
         address: String,
         username: String,
@@ -48,6 +54,10 @@ impl super::PlatformInterface for MobilePlatform {
         super::connect::get_status(client).await
     }
 
+    async fn ping_server(_address: &str, _port: u16) -> color_eyre::Result<ServerStatus> {
+        color_eyre::eyre::bail!("ping not supported on mobile yet")
+    }
+
     fn init_logging() {
         use tracing::level_filters::LevelFilter;
         use tracing_subscriber::filter::EnvFilter;

gui/src/imp/mod.rs

@@ -7,7 +7,7 @@
 use crate::{app::Command, effects::AudioProcessor};
 use color_eyre::eyre::Error;
 use dioxus::hooks::UnboundedReceiver;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerEntry, ServerStatus};
 use std::future::Future;
 use std::time::Duration;
 
@@ -70,11 +70,17 @@ pub trait PlatformInterface {
         gui_config: &ClientConfig,
     ) -> impl Future<Output = Result<(), Error>>;
 
-    /// Get server status (user count, version, etc.).
+    /// Get server status (user count, version, etc.) via the web proxy status endpoint.
     fn get_status(
         client: &reqwest::Client,
     ) -> impl Future<Output = color_eyre::Result<ServerStatus>>;
 
+    /// Ping a mumble server via UDP to get version, user count, etc.
+    fn ping_server(
+        address: &str,
+        port: u16,
+    ) -> impl Future<Output = color_eyre::Result<ServerStatus>>;
+
     /// Load the proxy overrides (proxy URL, cert hash, etc.).
     fn load_config() -> impl Future<Output = color_eyre::Result<ClientConfig>>;
 
@@ -90,6 +96,12 @@ pub trait PlatformInterface {
     /// Save the default server URL.
     fn set_default_server(server: &str) -> Option<()>;
 
+    /// Load the saved server list.
+    fn load_servers() -> Vec<ServerEntry>;
+
+    /// Save the server list.
+    fn save_servers(servers: &[ServerEntry]);
+
     /// Async sleep for the given duration.
     fn sleep(duration: Duration) -> impl Future<Output = ()>;
 }

gui/src/imp/stub.rs

@@ -3,7 +3,7 @@
 use crate::effects::AudioProcessor;
 use color_eyre::eyre::Error;
 use dioxus::hooks::UnboundedReceiver;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerEntry, ServerStatus};
 use std::future::Future;
 
 pub struct StubPlatform;
@@ -34,6 +34,13 @@ impl super::PlatformInterface for StubPlatform {
         async { panic!("stubbed platform") }
     }
 
+    fn ping_server(
+        _address: &str,
+        _port: u16,
+    ) -> impl Future<Output = color_eyre::Result<ServerStatus>> {
+        async { panic!("stubbed platform") }
+    }
+
     fn load_config() -> impl Future<Output = color_eyre::Result<ClientConfig>> {
         async { panic!("stubbed platform") }
     }
@@ -54,6 +61,14 @@ impl super::PlatformInterface for StubPlatform {
         panic!("stubbed platform")
     }
 
+    fn load_servers() -> Vec<ServerEntry> {
+        panic!("stubbed platform")
+    }
+
+    fn save_servers(_servers: &[ServerEntry]) {
+        panic!("stubbed platform")
+    }
+
     fn sleep(_duration: std::time::Duration) -> impl Future<Output = ()> {
         async { panic!("stubbed platform") }
     }

gui/src/imp/web.rs

@@ -6,7 +6,7 @@ use dioxus::prelude::*;
 use gloo_timers::future::TimeoutFuture;
 use js_sys::Float32Array;
 use mumble_protocol::control::ClientControlCodec;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerEntry, ServerStatus};
 use reqwest::Url;
 use std::future::Future;
 use std::sync::Arc;
@@ -129,6 +129,24 @@ impl super::PlatformInterface for WebPlatform {
         None
     }
 
+    fn load_servers() -> Vec<ServerEntry> {
+        web_sys::window()
+            .and_then(|w| w.local_storage().ok()?)
+            .and_then(|s| s.get_item("servers").ok()?)
+            .and_then(|json| serde_json::from_str(&json).ok())
+            .unwrap_or_default()
+    }
+
+    fn save_servers(servers: &[ServerEntry]) {
+        if let Ok(json) = serde_json::to_string(servers) {
+            if let Some(storage) = web_sys::window()
+                .and_then(|w| w.local_storage().ok()?)
+            {
+                let _ = storage.set_item("servers", &json);
+            }
+        }
+    }
+
     async fn network_connect(
         address: String,
         username: String,
@@ -147,6 +165,11 @@ impl super::PlatformInterface for WebPlatform {
             .await?)
     }
 
+    async fn ping_server(_address: &str, _port: u16) -> color_eyre::Result<ServerStatus> {
+        // UDP ping not available in browsers; use get_status via HTTP proxy instead
+        color_eyre::eyre::bail!("UDP ping not supported on web platform")
+    }
+
     async fn sleep(duration: Duration) {
         TimeoutFuture::new(duration.as_millis() as u32).await;
     }