From 3ea896c368de7c99036b638f01351ecf19d6b96a Mon Sep 17 00:00:00 2001
From: Zac <zgaetano@wilddragon.net>
Date: Sun, 17 May 2026 08:30:49 -0400
Subject: [PATCH] fix(web-ui): bust JS cache so api.js fix actually reaches the
 browser

The api.js library-list fix from the previous commit never reached the browser because nginx served all .js with `Cache-Control: public, immutable; max-age=31536000`. The HTML referenced api.js with no version query, so the browser kept its year-cached buggy copy.

* nginx.conf: drop .js from the immutable long-cache block, add a no-cache must-revalidate block so future redeploys are picked up immediately.
* All HTML files: tag api.js refs with ?v=4 so already-running browsers fetch the new version on next page load.
---
 services/web-ui/nginx.conf            | 10 +++++++++-
 services/web-ui/public/capture.html   |  2 +-
 services/web-ui/public/index.html     |  2 +-
 services/web-ui/public/player.html    |  2 +-
 services/web-ui/public/recorders.html |  2 +-
 services/web-ui/public/upload.html    |  2 +-
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/services/web-ui/nginx.conf b/services/web-ui/nginx.conf
index 1fcb3de..e76fa76 100644
--- a/services/web-ui/nginx.conf
+++ b/services/web-ui/nginx.conf
@@ -19,11 +19,19 @@ server {
     root /usr/share/nginx/html;
 
     # Cache static assets aggressively
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+    location ~* \.(css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
         expires 1y;
         add_header Cache-Control "public, immutable";
     }
 
+    # JS files — must revalidate so a redeploy is picked up immediately.
+    # The static index.html links api.js with a ?v=N query string anyway,
+    # but defence-in-depth: never let a stale .js sit in a browser cache.
+    location ~* \.js$ {
+        expires -1;
+        add_header Cache-Control "no-cache, must-revalidate";
+    }
+
     # HTML files - no cache
     location ~* \.html?$ {
         expires -1;
diff --git a/services/web-ui/public/capture.html b/services/web-ui/public/capture.html
index 10386d1..eb3c9ea 100644
--- a/services/web-ui/public/capture.html
+++ b/services/web-ui/public/capture.html
@@ -312,7 +312,7 @@
 
 <div class="toast-container" id="toastContainer" aria-live="polite"></div>
 
-<script src="js/api.js"></script>
+<script src="js/api.js?v=4"></script>
 <script>
   const cState = {
     devices: [],
diff --git a/services/web-ui/public/index.html b/services/web-ui/public/index.html
index f619afe..0788ad0 100644
--- a/services/web-ui/public/index.html
+++ b/services/web-ui/public/index.html
@@ -457,7 +457,7 @@
   </div>
 </div>
 
-<script src="js/api.js"></script>
+<script src="js/api.js?v=4"></script>
 <script>
   const state = {
     projects: [],
diff --git a/services/web-ui/public/player.html b/services/web-ui/public/player.html
index ac7bb99..a8c08d0 100644
--- a/services/web-ui/public/player.html
+++ b/services/web-ui/public/player.html
@@ -304,7 +304,7 @@
         </footer>
     </div>
 
-    <script src="/js/api.js"></script>
+    <script src="/js/api.js?v=4"></script>
     <script>
         // ============================================================
         // STATE MANAGEMENT
diff --git a/services/web-ui/public/recorders.html b/services/web-ui/public/recorders.html
index 63991f3..2f59174 100644
--- a/services/web-ui/public/recorders.html
+++ b/services/web-ui/public/recorders.html
@@ -357,7 +357,7 @@
 
 <div class="toast-container" id="toastContainer" aria-live="polite"></div>
 
-<script src="js/api.js"></script>
+<script src="js/api.js?v=4"></script>
 <script>
   const pState = { recorders: [], timers: {}, sourceType: 'srt', mode: 'caller', projects: [], signals: {} };
 
diff --git a/services/web-ui/public/upload.html b/services/web-ui/public/upload.html
index 4540735..2000bbc 100644
--- a/services/web-ui/public/upload.html
+++ b/services/web-ui/public/upload.html
@@ -249,7 +249,7 @@
 
 <div class="toast-container" id="toastContainer" aria-live="polite"></div>
 
-<script src="js/api.js"></script>
+<script src="js/api.js?v=4"></script>
 <script>
   const CHUNK = 10 * 1024 * 1024; // 10 MB chunks
   const state = { projects: [], bins: [], queue: [], uploading: false };