fix web performance

Cargo.lock

@@ -276,9 +276,13 @@ name = "assets"
 version = "1.0.0"
 dependencies = [
  "anyhow",
+ "futures",
  "gpui",
  "log",
+ "reqwest",
  "rust-embed",
+ "wasm-bindgen-futures",
+ "web-sys",
 ]
 
 [[package]]
@@ -1441,6 +1445,7 @@ dependencies = [
  "gpui_platform",
  "gpui_web",
  "instant",
+ "js-sys",
  "log",
  "person",
  "settings",
@@ -1450,6 +1455,8 @@ dependencies = [
  "ui",
  "universal-time 0.3.1 (git+https://github.com/shadowylab/universal-time)",
  "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
  "workspace",
 ]
 
@@ -4977,6 +4984,7 @@ dependencies = [
  "anyhow",
  "common",
  "flume 0.11.1",
+ "futures",
  "gpui",
  "instant",
  "log",
@@ -8929,7 +8937,6 @@ version = "1.0.0"
 dependencies = [
  "anyhow",
  "auto_update",
- "browser-signer-proxy",
  "chat",
  "chat_ui",
  "common",

Cargo.toml

@@ -43,7 +43,6 @@ smallvec = "1.14.0"
 smol = "2"
 webbrowser = "1.0.4"
 tracing-subscriber = { version = "0.3.18", features = ["fmt"] }
-errno = { version = "0.3.14", default-features = false }
 instant = "0.1"
 
 [patch.crates-io]

crates/assets/Cargo.toml

@@ -8,4 +8,12 @@ publish.workspace = true
 gpui.workspace = true
 anyhow.workspace = true
 log.workspace = true
+
+[target.'cfg(not(target_family = "wasm"))'.dependencies]
 rust-embed.workspace = true
+
+[target.'cfg(target_family = "wasm")'.dependencies]
+futures.workspace = true
+reqwest = { version = "0.12", default-features = false }
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3", features = ["Window", "Location"] }

crates/assets/build.rs

@@ -0,0 +1,58 @@
+//! Generates a compile-time manifest of the asset files served on wasm, so
+//! the web entrypoint can preload them before the first frame.
+//!
+//! `WASM_ASSETS` is emitted into `OUT_DIR` and included by
+//! `src/wasm_assets.rs` on wasm targets. Native builds keep using
+//! `rust-embed` and ignore it.
+
+use std::path::Path;
+use std::{env, fs};
+
+fn main() {
+    let manifest_dir = env::var("CARGO_MANIFEST_DIR").expect("CARGO_MANIFEST_DIR not set by cargo");
+    let assets_dir = Path::new(&manifest_dir).join("../../assets");
+
+    let mut paths = Vec::new();
+    for dir in ["icons", "brand"] {
+        let dir_path = assets_dir.join(dir);
+        let entries = fs::read_dir(&dir_path).unwrap_or_else(|error| {
+            panic!(
+                "expected asset directory {} to exist: {error}",
+                dir_path.display()
+            )
+        });
+
+        for entry in entries {
+            let entry = entry.expect("failed to read asset directory entry");
+            if entry.file_type().is_ok_and(|t| t.is_file()) {
+                let name = entry.file_name().to_string_lossy().into_owned();
+                if !name.starts_with('.') {
+                    paths.push(format!("{dir}/{name}"));
+                }
+            }
+        }
+    }
+    paths.sort();
+
+    let manifest = format!(
+        "/// Asset files served by the wasm asset loader. Generated by build.rs.\npub const WASM_ASSETS: &[&str] = &[\n{}\n];\n",
+        paths
+            .iter()
+            .map(|path| format!("    \"{path}\","))
+            .collect::<Vec<_>>()
+            .join("\n")
+    );
+
+    let out_dir = env::var("OUT_DIR").expect("OUT_DIR not set by cargo");
+    fs::write(Path::new(&out_dir).join("wasm_assets.rs"), manifest)
+        .expect("failed to write wasm asset manifest");
+
+    // Rerun when the asset files change (adding/removing files updates the
+    // directory mtime).
+    for dir in ["icons", "brand"] {
+        if let Ok(canonical) = assets_dir.join(dir).canonicalize() {
+            println!("cargo:rerun-if-changed={}", canonical.display());
+        }
+    }
+    println!("cargo:rerun-if-changed=build.rs");
+}

crates/assets/src/lib.rs

@@ -1,51 +1,19 @@
-use anyhow::Context;
-use gpui::{App, AssetSource, Result, SharedString};
-use rust_embed::RustEmbed;
+//! Application assets for Coop.
+//!
+//! ## Platform differences
+//!
+//! - **Native (desktop)**: assets are embedded into the binary at compile time
+//!   with `rust-embed`.
+//! - **WASM (web)**: assets are downloaded on demand from `{endpoint}/assets/{path}`
+//!   and cached in memory. This keeps the WASM bundle size small.
 
-#[derive(RustEmbed)]
-#[folder = "../../assets"]
-#[include = "fonts/**/*"]
-#[include = "brand/**/*"]
-#[include = "icons/**/*"]
-#[include = "themes/**/*"]
-#[exclude = "*.DS_Store"]
-pub struct Assets;
+#[cfg(not(target_family = "wasm"))]
+mod native_assets;
 
-impl AssetSource for Assets {
-    fn load(&self, path: &str) -> Result<Option<std::borrow::Cow<'static, [u8]>>> {
-        Self::get(path)
-            .map(|f| Some(f.data))
-            .with_context(|| format!("loading asset at path {path:?}"))
-    }
+#[cfg(target_family = "wasm")]
+mod wasm_assets;
 
-    fn list(&self, path: &str) -> Result<Vec<SharedString>> {
-        Ok(Self::iter()
-            .filter_map(|p| {
-                if p.starts_with(path) {
-                    Some(p.into())
-                } else {
-                    None
-                }
-            })
-            .collect())
-    }
-}
-
-impl Assets {
-    /// Populate the [`TextSystem`] of the given [`AppContext`] with all `.ttf` fonts in the `fonts` directory.
-    pub fn load_fonts(&self, cx: &App) -> anyhow::Result<()> {
-        let font_paths = self.list("fonts")?;
-        let mut embedded_fonts = Vec::new();
-        for font_path in font_paths {
-            if font_path.ends_with(".ttf") {
-                let font_bytes = cx
-                    .asset_source()
-                    .load(&font_path)?
-                    .expect("Assets should never return None");
-                embedded_fonts.push(font_bytes);
-            }
-        }
-
-        cx.text_system().add_fonts(embedded_fonts)
-    }
-}
+#[cfg(not(target_family = "wasm"))]
+pub use native_assets::Assets;
+#[cfg(target_family = "wasm")]
+pub use wasm_assets::Assets;

crates/assets/src/native_assets.rs

@@ -0,0 +1,63 @@
+use std::borrow::Cow;
+
+use anyhow::Context;
+use gpui::{App, AssetSource, Result, SharedString};
+use rust_embed::RustEmbed;
+
+/// Native implementation using `rust-embed`: assets are embedded into the
+/// binary at compile time.
+#[derive(RustEmbed)]
+#[folder = "../../assets"]
+#[include = "fonts/**/*"]
+#[include = "brand/**/*"]
+#[include = "icons/**/*"]
+#[include = "themes/**/*"]
+#[exclude = "*.DS_Store"]
+pub struct Assets;
+
+impl Assets {
+    /// Create a new Assets instance. The endpoint parameter is ignored for
+    /// native builds.
+    pub fn new(_endpoint: impl Into<SharedString>) -> Self {
+        Self
+    }
+}
+
+impl AssetSource for Assets {
+    fn load(&self, path: &str) -> Result<Option<Cow<'static, [u8]>>> {
+        Self::get(path)
+            .map(|f| Some(f.data))
+            .with_context(|| format!("loading asset at path {path:?}"))
+    }
+
+    fn list(&self, path: &str) -> Result<Vec<SharedString>> {
+        Ok(Self::iter()
+            .filter_map(|p| {
+                if p.starts_with(path) {
+                    Some(p.into())
+                } else {
+                    None
+                }
+            })
+            .collect())
+    }
+}
+
+impl Assets {
+    /// Populate the [`TextSystem`] of the given [`AppContext`] with all `.ttf` fonts in the `fonts` directory.
+    pub fn load_fonts(&self, cx: &App) -> anyhow::Result<()> {
+        let font_paths = self.list("fonts")?;
+        let mut embedded_fonts = Vec::new();
+        for font_path in font_paths {
+            if font_path.ends_with(".ttf") {
+                let font_bytes = cx
+                    .asset_source()
+                    .load(&font_path)?
+                    .expect("Assets should never return None");
+                embedded_fonts.push(font_bytes);
+            }
+        }
+
+        cx.text_system().add_fonts(embedded_fonts)
+    }
+}

crates/assets/src/wasm_assets.rs

@@ -0,0 +1,176 @@
+use std::borrow::Cow;
+use std::collections::HashMap;
+use std::sync::{Arc, RwLock};
+
+use gpui::{AssetSource, Result, SharedString};
+use wasm_bindgen_futures::spawn_local;
+
+// Compile-time manifest of every asset file served on wasm (see build.rs).
+include!(concat!(env!("OUT_DIR"), "/wasm_assets.rs"));
+
+/// Path prefixes that the wasm loader serves. Fonts and themes are not
+/// downloaded on web: the web platform bundles its own fonts, and the theme
+/// registry falls back to the built-in default theme.
+const SERVED_PREFIXES: [&str; 2] = ["icons/", "brand/"];
+
+/// WASM implementation - download assets on demand.
+///
+/// Assets are fetched from `{endpoint}/assets/{path}` and cached in memory
+/// after the first successful download. This keeps the WASM bundle small
+/// while still providing the full asset set at runtime.
+pub struct Assets {
+    endpoint: SharedString,
+    cache: Arc<RwLock<HashMap<String, Vec<u8>>>>,
+    pending: Arc<RwLock<HashMap<String, bool>>>,
+}
+
+impl Assets {
+    /// Create a new Assets instance backed by the given endpoint.
+    ///
+    /// Assets are resolved as `{endpoint}/assets/{path}`. An empty endpoint
+    /// resolves against the current page origin (e.g. `/assets/icons/foo.svg`).
+    pub fn new(endpoint: impl Into<SharedString>) -> Self {
+        Self {
+            endpoint: endpoint.into(),
+            cache: Arc::new(RwLock::new(HashMap::new())),
+            pending: Arc::new(RwLock::new(HashMap::new())),
+        }
+    }
+
+    /// Absolute URL of the given asset path.
+    ///
+    /// `reqwest` requires absolute URLs, so a relative endpoint is resolved
+    /// against the current page origin.
+    fn asset_url(&self, path: &str) -> String {
+        let endpoint = if self.endpoint.is_empty() {
+            web_sys::window()
+                .and_then(|window| window.location().origin().ok())
+                .unwrap_or_default()
+        } else {
+            self.endpoint.to_string()
+        };
+        format!("{endpoint}/assets/{path}")
+    }
+
+    /// Download every asset in [`WASM_ASSETS`] into the cache, in parallel,
+    /// before the app starts.
+    ///
+    /// Preloading is required for two reasons:
+    /// - Assets loaded through GPUI's [`gpui::Asset`] machinery (e.g. `img()`)
+    ///   cache failed loads and never retry them.
+    /// - SVG painting only re-attempts an empty load on the next repaint, so
+    ///   an icon would stay invisible until the window happens to redraw.
+    pub async fn preload(&self) {
+        let downloads = WASM_ASSETS.iter().map(|path| async move {
+            let result = reqwest::get(self.asset_url(path)).await;
+            match result {
+                Ok(response) if response.status().is_success() => match response.bytes().await {
+                    Ok(bytes) => {
+                        if let Ok(mut cache) = self.cache.write() {
+                            cache.insert(path.to_string(), bytes.to_vec());
+                        }
+                    }
+                    Err(e) => {
+                        log::warn!("Failed to read asset {}: {}", path, e);
+                    }
+                },
+                Ok(response) => {
+                    log::warn!(
+                        "Failed to download asset {}: HTTP {}",
+                        path,
+                        response.status()
+                    );
+                }
+                Err(e) => {
+                    log::warn!("Failed to fetch asset {}: {}", path, e);
+                }
+            }
+        });
+        futures::future::join_all(downloads).await;
+    }
+}
+
+impl AssetSource for Assets {
+    fn load(&self, path: &str) -> Result<Option<Cow<'static, [u8]>>> {
+        if path.is_empty() {
+            return Ok(None);
+        }
+
+        // Only serve paths the web build actually ships.
+        if !SERVED_PREFIXES
+            .iter()
+            .any(|prefix| path.starts_with(prefix))
+        {
+            return Ok(None);
+        }
+
+        // Serve from the in-memory cache when available.
+        if let Ok(cache) = self.cache.read() {
+            if let Some(data) = cache.get(path) {
+                return Ok(Some(Cow::Owned(data.clone())));
+            }
+        }
+
+        // Kick off a single download per path; concurrent requests for the
+        // same path share it.
+        let is_pending = self
+            .pending
+            .read()
+            .map(|pending| pending.contains_key(path))
+            .unwrap_or(false);
+
+        if !is_pending {
+            if let Ok(mut pending) = self.pending.write() {
+                pending.insert(path.to_string(), true);
+            }
+
+            let url = self.asset_url(path);
+            let path_clone = path.to_string();
+            let cache = self.cache.clone();
+            let pending = self.pending.clone();
+
+            spawn_local(async move {
+                match reqwest::get(&url).await {
+                    Ok(response) if response.status().is_success() => {
+                        match response.bytes().await {
+                            Ok(bytes) => {
+                                if let Ok(mut cache) = cache.write() {
+                                    cache.insert(path_clone.clone(), bytes.to_vec());
+                                }
+                            }
+                            Err(e) => {
+                                log::warn!("Failed to read asset {}: {}", path_clone, e);
+                            }
+                        }
+                    }
+                    Ok(response) => {
+                        log::warn!(
+                            "Failed to download asset {}: HTTP {}",
+                            path_clone,
+                            response.status()
+                        );
+                    }
+                    Err(e) => {
+                        log::warn!("Failed to fetch asset {}: {}", path_clone, e);
+                    }
+                }
+
+                // Allow retrying failed downloads on subsequent requests.
+                if let Ok(mut pending) = pending.write() {
+                    pending.remove(&path_clone);
+                }
+            });
+        }
+
+        // The asset is not available yet. GPUI's SVG atlas does not cache
+        // empty loads, so the next repaint will call `load` again and find
+        // the asset in the cache once the download completes.
+        Ok(None)
+    }
+
+    fn list(&self, _path: &str) -> Result<Vec<SharedString>> {
+        // The asset manifest is not available at runtime on web; embedded
+        // directories are not listed.
+        Ok(Vec::new())
+    }
+}

