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

CLAUDE.md

@@ -77,6 +77,10 @@ pushes; **you (Claude Code) implement**. A file being open in the editor is NOT
 > **Never write secrets** into any committed file — reference them as "stored out-of-band".
 
 - Update `REUSE.md` if you added/changed/deprecated a shared helper or pattern (same commit).
+- **Never `git add -A` in this repo** — parallel sessions share the clone and it sweeps foreign
+  WIP (the v0.47.0 `146d165` incident: a red-proof-mutated guard got swept to `main`). Stage
+  explicit paths only, `git pull --rebase` before every push, and do not run two writing
+  sessions on one clone (use `git worktree` if truly needed).
 
 ## Tech stack (Hub)
 

hub/internal/web/refresh_cachebust_test.go

@@ -0,0 +1,114 @@
+package web
+
+// v0.48.0 parts 3+4a — scoped auto-refresh (Group C: structural pins; live behavior is validated
+// in the browser per the task's §13) and the style.css cache-bust rider (Group D).
+
+import (
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"gitea.dooplex.hu/admin/felhom-hub/internal/store"
+)
+
+// Group C — the refresh machinery's server-rendered structure: the live-tab list is DATA on the
+// nav, the script consumes that attribute (not a hardcoded copy), a delegated dirty listener
+// exists, and the legacy #tab=settings hash still lands on the Edit tab.
+func TestCustomerRefresh_ScopedStructure(t *testing.T) {
+	s, st := newTestServer(t)
+	if err := st.SaveCustomerConfig(&store.CustomerConfig{
+		CustomerID: "c1", CustomerName: "Acme", Domain: "acme.hu",
+		RetrievalPassword: "pw", APIKey: "k", Status: "active",
+	}); err != nil {
+		t.Fatal(err)
+	}
+	// The toggle + refresh script render only with reports.
+	if err := st.SaveReport("c1", []byte(tabsTestReportJSON)); err != nil {
+		t.Fatal(err)
+	}
+	html := renderCustomerPage(t, s, "c1")
+
+	// The nav carries the live-tab set (edit/setup/backup/notifications are deliberately absent).
+	if !strings.Contains(html, `data-live-tabs="overview,applications,events,host"`) {
+		t.Error("tab nav missing the data-live-tabs attribute")
+	}
+	// The script READS the attribute — the literal appears beyond the nav markup itself.
+	if !strings.Contains(html, `getAttribute('data-live-tabs')`) {
+		t.Error("refresh script does not read data-live-tabs (hardcoded live set?)")
+	}
+	// Delegated dirty listener: any input anywhere pauses the reload.
+	if !strings.Contains(html, `document.addEventListener('input', markDirty)`) ||
+		!strings.Contains(html, `document.addEventListener('change', markDirty)`) {
+		t.Error("delegated input/change dirty listeners missing")
+	}
+	// Legacy hash alias: #tab=settings activates the Edit tab — in the tabs script AND the
+	// refresh script's live-tab resolution.
+	if got := strings.Count(html, `if (t === 'settings') t = 'edit';`); got != 2 {
+		t.Errorf("settings→edit alias count = %d, want 2 (tabs script + refresh script)", got)
+	}
+	// The (paused) hint element next to the toggle.
+	if !strings.Contains(html, `id="refresh-paused-hint"`) {
+		t.Error("(paused) hint element missing")
+	}
+	// The cadence, key, and toggle survived the rework.
+	for _, want := range []string{"60000", "hub_auto_refresh", `id="autoRefreshToggle"`} {
+		if !strings.Contains(html, want) {
+			t.Errorf("refresh machinery missing %q", want)
+		}
+	}
+}
+
+// Group D — every rendered page's stylesheet link carries the version cache-bust (the v0.47.0
+// gotcha: /style.css is served with max-age=3600, so an unversioned link shows stale styling for
+// up to an hour after a deploy). RED-PROOF: reverting one template's link to a bare
+// href="/style.css" fails that page's negative assertion.
+func TestTemplates_StyleCSSCacheBust(t *testing.T) {
+	s, st := newTestServer(t) // version = "test" → the link must be /style.css?v=test
+	if err := st.SaveCustomerConfig(&store.CustomerConfig{
+		CustomerID: "c1", CustomerName: "Acme", Domain: "acme.hu",
+		RetrievalPassword: "pw", APIKey: "k", Status: "active",
+	}); err != nil {
+		t.Fatal(err)
+	}
+	if err := st.UpsertHost(&store.Host{HostID: "h1", CustomerID: "c1", APIKey: "hk"}); err != nil {
+		t.Fatal(err)
+	}
+
+	pages := map[string]func() string{
+		"dashboard": func() string {
+			rr := httptest.NewRecorder()
+			s.handleDashboard(rr, httptest.NewRequest("GET", "/", nil))
+			return rr.Body.String()
+		},
+		"customer": func() string { return renderCustomerPage(t, s, "c1") },
+		"host detail": func() string {
+			rr := httptest.NewRecorder()
+			s.handleHostDetail(rr, httptest.NewRequest("GET", "/hosts/h1", nil), "h1")
+			return rr.Body.String()
+		},
+		"offsite": func() string {
+			rr := httptest.NewRecorder()
+			s.handleOffsite(rr, httptest.NewRequest("GET", "/offsite", nil))
+			return rr.Body.String()
+		},
+		"customers list": func() string {
+			rr := httptest.NewRecorder()
+			s.handleConfigList(rr, httptest.NewRequest("GET", "/configs", nil))
+			return rr.Body.String()
+		},
+		"config form (standalone)": func() string {
+			rr := httptest.NewRecorder()
+			s.handleConfigNewForm(rr, httptest.NewRequest("GET", "/configs/new", nil))
+			return rr.Body.String()
+		},
+	}
+	for name, render := range pages {
+		html := render()
+		if !strings.Contains(html, `href="/style.css?v=test"`) {
+			t.Errorf("%s: stylesheet link missing the ?v={{hubVersion}} cache-bust", name)
+		}
+		if strings.Contains(html, `href="/style.css"`) {
+			t.Errorf("%s: bare /style.css link remains", name)
+		}
+	}
+}

hub/internal/web/templates/app_detail.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.AppName}} — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
     <script src="/static/chart.min.js"></script>
 </head>
 <body>

hub/internal/web/templates/apps.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Apps — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
 </head>
 <body>
     {{template "icon_sprite"}}

hub/internal/web/templates/configs.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Felhom Hub — Customers</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
 </head>
 <body>
     {{template "icon_sprite"}}

hub/internal/web/templates/configuration.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Configuration — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
 </head>
 <body>
     {{template "icon_sprite"}}

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}}

hub/internal/web/templates/dashboard.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Felhom Hub — Customer Overview</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
     <meta http-equiv="refresh" content="60">
 </head>
 <body>

hub/internal/web/templates/host_detail.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.HostID}} — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
 </head>
 <body>
     {{template "icon_sprite"}}

hub/internal/web/templates/hosts.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hosts — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
 </head>
 <body>
     {{template "icon_sprite"}}

hub/internal/web/templates/log_tail.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.Tail.AppName}} log tail — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
 </head>
 <body>
     {{template "icon_sprite"}}

hub/internal/web/templates/offsite.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Offsite — Felhom Hub</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.css?v={{hubVersion}}">
 </head>
 <body>
     {{template "icon_sprite"}}