feat(desktop): streaming video proxy + player UX improvements (#389)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

desktop/src-tauri/Cargo.lock

@@ -351,6 +351,58 @@ dependencies = [
  "fs_extra",
 ]
 
+[[package]]
+name = "axum"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "31b698c5f9a010f6573133b09e0de5408834d0c82f8d7475a89fc1867a71cd90"
+dependencies = [
+ "axum-core",
+ "bytes",
+ "form_urlencoded",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-util",
+ "itoa",
+ "matchit",
+ "memchr",
+ "mime",
+ "percent-encoding",
+ "pin-project-lite",
+ "serde_core",
+ "serde_json",
+ "serde_path_to_error",
+ "serde_urlencoded",
+ "sync_wrapper",
+ "tokio",
+ "tower",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "axum-core"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08c78f31d7b1291f7ee735c1c6780ccde7785daae9a9206026862dab7d8792d1"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "http",
+ "http-body",
+ "http-body-util",
+ "mime",
+ "pin-project-lite",
+ "sync_wrapper",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
 [[package]]
 name = "base58ck"
 version = "0.1.0"
@@ -2193,6 +2245,12 @@ version = "1.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
 
+[[package]]
+name = "httpdate"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
+
 [[package]]
 name = "hybrid-array"
 version = "0.4.10"
@@ -2216,6 +2274,7 @@ dependencies = [
  "http",
  "http-body",
  "httparse",
+ "httpdate",
  "itoa",
  "pin-project-lite",
  "smallvec",
@@ -2841,6 +2900,12 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5"
 
+[[package]]
+name = "matchit"
+version = "0.8.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47e1ffaa40ddd1f3ed91f717a33c8c0ee23fff369e3aa8772b9605cc1d22f4c3"
+
 [[package]]
 name = "matrixmultiply"
 version = "0.3.10"
@@ -4866,6 +4931,17 @@ dependencies = [
  "zmij",
 ]
 
+[[package]]
+name = "serde_path_to_error"
+version = "0.1.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10a9ff822e371bb5403e391ecd83e182e0e77ba7f6fe0160b795797109d1b457"
+dependencies = [
+ "itoa",
+ "serde",
+ "serde_core",
+]
+
 [[package]]
 name = "serde_repr"
 version = "0.1.20"
@@ -5168,6 +5244,7 @@ version = "0.1.0"
 dependencies = [
  "atomic-write-file",
  "audioadapter-buffers",
+ "axum",
  "base64 0.22.1",
  "bzip2 0.5.2",
  "chrono",
@@ -6331,6 +6408,7 @@ dependencies = [
  "tokio",
  "tower-layer",
  "tower-service",
+ "tracing",
 ]
 
 [[package]]
@@ -6369,6 +6447,7 @@ version = "0.1.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "63e71662fa4b2a2c3a26f570f037eb95bb1f85397f3cd8076caed2f026a6d100"
 dependencies = [
+ "log",
  "pin-project-lite",
  "tracing-attributes",
  "tracing-core",

desktop/src-tauri/Cargo.toml

@@ -44,7 +44,7 @@ serde_json = "1"
 nostr = "0.37"
 nostr-compat = { package = "nostr", version = "0.36" }
 zeroize = "1"
-reqwest = { version = "0.13", features = ["json", "query"] }
+reqwest = { version = "0.13", features = ["json", "query", "stream"] }
 url = "2"
 sprout-core = { path = "../../crates/sprout-core" }
 sprout-persona = { path = "../../crates/sprout-persona" }
@@ -62,6 +62,7 @@ sherpa-onnx = "1.12"
 ort = { version = "=2.0.0-rc.12", default-features = false, features = ["std", "ndarray", "tracing", "download-binaries", "tls-native", "copy-dylibs", "api-23", "coreml"] }
 ndarray = { version = "0.17", features = ["rayon"] }
 regex = "1"
+axum = "0.8"
 rodio = "0.22"
 earshot = "1.0"
 rubato = "2.0"

desktop/src-tauri/src/app_state.rs

@@ -1,4 +1,8 @@
-use std::{collections::HashMap, io::Write, sync::Mutex};
+use std::{
+    collections::HashMap,
+    io::Write,
+    sync::{atomic::AtomicU16, Mutex},
+};
 
 use nostr::{Keys, ToBech32};
 use tauri::{AppHandle, Manager};
@@ -23,6 +27,8 @@ pub struct AppState {
     /// Selected audio output device name. `None` = system default.
     /// Used by `connect_audio_relay` and TTS pipeline when opening sinks.
     pub audio_output_device: Mutex<Option<String>>,
+    /// Port of the localhost media streaming proxy (set during setup).
+    pub media_proxy_port: AtomicU16,
 }
 
 pub fn build_app_state() -> AppState {
@@ -69,6 +75,7 @@ pub fn build_app_state() -> AppState {
         huddle_state: Mutex::new(HuddleState::default()),
         app_handle: Mutex::new(None),
         audio_output_device: Mutex::new(None),
+        media_proxy_port: AtomicU16::new(0),
     }
 }
 

desktop/src-tauri/src/commands/identity.rs

@@ -37,6 +37,13 @@ pub fn get_relay_http_url() -> String {
     relay_api_base_url()
 }
 
+#[tauri::command]
+pub fn get_media_proxy_port(state: State<'_, AppState>) -> u16 {
+    state
+        .media_proxy_port
+        .load(std::sync::atomic::Ordering::Relaxed)
+}
+
 #[tauri::command]
 pub fn sign_event(
     kind: u16,

desktop/src-tauri/src/lib.rs

@@ -3,6 +3,7 @@ mod commands;
 mod events;
 mod huddle;
 mod managed_agents;
+mod media_proxy;
 mod migration;
 mod models;
 mod relay;
@@ -28,7 +29,7 @@ use std::sync::{
     atomic::{AtomicBool, Ordering},
     Arc,
 };
-use tauri::{http, Emitter, Manager, RunEvent};
+use tauri::{Emitter, Manager, RunEvent};
 use tauri_plugin_window_state::StateFlags;
 
 fn shutdown_managed_agents(app: &tauri::AppHandle) -> Result<(), String> {
@@ -150,133 +151,6 @@ fn shutdown_managed_agents(app: &tauri::AppHandle) -> Result<(), String> {
     Ok(())
 }
 
-/// Defense-in-depth cap: refuse to buffer responses larger than this into RAM.
-/// Range requests (≤16 MiB from server) always fit. Full GETs for huge videos
-/// get a clear 413 instead of OOM — the <video> element always uses range
-/// requests for seeking, so this only catches edge cases.
-const MAX_PROXY_RESPONSE: u64 = 20 * 1024 * 1024;
-
-/// Proxy media requests through the Rust backend so they traverse the WARP tunnel.
-///
-/// WKWebView's networking stack bypasses WARP, causing 403s from Cloudflare Access.
-/// This handler routes `sprout-media://localhost/{path}` through reqwest, which
-/// runs in the Tauri process and goes through WARP.
-async fn handle_sprout_media(
-    app: &tauri::AppHandle,
-    request: &http::Request<Vec<u8>>,
-) -> http::Response<Vec<u8>> {
-    let state = app.state::<AppState>();
-    let base = relay::relay_api_base_url();
-
-    // Preserve path + query (thumbnails may have query params).
-    // Only proxy /media/ paths — reject anything else.
-    let path_and_query = request
-        .uri()
-        .path_and_query()
-        .map(|pq| pq.as_str())
-        .unwrap_or("/");
-
-    if !path_and_query.starts_with("/media/") {
-        return error_response(404, "not found");
-    }
-
-    let has_range = request.headers().contains_key("range");
-    let upstream_url = format!("{base}{path_and_query}");
-
-    // Forward Range header if present — enables video seeking through the proxy.
-    let mut upstream = state
-        .http_client
-        .get(&upstream_url)
-        .timeout(std::time::Duration::from_secs(60));
-    if let Some(range) = request.headers().get("range") {
-        if let Ok(v) = range.to_str() {
-            upstream = upstream.header("range", v);
-        }
-    }
-
-    let result = upstream.send().await;
-
-    match result {
-        Ok(resp) => {
-            let status = resp.status().as_u16();
-            let content_type = resp
-                .headers()
-                .get("content-type")
-                .and_then(|v| v.to_str().ok())
-                .unwrap_or("application/octet-stream")
-                .to_string();
-
-            // Propagate range-related headers so <video> seeking works.
-            let content_range = resp
-                .headers()
-                .get("content-range")
-                .and_then(|v| v.to_str().ok())
-                .map(|s| s.to_string());
-            let accept_ranges = resp
-                .headers()
-                .get("accept-ranges")
-                .and_then(|v| v.to_str().ok())
-                .map(|s| s.to_string());
-            let content_length = resp
-                .headers()
-                .get("content-length")
-                .and_then(|v| v.to_str().ok())
-                .map(|s| s.to_string());
-
-            // OOM guard: if this is a non-range GET and the upstream body is
-            // larger than our cap, bail with 413 instead of buffering into RAM.
-            // Tauri's protocol handler requires Vec<u8> so we can't truly stream.
-            if !has_range {
-                if let Some(ref cl) = content_length {
-                    if let Ok(len) = cl.parse::<u64>() {
-                        if len > MAX_PROXY_RESPONSE {
-                            return error_response(
-                                413,
-                                "response too large — use range requests for video playback",
-                            );
-                        }
-                    }
-                }
-            }
-
-            match resp.bytes().await {
-                Ok(bytes) => {
-                    let mut builder = http::Response::builder()
-                        .status(status)
-                        .header("content-type", &content_type);
-                    if let Some(ref cr) = content_range {
-                        builder = builder.header("content-range", cr);
-                    }
-                    if let Some(ref ar) = accept_ranges {
-                        builder = builder.header("accept-ranges", ar);
-                    }
-                    if let Some(ref cl) = content_length {
-                        builder = builder.header("content-length", cl);
-                    }
-                    builder
-                        .body(bytes.to_vec())
-                        .unwrap_or_else(|_| error_response(500, "response build failed"))
-                }
-                Err(_) => error_response(502, "failed to read upstream body"),
-            }
-        }
-        Err(_) => error_response(502, "upstream request failed"),
-    }
-}
-
-fn error_response(status: u16, msg: &str) -> http::Response<Vec<u8>> {
-    http::Response::builder()
-        .status(status)
-        .header("content-type", "text/plain")
-        .body(msg.as_bytes().to_vec())
-        .unwrap_or_else(|_| {
-            http::Response::builder()
-                .status(500)
-                .body(Vec::new())
-                .unwrap()
-        })
-}
-
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     let builder = tauri::Builder::default()
@@ -384,7 +258,7 @@ pub fn run() {
         .register_asynchronous_uri_scheme_protocol("sprout-media", |ctx, request, responder| {
             let app = ctx.app_handle().clone();
             tauri::async_runtime::spawn(async move {
-                let response = handle_sprout_media(&app, &request).await;
+                let response = media_proxy::handle_sprout_media(&app, &request).await;
                 responder.respond(response);
             });
         })
@@ -415,6 +289,19 @@ pub fn run() {
             resolve_persisted_identity(&app_handle, &state)
                 .map_err(|e| -> Box<dyn std::error::Error> { e.into() })?;
 
+            // Start the localhost media streaming proxy. Uses the shared HTTP
+            // client so WARP tunnelling applies. The port is stored in AppState
+            // and exposed to the frontend via the `get_media_proxy_port` command.
+            let proxy_client = state.http_client.clone();
+            let proxy_handle = app_handle.clone();
+            tauri::async_runtime::spawn(async move {
+                let port = media_proxy::spawn_media_proxy(proxy_client).await;
+                let state = proxy_handle.state::<AppState>();
+                state
+                    .media_proxy_port
+                    .store(port, std::sync::atomic::Ordering::Relaxed);
+            });
+
             // Create the Sprout nest (~/.sprout) before agents are restored,
             // so default_agent_workdir() resolves to the nest directory.
             // Non-fatal: agents fall back to $HOME if nest creation fails.
@@ -466,6 +353,7 @@ pub fn run() {
             set_presence,
             get_relay_ws_url,
             get_relay_http_url,
+            get_media_proxy_port,
             discover_acp_providers,
             discover_managed_agent_prereqs,
             sign_event,

desktop/src-tauri/src/media_proxy.rs

@@ -0,0 +1,258 @@
+use axum::{
+    body::Body,
+    extract::{Request, State as AxumState},
+    http::{HeaderMap, HeaderValue, StatusCode},
+    response::{IntoResponse, Response},
+    routing::get,
+    Router,
+};
+use futures_util::TryStreamExt;
+use tauri::http;
+use tokio::net::TcpListener;
+
+use crate::app_state::AppState;
+use crate::relay;
+
+/// Defense-in-depth cap: refuse to buffer responses larger than this into RAM.
+/// Range requests (≤16 MiB from server) always fit. Full GETs for huge videos
+/// get a clear 413 instead of OOM — the <video> element always uses range
+/// requests for seeking, so this only catches edge cases.
+const MAX_PROXY_RESPONSE: u64 = 20 * 1024 * 1024;
+
+#[derive(Clone)]
+struct ProxyState {
+    client: reqwest::Client,
+    base_url: String,
+}
+
+async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) -> Response {
+    // Allow requests with no Origin (e.g. <video> element fetches) or from
+    // the Tauri webview origin. Blocks cross-origin JS fetches from other
+    // tabs/apps while letting HTML media resource loads through.
+    let origin = req
+        .headers()
+        .get("origin")
+        .and_then(|v| v.to_str().ok())
+        .unwrap_or("");
+    if !origin.is_empty() && origin != "tauri://localhost" && origin != "http://tauri.localhost" {
+        return (StatusCode::FORBIDDEN, "forbidden: invalid origin").into_response();
+    }
+
+    let path_and_query = req
+        .uri()
+        .path_and_query()
+        .map(|pq| pq.as_str())
+        .unwrap_or("/");
+
+    // Strip the /media/ prefix check — we only mount on /media/
+    let upstream_url = format!("{}{path_and_query}", state.base_url);
+
+    let has_range = req.headers().contains_key("range");
+
+    let mut upstream = state
+        .client
+        .get(&upstream_url)
+        .timeout(std::time::Duration::from_secs(120));
+
+    if let Some(range) = req.headers().get("range") {
+        if let Ok(v) = range.to_str() {
+            upstream = upstream.header("range", v);
+        }
+    }
+
+    let resp = match upstream.send().await {
+        Ok(r) => r,
+        Err(_) => {
+            return (StatusCode::BAD_GATEWAY, "upstream request failed").into_response();
+        }
+    };
+
+    let status =
+        StatusCode::from_u16(resp.status().as_u16()).unwrap_or(StatusCode::INTERNAL_SERVER_ERROR);
+
+    let mut headers = HeaderMap::new();
+    for key in &[
+        "content-type",
+        "content-range",
+        "accept-ranges",
+        "content-length",
+    ] {
+        if let Some(val) = resp.headers().get(*key) {
+            if let Ok(v) = HeaderValue::from_bytes(val.as_bytes()) {
+                headers.insert(*key, v);
+            }
+        }
+    }
+
+    // OOM guard for non-range full GETs (same 20 MB cap as the protocol handler).
+    if !has_range {
+        if let Some(cl) = headers.get("content-length") {
+            if let Ok(len) = cl.to_str().unwrap_or("0").parse::<u64>() {
+                if len > MAX_PROXY_RESPONSE {
+                    return (
+                        StatusCode::PAYLOAD_TOO_LARGE,
+                        "response too large — use range requests for video playback",
+                    )
+                        .into_response();
+                }
+            }
+        }
+    }
+
+    // Stream the body — no buffering.
+    let stream = resp
+        .bytes_stream()
+        .map_err(|e| std::io::Error::new(std::io::ErrorKind::Other, e));
+    let body = Body::from_stream(stream);
+
+    (status, headers, body).into_response()
+}
+
+/// Spawn a localhost HTTP proxy that streams media via reqwest, avoiding the
+/// Tauri protocol handler's requirement to buffer the entire response into
+/// `Vec<u8>`. Returns the OS-assigned port.
+pub async fn spawn_media_proxy(http_client: reqwest::Client) -> u16 {
+    let proxy_state = ProxyState {
+        client: http_client,
+        base_url: relay::relay_api_base_url(),
+    };
+
+    let app = Router::new()
+        .route("/media/{*path}", get(proxy_handler))
+        .with_state(proxy_state);
+
+    let listener = TcpListener::bind("127.0.0.1:0")
+        .await
+        .expect("failed to bind media proxy");
+    let port = listener.local_addr().unwrap().port();
+
+    tokio::spawn(async move {
+        axum::serve(listener, app).await.ok();
+    });
+
+    eprintln!("sprout-desktop: media proxy listening on 127.0.0.1:{port}");
+    port
+}
+
+/// Proxy media requests through the Rust backend so they traverse the WARP tunnel.
+///
+/// WKWebView's networking stack bypasses WARP, causing 403s from Cloudflare Access.
+/// This handler routes `sprout-media://localhost/{path}` through reqwest, which
+/// runs in the Tauri process and goes through WARP.
+pub async fn handle_sprout_media(
+    app: &tauri::AppHandle,
+    request: &http::Request<Vec<u8>>,
+) -> http::Response<Vec<u8>> {
+    use tauri::Manager;
+
+    let state = app.state::<AppState>();
+    let base = relay::relay_api_base_url();
+
+    // Preserve path + query (thumbnails may have query params).
+    // Only proxy /media/ paths — reject anything else.
+    let path_and_query = request
+        .uri()
+        .path_and_query()
+        .map(|pq| pq.as_str())
+        .unwrap_or("/");
+
+    if !path_and_query.starts_with("/media/") {
+        return error_response(404, "not found");
+    }
+
+    let has_range = request.headers().contains_key("range");
+    let upstream_url = format!("{base}{path_and_query}");
+
+    // Forward Range header if present — enables video seeking through the proxy.
+    let mut upstream = state
+        .http_client
+        .get(&upstream_url)
+        .timeout(std::time::Duration::from_secs(60));
+    if let Some(range) = request.headers().get("range") {
+        if let Ok(v) = range.to_str() {
+            upstream = upstream.header("range", v);
+        }
+    }
+
+    let result = upstream.send().await;
+
+    match result {
+        Ok(resp) => {
+            let status = resp.status().as_u16();
+            let content_type = resp
+                .headers()
+                .get("content-type")
+                .and_then(|v| v.to_str().ok())
+                .unwrap_or("application/octet-stream")
+                .to_string();
+
+            // Propagate range-related headers so <video> seeking works.
+            let content_range = resp
+                .headers()
+                .get("content-range")
+                .and_then(|v| v.to_str().ok())
+                .map(|s| s.to_string());
+            let accept_ranges = resp
+                .headers()
+                .get("accept-ranges")
+                .and_then(|v| v.to_str().ok())
+                .map(|s| s.to_string());
+            let content_length = resp
+                .headers()
+                .get("content-length")
+                .and_then(|v| v.to_str().ok())
+                .map(|s| s.to_string());
+
+            // OOM guard: if this is a non-range GET and the upstream body is
+            // larger than our cap, bail with 413 instead of buffering into RAM.
+            // Tauri's protocol handler requires Vec<u8> so we can't truly stream.
+            if !has_range {
+                if let Some(ref cl) = content_length {
+                    if let Ok(len) = cl.parse::<u64>() {
+                        if len > MAX_PROXY_RESPONSE {
+                            return error_response(
+                                413,
+                                "response too large — use range requests for video playback",
+                            );
+                        }
+                    }
+                }
+            }
+
+            match resp.bytes().await {
+                Ok(bytes) => {
+                    let mut builder = http::Response::builder()
+                        .status(status)
+                        .header("content-type", &content_type);
+                    if let Some(ref cr) = content_range {
+                        builder = builder.header("content-range", cr);
+                    }
+                    if let Some(ref ar) = accept_ranges {
+                        builder = builder.header("accept-ranges", ar);
+                    }
+                    if let Some(ref cl) = content_length {
+                        builder = builder.header("content-length", cl);
+                    }
+                    builder
+                        .body(bytes.to_vec())
+                        .unwrap_or_else(|_| error_response(500, "response build failed"))
+                }
+                Err(_) => error_response(502, "failed to read upstream body"),
+            }
+        }
+        Err(_) => error_response(502, "upstream request failed"),
+    }
+}
+
+fn error_response(status: u16, msg: &str) -> http::Response<Vec<u8>> {
+    http::Response::builder()
+        .status(status)
+        .header("content-type", "text/plain")
+        .body(msg.as_bytes().to_vec())
+        .unwrap_or_else(|_| {
+            http::Response::builder()
+                .status(500)
+                .body(Vec::new())
+                .unwrap()
+        })
+}

desktop/src/shared/lib/mediaUrl.ts

@@ -1,9 +1,12 @@
 /**
- * Rewrite relay media URLs to use the sprout-media:// custom protocol.
+ * Rewrite relay media URLs to use the localhost streaming proxy.
  *
  * WKWebView's networking stack bypasses WARP, so direct <img src> requests
- * to the relay get 403'd by Cloudflare Access. The sprout-media:// scheme
- * routes fetches through the Rust backend, which goes through WARP.
+ * to the relay get 403'd by Cloudflare Access. The localhost proxy routes
+ * fetches through the Rust backend (via reqwest), which goes through WARP.
+ *
+ * For video, the proxy streams via axum — no buffering the entire file.
+ * Images and other media also benefit from this path.
  *
  * Detection is path-based: /media/{64-hex-chars}.{ext} is a Blossom BUD-01
  * content-addressed URL. The 64-char lowercase hex SHA-256 hash makes this
@@ -12,17 +15,65 @@
  * eliminating race conditions with first render.
  */
 
+import { invoke } from "@tauri-apps/api/core";
+
 // Matches: https://anything.com/media/{64-hex}.{ext}
 // Also matches thumbnails: /media/{64-hex}.thumb.jpg
 const RELAY_MEDIA_RE =
   /^(?:https?:\/\/[^/]+)\/media\/([\da-f]{64}(?:\.thumb)?\.(?:jpg|png|gif|webp|mp4)(?:\?.*)?)$/;
 
+/** Cached proxy port — fetched once from the Tauri backend. */
+let cachedPort: number | null = null;
+let portPromise: Promise<number | null> | null = null;
+
+const POLL_INTERVAL_MS = 100;
+const POLL_TIMEOUT_MS = 5000;
+
+/**
+ * Poll `get_media_proxy_port` until we get a non-zero port or timeout.
+ * Returns the port, or null if the proxy never came up.
+ */
+async function fetchProxyPort(): Promise<number | null> {
+  const deadline = Date.now() + POLL_TIMEOUT_MS;
+  while (Date.now() < deadline) {
+    try {
+      const port = await invoke<number>("get_media_proxy_port");
+      if (port > 0) {
+        cachedPort = port;
+        return port;
+      }
+    } catch {
+      // invoke failed (e.g. Tauri IPC not ready yet) — keep retrying
+    }
+    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));
+  }
+  return null;
+}
+
+/** Eagerly fetch the port at module load so it's ready by first render. */
+// The try/catch inside fetchProxyPort handles non-Tauri environments gracefully
+// (invoke will throw, we retry until timeout, then give up — no side effects).
+if (typeof window !== "undefined") {
+  portPromise = fetchProxyPort();
+}
+
 /**
  * If `url` looks like a Blossom relay media URL, rewrite it to go through
- * the sprout-media:// custom protocol. Otherwise return it unchanged.
+ * the localhost streaming proxy. Falls back to sprout-media:// if the proxy
+ * port isn't available yet.
  */
 export function rewriteRelayUrl(url: string): string {
   const m = RELAY_MEDIA_RE.exec(url);
   if (!m) return url;
+
+  if (cachedPort && cachedPort > 0) {
+    return `http://localhost:${cachedPort}/media/${m[1]}`;
+  }
+
+  // Kick off fetch if we haven't yet.
+  if (!portPromise && typeof window !== "undefined") {
+    portPromise = fetchProxyPort();
+  }
+
   return `sprout-media://localhost/media/${m[1]}`;
 }

desktop/src/shared/ui/VideoPlayer.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { AlertCircle, Play } from "lucide-react";
+
+import { cn } from "@/shared/lib/cn";
+
+import { Spinner } from "./spinner";
+
+type VideoPlayerState = "idle" | "loading" | "playing" | "error";
+
+type VideoPlayerProps = {
+  src: string;
+  poster?: string;
+};
+
+function OverlayIcon({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm">
+      {children}
+    </div>
+  );
+}
+
+export function VideoPlayer({ src, poster }: VideoPlayerProps) {
+  const [state, setState] = React.useState<VideoPlayerState>("idle");
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+
+  const handlePlay = React.useCallback(() => {
+    setState("loading");
+    const video = videoRef.current;
+    if (video) {
+      video.load();
+      video
+        .play()
+        .then(() => {
+          setState("playing");
+        })
+        .catch((error) => {
+          if (
+            error instanceof DOMException &&
+            error.name === "NotAllowedError"
+          ) {
+            setState("playing");
+          } else {
+            setState("error");
+          }
+        });
+    }
+  }, []);
+
+  const handleError = React.useCallback(() => {
+    if (state === "loading") {
+      setState("error");
+    }
+  }, [state]);
+
+  return (
+    <div className="mt-3 flex max-w-sm items-center justify-center overflow-hidden rounded-2xl border border-border/70 bg-muted/40">
+      {state !== "playing" && (
+        <div className="relative flex items-center justify-center">
+          {poster ? (
+            <img
+              src={poster}
+              alt=""
+              className="max-h-64 max-w-full object-contain"
+            />
+          ) : (
+            <div className="flex h-48 w-72 items-center justify-center bg-muted/60" />
+          )}
+          {state === "idle" && (
+            <button
+              type="button"
+              aria-label="Play video"
+              className="absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity hover:opacity-80"
+              onClick={handlePlay}
+            >
+              <OverlayIcon>
+                <Play className="h-7 w-7 fill-white text-white" />
+              </OverlayIcon>
+            </button>
+          )}
+          {state === "loading" && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <OverlayIcon>
+                <Spinner className="text-white" size={28} />
+              </OverlayIcon>
+            </div>
+          )}
+          {state === "error" && (
+            <button
+              type="button"
+              aria-label="Retry loading video"
+              className="absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-2 transition-opacity hover:opacity-80"
+              onClick={handlePlay}
+            >
+              <OverlayIcon>
+                <AlertCircle className="h-7 w-7 text-white" />
+              </OverlayIcon>
+              <span className="rounded-md bg-black/50 px-2 py-1 text-xs text-white backdrop-blur-sm">
+                Failed to load — tap to retry
+              </span>
+            </button>
+          )}
+        </div>
+      )}
+      {/* biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available */}
+      <video
+        ref={videoRef}
+        preload="metadata"
+        controls={state === "playing"}
+        className={cn(
+          "max-h-64 max-w-full object-contain",
+          state !== "playing" && "hidden",
+        )}
+        src={src}
+        onError={handleError}
+      />
+    </div>
+  );
+}

desktop/src/shared/ui/markdown.tsx

@@ -19,6 +19,7 @@ import {
   isImageOnlyParagraph,
   shallowArrayEqual,
 } from "./markdownUtils";
+import { VideoPlayer } from "./VideoPlayer";
 
 type ImetaLookup = Map<string, { image?: string; thumb?: string }>;
 
@@ -129,16 +130,63 @@ function createMarkdownComponents(
           ? rewriteRelayUrl(posterUrl)
           : undefined;
         return (
-          <div className="mt-3 flex max-w-sm items-center justify-center overflow-hidden rounded-2xl border border-border/70 bg-muted/40">
-            {/* biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available */}
-            <video
-              controls
-              preload="metadata"
-              poster={resolvedPoster}
-              className="max-h-64 max-w-full object-contain"
-              src={resolvedSrc}
-            />
-          </div>
+          <DialogPrimitive.Root>
+            <DialogPrimitive.Trigger asChild>
+              <div className="cursor-pointer transition-opacity hover:opacity-90">
+                <VideoPlayer
+                  key={resolvedSrc}
+                  src={resolvedSrc}
+                  poster={resolvedPoster}
+                />
+              </div>
+            </DialogPrimitive.Trigger>
+            <DialogPrimitive.Portal>
+              <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+              <DialogPrimitive.Content
+                className="fixed inset-0 z-50 flex items-center justify-center p-8"
+                onPointerDownOutside={(e) => e.preventDefault()}
+                onInteractOutside={(e) => e.preventDefault()}
+              >
+                <DialogPrimitive.Title className="sr-only">
+                  Video preview
+                </DialogPrimitive.Title>
+                <DialogPrimitive.Description className="sr-only">
+                  Full-size video preview. Press Escape or click outside the
+                  video to close.
+                </DialogPrimitive.Description>
+                <DialogPrimitive.Close
+                  className="absolute inset-0 cursor-default"
+                  aria-label="Close lightbox"
+                />
+                {/* biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available */}
+                <video
+                  controls
+                  autoPlay
+                  src={resolvedSrc}
+                  poster={resolvedPoster}
+                  className="relative max-h-[90vh] max-w-[90vw] rounded-lg"
+                />
+                <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full bg-black/50 p-2 text-white/80 transition-colors hover:bg-black/70 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/30">
+                  <svg
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              </DialogPrimitive.Content>
+            </DialogPrimitive.Portal>
+          </DialogPrimitive.Root>
         );
       }
       return (