fix version reporting after refactor (#34 )

Reviewed-on: #34 Reviewed-by: restitux <restitux@ohea.xyz> Co-authored-by: Sam Sartor <me@samsartor.com> Co-committed-by: Sam Sartor <me@samsartor.com>
Move mumble UDP ping into common crate (#33 )
2026-05-05 05:30:18 +00:00 · 2026-05-05 04:37:19 +00:00 · 2026-05-05 04:14:33 +00:00 · 2026-05-05 03:23:22 +00:00 · 2026-03-30 01:30:14 +00:00 · 2026-03-30 00:56:36 +00:00
55 changed files with 8331 additions and 5933 deletions
@@ -0,0 +1 @@
+target
@@ -0,0 +1,27 @@
+name: Build android container
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *"
+
+jobs:
+  android-release-builder-container-build:
+    runs-on: ubuntu-latest 
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.ohea.xyz
+          username: ${{ secrets.CI_REGISTRY_USER }}
+          password: ${{ secrets.CI_REGISTRY_PASSWORD }}
+
+      - name: Build Android builder image
+        shell: bash
+        run: |
+          docker pull "$(grep -m1 '^FROM' ./docker/android-release-builder.Dockerfile | awk '{print $2}')"
+          docker build -t git.ohea.xyz/mumble/mumble-web2/android-release-builder:latest -f ./docker/android-release-builder.Dockerfile .
+          docker push git.ohea.xyz/mumble/mumble-web2/android-release-builder:latest
@@ -0,0 +1,149 @@
+name: Build Mumble Web 2
+on: [push]
+
+jobs:
+  linux_build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Install rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          toolchain: stable
+          targets: wasm32-unknown-unknown
+
+      - name: Install cargo binstall
+        run: curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
+
+      - name: Install dioxus-cli
+        run: cargo binstall dioxus-cli --version 0.7.3
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Build dioxus project
+        run: dx build --platform web --release -p mumble-web2-gui
+
+      - name: Upload mumble-web2-gui Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-gui
+          path: target/dx/mumble-web2-gui/release/web/public
+          retention-days: 5
+
+      - name: Build proxy
+        run: cargo build --release -p mumble-web2-proxy
+
+      - name: Upload mumble-web2-proxy Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-proxy
+          path: target/release/mumble-web2-proxy
+          retention-days: 5
+
+  macos_build:
+    runs-on: macos
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Restore Rust cache
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            rust-${{ runner.os }}-
+
+      - name: Install cargo binstall
+        run: curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
+
+      - name: Install dioxus-cli
+        run: cargo binstall dioxus-cli --version 0.7.3 --no-confirm
+
+      - name: Build dioxus project
+        run: dx bundle --platform macos --release -p mumble-web2-gui
+
+      - name: Save Rust cache
+        if: always()
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Upload mumble-web2-gui Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-gui-macos-arm64
+          path: gui/dist
+          retention-days: 5
+
+  windows_build:
+    runs-on: windows
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Restore Rust cache
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            rust-${{ runner.os }}-
+
+      - name: Pull builder container
+        run: docker pull git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest
+
+      - name: Bundle dioxus project
+        run: docker run `
+          --mount "type=bind,source=${PWD},target=C:\app" `
+          --workdir "C:\app\gui" `
+          git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest `
+          C:\Users\ContainerAdministrator\.cargo\bin\dx.exe bundle --verbose --trace -p mumble-web2-gui --release --windows
+
+      - name: Save Rust cache
+        if: always()
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Upload mumble-web2-gui Windows Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-gui-windows
+          path: gui/dist
+          retention-days: 5
+
+  android_build:
+    runs-on: ubuntu-latest
+    container:
+      image: git.ohea.xyz/mumble/mumble-web2/android-release-builder:latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Build dioxus project (x86_64-linux-android)
+        run: dx build --platform android --target x86_64-linux-android --release -p mumble-web2-gui
+
+      - name: Build dioxus project (aarch64-linux-android)
+        run: dx build --platform android --target aarch64-linux-android --release -p mumble-web2-gui
+
+      - name: Upload mumble-web2-gui Android Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-android
+          path: target/dx/mumble-web2-gui/release/android/app/app/build/outputs/apk/debug/app-debug.apk
+          retention-days: 5
@@ -0,0 +1,27 @@
+name: Build Mumble Web 2 release builder containers
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *"
+
+jobs:
+  windows-release-builder-container-build:
+    runs-on: windows
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.ohea.xyz
+          username: ${{ secrets.CI_REGISTRY_USER }}
+          password: ${{ secrets.CI_REGISTRY_PASSWORD }}
+
+      - name: Build Windows image
+        shell: bash
+        run: |
+          docker pull "$(grep -m1 '^FROM' ./docker/windows-release-builder.Dockerfile | awk '{print $2}')"
+          docker build -t git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest -f ./docker/windows-release-builder.Dockerfile .
+          docker push git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest
@@ -1,3 +1,9 @@
 /target
 dist/
 server_hash.txt
+.aider*
+**.pem
+proxy/bundle
+/config.toml
+proxy/config.toml
+*_onnx.tar.gz
@@ -0,0 +1,4 @@
+{
+    "rust-analyzer.cargo.features": ["desktop","web"],
+    "rust-analyzer.cargo.noDefaultFeatures": false
+}
@@ -1,6 +1,6 @@
 [workspace]
 resolver = "2"
-members = [ "common","gui", "proxy"]
+members = ["client", "common", "gui", "proxy"]

 [workspace.dependencies]
 serde = { version = "1.0.214", features = ["derive"] }
@@ -11,6 +11,16 @@ mumble-web2-common = { path = "common" }
 version = "0.5.0"
 package = "mumble-protocol-2x"
 default-features = false
-features = [
-  "asynchronous-codec",
-]
+features = ["asynchronous-codec"]
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"
@@ -1,24 +1,22 @@
 # GUI Development

 ## Running Desktop
-1. `cargo install dioxus-cli --version 0.6.0-alpha.4`
-2. `dx build -p mumble-web2-gui --platform desktop`

-## Running Web
-1. `cargo install dioxus-cli --version 0.6.0-alpha.4`
-2. `cargo install cargo install wtransport --example gencert`
-3. in the proxy directory:
-   1. `cp config.toml.example config.toml`
-   2. run `gencert` and copy the certificate hash into config.toml
-   3. `cargo run -p mumble-web2-proxy` in the background
+1. `cargo install dioxus-cli --version 0.7.1`
+2. `dx run -p mumble-web2-gui --platform desktop --release`

-## with `dx serve`
-4. in the gui directory
-   1. `export 'MUMBLE_WEB2_GUI_CONFIG={"cert_hash": <CERTIFICATE HASH HERE>, "proxy_url": "https://localhost:4433"}'`
-   2. `dx serve -p mumble-web2-gui --platform web`
-5. connect to `localhost:8080` (most common)
+## Running Web (development)

-## with `mumble-web2-proxy` only
-4. in the gui directory:
-   1. `dx build -p mumble-web2-gui --platform web`
-5. connect to `localhost:4434` (most common)
+1. `cargo install dioxus-cli --version 0.7.1`
+3. `dx serve -p mumble-web2-gui --platform web`
+2. `cd docker && docker compose up`
+4. connect to `https://localhost:64444`
+5. fill in the proxy url as `https://127.0.0.1:4433/proxy` (this should autofill)
+
+## Running Web (with `proxy` only)
+
+1. `cargo install dioxus-cli --version 0.7.1`
+2. `dx build -p mumble-web2-gui --platform web --release`
+3. `cp config.toml.example config.toml`
+4. `cargo run -p mumble-web2-proxy` in the background
+5. connect to `localhost:8080`
@@ -0,0 +1,146 @@
+[package]
+name = "mumble-web2-client"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+# Web Dependencies
+# ================
+wasm-bindgen = { version = "^0.2.92", optional = true }
+wasm-bindgen-futures = { version = "^0.4.42", optional = true }
+wasm-streams = { version = "^0.4.0", optional = true }
+serde-wasm-bindgen = { version = "^0.6.5", optional = true }
+js-sys = { version = "=0.3.82", optional = true }
+web-sys = { version = "=0.3.82", features = [
+  "WebTransport",
+  "console",
+  "WebTransportOptions",
+  "WebTransportBidirectionalStream",
+  "WebTransportSendStream",
+  "WebTransportReceiveStream",
+  "Navigator",
+  "MediaDevices",
+  "AudioDecoder",
+  "AudioDecoderInit",
+  "AudioData",
+  "AudioEncoderConfig",
+  "AudioDecoderConfig",
+  "EncodedAudioChunk",
+  "EncodedAudioChunkInit",
+  "EncodedAudioChunkType",
+  "CodecState",
+  "AudioContext",
+  "AudioContextOptions",
+  "MediaStream",
+  "GainNode",
+  "MediaStreamAudioSourceNode",
+  "BaseAudioContext",
+  "AudioDestinationNode",
+  "AudioWorkletNode",
+  "AudioWorklet",
+  "AudioWorkletProcessor",
+  "MessagePort",
+  "MediaStreamConstraints",
+  "WorkletOptions",
+  "AudioEncoder",
+  "AudioEncoderInit",
+  "AudioDataInit",
+  "HtmlAnchorElement",
+  "Url",
+  "Blob",
+  "AudioDataCopyToOptions",
+  "AudioSampleFormat",
+  "Storage",
+], optional = true }
+gloo-timers = { version = "^0.3.0", features = ["futures"], optional = true }
+tracing-web = { version = "^0.1.3", optional = true }
+
+# Desktop Dependecies
+# ===================
+tokio = { version = "^1.41.1", features = ["net", "rt"], optional = true }
+tokio-rustls = { version = "^0.26.0", optional = true }
+opus = { version = "0.3.0", optional = true }
+cpal = { version = "0.15.3", optional = true }
+dasp_ring_buffer = { version = "0.11.0", optional = true }
+etcetera = { version = "0.10.0", optional = true }
+
+# Base Dependencies
+# ================
+dioxus-signals = "0.7.2"
+manganis = "0.7.2"
+once_cell = "1.19.0"
+asynchronous-codec = { workspace = true }
+futures = "^0.3.30"
+merge-io = "^0.3.0"
+mumble-protocol = { workspace = true }
+serde_json = "1"
+tokio-util = { version = "^0.7.11", features = ["codec", "compat"] }
+byteorder = "1.5"
+ogg = "^0.9.1"
+ordermap = "^0.5.3"
+html-purifier = "^0.3.0"
+markdown = "^0.3.0"
+futures-channel = "^0.3.30"
+mumble-web2-common = { workspace = true }
+serde = { workspace = true }
+tracing-subscriber = { version = "^0.3.18", features = ["ansi"] }
+tracing = "^0.1.40"
+color-eyre = "^0.6.3"
+crossbeam-queue = "^0.3.11"
+lol_html = "^2.2.0"
+base64 = "^0.22"
+mime_guess = "^2.0.5"
+async_cell = "^0.2.3"
+reqwest = { version = "^0.12.22", features = ["json"] }
+dioxus-asset-resolver = "0.7.2"
+
+# Denoising
+# =========
+deep_filter = { git = "https://github.com/Rikorose/DeepFilterNet.git", rev = "d375b2d8309e0935d165700c91da9de862a99c31", features = [
+  "tract",
+] }
+crossbeam = "0.8.4"
+
+# Android dependencies for requesting permissions
+[target.'cfg(target_os = "android")'.dependencies]
+android-permissions = "0.1.2"
+jni = "0.21.1"
+ndk-context = "0.1.1"
+
+[patch.crates-io]
+tract-hir = "=0.12.4"
+tract-core = "=0.12.4"
+tract-onnx = "=0.12.4"
+tract-pulse = "=0.12.4"
+
+[features]
+web = [
+  "wasm-bindgen",
+  "wasm-bindgen-futures",
+  "wasm-streams",
+  "serde-wasm-bindgen",
+  "js-sys",
+  "web-sys",
+  "gloo-timers",
+  "tracing-web",
+  "deep_filter/wasm",
+]
+desktop = [
+  "tokio",
+  "tokio-rustls",
+  "tracing-subscriber/env-filter",
+  "opus",
+  "cpal",
+  "dasp_ring_buffer",
+  "etcetera",
+  "mumble-web2-common/networking",
+]
+mobile = [
+  "tokio",
+  "tokio-rustls",
+  "tracing-subscriber/env-filter",
+  "opus",
+  "cpal",
+  "dasp_ring_buffer",
+  "mumble-web2-common/networking",
+]
@@ -1,7 +1,7 @@
 const SAMPLE_RATE = 48000;
 const PACKET_SAMPLES = 960;

-class RustWorklet extends AudioWorkletProcessor {
+class RustMicWorklet extends AudioWorkletProcessor {
  constructor(options) {
    super();
    this.module = options.processorOptions;
@@ -31,7 +31,7 @@ class RustWorklet extends AudioWorkletProcessor {
    }
    this.buffer_offset -= PACKET_SAMPLES;
    this.timestamp = null;
-   }
+  }

  process(inputs) {
    //console.log(inputs);
@@ -60,4 +60,44 @@ class RustWorklet extends AudioWorkletProcessor {
  }
 };

-registerProcessor("rust_mic_worklet", RustWorklet);
+
+class RustSpeakerWorklet extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.queue = [];
+    this.readIndex = 0;
+
+    this.port.onmessage = (event) => {
+      this.queue.push(event.data)
+    };
+  }
+
+  process(inputs, outputs) {
+    if (this.queue.length) {
+      console.log(this.queue[0].samples.length, outputs[0][0].length);
+    }
+
+    const output = outputs[0];
+
+    for (let i = 0; i < output[0].length; i++) {
+      if (!this.queue.length) {
+        return true;
+      }
+      const current = this.queue[0];
+      for (let ch = 0; ch < output.length; ch++) {
+        output[ch][i] = current.samples[this.readIndex];
+      }
+      this.readIndex++;
+      if (this.readIndex >= current.samples.length) {
+        this.queue.shift();
+        this.readIndex = 0;
+      }
+    }
+    return true;
+  }
+};
+
+
+
+registerProcessor("rust_mic_worklet", RustMicWorklet);
+registerProcessor("rust_speaker_worklet", RustSpeakerWorklet);
@@ -0,0 +1,86 @@
+use std::env;
+use std::path::Path;
+use std::process::Command;
+
+fn version_env() -> Option<()> {
+    if env::var("MUMBLE_WEB2_VERSION").is_ok() {
+        return Some(());
+    }
+
+    let output = Command::new("git")
+        .args(["rev-parse", "--short", "HEAD"])
+        .output()
+        .ok()?;
+
+    let git_hash = String::from_utf8(output.stdout).ok()?;
+    let git_hash = git_hash.trim(); // drop trailing newline
+
+    let status = Command::new("git")
+        .args(["status", "--porcelain"])
+        .output()
+        .ok()?;
+    let dirty = match status.stdout.is_empty() {
+        true => "",
+        false => "-dirty",
+    };
+
+    // Expose it as a compile-time env var
+    println!("cargo::rustc-env=MUMBLE_WEB2_VERSION=git-{git_hash}{dirty}");
+
+    // Optional: rebuild when HEAD changes
+    println!("cargo::rerun-if-changed=.git/HEAD");
+
+    Some(())
+}
+
+fn download_deepfilternet() {
+    // Define the target directory and file
+    let assets_dir = "assets";
+    let target_file = format!("{}/DeepFilterNet3_ll_onnx.tar.gz", assets_dir);
+    let target_path = Path::new(&target_file);
+
+    // Check if the file already exists
+    if target_path.exists() {
+        println!(
+            "cargo::warning=DeepFilterNet model already exists at {}",
+            target_file
+        );
+        return;
+    }
+
+    println!(
+        "cargo::warning=Downloading DeepFilterNet model to {}...",
+        target_file
+    );
+
+    // Download the file using curl
+    let url = "https://github.com/Rikorose/DeepFilterNet/raw/refs/heads/main/models/DeepFilterNet3_ll_onnx.tar.gz";
+
+    let status = Command::new("curl")
+        .args([
+            "-L", // Follow redirects
+            "-o",
+            &target_file, // Output file
+            url,
+        ])
+        .status()
+        .expect("Failed to execute curl command. Make sure curl is installed.");
+
+    if !status.success() {
+        println!("cargo::error=Failed to download DeepFilterNet model from {url}");
+        return;
+    }
+
+    println!(
+        "cargo::warning=Successfully downloaded DeepFilterNet model to {}",
+        target_file
+    );
+
+    // Rerun this build script if the target file is deleted
+    println!("cargo::rerun-if-changed={}", target_file);
+}
+
+fn main() {
+    version_env();
+    download_deepfilternet();
+}
@@ -0,0 +1,215 @@
+use dioxus_signals::{ReadableExt as _, Signal};
+use mime_guess::Mime;
+use mumble_web2_common::ProxyOverrides;
+use ordermap::OrderSet;
+use std::collections::{HashMap, HashSet};
+use std::{fmt, sync::Arc};
+
+pub type ChannelId = u32;
+pub type UserId = u32;
+
+#[derive(Debug)]
+pub enum ConnectionState {
+    Disconnected,
+    Connecting,
+    Connected,
+    Failed(String),
+}
+
+#[derive(Debug, Clone)]
+pub struct AudioSettings {
+    pub denoise: bool,
+}
+
+#[derive(Debug)]
+pub enum Command {
+    Connect {
+        address: String,
+        username: String,
+        config: ProxyOverrides,
+    },
+    SendChat {
+        markdown: String,
+        channels: Vec<ChannelId>,
+    },
+    SendFile {
+        bytes: Vec<u8>,
+        name: String,
+        mime: Option<Mime>,
+        channels: Vec<ChannelId>,
+    },
+    SetMute {
+        mute: bool,
+    },
+    SetDeaf {
+        deaf: bool,
+    },
+    EnterChannel {
+        channel: ChannelId,
+        user: UserId,
+    },
+    UpdateAudioSettings(AudioSettings),
+    Disconnect,
+}
+
+#[derive(Default, Debug)]
+pub struct UserState {
+    pub name: String,
+    pub channel: ChannelId,
+    pub deaf: bool,
+    pub mute: bool,
+    pub suppress: bool,
+    pub self_deaf: bool,
+    pub self_mute: bool,
+}
+
+#[derive(Debug)]
+pub struct Chat {
+    pub raw: String,
+    pub dangerous_html: String,
+    pub sender: Option<UserId>,
+}
+
+#[derive(Default, Debug)]
+pub struct ChannelState {
+    pub name: String,
+    pub children: OrderSet<ChannelId>,
+    pub users: OrderSet<UserId>,
+    pub parent: Option<ChannelId>,
+    pub position: i32,
+}
+
+impl ChannelState {
+    pub fn update_from_channel_state(
+        &mut self,
+        channel_state: &mumble_protocol::control::msgs::ChannelState,
+    ) {
+        if channel_state.has_position() {
+            self.position = channel_state.get_position();
+        }
+        if channel_state.has_parent() {
+            self.parent = Some(channel_state.get_parent());
+        }
+        if channel_state.has_name() {
+            self.name = channel_state.get_name().to_string();
+        }
+    }
+}
+
+#[derive(Default, Debug)]
+pub struct ChannelsState {
+    pub channels: HashMap<ChannelId, ChannelState>,
+}
+
+impl ChannelsState {
+    pub fn update_from_channel_state(
+        &mut self,
+        channel_state: &mumble_protocol::control::msgs::ChannelState,
+    ) {
+        self.channels
+            .entry(channel_state.get_channel_id())
+            .or_default()
+            .update_from_channel_state(channel_state);
+
+        self.update_channel_parents();
+    }
+
+    pub fn update_from_channel_remove(
+        &mut self,
+        channel_remove: &mumble_protocol::control::msgs::ChannelRemove,
+    ) {
+        self.channels.remove(&channel_remove.get_channel_id());
+        self.update_channel_parents();
+    }
+
+    pub fn update_channel_parents(&mut self) {
+        // Zero out existing children
+        for state in self.channels.values_mut() {
+            state.children.clear();
+        }
+
+        let mut to_sort: Vec<(ChannelId, Option<ChannelId>, i32, String)> = Vec::new();
+        for (id, state) in self.channels.iter() {
+            // Handle channels with no parent (the root channel)
+            let Some(parent_id) = state.parent else {
+                to_sort.push((*id, None, 0, state.name.clone()));
+                continue;
+            };
+
+            // If a channel has a parent that we haven't gotten a channel
+            // state packet for, ignore it
+            if !self.channels.contains_key(&parent_id) {
+                continue;
+            }
+
+            to_sort.push((*id, Some(parent_id), state.position, state.name.clone()));
+        }
+
+        let pos_name: HashMap<ChannelId, (i32, String)> = self
+            .channels
+            .iter()
+            .map(|(&id, state)| (id, (state.position, state.name.clone())))
+            .collect();
+
+        let mut updated: HashSet<ChannelId> = HashSet::new();
+
+        while updated.len() < to_sort.len() {
+            for &(id, ref parent_id, position, ref name) in &to_sort {
+                let Some(parent_id) = parent_id else {
+                    updated.insert(id);
+                    continue;
+                };
+
+                if updated.contains(&id) || !updated.contains(&parent_id) {
+                    continue;
+                }
+
+                // Unwrap should never fail here since we pre filter
+                let parent = self.channels.get_mut(&parent_id).unwrap();
+
+                let mut insert_index = parent.children.len();
+                for (i, &child) in parent.children.iter().enumerate() {
+                    let (p, ref n) = pos_name[&child];
+                    if (position == p && name < n) || p > position {
+                        insert_index = i;
+                        break;
+                    }
+                }
+
+                parent.children.insert_before(insert_index, id);
+                updated.insert(id);
+            }
+        }
+    }
+}
+
+#[derive(Default, Debug)]
+pub struct ServerState {
+    pub channels_state: ChannelsState,
+    pub users: HashMap<UserId, UserState>,
+    pub chat: Vec<Chat>,
+    pub session: Option<UserId>,
+}
+
+impl ServerState {
+    pub fn this_user(&self) -> Option<&UserState> {
+        self.users.get(&self.session?)
+    }
+}
+
+pub struct State {
+    pub status: Signal<ConnectionState>,
+    pub server: Signal<ServerState>,
+    pub audio: Signal<AudioSettings>,
+}
+
+impl fmt::Debug for State {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.debug_struct("State")
+            .field("status", &self.status.read())
+            .field("server", &self.server.read())
+            .finish()
+    }
+}
+
+pub type SharedState = Arc<State>;
@@ -0,0 +1,188 @@
+use crossbeam::atomic::AtomicCell;
+use df::tract::{mut_slice_as_arrayviewmut, slice_as_arrayview};
+use df::tract::{DfParams, DfTract, RuntimeParams};
+use dioxus_asset_resolver::read_asset_bytes;
+use manganis::{asset, Asset};
+use std::cell::RefCell;
+use std::sync::Arc;
+use tracing::{error, info};
+
+use crate::imp::SpawnHandle;
+
+static DF_MODEL: Asset = asset!("/assets/DeepFilterNet3_ll_onnx.tar.gz");
+// TODO: make this user configurable.
+static DEFAULT_NOISE_FLOOR: f32 = 0.001;
+// 200ms hold at 48kHz sample rate
+static HOLD_SAMPLES_MAX: usize = 48000 / 5; // 9600 samples = 200ms
+
+/// Indicates the transmission state after processing audio.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum TransmitState {
+    /// Audio is above threshold, or below but within hold period - transmit normally
+    Transmitting,
+    /// Hold period expired - send this frame as terminator (end_bit = true)
+    Terminator,
+    /// Silent and not transmitting - don't send anything
+    Silent,
+}
+
+enum DenoisingModelState {
+    Nothing,
+    Downloading(Arc<AtomicCell<Option<DfParams>>>),
+    Availible(Box<DfTract>),
+}
+
+fn with_denoising_model<O>(spawn: &SpawnHandle, func: impl FnOnce(&mut DfTract) -> O) -> Option<O> {
+    // Using a thread local is super gross, but DfTract is not Send (so it can never leave the current
+    // thread) while AudioProcessing itself might change threads whenever.
+    thread_local! {
+        static STATE: RefCell<DenoisingModelState> = const { RefCell::new(DenoisingModelState::Nothing) };
+    }
+
+    STATE.with_borrow_mut(|state| match state {
+        DenoisingModelState::Nothing => {
+            let cell = Arc::new(AtomicCell::new(None));
+            let cell_task = cell.clone();
+            *state = DenoisingModelState::Downloading(cell);
+            let model = DF_MODEL.to_string();
+            spawn.spawn(async move {
+                let model_bytes = match read_asset_bytes(&model).await {
+                    Ok(b) => b,
+                    Err(e) => {
+                        error!("could not read denoising model from \"{model}\": {e:?}");
+                        return;
+                    }
+                };
+                let params = match DfParams::from_bytes(&model_bytes) {
+                    Ok(p) => p,
+                    Err(e) => {
+                        error!("could not load denoising model parameters: {e:?}");
+                        return;
+                    }
+                };
+                cell_task.store(Some(params));
+            });
+            None
+        }
+        DenoisingModelState::Downloading(cell) => {
+            if let Some(params) = cell.take() {
+                let mut tract = match DfTract::new(params, &RuntimeParams::default_with_ch(1)) {
+                    Ok(t) => Box::new(t),
+                    Err(e) => {
+                        error!("could not create denoising engine: {e:?}");
+                        return None;
+                    }
+                };
+                info!("instantiated denoising engine");
+                let out = func(&mut tract);
+                *state = DenoisingModelState::Availible(tract);
+                Some(out)
+            } else {
+                None
+            }
+        }
+        DenoisingModelState::Availible(tract) => Some(func(tract)),
+    })
+}
+
+pub struct AudioProcessor {
+    denoise: bool,
+    spawn: SpawnHandle,
+    buffer: Vec<f32>,
+    noise_floor: f32,
+    /// Whether we were transmitting in the previous frame
+    was_transmitting: bool,
+    /// Number of samples we've been below threshold (for hold period)
+    hold_samples: usize,
+}
+
+impl AudioProcessor {
+    pub fn new(denoise: bool) -> Self {
+        AudioProcessor {
+            denoise,
+            spawn: SpawnHandle::current(),
+            buffer: Vec::new(),
+            noise_floor: DEFAULT_NOISE_FLOOR,
+            was_transmitting: false,
+            hold_samples: 0,
+        }
+    }
+}
+
+impl AudioProcessor {
+    pub fn process(
+        &mut self,
+        audio: &[f32],
+        channels: usize,
+        output: &mut Vec<f32>,
+    ) -> TransmitState {
+        let mut include_raw = true;
+        if self.denoise {
+            with_denoising_model(&self.spawn, |df| {
+                include_raw = false;
+
+                self.buffer.extend(audio.iter().step_by(channels).copied());
+                output.reserve(audio.len());
+
+                let hop = df.hop_size;
+                let mut i = 0;
+                while self.buffer[i..].len() >= hop {
+                    let audio = &self.buffer[i..][..hop];
+                    i += audio.len();
+
+                    let j = output.len();
+                    output.extend(std::iter::repeat_n(0f32, audio.len()));
+                    let output = &mut output[j..];
+
+                    df.process(
+                        slice_as_arrayview(audio, &[audio.len()])
+                            .into_shape((1, audio.len()))
+                            .unwrap(),
+                        mut_slice_as_arrayviewmut(output, &[output.len()])
+                            .into_shape((1, output.len()))
+                            .unwrap(),
+                    );
+                }
+                self.buffer.splice(..i, []);
+            });
+        }
+
+        if include_raw {
+            output.extend(audio.iter().step_by(channels).copied());
+        }
+
+        // Calculate average amplitude for VAD
+        let avg: f32 = if output.is_empty() {
+            0.0
+        } else {
+            output.iter().map(|x| x.abs()).sum::<f32>() / output.len() as f32
+        };
+
+        let above_threshold = avg >= self.noise_floor;
+        let samples_in_frame = output.len();
+
+        let state = if above_threshold {
+            // Above threshold - reset hold counter and transmit
+            self.hold_samples = 0;
+            self.was_transmitting = true;
+            TransmitState::Transmitting
+        } else if self.was_transmitting && self.hold_samples < HOLD_SAMPLES_MAX {
+            // Below threshold but in hold period - keep transmitting
+            self.hold_samples += samples_in_frame;
+            TransmitState::Transmitting
+        } else if self.was_transmitting {
+            // Hold period expired - send terminator
+            self.was_transmitting = false;
+            self.hold_samples = 0;
+            TransmitState::Terminator
+        } else {
+            // Not transmitting and below threshold - stay silent
+            output.clear(); // Don't accumulate stale audio during silence
+            TransmitState::Silent
+        };
+
+        state
+    }
+}
+
+pub type AudioProcessorSender = Arc<AtomicCell<Option<AudioProcessor>>>;
@@ -0,0 +1,91 @@
+use crate::app::Command;
+use color_eyre::eyre::Error;
+use dioxus::hooks::UnboundedReceiver;
+use mumble_web2_common::{ClientConfig, ServerStatus};
+use std::future::Future;
+use std::time::Duration;
+
+/// Mobile platform implementation using Tokio, native audio, and Android permissions.
+pub struct MobilePlatform;
+
+impl super::PlatformInterface for MobilePlatform {
+    type AudioSystem = super::native_audio::NativeAudioSystem;
+
+    async fn load_config() -> color_eyre::Result<ClientConfig> {
+        Ok(ClientConfig {
+            proxy_url: None,
+            cert_hash: None,
+            any_server: true,
+        })
+    }
+
+    fn load_username() -> Option<String> {
+        None
+    }
+
+    fn load_server_url() -> Option<String> {
+        None
+    }
+
+    fn set_default_username(_username: &str) -> Option<()> {
+        None
+    }
+
+    fn set_default_server(server: &str) -> Option<()> {
+        None
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        gui_config: &ClientConfig,
+    ) -> Result<(), Error> {
+        super::connect::network_connect(address, username, event_rx, gui_config).await
+    }
+
+    async fn get_status(client: &reqwest::Client) -> color_eyre::Result<ServerStatus> {
+        super::connect::get_status(client).await
+    }
+
+    fn init_logging() {
+        use tracing::level_filters::LevelFilter;
+        use tracing_subscriber::filter::EnvFilter;
+
+        let env_filter = EnvFilter::builder()
+            .with_default_directive(LevelFilter::INFO.into())
+            .from_env_lossy();
+
+        tracing_subscriber::fmt()
+            .with_target(true)
+            .with_level(true)
+            .with_env_filter(env_filter)
+            .init();
+    }
+
+    fn request_permissions() {
+        request_recording_permission();
+    }
+
+    async fn sleep(duration: Duration) {
+        tokio::time::sleep(duration).await;
+    }
+}
+
+#[cfg(not(target_os = "android"))]
+pub fn request_recording_permission() {}
+
+#[cfg(target_os = "android")]
+pub fn request_recording_permission() {
+    use android_permissions::{PermissionManager, RECORD_AUDIO};
+    use jni::{objects::JObject, JavaVM};
+
+    let ctx = ndk_context::android_context();
+    let vm = unsafe { JavaVM::from_raw(ctx.vm().cast()).unwrap() };
+    let activity = unsafe { JObject::from_raw(ctx.context().cast()) };
+
+    let manager = PermissionManager::create(vm, activity).unwrap();
+    if !manager.check(&RECORD_AUDIO).unwrap() {
+        manager.request(&[&RECORD_AUDIO]).unwrap();
+    }
+}
@@ -1,12 +1,9 @@
-use crate::app::Command;
+use crate::app::{Command, SharedState};
 use color_eyre::eyre::Error;
