From 5ebf0d5fe4de1a9429fa85a8bca633f4765e0215 Mon Sep 17 00:00:00 2001
From: kisfenyo <nagyfenyvesi.viktor@gmail.com>
Date: Fri, 27 Feb 2026 09:19:29 +0100
Subject: [PATCH] feat: add auto-refresh toggle on customer detail page

Replace the hardcoded 60s meta-refresh with a JavaScript-based timer
and a toggle switch in the page header. The preference persists across
page loads via localStorage (enabled by default).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../web/templates/customer_unified.html       | 76 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/hub/internal/web/templates/customer_unified.html b/hub/internal/web/templates/customer_unified.html
index a4c5632..6caaef6 100644
--- a/hub/internal/web/templates/customer_unified.html
+++ b/hub/internal/web/templates/customer_unified.html
@@ -5,7 +5,6 @@
     <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">
-    {{if .HasReports}}<meta http-equiv="refresh" content="60">{{end}}
     <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>
@@ -24,7 +23,14 @@
                 {{if .CustomerName}}{{.CustomerName}}{{else}}{{.CustomerID}}{{end}}
             </h1>
             {{if .HasReports}}
-            <p class="subtitle">Last report: {{timeAgo .Customer.ReceivedAt}} &middot; Controller {{.Customer.ControllerVersion}}</p>
+            <p class="subtitle">
+                Last report: {{timeAgo .Customer.ReceivedAt}} &middot; Controller {{.Customer.ControllerVersion}}
+                <label class="auto-refresh-toggle" title="Auto-refresh every 60s">
+                    <input type="checkbox" id="autoRefreshToggle">
+                    <span class="toggle-slider"></span>
+                    <span class="toggle-label">Auto-refresh</span>
+                </label>
+            </p>
             {{else}}
             <p class="subtitle">No reports received yet</p>
             {{end}}
@@ -875,5 +881,71 @@
         });
     {{end}}
     </script>
+
+    {{if .HasReports}}
+    <style>
+    .auto-refresh-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4rem;
+        margin-left: 1rem;
+        cursor: pointer;
+        vertical-align: middle;
+        font-size: 0.8rem;
+        user-select: none;
+    }
+    .auto-refresh-toggle input { display: none; }
+    .toggle-slider {
+        position: relative;
+        width: 32px;
+        height: 18px;
+        background: #475569;
+        border-radius: 9px;
+        transition: background 0.2s;
+    }
+    .toggle-slider::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 14px;
+        height: 14px;
+        background: #94a3b8;
+        border-radius: 50%;
+        transition: transform 0.2s, background 0.2s;
+    }
+    .auto-refresh-toggle input:checked + .toggle-slider {
+        background: #22c55e;
+    }
+    .auto-refresh-toggle input:checked + .toggle-slider::after {
+        transform: translateX(14px);
+        background: #fff;
+    }
+    .toggle-label { color: #94a3b8; }
+    </style>
+    <script>
+    (function() {
+        var toggle = document.getElementById('autoRefreshToggle');
+        if (!toggle) return;
+        var key = 'hub_auto_refresh';
+        var enabled = localStorage.getItem(key) !== 'off';
+        var timer = null;
+
+        toggle.checked = enabled;
+
+        function setRefresh(on) {
+            clearTimeout(timer);
+            if (on) timer = setTimeout(function() { location.reload(); }, 60000);
+        }
+
+        toggle.addEventListener('change', function() {
+            localStorage.setItem(key, this.checked ? 'on' : 'off');
+            setRefresh(this.checked);
+        });
+
+        setRefresh(enabled);
+    })();
+    </script>
+    {{end}}
 </body>
 </html>