Clarify web UI terminology, copy, and the entrypoint URL (closes #57)

Unifies user-visible copy on "Webhook" (routes and URLs unchanged), drops
the placeholder Profile settings section, and adds a copy-to-clipboard
affordance for the entrypoint URL as progressive enhancement — the button
stays hidden unless both the target element and the Clipboard API resolve,
so no dead control appears without JavaScript and the URL stays selectable.

Retention copy now matches what the code does: deletion is permanent, 0
retains forever, and a blank field means the default on create or the
current value on edit. The permanent-deletion sentence is suppressed for a
retain-forever webhook, which the reaper exempts before computing a cutoff.

Template tests gained a render-completed assertion. Without it, a page that
aborted mid-render still satisfied assertions matching the already-flushed
prefix, because renderTemplate streams to the ResponseWriter (#123).

TODO.md

@@ -26,6 +26,10 @@ capability in the README rationale).
 
 # Completed Steps
 
+- 2026-08-11 Web UI cleanup: nav terminology unified on Webhooks, the
+  Profile settings placeholder removed, a progressive-enhancement copy
+  button for the entrypoint URL, and retention form copy that states the
+  actual policy (deletion by the reaper, 0 retains forever) (#57)
 - 2026-08-09 Inactivity-based session timeout: sliding idle expiry
   (`SESSION_IDLE_TIMEOUT`, default `24h`) refreshed on authenticated
   requests, with the 7-day absolute cap kept as an independent

internal/handlers/ui_copy_test.go

@@ -0,0 +1,299 @@
+package handlers_test
+
+import (
+	"context"
+	"net/http"
+	"net/http/httptest"
+	"strconv"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"sneak.berlin/go/webhooker/internal/database"
+	"sneak.berlin/go/webhooker/internal/delivery"
+	"sneak.berlin/go/webhooker/internal/handlers"
+	"sneak.berlin/go/webhooker/internal/session"
+)
+
+// Template data keys the page templates read. The handlers package has
+// its own unexported constants for these; this is the external test
+// package, so it needs its own.
+const (
+	dataKeyWebhook = "Webhook"
+	dataKeyError   = "Error"
+)
+
+// testWebhookID is the identifier given to the webhook under test on
+// pages that render one.
+const testWebhookID = "wh-1"
+
+// renderPage renders a page template through the real template set as
+// an authenticated user and returns the resulting HTML.
+func renderPage(
+	t *testing.T,
+	h *handlers.Handlers,
+	sess *session.Session,
+	page string,
+	data map[string]any,
+) string {
+	t.Helper()
+
+	cookies := authenticatedCookies(t, sess, "test-user-id", "testuser")
+
+	req := httptest.NewRequestWithContext(
+		context.Background(), http.MethodGet, "/", nil,
+	)
+	for _, c := range cookies {
+		req.AddCookie(c)
+	}
+
+	w := httptest.NewRecorder()
+	h.RenderTemplateForTest(w, req, page, data)
+
+	return w.Body.String()
+}
+
+// TestNavbarUsesWebhookTerminology pins the user-visible navigation
+// label to "Webhooks". The /sources route is deliberately unchanged, so
+// the assertion targets the link text rather than the href.
+func TestNavbarUsesWebhookTerminology(t *testing.T) {
+	t.Parallel()
+
+	var h *handlers.Handlers
+
+	var sess *session.Session
+
+	app := newTestApp(t, &h, &sess)
+	app.RequireStart()
+
+	t.Cleanup(app.RequireStop)
+
+	// One item, so the list body renders too: it calls
+	// WebhookListItem.RetentionLabel, promoted from the embedded
+	// Webhook and therefore a pointer method. An empty list would
+	// skip that call and hide a template error behind the
+	// navigation assertions below.
+	item := handlers.WebhookListItem{}
+	item.Name = "wh"
+	item.ID = testWebhookID
+	item.RetentionDays = 14
+
+	body := renderPage(t, h, sess, "sources_list.html", map[string]any{
+		"Webhooks": []handlers.WebhookListItem{item},
+	})
+
+	assert.Contains(t, body, "Retention: 14 days")
+	assert.Contains(t, body, `class="btn-text">Webhooks</a>`)
+	assert.Contains(
+		t, body, `class="btn-text w-full text-left">Webhooks</a>`,
+	)
+	assert.Contains(
+		t, body,
+		`<h1 class="text-2xl font-medium text-gray-900">Webhooks</h1>`,
+	)
+	assert.NotContains(
+		t, body, ">Sources<",
+		"no user-visible element may still be labelled Sources",
+	)
+	assert.Contains(
+		t, body, `href="/sources"`,
+		"the /sources route itself must not change",
+	)
+}
+
+// TestEditPageUsesWebhookTerminology pins the edit page's heading and
+// its back link. The link's href still points at /source/{id}, which is
+// intentional: only user-visible copy changes.
+func TestEditPageUsesWebhookTerminology(t *testing.T) {
+	t.Parallel()
+
+	var h *handlers.Handlers
+
+	var sess *session.Session
+
+	app := newTestApp(t, &h, &sess)
+	app.RequireStart()
+
+	t.Cleanup(app.RequireStop)
+
+	// The webhook goes in as a pointer because source_edit.html calls
+	// Webhook.RetentionLabel, a pointer method: a map element is not
+	// addressable, so a value here renders an error instead of the
+	// page.
+	webhook := &database.Webhook{Name: "wh", RetentionDays: 14}
+	webhook.ID = testWebhookID
+
+	body := renderPage(t, h, sess, "source_edit.html", map[string]any{
+		dataKeyWebhook: webhook,
+		dataKeyError:   "",
+	})
+
+	assert.Contains(t, body, "Edit Webhook")
+	assert.NotContains(t, body, ">Sources<")
+	assert.Contains(t, body, `href="/source/wh-1"`)
+}
+
+// TestCreateFormRetentionCopyMatchesBehaviour pins the create form's
+// retention copy to what the code does: the reaper permanently deletes
+// events past the cutoff, an empty field falls back to
+// DefaultRetentionDays, and 0 is rewritten to the retain-forever
+// sentinel by Webhook.BeforeSave.
+func TestCreateFormRetentionCopyMatchesBehaviour(t *testing.T) {
+	t.Parallel()
+
+	var h *handlers.Handlers
+
+	var sess *session.Session
+
+	app := newTestApp(t, &h, &sess)
+	app.RequireStart()
+
+	t.Cleanup(app.RequireStop)
+
+	body := renderPage(t, h, sess, "sources_new.html", map[string]any{
+		"Name":                 "",
+		"Description":          "",
+		"DefaultRetentionDays": database.DefaultRetentionDays,
+		dataKeyError:           "",
+	})
+
+	assert.Contains(
+		t, body,
+		"permanently deletes events older than this",
+		"the form must say retention is enforced by deletion",
+	)
+	assert.Contains(t, body, "Enter 0 to retain events forever")
+	assert.Contains(
+		t, body,
+		"leave blank to use the default of "+
+			strconv.Itoa(database.DefaultRetentionDays)+" days",
+		"blank means the default, not forever",
+	)
+}
+
+// TestEditFormRetentionCopyMatchesBehaviour pins the edit form's
+// retention copy, including that it states the stored policy via
+// RetentionLabel and that an empty field leaves that policy unchanged
+// rather than meaning forever.
+func TestEditFormRetentionCopyMatchesBehaviour(t *testing.T) {
+	t.Parallel()
+
+	var h *handlers.Handlers
+
+	var sess *session.Session
+
+	app := newTestApp(t, &h, &sess)
+	app.RequireStart()
+
+	t.Cleanup(app.RequireStop)
+
+	finite := &database.Webhook{Name: "wh", RetentionDays: 14}
+	finite.ID = testWebhookID
+
+	body := renderPage(t, h, sess, "source_edit.html", map[string]any{
+		dataKeyWebhook: finite,
+		dataKeyError:   "",
+	})
+
+	assert.Contains(t, body, "Currently 14 days.")
+	assert.Contains(
+		t, body,
+		"permanently deletes events older than this",
+	)
+	assert.Contains(t, body, "Enter 0 to retain events forever")
+	assert.Contains(
+		t, body,
+		"leave blank to keep the current setting",
+		"blank means unchanged, not forever",
+	)
+
+	forever := &database.Webhook{
+		Name:          "wh",
+		RetentionDays: database.RetentionForeverDays,
+	}
+	forever.ID = "wh-2"
+
+	foreverBody := renderPage(
+		t, h, sess, "source_edit.html", map[string]any{
+			dataKeyWebhook: forever,
+			dataKeyError:   "",
+		},
+	)
+
+	assert.Contains(
+		t, foreverBody, "Currently forever.",
+		"a retain-forever webhook must not read as a day count",
+	)
+	assert.Contains(
+		t, foreverBody,
+		"No events are deleted while retention is set to forever",
+	)
+	assert.NotContains(
+		t, foreverBody,
+		"permanently deletes events older than this",
+		"the reaper skips retain-forever webhooks, so the form "+
+			"must not claim it deletes their events",
+	)
+}
+
+// TestEntrypointCopyButtonIsProgressiveEnhancement proves the copy
+// affordance degrades: the button ships with the hidden attribute, so a
+// browser that never runs app.js shows no dead control, and the URL is
+// rendered as ordinary selectable text either way.
+func TestEntrypointCopyButtonIsProgressiveEnhancement(t *testing.T) {
+	t.Parallel()
+
+	var h *handlers.Handlers
+
+	var sess *session.Session
+
+	app := newTestApp(t, &h, &sess)
+	app.RequireStart()
+
+	t.Cleanup(app.RequireStop)
+
+	entrypoint := database.Entrypoint{Path: "abc123"}
+	entrypoint.ID = "ep-1"
+
+	// The webhook goes in as a pointer because source_detail.html
+	// calls Webhook.RetentionLabel, a pointer method: a map element
+	// is not addressable, so a value here aborts execution partway
+	// down the page, after the copy button has already been flushed
+	// to the response.
+	webhook := &database.Webhook{Name: "wh", RetentionDays: 14}
+	webhook.ID = testWebhookID
+	webhook.CreatedAt = time.Date(
+		2026, time.January, 2, 3, 4, 5, 0, time.UTC,
+	)
+
+	body := renderPage(t, h, sess, "source_detail.html", map[string]any{
+		dataKeyWebhook: webhook,
+		"Entrypoints":  []database.Entrypoint{entrypoint},
+		// The handler passes delivery.NewTargetViews(targets), never
+		// raw targets, so the test data has to have that same shape.
+		"Targets": delivery.NewTargetViews(nil),
+		"Events":  []database.Event{},
+		"BaseURL": "https://hooks.example.com",
+	})
+
+	assert.Contains(
+		t, body,
+		`<code id="entrypoint-url-ep-1"`,
+	)
+	assert.Contains(t, body, "https://hooks.example.com/webhook/abc123")
+	assert.Contains(
+		t, body,
+		`hidden data-copy-target="entrypoint-url-ep-1"`,
+		"the button must start hidden and be revealed by script",
+	)
+
+	// renderTemplate streams to the ResponseWriter, so an abort
+	// midway still leaves everything above it in the body. This pins
+	// content from the last line of the template, which is below the
+	// assertions above: without it, a page that renders the copy
+	// button and then 500s passes.
+	assert.Contains(
+		t, body, "Retention: 14 days",
+		"the page must render to completion, not abort partway",
+	)
+}

static/js/app.js

@@ -1,2 +1,60 @@
 // Webhooker client-side JavaScript
 console.log("Webhooker loaded");
+
+// Copy-to-clipboard, as progressive enhancement.
+//
+// Markup renders each copy button with the `hidden` attribute and a
+// `data-copy-target` pointing at the id of the element holding the
+// text. This script reveals a button only once it has both a resolvable
+// target and a usable Clipboard API, so a browser without either shows
+// no button at all and the text stays selectable.
+(function () {
+    "use strict";
+
+    const revertDelayMs = 2000;
+
+    function flash(button, message) {
+        const original = button.getAttribute("data-copy-label");
+        button.textContent = message;
+        window.setTimeout(function () {
+            button.textContent = original;
+        }, revertDelayMs);
+    }
+
+    function wire(button) {
+        const target = document.getElementById(
+            button.getAttribute("data-copy-target")
+        );
+        if (!target) {
+            return;
+        }
+
+        button.setAttribute("data-copy-label", button.textContent);
+        button.addEventListener("click", function () {
+            navigator.clipboard.writeText(target.textContent.trim()).then(
+                function () {
+                    flash(button, "Copied");
+                },
+                function () {
+                    flash(button, "Copy failed");
+                }
+            );
+        });
+        button.removeAttribute("hidden");
+    }
+
+    function init() {
+        if (!navigator.clipboard || !navigator.clipboard.writeText) {
+            return;
+        }
+
+        const buttons = document.querySelectorAll("[data-copy-target]");
+        buttons.forEach(wire);
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();

templates/navbar.html

@@ -16,7 +16,7 @@
         <!-- Desktop navigation -->
         <div class="hidden md:flex items-center gap-4">
             {{if .User}}
-            <a href="/sources" class="btn-text">Sources</a>
+            <a href="/sources" class="btn-text">Webhooks</a>
             <a href="/user/{{.User.Username}}" class="btn-text">
                 <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
@@ -38,7 +38,7 @@
     <div x-show="open" x-cloak x-transition class="md:hidden mt-4 pt-4 border-t border-gray-200">
         <div class="flex flex-col gap-2">
             {{if .User}}
-            <a href="/sources" class="btn-text w-full text-left">Sources</a>
+            <a href="/sources" class="btn-text w-full text-left">Webhooks</a>
             <a href="/user/{{.User.Username}}" class="btn-text w-full text-left">Profile</a>
             <form method="POST" action="/pages/logout">
                 <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">

templates/profile.html

@@ -34,7 +34,6 @@
 
         <hr class="border-gray-200 mb-6">
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
         <div>
             <h3 class="text-lg font-medium text-gray-900 mb-3">Account Information</h3>
             <dl class="space-y-3">
@@ -48,11 +47,6 @@
                 </div>
             </dl>
         </div>
-            <div>
-                <h3 class="text-lg font-medium text-gray-900 mb-3">Settings</h3>
-                <p class="text-sm text-gray-500">Profile settings and preferences will be available here.</p>
-            </div>
-        </div>
     </div>
 
     <div class="card p-6 mt-6">

templates/source_detail.html

@@ -69,7 +69,12 @@
                             </form>
                         </div>
                     </div>
-                    <code class="text-xs text-gray-500 break-all block mt-1">{{$.BaseURL}}/webhook/{{.Path}}</code>
+                    <div class="flex items-start gap-2 mt-1">
+                        <code id="entrypoint-url-{{.ID}}" class="text-xs text-gray-500 break-all block flex-1">{{$.BaseURL}}/webhook/{{.Path}}</code>
+                        <!-- Hidden until app.js reveals it; without the
+                             script the URL above stays selectable. -->
+                        <button type="button" hidden data-copy-target="entrypoint-url-{{.ID}}" class="text-xs text-gray-500 hover:text-primary-600">Copy</button>
+                    </div>
                 </div>
                 {{else}}
                 <div class="p-4 text-sm text-gray-500">No entrypoints configured.</div>

templates/source_edit.html

@@ -29,7 +29,7 @@
             <div class="form-group">
                 <label for="retention_days" class="label">Retention (days)</label>
                 <input type="number" id="retention_days" name="retention_days" value="{{.Webhook.RetentionDays}}" min="0" class="input">
-                <p class="text-xs text-gray-500 mt-1">Currently {{.Webhook.RetentionLabel}}. Enter 0 to retain events forever.</p>
+                <p class="text-xs text-gray-500 mt-1">Currently {{.Webhook.RetentionLabel}}.{{if .Webhook.RetainsForever}} No events are deleted while retention is set to forever.{{else}} A periodic cleanup permanently deletes events older than this, along with their delivery records.{{end}} Enter 0 to retain events forever; leave blank to keep the current setting.</p>
             </div>
 
             <div class="flex gap-3">

templates/sources_list.html

@@ -1,6 +1,6 @@
 {{template "base" .}}
 
-{{define "title"}}Sources - Webhooker{{end}}
+{{define "title"}}Webhooks - Webhooker{{end}}
 
 {{define "content"}}
 <div class="max-w-6xl mx-auto px-6 py-8">

templates/sources_new.html

@@ -29,7 +29,7 @@
             <div class="form-group">
                 <label for="retention_days" class="label">Retention (days)</label>
                 <input type="number" id="retention_days" name="retention_days" value="{{.DefaultRetentionDays}}" min="0" class="input">
-                <p class="text-xs text-gray-500 mt-1">How long to keep event data. Enter 0 to retain events forever.</p>
+                <p class="text-xs text-gray-500 mt-1">A periodic cleanup permanently deletes events older than this, along with their delivery records. Enter 0 to retain events forever; leave blank to use the default of {{.DefaultRetentionDays}} days.</p>
             </div>
 
             <div class="flex gap-3">