Make every clickable control look clickable, in two shared styles (closes #375)

Buttons keep btn-primary, btn-secondary and btn-danger and gain a
pointer cursor; the navigation links become btn-secondary buttons.
Every control that was plain coloured text (Copy, both Add, the row
actions, Resubmit, Replay, the back, footer and download links) now
uses btn-small, bordered at rest with hover and focus states. Both
styles are in static/css/style.css, which the layout now loads.

The event log's clickable rows become buttons, so they work by
keyboard; Replay moves beside its delivery's row. Rows on the webhook
page and in the event log wrap at phone width. The browser test now
checks that Copy reads "Copied".

Model: opus-5-5

README.md

@@ -457,19 +457,6 @@ Your proxy must therefore **append** the peer address to
 `option forwardfor`, Caddy and AWS ALB by default), and must append a
 bare address with no port.
 
-Every log line that names a client carries two addresses: `remoteIP`,
-the connecting peer, which behind a proxy is the proxy; and `clientIP`,
-the client the rate limiters identify by the rules above, which is the
-field to read when tracing who sent what. Those lines are the
-`http request` access log line, the rate-limit rejection lines
-(`login failure limit exceeded` among them), the
-`csrf: token validation failed` warning and the receiver's
-`webhook request received` line. `clientIP` is only as trustworthy as
-`TRUSTED_PROXIES`: for a request from a peer inside the list, it is
-read out of the `X-Forwarded-For` that peer sent, so a peer that does
-not belong in the list can make it name any address it likes. For a
-request from any other peer, both fields name the peer.
-
 #### Sessions
 
 Sessions are bounded by two independent clocks, and end at whichever
@@ -854,9 +841,9 @@ reports.
    was given, so on any port other than 443 `$host` makes every form
    POST — including login — fail with `403 origin invalid`, with
    nothing in the error naming the cause.
-5. **Keep the proxy's access log.** webhooker's own access log names
-   the client in its `clientIP` field only while `TRUSTED_PROXIES`
-   covers the proxy; the proxy's log names it regardless. nginx's
+5. **Keep the proxy's access log.** webhooker's own access log records
+   the peer address, which behind a proxy is always the proxy. The
+   proxy's log is the only record of which client sent what. nginx's
    default `combined` format already logs `$remote_addr`; do not
    replace it with one that drops the client address, and retain those
    logs as long as you would want to answer a question about traffic.
