feat: pre-warm cache on startup, 5-min TTL, DEV build tag in red

1. Pre-warm sidecar cache on startup (background thread) so first
   popup open is instant instead of waiting 8s for sidecar calls
2. Increase cache TTL from 2 to 5 minutes
3. Dev build version shows "DEV - MM/DD/YYYY HH:MM" in red in the
   header (works in both dark and light mode)
4. Make DjDisplay, into_monitor, merge_with_configs public for cache
   pre-warming from lib.rs

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

Author: synle

src-tauri/build.rs

@@ -49,15 +49,17 @@ fn expose_app_version() {
     let app_version = if is_release {
         version.to_string()
     } else {
-        // Get short commit SHA for dev/beta builds
-        let short_sha = Command::new("git")
-            .args(["rev-parse", "--short", "HEAD"])
-            .output()
-            .ok()
-            .and_then(|o| String::from_utf8(o.stdout).ok())
-            .map(|s| s.trim().to_string())
-            .unwrap_or_else(|| "unknown".to_string());
-        format!("{version} [beta - {short_sha}]")
+        // Build timestamp for dev builds: MM/DD/YYYY HH:MM
+        let secs = SystemTime::now()
+            .duration_since(SystemTime::UNIX_EPOCH)
+            .unwrap()
+            .as_secs();
+        let days = secs / 86400;
+        let (y, m, d) = civil_from_days(days as i64);
+        let day_secs = secs % 86400;
+        let hh = day_secs / 3600;
+        let mm = (day_secs % 3600) / 60;
+        format!("{version} [DEV - {m:02}/{d:02}/{y:04} {hh:02}:{mm:02}]")
     };
 
     println!("cargo:rustc-env=APP_VERSION={app_version}");

src-tauri/src/display.rs

@@ -22,7 +22,7 @@ pub struct Monitor {
 
 /// Response from the display-dj HTTP server's /get_all and /list endpoints.
 #[derive(Deserialize, Debug)]
-struct DjDisplay {
+pub struct DjDisplay {
     id: String,
     name: String,
     display_type: String,
@@ -33,7 +33,7 @@ struct DjDisplay {
 impl DjDisplay {
     /// Converts a sidecar API response into the app's Monitor struct,
     /// computing the composite UID and defaulting brightness to 50 if unknown.
-    fn into_monitor(self) -> Monitor {
+    pub fn into_monitor(self) -> Monitor {
         let is_built_in = self.display_type == "builtin";
         let uid = format!("{}::{}", self.id, self.name);
         Monitor {
@@ -121,7 +121,7 @@ async fn set_all_monitors_contrast(value: u32) -> Result<(), String> {
 
 /// Applies saved metadata (custom labels, hidden state) to detected monitors
 /// and sorts them by the user's configured sort order.
-fn merge_with_configs(
+pub fn merge_with_configs(
     monitors: Vec<Monitor>,
     configs: &[crate::config::MonitorMetadata],
 ) -> Vec<Monitor> {

src-tauri/src/lib.rs

@@ -514,6 +514,40 @@ pub fn run() {
                 }
                 // Fetch initial dark mode and volume state for tray icon indicators
                 fetch_initial_tray_state(&startup_handle, port);
+                // Pre-warm the sidecar cache so the first popup open is instant.
+                // Uses the same endpoints as fetch_all_state but blocking.
+                {
+                    let base = format!("http://127.0.0.1:{}", port);
+                    let state = startup_handle.state::<AppState>();
+
+                    // Cache monitors
+                    if let Ok(resp) = reqwest::blocking::get(format!("{}/get_all", base)) {
+                        if let Ok(displays) = resp.json::<Vec<display::DjDisplay>>() {
+                            let monitors: Vec<display::Monitor> = displays.into_iter().map(|d| d.into_monitor()).collect();
+                            let prefs = state.preferences.lock().unwrap();
+                            let merged = display::merge_with_configs(monitors, &prefs.monitor_configs);
+                            state.sidecar_cache.set_monitors(merged);
+                        }
+                    }
+                    // Cache dark mode
+                    if let Ok(resp) = reqwest::blocking::get(format!("{}/theme", base)) {
+                        if let Ok(text) = resp.text() {
+                            state.sidecar_cache.set_dark_mode(text.contains("dark"));
+                        }
+                    }
+                    // Cache volume
+                    if let Ok(resp) = reqwest::blocking::get(format!("{}/get_volume", base)) {
+                        if let Ok(text) = resp.text() {
+                            if let Some(v) = text.split("volume\":")
+                                .nth(1)
+                                .and_then(|s| s.trim().trim_end_matches('}').trim().parse::<u32>().ok())
+                            {
+                                state.sidecar_cache.set_volume(v);
+                            }
+                        }
+                    }
+                    log::info!("sidecar cache pre-warmed on startup");
+                }
                 // Resume wallpaper slideshow if it was enabled before shutdown
                 let wp_state = startup_handle.state::<AppState>();
                 wallpaper::resume_slideshow_if_enabled(&wp_state);

src-tauri/src/sidecar_cache.rs

@@ -10,7 +10,7 @@ use std::sync::Mutex;
 use std::time::{Duration, Instant};
 
 /// Cache TTL: entries older than this are considered stale.
-const CACHE_TTL: Duration = Duration::from_secs(120); // 2 minutes
+const CACHE_TTL: Duration = Duration::from_secs(300); // 5 minutes
 
 /// A single cached value with a timestamp.
 struct CacheEntry<T> {

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/nicoverbruggen/tauri-v2-docs/refs/heads/main/schemas/config.schema.json",
   "productName": "Display DJ",
-  "version": "6.3.18",
+  "version": "6.3.19",
   "identifier": "com.synle.display-dj",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.css

@@ -82,6 +82,11 @@ body,
   font-weight: 400;
 }
 
+.header-dev-tag {
+  color: #e74c3c;
+  font-weight: 600;
+}
+
 .header-toggle {
   background: none;
   border: none;

src/App.test.tsx

@@ -10,6 +10,22 @@ beforeEach(() => {
   mockInvoke.mockReset();
   mockInvoke.mockImplementation((cmd: string) => {
     switch (cmd) {
+      case 'fetch_all_state':
+        return Promise.resolve({
+          monitors: [
+            {
+              id: 'builtin-0',
+              uid: 'builtin-0::Built-in Display',
+              name: 'Built-in Display',
+              originalName: 'Built-in Display',
+              brightness: 50,
+              supportsBrightness: true,
+              isBuiltIn: true,
+            },
+          ],
+          isDark: false,
+          volume: 50,
+        });
       case 'get_monitors':
         return Promise.resolve([
           {
@@ -92,9 +108,9 @@ describe('App smoke test', () => {
   it('fetches initial data on mount', async () => {
     render(<App />);
     await waitFor(() => {
-      expect(mockInvoke).toHaveBeenCalledWith('get_monitors');
-      expect(mockInvoke).toHaveBeenCalledWith('get_dark_mode');
-      expect(mockInvoke).toHaveBeenCalledWith('get_volume');
+      expect(mockInvoke).toHaveBeenCalledWith('fetch_all_state');
+      expect(mockInvoke).toHaveBeenCalledWith('get_preferences');
+      expect(mockInvoke).toHaveBeenCalledWith('get_keep_awake');
       expect(mockInvoke).toHaveBeenCalledWith('get_app_version');
     });
   });
@@ -187,38 +203,45 @@ describe('App smoke test', () => {
 
   it('renders with multiple monitors without JS errors', async () => {
     const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const multiMonitors = [
+      {
+        id: 'builtin-0',
+        uid: 'builtin-0::Built-in Display',
+        name: 'Built-in Display',
+        originalName: 'Built-in Display',
+        brightness: 100,
+        supportsBrightness: true,
+        isBuiltIn: true,
+      },
+      {
+        id: '1',
+        uid: '1::Dell U2723QE',
+        name: 'Dell U2723QE',
+        originalName: 'Dell U2723QE',
+        brightness: 80,
+        supportsBrightness: true,
+        isBuiltIn: false,
+      },
+      {
+        id: '2',
+        uid: '2::LG 27UK850',
+        name: '',
+        originalName: 'LG 27UK850',
+        brightness: 60,
+        supportsBrightness: true,
+        isBuiltIn: false,
+      },
+    ];
     mockInvoke.mockImplementation((cmd: string) => {
       switch (cmd) {
+        case 'fetch_all_state':
+          return Promise.resolve({
+            monitors: multiMonitors,
+            isDark: true,
+            volume: 75,
+          });
         case 'get_monitors':
-          return Promise.resolve([
-            {
-              id: 'builtin-0',
-              uid: 'builtin-0::Built-in Display',
-              name: 'Built-in Display',
-              originalName: 'Built-in Display',
-              brightness: 100,
-              supportsBrightness: true,
-              isBuiltIn: true,
-            },
-            {
-              id: '1',
-              uid: '1::Dell U2723QE',
-              name: 'Dell U2723QE',
-              originalName: 'Dell U2723QE',
-              brightness: 80,
-              supportsBrightness: true,
-              isBuiltIn: false,
-            },
-            {
-              id: '2',
-              uid: '2::LG 27UK850',
-              name: '',
-              originalName: 'LG 27UK850',
-              brightness: 60,
-              supportsBrightness: true,
-              isBuiltIn: false,
-            },
-          ]);
+          return Promise.resolve(multiMonitors);
         case 'get_dark_mode':
           return Promise.resolve(true);
         case 'get_volume':
@@ -279,20 +302,27 @@ describe('App smoke test', () => {
   });
 
   it('calls set_brightness with API id (not uid)', async () => {
+    const singleMonitor = [
+      {
+        id: '1',
+        uid: '1::Dell U2723QE',
+        name: 'Dell U2723QE',
+        originalName: 'Dell U2723QE',
+        brightness: 50,
+        supportsBrightness: true,
+        isBuiltIn: false,
+      },
+    ];
     mockInvoke.mockImplementation((cmd: string) => {
       switch (cmd) {
+        case 'fetch_all_state':
+          return Promise.resolve({
+            monitors: singleMonitor,
+            isDark: false,
+            volume: 50,
+          });
         case 'get_monitors':
-          return Promise.resolve([
-            {
-              id: '1',
-              uid: '1::Dell U2723QE',
-              name: 'Dell U2723QE',
-              originalName: 'Dell U2723QE',
-              brightness: 50,
-              supportsBrightness: true,
-              isBuiltIn: false,
-            },
-          ]);
+          return Promise.resolve(singleMonitor);
         case 'get_dark_mode':
           return Promise.resolve(false);
         case 'get_volume':

src/components/Header.tsx

@@ -6,11 +6,21 @@ interface HeaderProps {
 
 /** App header with version display and settings gear button. */
 export default function Header({ version, onSettingsToggle, settingsOpen }: HeaderProps) {
+  // Split version into base (e.g. "6.3.19") and tag (e.g. "[DEV - 04/23/2026 08:30]")
+  const tagMatch = version.match(/^([\d.]+)\s*(\[.+\])$/);
+  const baseVersion = tagMatch ? tagMatch[1] : version;
+  const devTag = tagMatch ? tagMatch[2] : '';
+
   return (
     <div className='header'>
       <div>
         <span className='header-title'>Display DJ</span>
-        {version && <span className='header-version'>v{version}</span>}
+        {version && (
+          <span className='header-version'>
+            v{baseVersion}
+            {devTag && <span className='header-dev-tag'> {devTag}</span>}
+          </span>
+        )}
       </div>
       <div className='header-actions'>
         <button