From 28ef9750d365c05a248b6c78dbc88323c561884f Mon Sep 17 00:00:00 2001
From: Steve Cliff <steve@devcloud.guru>
Date: Sun, 10 May 2026 07:37:03 +0100
Subject: [PATCH] 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'.
---
 internal/server/ui/funcs.go           | 27 ++++++++++++---
 internal/server/ui/funcs_test.go      | 49 +++++++++++++++++++++++++++
 web/templates/layouts/base.html       | 31 +++++++++++++++++
 web/templates/layouts/chromeless.html | 28 +++++++++++++++
 4 files changed, 130 insertions(+), 5 deletions(-)
 create mode 100644 internal/server/ui/funcs_test.go

diff --git a/internal/server/ui/funcs.go b/internal/server/ui/funcs.go
index 33d1260..3322590 100644
--- a/internal/server/ui/funcs.go
+++ b/internal/server/ui/funcs.go
@@ -221,23 +221,40 @@ func formatBytes(n int64) template.HTML {
 // "in 5m"-style. Accepts *time.Time or time.Time so templates can
 // pass either without fighting Go's lack of an address-of operator.
 // Anything else returns "—".
-func formatRelTime(v any) string {
+//
+// The output is wrapped in a <time data-rel-ts="..."> element so a
+// small client-side ticker (see base.html) can refresh the label
+// without a full page reload — otherwise a long-open tab shows
+// timestamps frozen at render time.
+func formatRelTime(v any) template.HTML {
 	var t time.Time
 	switch x := v.(type) {
 	case time.Time:
 		t = x
 	case *time.Time:
 		if x == nil {
-			return "—"
+			return template.HTML("—")
 		}
 		t = *x
 	default:
-		return "—"
+		return template.HTML("—")
 	}
 	if t.IsZero() {
-		return "—"
+		return template.HTML("—")
 	}
-	d := time.Since(t)
+	label := relTimeLabel(time.Since(t))
+	return template.HTML(fmt.Sprintf(
+		`<time data-rel-ts="%s" title="%s">%s</time>`,
+		t.UTC().Format(time.RFC3339Nano),
+		t.UTC().Format("2006-01-02 15:04:05 UTC"),
+		label,
+	))
+}
+
+// relTimeLabel turns a duration-since-now into the short human label
+// used by formatRelTime (and mirrored verbatim by the JS ticker, so
+// keep the two in sync if you change the buckets).
+func relTimeLabel(d time.Duration) string {
 	suffix := "ago"
 	if d < 0 {
 		d = -d
diff --git a/internal/server/ui/funcs_test.go b/internal/server/ui/funcs_test.go
new file mode 100644
index 0000000..efacbab
--- /dev/null
+++ b/internal/server/ui/funcs_test.go
@@ -0,0 +1,49 @@
+package ui
+
+import (
+	"strings"
+	"testing"
+	"time"
+)
+
+func TestFormatRelTimeWrapsInTickableTimeElement(t *testing.T) {
+	// A long-open tab needs a stable anchor so the JS ticker can
+	// refresh the label — see base.html.
+	when := time.Now().Add(-3 * time.Hour)
+	got := string(formatRelTime(when))
+	if !strings.Contains(got, `<time data-rel-ts="`) {
+		t.Errorf("missing data-rel-ts anchor in %q", got)
+	}
+	if !strings.Contains(got, "3h ago</time>") {
+		t.Errorf("expected '3h ago' label, got %q", got)
+	}
+}
+
+func TestFormatRelTimeNilReturnsDash(t *testing.T) {
+	var p *time.Time
+	if string(formatRelTime(p)) != "—" {
+		t.Errorf("nil should render as em-dash, got %q", formatRelTime(p))
+	}
+	if string(formatRelTime(time.Time{})) != "—" {
+		t.Errorf("zero should render as em-dash")
+	}
+}
+
+func TestRelTimeLabelBuckets(t *testing.T) {
+	cases := []struct {
+		d    time.Duration
+		want string
+	}{
+		{30 * time.Second, "30s ago"},
+		{5 * time.Minute, "5m ago"},
+		{2 * time.Hour, "2h ago"},
+		{3 * 24 * time.Hour, "3d ago"},
+		{2 * 7 * 24 * time.Hour, "2w ago"},
+		{-5 * time.Minute, "5m from now"},
+	}
+	for _, c := range cases {
+		if got := relTimeLabel(c.d); got != c.want {
+			t.Errorf("relTimeLabel(%v) = %q, want %q", c.d, got, c.want)
+		}
+	}
+}
diff --git a/web/templates/layouts/base.html b/web/templates/layouts/base.html
index 6e3533d..900c0ea 100644
--- a/web/templates/layouts/base.html
+++ b/web/templates/layouts/base.html
@@ -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}}
diff --git a/web/templates/layouts/chromeless.html b/web/templates/layouts/chromeless.html
index 024bffa..dab1b7f 100644
--- a/web/templates/layouts/chromeless.html
+++ b/web/templates/layouts/chromeless.html
@@ -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}}