crates/chat/src/lib.rs

@@ -290,33 +290,37 @@ impl ChatRegistry {
 
         self.signal_consumer = Some(cx.spawn(async move |this, cx| {
             while let Ok(message) = rx.recv_async().await {
-                match message {
-                    Signal::Message(message) => {
-                        this.update(cx, |this, cx| {
-                            this.new_message(message, cx);
-                        })?;
+                this.update(cx, |this, cx| {
+                    // Drain the whole queue in a single update so a burst of
+                    // events (e.g. history sync after login) collapses into
+                    // one repaint instead of one per message (important on
+                    // wasm, where everything runs on the main thread).
+                    let mut batch = vec![message];
+                    while let Ok(extra) = rx.try_recv() {
+                        batch.push(extra);
                     }
-                    Signal::InboxReady => {
-                        this.update(cx, |this, cx| {
-                            this.get_messages(cx);
-                        })?;
-                    }
-                    Signal::Eose => {
-                        this.update(cx, |this, _cx| {
-                            this.tracking.store(false, Ordering::Release);
-                        })?;
 
-                        this.update(cx, |this, cx| {
-                            this.get_rooms(cx);
-                        })?;
+                    for message in batch {
+                        match message {
+                            Signal::Message(message) => {
+                                this.new_message(message, cx);
+                            }
+                            Signal::InboxReady => {
+                                this.get_messages(cx);
+                            }
+                            Signal::Eose => {
+                                this.tracking.store(false, Ordering::Release);
+                                this.get_rooms(cx);
+                            }
+                            Signal::Error(failed) => {
+                                let _ = trash.update(cx, |this, cx| {
+                                    this.insert(failed);
+                                    cx.notify();
+                                });
+                            }
+                        };
                     }
-                    Signal::Error(failed) => {
-                        trash.update(cx, |this, cx| {
-                            this.insert(failed);
-                            cx.notify();
-                        })?;
-                    }
-                };
+                })?;
             }
 
             Ok(())

crates/chat_ui/src/lib.rs

@@ -242,29 +242,40 @@ impl ChatPanel {
             while let Ok(status) = rx.recv_async().await {
                 {
                     let mut map = reports.write().unwrap();
-                    let status_id = match &*status {
-                        SendStatus::Ok { id, .. } => *id,
-                        SendStatus::Failed { id, .. } => *id,
-                    };
 
-                    // Find the matching report and update it (exit early on first match)
-                    'outer: for reports_list in map.values_mut() {
-                        for report in reports_list.iter_mut() {
-                            let Some(output) = report.output.as_mut() else {
-                                continue;
-                            };
-                            if *output.id() != status_id {
-                                continue;
-                            }
-                            match &*status {
-                                SendStatus::Ok { relay, .. } => {
-                                    output.success.insert(relay.clone(), EventSendStatus::Sent);
+                    // Drain the whole queue in a single update so bursts of
+                    // send statuses collapse into one repaint (important on
+                    // wasm, where everything runs on the main thread).
+                    let mut statuses = vec![status];
+                    while let Ok(extra) = rx.try_recv() {
+                        statuses.push(extra);
+                    }
+
+                    for status in statuses {
+                        let status_id = match &*status {
+                            SendStatus::Ok { id, .. } => *id,
+                            SendStatus::Failed { id, .. } => *id,
+                        };
+
+                        // Find the matching report and update it (exit early on first match)
+                        'outer: for reports_list in map.values_mut() {
+                            for report in reports_list.iter_mut() {
+                                let Some(output) = report.output.as_mut() else {
+                                    continue;
+                                };
+                                if *output.id() != status_id {
+                                    continue;
                                 }
-                                SendStatus::Failed { relay, message, .. } => {
-                                    output.failed.insert(relay.clone(), message.clone());
+                                match &*status {
+                                    SendStatus::Ok { relay, .. } => {
+                                        output.success.insert(relay.clone(), EventSendStatus::Sent);
+                                    }
+                                    SendStatus::Failed { relay, message, .. } => {
+                                        output.failed.insert(relay.clone(), message.clone());
+                                    }
                                 }
+                                break 'outer;
                             }
-                            break 'outer;
                         }
                     }
                 }

crates/person/Cargo.toml

@@ -15,3 +15,4 @@ anyhow.workspace = true
 smallvec.workspace = true
 flume.workspace = true
 log.workspace = true
+futures.workspace = true

crates/person/src/lib.rs

@@ -3,7 +3,8 @@ use std::sync::RwLock;
 
 use anyhow::{Error, anyhow};
 use common::EventExt;
-use gpui::{App, AppContext, Context, Entity, Global, Task, Window};
+use futures::FutureExt;
+use gpui::{App, AppContext, BackgroundExecutor, Context, Entity, Global, Task, Window};
 use instant::Duration;
 use nostr_sdk::prelude::*;
 use smallvec::{SmallVec, smallvec};
@@ -72,24 +73,36 @@ impl PersonRegistry {
         }));
 
         let client3 = client.clone();
+        let executor = cx.background_executor().clone();
         tasks.push(cx.background_spawn(async move {
-            Self::handle_requests(&client3, &metadata_rx).await;
+            Self::handle_requests(&client3, &metadata_rx, &executor).await;
         }));
 
         tasks.push(cx.spawn(async move |this, cx| {
             while let Ok(event) = rx.recv_async().await {
                 this.update(cx, |this, cx| {
-                    match event {
-                        Dispatch::Person(person) => {
-                            this.insert(person, cx);
-                        }
-                        Dispatch::Announcement(event) => {
-                            this.set_announcement(&event, cx);
-                        }
-                        Dispatch::Relays(event) => {
-                            this.set_messaging_relays(&event, cx);
-                        }
-                    };
+                    // Drain the whole queue in a single update so a burst of
+                    // events collapses into one repaint instead of one per
+                    // event (important on wasm, where everything runs on the
+                    // main thread).
+                    let mut dispatch = vec![event];
+                    while let Ok(extra) = rx.try_recv() {
+                        dispatch.push(extra);
+                    }
+
+                    for event in dispatch {
+                        match event {
+                            Dispatch::Person(person) => {
+                                this.insert(person, cx);
+                            }
+                            Dispatch::Announcement(event) => {
+                                this.set_announcement(&event, cx);
+                            }
+                            Dispatch::Relays(event) => {
+                                this.set_messaging_relays(&event, cx);
+                            }
+                        };
+                    }
                 })
                 .ok();
             }
@@ -156,30 +169,43 @@ impl PersonRegistry {
     }
 
     /// Handle request for metadata
-    async fn handle_requests(client: &Client, rx: &flume::Receiver<PublicKey>) {
+    ///
+    /// Requests are collected into batches and flushed when the batch is
+    /// full or the timeout expires.
+    ///
+    /// Note: `flume::Selector::wait_timeout` is intentionally not used here:
+    /// it relies on `std::time::Instant` and `thread::park_timeout`, which are
+    /// unavailable on `wasm32-unknown-unknown` (the former panics, the latter
+    /// is a no-op that would turn the wait into a busy loop on the main
+    /// thread).
+    async fn handle_requests(
+        client: &Client,
+        rx: &flume::Receiver<PublicKey>,
+        executor: &BackgroundExecutor,
+    ) {
         let mut batch: HashSet<PublicKey> = HashSet::new();
 
         loop {
-            match flume::Selector::new()
-                .recv(rx, |result| result.ok())
-                .wait_timeout(Duration::from_secs(TIMEOUT))
+            // Wait for the next request, or the batch timeout.
+            futures::select! {
+                result = rx.recv_async() => match result {
+                    Ok(public_key) => {
+                        batch.insert(public_key);
+                        // Keep collecting until the batch is full
+                        if batch.len() < 20 {
+                            continue;
+                        }
+                    }
+                    Err(_) => return,
+                },
+                _ = executor.timer(Duration::from_secs(TIMEOUT)).fuse() => {}
+            }
+
+            // Flush the batch
+            if !batch.is_empty()
+                && let Err(e) = get_metadata(client, std::mem::take(&mut batch)).await
             {
-                Ok(Some(public_key)) => {
-                    batch.insert(public_key);
-                    // Process the batch if it's full
-                    if batch.len() >= 20
-                        && let Err(e) = get_metadata(client, std::mem::take(&mut batch)).await
-                    {
-                        log::warn!("Failed to get metadata batch: {e}");
-                    }
-                }
-                _ => {
-                    if !batch.is_empty()
-                        && let Err(e) = get_metadata(client, std::mem::take(&mut batch)).await
-                    {
-                        log::warn!("Failed to get metadata batch: {e}");
-                    }
-                }
+                log::warn!("Failed to get metadata batch: {e}");
             }
         }
     }

crates/person/src/person.rs

@@ -105,7 +105,21 @@ impl Person {
 
     /// Get profile avatar
     pub fn avatar(&self) -> SharedString {
-        self.metadata()
+        // On web, the browser blocks cross-origin image fetches unless the
+        // picture host sends CORS headers, so remote avatars can never load
+        // there. Each doomed fetch still triggers a full-window repaint when
+        // it fails, which is very costly on wasm's single main thread when a
+        // list renders many avatars at once. Fall back to the bundled avatar
+        // for remote pictures on web.
+        #[cfg(target_arch = "wasm32")]
+        if let Some(picture) = self.metadata.picture.as_ref()
+            && !picture.is_empty()
+            && url::Url::parse(picture).is_ok_and(|url| matches!(url.scheme(), "http" | "https"))
+        {
+            return "brand/avatar.png".into();
+        }
+
+        self.metadata
             .picture
             .as_ref()
             .filter(|picture| !picture.is_empty())
@@ -115,13 +129,13 @@ impl Person {
 
     /// Get profile name
     pub fn name(&self) -> SharedString {
-        if let Some(display_name) = self.metadata().display_name.as_ref()
+        if let Some(display_name) = self.metadata.display_name.as_ref()
             && !display_name.is_empty()
         {
             return SharedString::from(display_name.trim());
         }
 
-        if let Some(name) = self.metadata().name.as_ref()
+        if let Some(name) = self.metadata.name.as_ref()
             && !name.is_empty()
         {
             return SharedString::from(name.trim());

crates/state/src/lib.rs

@@ -3,8 +3,10 @@ use std::collections::HashMap;
 use anyhow::{Error, anyhow};
 #[cfg(not(target_arch = "wasm32"))]
 use browser_signer_proxy::prelude::*;
+#[cfg(not(target_arch = "wasm32"))]
 use common::config_dir;
 use gpui::{App, AppContext, Context, Entity, EventEmitter, Global, Task, Window};
+#[cfg(not(target_arch = "wasm32"))]
 use gpui_tokio::Tokio;
 use instant::Duration;
 use nostr_connect::prelude::*;

crates/workspace/Cargo.toml

@@ -14,15 +14,16 @@ chat = { path = "../chat" }
 chat_ui = { path = "../chat_ui" }
 settings = { path = "../settings" }
 person = { path = "../person" }
-auto_update = { path = "../auto_update" }
 
 gpui.workspace = true
 nostr-sdk.workspace = true
 instant.workspace = true
 nostr-connect.workspace = true
-browser-signer-proxy = { path = "../browser-signer-proxy" }
 
 anyhow.workspace = true
 serde.workspace = true
 log.workspace = true
 smallvec.workspace = true
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+auto_update = { path = "../auto_update" }

crates/workspace/src/dialogs/import.rs

@@ -172,6 +172,11 @@ impl ImportIdentity {
         });
     }
 
+    // The "Connect via Web Extension" button is hidden on wasm (`is_wasm`),
+    // so this stub is never invoked in the browser.
+    #[cfg(target_arch = "wasm32")]
+    fn proxy(&mut self, _cx: &mut Context<Self>) {}
+
     fn set_loading(&mut self, status: bool, cx: &mut Context<Self>) {
         self.loading = status;
         cx.notify();
@@ -266,7 +271,7 @@ impl Render for ImportIdentity {
                         this.login(window, cx);
                     })),
             )
-            .child(divider(cx))
+            .when(cfg!(target_arch = "wasm32"), |this| this.child(divider(cx)))
             .when(!is_wasm, |this| {
                 this.child(
                     Button::new("proxy")

crates/workspace/src/lib.rs

@@ -2,6 +2,7 @@ use std::sync::Arc;
 
 use ::settings::AppSettings;
 use anyhow::Error;
+#[cfg(not(target_arch = "wasm32"))]
 use auto_update::AutoUpdater;
 use chat::{ChatEvent, ChatRegistry};
 use common::{CoopImageCache, download_dir};
@@ -379,6 +380,7 @@ impl Workspace {
             Command::ImportEncryption => {
                 self.import_encryption(window, cx);
             }
+            #[cfg(not(target_arch = "wasm32"))]
             Command::Update => {
                 let auto_updater = AutoUpdater::global(cx);
                 auto_updater.update(cx, |this, cx| {
@@ -387,6 +389,9 @@ impl Workspace {
                     });
                 });
             }
+            // Auto-update is a desktop-only feature; no-op in the browser.
+            #[cfg(target_arch = "wasm32")]
+            Command::Update => {}
         }
     }
 
@@ -563,7 +568,8 @@ impl Workspace {
                             let avatar = avatar.clone();
                             let name = name.clone();
 
-                            this.min_w(px(256.))
+                            let menu = this
+                                .min_w(px(256.))
                                 .item(PopupMenuItem::element(move |_window, cx| {
                                     h_flex()
                                         .gap_1p5()
@@ -593,24 +599,27 @@ impl Workspace {
                                     IconName::Sun,
                                     Box::new(Command::ToggleTheme),
                                 )
-                                .separator()
-                                .menu_with_icon(
-                                    "Check for Updates",
-                                    IconName::Device,
-                                    Box::new(Command::Update),
-                                )
-                                .menu_with_icon(
-                                    "Settings",
-                                    IconName::Settings,
-                                    Box::new(Command::ShowSettings),
-                                )
+                                .separator();
+
+                            // Auto-update is a desktop-only feature; there is no updater in the browser.
+                            #[cfg(not(target_arch = "wasm32"))]
+                            let menu = menu.menu_with_icon(
+                                "Check for Updates",
+                                IconName::Device,
+                                Box::new(Command::Update),
+                            );
+
+                            menu.menu_with_icon(
+                                "Settings",
+                                IconName::Settings,
+                                Box::new(Command::ShowSettings),
+                            )
                         }),
                 )
             })
     }
 
     fn titlebar_right(&mut self, cx: &mut Context<Self>) -> impl IntoElement {
-        let updater = AutoUpdater::global(cx);
         let chat = ChatRegistry::global(cx);
         let nip4e_enabled = AppSettings::get_nip4e(cx);
         let nostr = NostrRegistry::global(cx);
@@ -622,15 +631,23 @@ impl Workspace {
         let persons = PersonRegistry::global(cx);
         let profile = persons.read(cx).get(&public_key, cx);
         let announcement = profile.announcement();
-        let updater_idle = updater.read(cx).idle(cx);
 
-        h_flex()
+        let titlebar = h_flex()
             .when(!cx.theme().platform.is_mac(), |this| this.pr_2())
-            .gap_2()
-            .when(!updater_idle, |this| {
+            .gap_2();
+
+        // Auto-update is a desktop-only feature; there is no updater in the browser.
+        #[cfg(not(target_arch = "wasm32"))]
+        let titlebar = {
+            let updater = AutoUpdater::global(cx);
+            let updater_idle = updater.read(cx).idle(cx);
+            titlebar.when(!updater_idle, |this| {
                 let status = updater.read(cx).status(cx);
                 this.child(div().text_xs().italic().child(status))
             })
+        };
+
+        titlebar
             .when(nip4e_enabled, |this| {
                 this.child(
                     Button::new("key")

web/Cargo.toml

@@ -30,6 +30,9 @@ console_error_panic_hook = "0.1"
 tracing-wasm = "0.2"
 console_log = "1.0"
 wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+js-sys = "0.3"
+web-sys = { version = "0.3", features = ["Window", "Performance"] }
 universal-time = { git = "https://github.com/shadowylab/universal-time" }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]

web/src/lib.rs

@@ -1,4 +1,8 @@
+use std::borrow::Cow;
+use std::cell::RefCell;
+
 use gpui::*;
+use theme::{Theme, ThemeMode};
 use ui::Root;
 use universal_time::{Instant, MonotonicClock, SystemTime, WallClock, define_time_provider};
 use wasm_bindgen::prelude::*;
@@ -7,20 +11,64 @@ struct CustomTimeProvider;
 
 impl WallClock for CustomTimeProvider {
     fn system_time(&self) -> SystemTime {
-        SystemTime::from_unix_duration(instant::Duration::from_secs(0))
+        // Browser wall clock: milliseconds since the Unix epoch.
+        let millis = js_sys::Date::now();
+        SystemTime::from_unix_duration(instant::Duration::from_millis(millis as u64))
     }
 }
 
 impl MonotonicClock for CustomTimeProvider {
     fn instant(&self) -> Instant {
-        Instant::from_ticks(instant::Duration::from_secs(0))
+        // `performance.now()` is monotonic; fall back to the wall clock if
+        // it's unavailable.
+        let millis = web_sys::window()
+            .and_then(|window| window.performance())
+            .map(|performance| performance.now())
+            .unwrap_or_else(js_sys::Date::now);
+        Instant::from_ticks(instant::Duration::from_millis(millis as u64))
     }
 }
 
 define_time_provider!(CustomTimeProvider);
 
+thread_local! {
+    static APPLICATION: RefCell<Option<ApplicationHandle>> = const { RefCell::new(None) };
+}
+
+/// Applies a theme mode and restores the bundled web fonts.
+///
+/// `Theme::change` reapplies the theme config, which can carry its own font
+/// family; host system fonts are unavailable in wasm, so the bundled Inter
+/// fonts are put back afterwards.
+fn apply_theme(mode: ThemeMode, cx: &mut App) {
+    Theme::change(mode, None, cx);
+    Theme::global_mut(cx).font_family = "Inter".into();
+}
+
+/// Switches the app between light and dark after it is running.
+///
+/// The embedding page calls this to keep the app in sync with its own
+/// appearance.
+#[cfg(target_family = "wasm")]
 #[wasm_bindgen]
-pub fn run() -> Result<(), JsValue> {
+pub fn set_theme(dark: bool) {
+    let mode = if dark {
+        ThemeMode::Dark
+    } else {
+        ThemeMode::Light
+    };
+    APPLICATION.with(|application| {
+        if let Some(handle) = application.borrow().as_ref() {
+            handle.update(|cx| {
+                apply_theme(mode, cx);
+                cx.refresh_windows();
+            });
+        }
+    });
+}
+
+#[wasm_bindgen]
+pub async fn run() -> Result<(), JsValue> {
     console_error_panic_hook::set_once();
 
     // Initialize logging to browser console
@@ -37,16 +85,61 @@ pub fn run() -> Result<(), JsValue> {
 
     #[cfg(target_family = "wasm")]
     let app = {
-        let app = gpui_platform::single_threaded_web();
+        // Assets are not embedded in the WASM bundle; they are served from
+        // the `/assets/...` URL prefix (see `web/www/vite.config.js`) and
+        // downloaded by the `assets` crate.
+        let assets = assets::Assets::new("");
 
-        // Temporary fix: intentionally leak the `Rc<AppCell>` to keep the application alive
-        struct WasmApplication(std::rc::Rc<AppCell>);
-        let wasm_app = unsafe { std::mem::transmute::<Application, WasmApplication>(app) };
-        std::mem::forget(wasm_app.0.clone());
-        unsafe { std::mem::transmute::<WasmApplication, Application>(wasm_app) }
+        // Download every icon and brand asset before the first frame: brand
+        // images are loaded through GPUI's image cache, which does not retry
+        // failed loads, and pre-caching the icons lets them render
+        // immediately instead of waiting for a repaint.
+        assets.preload().await;
+
+        gpui_platform::single_threaded_web().with_assets(assets)
     };
 
-    app.run(|cx| {
+    let launch = move |cx: &mut App| {
+        // Load the embedded Inter font stack for WASM, where host system
+        // fonts are unavailable. Inter is the app's UI font on Linux; the
+        // wasm build reuses it so the web app matches the desktop look.
+        let inter_regular =
+            Cow::Borrowed(include_bytes!("../../assets/fonts/Inter/Inter-Regular.ttf").as_slice());
+        let inter_italic =
+            Cow::Borrowed(include_bytes!("../../assets/fonts/Inter/Inter-Italic.ttf").as_slice());
+        let inter_medium =
+            Cow::Borrowed(include_bytes!("../../assets/fonts/Inter/Inter-Medium.ttf").as_slice());
+        let inter_medium_italic = Cow::Borrowed(
+            include_bytes!("../../assets/fonts/Inter/Inter-MediumItalic.ttf").as_slice(),
+        );
+        let inter_semibold =
+            Cow::Borrowed(include_bytes!("../../assets/fonts/Inter/Inter-SemiBold.ttf").as_slice());
+        let inter_semibold_italic = Cow::Borrowed(
+            include_bytes!("../../assets/fonts/Inter/Inter-SemiBoldItalic.ttf").as_slice(),
+        );
+        let inter_bold =
+            Cow::Borrowed(include_bytes!("../../assets/fonts/Inter/Inter-Bold.ttf").as_slice());
+        let inter_bold_italic = Cow::Borrowed(
+            include_bytes!("../../assets/fonts/Inter/Inter-BoldItalic.ttf").as_slice(),
+        );
+
+        cx.text_system()
+            .add_fonts(vec![
+                inter_regular,
+                inter_italic,
+                inter_medium,
+                inter_medium_italic,
+                inter_semibold,
+                inter_semibold_italic,
+                inter_bold,
+                inter_bold_italic,
+            ])
+            .expect("Failed to load fonts");
+
+        // Apply the system appearance before the first frame, so the app
+        // never flashes the default light theme.
+        apply_theme(cx.window_appearance().into(), cx);
+
         // Open the root window
         cx.open_window(WindowOptions::default(), |window, cx| {
             // Initialize components
@@ -78,7 +171,15 @@ pub fn run() -> Result<(), JsValue> {
         .expect("Failed to open window. Please restart the application.");
 
         cx.activate(true);
+    };
+
+    #[cfg(target_family = "wasm")]
+    APPLICATION.with(|application| {
+        *application.borrow_mut() = Some(app.run_embedded(launch));
     });
 
+    #[cfg(not(target_family = "wasm"))]
+    app.run(launch);
+
     Ok(())
 }

web/www/vite.config.js

@@ -10,7 +10,11 @@ export default defineConfig({
     viteStaticCopy({
       targets: [
         {
-          src: path.resolve(__dirname, "../../../assets/icons"),
+          src: path.resolve(__dirname, "../../assets/icons"),
+          dest: "assets",
+        },
+        {
+          src: path.resolve(__dirname, "../../assets/brand"),
           dest: "assets",
         },
       ],
@@ -19,9 +23,9 @@ export default defineConfig({
       name: "serve-assets",
       configureServer(server) {
         server.middlewares.use(
-          "/coop/assets",
+          "/assets",
           (req, res, next) => {
-            const assetsPath = path.resolve(__dirname, "../../../assets");
+            const assetsPath = path.resolve(__dirname, "../../assets");
             const filePath = path.join(
               assetsPath,
               req.url.replace("/assets", ""),