hub: scoped auto-refresh + style.css cache-bust + staging rule (v0.48.0 parts 3-4)

- Auto-refresh: the 60s reload fires only while a live tab is active
  (nav data-live-tabs="overview,applications,events,host") AND no form is
  dirty (delegated input/change listener; never reset — a reload clears it).
  Skipped ticks reschedule; a muted (paused) hint shows next to the toggle on
  non-live tabs / dirty forms. Toggle, localStorage key, 60s cadence, and
  default-on behavior unchanged. The refresh script resolves the legacy
  settings→edit hash alias like the tabs script.
- Rider 4a: every template's stylesheet link is /style.css?v={{hubVersion}}
  (the v0.47.0 gotcha: max-age=3600 served stale styling for up to an hour
  after a deploy). Red-proof run: a reverted bare link fails the test.
- Rider 4b: CLAUDE.md standing rule — never git add -A in this repo
  (the 146d165 sweep incident); explicit paths + pull-rebase + one writing
  session per clone.
- Tests: Group C structural pins (attribute read, dirty listeners, alias x2,
  hint element, cadence/key survivors) + Group D cache-bust over six pages.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TZc5w5jDhFLv6qDC32KN5v

hub/internal/web/templates/customer_unified.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{if .CustomerName}}{{.CustomerName}}{{else}}{{.CustomerID}}{{end}} — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
     <meta name="csrf-token" content="{{.CSRFToken}}">
     <script>function csrfHeaders(){var el=document.querySelector('meta[name="csrf-token"]');return el?{'X-CSRF-Token':el.content}:{};}</script>
 </head>
@@ -32,6 +32,7 @@
                     <input type="checkbox" id="autoRefreshToggle">
                     <span class="toggle-slider"></span>
                     <span class="toggle-label">Auto-refresh</span>
+                    <span id="refresh-paused-hint" class="toggle-label" style="display:none">(paused)</span>
                 </label>
             </p>
             {{else}}
@@ -84,8 +85,9 @@
         {{end}}
 
         <!-- Tab nav: hash-based (#tab=<name>); with JS off it is plain anchors and every panel
-             below stays visible. -->
-        <nav class="tab-nav" id="tab-nav">
+             below stays visible. data-live-tabs = the tabs whose content changes with incoming
+             reports; the 60s auto-refresh fires ONLY while one of them is active (v0.48.0). -->
+        <nav class="tab-nav" id="tab-nav" data-live-tabs="overview,applications,events,host">
             <a href="#tab=overview" data-tab="overview" class="active">Overview</a>
             <a href="#tab=applications" data-tab="applications">Applications</a>
             <a href="#tab=setup" data-tab="setup">Setup</a>
@@ -1124,26 +1126,59 @@
     .toggle-label { color: var(--text-2); }
     </style>
     <script>
+    // Scoped auto-refresh (v0.48.0): the 60s reload fires ONLY while a live tab (the nav's
+    // data-live-tabs list) is active AND no form on the page is dirty. Dirty = any input/change
+    // anywhere (delegated listener, never reset — a reload resets it naturally). A skipped tick
+    // reschedules, so switching back to a live tab resumes on the next tick. The toggle +
+    // localStorage key + 60s cadence + default-on behavior are unchanged.
     (function() {
         var toggle = document.getElementById('autoRefreshToggle');
         if (!toggle) return;
         var key = 'hub_auto_refresh';
         var enabled = localStorage.getItem(key) !== 'off';
         var timer = null;
+        var dirty = false;
+        var nav = document.getElementById('tab-nav');
+        var liveTabs = ((nav && nav.getAttribute('data-live-tabs')) || '').split(',');
+        var hint = document.getElementById('refresh-paused-hint');
 
         toggle.checked = enabled;
 
-        function setRefresh(on) {
-            clearTimeout(timer);
-            if (on) timer = setTimeout(function() { location.reload(); }, 60000);
+        function activeTab() {
+            var m = (location.hash || '').match(/^#tab=([a-z-]+)$/);
+            var t = m ? m[1] : 'overview';
+            if (t === 'settings') t = 'edit'; // legacy alias, same as the tabs script
+            return t;
         }
+        function onLiveTab() { return liveTabs.indexOf(activeTab()) !== -1; }
+        function updateHint() {
+            if (hint) hint.style.display = (!onLiveTab() || dirty) ? 'inline' : 'none';
+        }
+        function tick() {
+            if (toggle.checked && onLiveTab() && !dirty) { location.reload(); return; }
+            schedule(); // skipped (non-live tab or dirty form) — try again next tick
+        }
+        function schedule() {
+            clearTimeout(timer);
+            if (toggle.checked) timer = setTimeout(tick, 60000);
+        }
+        function markDirty(e) {
+            if (e.target === toggle) return; // the auto-refresh toggle itself is not form input
+            dirty = true;
+            updateHint();
+        }
+        document.addEventListener('input', markDirty);
+        document.addEventListener('change', markDirty);
+        window.addEventListener('hashchange', updateHint);
 
         toggle.addEventListener('change', function() {
             localStorage.setItem(key, this.checked ? 'on' : 'off');
-            setRefresh(this.checked);
+            updateHint();
+            schedule();
         });
 
-        setRefresh(enabled);
+        updateHint();
+        schedule();
     })();
     </script>
     {{end}}