-use dioxus::hooks::{UnboundedReceiver, UnboundedSender};
-use futures::io::{AsyncRead, AsyncWrite};
-use mumble_protocol::control::{ClientControlCodec, ControlPacket};
-use mumble_protocol::Serverbound;
-use mumble_web2_common::GuiConfig;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_protocol::control::ClientControlCodec;
 use std::net::ToSocketAddrs;
-use std::{fmt, io, sync::Arc};
+use std::sync::Arc;
 use tokio::net::TcpStream;
 use tokio_rustls::rustls;
 use tokio_rustls::rustls::client::danger::{HandshakeSignatureValid, ServerCertVerifier};
@@ -15,37 +12,9 @@ use tokio_rustls::rustls::ClientConfig;
 use tokio_rustls::rustls::DigitallySignedStruct;
 use tokio_rustls::TlsConnector;
 use tokio_util::compat::{TokioAsyncReadCompatExt as _, TokioAsyncWriteCompatExt as _};
+use tracing::{info, instrument};

-pub use tokio::task::spawn;
-pub use tokio::time::sleep;
-
-pub trait ImpRead: AsyncRead + Unpin + Send + 'static {}
-impl<T: AsyncRead + Unpin + Send + 'static> ImpRead for T {}
-
-pub trait ImpWrite: AsyncWrite + Unpin + Send + 'static {}
-impl<T: AsyncWrite + Unpin + Send + 'static> ImpWrite for T {}
-
-pub struct AudioSystem();
-
-impl AudioSystem {
-    pub fn new(sender: UnboundedSender<ControlPacket<Serverbound>>) -> Result<Self, Error> {
-        // TODO
-        Ok(AudioSystem())
-    }
-
-    pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
-        // TODO
-        Ok(AudioPlayer())
-    }
-}
-
-pub struct AudioPlayer();
-
-impl AudioPlayer {
-    pub fn play_opus(&mut self, payload: &[u8]) {
-        // TODO
-    }
-}
+use mumble_web2_common::ProxyOverrides;

 #[derive(Debug)]
 struct NoCertificateVerification;
@@ -99,11 +68,16 @@ impl ServerCertVerifier for NoCertificateVerification {
    }
 }

