ui(relTime): tick relative timestamps client-side so long-open tabs don't freeze

formatRelTime now wraps its label in <time data-rel-ts=...>, and both layouts include a small ticker that re-renders every 30s. Without this, a job-detail page rendered an hour ago kept showing '2h ago' when the wall-clock truth was '3h ago'.
2026-05-10 07:37:03 +01:00
parent f4db0b17e8
commit 28ef9750d3
4 changed files with 130 additions and 5 deletions
@@ -20,6 +20,37 @@

  {{template "toast" .}}

+  <script>
+  // Tick <time data-rel-ts> labels so long-open tabs don't freeze
+  // (e.g. a job page rendered an hour ago kept showing "2h ago" when
+  // the truth was "3h ago"). Buckets must match relTimeLabel in
+  // internal/server/ui/funcs.go.
+  (function () {
+    function label(ms) {
+      var suffix = 'ago';
+      if (ms < 0) { ms = -ms; suffix = 'from now'; }
+      var s = Math.floor(ms / 1000);
+      if (s < 60) return s + 's ' + suffix;
+      var m = Math.floor(s / 60);
+      if (m < 60) return m + 'm ' + suffix;
+      var h = Math.floor(m / 60);
+      if (h < 24) return h + 'h ' + suffix;
+      var d = Math.floor(h / 24);
+      if (d < 7) return d + 'd ' + suffix;
+      return Math.floor(d / 7) + 'w ' + suffix;
+    }
+    function tick() {
+      var now = Date.now();
+      document.querySelectorAll('time[data-rel-ts]').forEach(function (el) {
+        var t = Date.parse(el.getAttribute('data-rel-ts'));
+        if (!isNaN(t)) el.textContent = label(now - t);
+      });
+    }
+    tick();
+    setInterval(tick, 30000);
+  })();
+  </script>
+
 </body>
 </html>
 {{end}}
@@ -11,6 +11,34 @@
 </head>
 <body class="min-h-screen flex flex-col">
  {{block "content" .}}{{end}}
+  <script>
+  // See base.html for rationale; chromeless pages (e.g. pending host)
+  // also use the relTime helper, so they need the same ticker.
+  (function () {
+    function label(ms) {
+      var suffix = 'ago';
+      if (ms < 0) { ms = -ms; suffix = 'from now'; }
+      var s = Math.floor(ms / 1000);
+      if (s < 60) return s + 's ' + suffix;
+      var m = Math.floor(s / 60);
+      if (m < 60) return m + 'm ' + suffix;
+      var h = Math.floor(m / 60);
+      if (h < 24) return h + 'h ' + suffix;
+      var d = Math.floor(h / 24);
+      if (d < 7) return d + 'd ' + suffix;
+      return Math.floor(d / 7) + 'w ' + suffix;
+    }
+    function tick() {
+      var now = Date.now();
+      document.querySelectorAll('time[data-rel-ts]').forEach(function (el) {
+        var t = Date.parse(el.getAttribute('data-rel-ts'));
+        if (!isNaN(t)) el.textContent = label(now - t);
+      });
+    }
+    tick();
+    setInterval(tick, 30000);
+  })();
+  </script>
 </body>
 </html>
 {{end}}