From a0033f9a4a240fb33f109ec368671a243bb960d9 Mon Sep 17 00:00:00 2001
From: Wintermute
 <016967d974c3ac2859b738b1bb00747700a175518081d9aeb139f214c86eee6f@buzz.block.builderlab.xyz>
Date: Sun, 23 Aug 2026 20:54:36 -0400
Subject: [PATCH] Mesh Buddy: follow app theme and float always-on-top

Apply the app's cached theme vars (buzz-theme-cache, same origin) at
load and re-apply on storage/focus events, matching the FOUC path in
index.html. Mark the buddy window always-on-top so it keeps floating
when the main/settings window closes.

Co-authored-by: Thomas Petersen <thomasp@squareup.com>
Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 desktop/public/mesh-buddy.html                | 35 ++++++++++++++++---
 .../src/commands/mesh_buddy_window.rs         |  1 +
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/desktop/public/mesh-buddy.html b/desktop/public/mesh-buddy.html
index 727ab0a9f9..890cab47f8 100644
--- a/desktop/public/mesh-buddy.html
+++ b/desktop/public/mesh-buddy.html
@@ -4,12 +4,20 @@
     <meta charset="utf-8" />
     <title>Mesh Buddy</title>
     <style>
+      :root {
+        /* Fallbacks match the buzz-dark theme; overwritten from the app's
+           cached theme vars (buzz-theme-cache) at load. */
+        --background: 240 6% 7%;
+        --foreground: 0 0% 95%;
+        --muted-foreground: 240 4% 60%;
+        --status-added: 145 45% 55%;
+      }
       html,
       body {
         margin: 0;
         height: 100%;
-        background: #101014;
-        color: #f5f5f7;
+        background: hsl(var(--background));
+        color: hsl(var(--foreground));
         font-family: -apple-system, "Inter", sans-serif;
         display: flex;
         align-items: center;
@@ -28,14 +36,14 @@
       .label {
         margin-top: 6px;
         font-size: 12px;
-        color: #9a9aa2;
+        color: hsl(var(--muted-foreground));
         letter-spacing: 0.04em;
         text-transform: uppercase;
       }
       .nodes {
         margin-top: 14px;
         font-size: 13px;
-        color: #6fcf97;
+        color: hsl(var(--status-added));
       }
     </style>
   </head>
@@ -47,6 +55,25 @@
       <div class="nodes" id="nodes">&nbsp;</div>
     </div>
     <script>
+      // Follow the app theme: the main window caches its resolved CSS vars in
+      // localStorage (same origin), so apply them and re-check on focus and on
+      // cross-window storage events.
+      function applyTheme() {
+        try {
+          const cached = window.localStorage.getItem("buzz-theme-cache");
+          if (!cached) return;
+          const { vars } = JSON.parse(cached);
+          for (const [key, value] of Object.entries(vars || {})) {
+            document.documentElement.style.setProperty(key, value);
+          }
+        } catch {
+          // Keep fallbacks.
+        }
+      }
+      applyTheme();
+      window.addEventListener("storage", applyTheme);
+      window.addEventListener("focus", applyTheme);
+
       const invoke =
         window.__TAURI__?.core?.invoke || window.__TAURI_INTERNALS__?.invoke;
       async function tick() {
diff --git a/desktop/src-tauri/src/commands/mesh_buddy_window.rs b/desktop/src-tauri/src/commands/mesh_buddy_window.rs
index d3303ecfff..4a177b3f05 100644
--- a/desktop/src-tauri/src/commands/mesh_buddy_window.rs
+++ b/desktop/src-tauri/src/commands/mesh_buddy_window.rs
@@ -25,6 +25,7 @@ pub fn open_mesh_buddy_window_impl(app: &tauri::AppHandle) -> Result<(), String>
     .title("Mesh Buddy")
     .inner_size(320.0, 320.0)
     .resizable(false)
+    .always_on_top(true)
     .build()
     .map_err(|error| error.to_string())?;
     Ok(())