+#[instrument]
 pub async fn network_connect(
    address: String,
    username: String,
    event_rx: &mut UnboundedReceiver<Command>,
+    overrides: &ProxyOverrides,
+    state: SharedState,
 ) -> Result<(), Error> {
+    info!("connecting");
+
    let config = ClientConfig::builder()
        .dangerous()
        .with_custom_certificate_verifier(Arc::new(NoCertificateVerification))
@@ -129,32 +103,12 @@ pub async fn network_connect(
    let reader = asynchronous_codec::FramedRead::new(read_server.compat(), read_codec);
    let writer = asynchronous_codec::FramedWrite::new(write_server.compat_write(), write_codec);

-    crate::network_loop(username, event_rx, reader, writer).await
+    let (outgoing_send, outgoing_recv) = futures_channel::mpsc::unbounded();
+    spawn(crate::sender_loop(outgoing_recv, writer));
+    crate::network_loop(username, state, event_rx, outgoing_send, reader).await
 }

-pub fn set_default_username(username: &str) -> Option<()> {
-    None
-}
-
-pub fn load_username() -> Option<String> {
-    return None;
-}
-
-pub fn load_config() -> Option<GuiConfig> {
-    None
-}
-
-pub fn init_logging() {
-    use tracing::level_filters::LevelFilter;
-    use tracing_subscriber::filter::EnvFilter;
-
-    let env_filter = EnvFilter::builder()
-        .with_default_directive(LevelFilter::INFO.into())
-        .from_env_lossy();
-
-    tracing_subscriber::fmt()
-        .with_target(true)
-        .with_level(true)
-        .with_env_filter(env_filter)
-        .init();
-}
+#[allow(unused)]
+pub use tokio::spawn;
+#[allow(unused)]
+pub type SpawnHandle = tokio::runtime::Handle;
@@ -0,0 +1,61 @@
+use crate::app::{Command, SharedState};
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::time::Duration;
+
+/// Desktop platform implementation using Tokio and native audio.
+pub struct DesktopPlatform;
+
+impl super::PlatformInterface for DesktopPlatform {
+    type AudioSystem = super::native_audio::NativeAudioSystem;
+    type ConfigSystem = super::native_config::NativeConfigSystem;
+
+    async fn sleep(duration: Duration) {
+        tokio::time::sleep(duration).await;
+    }
+
+    async fn load_proxy_overrides() -> color_eyre::Result<ProxyOverrides> {
+        Ok(ProxyOverrides {
+            proxy_url: None,
+            cert_hash: None,
+            any_server: true,
+        })
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> Result<(), Error> {
+        super::connect::network_connect(address, username, event_rx, overrides, state).await
+    }
+
+    async fn get_status(
+        _client: &reqwest::Client,
+        address: &str,
+    ) -> color_eyre::Result<ServerStatus> {
+        mumble_web2_common::ping_server(address, 64738).await
+    }
+
+    fn init_logging() {
+        use tracing::level_filters::LevelFilter;
+        use tracing_subscriber::filter::EnvFilter;
+
+        let env_filter = EnvFilter::builder()
+            .with_default_directive(LevelFilter::INFO.into())
+            .from_env_lossy();
+
+        tracing_subscriber::fmt()
+            .with_target(true)
+            .with_level(true)
+            .with_env_filter(env_filter)
+            .init();
+    }
+
+    fn request_permissions() {
+        // No-op on desktop
+    }
+}
@@ -0,0 +1,79 @@
+use crate::app::{Command, SharedState};
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::time::Duration;
+
+/// Mobile platform implementation using Tokio, native audio, and Android permissions.
+pub struct MobilePlatform;
+
+impl super::PlatformInterface for MobilePlatform {
+    type AudioSystem = super::native_audio::NativeAudioSystem;
+    type ConfigSystem = super::native_config::NativeConfigSystem;
+
+    async fn load_proxy_overrides() -> color_eyre::Result<ProxyOverrides> {
+        Ok(ProxyOverrides {
+            proxy_url: None,
+            cert_hash: None,
+            any_server: true,
+        })
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> Result<(), Error> {
+        super::connect::network_connect(address, username, event_rx, overrides, state).await
+    }
+
+    async fn get_status(
+        _client: &reqwest::Client,
+        address: &str,
+    ) -> color_eyre::Result<ServerStatus> {
+        mumble_web2_common::ping_server(address, 64738).await
+    }
+
+    fn init_logging() {
+        use tracing::level_filters::LevelFilter;
+        use tracing_subscriber::filter::EnvFilter;
+
+        let env_filter = EnvFilter::builder()
+            .with_default_directive(LevelFilter::INFO.into())
+            .from_env_lossy();
+
+        tracing_subscriber::fmt()
+            .with_target(true)
+            .with_level(true)
+            .with_env_filter(env_filter)
+            .init();
+    }
+
+    fn request_permissions() {
+        request_recording_permission();
+    }
+
+    async fn sleep(duration: Duration) {
+        tokio::time::sleep(duration).await;
+    }
+}
+
+#[cfg(not(target_os = "android"))]
+pub fn request_recording_permission() {}
+
+#[cfg(target_os = "android")]
+pub fn request_recording_permission() {
+    use android_permissions::{PermissionManager, RECORD_AUDIO};
+    use jni::{objects::JObject, JavaVM};
+
+    let ctx = ndk_context::android_context();
+    let vm = unsafe { JavaVM::from_raw(ctx.vm().cast()).unwrap() };
+    let activity = unsafe { JObject::from_raw(ctx.context().cast()) };
+
+    let manager = PermissionManager::create(vm, activity).unwrap();
+    if !manager.check(&RECORD_AUDIO).unwrap() {
+        manager.request(&[&RECORD_AUDIO]).unwrap();
+    }
+}
@@ -0,0 +1,192 @@
+//! Platform abstraction layer
+//!
+//! This module defines traits that each platform (web, desktop, mobile) must implement.
+//! The traits make the platform boundary explicit and provide compile-time verification.
+#![allow(async_fn_in_trait)]
+
+use crate::app::{Command, SharedState};
+use crate::effects::AudioProcessor;
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::collections::HashMap;
+use std::future::Future;
+use std::time::Duration;
+
+// ============================================================================
+// Trait Definitions
+// ============================================================================
+
+/// Platform-specific audio subsystem for capturing microphone input and creating playback streams.
+///
+/// The audio system handles Opus encoding internally - callers receive encoded frames
+/// ready for network transmission.
+pub trait AudioSystemInterface: Sized {
+    /// The player type returned by [`create_player`](Self::create_player).
+    type AudioPlayer: AudioPlayerInterface;
+
+    /// Initialize the audio system.
+    async fn new() -> Result<Self, Error>;
+
+    /// Set the processor for the microphone input, mainly noise cancellation settings.
+    fn set_processor(&self, processor: AudioProcessor);
+
+    /// Begin listening to microphone input, calling the `each` function with
+    /// encoded opus frames.
+    fn start_recording(
+        &mut self,
+        each: impl FnMut(Vec<u8>, bool) + Send + 'static,
+    ) -> Result<(), Error>;
+
+    /// Begin playback of an audio stream, returning an object that can be passed  opus frames.
+    fn create_player(&mut self) -> Result<Self::AudioPlayer, Error>;
+}
+
+/// A handle to an active audio playback stream for a single remote user.
+///
+/// Each connected user gets their own `AudioPlayer` instance, which decodes
+/// incoming Opus frames and outputs PCM audio to the platform's audio device.
+/// The player manages its own decoder state and output buffer.
+pub trait AudioPlayerInterface {
+    /// Decode and play an Opus-encoded audio frame.
+    fn play_opus(&mut self, payload: &[u8]);
+}
+
+pub trait ConfigSystemInterface: Sized + Clone {
+    fn new() -> Result<Self, Error>;
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned;
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize;
+}
+
+/// This is the main trait that each platform must implement. It combines all
+/// platform-specific functionality into a single interface, providing compile-time
+/// verification that all platforms implement the required functionality.
+pub trait PlatformInterface {
+    type AudioSystem: AudioSystemInterface;
+    type ConfigSystem: ConfigSystemInterface;
+
+    /// Initialize logging for the platform.
+    fn init_logging();
+
+    /// Request runtime permissions (Android audio recording, etc.).
+    fn request_permissions();
+
+    /// Establish a connection to the Mumble server and run the network loop.
+    fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        proxy_overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> impl Future<Output = Result<(), Error>>;
+
+    /// Get server status (user count, version, etc.) for the given address.
+    ///
+    /// On web, this goes through the proxy's /status endpoint and ignores `address`
+    /// (the proxy is bound to a specific server). On desktop/mobile, this pings the
+    /// given address directly via UDP.
+    fn get_status(
+        client: &reqwest::Client,
+        address: &str,
+    ) -> impl Future<Output = color_eyre::Result<ServerStatus>>;
+
+    /// Load the proxy overrides (proxy URL, cert hash, etc.).
+    fn load_proxy_overrides() -> impl Future<Output = color_eyre::Result<ProxyOverrides>>;
+
+    /// Async sleep for the given duration.
+    fn sleep(duration: Duration) -> impl Future<Output = ()>;
+}
+
+// ============================================================================
+// Platform Modules
+// ============================================================================
+
+mod stub;
+
+#[cfg(any(feature = "desktop", feature = "mobile"))]
+mod connect;
+#[cfg(any(feature = "desktop", feature = "mobile"))]
+mod native_audio;
+#[cfg(any(feature = "desktop", feature = "mobile"))]
+mod native_config;
+
+#[cfg(feature = "desktop")]
+mod desktop;
+
+#[cfg(feature = "mobile")]
+mod mobile;
+
+#[cfg(feature = "web")]
+mod web;
+
+// ============================================================================
+// Platform Type Alias
+// ============================================================================
+
+#[cfg(feature = "web")]
+pub type Platform = web::WebPlatform;
+
+#[cfg(all(feature = "desktop", not(feature = "web")))]
+pub type Platform = desktop::DesktopPlatform;
+
+#[cfg(all(feature = "mobile", not(feature = "web"), not(feature = "desktop")))]
+pub type Platform = mobile::MobilePlatform;
+
+#[cfg(all(
+    not(feature = "mobile"),
+    not(feature = "web"),
+    not(feature = "desktop")
+))]
+pub type Platform = stub::StubPlatform;
+
+pub type AudioSystem = <Platform as PlatformInterface>::AudioSystem;
+pub type AudioPlayer = <AudioSystem as AudioSystemInterface>::AudioPlayer;
+
+pub type ConfigSystem = <Platform as PlatformInterface>::ConfigSystem;
+
+// ========================
+// Platform Async Runtime
+// ========================
+
+// Note: these can not be part of the Platform because they differ in Send requiremets
+#[cfg(all(any(feature = "desktop", feature = "mobile"), not(feature = "web")))]
+pub use connect::{spawn, SpawnHandle};
+#[cfg(all(
+    not(feature = "desktop"),
+    not(feature = "mobile"),
+    not(feature = "web")
+))]
+pub use stub::{spawn, SpawnHandle};
+#[cfg(feature = "web")]
+pub use web::{spawn, SpawnHandle};
+
+// =======================
+// Compile-time Assertions
+// =======================
+const _: () = {
+    fn assert_platform<T: PlatformInterface>() {}
+
+    // Check each implementation, and prevent warnings that the implementations are unused.
+    #[cfg(feature = "web")]
+    let _ = assert_platform::<web::WebPlatform>;
+    #[cfg(feature = "desktop")]
+    let _ = assert_platform::<desktop::DesktopPlatform>;
+    #[cfg(feature = "mobile")]
+    let _ = assert_platform::<mobile::MobilePlatform>;
+    let _ = assert_platform::<stub::StubPlatform>;
+};
+
+fn global_default_config() -> HashMap<String, serde_json::Value> {
+    serde_json::json!({})
+        .as_object()
+        .unwrap()
+        .clone()
+        .into_iter()
+        .collect()
+}
@@ -0,0 +1,219 @@
+use crate::effects::{AudioProcessor, AudioProcessorSender, TransmitState};
+use color_eyre::eyre::{eyre, Error};
+use cpal::traits::{DeviceTrait, HostTrait, StreamTrait as _};
+use std::mem::replace;
+use std::sync::Arc;
+use std::sync::Mutex;
+use tracing::{error, info, warn};
+
+pub struct NativeAudioSystem {
+    output: cpal::Device,
+    input: cpal::Device,
+    processors: AudioProcessorSender,
+    recording_stream: Option<cpal::Stream>,
+}
+
+const SAMPLE_RATE: u32 = 48_000;
+const PACKET_SAMPLES: u32 = 960;
+// Divide by 1000 to get samples per ms, then multiply by 60ms for max Opus frame size.
+const MAX_DECODE_SAMPLES: usize = SAMPLE_RATE as usize / 1000 * 60;
+
+fn encode_and_send(
+    state: TransmitState,
+    output_buffer: &mut Vec<f32>,
+    encoder: &mut opus::Encoder,
+    each: &mut impl FnMut(Vec<u8>, bool),
+) {
+    let (is_terminator, should_encode) = match state {
+        TransmitState::Silent => return,
+        TransmitState::Transmitting => (false, output_buffer.len() >= PACKET_SAMPLES as usize),
+        TransmitState::Terminator => {
+            output_buffer.resize(PACKET_SAMPLES as usize, 0.0);
+            (true, true)
+        }
+    };
+
+    if should_encode {
+        let remainder = output_buffer.split_off(PACKET_SAMPLES as usize);
+        let frame = replace(output_buffer, remainder);
+        match encoder.encode_vec_float(&frame, frame.len() * 2) {
+            Ok(encoded) => each(encoded, is_terminator),
+            Err(e) => error!("error encoding {} samples: {e:?}", frame.len()),
+        }
+    }
+}
+
+type Buffer = Arc<Mutex<dasp_ring_buffer::Bounded<Vec<i16>>>>;
+
+impl NativeAudioSystem {
+    fn choose_config(
+        &self,
+        configs: impl Iterator<Item = cpal::SupportedStreamConfigRange>,
+    ) -> Result<cpal::StreamConfig, Error> {
+        let mut supported_configs: Vec<_> = configs
+            .filter_map(|cfg| cfg.try_with_sample_rate(cpal::SampleRate(SAMPLE_RATE)))
+            .filter(|cfg| cfg.sample_format() == cpal::SampleFormat::I16)
+            .map(|cfg| cpal::StreamConfig {
+                buffer_size: cpal::BufferSize::Fixed(match *cfg.buffer_size() {
+                    cpal::SupportedBufferSize::Range { min, max } => 480.clamp(min, max),
+                    cpal::SupportedBufferSize::Unknown => 480,
+                }),
+                ..cfg.config()
+            })
+            .collect();
+        supported_configs.sort_by(|a, b| {
+            let cpal::BufferSize::Fixed(a_buf) = a.buffer_size else {
+                unreachable!()
+            };
+            let cpal::BufferSize::Fixed(b_buf) = b.buffer_size else {
+                unreachable!()
+            };
+            Ord::cmp(&a.channels, &b.channels).then(Ord::cmp(&a_buf, &b_buf))
+        });
+        supported_configs
+            .get(0)
+            .cloned()
+            .ok_or(eyre!("no supported stream configs"))
+    }
+}
+
+impl super::AudioSystemInterface for NativeAudioSystem {
+    type AudioPlayer = NativeAudioPlayer;
+
+    async fn new() -> Result<Self, Error> {
+        let host = cpal::default_host();
+        let name = host.id();
+        let processors = AudioProcessorSender::default();
+        Ok(NativeAudioSystem {
+            output: host
+                .default_output_device()
+                .ok_or(eyre!("no output devices from {name:?}"))?,
+            input: host
+                .default_input_device()
+                .ok_or(eyre!("no input devices from {name:?}"))?,
+            processors,
+            recording_stream: None,
+        })
+    }
+
+    fn set_processor(&self, processor: AudioProcessor) {
+        self.processors.store(Some(processor))
+    }
+
+    fn start_recording(
+        &mut self,
+        mut each: impl FnMut(Vec<u8>, bool) + Send + 'static,
+    ) -> Result<(), Error> {
+        let config = self.choose_config(self.input.supported_input_configs()?)?;
+        info!(
+            "creating recording on {:?} with {:#?}",
+            self.input.name()?,
+            config
+        );
+        let mut encoder =
+            opus::Encoder::new(SAMPLE_RATE, opus::Channels::Mono, opus::Application::Voip)?;
+        let mut current_processor = AudioProcessor::new(false);
+        let mut output_buffer = Vec::new();
+        let processors = self.processors.clone();
+        let error_callback = move |e: cpal::StreamError| error!("error recording: {e:?}");
+        let data_callback = move |frame: &[f32], _: &cpal::InputCallbackInfo| {
+            if let Some(new_processor) = processors.take() {
+                current_processor = new_processor;
+            }
+            let state =
+                current_processor.process(frame, config.channels as usize, &mut output_buffer);
+            encode_and_send(state, &mut output_buffer, &mut encoder, &mut each);
+        };
+
+        match self
+            .input
+            .build_input_stream(&config, data_callback, error_callback, None)
+        {
+            Ok(stream) => {
+                stream.play()?;
+                self.recording_stream = Some(stream);
+                Ok(())
+            }
+            Err(err) => {
+                self.recording_stream = None;
+                Err(err.into())
+            }
+        }
+    }
+
+    fn create_player(&mut self) -> Result<NativeAudioPlayer, Error> {
+        let config = self.choose_config(self.output.supported_output_configs()?)?;
+        info!(
+            "creating player on {:?} with {:#?}",
+            self.output.name().ok(),
+            &config
+        );
+        let buffer = Arc::new(Mutex::new(dasp_ring_buffer::Bounded::from_raw_parts(
+            0,
+            0,
+            vec![
+            0;
+            SAMPLE_RATE as usize/4 // 250ms of buffer
+        ],
+        )));
+        let decoder = opus::Decoder::new(SAMPLE_RATE, opus::Channels::Mono)?;
+        let stream = {
+            let buffer = buffer.clone();
+            self.output.build_output_stream(
+                &config,
+                move |frame, _info| {
+                    let mut buffer = buffer.lock().unwrap();
+                    for x in frame.chunks_mut(config.channels as usize) {
+                        match buffer.pop() {
+                            Some(y) => {
+                                x.fill(y);
+                            }
+                            None => {
+                                x.fill(0);
+                            }
+                        }
+                    }
+                },
+                move |err| error!("could not create output stream {err:?}"),
+                None,
+            )?
+        };
+        stream.play()?;
+        Ok(NativeAudioPlayer {
+            decoder,
+            stream,
+            buffer,
+            tmp: vec![0; MAX_DECODE_SAMPLES],
+        })
+    }
+}
+
+pub struct NativeAudioPlayer {
+    decoder: opus::Decoder,
+    stream: cpal::Stream,
+    buffer: Buffer,
+    tmp: Vec<i16>,
+}
+
+impl super::AudioPlayerInterface for NativeAudioPlayer {
+    fn play_opus(&mut self, payload: &[u8]) {
+        let len = match self.decoder.decode(payload, &mut self.tmp, false) {
+            Ok(l) => l,
+            Err(e) => {
+                error!("opus decode error {e:?}");
+                return;
+            }
+        };
+
+        let mut buffer = self.buffer.lock().unwrap();
+        let mut overrun = 0;
+        for x in &self.tmp[..len] {
+            if let Some(_) = buffer.push(*x) {
+                overrun += 1;
+            }
+        }
+        if overrun > 0 {
+            warn!("playback overrun by {overrun} samples");
+        }
+    }
+}
@@ -0,0 +1,117 @@
+use color_eyre::eyre::Error;
+use std::collections::HashMap;
+use tracing::info;
+
+#[derive(Clone, PartialEq)]
+pub struct NativeConfigSystem {
+    config_path: std::path::PathBuf,
+}
+
+impl super::ConfigSystemInterface for NativeConfigSystem {
+    fn new() -> color_eyre::Result<Self, Error> {
+        return Ok(NativeConfigSystem {
+            config_path: get_config_path()?,
+        });
+    }
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned,
+    {
+        let config = load_config_map(&self.config_path);
+
+        let Some(value_untyped) = config.get(key).cloned().or_else(|| config_get_default(key))
+        else {
+            return None;
+        };
+
+        match serde_json::from_value::<T>(value_untyped) {
+            Ok(v) => Some(v),
+            Err(_) => {
+                let default_value = config_get_default(key)
+                    .expect("Default value required after config parse failure");
+                Some(
+                    serde_json::from_value::<T>(default_value)
+                        .expect("Default value could not be parsed"),
+                )
+            }
+        }
+    }
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize,
+    {
+        let mut config = load_config_map(&self.config_path);
+        let json_value = serde_json::to_value(value).expect("failed to serialize config value");
+        config.insert(key.to_string(), json_value);
+        save_config_map(&config).expect("failed to set config")
+    }
+}
+
+#[cfg(any(feature = "desktop"))]
+fn get_config_path() -> color_eyre::Result<std::path::PathBuf> {
+    use etcetera::{choose_app_strategy, AppStrategy, AppStrategyArgs};
+
+    let strategy = choose_app_strategy(AppStrategyArgs {
+        top_level_domain: "xyz".to_string(),
+        author: "ohea".to_string(),
+        app_name: "Mumble Web2".to_string(),
+    })
+    .expect("failed to choose app strategy");
+    Ok(strategy.config_dir().join("config.json"))
+}
+
+#[cfg(target_os = "android")]
+fn get_config_path() -> color_eyre::Result<std::path::PathBuf> {
+    let ctx = ndk_context::android_context();
+    let vm = unsafe { jni::JavaVM::from_raw(ctx.vm().cast()) }?;
+    let mut env = vm.attach_current_thread()?;
+    let ctx = unsafe { jni::objects::JObject::from_raw(ctx.context().cast()) };
+    let cache_dir = env
+        .call_method(ctx, "getFilesDir", "()Ljava/io/File;", &[])?
+        .l()?;
+    let cache_dir: jni::objects::JString = env
+        .call_method(&cache_dir, "toString", "()Ljava/lang/String;", &[])?
+        .l()?
+        .try_into()?;
+    let cache_dir = env.get_string(&cache_dir)?;
+    let cache_dir = cache_dir.to_str()?;
+    Ok(std::path::PathBuf::from(cache_dir).join("config.json"))
+}
+
+fn load_config_map(config_path: &std::path::PathBuf) -> HashMap<String, serde_json::Value> {
+    match std::fs::read_to_string(config_path) {
+        Ok(contents) => serde_json::from_str(&contents).unwrap_or_default(),
+        Err(_) => HashMap::new(),
+    }
+}
+
+fn save_config_map(config: &HashMap<String, serde_json::Value>) -> color_eyre::Result<()> {
+    let config_path = get_config_path().expect("Could not get config file path.");
+    if let Some(parent) = config_path.parent() {
+        info!("Creating config directory: {}", parent.display());
+        std::fs::create_dir_all(parent)?;
+    }
+    let contents = serde_json::to_string_pretty(config)?;
+    info!("Writing config to {}", config_path.display());
+    std::fs::write(&config_path, contents)?;
+    Ok(())
+}
+
+fn config_get_default(key: &str) -> Option<serde_json::Value> {
+    let default_config = platform_default_config();
+    default_config
+        .get(key)
+        .cloned()
+        .or(super::global_default_config().get(key).cloned())
+}
+
+fn platform_default_config() -> HashMap<String, serde_json::Value> {
+    serde_json::json!({})
+        .as_object()
+        .unwrap()
+        .clone()
+        .into_iter()
+        .collect()
+}
@@ -0,0 +1,129 @@
+/// Stub implementation of the platform interface, so that we can
+/// `cargo check` without any --feature flags.
+use crate::{app::SharedState, effects::AudioProcessor};
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::future::Future;
+
+pub struct StubPlatform;
+
+impl super::PlatformInterface for StubPlatform {
+    type AudioSystem = StubAudioSystem;
+    type ConfigSystem = StubConfigSystem;
+
+    fn init_logging() {
+        panic!("stubbed platform")
+    }
+
+    fn request_permissions() {
+        panic!("stubbed platform")
+    }
+
+    fn network_connect(
+        _address: String,
+        _username: String,
+        _event_rx: &mut UnboundedReceiver<crate::app::Command>,
+        _overrides: &ProxyOverrides,
+        _state: SharedState,
+    ) -> impl Future<Output = Result<(), Error>> {
+        async { panic!("stubbed platform") }
+    }
+
+    fn get_status(
+        _client: &reqwest::Client,
+        _address: &str,
+    ) -> impl Future<Output = color_eyre::Result<ServerStatus>> {
+        async { panic!("stubbed platform") }
+    }
+
+    fn load_proxy_overrides() -> impl Future<Output = color_eyre::Result<ProxyOverrides>> {
+        async { panic!("stubbed platform") }
+    }
+
+    fn sleep(_duration: std::time::Duration) -> impl Future<Output = ()> {
+        async { panic!("stubbed platform") }
+    }
+}
+
+pub struct StubAudioSystem;
+
+impl super::AudioSystemInterface for StubAudioSystem {
+    type AudioPlayer = StubAudioPlayer;
+
+    async fn new() -> Result<Self, Error> {
+        panic!("stubbed platform")
+    }
+
+    fn set_processor(&self, _processor: AudioProcessor) {
+        panic!("stubbed platform")
+    }
+
+    fn start_recording(
+        &mut self,
+        _each: impl FnMut(Vec<u8>, bool) + Send + 'static,
+    ) -> Result<(), Error> {
+        panic!("stubbed platform")
+    }
+
+    fn create_player(&mut self) -> Result<Self::AudioPlayer, Error> {
+        panic!("stubbed platform")
+    }
+}
+
+pub struct StubAudioPlayer;
+
+impl super::AudioPlayerInterface for StubAudioPlayer {
+    fn play_opus(&mut self, _payload: &[u8]) {
+        panic!("stubbed platform")
+    }
+}
+
+#[derive(Clone)]
+pub struct StubConfigSystem;
+
+impl super::ConfigSystemInterface for StubConfigSystem {
+    fn new() -> Result<Self, Error> {
+        panic!("stubbed platform")
+    }
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned,
+    {
+        panic!("stubbed platform")
+    }
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize,
+    {
+        panic!("stubbed platform")
+    }
+}
+
+#[allow(unused)]
+pub struct SpawnHandle;
+
+impl SpawnHandle {
+    #[allow(unused)]
+    pub fn spawn<F>(&self, _future: F)
+    where
+        F: Future<Output = ()> + 'static,
+    {
+        panic!("stubbed platform")
+    }
+
+    #[allow(unused)]
+    pub fn current() -> Self {
+        SpawnHandle
+    }
+}
+
+#[allow(unused)]
+pub fn spawn<F>(_future: F)
+where
+    F: Future<Output = ()> + 'static,
+{
+    panic!("stubbed platform")
+}
@@ -0,0 +1,574 @@
+use crate::app::{Command, SharedState};
+use crate::effects::{AudioProcessor, AudioProcessorSender, TransmitState};
+use color_eyre::eyre::{bail, eyre, Error};
+use crossbeam::atomic::AtomicCell;
+use futures_channel::mpsc::UnboundedReceiver;
+use gloo_timers::future::TimeoutFuture;
+use js_sys::Float32Array;
+use manganis::asset;
+use mumble_protocol::control::ClientControlCodec;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use reqwest::Url;
+use std::collections::HashMap;
+use std::future::Future;
+use std::sync::Arc;
+use std::time::Duration;
+use tracing::level_filters::LevelFilter;
+use tracing::{debug, error, info, instrument};
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::JsFuture;
+use web_sys::js_sys::{Promise, Reflect, Uint8Array};
+use web_sys::AudioContextOptions;
+use web_sys::AudioData;
+use web_sys::AudioDecoder;
+use web_sys::AudioDecoderConfig;
+use web_sys::AudioDecoderInit;
+use web_sys::AudioEncoder;
+use web_sys::AudioEncoderConfig;
+use web_sys::AudioEncoderInit;
+use web_sys::AudioWorkletNode;
+use web_sys::EncodedAudioChunk;
+use web_sys::EncodedAudioChunkInit;
+use web_sys::EncodedAudioChunkType;
+use web_sys::MediaStreamConstraints;
+use web_sys::MessageEvent;
+use web_sys::WebTransport;
+use web_sys::WebTransportBidirectionalStream;
+use web_sys::WebTransportOptions;
+use web_sys::WorkletOptions;
+use web_sys::{console, window};
+use web_sys::{AudioContext, AudioDataCopyToOptions};
+
+#[allow(unused)]
+pub use wasm_bindgen_futures::spawn_local as spawn;
+
+#[allow(unused)]
+#[derive(Clone)]
+pub struct SpawnHandle;
+
+impl SpawnHandle {
+    pub fn spawn<F>(&self, future: F)
+    where
+        F: Future<Output = ()> + 'static,
+    {
+        wasm_bindgen_futures::spawn_local(future);
+    }
+
+    pub fn current() -> Self {
+        SpawnHandle
+    }
+}
+
+/// Web platform implementation using WebTransport and Web Audio API.
+pub struct WebPlatform;
+
+impl super::PlatformInterface for WebPlatform {
+    type AudioSystem = WebAudioSystem;
+    type ConfigSystem = WebConfigSystem;
+
+    fn init_logging() {
+        // copied from tracing_web example usage
+
+        use tracing_subscriber::fmt::format::Pretty;
+        use tracing_subscriber::prelude::*;
+        use tracing_web::{performance_layer, MakeWebConsoleWriter};
+
+        let fmt_layer = tracing_subscriber::fmt::layer()
+            .with_ansi(false) // Only partially supported across browsers
+            .without_time() // std::time is not available in browsers
+            .with_writer(MakeWebConsoleWriter::new()) // write events to the console
+            .with_filter(LevelFilter::DEBUG);
+        let perf_layer = performance_layer().with_details_from_fields(Pretty::default());
+
+        tracing_subscriber::registry()
+            .with(fmt_layer)
+            .with(perf_layer)
+            .init();
+
+        info!("logging initiated");
+    }
+
+    fn request_permissions() {
+        // No-op on web
+    }
+
+    async fn load_proxy_overrides() -> color_eyre::Result<ProxyOverrides> {
+        let overrides = match option_env!("MUMBLE_WEB2_PROXY_OVERRIDES_URL") {
+            Some(url) => Url::parse(url)?,
+            None => absolute_url("overrides")?,
+        };
+        info!("loading config from {}", overrides);
+
+        let config = reqwest::get(overrides)
+            .await?
+            .json::<ProxyOverrides>()
+            .await?;
+
+        Ok(config)
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> Result<(), Error> {
+        network_connect(address, username, event_rx, overrides, state).await
+    }
+
+    async fn get_status(
+        client: &reqwest::Client,
+        _address: &str,
+    ) -> color_eyre::Result<ServerStatus> {
+        Ok(client
+            .get(absolute_url("status")?)
+            .send()
+            .await?
+            .json::<ServerStatus>()
+            .await?)
+    }
+
+    async fn sleep(duration: Duration) {
+        TimeoutFuture::new(duration.as_millis() as u32).await;
+    }
+}
+
+trait ResultExt<T> {
+    fn ey(self) -> Result<T, Error>;
+}
+
+impl<T> ResultExt<T> for Result<T, JsValue> {
+    fn ey(self) -> Result<T, Error> {
+        match self {
+            Ok(x) => Ok(x),
+            Err(e) => match e.dyn_into::<js_sys::Error>() {
+                Ok(e) => Err(eyre!("{}: {}", e.name(), e.message())),
+                Err(e) => Err(eyre!("{:?}", e)),
+            },
+        }
+    }
+}
+
+impl<T> ResultExt<T> for Result<T, JsError> {
+    fn ey(self) -> Result<T, Error> {
+        self.map_err(|e| JsValue::from(e)).ey()
+    }
+}
+
+pub struct WebAudioSystem {
+    webctx: AudioContext,
+    processors: AudioProcessorSender,
+}
+
+async fn attach_worklet(audio_context: &AudioContext, worklet_url: &str) -> Result<(), Error> {
+    // Create worklets to process mic and speaker audio
+    // Speaker audio processing worklet only required on
+    // browsers that don't support MediaStreamTrackGenerator
+
+    let options = WorkletOptions::new();
+    Reflect::set(
+        &options,
+        &"processorOptions".into(),
+        &wasm_bindgen::module(),
+    )
+    .ey()?;
+
+    info!("loading mic worklet from {worklet_url:?}");
+    audio_context
+        .audio_worklet()
+        .ey()?
+        .add_module_with_options(worklet_url, &options)
+        .ey()?
+        .into_future()
+        .await
+        .ey()?;
+    Ok(())
+}
+
+impl super::AudioSystemInterface for WebAudioSystem {
+    type AudioPlayer = WebAudioPlayer;
+
+    async fn new() -> Result<Self, Error> {
+        // Create MediaStreams to playback decoded audio
+        // The audio context is used to reproduce audio.
+        let webctx = configure_audio_context();
+        attach_worklet(
+            &webctx,
+            &asset!("/assets/rust_audio_worklet.js").to_string(),
+        )
+        .await?;
+
+        let processors = AudioProcessorSender::default();
+
+        Ok(WebAudioSystem { webctx, processors })
+    }
+
+    fn set_processor(&self, processor: AudioProcessor) {
+        self.processors.store(Some(processor))
+    }
+
+    fn start_recording(&mut self, each: impl FnMut(Vec<u8>, bool) + 'static) -> Result<(), Error> {
+        let audio_context_worklet = self.webctx.clone();
+        let processors = self.processors.clone();
+        spawn(async move {
+            match run_encoder_worklet(&audio_context_worklet, each, processors).await {
+                Ok(node) => info!("created encoder worklet: {:?}", &node),
+                Err(err) => error!("could not create encoder worklet: {err}"),
+            }
+        });
+        Ok(())
+    }
+
+    fn create_player(&mut self) -> Result<WebAudioPlayer, Error> {
+        let sink_node = AudioWorkletNode::new(&self.webctx, "rust_speaker_worklet").ey()?;
+
+        // Connect worklet to destination
+        sink_node
+            .connect_with_audio_node(&self.webctx.destination())
+            .ey()?;
+
+        // Create callback functions for AudioDecoder
+        let decoder_error = Closure::wrap(Box::new(move |e: JsValue| {
+            error!("error decoding audio {:?}", e);
+        }) as Box<dyn FnMut(JsValue)>);
+
+        let sink_port = sink_node.port().ey()?;
+
+        let output = Closure::wrap(Box::new(move |audio_data: AudioData| {
+            // Extract planar PCM from AudioData into an ArrayBuffer or Float32Array
+            // Here we assume f32 samples, 1 channel for brevity.
+            let number_of_frames = audio_data.number_of_frames();
+
+            let js_buffer = Float32Array::new_with_length(number_of_frames);
+
+            let audio_data_copy_to_options = &AudioDataCopyToOptions::new(0);
+            audio_data_copy_to_options.set_format(web_sys::AudioSampleFormat::F32);
+
+            if let Err(e) = audio_data
+                .copy_to_with_buffer_source(&js_buffer.buffer(), &audio_data_copy_to_options)
+            {
+                error!("could not copy audio data to array {:?}", e);
+            }
+
+            // Post to the worklet; include sampleRate and channel count if needed.
+            let msg = js_sys::Object::new();
+            js_sys::Reflect::set(&msg, &"samples".into(), &js_buffer).unwrap();
+
+            sink_port.post_message(&msg).unwrap();
+
+            audio_data.close();
+        }) as Box<dyn FnMut(AudioData)>);
+
+        let audio_decoder = AudioDecoder::new(&AudioDecoderInit::new(
+            decoder_error.as_ref().unchecked_ref(),
+            output.as_ref().unchecked_ref(),
+        ))
+        .ey()?;
+
+        audio_decoder.configure(&AudioDecoderConfig::new("opus", 1, 48000));
+        info!("created audio decoder");
+
+        // This is required to prevent these from being deallocated
+        decoder_error.forget();
+        output.forget();
+
+        Ok(WebAudioPlayer(audio_decoder))
+    }
+}
+
+pub struct WebAudioPlayer(AudioDecoder);
+
+impl super::AudioPlayerInterface for WebAudioPlayer {
+    fn play_opus(&mut self, payload: &[u8]) {
+        let js_audio_payload = Uint8Array::from(payload);
+        let _ = self.0.decode(
+            &EncodedAudioChunk::new(&EncodedAudioChunkInit::new(
+                &js_audio_payload.into(),
+                0.0,
+                EncodedAudioChunkType::Key,
+            ))
+            .unwrap(),
+        );
+    }
+}
+
+// Borrowed from
+// https://github.com/security-union/videocall-rs/blob/main/videocall-client/src/decode/config.rs#L6
+fn configure_audio_context() -> AudioContext {
+    let audio_context_options = AudioContextOptions::new();
+    audio_context_options.set_sample_rate(48000 as f32);
+    let audio_context = AudioContext::new_with_context_options(&audio_context_options).unwrap();
+    audio_context
+}
+
+trait PromiseExt {
+    fn into_future(self) -> JsFuture;
+}
+
+impl PromiseExt for Promise {
+    fn into_future(self) -> JsFuture {
+        self.into()
+    }
+}
+
+fn process_audio(frame: &JsValue, processor: &mut AudioProcessor) -> TransmitState {
+    let Ok(samples) = Reflect::get(&frame, &"data".into()) else {
+        return TransmitState::Silent;
+    };
+    let Ok(samples) = samples.dyn_into::<Float32Array>() else {
+        return TransmitState::Silent;
+    };
+    let input = samples.to_vec();
+    let mut output = Vec::with_capacity(input.len());
+    let state = processor.process(&input, 1, &mut output);
+    if !output.is_empty() {
+        samples.copy_from(&output);
+    }
+
+    state
+}
+
+async fn run_encoder_worklet(
+    audio_context: &AudioContext,
+    mut each: impl FnMut(Vec<u8>, bool) + 'static,
+    processors: AudioProcessorSender,
+) -> Result<AudioWorkletNode, Error> {
+    let constraints = MediaStreamConstraints::new();
+    constraints.set_audio(&JsValue::TRUE);
+    let stream = window()
+        .unwrap()
+        .navigator()
+        .media_devices()
+        .ey()?
+        .get_user_media_with_constraints(&constraints)
+        .ey()?
+        .into_future()
+        .await
+        .ey()?
+        .dyn_into()
+        .map_err(|e| JsError::new(&format!("not a stream: {e:?}")))
+        .ey()?;
+
+    let source = audio_context.create_media_stream_source(&stream).ey()?;
+    let worklet_node = AudioWorkletNode::new(audio_context, "rust_mic_worklet").ey()?;
+
+    let encoder_error: Closure<dyn FnMut(JsValue)> =
+        Closure::new(|e| error!("error encoding audio {:?}", e));
+
+    // Shared state to signal terminator between onmessage and output closures
+    // The output closure runs asynchronously after encoding completes
+    let pending_terminator = Arc::new(AtomicCell::new(false));
+    let pending_terminator_output = pending_terminator.clone();
+
+    // This knows what MediaStreamTrackGenerator to use as it closes around it
+    let output: Closure<dyn FnMut(EncodedAudioChunk)> =
+        Closure::new(move |audio_data: EncodedAudioChunk| {
+            let mut array = vec![0u8; audio_data.byte_length() as usize];
+            audio_data.copy_to_with_u8_slice(&mut array);
+            // Check if this frame was marked as a terminator
+            let is_terminator = pending_terminator_output.swap(false);
+            each(array, is_terminator);
+        });
+
+    let audio_encoder = AudioEncoder::new(&AudioEncoderInit::new(
+        encoder_error.as_ref().unchecked_ref(),
+        output.as_ref().unchecked_ref(),
+    ))
+    .unwrap();
+
+    // This is required to prevent these from being deallocated
+    encoder_error.forget();
+    output.forget();
+    let encoder_config = AudioEncoderConfig::new("opus");
+    encoder_config.set_number_of_channels(1);
+    encoder_config.set_sample_rate(48000);
+    encoder_config.set_bitrate(72_000.0);
+
+    audio_encoder.configure(&encoder_config);
+    info!("created audio encoder");
+
+    let mut current_processor = AudioProcessor::new(false);
+    let onmessage: Closure<dyn FnMut(MessageEvent)> = Closure::new(move |event: MessageEvent| {
+        if let Some(new_processor) = processors.take() {
+            current_processor = new_processor;
+        }
+
+        let frame = event.data();
+        let state = process_audio(&frame, &mut current_processor);
+
+        match state {
+            TransmitState::Silent => {
+                // Don't encode or send anything
+                return;
+            }
+            TransmitState::Transmitting => (), // Normal transmission
+            TransmitState::Terminator => {
+                // Mark this as a terminator before encoding
+                pending_terminator.store(true);
+            }
+        }
+        match AudioData::new(frame.unchecked_ref()) {
+            Ok(data) => {
+                let _ = audio_encoder.encode(&data);
+            }
+            Err(err) => {
+                error!(
+                    "error creating AudioData object {:?} during event {:?}",
+                    err, event,
+                );
+            }
+        }
+    });
+    Reflect::set(
+        &Reflect::get(&worklet_node, &"port".into()).ey()?,
+        &"onmessage".into(),
+        onmessage.as_ref(),
+    )
+    .ey()?;
+    onmessage.forget();
+
+    source.connect_with_audio_node(&worklet_node).ey()?;
+    worklet_node
+        .connect_with_audio_node(&audio_context.destination())
+        .ey()?;
+
+    Ok(worklet_node)
+}
+
+#[instrument]
+pub async fn network_connect(
+    address: String,
+    username: String,
+    event_rx: &mut UnboundedReceiver<Command>,
+    overrides: &ProxyOverrides,
+    state: SharedState,
+) -> Result<(), Error> {
+    info!("connecting");
+
+    let object = web_sys::js_sys::Object::new();
+
+    Reflect::set(
+        &object,
+        &JsValue::from_str("algorithm"),
+        &JsValue::from_str("sha-256"),
+    )
+    .ey()?;
+
+    if let Some(server_hash) = &overrides.cert_hash {
+        let hash = web_sys::js_sys::Uint8Array::from(server_hash.as_slice());
+        web_sys::js_sys::Reflect::set(&object, &"value".into(), &hash).ey()?;
+    }
+
+    let array = web_sys::js_sys::Array::new();
+    array.push(&object);
+
+    debug!("created option object: {:?}", &object);
+
+    let mut options = WebTransportOptions::new();
+    options.set_server_certificate_hashes(&array);
+
+    debug!("created WebTransportOptions");
+    console::log_1(&options.clone().into());
+
+    let transport = WebTransport::new_with_options(&address, &options).ey()?;
+    debug!("created WebTransport connection object");
+    console::log_1(&transport.clone().into());
+
+    if let Err(e) = wasm_bindgen_futures::JsFuture::from(transport.ready())
+        .await
+        .ey()
+    {
+        bail!("could not connect to transport: {e}");
+    }
+
+    info!("transport is ready");
+
+    let stream: WebTransportBidirectionalStream =
+        wasm_bindgen_futures::JsFuture::from(transport.create_bidirectional_stream())
+            .await
+            .ey()?
+            .into();
+
+    let wasm_stream_readable = wasm_streams::ReadableStream::from_raw(stream.readable().into());
+    let wasm_stream_writable = wasm_streams::WritableStream::from_raw(stream.writable().into());
+
+    let read_codec = ClientControlCodec::new();
+    let write_codec = ClientControlCodec::new();
+
+    let reader =
+        asynchronous_codec::FramedRead::new(wasm_stream_readable.into_async_read(), read_codec);
+    let writer =
+        asynchronous_codec::FramedWrite::new(wasm_stream_writable.into_async_write(), write_codec);
+
+    let (outgoing_send, outgoing_recv) = futures_channel::mpsc::unbounded();
+    spawn(crate::sender_loop(outgoing_recv, writer));
+    crate::network_loop(username, state, event_rx, outgoing_send, reader).await
+}
+
+pub fn absolute_url(path: &str) -> Result<Url, Error> {
+    let window: web_sys::Window = web_sys::window().expect("no global `window` exists");
+    let location = window.location();
+    Ok(Url::parse(&location.href().ey()?)?.join(path)?)
+}
+
+#[derive(Clone, PartialEq)]
+pub struct WebConfigSystem {}
+
+impl super::ConfigSystemInterface for WebConfigSystem {
+    fn new() -> Result<Self, Error> {
+        return Ok(WebConfigSystem {});
+    }
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned,
+    {
+        // Get Storage
+        let storage = web_sys::window()?.local_storage().ok()??;
+
+        // Try localStorage first
+        if let Ok(Some(raw)) = storage.get_item(key) {
+            if let Ok(parsed) = serde_json::from_str::<T>(&raw) {
+                return Some(parsed);
+            }
+        }
+
+        // Fallback to default if deserialization fails or key missing
+        let default_value = config_get_default(key)?;
+        serde_json::from_value::<T>(default_value).ok()
+    }
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize,
+    {
+        let storage = window()
+            .and_then(|w| w.local_storage().ok().flatten())
+            .expect("localStorage not available");
+
+        let json_value =
+            serde_json::to_string(value).expect("failed to serialize config value to JSON string");
+
+        storage
+            .set_item(key, &json_value)
+            .expect("failed to write to localStorage");
+    }
+}
+
+fn config_get_default(key: &str) -> Option<serde_json::Value> {
+    let default_config = platform_default_config();
+    default_config
+        .get(key)
+        .cloned()
+        .or(super::global_default_config().get(key).cloned())
+}
+
+fn platform_default_config() -> HashMap<String, serde_json::Value> {
+    serde_json::json!({})
+        .as_object()
+        .unwrap()
+        .clone()
+        .into_iter()
+        .collect()
+}
@@ -0,0 +1,13 @@
+mod app;
+mod effects;
+mod imp;
+mod mainloop;
+mod msghtml;
+
+pub use app::*;
+pub use imp::*;
+pub use mainloop::*;
+pub use mime_guess;
+pub use reqwest;
+
+pub const VERSION: Option<&str> = option_env!("MUMBLE_WEB2_VERSION");
@@ -1,72 +1,89 @@
-use app::Chat;
-use app::Command;
-use app::ConnectionState;
-use app::STATE;
+use crate::msghtml::process_message_html;
+use crate::AudioSettings;
+use crate::Chat;
+use crate::Command;
+use crate::ConnectionState;
 use asynchronous_codec::FramedRead;
 use asynchronous_codec::FramedWrite;
 use color_eyre::eyre::{bail, Error};
-use dioxus::prelude::*;
+use dioxus_signals::ReadableExt as _;
+use dioxus_signals::WritableExt as _;
 use futures::select;
+use futures::AsyncRead;
+use futures::AsyncWrite;
 use futures::FutureExt as _;
 use futures::SinkExt as _;
 use futures::StreamExt as _;
-use futures_channel::mpsc::UnboundedSender;
-pub use imp::spawn;
+use futures_channel::mpsc::{UnboundedReceiver, UnboundedSender};
 use mumble_protocol::control::msgs;
 use mumble_protocol::control::ControlCodec;
 use mumble_protocol::control::ControlPacket;
+use mumble_protocol::voice::VoicePacket;
 use mumble_protocol::voice::VoicePacketPayload;
 use mumble_protocol::Clientbound;
 use mumble_protocol::Serverbound;
-use mumble_web2_common::GuiConfig;
-use once_cell::sync::Lazy;
 use std::collections::hash_map::Entry;
 use std::collections::HashMap;
 use std::time::Duration;
-use tracing::debug;
 use tracing::error;
 use tracing::info;

-pub mod app;
-pub mod imp;
+use crate::app::SharedState;
+use crate::app::State;
+use crate::effects::AudioProcessor;
+use crate::imp::{
+    spawn, AudioPlayer, AudioPlayerInterface as _, AudioSystem, AudioSystemInterface as _,
+    Platform, PlatformInterface as _,
+};

-pub static CONFIG: Lazy<GuiConfig> = Lazy::new(|| imp::load_config().unwrap_or_default());
-
-pub async fn network_entrypoint(mut event_rx: UnboundedReceiver<Command>) {
+pub async fn network_entrypoint(mut event_rx: UnboundedReceiver<Command>, state: SharedState) {
    loop {
-        let Some(Command::Connect { address, username }) = event_rx.next().await else {
+        let Some(Command::Connect {
+            address,
+            username,
+            config,
+        }) = event_rx.next().await
+        else {
            panic!("did not receive connect command")
        };

-        *STATE.server.write() = Default::default();
-        *STATE.status.write() = ConnectionState::Connecting;
-        if let Err(error) = imp::network_connect(address, username, &mut event_rx).await {
+        *state.server.write_unchecked() = Default::default();
+        *state.status.write_unchecked() = ConnectionState::Connecting;
+        if let Err(error) =
+            Platform::network_connect(address, username, &mut event_rx, &config, state.clone())
+                .await
+        {
            error!("could not connect {:?}", error);
-            *STATE.status.write() = ConnectionState::Failed(error.to_string());
+            *state.status.write_unchecked() = ConnectionState::Failed(error.to_string());
        } else {
-            *STATE.status.write() = ConnectionState::Disconnected;
+            *state.status.write_unchecked() = ConnectionState::Disconnected;
        }
    }
 }

-pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
-    username: String,
-    event_rx: &mut UnboundedReceiver<Command>,
-    mut reader: FramedRead<R, ControlCodec<Serverbound, Clientbound>>,
+pub(crate) async fn sender_loop<W: AsyncWrite + Unpin + 'static>(
+    mut outgoing: UnboundedReceiver<ControlPacket<Serverbound>>,
    mut writer: FramedWrite<W, ControlCodec<Serverbound, Clientbound>>,
-) -> Result<(), Error> {
-    let (mut send_chan, mut writer_recv_chan) = futures_channel::mpsc::unbounded();
-    spawn(async move {
-        while let Some(msg) = writer_recv_chan.next().await {
-            if !matches!(msg, ControlPacket::Ping(_) | ControlPacket::UDPTunnel(_)) {
-                info!("sending packet {:#?}", msg);
-            }
-            if let Err(e) = writer.send(msg).await {
-                error!("error sending packet {:?}", e);
-                break;
-            }
+) {
+    while let Some(msg) = outgoing.next().await {
+        if !matches!(msg, ControlPacket::Ping(_) | ControlPacket::UDPTunnel(_)) {
+            info!("sending packet {:#?}", msg);
        }
-    });
+        if let Err(e) = writer.send(msg).await {
+            error!("error sending packet {:?}", e);
+            break;
+        }
+    }
+}
+
+pub(crate) async fn network_loop<R: AsyncRead + Unpin + 'static>(
+    username: String,
+    state: SharedState,
+    event_rx: &mut UnboundedReceiver<Command>,
+    mut outgoing: UnboundedSender<ControlPacket<Serverbound>>,
+    mut reader: FramedRead<R, ControlCodec<Serverbound, Clientbound>>,
+) -> Result<(), Error> {
+    let audio_settings = state.audio.read().clone();

    // Get version packet
    let version = match reader.next().await {
@@ -81,29 +98,48 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
    msg.set_version(0x000010204);
    msg.set_release(format!("{} {}", "mumbleweb2", "6.9.0"));
    //msg.set_os("Chrome".to_string());
-    send_chan.send(msg.into()).await.unwrap();
+    outgoing.send(msg.into()).await.unwrap();

    // Send authenticate packet
    let mut msg = msgs::Authenticate::new();
    msg.set_username(username);
    msg.set_opus(true);
-    send_chan.send(msg.into()).await.unwrap();
+    outgoing.send(msg.into()).await.unwrap();

    // Spawn worker to send pings
    {
-        let mut send_chan = send_chan.clone();
+        let mut send_chan = outgoing.clone();
        spawn(async move {
            loop {
                if let Err(_) = send_chan.send(msgs::Ping::new().into()).await {
                    break;
                }

-                imp::sleep(Duration::from_millis(3000)).await;
+                Platform::sleep(Duration::from_millis(3000)).await;
            }
        });
    }

-    let mut audio = imp::AudioSystem::new(send_chan.clone())?;
+    let mut audio = AudioSystem::new().await?;
+    audio.set_processor(AudioProcessor::new(audio_settings.denoise));
+    {
+        let send_chan = outgoing.clone();
+        let mut sequence_num = 0;
+        if let Err(err) = audio.start_recording(move |opus_frame, is_terminator| {
+            let _ =
+                send_chan.unbounded_send(ControlPacket::UDPTunnel(Box::new(VoicePacket::Audio {
+                    _dst: std::marker::PhantomData,
+                    target: 0,
+                    session_id: (),
+                    seq_num: sequence_num,
+                    payload: VoicePacketPayload::Opus(opus_frame.into(), is_terminator),
+                    position_info: None,
+                })));
+            sequence_num = sequence_num.wrapping_add(2);
+        }) {
+            error!("could not begin recording: {err:?}")
+        }
+    }

    // Create map of session_id -> AudioDecoder
    let mut decoder_map = HashMap::new();
@@ -120,7 +156,7 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
                        if !matches!(msg, ControlPacket::UDPTunnel(_) | ControlPacket::Ping(_)) {
                            info!("receiving packet {:#?}", msg);
                        }
-                        let res = accept_packet(msg, &mut audio, &mut decoder_map);
+                        let res = accept_packet(msg, &mut audio, &mut decoder_map, &state);
                        if let Err(err) = res {
                            error!("error accepting packet {:?}", err)
                        }
@@ -139,7 +175,7 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
                match command {
                    Some(Command::Disconnect) => break,
                    Some(command) => {
-                        let res = accept_command(command, &mut send_chan);
+                        let res = accept_command(command, &mut outgoing, &mut audio, &state);
                        if let Err(err) = res {
                            info!("error accepting command {:?}", err)
                        }
@@ -149,7 +185,7 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
            }
        }
    }
-    let _ = send_chan.close();
+    let _ = outgoing.close();

    Ok(())
 }
@@ -157,9 +193,11 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
 fn accept_command(
    command: Command,
    send_chan: &mut UnboundedSender<ControlPacket<mumble_protocol::Serverbound>>,
+    audio: &mut AudioSystem,
+    state: &State,
 ) -> Result<(), Error> {
    use Command::*;
-    let Some(session) = STATE.server.read().session else {
+    let Some(session) = state.server.read().session else {
        bail!("no session id")
    };

@@ -182,7 +220,7 @@ fn accept_command(
            };

            {
-                let mut server = STATE.server.write();
+                let mut server = state.server.write_unchecked();
                let Some(me) = server.session else {
                    bail!("not signed in with a session id")
                };
@@ -198,6 +236,47 @@ fn accept_command(
            u.set_channel_id(channels);
            let _ = send_chan.unbounded_send(u.into());
        }
+        SendFile {
+            ref bytes,
+            name,
+            mime,
+            channels,
+        } => {
+            use base64::{display::Base64Display, prelude::BASE64_STANDARD};
+            let html = match mime {
+                Some(mime) if mime.type_() == "image" => format!(
+                    "<img src=\"data:{};base64,{}\" />",
+                    mime,
+                    Base64Display::new(bytes, &BASE64_STANDARD)
+                ),
+                Some(mime) => format!(
+                    "<a href=\"data:{};base64,{}\" download>{name}</a>",
+                    mime,
+                    Base64Display::new(bytes, &BASE64_STANDARD)
+                ),
+                None => format!(
+                    "<a href=\"data:application/octet-stream;base64,{}\" download>{name}</a>",
+                    Base64Display::new(bytes, &BASE64_STANDARD)
+                ),
+            };
+
+            {
+                let mut server = state.server.write_unchecked();
+                let Some(me) = server.session else {
+                    bail!("not signed in with a session id")
+                };
+                server.chat.push(Chat {
+                    raw: "".to_string(),
+                    dangerous_html: html.clone(),
+                    sender: Some(me),
+                })
+            }
+
+            let mut u = msgs::TextMessage::new();
+            u.set_message(html);
+            u.set_channel_id(channels);
+            let _ = send_chan.unbounded_send(u.into());
+        }
        SetMute { mute } => {
            let mut u = msgs::UserState::new();
            u.set_session(session);
@@ -217,6 +296,9 @@ fn accept_command(
            let _ = send_chan.unbounded_send(u.into());
        }
        Connect { .. } | Disconnect => (),
+        UpdateAudioSettings(AudioSettings { denoise }) => {
+            audio.set_processor(AudioProcessor::new(denoise));
+        }
    }

    Ok(())
@@ -224,8 +306,9 @@ fn accept_command(

 fn accept_packet(
    msg: ControlPacket<mumble_protocol::Clientbound>,
-    audio_context: &mut imp::AudioSystem,
-    player_map: &mut HashMap<u32, imp::AudioPlayer>,
+    audio_context: &mut AudioSystem,
+    player_map: &mut HashMap<u32, AudioPlayer>,
+    state: &State,
 ) -> Result<(), Error> {
    match msg {
        ControlPacket::UDPTunnel(u) => {
@@ -262,45 +345,15 @@ fn accept_packet(
            }
        }
        ControlPacket::ChannelState(u) => {
-            let mut server = STATE.server.write();
-            let id = u.get_channel_id();
-
-            let state = server.channels.entry(id).or_default();
-            let new_parent = if u.has_parent() {
-                if let Some(parent) = state.parent.and_then(|p| server.channels.get_mut(&p)) {
-                    parent.children.remove(&id);
-                }
-
-                let parent_id = u.get_parent();
-                let parent = server.channels.entry(parent_id).or_default();
-                if u.has_position() && u.get_position() as usize <= parent.children.len() {
-                    // TODO: what if positions are received out of order? we need to sort afterwards?
-                    parent.children.insert_before(u.get_position() as usize, id);
-                } else {
-                    parent.children.insert(id);
-                }
-                Some(parent_id)
-            } else {
-                None
-            };
-
-            let state = server.channels.entry(id).or_default();
-            state.parent = new_parent;
-            if u.has_name() {
-                state.name = u.get_name().to_string();
-            }
+            let mut server = state.server.write_unchecked();
+            server.channels_state.update_from_channel_state(&u);
        }
        ControlPacket::ChannelRemove(u) => {
-            let mut server = STATE.server.write();
-            let id = u.get_channel_id();
-            if let Some(channel) = server.channels.remove(&id) {
-                if let Some(parent) = channel.parent.and_then(|p| server.channels.get_mut(&p)) {
-                    parent.children.remove(&id);
-                }
-            }
+            let mut server = state.server.write_unchecked();
+            server.channels_state.update_from_channel_remove(&u);
        }
        ControlPacket::UserState(u) => {
-            let mut server = STATE.server.write();
+            let mut server = state.server.write_unchecked();
            let server = &mut *server;
            let id = u.get_session();

@@ -309,12 +362,13 @@ fn accept_packet(
            let state = state_entry.or_default();
            // the server might now send a channel_id if the user is in channel=0
            if u.has_channel_id() || new {
-                if let Some(parent) = server.channels.get_mut(&state.channel) {
+                if let Some(parent) = server.channels_state.channels.get_mut(&state.channel) {
                    parent.users.remove(&id);
                }

                let channel_id = u.get_channel_id();
                server
+                    .channels_state
                    .channels
                    .entry(channel_id)
                    .or_default()
@@ -332,6 +386,9 @@ fn accept_packet(
            if u.has_deaf() {
                state.deaf = u.get_deaf();
            }
+            if u.has_suppress() {
+                state.suppress = u.get_suppress();
+            }
            if u.has_self_mute() {
                state.self_mute = u.get_self_mute();
            }
@@ -340,16 +397,16 @@ fn accept_packet(
            }
        }
        ControlPacket::UserRemove(u) => {
-            let mut server = STATE.server.write();
+            let mut server = state.server.write_unchecked();
            let id = u.get_session();
            if let Some(state) = server.users.remove(&id) {
-                if let Some(parent) = server.channels.get_mut(&state.channel) {
+                if let Some(parent) = server.channels_state.channels.get_mut(&state.channel) {
                    parent.users.remove(&id);
                }
            }
        }
        ControlPacket::TextMessage(u) => {
-            let mut server = STATE.server.write();
+            let mut server = state.server.write_unchecked();
            if u.has_message() {
                let text = u.get_message().to_string();
                server.chat.push(Chat {
@@ -358,19 +415,19 @@ fn accept_packet(
                    } else {
                        None
                    },
-                    dangerous_html: html_purifier::purifier(&text, Default::default()),
+                    dangerous_html: process_message_html(&text),
                    raw: text,
                });
            }
        }
        ControlPacket::ServerSync(u) => {
-            *STATE.status.write() = ConnectionState::Connected;
-            let mut server = STATE.server.write();
+            *state.status.write_unchecked() = ConnectionState::Connected;
+            let mut server = state.server.write_unchecked();
            if u.has_welcome_text() {
                let text = u.get_welcome_text().to_string();
                server.chat.push(Chat {
                    sender: None,
-                    dangerous_html: html_purifier::purifier(&text, Default::default()),
+                    dangerous_html: process_message_html(&text),
                    raw: text,
                });
            }
@@ -0,0 +1,110 @@
+// This is a fork of https://github.com/mehmetcansahin/html-purifier
+
+use lol_html::html_content::{Comment, Element};
+use lol_html::{comments, element, rewrite_str, RewriteStrSettings};
+
+pub struct AllowedElement {
+    pub name: &'static str,
+    pub attributes: &'static [&'static str],
+}
+
+const ALLOWED: &'static [AllowedElement] = &[
+    AllowedElement {
+        name: "div",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "b",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "strong",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "i",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "em",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "u",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "a",
+        attributes: &["href", "title"],
+    },
+    AllowedElement {
+        name: "ul",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "ol",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "li",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "p",
+        attributes: &["style"],
+    },
+    AllowedElement {
+        name: "br",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "span",
+        attributes: &["style"],
+    },
+    AllowedElement {
+        name: "img",
+        attributes: &["width", "height", "alt", "src"],
+    },
+];
+
+pub fn process_message_html(input: &str) -> String {
+    let element_handler = |el: &mut Element| {
+        let find = ALLOWED.iter().find(|e| e.name.eq(&el.tag_name()));
+        match find {
+            Some(find) => {
+                let remove_attributes = el
+                    .attributes()
+                    .iter()
+                    .filter(|e| find.attributes.iter().any(|a| a.eq(&e.name())) == false)
+                    .map(|m| m.name())
+                    .collect::<Vec<String>>();
+                for attr in remove_attributes {
+                    el.remove_attribute(&attr);
+                }
+            }
+            None => {
+                el.remove_and_keep_content();
+            }
+        }
+        if el.tag_name() == "a" {
+            el.set_attribute("target", "_blank");
+        }
+        Ok(())
+    };
+    let comment_handler = |c: &mut Comment| {
+        c.remove();
+        Ok(())
+    };
+    let output = rewrite_str(
+        input,
+        RewriteStrSettings {
+            element_content_handlers: vec![
+                element!("*", element_handler),
+                comments!("*", comment_handler),
+            ],
+            ..RewriteStrSettings::default()
+        },
+    )
+    .unwrap();
+    return output;
+}
@@ -3,5 +3,10 @@ name = "mumble-web2-common"
 version = "0.1.0"
 edition = "2021"

+[features]
+networking = ["dep:tokio", "dep:color-eyre"]
+
 [dependencies]
 serde = { workspace = true }
+tokio = { version = "1", features = ["net", "time"], optional = true }
+color-eyre = { version = "0.6", optional = true }
@@ -1,9 +1,77 @@
 use serde::{Deserialize, Serialize};

-#[derive(Clone, Deserialize, Serialize, Default)]
-pub struct GuiConfig {
-    #[serde(default)]
-    pub force_proxy: bool,
+#[derive(Debug, Clone, Deserialize, Serialize, Default)]
+pub struct ProxyOverrides {
    pub proxy_url: Option<String>,
    pub cert_hash: Option<Vec<u8>>,
+    pub any_server: bool,
+}
+
+#[derive(Debug, Clone, Deserialize, Serialize, Default)]
+pub struct ServerStatus {
+    #[serde(default)]
+    pub success: bool,
+    pub version: Option<(u32, u32, u32)>,
+    pub users: Option<u32>,
+    pub max_users: Option<u32>,
+    pub bandwidth: Option<u32>,
+}
+
+/// Mumble UDP ping protocol.
+///
+/// Send a 12-byte packet: 4 zero bytes + 8-byte identifier.
+/// Receive a 24-byte response: 4 bytes version + 8 bytes identifier echo
+/// + 4 bytes current_users + 4 bytes max_users + 4 bytes bandwidth.
+#[cfg(feature = "networking")]
+pub async fn ping_server(address: &str, port: u16) -> color_eyre::Result<ServerStatus> {
+    use color_eyre::eyre::{bail, eyre};
+    use std::net::ToSocketAddrs;
+    use std::time::Duration;
+    use tokio::net::UdpSocket;
+
+    let dest = format!("{}:{}", address, port)
+        .to_socket_addrs()?
+        .next()
+        .ok_or_else(|| 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?;
+
+    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"),
+    }
 }
@@ -0,0 +1,5 @@
+proxy_url = "https://127.0.0.1:4433/proxy"
+https_listen_address = "127.0.0.1:4433"
+http_listen_address = "127.0.0.1:8080"
+mumble_server_url = "[SERVER_URL_HERE]"
+gui_path = "target/dx/mumble-web2-gui/release/web/public"
@@ -0,0 +1,12 @@
+localhost:64444 {
+	tls internal
+
+	# Proxy /config path to mumble-web2-proxy
+	reverse_proxy /overrides http://127.0.0.1:4400
+
+	# Proxy /status path to mumble-web2-proxy
+	reverse_proxy /status http://127.0.0.1:4400
+
+	# Proxy root path to dx-serve
+	reverse_proxy http://127.0.0.1:8080
+}
@@ -0,0 +1,43 @@
+FROM rust:trixie
+
+ARG ANDROID_CLI_TOOLS_VERSION=13114758
+
+# Install android rust toolchains
+RUN rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
+
+# Install debian dependencies
+RUN apt-get update && \
+    DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
+    nodejs \
+    ca-certificates \
+    curl \
+    unzip \
+    default-jdk
+
+# Install android commandline tools (required to install the sdk)
+RUN cd /tmp && \
+    curl -o commandlinetools-linux.zip "https://dl.google.com/android/repository/commandlinetools-linux-${ANDROID_CLI_TOOLS_VERSION}_latest.zip" && \
+    unzip commandlinetools-linux.zip && \
+    mkdir -p /opt/android-tools/cmdline-tools && \ 
+    cp -r cmdline-tools /opt/android-tools/cmdline-tools/latest
+
+
+# Install required android tools
+RUN yes | /opt/android-tools/cmdline-tools/latest/bin/sdkmanager --install "platform-tools" "platforms;android-36.1" "build-tools;36.1.0" "ndk;29.0.14206865" "cmake;3.31.6"
+
+# Install cargo binstall
+RUN curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
+
+# Install dioxus-cli
+RUN cargo binstall dioxus-cli@0.7.3
+
+# Install bindgen-cli
+RUN cargo binstall bindgen-cli
+
+# Set required env vars
+ENV ANDROID_HOME="/opt/android-tools/"
+ENV NDK_HOME="$ANDROID_HOME/ndk/29.0.14206865"
+ENV PATH="$PATH:$ANDROID_HOME/platform-tools"
+ENV PATH="$PATH:/opt/android-tools/cmake/3.31.6/bin/"
+ENV LLVM_CONFIG_PATH="/opt/android-tools/ndk/29.0.14206865/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-config"
+
@@ -0,0 +1,21 @@
+#!/bin/bash
+set -euo pipefail
+
+SCRIPT_DIR="$(dirname "$(realpath "${BASH_SOURCE[0]}")")"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+IMAGE_NAME="mumble-web2/android-release-builder:local"
+
+TARGET="${1:-aarch64-linux-android}"
+
+echo "==> Building Android builder Docker image..."
+docker build -t "$IMAGE_NAME" -f "$SCRIPT_DIR/android-release-builder.Dockerfile" "$PROJECT_ROOT"
+
+echo "==> Building Android APK (target: $TARGET)..."
+docker run --rm \
+    -v "$PROJECT_ROOT:/app" \
+    -w /app \
+    "$IMAGE_NAME" \
+    dx build --platform android --target "$TARGET" --release -p mumble-web2-gui
+
+echo "==> Done! APK should be at:"
+echo "    target/dx/mumble-web2-gui/release/android/app/app/build/outputs/apk/debug/app-debug.apk"
@@ -0,0 +1,58 @@
+services:
+  caddy:
+    image: caddy:latest
+    ports:
+      - "64444:64444/tcp"
+      - "64444:64444/udp"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:z
+      #- caddy_data:/data
+      #- caddy_config:/config
+    depends_on:
+      #- dx-serve
+      - mumble-web2-proxy
+    network_mode: host
+
+  #dx-serve:
+  #  build:
+  #    dockerfile: ./dioxus.Dockerfile
+  #  working_dir: /app
+  #  volumes:
+  #    - ..:/app
+  #  environment:
+  #    - MUMBLE_WEB2_PROXY_OVERRIDES_URL=https://localhost:64444/overrides
+  #  stdin_open: true
+  #  tty: true
+  #  command: >
+  #    bash -c "
+  #    screen -dmS serve bash -c 'dx serve -p mumble-web2-gui --platform web' &&
+  #    tail -f /dev/null
+  #    "
+  #  networks:
+  #    - app-network
+
+  mumble-web2-proxy:
+    image: rust:latest
+    working_dir: /app
+    volumes:
+      - ..:/app:z
+      - ./proxy-config.toml:/app/config.toml:z
+    ports:
+      - "4433:4433/tcp"
+      - "4433:4433/udp"
+    command: ["cargo", "run", "-p", "mumble-web2-proxy", "--locked"]
+    network_mode: host
+
+  mumble-server:
+    image: mumblevoip/mumble-server:latest
+    ports:
+      - "64738:64738/tcp"
+      - "64738:64738/udp"
+    network_mode: host
+#volumes:
+#  caddy_data:
+#  caddy_config:
+#
+#networks:
+#  app-network:
+#    driver: bridge
@@ -0,0 +1,4 @@
+proxy_url = "https://127.0.0.1:4433/proxy"
+https_listen_address = "127.0.0.1:4433"
+http_listen_address = "127.0.0.1:4400"
+mumble_server_url = "127.0.0.1:64738"
@@ -0,0 +1,55 @@
+# escape=`
+
+# Use a Windows Server Core 2025 image that matches our build host.
+# If the version doesn't match the build host we cannot run
+# this container. I'm not sure with what specificity it has to
+# match, so let's pin this and then upgrade it as we upgrade
+# the host.
+FROM mcr.microsoft.com/windows/servercore:10.0.26100.7171
+
+ENV CMAKE_VERSION=3.31.10
+ENV CMAKE_ARCH=windows-x86_64
+
+# Restore the default Windows shell for correct batch processing.
+SHELL ["cmd", "/S", "/C"]
+
+RUN curl -SL --output vs_buildtools.exe https://aka.ms/vs/17/release/vs_buildtools.exe `
+  && ( start /w vs_buildtools.exe --quiet --wait --norestart --nocache `
+  --installPath "%ProgramFiles(x86)%\Microsoft Visual Studio\2022\BuildTools" `
+  --add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 `
+  --add Microsoft.VisualStudio.Component.Windows10SDK.19041 `
+  --add Microsoft.VisualStudio.Workload.NativeDesktop `
+  || IF "%ERRORLEVEL%"=="3010" EXIT 0 )
+
+SHELL ["powershell", "-NoLogo", "-ExecutionPolicy", "Bypass", "-Command"]
+
+RUN $ErrorActionPreference = 'Stop'; `
+  $url = \"https://github.com/Kitware/CMake/releases/download/v$env:CMAKE_VERSION/cmake-$env:CMAKE_VERSION-$env:CMAKE_ARCH.zip\"; `
+  $out = 'C:\\cmake.zip'; `
+  (New-Object System.Net.WebClient).DownloadFile($url, $out); `
+  Expand-Archive -Path $out -DestinationPath 'C:\\'; `
+  Remove-Item $out; `
+  $cmakeDir = \"C:\\cmake-$env:CMAKE_VERSION-$env:CMAKE_ARCH\\bin\"; `
+  [Environment]::SetEnvironmentVariable('PATH', $cmakeDir + ';' + $env:PATH, 'Machine')
+
+# Install Chocolatey
+RUN Set-ExecutionPolicy Bypass -Scope Process; `
+  [System.Net.ServicePointManager]::SecurityProtocol = `
+  [System.Net.SecurityProtocolType]::Tls12; `
+  iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
+
+RUN choco install git -y --no-progress
+RUN choco install rustup.install -y --no-progress
+
+RUN rustup toolchain install stable-x86_64-pc-windows-msvc
+RUN rustup default stable-x86_64-pc-windows-msvc
+
+# Install cargo binstall
+RUN Set-ExecutionPolicy Unrestricted -Scope Process; `
+  iex (Invoke-WebRequest "https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.ps1" -UseBasicParsing).Content
+
+SHELL ["C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\Common7\\Tools\\VsDevCmd.bat", "&&", "powershell.exe", "-NoLogo", "-ExecutionPolicy", "Bypass"]
+# Install dioxus-cli
+RUN cargo binstall dioxus-cli@0.7.3
+
+ENTRYPOINT ["C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\Common7\\Tools\\VsDevCmd.bat", "&&", "powershell.exe", "-NoLogo", "-ExecutionPolicy", "Bypass"]
@@ -4,100 +4,31 @@ version = "0.1.0"
 edition = "2021"

 [dependencies]
-# Web Dependencies
-# ================
-dioxus-web = { version = "0.6.0-alpha.4", optional = true }
-wasm-bindgen = { version = "0.2.92", optional = true }
-wasm-bindgen-futures = { version = "0.4.42", optional = true }
-wasm-streams = { version = "0.4.0", optional = true }
-serde-wasm-bindgen = { version = "0.6.5", optional = true }
-js-sys = { version = "0.3.70", optional = true }
-web-sys = { version = "0.3.72", features = [
-  "WebTransport",
-  "console",
-  "WebTransportOptions",
-  "WebTransportBidirectionalStream",
-  "WebTransportSendStream",
-  "WebTransportReceiveStream",
-  "Navigator",
-  "MediaDevices",
-  "AudioDecoder",
-  "AudioDecoderInit",
-  "AudioData",
-  "AudioEncoderConfig",
-  "AudioDecoderConfig",
-  "EncodedAudioChunk",
-  "EncodedAudioChunkInit",
-  "EncodedAudioChunkType",
-  "CodecState",
-  "MediaStreamTrackGenerator",
-  "MediaStreamTrackGeneratorInit",
-  "AudioContext",
-  "AudioContextOptions",
-  "MediaStream",
-  "GainNode",
-  "MediaStreamAudioSourceNode",
-  "BaseAudioContext",
-  "AudioDestinationNode",
-  "AudioWorkletNode",
-  "AudioWorklet",
-  "AudioWorkletProcessor",
-  "MediaStreamConstraints",
-  "WorkletOptions",
-  "AudioEncoder",
-  "AudioEncoderInit",
-  "AudioDataInit",
-  "HtmlAnchorElement",
-  "Url",
-  "Blob",
-  "AudioDataCopyToOptions",
-  "AudioSampleFormat",
-  "Storage",
-], optional = true}
-gloo-timers = { version = "0.3.0", features = ["futures"], optional = true }
-tracing-web = { version = "0.1.3", optional = true }
+dioxus = { version = "0.7.2" }
+dioxus-web = { version = "0.7.2", optional = true }
+mumble-web2-client = { version = "0.1.0", path = "../client" }
+mumble-web2-common = { version = "0.1.0", path = "../common" }
+color-eyre = "^0.6.3"

-# Desktop Dependecies
-# ===================
-dioxus-desktop = { version = "0.6.0-alpha.4", optional = true}
-tokio = { version = "1.41.1", features = ["net", "rt"], optional = true }
-tokio-rustls = { version = "0.26.0", optional = true }
-
-
-# Base Dependencies
-# ================
-dioxus = { version = "0.6.0-alpha.4" }
-once_cell = "1.19.0"
-asynchronous-codec = { workspace = true }
-futures = "0.3.30"
-merge-io = "0.3.0"
-mumble-protocol = { workspace = true }
-serde_json = "1.0.117"
-tokio-util = { version = "0.7.11", features = ["codec", "compat"] }
-byteorder = "1.5.0"
-ogg = "0.9.1"
-ordermap = "0.5.3"
-html-purifier = "0.3.0"
-markdown = "0.3.0"
-futures-channel = "0.3.30"
-sir = { git = "https://gitlab.com/samsartor/sir", features = ["dioxus"] } # dioxus 0.6
-mumble-web2-common = { workspace = true }
-serde = { workspace = true }
-tracing-subscriber = { version = "0.3.18", features = ["ansi"] }
-tracing = "0.1.40"
-color-eyre = "0.6.3"
+# Platform Integration
+# ====================
+# rfd only supports windows, macos, linux, and wasm32. No support for Android or iOS
+[target.'cfg(any(target_os = "linux", target_os = "windows", target_os = "macos", target_arch = "wasm32"))'.dependencies]
+rfd = { git = "https://github.com/PolyMeilex/rfd.git", version = "^0.16.0", default-features = false, optional = true }

 [features]
 web = [
  "dioxus/web",
  "dioxus-web",
-  "wasm-bindgen",
-  "wasm-bindgen-futures",
-  "wasm-streams",
-  "serde-wasm-bindgen",
-  "js-sys",
-  "web-sys",
-  "gloo-timers",
-  "tracing-web",
+  "mumble-web2-client/web",
+  "rfd",
+]
+desktop = [
+  "dioxus/desktop",
+  "mumble-web2-client/desktop",
+  "rfd/xdg-portal",
+]
+mobile = [
+  "dioxus/mobile",
+  "mumble-web2-client/mobile"
 ]
-desktop = ["dioxus/desktop", "tokio", "tokio-rustls", "tracing-subscriber/env-filter"]
@@ -8,10 +8,11 @@ out_dir = "dist"
 # resource (public) file folder
 asset_dir = "public"

+android_manifest = "build/AndroidManifest.xml"
+
 [web.app]
 # HTML title tag content
 title = "Mumble Web 2"
-base_path = "gui"

 [web.watcher]
 # when watcher trigger, regenerate the `index.html`
@@ -24,7 +25,7 @@ watch_path = ["src", "assets"]
 # CSS style file
 style = []
 # Javascript code file
-script = []
+script = ["loader.js"]

 [web.resource.dev]
 # serve: [dev-server] only
@@ -32,3 +33,14 @@ script = []
 style = []
 # Javascript code file
 script = []
+
+[bundle]
+identifier = "xyz.ohea.mumble_web_2"
+publisher = "OheaCorp"
+icon = [
+  "icons/32x32.png",
+  "icons/256x256.png",
+  "assets/favicon.ico",
+  "icons/icon.icns",
+  "icons/icon.ico",
+]
@@ -0,0 +1,434 @@
+:root {
+  --txt-color: oklch(0.9 0 99);
+  --bg-color: oklch(0.15 0.01 338.64);
+  --light-bg-color: oklch(0.25 0.01 338.64);
+  --login-bg-color: #5d7680;
+  --primary-btn-color: #7bad9f;
+  --accent-normal: #7bad9f;
+  --accent-muted: #ff746c;
+  --accent-deafened: #464459;
+  --line-width: 2px;
+  --line-color: oklch(0.7 0 0.99);
+}
+
+body {
+  margin: 0;
+}
+
+#main {
+  visibility: visible;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background-color: var(--bg-color);
+  overflow: auto;
+  color: var(--txt-color);
+
+  font-family: Nunito;
+  font-size: 15pt;
+  font-weight: 600;
+}
+
+hr {
+  color: var(--line-color);
+  background-color: var(--line-color);
+  height: var(--line-width);
+  border: none;
+}
+
+button {
+  font-weight: bold;
+  font-size: medium;
+  border: none;
+  border-radius: 4px;
+  color: var(--txt-color);
+  background-color: var(--primary-btn-color);
+  cursor: pointer;
+}
+
+input {
+  border: none;
+  border-radius: 4px;
+  background-color: white;
+  color: black;
+}
+
+input:focus,
+input:focus-visible {
+  border: none;
+  outline: solid var(--line-width) var(--accent-normal);
+  outline-offset: -3px;
+}
+
+a:link {
+  color: var(--accent-normal);
+}
+
+a:visited {
+  color: var(--accent-muted);
+}
+
+.userpil {
+  border-radius: 100px;
+  padding: 4px 8px;
+  width: fit-content;
+
+  img {
+    height: 1em;
+    vertical-align: text-bottom;
+  }
+
+  &.is_self {
+    font-weight: bolder;
+  }
+}
+
+
+.channel_header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.channel_arrow {
+    width: 1em;
+    text-align: center;
+    margin-right: 0.25rem;
+}
+
+.channel_arrow--placeholder {
+    pointer-events: none;
+    visibility: hidden;
+}
+
+/* The whole right side of the row is the dblclick target */
+.channel_row_click {
+    flex: 1;
+    padding: 0.1rem 0.25rem 0.1rem 0.5rem;
+    cursor: pointer;
+}
+
+/* Hover highlight for whole row area (title + blank space) */
+.channel_row_click:hover {
+    background-color: var(--channel-hover-bg, #222); /* pick your color */
+}
+
+
+/* still keep text non-selectable if desired */
+.channel_details {
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.channel {
+  &_details {
+    flex: 0 0 100%;
+
+    summary {
+      cursor: pointer;
+    }
+
+    summary:focus-visible {
+      outline: none;
+    }
+  }
+
+  &_children {
+    border-left: solid var(--line-color) var(--line-width);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-left: 5px;
+    padding-left: 11px;
+    padding-top: 4px;
+  }
+}
+
+.chat {
+  &_panel {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &_history {
+    overflow-y: auto;
+    flex: 1 0 0;
+  }
+
+  &_message {
+    display: flex;
+    flex-direction: row;
+    margin: 16px;
+    gap: 8px;
+    align-items: center;
+  }
+
+  &_box_wrapper {
+    padding: 16px;
+    border-top: solid var(--line-color) var(--line-width);
+  }
+
+  &_box {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
+    background-color: var(--light-bg-color);
+
+    padding-top: 16px;
+    padding-bottom: 16px;
+
+    padding-left: 8px;
+    padding-right: 16px;
+
+    border-radius: 8px;
+
+    input {
+      color: white;
+      background-color: var(--light-bg-color);
+
+      font-size: larger;
+
+      flex-grow: 1;
+
+      border: none;
+    }
+
+    input:focus {
+      outline: none;
+    }
+  }
+}
+
+.user_edit_button {
+  background-color: oklch(0.53 0.1431 264.18);
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+
+  .material-symbols-outlined {
+    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+  }
+}
+
+.button_row {
+  display: flex;
+  gap: clamp(4px, 1vw, 10px);
+  align-items: center;
+  flex-wrap: nowrap;
+  min-height: 0;
+
+  .spacer {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .connection_status {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex-shrink: 1;
+
+    .material-symbols-outlined {
+      font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+      vertical-align: middle;
+    }
+  }
+
+  .user_info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    flex-shrink: 1;
+
+    .user_name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user_data {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.toggle_button {
+  padding: clamp(4px, 0.5vw, 8px);
+  aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+
+  background-color: unset;
+
+  border: solid rgb(255 255 255 / 0.1) clamp(1px, 0.3vw, 3px);
+  border-radius: clamp(4px, 0.8vw, 10px);
+  color: rgb(255 255 255 / 50%);
+
+  transition: all 0.5s ease-in-out;
+
+  &.is_on {
+    background-color: oklch(0.5 0.1381 21.71 / 20.12%);
+    color: oklch(0.53 0.1505 21.71 / 89.38%);
+  }
+
+  .material-symbols-outlined {
+    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+    vertical-align: middle;
+  }
+}
+
+.server {
+  &_grid {
+    display: grid;
+    height: 100%;
+    background-color: var(--bg-color);
+
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 1fr 2fr;
+    grid-template-areas:
+      "tree chat"
+      "control chat";
+
+    @media screen and (max-width: 720px) {
+      grid-template-rows: auto 1fr 1fr;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "tree"
+        "control"
+        "chat";
+    }
+  }
+
+  &_channel_box {
+    padding: 16px;
+    overflow: auto;
+    grid-area: tree;
+  }
+
+  &_chat_box {
+    display: flex;
+    flex-direction: row;
+    grid-area: chat;
+    border-left: solid var(--line-color) var(--line-width);
+
+    @media screen and (max-width: 720px) {
+      border-left: unset;
+      border-top: solid var(--line-color) var(--line-width);
+    }
+  }
+
+  &_control_box {
+    padding: clamp(6px, 0.8vw, 12px);
+    margin: clamp(6px, 0.8vw, 12px);
+    background-color: var(--light-bg-color);
+    border-radius: clamp(6px, 1vw, 10px);
+    overflow: hidden;
+    grid-area: control;
+
+    display: flex;
+    gap: clamp(4px, 0.8vw, 8px);
+    flex-direction: column;
+
+    // Dynamic font sizing for control elements
+    --control-icon-size: clamp(16px, 2.5vw, 30px);
+    --control-text-size: clamp(12px, 2vw, 25px);
+    --control-small-text-size: clamp(10px, 1.5vw, 20px);
+    --user-icon-size: clamp(24px, 4vw, 45px);
+    --toggle-icon-size: clamp(18px, 3vw, 35px);
+
+    .connection_status {
+      .material-symbols-outlined {
+        font-size: var(--control-icon-size);
+      }
+      .status_text {
+        font-size: var(--control-text-size);
+      }
+      .channel_text {
+        font-size: var(--control-small-text-size);
+      }
+    }
+
+    .user_edit_button {
+      .material-symbols-outlined {
+        font-size: var(--user-icon-size);
+      }
+    }
+
+    .user_info {
+      .user_name {
+        font-size: var(--control-text-size);
+      }
+      .user_data {
+        font-size: var(--control-small-text-size);
+      }
+    }
+
+    .toggle_button {
+      .material-symbols-outlined {
+        font-size: var(--toggle-icon-size);
+      }
+    }
+
+    hr {
+      margin: 0;
+    }
+  }
+}
+
+.login {
+  max-width: 50vw;
+  align-self: center;
+  padding: 32px;
+  border-radius: 16px;
+  background-color: var(--login-bg-color);
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  input,
+  button {
+    padding: 8px;
+  }
+
+  h1 {
+    margin: 0;
+    color: #b3c6b4;
+  }
+
+  &_version {
+    color: var(--txt-color);
+    font-weight: normal;
+  }
+
+  &_bttn {
+    font-weight: bold;
+    font-size: large;
+  }
+
+  &_error {
+
+    background-color: white;
+    border-radius: 4px;
+    overflow: auto;
+    padding: 4px;
+    color: red;
+
+    pre {
+      color: black;
+    }
+  }
+
+  &_status {
+    &.is_error {
+      color: red;
+    }
+  }
+}
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8" ?>
+
+<!--
+Borrowed from https://github.com/irh/audio-app/blob/main/apps/dioxus/AndroidManifest.xml 
+--> 
+
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+
+    <uses-feature android:name="android.hardware.audio.low_latency" android:required="false" />
+    <uses-feature android:name="android.hardware.audio.output" android:required="false" />
+    <uses-feature android:name="android.hardware.audio.pro" android:required="false" />
+    <uses-feature android:name="android.hardware.microphone" android:required="false" />
+
+    <application android:hasCode="true" android:supportsRtl="true" android:icon="@mipmap/ic_launcher"
+        android:extractNativeLibs="true"
+        android:allowNativeHeapPointerTagging="false"
+        android:label="@string/app_name"
+        android:theme="@style/AppTheme"
+        android:networkSecurityConfig="@xml/network_security_config">
+        <activity android:configChanges="orientation|screenLayout|screenSize|keyboardHidden" android:exported="true"
+            android:label="@string/app_name" android:name="dev.dioxus.main.MainActivity">
+            <meta-data android:name="android.app.lib_name" android:value="dioxusmain" />
+            <meta-data android:name="android.app.func_name" android:value="ANativeActivity_onCreate" />
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+</manifest>
@@ -0,0 +1,68 @@
+// Loading screen that displays while WASM loads
+(function() {
+  // Create and inject loader styles immediately (head exists)
+  var style = document.createElement('style');
+  style.textContent =
+    '.wasm-loader {' +
+      'position: fixed;' +
+      'top: 0;' +
+      'left: 0;' +
+      'width: 100%;' +
+      'height: 100%;' +
+      'background-color: oklch(0.15 0.01 338.64);' +
+      'display: flex;' +
+      'align-items: center;' +
+      'justify-content: center;' +
+      'z-index: 9999;' +
+      'transition: opacity 0.3s ease-out;' +
+    '}' +
+    '.wasm-loader.hidden {' +
+      'opacity: 0;' +
+      'pointer-events: none;' +
+    '}' +
+    '.wasm-spinner {' +
+      'width: 48px;' +
+      'height: 48px;' +
+      'border: 4px solid rgba(123, 173, 159, 0.2);' +
+      'border-top-color: #7bad9f;' +
+      'border-radius: 50%;' +
+      'animation: wasm-spin 1s linear infinite;' +
+    '}' +
+    '@keyframes wasm-spin {' +
+      'to { transform: rotate(360deg); }' +
+    '}' +
+    '#main {' +
+      'background-color: oklch(0.15 0.01 338.64);' +
+    '}';
+  document.head.appendChild(style);
+
+  function init() {
+    // Create loader element
+    var loader = document.createElement('div');
+    loader.className = 'wasm-loader';
+    loader.innerHTML = '<div class="wasm-spinner"></div>';
+    document.body.appendChild(loader);
+
+    // Watch for Dioxus to mount content in #main
+    var observer = new MutationObserver(function(mutations, obs) {
+      var main = document.getElementById('main');
+      if (main && main.children.length > 0) {
+        loader.classList.add('hidden');
+        setTimeout(function() { loader.remove(); }, 300);
+        obs.disconnect();
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  // Wait for body to exist
+  if (document.body) {
+    init();
+  } else {
+    document.addEventListener('DOMContentLoaded', init);
+  }
+})();
@@ -1,641 +0,0 @@
-#![allow(non_snake_case)]
-
-use dioxus::prelude::*;
-use ordermap::OrderSet;
-use sir::{css, global_css};
-use std::collections::HashMap;
-
-use crate::{imp, CONFIG};
-
-pub type ChannelId = u32;
-pub type UserId = u32;
-
-pub enum ConnectionState {
-    Disconnected,
-    Connecting,
-    Connected,
-    Failed(String),
-}
-
-#[derive(Debug)]
-pub enum Command {
-    Connect {
-        address: String,
-        username: String,
-    },
-    SendChat {
-        markdown: String,
-        channels: Vec<ChannelId>,
-    },
-    SetMute {
-        mute: bool,
-    },
-    SetDeaf {
-        deaf: bool,
-    },
-    EnterChannel {
-        channel: ChannelId,
-        user: UserId,
-    },
-    Disconnect,
-}
-
-use Command::*;
-use ConnectionState::*;
-
-#[derive(Default)]
-pub struct ChannelState {
-    pub name: String,
-    pub children: OrderSet<ChannelId>,
-    pub users: OrderSet<UserId>,
-    pub parent: Option<ChannelId>,
-}
-
-#[derive(Default)]
-pub struct UserState {
-    pub name: String,
-    pub channel: ChannelId,
-    pub deaf: bool,
-    pub mute: bool,
-    pub self_deaf: bool,
-    pub self_mute: bool,
-}
-
-impl UserState {
-    pub fn icon(&self) -> UserIcon {
-        match (self.mute || self.self_mute, self.deaf || self.self_deaf) {
-            (false, false) => UserIcon::Normal,
-            (true, false) => UserIcon::Muted,
-            (_, true) => UserIcon::Deafened,
-        }
-    }
-}
-
-pub struct Chat {
-    pub raw: String,
-    pub dangerous_html: String,
-    pub sender: Option<UserId>,
-}
-
-#[derive(Default)]
-pub struct ServerState {
-    pub channels: HashMap<ChannelId, ChannelState>,
-    pub users: HashMap<UserId, UserState>,
-    pub chat: Vec<Chat>,
-    pub session: Option<UserId>,
-}
-
-impl ServerState {
-    pub fn this_user(&self) -> Option<&UserState> {
-        self.users.get(&self.session?)
-    }
-}
-
-pub struct State {
-    pub status: GlobalSignal<ConnectionState>,
-    pub server: GlobalSignal<ServerState>,
-}
-
-pub static STATE: State = State {
-    status: Signal::global(|| Disconnected),
-    server: Signal::global(|| Default::default()),
-};
-
-#[derive(Clone, Copy, PartialEq, Eq)]
-pub enum UserIcon {
-    Normal,
-    Muted,
-    Deafened,
-    None,
-}
-
-impl UserIcon {
-    pub fn url(self) -> Option<Asset> {
-        // speaker from https://www.svgrepo.com/collection/ikono-bold-line-icons/
-        // mic from https://www.svgrepo.com/collection/hashicorp-line-interface-icons/
-
-        use UserIcon::*;
-        Some(match self {
-            Normal => asset!("assets/mic-svgrepo-com.svg"),
-            Muted => asset!("assets/mic-off-svgrepo-com.svg"),
-            Deafened => asset!("assets/speaker-muted-svgrepo-com.svg"),
-            None => return Option::None,
-        })
-    }
-}
-
-#[component]
-pub fn UserPill(name: String, icon: UserIcon) -> Element {
-    let pill = css!(
-        "
-        border-radius: 100px;
-        padding: 4px 8px;
-        width: fit-content;
-
-        img {
-            height: 1em;
-            vertical-align: text-bottom;
-        }
-    "
-    );
-
-    let color = match icon {
-        UserIcon::Normal => "var(--accent-a)",
-        UserIcon::Muted => "var(--accent-b)",
-        UserIcon::Deafened => "var(--accent-c)",
-        UserIcon::None => "var(--accent-a)",
-    };
-
-    rsx!(
-        div {
-            class: "{pill}",
-            style: "background-color: {color}",
-            { icon.url().map(|url| rsx!(img { src: url })) }
-            "\u{00A0}{name}\u{00A0}"
-        }
-    )
-}
-
-#[component]
-pub fn User(id: UserId) -> Element {
-    let server = STATE.server.read();
-    match server.users.get(&id) {
-        Some(state) => rsx!(UserPill {
-            name: state.name.clone(),
-            icon: state.icon(),
-        }),
-        None => rsx!(UserPill {
-            name: format!("unknown user ({id})"),
-            icon: UserIcon::None,
-        }),
-    }
-}
-
-#[component]
-pub fn Channel(id: ChannelId) -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-    let server = STATE.server.read();
-    let user = server.session.unwrap();
-    let Some(state) = server.channels.get(&id) else {
-        return rsx!("missing channel {id}");
-    };
-
-    let channel_details = css!(
-        "
-        flex: 0 0 100%;
-
-        summary {
-            cursor: pointer;
-        }
-
-        summary:focus-visible {
-            outline: none;
-        }
-    "
-    );
-    let channel_children = css!(
-        "
-        border-left: solid var(--line-color) var(--line-width);
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-left: 5px;
-        padding-left: 11px;
-        padding-top: 4px;    "
-    );
-
-    rsx!(
-        details {
-            class: "{channel_details}",
-            open: true,
-            summary {
-                span {
-                    role: "button",
-                    prevent_default: "onclick",
-                    ondoubleclick: move |evt| {
-                        evt.stop_propagation();
-                        net.send(EnterChannel { channel: id, user })
-                    },
-                    "{state.name}"
-                }
-            }
-            if state.users.len() + state.children.len() > 0 {
-                div {
-                    class: "{channel_children}",
-                    for id in state.users.iter() {
-                        User { id: *id }
-                    }
-                    for child in state.children.iter() {
-                        Channel { id: *child }
-                    }
-                }
-            }
-        }
-    )
-}
-
-#[component]
-pub fn ChatView() -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-    let server = STATE.server.read();
-    let mut draft = use_signal(|| "".to_string());
-
-    let chat_history = css!(
-        "
-        overflow-y: auto;
-        flex: 1 0 0;
-    "
-    );
-
-    let chat_message = css!(
-        "
-        display: flex;
-        flex-direction: row;
-        margin: 16px;
-        gap: 8px;
-        align-items: center;
-    "
-    );
-
-    let chat_box = css!(
-        "
-        display: flex;
-        flex-direction: row;
-        padding: 16px;
-        gap: 8px;
-        border-top: solid var(--line-color) var(--line-width);
-
-        input {
-            flex-grow: 1;
-            padding: 8px;
-        }
-    "
-    );
-
-    let mut do_send = move || {
-        if let Some(user) = STATE.server.read().this_user() {
-            net.send(SendChat {
-                markdown: draft.write().split_off(0),
-                channels: vec![user.channel],
-            });
-        }
-    };
-
-    rsx!(
-        div {
-            class: "{chat_history}",
-            for chat in server.chat.iter() {
-                div {
-                    class: "{chat_message}",
-                    if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
-                        UserPill {
-                            name: sender.name.clone(),
-                            icon: UserIcon::None,
-                        }
-                    }
-                    span {
-                        dangerous_inner_html: "{chat.dangerous_html}",
-                    }
-                }
-            }
-        }
-        div {
-            class: "{chat_box}",
-            input {
-                placeholder: "say something",
-                value: "{draft.read()}",
-                oninput: move |evt| draft.set(evt.value().clone()),
-                onkeypress: move |evt: Event<KeyboardData>| {
-                    if evt.code() == Code::Enter && evt.modifiers().is_empty() {
-                        do_send();
-                    }
-                }
-            }
-            button {
-                onclick: move |_| do_send(),
-                "Send"
-            }
-        }
-    )
-}
-
-#[component]
-pub fn ServerView() -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-    let server = STATE.server.read();
-    let Some(&UserState {
-        deaf,
-        self_deaf,
-        mute,
-        self_mute,
-        ..
-    }) = server.this_user()
-    else {
-        return rsx!();
-    };
-
-    let grid = css!(
-        r#"
-        display: grid;
-        height: 100%;
-        background-color: var(--bg-color);
-
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr 1fr;
-        grid-template-areas:
-            "bar bar"
-            "tree chat";
-
-        @media screen and (max-width: 720px) {
-            grid-template-rows: auto 1fr 1fr;
-            grid-template-columns: 1fr;
-            grid-template-areas:
-                "bar"
-                "tree"
-                "chat";
-        }
-    "#
-    );
-
-    let channel_box = css!(
-        "
-        padding: 16px;
-        overflow: auto;
-        grid-area: tree;
-    "
-    );
-
-    let chat_box = css!(
-        "
-        display: flex;
-        flex-direction: column;
-        grid-area: chat;
-        border-left: solid var(--line-color) var(--line-width);
-
-        @media screen and (max-width: 720px) {
-            border-left:unset;
-            border-top: solid var(--line-color) var(--line-width);
-        }
-    "
-    );
-
-    let top_bar = css!(
-        "
-        padding: 16px;
-        grid-area: bar;
-        background-color: var(--login-bg-color);
-
-        display: flex;
-        flex-direction: row;
-        gap: 16px;
-        align-items: center;
-
-        button {
-            padding: 8px;
-
-            img {
-                height: 1em;
-                vertical-align: text-bottom;
-            }
-        }
-    "
-    );
-
-    rsx!(
-        div {
-            class: "{grid}",
-            div {
-                class: "{top_bar}",
-                button {
-                    onclick: move |_| net.send(Disconnect),
-                    "Disconnect"
-                }
-                button {
-                    role: "switch",
-                    aria_checked: mute || self_mute,
-                    disabled: mute,
-                    onclick: move |_| net.send(SetMute { mute: !self_mute }),
-                    match mute || self_mute {
-                        true => rsx!(img { src: asset!("assets/mic-off-svgrepo-com.svg") }),
-                        false => rsx!(img { src: asset!("assets/mic-svgrepo-com.svg") }),
-                    }
-                    "\u{00A0}Mute"
-                }
-                button {
-                    role: "switch",
-                    aria_checked: deaf || self_deaf,
-                    disabled: deaf,
-                    onclick: move |_| net.send(SetDeaf { deaf: !self_deaf }),
-                    match deaf || self_deaf {
-                        true => rsx!(img { src: asset!("assets/speaker-muted-svgrepo-com.svg") }),
-                        false => rsx!(img { src: asset!("assets/speaker-medium-svgrepo-com.svg") }),
-                    }
-                    "\u{00A0}Deafen"
-                }
-            }
-            div {
-                class: "{channel_box}",
-                for (id, state) in server.channels.iter() {
-                    if state.parent.is_none() {
-                        Channel { id: *id }
-                    }
-                }
-            }
-            div {
-                class: "{chat_box}",
-                ChatView {}
-            }
-        }
-    )
-}
-
-#[component]
-pub fn LoginView() -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-    let default_address = CONFIG.proxy_url.as_deref().unwrap_or("");
-    let mut address = use_signal(|| default_address.to_string());
-
-    let previous_username = imp::load_username();
-    let mut username = use_signal(|| previous_username.unwrap_or(String::new()));
-
-    let error = css!(
-        "
-        background-color: white;
-        border-radius: 4px;
-        overflow: auto;
-        padding: 4px;
-        color: red;
-        pre {
-            color: black;
-        }
-    "
-    );
-
-    let login_box = css!(
-        "
-        max-width: 50vw;
-        align-self: center;
-        padding: 32px;
-        border-radius: 16px;
-        background-color: var(--login-bg-color);
-
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-
-        input,button {
-            padding: 8px;
-        }
-
-        h1 {
-            margin: 0;
-            color: #b3c6b4;
-        }
-    "
-    );
-
-    let bttn = css!(
-        "
-        font-weight: bold;
-        font-size: large;
-    "
-    );
-
-    let do_connect = move |_| {
-        //let _ = set_default_username(&username.read());
-        let _ = imp::set_default_username(&username.read());
-        net.send(Connect {
-            address: address.read().clone(),
-            username: username.read().clone(),
-        })
-    };
-    let status = &STATE.status;
-    let bottom = match &*status.read() {
-        Disconnected => rsx! {
-            button {
-                class: "{bttn}",
-                onclick: do_connect.clone(),
-                "Connect"
-            }
-        },
-        Connecting => rsx! {
-            div {
-                class: "{bttn}",
-                "Connecting..."
-            }
-        },
-        Failed(msg) => rsx!(
-            button {
-                class: "{bttn}",
-                onclick: do_connect.clone(),
-                "Reconnect"
-            }
-            div {
-                class: "{error}",
-                "Failed to connect:"
-                pre {
-                    "{msg}"
-                }
-            }
-        ),
-        Connected => unreachable!(),
-    };
-    rsx!(
-        div {
-            class: "{login_box}",
-            h1 {
-                "Mumble Web"
-            }
-            input {
-                placeholder: "username",
-                value: "{username.read()}",
-                autofocus: "true",
-                oninput: move |evt| username.set(evt.value().clone()),
-            }
-            input {
-                placeholder: "server address",
-                value: "{address.read()}",
-                autofocus: "true",
-                oninput: move |evt| address.set(evt.value().clone()),
-            }
-            {bottom}
-        }
-    )
-}
-
-pub fn app() -> Element {
-    use_coroutine(|rx: UnboundedReceiver<Command>| super::network_entrypoint(rx));
-
-    global_css!(
-        "
-    :root {
-        --txt-color: white;
-        --bg-color: #372f3a;
-        --login-bg-color: #5d7680;
-        --primary-btn-color: #7bad9f;
-        --accent-a: #8eb29a;
-        --accent-b: #6a9395;
-        --accent-c: #464459;
-        --line-width: 2px;
-        --line-color: white;
-    }
-
-    body {
-        margin: 0;
-    }
-
-    #main {
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        background-color: var(--bg-color);
-        overflow: auto;
-        color: var(--txt-color);
-
-        font-family: sans-serif;
-        font-size: large;
-    }
-
-    button {
-        font-weight: bold;
-        font-size: medium;
-        border: none;
-        border-radius: 4px;
-        color: var(--txt-color);
-        background-color: var(--primary-btn-color);
-        cursor: pointer;
-    }
-
-    input {
-        border: none;
-        border-radius: 4px;
-        background-color: white;
-        color: black;
-    }
-
-    input:focus,input:focus-visible {
-        border: none;
-        outline: solid var(--line-width) var(--accent-a);
-        outline-offset: -3px;
-    }
-
-    a:link {
-        color: var(--accent-a);
-    }
-
-    a:visited {
-        color: var(--accent-b);
-    }
-    "
-    );
-
-    rsx!(
-        sir::AppStyle { }
-        match *STATE.status.read() {
-            Connected => rsx!(ServerView {}),
-            _ => rsx!(LoginView {}),
-        }
-    )
-}
@@ -1,11 +0,0 @@
-#[cfg(feature = "web")]
-mod web;
-
-#[cfg(feature = "desktop")]
-mod desktop;
-
-#[cfg(all(feature = "web", not(feature = "desktop")))]
-pub use web::*;
-
-#[cfg(feature = "desktop")]
-pub use desktop::*;
@@ -1,439 +0,0 @@
-use crate::app::Command;
-use crate::CONFIG;
-use color_eyre::eyre::{bail, eyre, Error};
-use dioxus::prelude::*;
-use futures::{AsyncRead, AsyncWrite};
-use futures_channel::mpsc::UnboundedSender;
-use gloo_timers::future::TimeoutFuture;
-use mumble_protocol::control::{ClientControlCodec, ControlPacket};
-use mumble_protocol::voice::{VoicePacket, VoicePacketPayload};
-use mumble_protocol::Serverbound;
-use mumble_web2_common::GuiConfig;
-use std::time::Duration;
-use tracing::{debug, error, info, instrument};
-use wasm_bindgen::prelude::*;
-use wasm_bindgen_futures::JsFuture;
-use web_sys::js_sys::{Promise, Reflect, Uint8Array};
-use web_sys::AudioContext;
-use web_sys::AudioContextOptions;
-use web_sys::AudioData;
-use web_sys::AudioDecoder;
-use web_sys::AudioDecoderConfig;
-use web_sys::AudioDecoderInit;
-use web_sys::AudioEncoder;
-use web_sys::AudioEncoderConfig;
-use web_sys::AudioEncoderInit;
-use web_sys::AudioWorkletNode;
-use web_sys::EncodedAudioChunk;
-use web_sys::EncodedAudioChunkInit;
-use web_sys::EncodedAudioChunkType;
-use web_sys::MediaStream;
-use web_sys::MediaStreamConstraints;
-use web_sys::MediaStreamTrackGenerator;
-use web_sys::MediaStreamTrackGeneratorInit;
-use web_sys::MessageEvent;
-use web_sys::WebTransport;
-use web_sys::WebTransportBidirectionalStream;
-use web_sys::WebTransportOptions;
-use web_sys::WorkletOptions;
-use web_sys::{console, window};
-
-pub use wasm_bindgen_futures::spawn_local as spawn;
-
-pub trait ImpRead: AsyncRead + Unpin + 'static {}
-impl<T: AsyncRead + Unpin + 'static> ImpRead for T {}
-
-pub trait ImpWrite: AsyncWrite + Unpin + 'static {}
-impl<T: AsyncWrite + Unpin + 'static> ImpWrite for T {}
-
-pub async fn sleep(d: Duration) {
-    TimeoutFuture::new(d.as_millis() as u32).await
-}
-
-trait ResultExt<T> {
-    fn ey(self) -> Result<T, Error>;
-}
-
-impl<T> ResultExt<T> for Result<T, JsValue> {
-    fn ey(self) -> Result<T, Error> {
-        match self {
-            Ok(x) => Ok(x),
-            Err(e) => match e.dyn_into::<js_sys::Error>() {
-                Ok(e) => Err(eyre!("{}: {}", e.name(), e.message())),
-                Err(e) => Err(eyre!("{:?}", e)),
-            },
-        }
-    }
-}
-
-impl<T> ResultExt<T> for Result<T, JsError> {
-    fn ey(self) -> Result<T, Error> {
-        self.map_err(|e| JsValue::from(e)).ey()
-    }
-}
-pub struct AudioSystem(AudioContext);
-
-impl AudioSystem {
-    pub fn new(sender: UnboundedSender<ControlPacket<Serverbound>>) -> Result<Self, Error> {
-        // Create MediaStreams to playback decoded audio
-        // The audio context is used to reproduce audio.
-        let audio_context = configure_audio_context();
-
-        let audio_context_worklet = audio_context.clone();
-        spawn(async move {
-            match create_encoder_worklet(&audio_context_worklet, sender).await {
-                Ok(node) => info!("created encoder worklet: {:?}", &node),
-                Err(err) => error!("could not create encoder worklet: {err}"),
-            }
-        });
-
-        Ok(AudioSystem(audio_context))
-    }
-
-    pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
-        let audio_context = &self.0;
-
-        let audio_stream_generator =
-            MediaStreamTrackGenerator::new(&MediaStreamTrackGeneratorInit::new("audio")).ey()?;
-
-        // Create MediaStream from MediaStreamTrackGenerator
-        let js_tracks = web_sys::js_sys::Array::new();
-        js_tracks.push(&audio_stream_generator);
-        let media_stream = MediaStream::new_with_tracks(&js_tracks).ey()?;
-
-        // Create MediaStreamAudioSourceNode
-        let audio_source = audio_context
-            .create_media_stream_source(&media_stream)
-            .ey()?;
-        // Connect output of audio_source to audio_context (browser audio)
-        audio_source
-            .connect_with_audio_node(&audio_context.destination())
-            .ey()?;
-
-        // Create callback functions for AudioDecoder
-        let decoder_error = Closure::wrap(Box::new(move |e: JsValue| {
-            error!("error decoding audio {:?}", e);
-        }) as Box<dyn FnMut(JsValue)>);
-
-        // This knows what MediaStreamTrackGenerator to use as it closes around it
-        let output = Closure::wrap(Box::new(move |audio_data: AudioData| {
-            let writable = audio_stream_generator.writable();
-            if writable.locked() {
-                return;
-            }
-            if let Err(e) = writable.get_writer().map(|writer| {
-                spawn(async move {
-                    if let Err(e) = JsFuture::from(writer.ready()).await.ey() {
-                        error!("write chunk ready error {:?}", e);
-                    }
-                    if let Err(e) = JsFuture::from(writer.write_with_chunk(&audio_data))
-                        .await
-                        .ey()
-                    {
-                        error!("write chunk error {:?}", e);
-                    };
-                    writer.release_lock();
-                });
-            }) {
-                error!("error writing audio data {:?}", e);
-            }
-        }) as Box<dyn FnMut(AudioData)>);
-
-        let audio_decoder = AudioDecoder::new(&AudioDecoderInit::new(
-            decoder_error.as_ref().unchecked_ref(),
-            output.as_ref().unchecked_ref(),
-        ))
-        .ey()?;
-
-        audio_decoder.configure(&AudioDecoderConfig::new("opus", 1, 48000));
-        info!("created audio decoder");
-
-        // This is required to prevent these from being deallocated
-        decoder_error.forget();
-        output.forget();
-
-        Ok(AudioPlayer(audio_decoder))
-    }
-}
-
-pub struct AudioPlayer(AudioDecoder);
-
-impl AudioPlayer {
-    pub fn play_opus(&mut self, payload: &[u8]) {
-        let js_audio_payload = Uint8Array::from(payload);
-        let _ = self.0.decode(
-            &EncodedAudioChunk::new(&EncodedAudioChunkInit::new(
-                &js_audio_payload.into(),
-                0.0,
-                EncodedAudioChunkType::Key,
-            ))
-            .unwrap(),
-        );
-    }
-}
-
-// Borrowed from
-// https://github.com/security-union/videocall-rs/blob/main/videocall-client/src/decode/config.rs#L6
-fn configure_audio_context() -> AudioContext {
-    let mut audio_context_options = AudioContextOptions::new();
-    audio_context_options.sample_rate(48000 as f32);
-    let audio_context = AudioContext::new_with_context_options(&audio_context_options).unwrap();
-    audio_context
-}
-
-trait PromiseExt {
-    fn into_future(self) -> JsFuture;
-}
-
-impl PromiseExt for Promise {
-    fn into_future(self) -> JsFuture {
-        self.into()
-    }
-}
-
-async fn create_encoder_worklet(
-    audio_context: &AudioContext,
-    packets: UnboundedSender<ControlPacket<mumble_protocol::Serverbound>>,
-) -> Result<AudioWorkletNode, Error> {
-    let stream = window()
-        .unwrap()
-        .navigator()
-        .media_devices()
-        .ey()?
-        .get_user_media_with_constraints(MediaStreamConstraints::new().audio(&JsValue::TRUE))
-        .ey()?
-        .into_future()
-        .await
-        .ey()?
-        .dyn_into()
-        .map_err(|e| JsError::new(&format!("not a stream: {e:?}")))
-        .ey()?;
-
-    let options = WorkletOptions::new();
-    Reflect::set(
-        &options,
-        &"processorOptions".into(),
-        &wasm_bindgen::module(),
-    )
-    .ey()?;
-
-    let module = asset!("assets/rust_mic_worklet.js").to_string();
-    info!("loading mic worklet from {module:?}");
-    audio_context
-        .audio_worklet()
-        .ey()?
-        .add_module_with_options(&module, &options)
-        .ey()?
-        .into_future()
-        .await
-        .ey()?;
-
-    let source = audio_context.create_media_stream_source(&stream).ey()?;
-    let worklet_node = AudioWorkletNode::new(audio_context, "rust_mic_worklet").ey()?;
-
-    let encoder_error: Closure<dyn FnMut(JsValue)> =
-        Closure::new(|e| error!("error encoding audio {:?}", e));
-
-    let download_buffer = std::cell::RefCell::new(Vec::new());
-
-    // This knows what MediaStreamTrackGenerator to use as it closes around it
-    let mut sequence_num = 0;
-    let output: Closure<dyn FnMut(EncodedAudioChunk)> =
-        Closure::new(move |audio_data: EncodedAudioChunk| {
-            let mut array = vec![0u8; audio_data.byte_length() as usize];
-            audio_data.copy_to_with_u8_slice(&mut array);
-
-            download_buffer.borrow_mut().push(array.clone());
-            if download_buffer.borrow().len() > 200 {
-                //download_data(download_buffer.borrow().to_vec(), "download_buffer.opus");
-                //download_data(
-                //    ass::encode(download_buffer.borrow().to_vec(), 960, 0),
-                //    "download_buffer.opus",
-                //);
-                download_buffer.borrow_mut().clear();
-            }
-
-            let _ =
-                packets.unbounded_send(ControlPacket::UDPTunnel(Box::new(VoicePacket::Audio {
-                    _dst: std::marker::PhantomData,
-                    target: 0,
-                    session_id: (),
-                    seq_num: sequence_num,
-                    payload: VoicePacketPayload::Opus(array.into(), false),
-                    position_info: None,
-                })));
-            sequence_num = sequence_num.wrapping_add(2);
-        });
-
-    let audio_encoder = AudioEncoder::new(&AudioEncoderInit::new(
-        encoder_error.as_ref().unchecked_ref(),
-        output.as_ref().unchecked_ref(),
-    ))
-    .unwrap();
-
-    // This is required to prevent these from being deallocated
-    encoder_error.forget();
-    output.forget();
-    let encoder_config = AudioEncoderConfig::new("opus");
-    encoder_config.set_number_of_channels(1);
-    encoder_config.set_sample_rate(48000);
-    encoder_config.set_bitrate(72_000.0);
-
-    audio_encoder.configure(&encoder_config);
-    info!("created audio encoder");
-
-    let download_buffer = std::cell::RefCell::new(Vec::new());
-
-    let onmessage: Closure<dyn FnMut(MessageEvent)> = Closure::new(move |event: MessageEvent| {
-        match AudioData::new(event.data().unchecked_ref()) {
-            Ok(data) => {
-                let x = web_sys::AudioDataCopyToOptions::new(0);
-                x.set_format(web_sys::AudioSampleFormat::F32);
-                let mut sub_buffer = vec![0; data.allocation_size(&x).unwrap() as usize];
-                data.copy_to_with_u8_slice(&mut sub_buffer, &x);
-                download_buffer.borrow_mut().append(&mut sub_buffer);
-                if download_buffer.borrow().len() > 48000 * 10 * 4 {
-                    //pub fn download_data(data: Vec<u8>, filename: &str) -> Result<(), JsValue> {
-                    //download_data(download_buffer.borrow().to_vec(), "download_buffer.pcm32");
-                    download_buffer.borrow_mut().clear();
-                }
-
-                audio_encoder.encode(&data);
-            }
-            Err(err) => {
-                error!(
-                    "error creating AudioData object {:?} during event {:?}",
-                    err, event,
-                );
-            }
-        }
-    });
-    Reflect::set(
-        &Reflect::get(&worklet_node, &"port".into()).ey()?,
-        &"onmessage".into(),
-        onmessage.as_ref(),
-    )
-    .ey()?;
-    onmessage.forget();
-
-    source.connect_with_audio_node(&worklet_node).ey()?;
-    worklet_node
-        .connect_with_audio_node(&audio_context.destination())
-        .ey()?;
-
-    Ok(worklet_node)
-}
-
-#[instrument]
-pub async fn network_connect(
-    address: String,
-    username: String,
-    event_rx: &mut UnboundedReceiver<Command>,
-) -> Result<(), Error> {
-    info!("Rust via WASM!");
-
-    let object = web_sys::js_sys::Object::new();
-
-    Reflect::set(
-        &object,
-        &JsValue::from_str("algorithm"),
-        &JsValue::from_str("sha-256"),
-    )
-    .ey()?;
-
-    if let Some(server_hash) = &CONFIG.cert_hash {
-        let hash = web_sys::js_sys::Uint8Array::from(server_hash.as_slice());
-        web_sys::js_sys::Reflect::set(&object, &"value".into(), &hash).ey()?;
-    }
-
-    let array = web_sys::js_sys::Array::new();
-    array.push(&object);
-
-    debug!("created option object: {:?}", &object);
-
-    let mut options = WebTransportOptions::new();
-    options.set_server_certificate_hashes(&array);
-
-    debug!("created WebTransportOptions");
-    console::log_1(&options.clone().into());
-
-    let transport = WebTransport::new_with_options(&address, &options).ey()?;
-    debug!("created WebTransport connection object");
-    console::log_1(&transport.clone().into());
-
-    if let Err(e) = wasm_bindgen_futures::JsFuture::from(transport.ready())
-        .await
-        .ey()
-    {
-        bail!("could not connect to transport: {e}");
-    }
-
-    info!("transport is ready");
-
-    let stream: WebTransportBidirectionalStream =
-        wasm_bindgen_futures::JsFuture::from(transport.create_bidirectional_stream())
-            .await
-            .ey()?
-            .into();
-
-    let wasm_stream_readable = wasm_streams::ReadableStream::from_raw(stream.readable().into());
-    let wasm_stream_writable = wasm_streams::WritableStream::from_raw(stream.writable().into());
-
-    let read_codec = ClientControlCodec::new();
-    let write_codec = ClientControlCodec::new();
-
-    let reader =
-        asynchronous_codec::FramedRead::new(wasm_stream_readable.into_async_read(), read_codec);
-    let writer =
-        asynchronous_codec::FramedWrite::new(wasm_stream_writable.into_async_write(), write_codec);
-
-    crate::network_loop(username, event_rx, reader, writer).await
-}
-
-pub fn set_default_username(username: &str) -> Option<()> {
-    web_sys::window()?
-        .local_storage()
-        .ok()??
-        .set_item("username", username)
-        .ok()
-}
-
-pub fn load_username() -> Option<String> {
-    web_sys::window()
-        .unwrap()
-        .local_storage()
-        .ok()??
-        .get_item("username")
-        .ok()?
-}
-
-fn load_config_from_window() -> Option<GuiConfig> {
-    serde_wasm_bindgen::from_value(Reflect::get(window()?.as_ref(), &"config".into()).ok()?).ok()
-}
-
-fn load_config_from_env() -> Option<GuiConfig> {
-    serde_json::from_str(option_env!("MUMBLE_WEB2_GUI_CONFIG")?).ok()?
-}
-
-pub fn load_config() -> Option<GuiConfig> {
-    load_config_from_window().or_else(load_config_from_env)
-}
-
-pub fn init_logging() {
-    // copied from tracing_web example usage
-
-    use tracing_subscriber::fmt::format::Pretty;
-    use tracing_subscriber::prelude::*;
-    use tracing_web::{performance_layer, MakeWebConsoleWriter};
-
-    let fmt_layer = tracing_subscriber::fmt::layer()
-        .with_ansi(false) // Only partially supported across browsers
-        .without_time() // std::time is not available in browsers
-        .with_writer(MakeWebConsoleWriter::new()); // write events to the console
-    let perf_layer = performance_layer().with_details_from_fields(Pretty::default());
-
-    tracing_subscriber::registry()
-        .with(fmt_layer)
-        .with(perf_layer)
-        .init();
-}
@@ -1,12 +1,740 @@
-use mumble_web2_gui::{app, imp::init_logging};
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+use mumble_web2_client::{
+    network_entrypoint, reqwest, AudioSettings, ChannelId, Command, ConfigSystem,
+    ConfigSystemInterface as _, ConnectionState, Platform, PlatformInterface as _, ServerState,
+    SharedState, State, UserId, UserState, VERSION,
+};
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::collections::{HashMap, HashSet};
+use std::{fmt, sync::Arc};
+use Command::*;
+use ConnectionState::*;
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum UserIcon {
+    Normal,
+    Muted,
+    Deafened,
+    Suppressed,
+    None,
+}
+
+impl UserIcon {
+    pub fn icon(user: &UserState) -> UserIcon {
+        if user.deaf || user.self_deaf {
+            UserIcon::Deafened
+        } else if user.mute || user.self_mute {
+            UserIcon::Muted
+        } else if user.suppress {
+            UserIcon::Suppressed
+        } else {
+            UserIcon::Normal
+        }
+    }
+
+    pub fn url(self) -> Option<Asset> {
+        // speaker from https://www.svgrepo.com/collection/ikono-bold-line-icons/
+        // mic from https://www.svgrepo.com/collection/hashicorp-line-interface-icons/
+
+        use UserIcon::*;
+        Some(match self {
+            Normal => asset!("assets/mic-svgrepo-com.svg"),
+            Muted | Suppressed => asset!("assets/mic-off-svgrepo-com.svg"),
+            Deafened => asset!("assets/speaker-muted-svgrepo-com.svg"),
+            None => return Option::None,
+        })
+    }
+}
+
+#[component]
+pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
+    let color = match icon {
+        UserIcon::Normal => "var(--accent-normal)",
+        UserIcon::Muted => "var(--accent-muted)",
+        UserIcon::Suppressed | UserIcon::Deafened => "var(--accent-deafened)",
+        UserIcon::None => "var(--accent-normal)",
+    };
+
+    rsx!(
+        div {
+            class: match isself { true => "userpil is_self", false => "userpil" },
+            style: "background-color: {color}",
+            { icon.url().map(|url| rsx!(img { src: url })) }
+            "\u{00A0}{name}\u{00A0}"
+        }
+    )
+}
+
+#[component]
+pub fn User(id: UserId) -> Element {
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    match server.users.get(&id) {
+        Some(state) => rsx!(UserPill {
+            name: state.name.clone(),
+            icon: UserIcon::icon(state),
+            isself: server.session.unwrap() == id,
+        }),
+        None => rsx!(UserPill {
+            name: format!("unknown user ({id})"),
+            icon: UserIcon::None,
+            isself: false,
+        }),
+    }
+}
+
+#[component]
+pub fn Channel(id: ChannelId) -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    let user = server.session.unwrap();
+    let Some(state) = server.channels_state.channels.get(&id) else {
+        return rsx!("missing channel {id}");
+    };
+
+    let mut open = use_signal(|| true);
+
+    let has_children = !state.users.is_empty() || !state.children.is_empty();
+
+    rsx!(
+        div {
+            class: "channel_details",
+
+            div {
+                class: "channel_header",
+                // Arrow: only toggles open
+                if has_children {
+                    span {
+                        class: "channel_arrow",
+                        onclick: move |evt| {
+                            evt.stop_propagation();
+                            evt.prevent_default();
+                            let mut w = open.write();
+                            *w = !*w;
+                        },
+                        if *open.read() { "▾" } else { "▸" }
+                    }
+                } else {
+                    span {
+                        class: "channel_arrow channel_arrow--placeholder",
+                        " "
+                    }
+                }
+
+                // Clickable row area (everything except the arrow)
+                div {
+                    class: "channel_row_click",
+                    ondblclick: move |evt| {
+                        evt.stop_propagation();
+                        evt.prevent_default();
+                        net.send(EnterChannel { channel: id, user })
+                    },
+                    // remove dblclick from the inner span
+                    span {
+                        class: "channel_title",
+                        "{state.name}"
+                    }
+                    // if you add icons/badges later, put them here too
+                }
+            }
+
+            if *open.read() && has_children {
+                div {
+                    class: "channel_children",
+                    for id in state.users.iter() {
+                        User { id: *id }
+                    }
+                    for child in state.children.iter() {
+                        Channel { id: *child }
+                    }
+                }
+            }
+        }
+    )
+}
+
+#[cfg(any(feature = "desktop", feature = "web"))]
+pub fn pick_and_send_file(net: &Coroutine<Command>) {
+    let state = use_context::<SharedState>();
+    let channels = if let Some(user) = state.server.read().this_user() {
+        vec![user.channel]
+    } else {
+        return;
+    };
+    let dialog = rfd::AsyncFileDialog::new().pick_file();
+    let sender = net.tx();
+    spawn(async move {
+        let Some(handle) = dialog.await else { return };
+        let name = handle.file_name();
+        let bytes = handle.read().await;
+        let mime = mumble_web2_client::mime_guess::from_path(&name).first();
+        let _ = sender.unbounded_send(SendFile {
+            bytes,
+            name,
+            mime,
+            channels,
+        });
+    });
+}
+#[cfg(not(any(feature = "desktop", feature = "web")))]
+pub fn pick_and_send_file(net: &Coroutine<Command>) {}
+
+#[component]
+pub fn ChatView() -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    let mut draft = use_signal(|| "".to_string());
+
+    let mut do_send = move || {
+        let state = use_context::<SharedState>();
+        let server = state.server.read();
+        if let Some(user) = server.this_user() {
+            net.send(SendChat {
+                markdown: draft.write().split_off(0),
+                channels: vec![user.channel],
+            });
+        }
+    };
+
+    rsx!(
+        div {
+            class: "chat_panel",
+            div {
+                class: "chat_history",
+                for chat in server.chat.iter() {
+                    div {
+                        class: "chat_message",
+                        if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
+                            UserPill {
+                                name: sender.name.clone(),
+                                icon: UserIcon::None,
+                                isself: false,
+                            }
+                        }
+                        span {
+                            dangerous_inner_html: "{chat.dangerous_html}",
+                        }
+                    }
+                }
+            }
+            div {
+                class: "chat_box_wrapper",
+                div {
+                    class: "chat_box",
+                    input {
+                        placeholder: "say something",
+                        value: "{draft.read()}",
+                        oninput: move |evt| draft.set(evt.value().clone()),
+                        onkeypress: move |evt: Event<KeyboardData>| {
+                            if evt.code() == Code::Enter && evt.modifiers().is_empty() {
+                                do_send();
+                            }
+                        }
+                    }
+                    div {
+                        span {
+                            onclick: move |_| pick_and_send_file(&net),
+                            class: "material-symbols-outlined",
+                            style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
+                            "attach_file",
+                        }
+                    }
+                    div {
+                        span {
+                            onclick: move |_| do_send(),
+                            class: "material-symbols-outlined",
+                            style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
+                            "send",
+                        }
+                    }
+                }
+                //button {
+                //    onclick: move |_| do_send(),
+                //    "Send"
+                //}
+            }
+        }
+    )
+}
+
+#[component]
+pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let status = &state.status;
+    let server = state.server.read();
+    let audio = state.audio.read();
+    let Some(&UserState {
+        deaf,
+        self_deaf,
+        mute,
+        suppress,
+        self_mute,
+        ref name,
+        channel,
+        ..
+    }) = server.this_user()
+    else {
+        return rsx!();
+    };
+
+    let current_channel_name = server.channels_state.channels[&channel].name.clone();
+
+    let proxy_url = overrides
+        .read_unchecked()
+        .as_ref()
+        .and_then(|overrides| overrides.proxy_url.clone());
+
+    let connecting_color = "yellow";
+    let connected_color = "oklch(0.55 0.1184 141.35)";
+    let disconnected_color = "gray";
+    let failed_color = "red";
+
+    let connection_status = match &*status.read() {
+        Connecting => rsx! {
+            div {
+                class: "connection_status",
+                style: "color: {connecting_color};",
+                div {
+                    span {
+                        class: "material-symbols-outlined",
+                        "signal_cellular_alt_2_bar"
+                    }
+                    span {
+                        class: "status_text",
+                        " Connecting"
+                    }
+                }
+            }
+        },
+        Connected => rsx! {
+            div {
+                class: "connection_status",
+                div {
+                    style: "color: {connected_color};",
+                    span {
+                        class: "material-symbols-outlined",
+                        "signal_cellular_alt"
+                    }
+                    span {
+                        class: "status_text",
+                        " Connected"
+                    }
+                }
+                div {
+                    class: "channel_text",
+                    span { "{current_channel_name}" }
+                }
+            }
+        },
+        Disconnected => rsx! {
+            div {
+                class: "connection_status",
+                style: "color: {disconnected_color};",
+                div {
+                    span {
+                        class: "material-symbols-outlined",
+                        "signal_disconnected"
+                    }
+                    span {
+                        class: "status_text",
+                        " Disconnected"
+                    }
+                }
+            }
+        },
+        Failed(_) => rsx! {
+            div {
+                class: "connection_status",
+                style: "color: {failed_color};",
+                div {
+                    span {
+                        class: "material-symbols-outlined",
+                        "error"
+                    }
+                    span {
+                        class: "status_text",
+                        " Failed"
+                    }
+                }
+            }
+        },
+    };
+
+    rsx!(
+        // Server control
+        div {
+            class: "button_row",
+            div {
+                {connection_status}
+            }
+            span { class: "spacer" }
+            button {
+                class: "toggle_button",
+                onclick: move |_| net.send(Disconnect),
+                span {
+                    class: "material-symbols-outlined",
+                    "signal_disconnected"
+                }
+            }
+        }
+        hr { style: "width: 100%;" }
+        // User control
+        div {
+            class: "button_row",
+            button {
+                class: "user_edit_button",
+                span {
+                    class: "material-symbols-outlined",
+                    style: "color: oklch(0.65 0.2245 28.06);",
+                    "person_edit"
+                }
+            }
+            div {
+                class: "user_info",
+                div {
+                    span { class: "user_name", "{name}" }
+                }
+                div {
+                    span { class: "user_data", "some data" }
+                }
+            }
+            span { class: "spacer" }
+            button {
+                class: match audio.denoise {
+                    true => "toggle_button is_on",
+                    false => "toggle_button",
+                },
+                role: "switch",
+                aria_checked: audio.denoise,
+                onclick: move |_| {
+                    let state = use_context::<SharedState>();
+                    let mut audio = state.audio.read().clone();
+                    audio.denoise = !audio.denoise;
+                    let denoise = audio.denoise;
+                    *state.audio.write_unchecked() = audio;
+                    net.send(UpdateAudioSettings(AudioSettings { denoise: denoise }));
+                    let user_config = use_context::<ConfigSystem>();
+                    user_config.config_set::<bool>("denoise", &denoise);
+                },
+                match audio.denoise {
+                    true => rsx!(span { class: "material-symbols-outlined", "cadence"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "graphic_eq"}),
+                }
+            }
+            button {
+                class: match mute || suppress || self_mute {
+                    true => "toggle_button is_on",
+                    false => "toggle_button",
+                },
+                role: "switch",
+                aria_checked: mute || suppress || self_mute,
+                disabled: mute || suppress,
+                onclick: move |_| net.send(SetMute { mute: !self_mute }),
+                match mute || suppress || self_mute {
+                    true => rsx!(span { class: "material-symbols-outlined", "mic_off"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "mic"}),
+                }
+            }
+            button {
+                class: match deaf || self_deaf {
+                    true => "toggle_button in_on",
+                    false => "toggle_button",
+                },
+                role: "switch",
+                aria_checked: deaf || self_deaf,
+                disabled: deaf,
+                onclick: move |_| net.send(SetDeaf { deaf: !self_deaf }),
+                match deaf || self_deaf {
+                    true => rsx!(span { class: "material-symbols-outlined", "volume_off"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "volume_up"}),
+                }
+            }
+        }
+    )
+}
+
+#[component]
+pub fn ServerView(overrides: Resource<ProxyOverrides>) -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    let Some(&UserState {
+        deaf,
+        self_deaf,
+        mute,
+        self_mute,
+        ..
+    }) = server.this_user()
+    else {
+        return rsx!();
+    };
+
+    rsx!(
+        div {
+            class: "server_grid",
+            div {
+                class: "server_channel_box",
+                for (id, state) in server.channels_state.channels.iter() {
+                    if state.parent.is_none() {
+                        Channel { id: *id }
+                    }
+                }
+            }
+            div {
+                class: "server_chat_box",
+                ChatView {}
+            }
+            div {
+                class: "server_control_box",
+                ControlView { overrides }
+            }
+        }
+    )
+}
+
+#[component]
+pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
+    let user_config = use_context::<ConfigSystem>();
+    let net: Coroutine<Command> = use_coroutine_handle();
+
+    let mut address_input = use_signal(|| user_config.config_get::<String>("server_url"));
+    let address = use_memo(move || {
+        if let Some(addr) = address_input() {
+            addr.clone()
+        } else {
+            overrides()
+                .and_then(|c| c.proxy_url.clone())
+                .unwrap_or_default()
+        }
+    });
+
+    let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
+    use_resource(move || {
+        let addr = address();
+        async move {
+            let client = reqwest::Client::new();
+            loop {
+                *last_status.write_unchecked() =
+                    Some(Platform::get_status(&client, &addr).await);
+                Platform::sleep(std::time::Duration::from_secs_f32(1.0)).await;
+            }
+        }
+    });
+
+    let mut username = use_signal(|| {
+        user_config
+            .config_get::<String>("username")
+            .unwrap_or(String::new())
+    });
+
+    let do_connect = move |_| {
+        let _ = user_config.config_set::<String>("username", &username.read());
+        if overrides.read().as_ref().is_some_and(|cfg| cfg.any_server) {
+            user_config.config_set::<String>("server_url", &address.read());
+        }
+        net.send(Connect {
+            address: address.read().clone(),
+            username: username.read().clone(),
+            config: overrides.read().clone().unwrap_or_default(),
+        })
+    };
+    let state = use_context::<SharedState>();
+    let status = &state.status;
+    let bottom = match &*status.read() {
+        Disconnected => rsx! {
+            button {
+                class: "login_bttn",
+                onclick: do_connect.clone(),
+                "Connect"
+            }
+        },
+        Connecting => 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}"
+                }
+            }
+        ),
+        Connected => unreachable!(),
+    };
+    rsx!(
+        div {
+            class: "login",
+            h1 {
+                "Mumble Web"
+                match VERSION {
+                    Some(v) => rsx!(" " span { class: "login_version", "({v})" }),
+                    None => rsx!(),
+                }
+            }
+            if overrides.read().as_ref().is_some_and(|cfg| cfg.any_server) {
+                div {
+                    label {
+                        for: "address-entry",
+                        "Server Address:"
+                    }
+                    input {
+                        id: "address-entry",
+                        placeholder: "address",
+                        value: "{address.read()}",
+                        autofocus: "true",
+                        oninput: move |evt| address_input.set(Some(evt.value().clone())),
+                    }
+                }
+            }
+            div {
+                label {
+                    for: "username-entry",
+                    "Username:"
+                    //style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
+                }
+                input {
+                    id: "username-entry",
+                    placeholder: "username",
+                    value: "{username.read()}",
+                    autofocus: "true",
+                    oninput: move |evt| username.set(evt.value().clone()),
+                }
+            }
+            div {
+                match &*last_status.read() {
+                    None => rsx!(div {
+                        class: "login_status",
+                        span {"···"}
+                    }),
+                    Some(Ok(ServerStatus { success: false, .. })) => rsx!(div {
+                        class: "login_status is_error",
+                        span {
+                            "Could not reach server"
+                        }
+                    }),
+                    Some(Ok(status)) => rsx!(div {
+                        class: "login_status",
+                        if let (Some(users), Some(max_users)) = (status.users, status.max_users) {
+                            span {"{users}/{max_users} Online"}
+                        } else {
+                            span {"Unknown Online"}
+                        }
+                        span {"-"}
+                        if let Some((maj, min, pat)) = status.version {
+                            span {"Version: {maj}.{min}.{pat}"}
+                        } else {
+                            span {"Unknown Version"}
+                        }
+                    }),
+                    Some(Err(_)) => rsx!(div {
+                        class: "login_status is_error",
+                        span {
+                            "Could not reach server"
+                        }
+                    }),
+                }
+                div {
+                    {bottom}
+                }
+
+            }
+        }
+    )
+    //    rsx!(
+    //        div {
+    //            class: "{login_box}",
+    //            h1 {
+    //                "Mumble Web"
+    //            }
+    //            input {
+    //                placeholder: "username",
+    //                value: "{username.read()}",
+    //                autofocus: "true",
+    //                oninput: move |evt| username.set(evt.value().clone()),
+    //            }
+    //            input {
+    //                placeholder: "server address",
+    //                value: "{address.read()}",
+    //                autofocus: "true",
+    //                oninput: move |evt| address_input.set(Some(evt.value().clone())),
+    //            }
+    //            {bottom}
+    //        }
+    //    )
+}
+
+#[component]
+pub fn app() -> Element {
+    static STYLE: Asset = asset!("/assets/main.scss");
+
+    use_effect(|| {
+        Platform::request_permissions();
+    });
+
+    let user_config = use_root_context(|| ConfigSystem::new().unwrap());
+    let state = use_root_context(|| {
+        SharedState::new(State {
+            status: Signal::new(Disconnected),
+            server: Signal::new(Default::default()),
+            audio: Signal::new(AudioSettings {
+                denoise: user_config.config_get::<bool>("denoise").unwrap_or(true),
+            }),
+        })
+    });
+
+    let network_state = state.clone();
+    use_coroutine(move |rx: UnboundedReceiver<Command>| {
+        network_entrypoint(rx, network_state.clone())
+    });
+    let overrides = use_resource(|| async move {
+        match Platform::load_proxy_overrides().await {
+            Ok(overrides) => overrides,
+            Err(_) => ProxyOverrides::default(),
+        }
+    });
+
+    rsx!(
+        document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" }
+        document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" }
+        document::Link{ rel: "stylesheet", href: STYLE }
+
+        match *state.status.read() {
+            Connected => rsx!(ServerView { overrides }),
+            _ => rsx!(LoginView { overrides }),
+        }
+    )
+}

 pub fn main() {
-    #[cfg(feature = "desktop")]
-    let _guard = tokio::runtime::Builder::new_multi_thread()
-        .enable_all()
-        .build()
-        .unwrap()
-        .enter();
-    init_logging();
-    dioxus::launch(app::app);
+    Platform::init_logging();
+    dioxus::LaunchBuilder::new()
+        .with_cfg(desktop! {
+            dioxus::desktop::Config::new()
+            // Reduce white flash on startup by setting background color and hiding main element
+            .with_background_color((0, 0, 0, 255))
+            .with_custom_head("<style>html, body { background: black; } #main { visibility: hidden; }</style>".into())
+            .with_disable_context_menu(cfg!(not(debug_assertions)))
+            .with_window(
+                dioxus::desktop::WindowBuilder::new()
+                    .with_title("Mumble Web 2")
+                    .with_min_inner_size(dioxus::desktop::LogicalSize::new(600.0, 300.0))
+                    .with_inner_size(dioxus::desktop::LogicalSize::new(900.0, 700.0))
+                    .with_maximized(false),
+            )
+        })
+        .launch(app);
 }
@@ -1,4 +0,0 @@
-cert.pem
-key.pem
-bundle
-config.toml
@@ -4,15 +4,27 @@ version = "0.1.0"
 edition = "2021"

 [dependencies]
-color-eyre = "0.6.3"
-serde = { version = "1.0.214", features = ["derive"] }
-serde_json = "1.0.132"
-tokio = { version = "1.37.0", features = ["full"] }
-tokio-rustls = "^0.26"
-toml = "0.8.19"
-tracing = { version = "0.1.40", features = ["async-await"] }
-tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
-mumble-web2-common = { workspace = true }
-salvo = { version = "0.74.2", features = ["quinn", "eyre", "rustls", "serve-static", "logging"] }
-once_cell = "1.20.2"
+color-eyre = "^0.6"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tokio = { version = "1", features = ["full"] }
+tokio-rustls = "0.26"
+toml = "0.8"
+tracing = { version = "^0.1.40", features = ["async-await"] }
+tracing-subscriber = { version = "^0.3.18", features = ["env-filter"] }
+mumble-web2-common = { workspace = true, features = ["networking"] }
+salvo = { version = "^0.84.2", features = [
+  "quinn",
+  "eyre",
+  "rustls",
+  "serve-static",
+  "logging",
+  "craft",
+  "cors",
+] }
+once_cell = "^1.20"
 rustls = { version = "^0.23", features = ["aws_lc_rs"] }
+rcgen = "^0.13.2"
+hmac-sha256 = "^1.1.8"
+time = "0.3"
+url = { version = "2", features = ["serde"] }
@@ -1,11 +0,0 @@
-https_listen_address = "127.0.0.1:4433"
-http_listen_address = "127.0.0.1:8080"
-cert_path = "./cert.pem"
-key_path = "./key.pem"
-mumble_server_url = "voip.ohea.xyz:64738"
-gui_path = "../target/dx/mumble-web2-gui/release/web/public"
-
-[gui]
-force_proxy = true
-proxy_url = "https://127.0.0.1:4433/proxy"
-# cert_hash = [...]
@@ -1,14 +1,14 @@
-use color_eyre::eyre::{anyhow, Context, Error, Result};
-use mumble_web2_common::GuiConfig;
-use once_cell::sync::OnceCell;
+use color_eyre::eyre::{anyhow, bail, Context, Result};
+use mumble_web2_common::{ping_server, ProxyOverrides, ServerStatus};
 use salvo::conn::rustls::{Keycert, RustlsConfig};
+use salvo::cors::{AllowOrigin, Cors};
 use salvo::logging::Logger;
 use salvo::prelude::*;
 use salvo::proto::quic::BidiStream;
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 use std::net::{SocketAddr, ToSocketAddrs};
 use std::path::PathBuf;
-use std::sync::{Arc, Mutex};
+use std::sync::Arc;
 use tokio::fs;
 use tokio::io::{AsyncRead, AsyncReadExt, AsyncWrite, AsyncWriteExt};
 use tokio::net::TcpStream;
@@ -23,57 +23,29 @@ use tracing::Instrument;
 use tracing::{error, instrument};
 use tracing_subscriber::filter::LevelFilter;
 use tracing_subscriber::EnvFilter;
+use url::Url;

-#[derive(Deserialize)]
+fn default_cert_alt_names() -> Vec<String> {
+    vec!["localhost".into()]
+}
+
+#[derive(Debug, Deserialize, Serialize)]
 struct Config {
+    proxy_url: Option<Url>,
    https_listen_address: SocketAddr,
    http_listen_address: Option<SocketAddr>,
-    cert_path: PathBuf,
-    key_path: PathBuf,
+    cert_path: Option<PathBuf>,
+    key_path: Option<PathBuf>,
+    #[serde(default = "default_cert_alt_names")]
+    cert_alt_names: Vec<String>,
    mumble_server_url: String,
    mumble_server_address: Option<SocketAddr>,
-    gui_path: PathBuf,
-    gui: Mutex<GuiConfig>,
+    gui_path: Option<PathBuf>,
 }

-static CONFIG: OnceCell<Config> = OnceCell::new();
-
-#[handler]
-#[instrument]
-async fn serve_gui_index_html(req: &Request, res: &mut Response) {
-    let config = CONFIG.get().unwrap();
-
-    // Load the HTML file
-    let path = config.gui_path.join("index.html");
-    let html = match fs::read_to_string(&path).await {
-        Ok(content) => content,
-        Err(err) => {
-            error!("could not load {}: {:?}", path.display(), err);
-            res.status_code(StatusCode::INTERNAL_SERVER_ERROR);
-            return;
-        }
-    };
-
-    // Insert the script tag with configuration
-    let modified_html = html.replace(
-        "</head>",
-        &format!(
-            "<script>window.config = {}</script>\n</head>",
-            serde_json::to_string(&config.gui).unwrap(),
-        ),
-    );
-    res.render(Text::Html(modified_html));
-}
-
-#[handler]
-async fn redirect_to_gui(res: &mut Response) {
-    res.render(Redirect::permanent("/gui"));
-}
-
-async fn init_config() -> Result<()> {
+fn init_config() -> Result<Config> {
    let mut config: Config = toml::from_str(
-        &fs::read_to_string("./config.toml")
-            .await
+        &std::fs::read_to_string("./config.toml")
            .context("reading config.toml (try making a copy of config.toml.example)")?,
    )?;
    let mumble_server_addr = config
@@ -89,123 +61,192 @@ async fn init_config() -> Result<()> {
            config.mumble_server_url
        ))?;
    config.mumble_server_address = Some(mumble_server_addr);
-    CONFIG
-        .set(config)
-        .map_err(|_| anyhow!("config already initialized"))?;
-    Ok(())
+    Ok(config)
 }

 #[tokio::main]
 async fn main() -> Result<()> {
    init_logging();
-    init_config().await?;
-    let config = CONFIG.get().unwrap();
+    let server_config = Arc::new(init_config()?);
+    info!("config:\n{}", toml::to_string_pretty(&*server_config)?);

-    // Server routing
-    let router = Router::new()
-        .get(redirect_to_gui)
-        .push(Router::with_path("/proxy").goal(connect_proxy))
-        .push(Router::with_path("/gui").get(serve_gui_index_html))
-        .push(Router::with_path("/gui/<*+rest>").get(StaticDir::new(config.gui_path.clone())))
-        // right now dioxus assets don't properly handle base_url, so we are stuck with this
-        .push(
-            Router::with_path("/assets/<*+rest>")
-                .get(StaticDir::new(config.gui_path.join("assets"))),
-        )
-        .hoop(Logger::new());
-
-    // Read server certs
    rustls::crypto::aws_lc_rs::default_provider()
        .install_default()
        .map_err(|e| anyhow!("could not install crypto provider {e:?}"))?;
-    let cert = fs::read(&config.cert_path)
-        .await
-        .context(format!("reading cert {}", config.cert_path.display()))?;
-    let key = fs::read(&config.key_path)
-        .await
-        .context(format!("reading key {}", config.key_path.display()))?;
+
+    let mut overrides = ProxyOverrides {
+        proxy_url: match &server_config.proxy_url {
+            Some(url) => Some(url.to_string()),
+            None => None,
+        },
+        cert_hash: None,
+        any_server: false,
+    };
+
+    let (cert, key) = match (&server_config.cert_path, &server_config.key_path) {
+        (None, None) => {
+            info!("generating self-signed cert");
+
+            // FIXME: redo every <14 days
+            let mut dname = rcgen::DistinguishedName::new();
+            dname.push(rcgen::DnType::CommonName, "mumble-web self-signed");
+            let key_pair = rcgen::KeyPair::generate_for(&rcgen::PKCS_ECDSA_P256_SHA256)?;
+            let mut cert_params =
+                rcgen::CertificateParams::new(server_config.cert_alt_names.clone())?;
+            cert_params.distinguished_name = dname;
+            cert_params.not_before = time::OffsetDateTime::now_utc();
+            cert_params.not_after = cert_params.not_before + time::Duration::days(12);
+            let cert = cert_params.self_signed(&key_pair)?;
+
+            let hash = hmac_sha256::Hash::hash(cert.der().as_ref());
+            overrides.cert_hash = Some(hash.into());
+
+            (cert.pem().into(), key_pair.serialize_pem().into())
+        }
+        (Some(cert_path), Some(key_path)) => {
+            // Read server certs
+            let cert = fs::read(cert_path)
+                .await
+                .context(format!("reading cert {}", cert_path.display()))?;
+            let key = fs::read(key_path)
+                .await
+                .context(format!("reading key {}", key_path.display()))?;
+            (cert, key)
+        }
+        _ => {
+            bail!("please supply both cert_path and key_path (or neither to generate a self-signed cert)")
+        }
+    };
    let rustls_config = RustlsConfig::new(Keycert::new().cert(cert.as_slice()).key(key.as_slice()));

+    info!("proxy overrides:\n{}", toml::to_string_pretty(&overrides)?);
+
+    let config_craft = ConfigCraft {
+        server_config: server_config.clone(),
+        overrides,
+    };
+
+    let status_craft = StatusCraft {
+        mumble_server_address: server_config.mumble_server_address.unwrap().clone(),
+    };
+
+    // Server routing
+    let mut router = Router::new()
+        .push(Router::with_path("/proxy").goal(config_craft.connect_proxy()))
+        .push(Router::with_path("/overrides").get(config_craft.get_overrides()))
+        .push(Router::with_path("/status").get(status_craft.get_status()))
+        .hoop(Logger::new());
+    if let Some(gui_path) = server_config.gui_path.clone() {
+        router =
+            router.push(Router::with_path("/").get(StaticFile::new(gui_path.join("index.html"))));
+        router = router.push(Router::with_path("/<*+rest>").get(StaticDir::new(gui_path)));
+    }
+
+    let cors = Cors::new().allow_origin(AllowOrigin::any()).into_handler();
+
+    let service = Service::new(router).hoop(cors);
+
    // Create http listeners
-    let http_listener = config.http_listen_address.map(TcpListener::new);
+    let http_listener = server_config.http_listen_address.map(TcpListener::new);
    let https_listener =
-        TcpListener::new(config.https_listen_address).rustls(rustls_config.clone());
-    let http3_listener = QuinnListener::new(rustls_config, config.https_listen_address);
+        TcpListener::new(server_config.https_listen_address).rustls(rustls_config.clone());
+    let http3_listener = QuinnListener::new(rustls_config, server_config.https_listen_address);

    // Start server
    match (http_listener, https_listener, http3_listener) {
        (Some(a), b, c) => {
            let accepter = a.join(b).join(c).bind().await;
-            Server::new(accepter).serve(router).await;
+            Server::new(accepter).serve(service).await;
        }
        (None, b, c) => {
            let accepter = b.join(c).bind().await;
-            Server::new(accepter).serve(router).await;
+            Server::new(accepter).serve(service).await;
        }
    }

    Ok(())
 }

-#[handler]
-#[instrument]
-async fn connect_proxy(req: &mut Request, res: &mut Response) {
-    info!("received proxy request");
-    let mumble_server_address = CONFIG.get().unwrap().mumble_server_address.unwrap();
+#[derive(Clone)]
+pub struct StatusCraft {
+    mumble_server_address: SocketAddr,
+}

-    let wt = match req.web_transport_mut().await {
-        Ok(wt) => wt,
-        Err(err) => {
-            res.status_code(StatusCode::BAD_REQUEST);
-            res.render(format!("error with webtransport: {err:?}"));
-            return;
+#[craft]
+impl StatusCraft {
+    #[craft(handler)]
+    async fn get_status(&self) -> Json<ServerStatus> {
+        let addr = self.mumble_server_address;
+        match ping_server(&addr.ip().to_string(), addr.port()).await {
+            Ok(status) => Json(status),
+            Err(e) => {
+                error!("ping failed: {e:#}");
+                Json(ServerStatus::default())
+            }
        }
-    };
-    info!("got webtransport for connection");
+    }
+}

-    use salvo::webtransport::server::AcceptedBi;
-    let (id, bi) = match wt.accept_bi().await {
-        Ok(Some(AcceptedBi::BidiStream(id, bi))) => (id, bi),
-        Ok(Some(AcceptedBi::Request(req, _))) => {
-            res.status_code(StatusCode::BAD_REQUEST);
-            res.render(format!(
-                "expected webtransport stream but got request {req:?}"
-            ));
-            return;
-        }
-        Ok(None) => {
-            res.status_code(StatusCode::BAD_REQUEST);
-            res.render(format!("no bidirectional connection requested"));
-            return;
-        }
-        Err(err) => {
-            res.status_code(StatusCode::INTERNAL_SERVER_ERROR);
-            res.render(format!("error with bidirectional connection: {err:?}"));
-            return;
-        }
-    };
+#[derive(Clone)]
+pub struct ConfigCraft {
+    server_config: Arc<Config>,
+    overrides: ProxyOverrides,
+}

-    /*
-    let id = wt.session_id();
-    let bi = match wt.open_bi(id).await {
-        Ok(bi) => bi,
-        Err(err) => {
-            res.status_code(StatusCode::BAD_REQUEST);
-            res.render(format!("could not open bidirectional stream: {err:?}"));
-            return;
-        }
-    };
-    */
+#[craft]
+impl ConfigCraft {
+    #[craft(handler)]
+    async fn get_overrides(&self) -> Json<ProxyOverrides> {
+        Json(self.overrides.clone())
+    }

-    let (outgoing, incoming) = bi.split();
-    let res = tokio::spawn(async move {
-        if let Err(error) = connect_proxy_impl(mumble_server_address, incoming, outgoing).await {
-            error!("error connecting proxy {error:?}")
+    #[craft(handler)]
+    async fn connect_proxy(&self, req: &mut Request, res: &mut Response) {
+        info!("received proxy request");
+        let mumble_server_address = self.server_config.mumble_server_address.unwrap();
+        let wt = match req.web_transport_mut().await {
+            Ok(wt) => wt,
+            Err(err) => {
+                res.status_code(StatusCode::BAD_REQUEST);
+                res.render(format!("error with webtransport: {err:?}"));
+                return;
+            }
+        };
+        info!("got webtransport for connection");
+
+        use salvo::webtransport::server::AcceptedBi;
+        let (id, bi) = match wt.accept_bi().await {
+            Ok(Some(AcceptedBi::BidiStream(id, bi))) => (id, bi),
+            Ok(Some(AcceptedBi::Request(req, _))) => {
+                res.status_code(StatusCode::BAD_REQUEST);
+                res.render(format!(
+                    "expected webtransport stream but got request {req:?}"
+                ));
+                return;
+            }
+            Ok(None) => {
+                res.status_code(StatusCode::BAD_REQUEST);
+                res.render(format!("no bidirectional connection requested"));
+                return;
+            }
+            Err(err) => {
+                res.status_code(StatusCode::INTERNAL_SERVER_ERROR);
+                res.render(format!("error with bidirectional connection: {err:?}"));
+                return;
+            }
+        };
+
+        let (outgoing, incoming) = bi.split();
+        let res = tokio::spawn(async move {
+            if let Err(error) = connect_proxy_impl(mumble_server_address, incoming, outgoing).await
+            {
+                error!("error connecting proxy {error:?}")
+            }
+        })
+        .await;
+        if let Err(err) = res {
+            error!("crash in connected proxy {err:?}");
        }
-    })
-    .await;
-    if let Err(err) = res {
-        error!("crash in connected proxy {err:?}");
    }
 }

@@ -232,19 +273,13 @@ async fn connect_proxy_impl(

    info!("connected to Mumble server");

-    // Spawn tasks to handle transmitting data between the WebTransport client and Mumble TCP Server
-    let c2s = tokio::spawn(
-        pass_bytes_loop(incoming, write_server)
-            .instrument(info_span!("Handler", "Client to server")),
-    );
-    let s2c = tokio::spawn(
-        pass_bytes_loop(read_server, outgoing)
-            .instrument(info_span!("Handler", "Server to client")),
-    );
-
+    // Handle transmitting data between the WebTransport client and Mumble TCP Server
+    // When one direction completes/fails, the other is dropped and its streams are closed
    tokio::select! {
-        res = c2s => res??,
-        res = s2c => res??,
+        res = pass_bytes_loop(incoming, write_server)
+            .instrument(info_span!("Handler", "Client to server")) => res?,
+        res = pass_bytes_loop(read_server, outgoing)
+            .instrument(info_span!("Handler", "Server to client")) => res?,
    };
    Ok(())
 }