Show the last event as a relative time with a UTC tooltip (closes #567)

The "Last event" figure in the webhook page's Statistics block now shows how long ago the newest event arrived, as its two largest units of d, h, m and s with no spaces ("59s", "1m1s", "3d4h"; a zero second unit is left off). It is worked out when the page is served, and a time ahead of the server clock shows "0s". Its tooltip is the full time in UTC. With no event it still shows "none", without a tooltip. A unit test pins each unit boundary, and the headless-browser test checks the figure and its tooltip.

Model: opus-5-5

.dockerignore

@@ -72,10 +72,8 @@
 **/*.sublime-*
 
 # This repository's own host-built artifacts: the binary `make build`
-# writes, and the Alpine.js file `make assets` extracts from 3p/ (the
+# writes.
-# build extracts its own).
 /bin
-/static/js/alpine.min.js
 
 # SQLite databases, which hold the session key and webhook payloads, at
 # any depth.

.gitignore

@@ -77,7 +77,3 @@ data/
 # Temporary files
 tmp/
 temp/
-
-# Alpine.js, extracted by `make assets` from its tarball in 3p/, which is
-# what is committed.
-/static/js/alpine.min.js

.prettierignore

@@ -1,2 +1,3 @@
 node_modules/
 yarn.lock
+static/js/alpine.min.js

Dockerfile

@@ -92,10 +92,6 @@ COPY . .
 # fmt-check` is the markdown-check stage above.
 RUN if [ -n "$(gofmt -s -l .)" ]; then echo "gofmt needed on:"; gofmt -s -l .; exit 1; fi
 
-# static/static.go embeds the Alpine.js file this extracts from 3p/; without
-# it the static package does not compile and cannot be linted.
-RUN script/assets
-
 # The golangci-lint steps run with --network=none. `golangci-lint config
 # verify` is documented as fetching its JSON schema over HTTPS; this pinned
 # image resolves the schema without any network, and --network=none enforces
@@ -130,9 +126,6 @@ RUN go mod download
 
 COPY . .
 
-# static/static.go embeds the Alpine.js file this extracts from 3p/.
-RUN script/assets
-
 # -timeout applies to each package on its own, so 90s has only to clear the
 # slowest one. -p 4 -parallel 8 keep the run under 2 GB of memory: at most
 # four test binaries build or run at once, each with at most eight parallel
@@ -211,10 +204,8 @@ RUN version="$(make version VERSION="$VERSION")"; \
         esac; \
     fi
 
-# Builds through the Makefile's build target, which runs script/assets
+# The Makefile's build target builds with cgo off, so the binary is
-# (Alpine.js, extracted from its tarball in 3p/) first. The target builds
+# statically linked and runs on the Alpine runtime image below.
-# with cgo off, so the binary is statically linked and runs on the Alpine
-# runtime image below as it is.
 RUN make build VERSION="$VERSION"
 
 # Runtime stage

Dockerfile.browser

@@ -17,7 +17,7 @@ COPY . .
 # The test binary embeds the templates and static files, so the browser
 # stage needs nothing else. It is built with cgo off and -p 4 keeps the
 # compile's memory down, both as in the test phase of Dockerfile.
-RUN make assets && CGO_ENABLED=0 go test -c -p 4 -tags browser -o /browser.test ./internal/server
+RUN CGO_ENABLED=0 go test -c -p 4 -tags browser -o /browser.test ./internal/server
 
 # chromedp/headless-shell:151.0.7922.109 (Debian trixie), 2026-08-11. The
 # browser is on PATH as headless-shell, where the test's browser library

Makefile

@@ -1,4 +1,4 @@
-.PHONY: bootstrap setup assets test test-browser lint fmt fmt-check check build run dev deps docker clean hooks css css-check version
+.PHONY: bootstrap setup test test-browser lint fmt fmt-check check build run dev deps docker clean hooks css css-check version
 
 # Default target
 .DEFAULT_GOAL := check
@@ -22,9 +22,6 @@ bootstrap:
 setup:
 	@script/setup
 
-assets:
-	@script/assets
-
 test:
 	@script/test
 
@@ -47,13 +44,13 @@ check:
 # REPO_POLICIES.md does: the binary carries no build paths, symbol table or
 # debug information, and on Linux, the image's included, it is statically
 # linked.
-build: assets
+build:
 	CGO_ENABLED=0 go build -trimpath -ldflags '-s -w -X main.version=$(VERSION)' -o bin/webhooker ./cmd/webhooker
 
 run: build
 	./bin/webhooker
 
-dev: assets
+dev:
 	go run ./cmd/webhooker
 
 deps:

TODO.md

@@ -14,7 +14,7 @@ Nothing stays local-only: every commit is pushed.
 
 `next` is the branch for the next milestone. It must stay green and mergeable
 into `main` at all times. A milestone's work reaches `main` through one PR from
-`next`, which the owner, @sneak, merges. Cutting a release from `main` is a
+`next`. The owner, @sneak, merges that PR. Cutting a release from `main` is a
 separate step after that.
 
 The tracker (https://git.eeqj.de/sneak/webhooker/issues) records what is done
@@ -59,16 +59,16 @@ tag.
   It lasts up to 7 days. It ends sooner after `SESSION_IDLE_TIMEOUT` (default 24
   hours) without use.
 - Password reset over the web for a forgotten password. Today a signed-in user
-  can change their password. A lost password is reset from the console with
+  can change their password. A lost password is reset from the command line with
   `webhooker resetpw` (https://git.eeqj.de/sneak/webhooker/issues/208).
 - Later, nice to have
     - email delivery target type
     - SNS and S3 delivery targets
     - data transformations, such as a configurable Slack message format. The
       Slack target sends one fixed format today.
-    - JSONL file delivery with periodic S3 upload. Today the `database` target
+    - JSONL file delivery with periodic S3 upload. Today an archive target
-      archives events to SQLite files. A target can rotate those files hourly,
+      writes events to SQLite files. An archive target can rotate those files
-      daily or monthly. The webhook page offers them as one gzipped JSON
+      hourly, daily or monthly. The webhook page offers them as one gzipped JSON
       download.
     - webhook event search, and filtering beyond the event log's failed and
       pending views

eslint.config.mjs

@@ -5,7 +5,7 @@
 // REPO_POLICIES.md states that a linter can check: const for everything,
 // let only for a variable that is reassigned, never var.
 export default [
-    // Alpine.js, extracted from 3p/ by make assets; not ours to lint.
+    // Alpine.js, committed as published; not ours to lint.
     { ignores: ["static/js/alpine.min.js"] },
     {
         // The pages load static/js/app.js as a classic script, not a module.

internal/handlers/export_test.go

@@ -96,6 +96,12 @@ func (s *Handlers) WebhookStatsForTest(webhookID string) *WebhookStats {
 	return s.loadWebhookStats(webhookID, entrypoints, targets)
 }
 
+// RelativeTimeForTest exposes relativeTime for use in the
+// handlers_test package.
+func RelativeTimeForTest(at, now time.Time) string {
+	return relativeTime(at, now)
+}
+
 // FinishedByTargetForTest exposes finishedByTarget for use in the
 // handlers_test package.
 func FinishedByTargetForTest(

internal/handlers/webhook_stats.go

@@ -15,6 +15,9 @@ const (
 	longWindow  = 24 * time.Hour
 )
 
+// day is the largest unit relativeTime writes.
+const day = 24 * time.Hour
+
 // percent turns a fraction into a percentage.
 const percent = 100
 
@@ -35,8 +38,12 @@ type WebhookStats struct {
 	InProgress int64
 
 	// LastEventAt is when the newest event arrived, or nil when none
-	// has. Retention does not change it.
+	// has. Retention does not change it. LastEvent is how long ago
-	LastEventAt *time.Time
+	// that was, as relativeTime writes it, and LastEventUTC the full
+	// time; both are empty when no event has arrived.
+	LastEventAt  *time.Time
+	LastEvent    string
+	LastEventUTC string
 
 	Last10Minutes RecentWindow
 	Last24Hours   RecentWindow
@@ -81,6 +88,42 @@ func (w RecentWindow) FailurePercent() string {
 	)
 }
 
+// relativeTime is how long before now the time at was, in whole
+// seconds, written as its two largest units out of d, h, m and s:
+// "59s", "1m1s", "23h59m", "3d4h". A second unit of zero is left off,
+// as in "5m". A time after now is "0s".
+func relativeTime(at, now time.Time) string {
+	elapsed := max(now.Sub(at), 0)
+
+	days := int64(elapsed / day)
+	hours := int64(elapsed % day / time.Hour)
+	minutes := int64(elapsed % time.Hour / time.Minute)
+	seconds := int64(elapsed % time.Minute / time.Second)
+
+	switch {
+	case days > 0:
+		return twoUnits(days, "d", hours, "h")
+	case hours > 0:
+		return twoUnits(hours, "h", minutes, "m")
+	case minutes > 0:
+		return twoUnits(minutes, "m", seconds, "s")
+	default:
+		return fmt.Sprintf("%ds", seconds)
+	}
+}
+
+// twoUnits writes a count of a larger unit followed by a count of the
+// next smaller one, leaving the smaller off when it is zero.
+func twoUnits(
+	larger int64, largerUnit string, smaller int64, smallerUnit string,
+) string {
+	if smaller == 0 {
+		return fmt.Sprintf("%d%s", larger, largerUnit)
+	}
+
+	return fmt.Sprintf("%d%s%d%s", larger, largerUnit, smaller, smallerUnit)
+}
+
 // loadWebhookStats gathers the figures for the statistics pane from the
 // webhook's entrypoints and targets, as the page has already loaded
 // them, and from its event database. It returns nil, and logs why, when
@@ -139,7 +182,7 @@ func (h *Handlers) loadWebhookStats(
 func readEventStats(
 	db *gorm.DB, now time.Time, stats *WebhookStats,
 ) error {
-	err := readTotals(db, stats)
+	err := readTotals(db, now, stats)
 	if err != nil {
 		return err
 	}
@@ -169,9 +212,9 @@ func readEventStats(
 }
 
 // readTotals fills in the lifetime and within-retention figures, and
-// when the last event arrived, from the running totals: the events'
+// when the last event arrived and how long before now that was, from
-// row, and the targets' rows summed.
+// the running totals: the events' row, and the targets' rows summed.
-func readTotals(db *gorm.DB, stats *WebhookStats) error {
+func readTotals(db *gorm.DB, now time.Time, stats *WebhookStats) error {
 	var events database.EventTotals
 
 	err := db.Take(&events).Error
@@ -190,6 +233,12 @@ func readTotals(db *gorm.DB, stats *WebhookStats) error {
 	stats.WithinRetention.Events = events.Events - events.EventsRemoved
 	stats.LastEventAt = events.LastEventAt
 
+	if events.LastEventAt != nil {
+		stats.LastEvent = relativeTime(*events.LastEventAt, now)
+		stats.LastEventUTC =
+			events.LastEventAt.UTC().Format(time.DateTime) + " UTC"
+	}
+
 	for _, t := range targets {
 		stats.Lifetime.Deliveries += t.Deliveries
 		stats.Lifetime.Failures += t.Failed

internal/handlers/webhook_stats_test.go

@@ -265,6 +265,13 @@ func statsPane(t *testing.T, page string) string {
 	return strings.Join(strings.Fields(pane), " ")
 }
 
+// statsLastEventShown matches the pane's last event for an event that
+// arrived at at: a figure with the full time in UTC as its tooltip.
+func statsLastEventShown(at time.Time) string {
+	return `Last event</span>\s*<span [^>]*title="` +
+		at.UTC().Format(time.DateTime) + ` UTC">[^<]+</span>`
+}
+
 // assertStatsTargets checks, for the history seedStatsHistory builds,
 // each target's totals and its deliveries finished in the last 24
 // hours. The first target has ten deliveries and the replay, the
@@ -300,14 +307,17 @@ func assertStatsPaneAfterPrune(
 ) {
 	t.Helper()
 
-	pane := statsPane(t, renderSourceDetailPage(t, h, sess, hist.webhook.ID))
+	page := renderSourceDetailPage(t, h, sess, hist.webhook.ID)
-	lastEvent := hist.newest.CreatedAt.UTC().Format("2006-01-02 15:04:05 UTC")
+	pane := statsPane(t, page)
 
-	assert.Contains(t, pane, "Entrypoints 12 (11 active) "+
+	// The newest event arrived moments ago, so the last event is a
-		"Targets 6 (2 active) "+
+	// few seconds ago.
-		"Deliveries in progress 13 "+
+	assert.Regexp(t, `Entrypoints 12 \(11 active\) `+
-		"Last event "+lastEvent+" "+
+		`Targets 6 \(2 active\) `+
-		"Retention 14 days")
+		`Deliveries in progress 13 `+
+		`Last event \d+s `+
+		`Retention 14 days`, pane)
+	assert.Regexp(t, statsLastEventShown(hist.newest.CreatedAt), page)
 	assert.Contains(t, pane, "Lifetime Within retention "+
 		"Events 10 9 "+
 		"Deliveries 21 18 "+
@@ -440,15 +450,14 @@ func TestWebhookStats_LastEventSurvivesPruningEveryEvent(t *testing.T) {
 	require.NotNil(t, stats.LastEventAt)
 	assert.True(t, arrived.Equal(*stats.LastEventAt))
 
-	pane := statsPane(t, renderSourceDetailPage(t, h, sess, wh.ID))
+	assert.Regexp(t, statsLastEventShown(arrived),
-	assert.Contains(t, pane,
+		renderSourceDetailPage(t, h, sess, wh.ID))
-		"Last event "+arrived.UTC().Format("2006-01-02 15:04:05 UTC"))
 }
 
-// TestWebhookStats_LastEventInUTC checks that the pane shows when the
+// TestWebhookStats_LastEventInUTC checks that the tooltip of the pane's
-// last event arrived in UTC, as the event list does, when the time was
+// last event gives the time in UTC, as the event list does, when the
-// stored in another zone, as it is on a host whose local time is not
+// time was stored in another zone, as it is on a host whose local time
-// UTC.
+// is not UTC.
 func TestWebhookStats_LastEventInUTC(t *testing.T) {
 	t.Parallel()
 
@@ -474,8 +483,9 @@ func TestWebhookStats_LastEventInUTC(t *testing.T) {
 	require.NoError(t, database.AddEventTotals(webhookDB,
 		database.EventTotals{Events: 1, LastEventAt: &arrived}))
 
-	pane := statsPane(t, renderSourceDetailPage(t, h, sess, wh.ID))
+	assert.Regexp(t,
-	assert.Contains(t, pane, "Last event 2026-03-05 03:30:00 UTC")
+		`Last event</span>\s*<span [^>]*title="2026-03-05 03:30:00 UTC">`,
+		renderSourceDetailPage(t, h, sess, wh.ID))
 }
 
 // TestWebhookStats_PaneShowsRetentionPeriod checks that the statistics
@@ -541,8 +551,11 @@ func TestWebhookStats_WebhookWithNoEvents(t *testing.T) {
 	assert.Equal(t, &handlers.WebhookStats{}, h.WebhookStatsForTest(wh.ID))
 	assert.Equal(t, "—", handlers.RecentWindow{}.FailurePercent())
 
-	pane := statsPane(t, renderSourceDetailPage(t, h, sess, wh.ID))
+	page := renderSourceDetailPage(t, h, sess, wh.ID)
+	pane := statsPane(t, page)
 	assert.Contains(t, pane, "Last event none")
+	assert.Regexp(t, `Last event</span>\s*<span class="[^"]*">none</span>`,
+		page, "a last event of none has a tooltip")
 	assert.Contains(t, pane, "Failure percentage — —")
 	assert.False(t, dbMgr.DBExists(wh.ID))
 }
@@ -567,3 +580,35 @@ func TestRecentWindow_FailurePercent(t *testing.T) {
 		assert.Equal(t, tt.want, tt.window.FailurePercent(), tt.window)
 	}
 }
+
+// TestRelativeTime pins how the pane writes the time since the last
+// event, at each boundary between its units.
+func TestRelativeTime(t *testing.T) {
+	t.Parallel()
+
+	now := time.Date(2026, time.October, 26, 12, 0, 0, 0, time.UTC)
+
+	tests := []struct {
+		ago  time.Duration
+		want string
+	}{
+		{0, "0s"},
+		{59900 * time.Millisecond, "59s"},
+		{60 * time.Second, "1m"},
+		{61 * time.Second, "1m1s"},
+		{3599 * time.Second, "59m59s"},
+		{3600 * time.Second, "1h"},
+		{3660 * time.Second, "1h1m"},
+		{86399 * time.Second, "23h59m"},
+		{86400 * time.Second, "1d"},
+		{90000 * time.Second, "1d1h"},
+		{400*24*time.Hour + 3*time.Hour, "400d3h"},
+		// An event time ahead of the server clock.
+		{-90 * time.Second, "0s"},
+	}
+
+	for _, tt := range tests {
+		assert.Equal(t, tt.want,
+			handlers.RelativeTimeForTest(now.Add(-tt.ago), now), tt.ago)
+	}
+}

internal/server/alpine_browser_test.go

@@ -61,7 +61,8 @@ const (
 // event log in a headless browser, served by the real router and so
 // under the real Content-Security-Policy, and checks that the pages'
 // Alpine.js directives, the copy control and the delete prompts work,
-// and that a target's row shows its delivery counts.
+// that a target's row shows its delivery counts, and that the
+// Statistics block shows how long ago the last event arrived.
 func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 	t.Parallel()
 
@@ -97,6 +98,7 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 	checkCopy(ctx, t, page)
 	checkEntrypointEdit(ctx, t, page, page+"/events")
 	checkRecentEvents(ctx, t, page)
+	checkStatsLastEvent(ctx, t, env, webhook.ID, page)
 	checkArchiveChoice(ctx, t, srv.URL+"/hooks/new", page)
 	checkNewWebhookTargets(ctx, t, env, srv.URL+"/hooks/new")
 	checkRefusedNewWebhook(ctx, t, srv.URL+"/hooks/new")
@@ -831,6 +833,41 @@ func checkRecentEvents(ctx context.Context, t *testing.T, url string) {
 		"the event's own page does not show its body")
 }
 
+// checkStatsLastEvent records that the last event of the webhook
+// webhookID arrived 3 days, 4 hours and 30 minutes ago, loads its page,
+// and checks that the Statistics block shows the last event as "3d4h"
+// with the full time in UTC as its tooltip.
+func checkStatsLastEvent(
+	ctx context.Context, t *testing.T, env *testEnv, webhookID, url string,
+) {
+	t.Helper()
+
+	webhookDB, err := env.dbMgr.GetDB(webhookID)
+	require.NoError(t, err)
+
+	ago := 3*24*time.Hour + 4*time.Hour + 30*time.Minute
+	arrived := time.Now().Add(-ago)
+	require.NoError(t, database.AddEventTotals(webhookDB,
+		database.EventTotals{LastEventAt: &arrived}))
+
+	figure := `//span[text()="Last event"]` +
+		`/following-sibling::span[text()="3d4h"]`
+
+	var (
+		title string
+		found bool
+	)
+
+	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
+	require.True(t, shown(ctx, figure),
+		`the Statistics block does not show the last event as "3d4h"`)
+	require.NoError(t, chromedp.Run(ctx, chromedp.AttributeValue(
+		figure, "title", &title, &found, chromedp.BySearch,
+	)))
+	assert.Equal(t, arrived.UTC().Format(time.DateTime)+" UTC", title,
+		"the last event's tooltip is not the full time in UTC")
+}
+
 // checkEventLog loads the event log and checks that of its events only
 // the newest, eventID, starts expanded: its row says so and its caret is
 // turned up, and the log's last event, lastEventID, starts collapsed. In

internal/server/static_assets_test.go

@@ -13,9 +13,6 @@ import (
 
 // TestBaseTemplateScriptsAreServed walks every /s/ script the base
 // template loads on each page and fetches it through the real router.
-// Alpine.js is extracted from its tarball in 3p/ at build time, so the
-// file is not in the tree: this is the check that the page still gets
-// the JavaScript it asks for.
 func TestBaseTemplateScriptsAreServed(t *testing.T) {
 	t.Parallel()
 

script/assets

@@ -1,17 +0,0 @@
-#!/bin/sh
-# script/assets: extract Alpine.js from its npm package tarball, committed
-# in 3p/, to static/js/alpine.min.js, where go:embed reads it. The package
-# is @alpinejs/csp, Alpine's build for pages whose Content-Security-Policy
-# forbids eval. The extracted file is not committed. make build, make dev
-# and the Dockerfile's lint, test and build stages run this first.
-set -eu
-
-ROOT="$(cd "$(dirname "$0")/.." && pwd -P)"
-
-main() {
-    cd "$ROOT"
-    tar -xzOf 3p/alpinejs-csp-3.14.9.tgz package/dist/cdn.min.js \
-        >static/js/alpine.min.js
-}
-
-main "$@"

static/static.go

@@ -6,9 +6,11 @@ import (
 )
 
 // Static holds the CSS and JavaScript files the web UI's pages load. They
-// are named one by one so that a missing js/alpine.min.js, which make
+// are named one by one, so a missing file fails the build instead of
-// assets extracts and git does not track, fails the build instead of
+// leaving the pages without it.
-// leaving the pages without Alpine.js.
+//
+// js/alpine.min.js is Alpine.js, committed unchanged. It is
+// package/dist/cdn.min.js from the npm package @alpinejs/csp 3.14.9.
 //
 //go:embed css/tailwind.css css/style.css js/app.js js/alpine.min.js
 var Static embed.FS

templates/webhook_stats.html

@@ -22,7 +22,11 @@
         </div>
         <div>
             <span class="text-gray-500">Last event</span>
-            <span class="font-medium text-gray-900">{{with .LastEventAt}}{{.UTC.Format "2006-01-02 15:04:05 UTC"}}{{else}}none{{end}}</span>
+            {{if .LastEvent}}
+            <span class="font-medium text-gray-900" title="{{.LastEventUTC}}">{{.LastEvent}}</span>
+            {{else}}
+            <span class="font-medium text-gray-900">none</span>
+            {{end}}
         </div>
         <div>
             <span class="text-gray-500">Retention</span>