Merge pull request 'perf(relay): cache macro images (faster display)' (#11) from perf/relay-image-cache into main

The relay web client re-fetched every macro image through the relay->desktop
proxy on each render (tab switch, WS update) and revoked the object URL on
load, so nothing was reused and fetches were serial — slow to display.

- Client: cache image_path -> Promise<objectURL> and reuse across renders
  (macro images are content-addressed by uuid, so immutable); fetch in
  parallel and de-duplicate concurrent requests.
- Proxy: send Cache-Control: private, max-age=31536000, immutable on image
  responses so the browser also disk-caches them across reloads.

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

config.py

@@ -1,6 +1,6 @@
 # Configuration and constants for MacroPad Server
 
-VERSION = "1.1.0"
+VERSION = "1.1.1"
 DEFAULT_PORT = 40000
 SETTINGS_FILE = "settings.json"
 

macro_manager.py

@@ -416,15 +416,23 @@ class MacroManager:
 
         elif cmd_type == "app":
             # Launch application.
-            # SECURITY: shell=True was removed to kill shell-metacharacter
-            # injection (no ; && | $() chaining). We tokenize the command
-            # and exec the program directly without a shell.
+            # SECURITY: never use shell=True — that would allow shell-metacharacter
+            # injection (; && | $() chaining, redirection). Both branches below run
+            # without a shell, so the command can only launch a program with args.
             command = cmd.get("command", "")
             if command:
                 try:
-                    args = shlex.split(command, posix=(os.name != "nt"))
-                    if args:
-                        subprocess.Popen(args)
+                    if os.name == "nt":
+                        # Windows: pass the string so CreateProcess parses it
+                        # (correctly handling quoted paths like "C:\Program
+                        # Files\app.exe"). shell=False means no cmd.exe, so no
+                        # metacharacter chaining.
+                        subprocess.Popen(command)
+                    else:
+                        # POSIX: split into an argv list; no shell involved.
+                        args = shlex.split(command)
+                        if args:
+                            subprocess.Popen(args)
                 except Exception as e:
                     print(f"Error launching app command: {e}")
 

macropad-relay/public/app.js

@@ -7,6 +7,11 @@ class MacroPadApp {
         this.tabs = [];
         this.currentTab = 'All';
         this.ws = null;
+        // Cache of image_path -> Promise<objectURL>. Macro images are
+        // content-addressed by uuid filename, so they are immutable: once
+        // fetched, an image never changes for a given path. Caching here avoids
+        // re-fetching every image through the relay on each re-render.
+        this._imageCache = new Map();
         this.desktopConnected = false;
         this.wsAuthenticated = false;
 
@@ -249,35 +254,55 @@ class MacroPadApp {
         this.loadMacroImages();
     }
 
-    // Fetch each macro image with the password header and display it
-    // as a blob object URL so the credential never appears in a URL.
-    async loadMacroImages() {
+    // Fetch each macro image with the password header and display it as a blob
+    // object URL so the credential never appears in a URL. Images are fetched
+    // in parallel and cached (see _imageCache) so re-renders reuse them instead
+    // of re-fetching through the relay each time.
+    loadMacroImages() {
         for (const [id, macro] of Object.entries(this.macros)) {
             if (!macro.image_path) continue;
             const card = document.querySelector(`[data-macro-id="${id}"]`);
             if (!card) continue;
             const img = card.querySelector('.macro-image');
             if (!img) continue;
-
-            try {
-                const response = await fetch(
-                    `/${this.sessionId}/api/image/${macro.image_path}`,
-                    { headers: this.getApiHeaders() }
-                );
-                if (!response.ok) continue; // keep placeholder
-                const blob = await response.blob();
-                const objectUrl = URL.createObjectURL(blob);
-                img.onload = () => URL.revokeObjectURL(objectUrl);
-                img.src = objectUrl;
-                img.style.display = '';
-                const placeholder = img.nextElementSibling;
-                if (placeholder) placeholder.style.display = 'none';
-            } catch (error) {
-                // Leave the placeholder visible on failure.
-            }
+            this._applyMacroImage(img, macro.image_path);
         }
     }
 
+    async _applyMacroImage(img, imagePath) {
+        try {
+            const objectUrl = await this._getImageUrl(imagePath);
+            img.src = objectUrl;
+            img.style.display = '';
+            const placeholder = img.nextElementSibling;
+            if (placeholder) placeholder.style.display = 'none';
+        } catch (error) {
+            // Leave the placeholder visible on failure.
+        }
+    }
+
+    // Returns a cached Promise<objectURL> for an image path, fetching once.
+    // The object URL is retained for the page's lifetime (images are immutable
+    // per path, so there is nothing to invalidate); this de-duplicates
+    // concurrent requests and eliminates re-fetching on re-render.
+    _getImageUrl(imagePath) {
+        let entry = this._imageCache.get(imagePath);
+        if (entry) return entry;
+        entry = (async () => {
+            const response = await fetch(
+                `/${this.sessionId}/api/image/${imagePath}`,
+                { headers: this.getApiHeaders() }
+            );
+            if (!response.ok) throw new Error(`image ${response.status}`);
+            const blob = await response.blob();
+            return URL.createObjectURL(blob);
+        })();
+        // Drop failed fetches from the cache so a later render can retry.
+        entry.catch(() => this._imageCache.delete(imagePath));
+        this._imageCache.set(imagePath, entry);
+        return entry;
+    }
+
     setupEventListeners() {
         document.getElementById('tabs-container').addEventListener('click', (e) => {
             if (e.target.classList.contains('tab')) {

macropad-relay/src/handlers/apiProxy.ts

@@ -49,6 +49,10 @@ export function createApiProxy(
       if (response.body?.base64 && response.body?.contentType) {
         const buffer = Buffer.from(response.body.base64, 'base64');
         res.set('Content-Type', response.body.contentType);
+        // Macro images are content-addressed (uuid filenames) and therefore
+        // immutable, so let the browser cache them aggressively. 'private'
+        // keeps them out of shared proxy caches since they sit behind auth.
+        res.set('Cache-Control', 'private, max-age=31536000, immutable');
         res.send(buffer);
       } else {
         res.status(response.status).json(response.body);

version.txt

@@ -1 +1 @@
-1.1.0
+1.1.1