@@ -885,8 +872,9 @@ server {
     # webhooker's message.
     client_max_body_size 1m;
 
-    # $remote_addr is the client. webhooker's own log names it, as
-    # clientIP, only while TRUSTED_PROXIES covers this proxy.
+    # $remote_addr is the client. webhooker's own log records this
+    # proxy and nothing else, so this file is the only place the
+    # client's address is written down.
     access_log /var/log/nginx/webhooker.access.log combined;
 
     location / {
@@ -1325,15 +1313,16 @@ A browser test in `internal/server` loads the webhook page and the event log
 under the real policy and checks that: both add forms stay hidden until Add is
 clicked; choosing Slack in the add target form leaves the HTTP fields out of
 what it submits, also after leaving the page and going back to it, when the
-browser restores the choice; an event expands and collapses, and so do a
-delivery's attempts inside it; and at phone width the menu button opens and
-closes the mobile menu. It also fails if the browser reports a console warning
-or error, an uncaught exception, or anything the policy refused. `make check`
-and the image build lint it but do not run it, and `make test` leaves it out
-(its file is built only with the `browser` build tag). Run it with
-`make test-browser` after changing `templates/` or `static/js/`: that builds
-`Dockerfile.browser`, which runs the test in a digest-pinned headless browser
-image, so the host needs no browser.
+browser restores the choice; the Copy button beside an entrypoint URL reads
+"Copied" once clicked; an event expands and collapses, and so do a delivery's
+attempts inside it; and at phone width the menu button opens and closes the
+mobile menu. It also fails if the browser reports a console warning or error,
+an uncaught exception, or anything the policy refused. `make check` and the
+image build lint it but do not run it, and `make test` leaves it out (its file
+is built only with the `browser` build tag). Run it with `make test-browser`
+after changing `templates/` or `static/js/`: that builds `Dockerfile.browser`,
+which runs the test in a digest-pinned headless browser image, so the host
+needs no browser.
 
 The package's tarball is committed as `3p/alpinejs-csp-3.14.9.tgz`, byte for
 byte as the npm registry publishes it. It is a dependency, not this repo's build
@@ -2485,21 +2474,20 @@ trade.
 Net: **one `INFO` line per request, of at most 2,560 bytes.** That
 ceiling is arithmetic, not an observation: 3 × (512 + 11) for `url`,
 `useragent` and `referer`, plus 128 + 11 for `request_id`, plus 32 + 11
-for `method`, plus a 405-byte fixed portion (the field names, the
-punctuation, both timestamps at their longest, `remoteIP` and
-`clientIP` each charged as an IPv6 address with a zone, the status and
-the latency) — 2,156 bytes, stated at 2,560 so the figure has headroom.
-`internal/middleware/accesslog_test.go` asserts it against 8 KB of
-client-chosen text in the path, in the query, and in each of
-`User-Agent`, `Referer`, `X-Request-Id` and `X-Forwarded-For`,
+for `method`, plus a 336-byte fixed portion (the field names, the
+punctuation, both timestamps at their longest, an IPv6 `remoteIP` with
+a zone, the status and the latency) — 2,087 bytes, stated at 2,560 so
+the figure has headroom. `internal/middleware/accesslog_test.go`
+asserts it against 8 KB of client-chosen text in the path, in the
+query, and in each of `User-Agent`, `Referer` and `X-Request-Id`,
 including cases built from the characters the handlers escape, and
-against a 5xx that keeps its concrete path while all three header fields
-are also at their budget and an `X-Forwarded-For` sent from a trusted
-proxy ends in an IPv6 client address at its longest followed by an 8 KB
-zone, where `clientIP` must name the address without the zone. Every
-case runs through both handlers `internal/logger` can select — the JSON
-one and the text one it installs on a tty — since the two do not escape
-alike and the ceiling is quoted unqualified.
+against the widest access log line the service can be made to write: a
+5xx that keeps its concrete path while all three header fields are also
+at their budget. Every case runs through both handlers
+`internal/logger` can select — the JSON one and the text one it installs
+on a tty — since the two do not escape alike and the ceiling is quoted
+unqualified. Measured over a real connection, the widest access log line
+is 1,972 bytes.
 
 Multiply that ceiling by the request rate to size log storage. Note
 that the rate is not bounded by the limits above on every route:
@@ -2837,9 +2825,9 @@ remedies are to block the source at the reverse proxy, or to
 rate-limit `POST /pages/login` there — the one place a limit can be
 applied without reintroducing the lockout, because the proxy sees the
 real client address. `TRUSTED_PROXIES` does not stop the saturation.
-The flood's source is in the `clientIP` field of webhooker's access
-log while `TRUSTED_PROXIES` covers the proxy, and in the proxy's own
-access log either way (see [Trusted proxies](#trusted-proxies)).
+The flood's source is in the proxy's access log: webhooker's own logs
+record the proxy's address, not the client's (see
+[Deployment behind a reverse proxy](#deployment-behind-a-reverse-proxy)).
 
 Finer-grained per-webhook rate limits (configured in the web UI and
 enforced in the webhook handler) can layer on top of this env-level
@@ -3020,7 +3008,7 @@ webhooker/
 │   ├── static.go              # //go:embed directive
 │   ├── css/input.css          # Tailwind input, source for tailwind.css (make css)
 │   ├── css/tailwind.css       # Generated stylesheet the pages load
-│   ├── css/style.css          # Older hand-written stylesheet, no longer loaded
+│   ├── css/style.css          # Hand-written: the shared button styles, loaded after tailwind.css
 │   ├── js/app.js              # Copy-to-clipboard, and the Alpine.js components
 │   └── js/alpine.min.js       # Alpine.js CSP build, extracted from 3p/ by make assets, not committed
 ├── templates/                 # Go HTML templates (base, login, sources, etc.)
@@ -3077,7 +3065,7 @@ Applied to all routes in this order:
    (HSTS, X-Content-Type-Options, X-Frame-Options, CSP, Referrer-Policy,
    Permissions-Policy)
 3. **Logging** — Structured request logging (method, URL, status,
-   latency, remote IP, client IP, user agent, request ID)
+   latency, remote IP, user agent, request ID)
 4. **Metrics** — Prometheus HTTP metrics (if `METRICS_USERNAME` and
    `METRICS_PASSWORD` are both set)
 5. **CORS** — Cross-origin resource sharing headers

internal/database/retention.go

@@ -184,6 +184,16 @@ func (r *RetentionReaper) sweep(ctx context.Context) {
 
 		wh := webhooks[i]
 
+		// Skip retain-forever webhooks before building any query.
+		// RetainsForever covers both the RetentionForeverDays
+		// sentinel and the non-positive values that predate it: the
+		// sentinel is a positive number, so without this the reaper
+		// would compute a cutoff a thousand years in the past and
+		// issue a DELETE matching nothing on every single sweep.
+		if wh.RetainsForever() {
+			continue
+		}
+
 		// Nothing to reap if the per-webhook database has never
 		// been created.
 		if !r.dbManager.DBExists(wh.ID) {
@@ -202,13 +212,6 @@ func (r *RetentionReaper) reapWebhook(
 	webhookID string,
 	retentionDays int,
 ) {
-	// A retain-forever webhook has no cutoff, so its database is not
-	// even opened.
-	cutoff, ok := retentionCutoff(time.Now(), retentionDays)
-	if !ok {
-		return
-	}
-
 	db, err := r.dbManager.GetDB(webhookID)
 	if err != nil {
 		r.log.Error(
@@ -220,6 +223,11 @@ func (r *RetentionReaper) reapWebhook(
 		return
 	}
 
+	cutoff, ok := retentionCutoff(time.Now(), retentionDays)
+	if !ok {
+		return
+	}
+
 	deleted, err := reapExpired(ctx, db, cutoff)
 	if err != nil {
 		r.log.Error(

internal/database/retention_test.go

@@ -362,7 +362,7 @@ func TestRetentionReaper_HugeFiniteRetentionRetainsRecentEvents(
 		t,
 		overflowingRetentionDays,
 		database.RetentionForeverDays,
-		"the test value must not be treated as retain-forever",
+		"the test value must not be rescued by the forever skip",
 	)
 
 	webhookID := createWebhook(

internal/handlers/source_management.go

@@ -41,51 +41,71 @@ type WebhookListItem struct {
 // errMissingURL signals that a required URL was not provided.
 var errMissingURL = errors.New("missing URL")
 
-// parseRetentionDays interprets a retention_days form value. It
-// returns the number of days, or, for a value it refuses, the message
-// the create and edit forms show; the message is empty when the value
-// is accepted.
+// errInvalidRetention signals a retention_days form value that is not
+// a non-negative whole number.
+var errInvalidRetention = errors.New("invalid retention days")
+
+// errRetentionTooLarge signals a retention_days form value that is a
+// whole number but larger than the reaper's cutoff arithmetic can
+// represent. It is distinguished from errInvalidRetention so the form
+// can tell the user the actual ceiling instead of implying their input
+// was not a number.
+var errRetentionTooLarge = errors.New("retention days out of range")
+
+// retentionErrorMessage returns the message the create and edit forms
+// show the user for a rejected retention_days value. Any error other
+// than errRetentionTooLarge falls back to the generic wording, so an
+// unrecognised parse failure still produces a sensible 400 rather than
+// an empty alert.
+func retentionErrorMessage(err error) string {
+	if errors.Is(err, errRetentionTooLarge) {
+		return "Retention must be at most " +
+			strconv.Itoa(database.MaxFiniteRetentionDays) +
+			" days, or 0 to retain events forever."
+	}
+
+	return "Retention must be a whole number of days, or 0 to " +
+		"retain events forever."
+}
+
+// parseRetentionDays interprets a retention_days form value.
 //
 // An empty value yields fallback, which lets the create path apply the
 // default and the edit path leave the stored value unchanged. A value
 // of 0 is returned as 0 and is rewritten to the retain-forever
 // sentinel by database.Webhook's BeforeSave hook. Anything unparseable
-// or negative is refused rather than silently given a default.
+// or negative is an error rather than a silently substituted default.
 //
 // The upper bound is not cosmetic. The reaper computes its cutoff as a
 // time.Duration, an int64 nanosecond count, so a day count above
 // database.MaxFiniteRetentionDays overflows, puts the cutoff in the
 // future, and deletes every event the webhook has. A finite value
-// above that ceiling is therefore refused, and the message names the
-// ceiling rather than implying the input was not a number.
+// above that ceiling is therefore a 400.
 //
 // A value at or above the retain-forever sentinel is not out of range:
 // it is what the edit form pre-fills for a retain-forever webhook, so
 // submitting the form back unchanged has to keep meaning "forever"
 // rather than being rejected.
-func parseRetentionDays(raw string, fallback int) (int, string) {
+func parseRetentionDays(raw string, fallback int) (int, error) {
 	raw = strings.TrimSpace(raw)
 	if raw == "" {
-		return fallback, ""
+		return fallback, nil
 	}
 
 	v, err := strconv.Atoi(raw)
 	if err != nil || v < 0 {
-		return 0, "Retention must be a whole number of days, or 0 to " +
-			"retain events forever."
+		return 0, errInvalidRetention
 	}
 
 	if v >= database.RetentionForeverDays {
-		return database.RetentionForeverDays, ""
+		return database.RetentionForeverDays, nil
 	}
 
 	if v > database.MaxFiniteRetentionDays {
-		return 0, "Retention must be at most " +
-			strconv.Itoa(database.MaxFiniteRetentionDays) +
-			" days, or 0 to retain events forever."
+		return 0, errRetentionTooLarge
 	}
 
-	return v, ""
+	return v, nil
 }
 
 // DeliveryView is the display-safe projection of a delivery
@@ -341,13 +361,16 @@ func (h *Handlers) HandleSourceCreateSubmit() http.HandlerFunc {
 			return
 		}
 
-		retentionDays, errMsg := parseRetentionDays(
+		retentionDays, retErr := parseRetentionDays(
 			retentionStr, database.DefaultRetentionDays,
 		)
-		if errMsg != "" {
+		if retErr != nil {
 			h.renderTemplateStatus(
 				w, r, "sources_new.html",
-				newSourceFormData(errMsg, name, description),
+				newSourceFormData(
+					retentionErrorMessage(retErr),
+					name, description,
+				),
 				http.StatusBadRequest,
 			)
 
@@ -632,13 +655,13 @@ func (h *Handlers) applyWebhookEdit(
 
 	// An empty field falls back to the stored value, so submitting the
 	// form without touching retention leaves the policy alone.
-	retentionDays, errMsg := parseRetentionDays(
+	retentionDays, retErr := parseRetentionDays(
 		r.PostFormValue("retention_days"), webhook.RetentionDays,
 	)
-	if errMsg != "" {
+	if retErr != nil {
 		data := map[string]any{
 			tmplKeyWebhook: webhook,
-			tmplKeyError:   errMsg,
+			tmplKeyError:   retentionErrorMessage(retErr),
 		}
 
 		h.renderTemplateStatus(w, r, "source_edit.html", data, http.StatusBadRequest)

internal/handlers/source_management_test.go

@@ -368,42 +368,31 @@ func TestHandleSourceCreateSubmit_OverflowingRetentionIsRejected(
 // boundary between "too large to represent" and "retain forever": the
 // sentinel is above MaxFiniteRetentionDays, but it is the value the
 // edit form pre-fills, so it must be accepted rather than rejected as
-// out of range. A value above the sentinel is stored as the sentinel.
+// out of range.
 func TestHandleSourceCreateSubmit_SentinelIsAcceptedAsForever(
 	t *testing.T,
 ) {
 	t.Parallel()
 
-	for _, days := range []int{
+	env := setupSourceTest(t)
+	sentinel := strconv.Itoa(database.RetentionForeverDays)
+
+	w := submitCreate(t, env.handlers, env.cookies, "forever", &sentinel)
+	require.Equal(t, http.StatusSeeOther, w.Code)
+
+	wh := onlyWebhook(t, env.db)
+	assert.Equal(
+		t,
 		database.RetentionForeverDays,
-		database.RetentionForeverDays + 1,
-	} {
-		raw := strconv.Itoa(days)
-
-		t.Run(raw, func(t *testing.T) {
-			t.Parallel()
-
-			env := setupSourceTest(t)
-
-			w := submitCreate(t, env.handlers, env.cookies, "forever", &raw)
-			require.Equal(t, http.StatusSeeOther, w.Code)
-
-			wh := onlyWebhook(t, env.db)
-			assert.Equal(
-				t,
-				database.RetentionForeverDays,
-				storedRetentionDays(t, env.db, wh.ID),
-			)
-		})
-	}
+		storedRetentionDays(t, env.db, wh.ID),
+	)
 }
 
 // TestHandleSourceCreateSubmit_RejectedFormKeepsUserInput checks that a
 // validation failure hands the user's typing back, matching what the
 // edit form already does. Losing a long description to a mistyped
 // retention value is the kind of thing that makes people give up on a
-// form. Both values carry HTML-special characters, which must come
-// back escaped rather than as markup.
+// form.
 func TestHandleSourceCreateSubmit_RejectedFormKeepsUserInput(
 	t *testing.T,
 ) {
@@ -412,8 +401,8 @@ func TestHandleSourceCreateSubmit_RejectedFormKeepsUserInput(
 	env := setupSourceTest(t)
 
 	const (
-		name        = `kept"><b>name`
-		description = `a </textarea> worth not losing`
+		name        = "kept-name"
+		description = "a description worth not losing"
 	)
 
 	form := url.Values{}
@@ -430,10 +419,8 @@ func TestHandleSourceCreateSubmit_RejectedFormKeepsUserInput(
 
 	body := w.Body.String()
 
-	assert.Contains(t, body, `value="kept&#34;&gt;&lt;b&gt;name"`)
-	assert.Contains(t, body, `a &lt;/textarea&gt; worth not losing`)
-	assert.NotContains(t, body, name)
-	assert.NotContains(t, body, description)
+	assert.Contains(t, body, `value="`+name+`"`)
+	assert.Contains(t, body, description)
 }
 
 // submitEdit posts the webhook edit form for the given webhook.

internal/handlers/ui_copy_test.go

@@ -82,9 +82,9 @@ func TestNavbarUsesWebhookTerminology(t *testing.T) {
 	})
 
 	assert.Contains(t, body, "Retention: 14 days")
-	assert.Contains(t, body, `class="btn-text">Webhooks</a>`)
+	assert.Contains(t, body, `class="btn-secondary">Webhooks</a>`)
 	assert.Contains(
-		t, body, `class="btn-text w-full text-left">Webhooks</a>`,
+		t, body, `class="btn-secondary w-full">Webhooks</a>`,
 	)
 	assert.Contains(
 		t, body,
@@ -163,7 +163,7 @@ func TestEventLogPageIsCalledFullEventLog(t *testing.T) {
 	)
 	assert.Contains(
 		t, detailBody,
-		`<a href="/hook/wh-1/events" class="btn-text text-sm">Full Event Log</a>`,
+		`<a href="/hook/wh-1/events" class="btn-small">Full Event Log</a>`,
 		"the link under recent events",
 	)
 
@@ -331,8 +331,9 @@ func TestEntrypointCopyButtonIsProgressiveEnhancement(t *testing.T) {
 	assert.Contains(t, body, "https://hooks.example.com/h/abc123")
 	assert.Contains(
 		t, body,
-		`hidden data-copy-target="entrypoint-url-ep-1"`,
-		"the button must start hidden and be revealed by script",
+		`<button type="button" hidden data-copy-target="entrypoint-url-ep-1"`,
+		"the copy control must be a button, start hidden and be "+
+			"revealed by script",
 	)
 
 	// renderTemplate streams to the ResponseWriter, so an abort

internal/handlers/webhook.go

@@ -11,7 +11,6 @@ import (
 	"sneak.berlin/go/webhooker/internal/database"
 	"sneak.berlin/go/webhooker/internal/delivery"
 	"sneak.berlin/go/webhooker/internal/logfield"
-	"sneak.berlin/go/webhooker/internal/middleware"
 )
 
 const (
@@ -58,8 +57,7 @@ func (h *Handlers) HandleWebhook() http.HandlerFunc {
 		h.log.Info("webhook request received",
 			"entrypoint_uuid", entrypointUUID,
 			"method", r.Method,
-			"remoteIP", middleware.RemoteIP(r),
-			"clientIP", middleware.ClientIP(r),
+			"remote_addr", r.RemoteAddr,
 		)
 
 		if !entrypoint.Active {

internal/handlers/webhook_test.go

@@ -1,124 +0,0 @@
-package handlers_test
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"log/slog"
-	"net/http"
-	"net/http/httptest"
-	"net/netip"
-	"strings"
-	"testing"
-
-	"github.com/go-chi/chi"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-	"sneak.berlin/go/webhooker/internal/config"
-	"sneak.berlin/go/webhooker/internal/database"
-	"sneak.berlin/go/webhooker/internal/handlers"
-	"sneak.berlin/go/webhooker/internal/middleware"
-)
-
-// TestHandleWebhook_LogsClientNextToThePeer checks that the
-// receiver's "webhook request received" line carries both addresses:
-// remoteIP, the connecting peer, and clientIP, the client the access
-// log attributes the request to.
-func TestHandleWebhook_LogsClientNextToThePeer(t *testing.T) {
-	t.Parallel()
-
-	// untrustedPeer is outside the trusted 10.0.0.0/8, so its
-	// X-Forwarded-For is ignored and it is the client.
-	const untrustedPeer = "192.0.2.10"
-
-	cases := map[string]struct {
-		peer       string
-		wantRemote string
-		wantClient string
-	}{
-		"trusted proxy with a forwarded chain": {
-			peer:       "10.0.0.1:44444",
-			wantRemote: "10.0.0.1",
-			wantClient: "198.51.100.7",
-		},
-		"untrusted peer": {
-			peer:       untrustedPeer + ":5555",
-			wantRemote: untrustedPeer,
-			wantClient: untrustedPeer,
-		},
-	}
-
-	for name, tc := range cases {
-		t.Run(name, func(t *testing.T) {
-			t.Parallel()
-
-			var (
-				h  *handlers.Handlers
-				mw *middleware.Middleware
-				db *database.Database
-			)
-
-			app := newTestAppWithConfig(t, &config.Config{
-				DataDir: t.TempDir(),
-				TrustedProxies: []netip.Prefix{
-					netip.MustParsePrefix("10.0.0.0/8"),
-				},
-			}, &h, &mw, &db)
-			app.RequireStart()
-
-			t.Cleanup(app.RequireStop)
-
-			buf := new(bytes.Buffer)
-			h.SetLogForTest(slog.New(slog.NewJSONHandler(buf, nil)))
-
-			webhook := seedWebhook(t, db)
-			seedEntrypoint(t, db, webhook.ID)
-
-			// Logging is what works the client address out, so the
-			// request goes through it as it does in production.
-			router := chi.NewRouter()
-			router.Use(mw.Logging())
-			router.Post("/h/{uuid}", h.HandleWebhook())
-
-			req := httptest.NewRequestWithContext(
-				context.Background(), http.MethodPost,
-				"/h/ep-"+webhook.ID, strings.NewReader("{}"),
-			)
-			req.RemoteAddr = tc.peer
-			req.Header.Set("X-Forwarded-For", "198.51.100.7, 10.0.0.2")
-
-			w := httptest.NewRecorder()
-			router.ServeHTTP(w, req)
-
-			require.Equal(t, http.StatusOK, w.Code)
-
-			line := receivedLine(t, buf)
-			assert.Equal(t, tc.wantRemote, line["remoteIP"])
-			assert.Equal(t, tc.wantClient, line["clientIP"])
-		})
-	}
-}
-
-// receivedLine returns the one "webhook request received" line in the
-// captured JSON log.
-func receivedLine(t *testing.T, buf *bytes.Buffer) map[string]any {
-	t.Helper()
-
-	var found []map[string]any
-
-	for line := range strings.SplitSeq(
-		strings.TrimSpace(buf.String()), "\n",
-	) {
-		var entry map[string]any
-
-		require.NoError(t, json.Unmarshal([]byte(line), &entry))
-
-		if entry["msg"] == "webhook request received" {
-			found = append(found, entry)
-		}
-	}
-
-	require.Len(t, found, 1)
-
-	return found[0]
-}

internal/logfield/logfield_test.go

@@ -5,7 +5,6 @@ import (
 	"io"
 	"log/slog"
 	"strings"
-	"sync"
 	"testing"
 	"unicode/utf8"
 
@@ -19,11 +18,15 @@ import (
 // width.
 const budget = 64
 
-// batchRunes is how many consecutive code points the charge test logs
-// in one value from U+1000 up. Logging each of those on its own line
-// is too slow for the suite under the race detector; 4,096 at a time
-// is 271 batches, each logged on two lines, so 542 lines per handler.
-const batchRunes = 4096
+// sampleRunes is how many runes wide the values in the charge test
+// are. The handlers add a constant per field — a pair of quotes when
+// the value needs quoting — so the per-rune charge is only visible
+// once it is amortised over a run of them.
+const sampleRunes = 64
+
+// quotingSlack is that constant: the pair of quotes a handler adds to
+// a value that needs them and omits from one that does not.
+const quotingSlack = 2
 
 // newHandlers are the two handlers internal/logger can install. Time
 // is dropped so a line's width is a function of its value alone —
@@ -63,43 +66,46 @@ func renderedWidth(
 	return buf.Len()
 }
 
-// emittedBytes is what a handler writes for the runes of s alone: the
-// width of a line carrying s twice, less that of a line carrying it
-// once. Both values hold the same runes, so the text handler quotes
-// both or neither, and the quotes cancel along with everything else on
-// the line.
-func emittedBytes(
-	newHandler func(io.Writer) slog.Handler,
-	s string,
-) int {
-	return renderedWidth(newHandler, s+s) - renderedWidth(newHandler, s)
-}
+// chargeTestRunes is the set of code points the charge test measures:
+// every rune in the first two planes' worth of the BMP that the
+// handlers are most likely to treat specially, the separators that
+// only slog's JSON handler escapes, and a stratified sample across
+// the rest of Unicode so the astral charge is exercised on more than
+// one hand-picked rune.
+func chargeTestRunes() []rune {
+	const (
+		denseCeiling = 0x800
+		stride       = 1021
+		surrogateLo  = 0xD800
+		surrogateHi  = 0xDFFF
+	)
 
-// firstUndercharged returns the first rune in s that the handler
-// writes in more bytes than EncodedBytes charges for it, and how many
-// runes in s are undercharged that way. It measures one rune per line,
-// so the charge test calls it on the code points below U+1000, and from
-// there up only on a batch that has already failed, to name the code
-// points rather than just their range.
-func firstUndercharged(
-	newHandler func(io.Writer) slog.Handler,
-	s string,
-) (rune, int) {
-	first, count := rune(-1), 0
+	var runes []rune
 
-	for _, r := range s {
-		if emittedBytes(newHandler, string(r)) <= logfield.EncodedBytes(r) {
-			continue
+	keep := func(r rune) {
+		if r >= surrogateLo && r <= surrogateHi {
+			return
 		}
 
-		if count == 0 {
-			first = r
-		}
-
-		count++
+		runes = append(runes, r)
 	}
 
-	return first, count
+	for r := range rune(denseCeiling) {
+		keep(r)
+	}
+
+	for _, r := range []rune{
+		0x2028, 0x2029, 0x200B, 0x4E00, 0xE000, 0xFFFD,
+		0x1000C, 0x1F600, 0xE0001, 0x10FFFF,
+	} {
+		keep(r)
+	}
+
+	for r := rune(denseCeiling); r <= utf8.MaxRune; r += stride {
+		keep(r)
+	}
+
+	return runes
 }
 
 // TestEncodedBytes_ChargesAtLeastWhatTheHandlersEmit is the property
@@ -108,90 +114,33 @@ func firstUndercharged(
 // how a stated ceiling becomes false without any test noticing, so
 // the charge is measured against what the handlers actually write
 // rather than against the escaping rules as read.
-//
-// Every code point below U+1000 is checked on its own, for both
-// handlers. That range holds the quote, the backslash and the control
-// characters the handlers escape, next to code points each handler
-// writes in fewer bytes than their charge, which in a sum would cover
-// a neighbour charged too little.
-//
-// From U+1000 up the text handler writes every code point in exactly
-// its charge, so the rest of Unicode is checked batchRunes at a time:
-// each batch's summed charge must cover what the handler writes for
-// the whole batch. The sums there can miss the JSON handler alone
-// writing one code point in more bytes than its charge, when it writes
-// others in the same batch in fewer.
 func TestEncodedBytes_ChargesAtLeastWhatTheHandlersEmit(t *testing.T) {
 	t.Parallel()
 
-	var below strings.Builder
-	for r := range rune(0x1000) {
-		below.WriteRune(r)
-	}
-
-	var batches []string
-
-	for lo := rune(0x1000); lo <= utf8.MaxRune; lo += batchRunes {
-		var batch strings.Builder
-
-		for r := lo; r < lo+batchRunes; r++ {
-			// Surrogate halves are not runes a string can carry.
-			if utf8.ValidRune(r) {
-				batch.WriteRune(r)
-			}
-		}
-
-		batches = append(batches, batch.String())
-	}
-
-	// What EncodedBytes charges for each batch. Under -race -cover this
-	// takes longer than logging the batches, so it is worked out once,
-	// by whichever handler finishes logging first, while the other is
-	// still logging.
-	charged := sync.OnceValue(func() []int {
-		costs := make([]int, len(batches))
-
-		for i, batch := range batches {
-			for _, r := range batch {
-				costs[i] += logfield.EncodedBytes(r)
-			}
-		}
-
-		return costs
-	})
-
 	for name, newHandler := range newHandlers() {
 		t.Run(name, func(t *testing.T) {
 			t.Parallel()
 
-			if first, count := firstUndercharged(newHandler, below.String()); count > 0 {
-				t.Errorf(
-					"%d code points below U+1000 cost more than "+
-						"EncodedBytes charges, the first U+%04X",
-					count, first,
+			// 'a' is a printable ASCII rune, charged exactly one
+			// byte, so it is the zero point the other runes are
+			// measured against.
+			base := renderedWidth(
+				newHandler, strings.Repeat("a", sampleRunes),
+			)
+
+			for _, r := range chargeTestRunes() {
+				got := renderedWidth(
+					newHandler,
+					strings.Repeat(string(r), sampleRunes),
 				)
-			}
+				charged := sampleRunes *
+					(logfield.EncodedBytes(r) - 1)
 
-			emitted := make([]int, len(batches))
-			for i, batch := range batches {
-				emitted[i] = emittedBytes(newHandler, batch)
-			}
-
-			for i, cost := range charged() {
-				if emitted[i] <= cost {
-					continue
-				}
-
-				lo := rune(0x1000 + i*batchRunes)
-				first, count := firstUndercharged(
-					newHandler, batches[i],
-				)
-				t.Errorf(
-					"U+%04X to U+%04X emit %d bytes but are "+
-						"charged %d; %d of them cost more than "+
-						"EncodedBytes charges, the first U+%04X",
-					lo, lo+batchRunes-1, emitted[i], cost,
-					count, first,
+				require.LessOrEqual(
+					t, got-base, charged+quotingSlack,
+					"U+%04X costs more on the line than "+
+						"EncodedBytes charges for it",
+					r,
 				)
 			}
 		})

internal/middleware/accesslog_test.go

@@ -63,12 +63,6 @@ const (
 // capturingMiddleware returns a Middleware whose logger writes JSON
 // lines into the returned buffer, so the access log can be asserted
 // on directly.
-//
-// It trusts 192.0.2.1, the peer address httptest.NewRequestWithContext
-// gives a request, as a proxy, the way a deployment trusts its reverse
-// proxy: a request built that way and carrying X-Forwarded-For is
-// logged with the client that header names as clientIP, and one
-// without it with the peer.
 func capturingMiddleware(t *testing.T) (*middleware.Middleware, *bytes.Buffer) {
 	t.Helper()
 
@@ -78,10 +72,7 @@ func capturingMiddleware(t *testing.T) (*middleware.Middleware, *bytes.Buffer) {
 		&slog.HandlerOptions{Level: slog.LevelInfo},
 	))
 
-	cfg := &config.Config{
-		Environment:    config.EnvironmentDev,
-		TrustedProxies: trustedProxies("192.0.2.1/32"),
-	}
+	cfg := &config.Config{Environment: config.EnvironmentDev}
 
 	return middleware.NewForTest(log, cfg, nil), buf
 }
@@ -90,7 +81,7 @@ func capturingMiddleware(t *testing.T) (*middleware.Middleware, *bytes.Buffer) {
 // internal/logger can select: slog's text handler, which
 // internal/logger/logger.go installs when stderr is a tty. It escapes
 // differently from the JSON one, so the line bound has to be asserted
-// against both. It trusts the same peer.
+// against both.
 func capturingTextMiddleware(
 	t *testing.T,
 ) (*middleware.Middleware, *bytes.Buffer) {
@@ -102,10 +93,7 @@ func capturingTextMiddleware(
 		&slog.HandlerOptions{Level: slog.LevelInfo},
 	))
 
-	cfg := &config.Config{
-		Environment:    config.EnvironmentDev,
-		TrustedProxies: trustedProxies("192.0.2.1/32"),
-	}
+	cfg := &config.Config{Environment: config.EnvironmentDev}
 
 	return middleware.NewForTest(log, cfg, nil), buf
 }
@@ -346,12 +334,11 @@ func oversizedHeaders(value string) map[string]string {
 // sizeCase is one way of pointing 8 KB of client-chosen text at the
 // access log.
 type sizeCase struct {
-	target       string
-	headers      map[string]string
-	wantStatus   int
-	wantURL      string
-	wantClientIP string
-	bound        int
+	target     string
+	headers    map[string]string
+	wantStatus int
+	wantURL    string
+	bound      int
 }
 
 // lineSizeCases enumerates every part of a request that reaches the
@@ -388,7 +375,8 @@ func lineSizeCases() map[string]sizeCase {
 	}
 
 	// The url field on a 5xx keeps the concrete path, so it reaches its
-	// own budget on the same line as the three header fields.
+	// own budget on the same line as the three header fields. That is
+	// the widest access log line the service can be made to write.
 	longPath := "/boom/" + strings.Repeat("x", oversizedSegmentBytes)
 	wantLongURL := longPath[:maxFieldBytes] + truncationSuffix
 
@@ -432,29 +420,6 @@ func lineSizeCases() map[string]sizeCase {
 			}
 	}
 
-	// From a trusted proxy, clientIP is read out of X-Forwarded-For,
-	// which the client writes. What bounds the field is that only one
-	// address from the header is written, and it is written parsed, with
-	// no zone. An IPv6 address with all eight groups at four digits is
-	// the longest such address; here it carries an 8 KB zone, which must
-	// not reach the line. It goes on the 5xx line with all three header
-	// fields at their budget.
-	const longestIPv6 = "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff"
-
-	forwarded := oversizedHeaders(oversizedValue("h"))
-	forwarded[headerXFF] = oversizedValue("h") + ", " +
-		longestIPv6 + "%" + oversizedValue("h")
-
-	cases["oversized X-Forwarded-For from a trusted proxy "+
-		"with a 5xx concrete url"] = sizeCase{
-		target:       longPath,
-		headers:      forwarded,
-		wantStatus:   http.StatusInternalServerError,
-		wantURL:      wantLongURL,
-		wantClientIP: longestIPv6,
-		bound:        maxCappedLineBytes,
-	}
-
 	return cases
 }
 
@@ -495,14 +460,6 @@ func TestAccessLog_LineSizeDoesNotTrackInputSize(t *testing.T) {
 			require.Len(t, entries, 1)
 			assert.Equal(t, tc.wantURL, entries[0]["url"])
 
-			// Set only by the X-Forwarded-For case, where it proves
-			// the header was read rather than ignored.
-			if tc.wantClientIP != "" {
-				assert.Equal(
-					t, tc.wantClientIP, entries[0]["clientIP"],
-				)
-			}
-
 			// The markers sit at the far end of the client-chosen
 			// text, so their absence is what proves the redaction and
 			// the truncation actually ran.
@@ -691,8 +648,7 @@ func TestAccessLog_RetainsEveryOtherField(t *testing.T) {
 
 	for _, key := range []string{
 		"request_start", "method", "url", "useragent", "request_id",
-		"referer", "proto", "remoteIP", "clientIP", "status",
-		"latency_ms",
+		"referer", "proto", "remoteIP", "status", "latency_ms",
 	} {
 		assert.Contains(t, entries[0], key)
 	}

internal/middleware/clientip_test.go

@@ -1,200 +0,0 @@
-package middleware_test
-
-import (
-	"bytes"
-	"context"
-	"log/slog"
-	"net/http"
-	"net/http/httptest"
-	"testing"
-
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-	"sneak.berlin/go/webhooker/internal/config"
-	"sneak.berlin/go/webhooker/internal/middleware"
-)
-
-const (
-	// forwardedChain is the X-Forwarded-For a request arrives with:
-	// the client, then a second proxy inside trustedProxyCIDR that the
-	// request passed through before reaching trustedPeer.
-	forwardedChain = clientIPv4 + ", 10.0.0.2"
-
-	// untrustedPeer is a peer outside trustedProxyCIDR, so its
-	// X-Forwarded-For is ignored and the peer is the client.
-	untrustedPeer = "192.0.2.10:5555"
-
-	// oneRequestPerMinute is the receiver limit these tests install:
-	// the second request on a path is rejected, and the aggregate
-	// limit is ReceiverAggregateMultiplierConst.
-	oneRequestPerMinute = 1
-)
-
-// clientLogSite is one log line that names the client. build wraps the
-// middleware that writes it around a handler, and requests is how many
-// identical requests it takes before the line is written.
-type clientLogSite struct {
-	build    func(m *middleware.Middleware) http.Handler
-	requests int
-}
-
-// clientLogSites maps the message of each line that names the client
-// to the way to make it be written.
-func clientLogSites() map[string]clientLogSite {
-	served := func(*middleware.Middleware) http.Handler {
-		return okHandler()
-	}
-
-	receiver := func(m *middleware.Middleware) http.Handler {
-		return m.ReceiverRateLimit()(okHandler())
-	}
-
-	login := func(m *middleware.Middleware) http.Handler {
-		return http.HandlerFunc(
-			func(w http.ResponseWriter, r *http.Request) {
-				m.RecordLoginFailure(r, "someone")
-				w.WriteHeader(http.StatusUnauthorized)
-			},
-		)
-	}
-
-	csrf := func(m *middleware.Middleware) http.Handler {
-		return m.CSRF(http.HandlerFunc(forbidden))(okHandler())
-	}
-
-	passwordChange := func(m *middleware.Middleware) http.Handler {
-		return m.PasswordChangeRateLimit()(okHandler())
-	}
-
-	replay := func(m *middleware.Middleware) http.Handler {
-		return m.ReplayRateLimit()(okHandler())
-	}
-
-	resubmit := func(m *middleware.Middleware) http.Handler {
-		return m.ResubmitRateLimit()(okHandler())
-	}
-
-	return map[string]clientLogSite{
-		"http request": {
-			build:    served,
-			requests: 1,
-		},
-		"webhook receiver rate limit exceeded": {
-			build:    receiver,
-			requests: oneRequestPerMinute + 1,
-		},
-		// The aggregate limit sits in front of the per-entrypoint
-		// one, so the requests that one rejects count towards it.
-		"webhook receiver aggregate rate limit exceeded": {
-			build: receiver,
-			requests: middleware.ReceiverAggregateMultiplierConst*
-				oneRequestPerMinute + 1,
-		},
-		"login failure limit exceeded": {
-			build:    login,
-			requests: middleware.LoginRateLimitConst + 1,
-		},
-		"csrf: token validation failed": {
-			build:    csrf,
-			requests: 1,
-		},
-		"password change rate limit exceeded": {
-			build:    passwordChange,
-			requests: middleware.PasswordChangeRateLimitConst + 1,
-		},
-		"delivery replay rate limit exceeded": {
-			build:    replay,
-			requests: middleware.ReplayRateLimitConst + 1,
-		},
-		"event resubmit rate limit exceeded": {
-			build:    resubmit,
-			requests: middleware.ResubmitRateLimitConst + 1,
-		},
-	}
-}
-
-// clientLogLines sends the site's requests from peer, each carrying
-// forwardedChain, through Logging and then the site, as production
-// does, and returns the logged lines whose message is msg.
-func clientLogLines(
-	t *testing.T, site clientLogSite, msg, peer string,
-) []map[string]any {
-	t.Helper()
-
-	buf := new(bytes.Buffer)
-	log := slog.New(slog.NewJSONHandler(
-		buf,
-		&slog.HandlerOptions{Level: slog.LevelDebug},
-	))
-
-	cfg := &config.Config{
-		Environment:       config.EnvironmentDev,
-		ReceiverRateLimit: oneRequestPerMinute,
-		TrustedProxies:    trustedProxies(trustedProxyCIDR),
-	}
-
-	m := middleware.NewForTest(
-		log, cfg, newTestSessionManager(cfg, log, nil),
-	)
-	handler := m.Logging()(site.build(m))
-
-	for range site.requests {
-		req := httptest.NewRequestWithContext(
-			context.Background(), http.MethodPost, "/h/x", nil,
-		)
-		req.RemoteAddr = peer
-		req.Header.Set(headerXFF, forwardedChain)
-
-		handler.ServeHTTP(httptest.NewRecorder(), req)
-	}
-
-	var lines []map[string]any
-
-	for _, entry := range accessLogEntries(t, buf) {
-		if entry["msg"] == msg {
-			lines = append(lines, entry)
-		}
-	}
-
-	return lines
-}
-
-// TestClientIP_LoggedNextToThePeer checks that every line that names
-// the client carries both addresses: remoteIP, the connecting peer,
-// and clientIP, the client the rate limiters key on.
-func TestClientIP_LoggedNextToThePeer(t *testing.T) {
-	t.Parallel()
-
-	cases := map[string]struct {
-		peer       string
-		wantRemote string
-		wantClient string
-	}{
-		"trusted proxy with a forwarded chain": {
-			peer:       trustedPeer,
-			wantRemote: "10.0.0.1",
-			wantClient: clientIPv4,
-		},
-		"untrusted peer": {
-			peer:       untrustedPeer,
-			wantRemote: "192.0.2.10",
-			wantClient: "192.0.2.10",
-		},
-	}
-
-	for msg, site := range clientLogSites() {
-		for name, tc := range cases {
-			t.Run(msg+"/"+name, func(t *testing.T) {
-				t.Parallel()
-
-				lines := clientLogLines(t, site, msg, tc.peer)
-				require.NotEmpty(t, lines, "%q was never logged", msg)
-
-				for _, line := range lines {
-					assert.Equal(t, tc.wantRemote, line["remoteIP"])
-					assert.Equal(t, tc.wantClient, line["clientIP"])
-				}
-			})
-		}
-	}
-}

internal/middleware/csrf.go

@@ -45,10 +45,10 @@ func (m *Middleware) CSRF(
 		// unauthenticated client: a POST with no token to
 		// /hook/<any length of any text>/edit lands here. The
 		// method and path are capped against the same budgets as
-		// the access log. remoteIP and clientIP are the same
-		// addresses the access log carries, and
+		// the access log. remote_addr is set by net/http from the
+		// accepted connection rather than by the client, and
 		// csrf.FailureReason returns one of gorilla/csrf's own
-		// fixed error values, so none of them is client-sized.
+		// fixed error values, so neither is client-sized.
 		m.log.Warn("csrf: token validation failed",
 			"method", logfield.Truncate(
 				r.Method, maxLogMethodBytes,
@@ -56,8 +56,7 @@ func (m *Middleware) CSRF(
 			"path", logfield.Truncate(
 				r.URL.Path, logfield.MaxBytes,
 			),
-			"remoteIP", RemoteIP(r),
-			"clientIP", ClientIP(r),
+			"remote_addr", r.RemoteAddr,
 			"reason", csrf.FailureReason(r),
 		)
 		forbidden.ServeHTTP(w, r)

internal/middleware/export_test.go

@@ -132,12 +132,6 @@ func (g *LoginGuard) TrackedKeysForTest() (int, int) {
 // passwordChangeRateLimit constant.
 const PasswordChangeRateLimitConst = passwordChangeRateLimit
 
-// ReplayRateLimitConst exposes the replayRateLimit constant.
-const ReplayRateLimitConst = replayRateLimit
-
-// ResubmitRateLimitConst exposes the resubmitRateLimit constant.
-const ResubmitRateLimitConst = resubmitRateLimit
-
 // ReceiverAggregateMultiplierConst exposes the
 // receiverAggregateMultiplier constant.
 const ReceiverAggregateMultiplierConst = receiverAggregateMultiplier

internal/middleware/loginguard.go

@@ -385,8 +385,6 @@ func (m *Middleware) RecordLoginFailure(
 			"path", logfield.Truncate(
 				r.URL.Path, logfield.MaxBytes,
 			),
-			"remoteIP", RemoteIP(r),
-			"clientIP", ClientIP(r),
 		)
 	}
 

internal/middleware/middleware.go

@@ -3,7 +3,6 @@
 package middleware
 
 import (
-	"context"
 	"log/slog"
 	"net"
 	"net/http"
@@ -70,19 +69,18 @@ const (
 	//	url, useragent, referer   3*(512+11) = 1569
 	//	request_id                    128+11 =  139
 	//	method                         32+11 =   43
-	//	fixed portion                        =  405
+	//	fixed portion                        =  336
 	//	                                        ----
-	//	                                        2156
+	//	                                        2087
 	//
 	// The 512 is logfield.MaxBytes; the 11 is the truncation marker,
 	// charged on top of each budget rather than inside it.
 	//
 	// The fixed portion is the JSON punctuation, the field names, the
-	// level and the message, both timestamps at their longest, remoteIP
-	// and clientIP each charged as an IPv6 address with a zone, a
-	// three-digit status and a full-width int64 latency. Stated at 2560
-	// so the figure carries headroom rather than sitting on the
-	// arithmetic.
+	// level and the message, both timestamps at their longest, an IPv6
+	// remoteIP with a zone, a three-digit status and a full-width int64
+	// latency. Stated at 2560 so the figure carries headroom rather
+	// than sitting on the arithmetic.
 	//
 	// The tty text handler in internal/logger is covered by the same
 	// figure. logfield.EncodedBytes charges every rune at least what
@@ -90,8 +88,8 @@ const (
 	// bytes strconv.Quote spends on a non-printable rune at or above
 	// U+10000, which is four more than the JSON handler ever spends —
 	// so each budget bounds the encoded field under either handler.
-	// The text handler's fixed portion is 351, the smaller of the two,
-	// which puts its worst case at 2102.
+	// The text handler's fixed portion is 286, the smaller of the two,
+	// which puts its worst case at 2037.
 	//
 	// It is also the ceiling on every OTHER line this service writes
 	// THROUGH SLOG that carries text an UNAUTHENTICATED client
@@ -217,28 +215,6 @@ func ipFromHostPort(hp string) string {
 	return h
 }
 
-// RemoteIP returns the address of the connecting peer, without its
-// port. Behind a reverse proxy it is the proxy. Every log line that
-// names the client logs it as remoteIP, next to clientIP.
-func RemoteIP(r *http.Request) string {
-	return ipFromHostPort(r.RemoteAddr)
-}
-
-// clientIPKey is the request context key under which Logging stores
-// the value ClientIP returns.
-type clientIPKey struct{}
-
-// ClientIP returns the address the request is attributed to, which
-// Logging works out once per request with clientAddr in ratelimit.go
-// and logs as clientIP. The other lines that name the client read it
-// from here, so all of them agree. It is empty for a request Logging
-// has not seen.
-func ClientIP(r *http.Request) string {
-	ip, _ := r.Context().Value(clientIPKey{}).(string)
-
-	return ip
-}
-
 type loggingResponseWriter struct {
 	http.ResponseWriter
 
@@ -340,13 +316,6 @@ func (s *Middleware) Logging() func(http.Handler) http.Handler {
 			lrw := newLoggingResponseWriter(w)
 			ctx := r.Context()
 
-			// When RemoteAddr is not an address, the peer's own
-			// text is all the request can be attributed to.
-			clientIP := RemoteIP(r)
-			if addr, ok := s.clientAddr(r); ok {
-				clientIP = addr.String()
-			}
-
 			defer func() {
 				latency := time.Since(start)
 				requestID := ""
@@ -381,16 +350,13 @@ func (s *Middleware) Logging() func(http.Handler) http.Handler {
 						r.Referer(), logfield.MaxBytes,
 					),
 					"proto", r.Proto,
-					"remoteIP", RemoteIP(r),
-					"clientIP", clientIP,
+					"remoteIP", ipFromHostPort(r.RemoteAddr),
 					"status", lrw.statusCode,
 					"latency_ms", latency.Milliseconds(),
 				)
 			}()
 
-			next.ServeHTTP(lrw, r.WithContext(
-				context.WithValue(ctx, clientIPKey{}, clientIP),
-			))
+			next.ServeHTTP(lrw, r)
 		})
 	}
 }

internal/middleware/ratelimit.go

@@ -202,17 +202,24 @@ func (m *Middleware) forwardedClientAddr(
 }
 
 // rateLimitKey is the client identity every rate limiter in this
-// package buckets on: the address clientAddr attributes the request
-// to, reduced to a bucket by bucketKey — full address for IPv4, /64
-// prefix for IPv6.
+// package buckets on. Forwarded headers are honoured only when the
+// direct peer (RemoteAddr) is inside the configured trusted-proxy
+// set; otherwise the peer address itself is the key. Without that
+// gate any client could mint a fresh bucket per request, or starve
+// another client's bucket, by picking an X-Forwarded-For value —
+// which makes every limit here decorative against a deliberate
+// attacker.
+//
+// The address that identifies the client is then reduced to a bucket
+// by bucketKey: full address for IPv4, /64 prefix for IPv6.
 func (m *Middleware) rateLimitKey(r *http.Request) (string, error) {
 	return m.clientKey(r), nil
 }
 
 // clientKey computes the bucket key described on rateLimitKey.
 func (m *Middleware) clientKey(r *http.Request) string {
-	addr, ok := m.clientAddr(r)
-	if !ok {
+	peer, err := netip.ParseAddr(ipFromHostPort(r.RemoteAddr))
+	if err != nil {
 		// Not an address we can reason about; key on the raw
 		// value, the most specific identity left. Distinct
 		// RemoteAddr values stay in distinct buckets, so this
@@ -223,36 +230,16 @@ func (m *Middleware) clientKey(r *http.Request) string {
 		return r.RemoteAddr
 	}
 
-	return bucketKey(addr)
-}
-
-// clientAddr is the address a request is attributed to. The rate
-// limiters key on it and the logs name it as clientIP.
-//
-// Forwarded headers are honoured only when the direct peer
-// (RemoteAddr) is inside the configured trusted-proxy set; otherwise
-// the peer address itself is the client. Without that gate any client
-// could mint a fresh bucket per request, or starve another client's
-// bucket, by picking an X-Forwarded-For value — which makes every
-// limit here decorative against a deliberate attacker.
-//
-// ok is false when RemoteAddr is not an address at all.
-func (m *Middleware) clientAddr(r *http.Request) (netip.Addr, bool) {
-	peer, err := netip.ParseAddr(ipFromHostPort(r.RemoteAddr))
-	if err != nil {
-		return netip.Addr{}, false
-	}
-
 	peer = normalizeAddr(peer)
 	if !m.isTrustedProxy(peer) {
-		return peer, true
+		return bucketKey(peer)
 	}
 
 	if addr, ok := m.forwardedClientAddr(r); ok {
-		return addr, true
+		return bucketKey(addr)
 	}
 
-	return peer, true
+	return bucketKey(peer)
 }
 
 // tooManyRequests returns the 429 handler used by the
@@ -275,8 +262,6 @@ func (m *Middleware) tooManyRequests(
 			"path", logfield.Truncate(
 				r.URL.Path, logfield.MaxBytes,
 			),
-			"remoteIP", RemoteIP(r),
-			"clientIP", ClientIP(r),
 		)
 		http.Error(w, responseMessage, http.StatusTooManyRequests)
 	}
@@ -301,12 +286,8 @@ func (m *Middleware) tooManyRequests(
 func (m *Middleware) floodTooManyRequests(
 	logMessage, responseMessage string,
 ) http.HandlerFunc {
-	return func(w http.ResponseWriter, r *http.Request) {
-		m.log.Debug(
-			logMessage,
-			"remoteIP", RemoteIP(r),
-			"clientIP", ClientIP(r),
-		)
+	return func(w http.ResponseWriter, _ *http.Request) {
+		m.log.Debug(logMessage)
 		http.Error(w, responseMessage, http.StatusTooManyRequests)
 	}
 }

internal/server/alpine_browser_test.go

@@ -17,6 +17,7 @@ import (
 	"testing"
 	"time"
 
+	"github.com/chromedp/cdproto/browser"
 	"github.com/chromedp/cdproto/log"
 	"github.com/chromedp/cdproto/network"
 	"github.com/chromedp/cdproto/runtime"
@@ -43,7 +44,7 @@ const (
 // TestAlpineRunsUnderTheSecurityPolicy loads the webhook page and the
 // 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 work.
+// Alpine.js directives and the copy control work.
 func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 	t.Parallel()
 
@@ -55,6 +56,13 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 
 	userID, _ := env.seedUser(t, "browser", "browser-password")
 	webhook := env.seedWebhook(t, userID)
+	require.NoError(t, env.db.DB().Omit(clause.Associations).Create(
+		&database.Entrypoint{
+			WebhookID: webhook.ID,
+			Path:      "3c9e1f7a-5b2d-4e8a-9f6c-2a7d1e4b8c05",
+			Active:    true,
+		},
+	).Error)
 	event := env.seedEvent(t, webhook.ID, `{"hello":"browser"}`)
 	target := env.seedTarget(t, webhook.ID)
 	dlv := env.seedFailedDelivery(t, webhook.ID, event.ID, target.ID)
@@ -77,6 +85,7 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 
 	checkAddForms(ctx, t, page)
 	checkTargetType(ctx, t, page+"/events")
+	checkCopy(ctx, t, page)
 	checkEventLog(ctx, t, page+"/events", event.ID, target.Name)
 	checkMobileMenu(ctx, t, page)
 
@@ -220,6 +229,8 @@ func click(ctx context.Context, t *testing.T, xpath string) {
 
 // checkAddForms loads a webhook page and checks that each section's add
 // form stays hidden until the Add button beside its heading is clicked.
+// The click looks for a button element there, so it also checks that
+// Add is one.
 func checkAddForms(ctx context.Context, t *testing.T, url string) {
 	t.Helper()
 
@@ -327,6 +338,31 @@ func checkTargetType(ctx context.Context, t *testing.T, elsewhere string) {
 	)
 }
 
+// checkCopy loads a webhook page and checks that the Copy control beside
+// its entrypoint's URL is a button, and that clicking it copies the URL
+// and says so: the button reads "Copied" only once the copy succeeded.
+func checkCopy(ctx context.Context, t *testing.T, url string) {
+	t.Helper()
+
+	copyButton := `//button[@data-copy-target]`
+
+	// A browser lets the page in its active tab write to the clipboard
+	// on a click. A headless browser refuses unless told to allow it.
+	require.NoError(t, chromedp.Run(
+		ctx,
+		browser.SetPermission(
+			&browser.PermissionDescriptor{Name: "clipboard-write"},
+			browser.PermissionSettingGranted,
+		),
+		loadPage(url),
+	))
+
+	click(ctx, t, copyButton)
+
+	assert.True(t, shown(ctx, copyButton+`[text()="Copied"]`),
+		`clicking Copy does not show "Copied"`)
+}
+
 // checkEventLog loads the event log and checks that clicking an event's
 // row expands it, that in there clicking its delivery shows the
 // delivery's attempts and clicking again hides them, and that clicking

internal/server/routes_test.go

@@ -1178,12 +1178,12 @@ func TestHook_LinksBetweenPages(t *testing.T) {
 		// mobile menu link.
 		{
 			"/user/navigator/",
-			`href="([^"]+)" class="btn-text">Webhooks<`,
+			`href="([^"]+)" class="btn-secondary">Webhooks<`,
 			list,
 		},
 		{
 			"/user/navigator/",
-			`href="([^"]+)" class="btn-text w-full[^"]*">Webhooks<`,
+			`href="([^"]+)" class="btn-secondary w-full">Webhooks<`,
 			list,
 		},
 		{list, `href="(/hook/[^"]+)"`, page},

static/css/style.css

@@ -1 +1,44 @@
-/* Webhooker custom styles — see input.css for Tailwind theme */
+/*
+ * The two shared styles for the controls a user clicks. Every page loads
+ * this file after tailwind.css. It is plain CSS: make css does not build
+ * it.
+ *
+ * A button is btn-primary, btn-secondary or btn-danger, from input.css.
+ * A secondary or inline action, such as Copy beside an entrypoint URL or
+ * Edit beside a target, is btn-small.
+ *
+ * The rules join tailwind.css's components layer, where input.css puts
+ * its own, so a utility class on an element still overrides them.
+ */
+@layer components {
+    /* input.css gives its buttons no pointer cursor. */
+    .btn-primary,
+    .btn-secondary,
+    .btn-danger {
+        cursor: pointer;
+    }
+
+    .btn-small {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.25rem 0.625rem;
+        border: 1px solid var(--color-gray-300);
+        border-radius: var(--radius-md);
+        background-color: var(--color-white);
+        color: var(--color-primary-700);
+        font-size: var(--text-xs);
+        line-height: 1rem;
+        font-weight: var(--font-weight-medium);
+        cursor: pointer;
+    }
+
+    .btn-small:hover {
+        border-color: var(--color-primary-500);
+        background-color: var(--color-primary-50);
+    }
+
+    .btn-small:focus-visible {
+        outline: 2px solid var(--color-primary-500);
+        outline-offset: 2px;
+    }
+}

templates/base.html

@@ -22,9 +22,9 @@
 <footer class="bg-gray-100 border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] mt-8">
     <div class="max-w-6xl mx-auto px-8 py-6">
         <div class="text-center text-sm text-gray-500 font-mono font-light">
-            <a href="https://git.eeqj.de/sneak/webhooker" class="hover:text-gray-700">Webhooker</a>
+            <a href="https://git.eeqj.de/sneak/webhooker" class="btn-small">Webhooker</a>
             <span class="mx-1">by</span>
-            <a href="https://sneak.berlin" class="hover:text-gray-700">@sneak</a>
+            <a href="https://sneak.berlin" class="btn-small">@sneak</a>
             <span class="mx-3">|</span>
             <span>{{if .Version}}{{.Version}}{{else}}dev{{end}}</span>
         </div>

templates/htmlheader.html

@@ -3,6 +3,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{block "title" .}}Webhooker{{end}}</title>
 <link rel="stylesheet" href="/s/css/tailwind.css">
+<link rel="stylesheet" href="/s/css/style.css">
 <style>[x-cloak] { display: none !important; }</style>
 {{block "head" .}}{{end}}
 {{end}}

templates/navbar.html

@@ -7,7 +7,7 @@
 
         <!-- Mobile menu button -->
         {{if .User}}
-        <button @click="toggle" class="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100">
+        <button type="button" @click="toggle" class="btn-secondary md:hidden p-2">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path x-show="closed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                 <path x-show="open" x-cloak stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
@@ -18,9 +18,9 @@
         <!-- Desktop navigation -->
         <div class="hidden md:flex items-center gap-4">
             {{if .User}}
-            <a href="/hooks" class="btn-text">Webhooks</a>
-            <a href="/settings" class="btn-text">Settings</a>
-            <a href="/user/{{.User.Username}}" class="btn-text">
+            <a href="/hooks" class="btn-secondary">Webhooks</a>
+            <a href="/settings" class="btn-secondary">Settings</a>
+            <a href="/user/{{.User.Username}}" class="btn-secondary">
                 <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"/>
                     <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
@@ -32,7 +32,7 @@
             {{if .CSRFToken}}
             <form method="POST" action="/pages/logout" class="inline">
                 <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
-                <button type="submit" class="btn-text">Logout</button>
+                <button type="submit" class="btn-secondary">Logout</button>
             </form>
             {{end}}
             {{end}}
@@ -43,13 +43,13 @@
     <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="/hooks" class="btn-text w-full text-left">Webhooks</a>
-            <a href="/settings" class="btn-text w-full text-left">Settings</a>
-            <a href="/user/{{.User.Username}}" class="btn-text w-full text-left">Profile</a>
+            <a href="/hooks" class="btn-secondary w-full">Webhooks</a>
+            <a href="/settings" class="btn-secondary w-full">Settings</a>
+            <a href="/user/{{.User.Username}}" class="btn-secondary w-full">Profile</a>
             {{if .CSRFToken}}
             <form method="POST" action="/pages/logout">
                 <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
-                <button type="submit" class="btn-text w-full text-left">Logout</button>
+                <button type="submit" class="btn-secondary w-full">Logout</button>
             </form>
             {{end}}
             {{end}}

templates/source_detail.html

@@ -9,7 +9,7 @@
      no class this wide. -->
 <div class="mx-auto px-6 py-8" style="max-width: 108rem">
     <div class="mb-6">
-        <a href="/hooks" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to webhooks</a>
+        <a href="/hooks" class="btn-small">&larr; Back to webhooks</a>
         <div class="flex flex-wrap justify-between items-center gap-2 mt-2">
             <div>
                 <h1 class="text-2xl font-medium text-gray-900">{{.Webhook.Name}}</h1>
@@ -35,8 +35,8 @@
         <div class="card" x-data="collapsible">
             <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                 <h2 class="text-lg font-medium text-gray-900">Entrypoints</h2>
-                <button @click="toggle" class="btn-text text-sm">
-                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <button type="button" @click="toggle" class="btn-small">
+                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                     </svg>
                     Add
@@ -55,9 +55,9 @@
             <div class="divide-y divide-gray-100">
                 {{range .Entrypoints}}
                 <div class="p-4">
-                    <div class="flex items-center justify-between mb-1">
+                    <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
                         <span class="text-sm font-medium text-gray-900">{{if .Description}}{{.Description}}{{else}}Entrypoint{{end}}</span>
-                        <div class="flex items-center gap-2">
+                        <div class="flex flex-wrap items-center gap-2">
                             {{if .Active}}
                             <span class="badge-success">Active</span>
                             {{else}}
@@ -65,13 +65,13 @@
                             {{end}}
                             <form method="POST" action="/hook/{{$.Webhook.ID}}/entrypoints/{{.ID}}/toggle" class="inline">
                                 <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
-                                <button type="submit" class="text-xs text-gray-500 hover:text-primary-600" title="{{if .Active}}Deactivate{{else}}Activate{{end}}">
+                                <button type="submit" class="btn-small" title="{{if .Active}}Deactivate{{else}}Activate{{end}}">
                                     {{if .Active}}Deactivate{{else}}Activate{{end}}
                                 </button>
                             </form>
                             <form method="POST" action="/hook/{{$.Webhook.ID}}/entrypoints/{{.ID}}/delete" onsubmit="return confirm('Delete this entrypoint?')" class="inline">
                                 <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
-                                <button type="submit" class="text-xs text-red-500 hover:text-red-700" title="Delete">Delete</button>
+                                <button type="submit" class="btn-small text-red-600" title="Delete">Delete</button>
                             </form>
                         </div>
                     </div>
@@ -79,7 +79,7 @@
                         <code id="entrypoint-url-{{.ID}}" class="text-xs text-gray-500 break-all block flex-1">{{$.BaseURL}}/h/{{.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>
+                        <button type="button" hidden data-copy-target="entrypoint-url-{{.ID}}" class="btn-small">Copy</button>
                     </div>
                     <!-- The URL above is the entrypoint's credential:
                          anyone holding it can submit events. -->
@@ -94,8 +94,8 @@
         <div class="card" x-data="collapsible">
             <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                 <h2 class="text-lg font-medium text-gray-900">Targets</h2>
-                <button @click="toggle" class="btn-text text-sm">
-                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <button type="button" @click="toggle" class="btn-small">
+                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                     </svg>
                     Add
@@ -148,25 +148,25 @@
             <div class="divide-y divide-gray-100">
                 {{range .Targets}}
                 <div class="p-4">
-                    <div class="flex items-center justify-between mb-1">
+                    <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
                         <span class="text-sm font-medium text-gray-900">{{.Name}}</span>
-                        <div class="flex items-center gap-2">
+                        <div class="flex flex-wrap items-center gap-2">
                             <span class="badge-info">{{.Type}}</span>
                             {{if .Active}}
                             <span class="badge-success">Active</span>
                             {{else}}
                             <span class="badge-error">Inactive</span>
                             {{end}}
-                            <a href="/hook/{{$.Webhook.ID}}/targets/{{.ID}}/edit" class="text-xs text-gray-500 hover:text-primary-600" title="Edit">Edit</a>
+                            <a href="/hook/{{$.Webhook.ID}}/targets/{{.ID}}/edit" class="btn-small" title="Edit">Edit</a>
                             <form method="POST" action="/hook/{{$.Webhook.ID}}/targets/{{.ID}}/toggle" class="inline">
                                 <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
-                                <button type="submit" class="text-xs text-gray-500 hover:text-primary-600" title="{{if .Active}}Deactivate{{else}}Activate{{end}}">
+                                <button type="submit" class="btn-small" title="{{if .Active}}Deactivate{{else}}Activate{{end}}">
                                     {{if .Active}}Deactivate{{else}}Activate{{end}}
                                 </button>
                             </form>
                             <form method="POST" action="/hook/{{$.Webhook.ID}}/targets/{{.ID}}/delete" onsubmit="return confirm('Delete this target?')" class="inline">
                                 <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
-                                <button type="submit" class="text-xs text-red-500 hover:text-red-700" title="Delete">Delete</button>
+                                <button type="submit" class="btn-small text-red-600" title="Delete">Delete</button>
                             </form>
                         </div>
                     </div>
@@ -188,7 +188,7 @@
     <div class="card mt-6">
         <div class="p-4 border-b border-gray-200 flex justify-between items-center">
             <h2 class="text-lg font-medium text-gray-900">50 Most Recent Events</h2>
-            <a href="/hook/{{.Webhook.ID}}/events" class="btn-text text-sm">Full Event Log</a>
+            <a href="/hook/{{.Webhook.ID}}/events" class="btn-small">Full Event Log</a>
         </div>
         <div class="divide-y divide-gray-100">
             {{range .Events}}

templates/source_edit.html

@@ -5,7 +5,7 @@
 {{define "content"}}
 <div class="max-w-2xl mx-auto px-6 py-8">
     <div class="mb-6">
-        <a href="/hook/{{.Webhook.ID}}" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to {{.Webhook.Name}}</a>
+        <a href="/hook/{{.Webhook.ID}}" class="btn-small">&larr; Back to {{.Webhook.Name}}</a>
         <h1 class="text-2xl font-medium text-gray-900 mt-2">Edit Webhook</h1>
     </div>
 

templates/source_logs.html

@@ -5,7 +5,7 @@
 {{define "content"}}
 <div class="max-w-6xl mx-auto px-6 py-8">
     <div class="mb-6">
-        <a href="/hook/{{.Webhook.ID}}" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to {{.Webhook.Name}}</a>
+        <a href="/hook/{{.Webhook.ID}}" class="btn-small">&larr; Back to {{.Webhook.Name}}</a>
         <div class="flex justify-between items-center mt-2">
             <h1 class="text-2xl font-medium text-gray-900">Full Event Log</h1>
             <span class="text-sm text-gray-500">{{.TotalEvents}} total event{{if ne .TotalEvents 1}}s{{end}}</span>
@@ -16,8 +16,8 @@
         <div class="divide-y divide-gray-100">
             {{range .Events}}
             <div class="p-4" x-data="collapsible">
-                <div class="flex items-center justify-between cursor-pointer" @click="toggle">
-                    <div class="flex items-center gap-3">
+                <button type="button" class="btn-small w-full flex flex-wrap justify-between gap-2 text-left" @click="toggle">
+                    <span class="flex flex-wrap items-center gap-3">
                         <span class="badge-info">{{.Method}}</span>
                         <span class="text-sm font-mono text-gray-700">{{.ID}}</span>
                         <span class="text-sm text-gray-500">{{.ContentType}}</span>
@@ -27,8 +27,8 @@
                         {{if .ResubmitCount}}
                         <span class="text-xs text-gray-500">resubmitted {{.ResubmitCount}} time{{if ne .ResubmitCount 1}}s{{end}}</span>
                         {{end}}
-                    </div>
-                    <div class="flex items-center gap-4">
+                    </span>
+                    <span class="flex flex-wrap items-center gap-4">
                         {{range .Deliveries}}
                         <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">
                             {{.Target.DisplayName}}: {{.Status}}
@@ -38,8 +38,8 @@
                         <svg class="w-4 h-4 text-gray-400 transition-transform" :class="caretClass" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                         </svg>
-                    </div>
-                </div>
+                    </span>
+                </button>
 
                 <div x-show="open" x-cloak class="mt-3 p-3 bg-gray-50 rounded-md">
                     <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
@@ -50,12 +50,12 @@
                         <form method="POST" action="/hook/{{$.Webhook.ID}}/events/{{.ID}}/resubmit" class="inline">
                             <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                             <input type="hidden" name="page" value="{{$.Page}}">
-                            <button type="submit" class="text-xs text-primary-600 hover:text-primary-700" title="Submit this event again as a new event, to every currently active target">Resubmit</button>
+                            <button type="submit" class="btn-small" title="Submit this event again as a new event, to every currently active target">Resubmit</button>
                         </form>
                     </div>
                     <pre class="text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap break-all">{{.Body}}</pre>
                     {{if .BodyTruncated}}
-                    <p class="mt-2 text-xs text-gray-500">Body truncated for display: showing {{.BodyShownBytes}} of {{.BodyBytes}} bytes. The stored body is unchanged &mdash; <a href="/hook/{{$.Webhook.ID}}/events/{{.ID}}/body" class="text-primary-600 hover:text-primary-700 underline">download the full body</a>.</p>
+                    <p class="mt-2 text-xs text-gray-500">Body truncated for display: showing {{.BodyShownBytes}} of {{.BodyBytes}} bytes. The stored body is unchanged &mdash; <a href="/hook/{{$.Webhook.ID}}/events/{{.ID}}/body" class="btn-small">download the full body</a>.</p>
                     {{end}}
 
                     {{if .Deliveries}}
@@ -64,24 +64,26 @@
                         <div class="mt-2 divide-y divide-gray-200">
                             {{range .Deliveries}}
                             <div class="py-2" x-data="collapsible">
-                                <div class="flex items-center justify-between cursor-pointer" @click="toggle">
-                                    <div class="flex items-center gap-3">
-                                        <span class="text-sm text-gray-700">{{.Target.DisplayName}}</span>
-                                        <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">{{.Status}}</span>
-                                    </div>
-                                    <div class="flex items-center gap-3">
-                                        {{if .Status.Terminal}}
-                                        <form method="POST" action="/hook/{{$.Webhook.ID}}/deliveries/{{.ID}}/replay" class="inline" @click.stop>
-                                            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
-                                            <input type="hidden" name="page" value="{{$.Page}}">
-                                            <button type="submit" class="text-xs text-primary-600 hover:text-primary-700" title="Send this event to the target again">Replay</button>
-                                        </form>
-                                        {{end}}
-                                        <span class="text-xs text-gray-400">{{.AttemptCount}} attempt{{if ne .AttemptCount 1}}s{{end}}</span>
-                                        <svg class="w-3 h-3 text-gray-400 transition-transform" :class="caretClass" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-                                        </svg>
-                                    </div>
+                                <div class="flex items-center gap-3">
+                                    <button type="button" class="btn-small flex-1 justify-between text-left" @click="toggle">
+                                        <span class="flex items-center gap-3">
+                                            <span class="text-sm text-gray-700">{{.Target.DisplayName}}</span>
+                                            <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">{{.Status}}</span>
+                                        </span>
+                                        <span class="flex items-center gap-3">
+                                            <span class="text-xs text-gray-400">{{.AttemptCount}} attempt{{if ne .AttemptCount 1}}s{{end}}</span>
+                                            <svg class="w-3 h-3 text-gray-400 transition-transform" :class="caretClass" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                                            </svg>
+                                        </span>
+                                    </button>
+                                    {{if .Status.Terminal}}
+                                    <form method="POST" action="/hook/{{$.Webhook.ID}}/deliveries/{{.ID}}/replay" class="inline">
+                                        <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
+                                        <input type="hidden" name="page" value="{{$.Page}}">
+                                        <button type="submit" class="btn-small" title="Send this event to the target again">Replay</button>
+                                    </form>
+                                    {{end}}
                                 </div>
 
                                 <div x-show="open" x-cloak class="mt-2 space-y-2">

templates/sources_new.html

@@ -5,7 +5,7 @@
 {{define "content"}}
 <div class="max-w-2xl mx-auto px-6 py-8">
     <div class="mb-6">
-        <a href="/hooks" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to webhooks</a>
+        <a href="/hooks" class="btn-small">&larr; Back to webhooks</a>
         <h1 class="text-2xl font-medium text-gray-900 mt-2">Create Webhook</h1>
     </div>
 

templates/target_edit.html

@@ -5,7 +5,7 @@
 {{define "content"}}
 <div class="max-w-2xl mx-auto px-6 py-8">
     <div class="mb-6">
-        <a href="/hook/{{.Webhook.ID}}" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to {{.Webhook.Name}}</a>
+        <a href="/hook/{{.Webhook.ID}}" class="btn-small">&larr; Back to {{.Webhook.Name}}</a>
         <h1 class="text-2xl font-medium text-gray-900 mt-2">Edit Target</h1>
         <p class="text-sm text-gray-500 mt-1">Type: {{.Target.Type}}. A target's type cannot be changed; create a new target to deliver a different way.</p>
     </div>