Give the target type choice a width the stylesheet defines

The type select used w-40, which the committed static/css/tailwind.css
has no rule for, so it took the full width and pushed Next and Cancel
onto the line below. It now uses w-32, as the old type select did, so
the type choice, Next and Cancel sit on one row.

Model: opus-5-5

Dockerfile

@@ -25,6 +25,7 @@ COPY . .
 # would need a docker daemon inside the build. Keep these steps in step with
 # Dockerfile.lint, including --network=none (see its header for why).
 RUN make fmt-check
+RUN script/assets
 RUN --network=none golangci-lint config verify --config .golangci.yml
 RUN --network=none golangci-lint run --config .golangci.yml --build-tags browser ./...
 

Dockerfile.lint

@@ -31,6 +31,10 @@ FROM deps AS lint
 
 COPY . .
 
+# static/static.go embeds the Alpine.js file this extracts from 3p/; without
+# it the static package does not compile and cannot be linted.
+RUN script/assets
+
 # `run` silently ignores config keys it does not recognize, so a typo would
 # disable a setting without a word. `config verify` is what catches that.
 RUN --network=none golangci-lint config verify --config .golangci.yml

README.md

@@ -1050,7 +1050,8 @@ Archive databases are the one exception the service is built for: the
 archive writer closes and reopens its handle around writes (debounced
 to at most one reopen per second), so an operator can move an
 `archive-….db` away for offline retention while the service runs,
-and it is recreated on the next write. See
+and it is recreated on the next write. The webhook page names each
+`database` target's archive file. See
 [Database Architecture](#database-architecture). That is a
 move-the-file-away workflow, not a substitute for the backup procedures
 above.
@@ -1323,21 +1324,22 @@ markup. The CSP build runs no expressions, so every Alpine directive in
 `x-data="{ open: false }"` or `@click="open = !open"`.
 
 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; the Copy button beside an entrypoint URL reads
-"Copied" once clicked; of the recent events on the webhook page only the newest
-starts expanded, each expands and collapses, and Open leads to the event's own
-page; an event in the event log expands and collapses, and so do a delivery's
+under the real policy and checks that: the add entrypoint form stays hidden
+until Add is clicked; for every target type, the targets section's Add shows
+only a choice of type with Next and Cancel, Next shows only that type's fields
+(no url field for `database` or `log`), Cancel at either step closes the form,
+and saving adds the target; a refused target comes back with its form open, the
+values entered and the reason, and after Cancel the next Add starts with an
+empty form and no reason; 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.
+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
@@ -1350,7 +1352,9 @@ apply. The directory is `3p/` rather than `vendor/` because Go treats a root
 where `go:embed` picks it up. `script/test`, `make build` and `make dev` run
 it first, and the Dockerfile builds through `make test` and `make build`, so
 nothing downloads Alpine.js. The extracted file is not committed, and
-`.dockerignore` keeps any host copy out of the build context.
+`.dockerignore` keeps any host copy out of the build context. `static/static.go`
+names every file it embeds, so a build that skips the extraction, such as a
+bare `go build`, fails with an error naming `js/alpine.min.js`.
 
 To move to a new version: download
 `https://registry.npmjs.org/@alpinejs/csp/-/csp-<version>.tgz`, check it against
@@ -1878,16 +1882,19 @@ tags, so `AutoMigrate` creates them on a fresh database:
 | `deliveries`       | `event_id`, `deleted_at`    | The event log, which loads each event's deliveries, and retention, which counts and deletes the deliveries of expired events |
 | `delivery_results` | `delivery_id`, `deleted_at` | The event log, which loads the attempts of a page's deliveries, and retention, which deletes the attempts of expired events |
 | `events`           | `deleted_at`, `created_at`  | The webhook page's statistics, which count recent events |
+| `events`           | `resubmitted_from_id`, `deleted_at` | The event log, which counts the events resubmitted from each event on a page |
 | `events`           | `created_at`                | Retention, which selects expired events by age |
 
 GORM's soft delete adds `deleted_at IS NULL` to these queries; retention
 leaves it out. SQLite keeps no statistics on these tables, and without them it
 rates the `deleted_at` index, which every live row matches, above an index on
 a column matched against several values or compared with a range. So every
-index but the last also covers `deleted_at`. It comes second, so that
-retention can use the index without it, except in `events`, where the
-statistics compare `created_at` with a range (`>=`) and SQLite narrows by a
-range only on the last column it uses.
+index but the last also covers `deleted_at`. It comes second in the `event_id`
+and `delivery_id` indexes, so that retention can use them without it. The event
+log's count, the one query on the `resubmitted_from_id` index, always carries
+`deleted_at IS NULL` and uses both columns. In the statistics' `events` index
+`deleted_at` comes first, because they compare `created_at` with a range (`>=`)
+and SQLite narrows by a range only on the last column it uses.
 
 #### Common Fields
 
@@ -2033,6 +2040,14 @@ Because each `database` target has its own archive file, a target's
 webhook with different expiries keep two archives, each pruned on its
 own schedule.
 
+The webhook page shows, for each `database` target, its archive file's
+name, its size on disk and when it was last written. The size counts
+the `.db` and its `-wal` together, and the last write is the later of
+their two modification times, since a write lands in the `-wal` first.
+Both are read from the files' metadata; the archive is never opened.
+Before the first write, and after the file has been moved away, the page
+shows `not created yet` beside the name.
+
 Each `database` target on the webhook page has a **Download** button,
 which returns its archive as one gzipped JSON file,
 `archive-{webhook_name}-{target_name}-{YYYYMMDDTHHMMSSZ}.json.gz`, the
@@ -2913,8 +2928,7 @@ returns to the page that was asked for.
 | `POST` | `/hook/{id}/edit`        | Edit webhook submission |
 | `POST` | `/hook/{id}/delete`      | Delete webhook |
 | `GET`  | `/hook/{id}/events`      | Full Event Log |
-| `GET`  | `/hook/{id}/events/{eventID}` | One event's own page: its details, its whole body and every delivery of it |
-| `GET`  | `/hook/{id}/events/{eventID}/body` | Download an event's stored body. The pages show a body as text, cut at 32 KiB in the recent events and the event log, and leave a binary one out, so this is the only route that serves the stored bytes; it is offered wherever a body is cut or binary |
+| `GET`  | `/hook/{id}/events/{eventID}/body` | Download an event's full stored body. The log page renders each body only up to its cap, so this is the only route that serves a whole one; it is offered wherever a body is shown truncated |
 | `POST` | `/hook/{id}/deliveries/{deliveryID}/replay` | Replay a finished delivery: creates a new delivery for the same event against the target's current configuration (30 per minute per bucket, then `429`) |
 | `POST` | `/hook/{id}/events/{eventID}/resubmit` | Resubmit a stored event: creates a new event copying it and fans that out to every currently active target (30 per minute per bucket, then `429`) |
 | `POST` | `/hook/{id}/entrypoints` | Add entrypoint to webhook |
@@ -3382,8 +3396,9 @@ version is fixed independently of the compiler's:
 
 1. **Lint stage** (`golangci/golangci-lint:v2.12.2`, Debian-based) —
    installs `make`, downloads dependencies, copies the source, and runs
-   `make fmt-check`, then `golangci-lint config verify` and
-   `golangci-lint run`, both with `--network=none`.
+   `make fmt-check`, then `script/assets` to extract Alpine.js from
+   `3p/`, then `golangci-lint config verify` and `golangci-lint run`,
+   both with `--network=none`.
 2. **Builder stage** (`golang:1.26.1-bookworm`) — depends on the lint
    stage passing (it copies a file from it), runs `make test` and
    `make build` (both extract Alpine.js from `3p/` first), and finally

internal/database/event_tier_indexes_test.go

@@ -199,6 +199,40 @@ func TestStatisticsQueriesUseTheirIndexes(t *testing.T) {
 			"(deleted_at=? AND created_at>?)")
 }
 
+// TestResubmitCountUsesItsIndex does the same for the event log's count
+// of the events resubmitted from each of a page's events (resubmitCounts
+// in the handlers). It passes a full page of 25 ids: with an index on
+// resubmitted_from_id alone, SQLite uses it for three ids and turns to
+// the deleted_at index from five.
+func TestResubmitCountUsesItsIndex(t *testing.T) {
+	t.Parallel()
+
+	mgr, lc := setupTestWebhookDBManager(t)
+	ctx := context.Background()
+	require.NoError(t, lc.Start(ctx))
+
+	defer func() { require.NoError(t, lc.Stop(ctx)) }()
+
+	db, err := mgr.GetDB(uuid.New().String())
+	require.NoError(t, err)
+
+	dry := db.Session(&gorm.Session{DryRun: true})
+
+	page := make([]string, 25)
+	for i := range page {
+		page[i] = uuid.New().String()
+	}
+
+	var counts []struct{ Total int }
+
+	assertPlanUses(t, db, dry.Model(&database.Event{}).
+		Select("resubmitted_from_id, count(*) AS total").
+		Where("resubmitted_from_id IN ?", page).
+		Group("resubmitted_from_id").Find(&counts),
+		"idx_events_resubmitted_from_id "+
+			"(resubmitted_from_id=? AND deleted_at=?)")
+}
+
 // assertPlanUses asserts that SQLite's plan for a statement GORM built
 // in a dry run, run with the same SQL and arguments GORM would send,
 // names each of the given indexes.

internal/database/model_event.go

@@ -19,8 +19,10 @@ type Event struct {
 	// narrows by a < only on the last column it uses. Its final delete
 	// has no deleted_at condition and uses the index on created_at
 	// alone. The other tables keep the unindexed BaseModel created_at.
-	CreatedAt time.Time      `gorm:"index;index:idx_events_deleted_at_created_at,priority:2" json:"createdAt"`
-	DeletedAt gorm.DeletedAt `gorm:"index:idx_events_deleted_at_created_at,priority:1"       json:"deletedAt,omitzero"`
+	// DeletedAt is also the second column of the resubmitted_from_id
+	// index, for the reason DeliveryResult gives.
+	CreatedAt time.Time      `gorm:"index;index:idx_events_deleted_at_created_at,priority:2"                                           json:"createdAt"`
+	DeletedAt gorm.DeletedAt `gorm:"index:idx_events_deleted_at_created_at,priority:1;index:idx_events_resubmitted_from_id,priority:2" json:"deletedAt,omitzero"`
 
 	WebhookID    string `gorm:"type:uuid;not null" json:"webhookId"`
 	EntrypointID string `gorm:"type:uuid;not null" json:"entrypointId"`
@@ -32,8 +34,8 @@ type Event struct {
 	ContentType string `json:"contentType"`
 
 	// BodyBytes is the size of Body in bytes, recorded when the event
-	// is stored, so that the recent events list, which reads only the
-	// start of each body, knows the whole body's size.
+	// is stored so the recent events list can show it without reading
+	// the body.
 	BodyBytes int64 `gorm:"not null" json:"bodyBytes"`
 
 	// ResubmittedFromID names the event this one was copied from by
@@ -42,7 +44,7 @@ type Event struct {
 	// existed. It is not a foreign key: the source event can be
 	// reaped by retention while its copies remain, and the id is
 	// kept as the record of where the copy came from either way.
-	ResubmittedFromID *string `gorm:"type:uuid;index" json:"resubmittedFromId,omitempty"`
+	ResubmittedFromID *string `gorm:"type:uuid;index:idx_events_resubmitted_from_id,priority:1" json:"resubmittedFromId,omitempty"`
 
 	// Relations. No model marshals the record it belongs to, so
 	// Webhook and Entrypoint are left out of the JSON.

internal/delivery/target_database_archive.go

@@ -515,6 +515,47 @@ func (w *archiveWriter) prune(expiry time.Duration) {
 	}
 }
 
+// ArchiveFileInfo is what the metadata of a database target's archive
+// file says about it.
+type ArchiveFileInfo struct {
+	// Size is the bytes on disk of the file and its -wal together.
+	Size int64
+
+	// Written is when the file or its -wal was last modified, whichever
+	// is later: a write lands in the -wal first.
+	Written time.Time
+}
+
+// StatArchive reads the metadata of the archive file at path and of
+// its -wal, without opening the archive. With no file at path, which is
+// so before the first write and after the operator moved it away, the
+// error wraps fs.ErrNotExist.
+func StatArchive(path string) (ArchiveFileInfo, error) {
+	file, err := os.Stat(path)
+	if err != nil {
+		return ArchiveFileInfo{}, err
+	}
+
+	info := ArchiveFileInfo{Size: file.Size(), Written: file.ModTime()}
+
+	wal, err := os.Stat(path + "-wal")
+	if errors.Is(err, fs.ErrNotExist) {
+		return info, nil
+	}
+
+	if err != nil {
+		return ArchiveFileInfo{}, err
+	}
+
+	info.Size += wal.Size()
+
+	if wal.ModTime().After(info.Written) {
+		info.Written = wal.ModTime()
+	}
+
+	return info, nil
+}
+
 // fileExists reports whether a path currently exists.
 func fileExists(path string) bool {
 	_, err := os.Stat(path)

internal/delivery/target_database_test.go

@@ -3,6 +3,7 @@ package delivery_test
 import (
 	"database/sql"
 	"fmt"
+	"io/fs"
 	"log/slog"
 	"os"
 	"path/filepath"
@@ -183,6 +184,49 @@ func TestArchiveWriter_RecreatesAfterRemoval(
 	assert.Equal(t, "b", got[0].EventID)
 }
 
+// TestStatArchive proves StatArchive finds no file before the first
+// write; after a write still held in the -wal, counts the -wal in the
+// size and takes its later time as the last write; and finds no file
+// again once the file has been moved away.
+func TestStatArchive(t *testing.T) {
+	t.Parallel()
+
+	path := filepath.Join(t.TempDir(), "archive-wh.db")
+
+	_, err := delivery.StatArchive(path)
+	require.ErrorIs(t, err, fs.ErrNotExist)
+
+	// With the clock stopped, the reopen debounce never passes, so
+	// the handle stays open after the write.
+	stopped := time.Now()
+	w := delivery.NewExportArchiveWriter(path, archiveTestLogger(), 0)
+	w.SetNow(func() time.Time { return stopped })
+
+	require.NoError(t, w.Write(delivery.ExportArchivedEvent{EventID: "a"}, 0))
+
+	written := time.Date(2026, 1, 2, 3, 4, 5, 0, time.UTC)
+	earlier := written.Add(-time.Hour)
+	require.NoError(t, os.Chtimes(path, earlier, earlier))
+	require.NoError(t, os.Chtimes(path+"-wal", written, written))
+
+	file, err := os.Stat(path)
+	require.NoError(t, err)
+
+	wal, err := os.Stat(path + "-wal")
+	require.NoError(t, err)
+	require.Positive(t, wal.Size())
+
+	got, err := delivery.StatArchive(path)
+	require.NoError(t, err)
+	assert.Equal(t, file.Size()+wal.Size(), got.Size)
+	assert.True(t, written.Equal(got.Written), got.Written)
+
+	removeArchiveFiles(t, path)
+
+	_, err = delivery.StatArchive(path)
+	require.ErrorIs(t, err, fs.ErrNotExist)
+}
+
 func TestArchiveWriter_ReopenDebounce(t *testing.T) {
 	t.Parallel()
 

internal/handlers/event_body.go

@@ -24,10 +24,9 @@ import (
 const eventBodyQuery = "SELECT cast(body as blob) " +
 	"FROM events WHERE id = ? AND webhook_id = ? AND deleted_at IS NULL"
 
-// HandleEventBodyDownload serves one event's stored body byte
-// for byte, which the pages do not: they show it as escaped
-// text, cut at maxRenderedBodyBytes in the lists of events, and
-// leave a binary one out.
+// HandleEventBodyDownload serves one event's stored body in
+// full, which the event log page cannot: it caps each rendered
+// body at maxRenderedBodyBytes.
 //
 // The bytes are attacker-supplied — anyone who can reach the
 // public receiver chooses them — and this route hands them back

internal/handlers/event_body_view.go

@@ -1,150 +0,0 @@
-package handlers
-
-import (
-	"bytes"
-	"encoding/json"
-	"errors"
-	"io"
-	"unicode"
-	"unicode/utf8"
-)
-
-// maxRenderedBodyBytes is the most of one event's body that the
-// recent events on a webhook's page and the event log show; a larger
-// body is cut there and shown whole only on the event's own page.
-// Bodies come from the unauthenticated receiver under its 1 MB cap,
-// and renderTemplate buffers a whole page before writing it, so a list
-// of events cannot show every body whole.
-const maxRenderedBodyBytes = 32 << 10
-
-// maxInlineBodyLines is the most lines a body is shown at its full
-// height with. A body with more lines, or larger than
-// maxRenderedBodyBytes, is shown in a box of fixed height that
-// scrolls, so that it does not make the page huge.
-const maxInlineBodyLines = 200
-
-// maxIndentDepth is how deeply a JSON body's objects and arrays may
-// nest for it to be pretty-printed; a deeper one is shown as received.
-// Each level indents every line inside it two more spaces, so 10 KB of
-// nested brackets would indent to some 50 MB; within this depth a body
-// grows at most 35 times.
-const maxIndentDepth = 16
-
-// jsonIndent is the indent of a pretty-printed JSON body.
-const jsonIndent = "  "
-
-// BodyView is an event's body as the pages show it. newBodyView
-// decides it and templates/event_body.html shows it, the same way in
-// the recent events on a webhook's page, in the event log and on the
-// event's own page.
-type BodyView struct {
-	// EventURL is the event's own page. The stored body downloads
-	// from EventURL/body.
-	EventURL string
-
-	// Text is the body as shown, pretty-printed when it is JSON.
-	Text string
-
-	// Size is the stored body's size in bytes, and ShownBytes how
-	// many of them Text holds when Cut.
-	Size       int64
-	ShownBytes int
-
-	// Cut reports that Text is only the start of the body.
-	Cut bool
-
-	// Binary reports a body that is not text. It is not shown.
-	Binary bool
-
-	// Scroll reports a body to show in a box that scrolls.
-	Scroll bool
-}
-
-// newBodyView decides how to show an event's body. body is the
-// stored body, or its first maxRenderedBodyBytes when only those were
-// read, and size is the stored body's size.
-func newBodyView(eventURL string, body []byte, size int64) BodyView {
-	v := BodyView{EventURL: eventURL, Size: size}
-
-	if size > int64(len(body)) {
-		v.Cut = true
-		body = trimPartialRune(body)
-		v.ShownBytes = len(body)
-	}
-
-	// html/template shows invalid UTF-8 as replacement characters,
-	// and a browser shows a control character other than tab, line
-	// feed and carriage return as a box or not at all, so a body
-	// holding either is not text.
-	isControl := func(r rune) bool {
-		return unicode.IsControl(r) && r != '\t' && r != '\n' && r != '\r'
-	}
-
-	if !utf8.Valid(body) || bytes.IndexFunc(body, isControl) >= 0 {
-		v.Binary = true
-
-		return v
-	}
-
-	// A cut JSON document is no longer valid JSON.
-	if !v.Cut {
-		body = indentJSON(body)
-	}
-
-	// A final newline ends the last line rather than starting another.
-	lines := bytes.Count(bytes.TrimSuffix(body, []byte("\n")), []byte("\n")) + 1
-
-	v.Text = string(body)
-	v.Scroll = lines > maxInlineBodyLines || size > maxRenderedBodyBytes
-
-	return v
-}
-
-// indentJSON returns body pretty-printed when it is a JSON document,
-// and unchanged when it is not or nests deeper than maxIndentDepth.
-func indentJSON(body []byte) []byte {
-	if !json.Valid(body) || !indentFits(body) {
-		return body
-	}
-
-	var out bytes.Buffer
-
-	err := json.Indent(&out, body, "", jsonIndent)
-	if err != nil {
-		return body
-	}
-
-	return out.Bytes()
-}
-
-// indentFits reports whether the objects and arrays of the JSON
-// document body nest at most maxIndentDepth deep.
-func indentFits(body []byte) bool {
-	depth := 0
-
-	dec := json.NewDecoder(bytes.NewReader(body))
-
-	// A number too large for a float64 is still valid JSON.
-	dec.UseNumber()
-
-	for {
-		tok, err := dec.Token()
-		if errors.Is(err, io.EOF) {
-			return true
-		}
-
-		if err != nil {
-			return false
-		}
-
-		switch tok {
-		case json.Delim('{'), json.Delim('['):
-			depth++
-			if depth > maxIndentDepth {
-				return false
-			}
-		case json.Delim('}'), json.Delim(']'):
-			depth--
-		}
-	}
-}

internal/handlers/event_body_view_test.go

@@ -1,155 +0,0 @@
-package handlers_test
-
-import (
-	"strings"
-	"testing"
-
-	"github.com/stretchr/testify/assert"
-	"sneak.berlin/go/webhooker/internal/handlers"
-)
-
-// bodyView is how the pages would show body, stored whole.
-func bodyView(body string) handlers.BodyView {
-	return handlers.NewBodyViewForTest([]byte(body), int64(len(body)))
-}
-
-// lines is n lines of text, without a newline after the last.
-func lines(n int) string {
-	return strings.TrimSuffix(strings.Repeat("line\n", n), "\n")
-}
-
-// TestNewBodyView_FormatsValidJSON proves a JSON body is shown
-// pretty-printed, whatever its content type, with its keys in
-// the order they arrived.
-func TestNewBodyView_FormatsValidJSON(t *testing.T) {
-	t.Parallel()
-
-	v := bodyView(`{"b":1,"a":[true,null,"x"],"c":{}}`)
-
-	assert.Equal(t, []string{
-		`{`,
-		`  "b": 1,`,
-		`  "a": [`,
-		`    true,`,
-		`    null,`,
-		`    "x"`,
-		`  ],`,
-		`  "c": {}`,
-		`}`,
-	}, strings.Split(v.Text, "\n"))
-	assert.False(t, v.Scroll)
-}
-
-// TestNewBodyView_FormatsNestedJSON proves a document with a few
-// levels of nesting is pretty-printed: only deep nesting is shown
-// as received.
-func TestNewBodyView_FormatsNestedJSON(t *testing.T) {
-	t.Parallel()
-
-	v := bodyView(`{"data":[[1,2,3],[4,5,6]]}`)
-
-	assert.Equal(t, []string{
-		`{`,
-		`  "data": [`,
-		`    [`,
-		`      1,`,
-		`      2,`,
-		`      3`,
-		`    ],`,
-		`    [`,
-		`      4,`,
-		`      5,`,
-		`      6`,
-		`    ]`,
-		`  ]`,
-		`}`,
-	}, strings.Split(v.Text, "\n"))
-}
-
-// TestNewBodyView_InvalidJSONAsReceived proves a body that is not
-// a JSON document is shown exactly as it arrived.
-func TestNewBodyView_InvalidJSONAsReceived(t *testing.T) {
-	t.Parallel()
-
-	for _, body := range []string{
-		`{"a":1,`,
-		`{"a":1} {"b":2}`,
-		"plain text\n  indented",
-	} {
-		assert.Equal(t, body, bodyView(body).Text)
-	}
-}
-
-// TestNewBodyView_DeepJSONAsReceived proves a JSON body nested
-// more than 16 levels deep is shown as it arrived. 10 KB of nested
-// arrays would indent to some 50 MB.
-func TestNewBodyView_DeepJSONAsReceived(t *testing.T) {
-	t.Parallel()
-
-	nested := func(depth int) string {
-		return strings.Repeat("[", depth) + "1" + strings.Repeat("]", depth)
-	}
-
-	assert.NotEqual(t, nested(16), bodyView(nested(16)).Text)
-	assert.Equal(t, nested(17), bodyView(nested(17)).Text)
-
-	body := strings.Repeat("[", 5000) + strings.Repeat("]", 5000)
-
-	assert.Equal(t, body, bodyView(body).Text)
-}
-
-// TestNewBodyView_ScrollsPast200Lines proves a body is shown at
-// its full height up to 200 lines and in the scrolling box past
-// them, counting the lines after formatting.
-func TestNewBodyView_ScrollsPast200Lines(t *testing.T) {
-	t.Parallel()
-
-	assert.False(t, bodyView(lines(200)).Scroll)
-	assert.True(t, bodyView(lines(201)).Scroll)
-
-	// A final newline ends the last line rather than starting another.
-	assert.False(t, bodyView(lines(200)+"\n").Scroll)
-	assert.True(t, bodyView(lines(201)+"\n").Scroll)
-
-	// One line as received, 201 once formatted: the brackets and
-	// 199 elements.
-	numbers := "[" + strings.TrimSuffix(strings.Repeat("1,", 199), ",") + "]"
-
-	assert.NotContains(t, numbers, "\n")
-	assert.True(t, bodyView(numbers).Scroll)
-}
-
-// TestNewBodyView_LargeBodyScrolls proves a body larger than the
-// cap of the lists of events is shown in the scrolling box
-// however few lines it has, on the event's own page as in the
-// lists.
-func TestNewBodyView_LargeBodyScrolls(t *testing.T) {
-	t.Parallel()
-
-	assert.False(t, bodyView(strings.Repeat("x", bodyCap)).Scroll)
-	assert.True(t, bodyView(strings.Repeat("x", bodyCap+1)).Scroll)
-}
-
-// TestNewBodyView_BinaryNotShown proves a body that is not text
-// is never shown: one that is not valid UTF-8, or that holds a
-// control character other than tab, line feed and carriage return.
-func TestNewBodyView_BinaryNotShown(t *testing.T) {
-	t.Parallel()
-
-	for _, body := range []string{
-		"\xff\xfe\xfd",
-		"a\x00b",
-		// A small protobuf message: valid UTF-8, but control bytes.
-		"\x08\x01\x12\x03abc",
-		"\x1b[31mred\x1b[0m",
-		"a\x7fb",
-	} {
-		v := bodyView(body)
-
-		assert.True(t, v.Binary, "%q", body)
-		assert.Empty(t, v.Text)
-	}
-
-	assert.False(t, bodyView("snow "+snowman).Binary)
-	assert.False(t, bodyView("a\tb\r\nc\n").Binary)
-}

internal/handlers/event_detail.go

@@ -1,74 +0,0 @@
-package handlers
-
-import (
-	"net/http"
-
-	"github.com/go-chi/chi"
-	"sneak.berlin/go/webhooker/internal/database"
-)
-
-// HandleEventDetail shows one event on its own page: its details,
-// its whole body and every delivery of it. The page reads the
-// event's body whole, which the receiver caps at 1 MB.
-func (h *Handlers) HandleEventDetail() http.HandlerFunc {
-	return func(w http.ResponseWriter, r *http.Request) {
-		webhook, ok := h.ownedWebhook(w, r)
-		if !ok {
-			return
-		}
-
-		if !h.dbMgr.DBExists(webhook.ID) {
-			h.renderError(w, r, http.StatusNotFound)
-
-			return
-		}
-
-		webhookDB, err := h.dbMgr.GetDB(webhook.ID)
-		if err != nil {
-			h.serverError(w, r, "failed to get webhook database", err)
-
-			return
-		}
-
-		var rows []eventLogRow
-
-		err = webhookDB.Model(&database.Event{}).
-			Select(eventColumns).
-			Where(
-				"id = ? AND webhook_id = ?",
-				chi.URLParam(r, "eventID"), webhook.ID,
-			).
-			Limit(1).
-			Find(&rows).Error
-		if err != nil {
-			h.serverError(w, r, "failed to load event", err)
-
-			return
-		}
-
-		if len(rows) == 0 {
-			h.renderError(w, r, http.StatusNotFound)
-
-			return
-		}
-
-		targets, err := h.loadTargetMap(webhook.ID)
-		if err != nil {
-			h.serverError(w, r, "failed to load targets", err)
-
-			return
-		}
-
-		views, ok := h.eventLogViews(
-			w, r, webhookDB, webhook.ID, rows, targets,
-		)
-		if !ok {
-			return
-		}
-
-		h.renderTemplate(w, r, "event_detail.html", map[string]any{
-			tmplKeyWebhook: &webhook,
-			"Event":        views[0],
-		})
-	}
-}

internal/handlers/event_detail_test.go

@@ -1,152 +0,0 @@
-package handlers_test
-
-import (
-	"context"
-	"net/http"
-	"net/http/httptest"
-	"strconv"
-	"strings"
-	"testing"
-	"time"
-
-	"github.com/go-chi/chi"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-	"gorm.io/gorm/clause"
-	"sneak.berlin/go/webhooker/internal/database"
-	"sneak.berlin/go/webhooker/internal/handlers"
-	"sneak.berlin/go/webhooker/internal/session"
-)
-
-// serveEventPage runs the real event page handler as the test user
-// for the given webhook and event ids.
-func serveEventPage(
-	t *testing.T,
-	h *handlers.Handlers,
-	sess *session.Session,
-	webhookID, eventID string,
-) *httptest.ResponseRecorder {
-	t.Helper()
-
-	req := httptest.NewRequestWithContext(
-		context.Background(),
-		http.MethodGet,
-		"/hook/"+webhookID+"/events/"+eventID,
-		nil,
-	)
-
-	for _, c := range authenticatedCookies(
-		t, sess, deleteTestUserID, deleteTestUsername,
-	) {
-		req.AddCookie(c)
-	}
-
-	rctx := chi.NewRouteContext()
-	rctx.URLParams.Add(paramSourceID, webhookID)
-	rctx.URLParams.Add(paramEventID, eventID)
-
-	req = req.WithContext(
-		context.WithValue(req.Context(), chi.RouteCtxKey, rctx),
-	)
-
-	w := httptest.NewRecorder()
-	h.HandleEventDetail().ServeHTTP(w, req)
-
-	return w
-}
-
-// TestHandleEventDetail_ShowsEventWholeWithDeliveries proves the
-// event's page shows its details, its whole body even past the cap
-// of the lists of events, pretty-printed and in the scrolling box,
-// and each delivery with its status and attempts.
-func TestHandleEventDetail_ShowsEventWholeWithDeliveries(t *testing.T) {
-	t.Parallel()
-
-	f := newRecentEventsFixture(t)
-	target := seedTarget(t, f.db, f.webhook.ID, database.TargetTypeHTTP)
-
-	const sentinel = "TAIL-SENTINEL-5b2e"
-
-	body := `{"pad":"` + strings.Repeat("x", 2*bodyCap) +
-		`","tail":"` + sentinel + `"}`
-	event := f.event(t, contentTypeJSON, body, time.Now())
-	f.attempt(t, f.delivery(
-		t, event, target.ID, database.DeliveryStatusFailed,
-	), http.StatusBadGateway, time.Second)
-
-	w := serveEventPage(t, f.h, f.sess, f.webhook.ID, event.ID)
-	require.Equal(t, http.StatusOK, w.Code)
-
-	page := w.Body.String()
-
-	assert.Contains(t, page, event.ID)
-	assert.Contains(t, page, contentTypeJSON)
-	assert.Contains(t, page, strconv.Itoa(len(body))+" bytes")
-	assert.Contains(t, page, "{\n  "pad": "xxx")
-	assert.Contains(t, page, ""tail": ""+sentinel+""\n}")
-	assert.Contains(t, page, `style="max-height: 32rem; overflow-y: auto"`)
-	assert.NotContains(t, page, "Showing the first")
-	assert.Contains(t, page, target.Name)
-	assert.Contains(t, page, ">failed</span>")
-	assert.Contains(t, page, "Status: 502")
-}
-
-// TestHandleEventDetail_ResubmitLinks proves a resubmitted copy's
-// page links to its original's page, and the original's page says
-// it was resubmitted.
-func TestHandleEventDetail_ResubmitLinks(t *testing.T) {
-	t.Parallel()
-
-	f := newRecentEventsFixture(t)
-	original := f.event(t, contentTypeJSON, "{}", time.Now())
-
-	cp := &database.Event{
-		WebhookID:         f.webhook.ID,
-		Method:            http.MethodPost,
-		Body:              "{}",
-		ContentType:       contentTypeJSON,
-		ResubmittedFromID: &original.ID,
-	}
-	require.NoError(t, f.webhookDB.Omit(clause.Associations).Create(cp).Error)
-
-	w := serveEventPage(t, f.h, f.sess, f.webhook.ID, cp.ID)
-	require.Equal(t, http.StatusOK, w.Code)
-	assert.Contains(
-		t, w.Body.String(),
-		`href="/hook/`+f.webhook.ID+`/events/`+original.ID+`"`,
-	)
-
-	w = serveEventPage(t, f.h, f.sess, f.webhook.ID, original.ID)
-	require.Equal(t, http.StatusOK, w.Code)
-	assert.Contains(t, w.Body.String(), "as 1 new event<")
-}
-
-// TestHandleEventDetail_UnknownEventNotFound proves the page is a
-// 404 for an event that does not exist and for one that belongs to
-// another webhook.
-func TestHandleEventDetail_UnknownEventNotFound(t *testing.T) {
-	t.Parallel()
-
-	var (
-		h     *handlers.Handlers
-		sess  *session.Session
-		db    *database.Database
-		dbMgr *database.WebhookDBManager
-	)
-
-	app := newTestApp(t, &h, &sess, &db, &dbMgr)
-	app.RequireStart()
-
-	t.Cleanup(app.RequireStop)
-
-	mine := seedWebhook(t, db)
-	theirs := seedWebhook(t, db)
-
-	seedEventWithBody(t, dbMgr, mine.ID, "{}")
-	elsewhere := seedEventWithBody(t, dbMgr, theirs.ID, "{}")
-
-	for _, id := range []string{"no-such-event", elsewhere.ID} {
-		w := serveEventPage(t, h, sess, mine.ID, id)
-		assert.Equal(t, http.StatusNotFound, w.Code, id)
-	}
-}

internal/handlers/event_log_view.go

@@ -5,6 +5,14 @@ import (
 	"unicode/utf8"
 )
 
+// maxRenderedBodyBytes caps how many bytes of a stored event
+// body reach the event log page. Bodies come from the
+// unauthenticated receiver under the 1 MB ingest cap and
+// renderTemplate buffers a whole page before writing it, so
+// an uncapped page of paginationPerPage events is tens of
+// megabytes of resident memory per concurrent viewer.
+const maxRenderedBodyBytes = 8192
+
 // eventLogColumns is the event log's projection. The casts to
 // blob are load-bearing: they make substr and length count
 // bytes rather than characters, so the cap bounds the page in
@@ -16,23 +24,27 @@ const eventLogColumns = "id, created_at, method, content_type, " +
 	"substr(cast(body as blob), 1, ?) AS body, " +
 	"length(cast(body as blob)) AS body_bytes"
 
-// eventColumns is eventLogColumns for the event's own page, which
-// shows the whole body.
-const eventColumns = "id, created_at, method, content_type, " +
-	"resubmitted_from_id, " +
-	"cast(body as blob) AS body, " +
-	"length(cast(body as blob)) AS body_bytes"
-
 // EventLogView is the display-safe projection of an event for
-// the event log page and the event's own page, alongside
-// DeliveryView and TargetView.
+// the event log page, alongside DeliveryView and TargetView.
+// It carries a capped body plus the true stored size, so the
+// page can mark a body as truncated without ever holding the
+// whole thing.
 type EventLogView struct {
 	ID          string
 	CreatedAt   time.Time
 	Method      string
 	ContentType string
 
-	Body BodyView
+	// Body holds at most maxRenderedBodyBytes bytes of the
+	// stored body.
+	Body string
+
+	// BodyBytes is the true size of the stored body.
+	BodyBytes int64
+
+	// BodyTruncated reports that the stored body was larger
+	// than the cap, so the page owes the reader a marker.
+	BodyTruncated bool
 
 	// ResubmittedFromID names the event this one was copied
 	// from, empty for an event that arrived on the receiver.
@@ -53,10 +65,16 @@ func (v EventLogView) ResubmittedFrom() bool {
 	return v.ResubmittedFromID != ""
 }
 
-// eventLogRow is one row of the event log projection, or of
-// eventColumns. In the event log its body column arrives
-// already cut to the cap by SQLite, with the true size beside
-// it.
+// BodyShownBytes is how many body bytes the page is actually
+// rendering, which the truncation marker reports beside the
+// true size.
+func (v EventLogView) BodyShownBytes() int {
+	return len(v.Body)
+}
+
+// eventLogRow is one row of the event log projection. Its
+// body column arrives already cut to the cap by SQLite, with
+// the true size beside it.
 type eventLogRow struct {
 	ID                string
 	CreatedAt         time.Time
@@ -67,22 +85,31 @@ type eventLogRow struct {
 	BodyBytes         int64
 }
 
-// view projects a loaded row of the webhook's events for
-// rendering.
-func (r *eventLogRow) view(webhookID string) EventLogView {
+// view projects a loaded row for rendering.
+func (r *eventLogRow) view() EventLogView {
+	body := r.Body
+	truncated := r.BodyBytes > int64(len(body))
+
+	// Only a cut body can have been left mid-sequence by
+	// this query. A whole body is passed through exactly as
+	// stored, however malformed.
+	if truncated {
+		body = trimPartialRune(body)
+	}
+
 	var from string
 	if r.ResubmittedFromID != nil {
 		from = *r.ResubmittedFromID
 	}
 
 	return EventLogView{
-		ID:          r.ID,
-		CreatedAt:   r.CreatedAt,
-		Method:      r.Method,
-		ContentType: r.ContentType,
-		Body: newBodyView(
-			"/hook/"+webhookID+"/events/"+r.ID, r.Body, r.BodyBytes,
-		),
+		ID:                r.ID,
+		CreatedAt:         r.CreatedAt,
+		Method:            r.Method,
+		ContentType:       r.ContentType,
+		Body:              string(body),
+		BodyBytes:         r.BodyBytes,
+		BodyTruncated:     truncated,
 		ResubmittedFromID: from,
 	}
 }

internal/handlers/event_log_view_test.go

@@ -16,7 +16,7 @@ import (
 	"sneak.berlin/go/webhooker/internal/session"
 )
 
-// bodyCap is the number of body bytes the lists of events are
+// bodyCap is the number of body bytes the event log page is
 // allowed to render for one event.
 const bodyCap = handlers.MaxRenderedBodyBytesForTest
 
@@ -85,7 +85,7 @@ func seedAndProject(
 
 // TestHandleSourceLogs_BoundsOversizeBody proves the rendered
 // page is bounded by the cap rather than by the stored payload:
-// the body here is 16 times the cap, and the ingest path would
+// the body here is 64 times the cap, and the ingest path would
 // accept twice as much again.
 func TestHandleSourceLogs_BoundsOversizeBody(t *testing.T) {
 	t.Parallel()
@@ -123,7 +123,7 @@ func TestHandleSourceLogs_BoundsOversizeBody(t *testing.T) {
 	// The marker states the true stored size, not the cut one.
 	assert.Contains(
 		t, page,
-		"Showing the first "+strconv.Itoa(bodyCap)+
+		"showing "+strconv.Itoa(bodyCap)+
 			" of "+strconv.Itoa(storedBytes)+" bytes",
 	)
 }
@@ -152,35 +152,34 @@ func TestHandleSourceLogs_SmallBodyRendersWhole(t *testing.T) {
 	page := renderSourceLogsPage(t, h, sess, wh.ID)
 
 	assert.Contains(t, page, ""kept"")
-	assert.NotContains(t, page, "Showing the first")
+	assert.NotContains(t, page, "Body truncated for display")
 }
 
 // TestEventLogView_CutMidRune proves a multi-byte rune severed
 // by the byte-wise cut is dropped rather than surfaced as a
-// mojibake tail, which would also make the text look binary.
+// mojibake tail.
 func TestEventLogView_CutMidRune(t *testing.T) {
 	t.Parallel()
 
-	body := strings.Repeat(snowman, bodyCap)
+	body := strings.Repeat(snowman, 4096)
 	view := seedAndProject(t, body)
 
 	// bodyCap bytes hold bodyCap/3 whole snowmen and two bytes
 	// of the next one; those two are dropped.
 	whole := bodyCap / len(snowman)
 
-	assert.True(t, view.Body.Cut)
-	assert.False(t, view.Body.Binary)
-	assert.Equal(t, int64(len(body)), view.Body.Size)
-	assert.Equal(t, strings.Repeat(snowman, whole), view.Body.Text)
-	assert.True(t, utf8.ValidString(view.Body.Text))
-	assert.Equal(t, len(view.Body.Text), view.Body.ShownBytes)
-	assert.LessOrEqual(t, view.Body.ShownBytes, bodyCap)
+	assert.True(t, view.BodyTruncated)
+	assert.Equal(t, int64(len(body)), view.BodyBytes)
+	assert.Equal(t, strings.Repeat(snowman, whole), view.Body)
+	assert.True(t, utf8.ValidString(view.Body))
+	assert.LessOrEqual(t, len(view.Body), bodyCap)
 }
 
-// TestEventLogView_BinaryBodyNotShown proves a body that is not
-// text is left out rather than shown as replacement characters,
-// whether it is cut or not.
-func TestEventLogView_BinaryBodyNotShown(t *testing.T) {
+// TestEventLogView_BinaryBodyLeftAsStored proves a binary
+// payload is passed through byte for byte. Its tail is invalid
+// UTF-8 however the cut falls, so repairing it would misreport
+// what the sender delivered.
+func TestEventLogView_BinaryBodyLeftAsStored(t *testing.T) {
 	t.Parallel()
 
 	raw := make([]byte, bodyCap+808)
@@ -189,21 +188,12 @@ func TestEventLogView_BinaryBodyNotShown(t *testing.T) {
 		raw[i] = 0x80 | byte(i%0x40)
 	}
 
-	for name, body := range map[string][]byte{
-		"cut":   raw,
-		"whole": raw[:2048],
-		"NUL":   []byte("text\x00text"),
-	} {
-		t.Run(name, func(t *testing.T) {
-			t.Parallel()
+	view := seedAndProject(t, string(raw))
 
-			view := seedAndProject(t, string(body))
-
-			assert.True(t, view.Body.Binary)
-			assert.Empty(t, view.Body.Text)
-			assert.Equal(t, int64(len(body)), view.Body.Size)
-		})
-	}
+	assert.True(t, view.BodyTruncated)
+	assert.Equal(t, int64(len(raw)), view.BodyBytes)
+	assert.Equal(t, string(raw[:bodyCap]), view.Body)
+	assert.False(t, utf8.ValidString(view.Body))
 }
 
 // TestTrimPartialRune covers the distinction the cut repair

internal/handlers/export_test.go

@@ -19,16 +19,10 @@ func (s *Handlers) SetLogForTest(log *slog.Logger) {
 	s.log = log
 }
 
-// MaxRenderedBodyBytesForTest exposes the body cap of the lists
-// of events to the handlers_test package.
+// MaxRenderedBodyBytesForTest exposes the event log's body cap
+// to the handlers_test package.
 const MaxRenderedBodyBytesForTest = maxRenderedBodyBytes
 
-// NewBodyViewForTest exposes newBodyView for use in the
-// handlers_test package.
-func NewBodyViewForTest(body []byte, size int64) BodyView {
-	return newBodyView("/hook/w/events/e", body, size)
-}
-
 // MaxRenderedResponseBytesForTest exposes the event log's
 // delivery response cap to the handlers_test package.
 const MaxRenderedResponseBytesForTest = maxRenderedResponseBytes
@@ -143,22 +137,20 @@ func (s *Handlers) RenderTemplateForTest(
 // BuildSlackTargetConfigForTest exposes
 // buildSlackTargetConfig for use in the handlers_test package.
 func (s *Handlers) BuildSlackTargetConfigForTest(
-	w http.ResponseWriter,
-	r *http.Request,
+	ctx context.Context,
 	targetURL string,
-) (string, error) {
-	return s.buildSlackTargetConfig(w, r, targetURL)
+) (string, string, error) {
+	return s.buildSlackTargetConfig(ctx, targetURL)
 }
 
 // BuildHTTPTargetConfigForTest exposes buildHTTPTargetConfig
 // for use in the handlers_test package, taking the form fields
 // an HTTP target's configuration is built from.
 func (s *Handlers) BuildHTTPTargetConfigForTest(
-	w http.ResponseWriter,
-	r *http.Request,
+	ctx context.Context,
 	targetURL, headers, timeout string,
-) (string, error) {
-	return s.buildHTTPTargetConfig(w, r, targetFormInput{
+) (string, string, error) {
+	return s.buildHTTPTargetConfig(ctx, targetFormInput{
 		URL:     targetURL,
 		Headers: headers,
 		Timeout: timeout,
@@ -168,9 +160,8 @@ func (s *Handlers) BuildHTTPTargetConfigForTest(
 // BuildDatabaseTargetConfigForTest exposes
 // buildDatabaseTargetConfig for use in the handlers_test
 // package.
-func (s *Handlers) BuildDatabaseTargetConfigForTest(
-	w http.ResponseWriter,
+func BuildDatabaseTargetConfigForTest(
 	expiry string,
-) (string, error) {
-	return s.buildDatabaseTargetConfig(w, newRequestForTest(), expiry)
+) (string, string, error) {
+	return buildDatabaseTargetConfig(expiry)
 }

internal/handlers/handlers.go

@@ -150,23 +150,16 @@ func New(
 
 	// Parse all page templates once at startup
 	s.templates = map[string]*template.Template{
-		"login.html":        parsePageTemplate("login.html"),
-		"profile.html":      parsePageTemplate("profile.html"),
-		"settings.html":     parsePageTemplate("settings.html"),
-		"sources_list.html": parsePageTemplate("sources_list.html"),
-		"sources_new.html":  parsePageTemplate("sources_new.html"),
-		"source_detail.html": parsePageTemplate(
-			"source_detail.html", "webhook_stats.html", "event_body.html",
-		),
-		"source_edit.html": parsePageTemplate("source_edit.html"),
-		"source_logs.html": parsePageTemplate(
-			"source_logs.html", "event_body.html", "delivery_attempts.html",
-		),
-		"event_detail.html": parsePageTemplate(
-			"event_detail.html", "event_body.html", "delivery_attempts.html",
-		),
-		"target_edit.html": parsePageTemplate("target_edit.html"),
-		"error.html":       parsePageTemplate("error.html"),
+		"login.html":         parsePageTemplate("login.html"),
+		"profile.html":       parsePageTemplate("profile.html"),
+		"settings.html":      parsePageTemplate("settings.html"),
+		"sources_list.html":  parsePageTemplate("sources_list.html"),
+		"sources_new.html":   parsePageTemplate("sources_new.html"),
+		"source_detail.html": parsePageTemplate("source_detail.html", "webhook_stats.html"),
+		"source_edit.html":   parsePageTemplate("source_edit.html"),
+		"source_logs.html":   parsePageTemplate("source_logs.html"),
+		"target_edit.html":   parsePageTemplate("target_edit.html"),
+		"error.html":         parsePageTemplate("error.html"),
 	}
 
 	lc.Append(fx.Hook{
@@ -393,7 +386,7 @@ func (s *Handlers) pageData(
 // partial body and the status before a mid-render error can be
 // reported, leaving no way to serve a 500. Buffering makes a page's
 // rendered size resident memory per concurrent viewer, so every page
-// owes it a bound: the lists of events cap each stored body at
+// owes it a bound: the event log caps each stored body at
 // maxRenderedBodyBytes for exactly this reason.
 func (s *Handlers) executeTemplate(
 	w http.ResponseWriter,

internal/handlers/handlers_test.go

@@ -314,16 +314,12 @@ func TestBuildSlackTargetConfig_AcceptsPublicURL(t *testing.T) {
 
 	t.Cleanup(app.RequireStop)
 
-	req := httptest.NewRequestWithContext(
-		context.Background(), http.MethodPost, "/", nil)
-	w := httptest.NewRecorder()
-
-	cfg, err := h.BuildSlackTargetConfigForTest(
-		w, req, "http://93.184.216.34/services/T00/B00/xxx",
+	cfg, errMsg, err := h.BuildSlackTargetConfigForTest(
+		t.Context(), "http://93.184.216.34/services/T00/B00/xxx",
 	)
 
 	require.NoError(t, err)
-	assert.Equal(t, http.StatusOK, w.Code)
+	assert.Empty(t, errMsg)
 	assert.Contains(t, cfg, "webhookUrl")
 }
 
@@ -337,17 +333,13 @@ func TestBuildSlackTargetConfig_RejectsReservedURL(t *testing.T) {
 
 	t.Cleanup(app.RequireStop)
 
-	req := httptest.NewRequestWithContext(
-		context.Background(), http.MethodPost, "/", nil)
-	w := httptest.NewRecorder()
-
-	cfg, err := h.BuildSlackTargetConfigForTest(
-		w, req, "http://169.254.169.254/latest/meta-data/",
+	cfg, errMsg, err := h.BuildSlackTargetConfigForTest(
+		t.Context(), "http://169.254.169.254/latest/meta-data/",
 	)
 
-	require.Error(t, err)
+	require.NoError(t, err)
+	assert.Contains(t, errMsg, "Invalid target URL")
 	assert.Empty(t, cfg)
-	assert.Equal(t, http.StatusBadRequest, w.Code)
 }
 
 func TestRenderTemplate(t *testing.T) {
@@ -444,29 +436,22 @@ func TestRenderTemplateMidRenderErrorSendsNoPartialBody(t *testing.T) {
 func TestBuildDatabaseTargetConfig_Valid(t *testing.T) {
 	t.Parallel()
 
-	var h *handlers.Handlers
-
-	app := newTestApp(t, &h)
-	app.RequireStart()
-
-	t.Cleanup(app.RequireStop)
-
 	// Empty expiry: the keep-forever default, empty config.
-	w := httptest.NewRecorder()
-	cfg, err := h.BuildDatabaseTargetConfigForTest(w, "")
+	cfg, errMsg, err := handlers.BuildDatabaseTargetConfigForTest("")
 	require.NoError(t, err)
+	assert.Empty(t, errMsg)
 	assert.Empty(t, cfg)
 
 	// Explicit never is stored as config.
-	w = httptest.NewRecorder()
-	cfg, err = h.BuildDatabaseTargetConfigForTest(w, "never")
+	cfg, errMsg, err = handlers.BuildDatabaseTargetConfigForTest("never")
 	require.NoError(t, err)
+	assert.Empty(t, errMsg)
 	assert.JSONEq(t, `{"expiry":"never"}`, cfg)
 
 	// A positive duration is stored as config.
-	w = httptest.NewRecorder()
-	cfg, err = h.BuildDatabaseTargetConfigForTest(w, "720h")
+	cfg, errMsg, err = handlers.BuildDatabaseTargetConfigForTest("720h")
 	require.NoError(t, err)
+	assert.Empty(t, errMsg)
 	assert.JSONEq(t, `{"expiry":"720h"}`, cfg)
 }
 
@@ -475,22 +460,14 @@ func TestBuildDatabaseTargetConfig_RejectsBadExpiry(
 ) {
 	t.Parallel()
 
-	var h *handlers.Handlers
-
-	app := newTestApp(t, &h)
-	app.RequireStart()
-
-	t.Cleanup(app.RequireStop)
-
 	for _, bad := range []string{"nonsense", "7d", "-5h"} {
-		w := httptest.NewRecorder()
-		cfg, err := h.BuildDatabaseTargetConfigForTest(w, bad)
+		cfg, errMsg, err := handlers.BuildDatabaseTargetConfigForTest(bad)
 
-		require.Error(t, err, "expiry %q", bad)
-		assert.Empty(t, cfg)
-		assert.Equal(
-			t, http.StatusBadRequest, w.Code,
-			"expiry %q should be rejected with 400", bad,
+		require.NoError(t, err)
+		assert.Contains(
+			t, errMsg, "Invalid archive expiry",
+			"expiry %q should be refused", bad,
 		)
+		assert.Empty(t, cfg)
 	}
 }

internal/handlers/recent_events.go

@@ -12,12 +12,11 @@ import (
 )
 
 // recentEventColumns is the recent events list's projection. It
-// reads the body cut to maxRenderedBodyBytes, as eventLogColumns
-// does, and its size from body_bytes, recorded when the event was
+// leaves out the body, for the reason maxRenderedBodyBytes gives,
+// and reads its size from body_bytes, recorded when the event was
 // stored.
 const recentEventColumns = "id, created_at, method, content_type, " +
-	"resubmitted_from_id, body_bytes, " +
-	"substr(cast(body as blob), 1, ?) AS body"
+	"resubmitted_from_id, body_bytes"
 
 // recentAttemptColumns is the part of a recorded attempt the list
 // uses. The event log's deliveryResultColumns also reads response
@@ -51,9 +50,6 @@ type RecentEventView struct {
 	// unless the webhook has exactly one HTTP target.
 	Status      string
 	StatusClass string
-
-	// Body is what the row shows when it is expanded.
-	Body BodyView
 }
 
 // recentEventRow is one row of recentEventColumns.
@@ -64,7 +60,6 @@ type recentEventRow struct {
 	ContentType       string
 	ResubmittedFromID *string
 	BodyBytes         uint64
-	Body              []byte
 }
 
 // recentAttemptRow is one row of recentAttemptColumns. CreatedAt is
@@ -105,7 +100,7 @@ func loadRecentEvents(
 	var rows []recentEventRow
 
 	err := webhookDB.Model(&database.Event{}).
-		Select(recentEventColumns, maxRenderedBodyBytes).
+		Select(recentEventColumns).
 		Where("webhook_id = ?", webhookID).
 		Order("created_at DESC").
 		Limit(recentEventLimit).
@@ -150,7 +145,7 @@ func loadRecentEvents(
 	views := make([]RecentEventView, len(rows))
 	for i := range rows {
 		views[i] = rows[i].view(
-			webhookID, byEvent[rows[i].ID], attempts, statusTargetID,
+			byEvent[rows[i].ID], attempts, statusTargetID,
 		)
 	}
 
@@ -187,20 +182,14 @@ func loadRecentAttempts(
 	return byDelivery, nil
 }
 
-// view projects a loaded row of the webhook's events for
-// rendering. deliveries is the event's deliveries, oldest first,
-// and attempts their recorded attempts keyed by delivery ID.
+// view projects a loaded row for rendering. deliveries is the
+// event's deliveries, oldest first, and attempts their recorded
+// attempts keyed by delivery ID.
 func (r *recentEventRow) view(
-	webhookID string,
 	deliveries []database.Delivery,
 	attempts map[string][]recentAttemptRow,
 	statusTargetID string,
 ) RecentEventView {
-	//nolint:gosec // body_bytes is at most the receiver's 1 MB cap
-	body := newBodyView(
-		"/hook/"+webhookID+"/events/"+r.ID, r.Body, int64(r.BodyBytes),
-	)
-
 	v := RecentEventView{
 		Method:         r.Method,
 		ContentType:    r.ContentType,
@@ -208,7 +197,6 @@ func (r *recentEventRow) view(
 		ReceivedUTC:    r.CreatedAt.UTC().Format(time.DateTime) + " UTC",
 		Size:           humanize.Bytes(r.BodyBytes),
 		ProcessingTime: processingTime(deliveries, attempts),
-		Body:           body,
 	}
 
 	if r.ResubmittedFromID != nil {

internal/handlers/recent_events_test.go

@@ -5,7 +5,6 @@ import (
 	"fmt"
 	"net/http"
 	"net/http/httptest"
-	"strconv"
 	"strings"
 	"testing"
 	"time"
@@ -302,73 +301,6 @@ func TestHandleSourceDetail_NoStatusWithoutSingleHTTPTarget(
 	}
 }
 
-// TestHandleSourceDetail_RecentEventsLinkAndExpand proves each row
-// links to its event's own page and expands to show its body, and
-// that only the newest row starts expanded.
-func TestHandleSourceDetail_RecentEventsLinkAndExpand(t *testing.T) {
-	t.Parallel()
-
-	f := newRecentEventsFixture(t)
-	now := time.Now()
-
-	older := f.event(
-		t, contentTypeJSON, `{"which":"older"}`, now.Add(-time.Minute),
-	)
-	newer := f.event(t, contentTypeJSON, `{"which":"newer"}`, now)
-
-	body := f.render(t)
-
-	for _, e := range []*database.Event{older, newer} {
-		assert.Contains(
-			t, body, `href="/hook/`+f.webhook.ID+`/events/`+e.ID+`"`,
-		)
-	}
-
-	assert.Equal(t, 2, strings.Count(body, `<div x-show="open" x-cloak class="mt-3">`))
-	assert.Equal(t, 1, strings.Count(body, " data-open>"))
-
-	open := strings.Index(body, " data-open>")
-	newerBody := strings.Index(body, "&#34;which&#34;: &#34;newer&#34;")
-	olderBody := strings.Index(body, "&#34;which&#34;: &#34;older&#34;")
-
-	assert.Less(t, open, newerBody, "the newest row is not the open one")
-	assert.Less(t, newerBody, olderBody)
-}
-
-// TestHandleSourceDetail_RecentEventBodyCut proves a body up to
-// the cap is shown whole and pretty-printed, and a larger one only
-// its first bodyCap bytes, as received, with links to the whole
-// body on the event's page and to the download.
-func TestHandleSourceDetail_RecentEventBodyCut(t *testing.T) {
-	t.Parallel()
-
-	f := newRecentEventsFixture(t)
-	now := time.Now()
-
-	// A JSON document of n bytes.
-	document := func(n int) string {
-		return `{"pad":"` + strings.Repeat("x", n-len(`{"pad":""}`)) + `"}`
-	}
-
-	whole := f.event(
-		t, contentTypeJSON, document(bodyCap), now.Add(-time.Minute),
-	)
-	cut := f.event(t, contentTypeJSON, document(bodyCap+1), now)
-
-	body := f.render(t)
-	eventURL := `href="/hook/` + f.webhook.ID + `/events/`
-
-	assert.Equal(t, 1, strings.Count(body, "{\n  &#34;pad&#34;: "))
-	assert.Contains(t, body, "{&#34;pad&#34;:&#34;xxx")
-	assert.Contains(
-		t, body,
-		"Showing the first "+strconv.Itoa(bodyCap)+" of "+
-			strconv.Itoa(bodyCap+1)+" bytes, unformatted.",
-	)
-	assert.Contains(t, body, eventURL+cut.ID+`/body"`)
-	assert.NotContains(t, body, eventURL+whole.ID+`/body"`)
-}
-
 // TestHandleWebhook_RecordsBodySize proves the receiver records the
 // body's size in bytes, not characters, with the event it stores.
 func TestHandleWebhook_RecordsBodySize(t *testing.T) {

internal/handlers/source_management.go

@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"context"
 	"encoding/json"
 	"errors"
 	"fmt"
@@ -38,9 +39,6 @@ type WebhookListItem struct {
 	EventsUnreadable  bool
 }
 
-// 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
@@ -460,15 +458,20 @@ func (h *Handlers) HandleSourceDetail() http.HandlerFunc {
 			return
 		}
 
-		h.renderSourceDetail(w, r, webhook)
+		h.renderSourceDetail(w, r, webhook, targetFormInput{}, "")
 	}
 }
 
-// renderSourceDetail loads and renders a source detail page.
+// renderSourceDetail loads and renders a source detail page. With a
+// targetErr, it is the page shown again for a refused add target
+// form: it answers 400, and the form opens on targetForm's type with
+// its values and the message.
 func (h *Handlers) renderSourceDetail(
 	w http.ResponseWriter,
 	r *http.Request,
 	webhook database.Webhook,
+	targetForm targetFormInput,
+	targetErr string,
 ) {
 	var entrypoints []database.Entrypoint
 
@@ -521,13 +524,20 @@ func (h *Handlers) renderSourceDetail(
 		// target's stored config blob holds a credential, and it
 		// must never reach a template.
 		"Entrypoints": NewEntrypointViews(entrypoints),
-		"Targets":     delivery.NewTargetViews(targets),
+		"Targets":     h.targetRows(&webhook, targets),
 		"Events":      events,
 		"BaseURL":     baseURL,
 		"Stats":       h.loadWebhookStats(webhook.ID, entrypoints, targets),
+		"TargetForm":  targetForm,
+		"TargetError": targetErr,
 	}
 
-	h.renderTemplate(w, r, "source_detail.html", data)
+	status := http.StatusOK
+	if targetErr != "" {
+		status = http.StatusBadRequest
+	}
+
+	h.renderTemplateStatus(w, r, "source_detail.html", data, status)
 }
 
 // HandleSourceEdit shows the form to edit a webhook.
@@ -1022,10 +1032,10 @@ func (h *Handlers) HandleSourceLogs() http.HandlerFunc {
 // view, which renders its target as a blank name.
 //
 // This map is historical display only. It is built for the event
-// log and an event's own page, and reaches nothing but
-// DeliveryView.Target: the target list on the source detail page,
-// the edit form and the replay path each resolve targets
-// themselves, and a deleted row is refused there as before.
+// log page and reaches nothing but DeliveryView.Target: the
+// target list on the source detail page, the edit form and the
+// replay path each resolve targets themselves, and a deleted row
+// is refused there as before.
 func (h *Handlers) loadTargetMap(
 	webhookID string,
 ) (map[string]eventLogTarget, error) {
@@ -1081,8 +1091,10 @@ func (h *Handlers) loadEventsWithDeliveries(
 	targetMap map[string]eventLogTarget,
 	page int,
 ) ([]EventLogView, int64, bool) {
+	var result []EventLogView
+
 	if !h.dbMgr.DBExists(webhook.ID) {
-		return nil, 0, true
+		return result, 0, true
 	}
 
 	webhookDB, err := h.dbMgr.GetDB(webhook.ID)
@@ -1098,26 +1110,7 @@ func (h *Handlers) loadEventsWithDeliveries(
 		webhookDB, webhook.ID, page,
 	)
 
-	result, ok := h.eventLogViews(
-		w, r, webhookDB, webhook.ID, rows, targetMap,
-	)
-
-	return result, totalEvents, ok
-}
-
-// eventLogViews projects loaded events for rendering, each with
-// its deliveries and how many times it has been resubmitted. Like
-// loadEventsWithDeliveries, it reports false once it has answered
-// the request with an error.
-func (h *Handlers) eventLogViews(
-	w http.ResponseWriter,
-	r *http.Request,
-	webhookDB *gorm.DB,
-	webhookID string,
-	rows []eventLogRow,
-	targetMap map[string]eventLogTarget,
-) ([]EventLogView, bool) {
-	result := make([]EventLogView, len(rows))
+	result = make([]EventLogView, len(rows))
 	eventDeliveries := make([][]database.Delivery, len(rows))
 
 	var deliveryIDs []string
@@ -1125,7 +1118,7 @@ func (h *Handlers) eventLogViews(
 	eventIDs := make([]string, len(rows))
 
 	for i := range rows {
-		result[i] = rows[i].view(webhookID)
+		result[i] = rows[i].view()
 		eventIDs[i] = rows[i].ID
 
 		webhookDB.Where(
@@ -1147,7 +1140,7 @@ func (h *Handlers) eventLogViews(
 			w, r, "failed to load delivery attempts", err,
 		)
 
-		return nil, false
+		return nil, 0, false
 	}
 
 	resubmits, err := resubmitCounts(webhookDB, eventIDs)
@@ -1156,7 +1149,7 @@ func (h *Handlers) eventLogViews(
 			w, r, "failed to count event resubmissions", err,
 		)
 
-		return nil, false
+		return nil, 0, false
 	}
 
 	for i := range rows {
@@ -1166,7 +1159,7 @@ func (h *Handlers) eventLogViews(
 		result[i].ResubmitCount = resubmits[rows[i].ID]
 	}
 
-	return result, true
+	return result, totalEvents, true
 }
 
 // loadEventLogRows reads one page of the event log projection, newest
@@ -1454,64 +1447,27 @@ func (h *Handlers) HandleTargetCreate() http.HandlerFunc {
 	}
 }
 
-// processTargetCreate validates and creates a new target.
+// processTargetCreate validates and creates a new target. A refused
+// submission shows the webhook page again, with the add target form
+// open on the chosen type, the values entered, and the reason.
 func (h *Handlers) processTargetCreate(
 	w http.ResponseWriter,
 	r *http.Request,
 	webhook database.Webhook,
 ) {
-	// The body size cap is enforced by the MaxBodySize middleware,
-	// which runs before CSRF parses the form.
-	//
-	// Every field here is read with PostFormValue, not FormValue.
-	// FormValue falls back to the query string, which would let
-	// `POST /hook/{id}/targets?url=https://hooks.slack.com/...`
-	// configure a target from a value the request line carries — and
-	// the request line, unlike the body, is what logs, proxies,
-	// Referer headers and error trackers record.
-	name := r.PostFormValue("name")
-	targetType := database.TargetType(r.PostFormValue("type"))
+	in := targetFormInputFrom(r)
 
-	if name == "" {
-		http.Error(
-			w, "Name is required", http.StatusBadRequest,
-		)
-
-		return
-	}
-
-	if !isValidTargetType(targetType) {
-		http.Error(
-			w, "Invalid target type",
-			http.StatusBadRequest,
-		)
-
-		return
-	}
-
-	configJSON, err := h.buildTargetConfig(
-		w, r, targetType, targetFormInputFrom(r),
-	)
+	target, errMsg, err := h.newTarget(r.Context(), webhook.ID, in)
 	if err != nil {
+		h.serverError(w, r, "failed to encode target config", err)
+
 		return
 	}
 
-	// A new target has no stored retry count, so an absent field
-	// takes the fire-and-forget default. A field the operator filled
-	// in with something invalid is rejected rather than becoming
-	// that default.
-	maxRetries, ok := targetMaxRetries(w, r, 0)
-	if !ok {
-		return
-	}
+	if errMsg != "" {
+		h.renderSourceDetail(w, r, webhook, in, errMsg)
 
-	target := &database.Target{
-		WebhookID:  webhook.ID,
-		Name:       name,
-		Type:       targetType,
-		Active:     true,
-		Config:     configJSON,
-		MaxRetries: maxRetries,
+		return
 	}
 
 	err = h.db.DB().Create(target).Error
@@ -1527,6 +1483,49 @@ func (h *Handlers) processTargetCreate(
 	)
 }
 
+// newTarget validates a new target for a webhook and returns the row
+// to create, or, when it refuses the target, the message the form
+// shows. An error is the server's fault, not a refusal: the accepted
+// configuration could not be encoded. Every form that creates a
+// target goes through here, so they all accept and refuse the same
+// things.
+func (h *Handlers) newTarget(
+	ctx context.Context,
+	webhookID string,
+	in targetFormInput,
+) (*database.Target, string, error) {
+	if in.Name == "" {
+		return nil, "Name is required", nil
+	}
+
+	if !isValidTargetType(in.Type) {
+		return nil, "Invalid target type", nil
+	}
+
+	configJSON, errMsg, err := h.buildTargetConfig(ctx, in.Type, in)
+	if err != nil || errMsg != "" {
+		return nil, errMsg, err
+	}
+
+	// A new target has no stored retry count, so an absent field
+	// takes the fire-and-forget default. A field the operator filled
+	// in with something invalid is refused rather than becoming
+	// that default.
+	maxRetries, err := parseMaxRetries(in.MaxRetries, 0)
+	if err != nil {
+		return nil, "Invalid max retries: " + retriesErrorMessage(err), nil
+	}
+
+	return &database.Target{
+		WebhookID:  webhookID,
+		Name:       in.Name,
+		Type:       in.Type,
+		Active:     true,
+		Config:     configJSON,
+		MaxRetries: maxRetries,
+	}, "", nil
+}
+
 // isValidTargetType checks whether the target type is supported.
 func isValidTargetType(tt database.TargetType) bool {
 	switch tt {
@@ -1558,11 +1557,16 @@ func pageOrFirst(s string) int {
 	return v
 }
 
-// targetFormInput carries the raw form values describing a target's
-// configuration. Both the create and the edit path fill one and hand
-// it to buildTargetConfig, so neither can come to validate a
-// destination differently from the other.
+// targetFormInput carries the raw values of a target form. Both the
+// create and the edit path fill one and hand it to buildTargetConfig,
+// so neither can come to validate a destination differently from the
+// other. A refused add target form is shown again from it.
 type targetFormInput struct {
+	// Name is the target's name.
+	Name string
+	// Type is the type chosen on the add target form. The edit form
+	// has none: a target's stored type decides.
+	Type database.TargetType
 	// URL is the destination for an HTTP target and the webhook URL
 	// for a Slack target.
 	URL string
@@ -1571,13 +1575,15 @@ type targetFormInput struct {
 	Headers string
 	// Timeout is an HTTP target's per-request timeout in seconds.
 	Timeout string
+	// MaxRetries is an HTTP or Slack target's max_retries.
+	MaxRetries string
 	// Expiry is a database (archive) target's row expiry.
 	Expiry string
 }
 
-// targetFormInputFrom reads the configuration fields from a request
-// body. The body size cap is enforced by the MaxBodySize middleware,
-// which runs before CSRF parses the form.
+// targetFormInputFrom reads a target form from a request body. The
+// body size cap is enforced by the MaxBodySize middleware, which runs
+// before CSRF parses the form.
 //
 // Every field is read with PostFormValue, not FormValue. FormValue
 // falls back to the query string, which would let
@@ -1589,38 +1595,38 @@ type targetFormInput struct {
 // tokens.
 func targetFormInputFrom(r *http.Request) targetFormInput {
 	return targetFormInput{
-		URL:     r.PostFormValue("url"),
-		Headers: r.PostFormValue("headers"),
-		Timeout: r.PostFormValue("timeout"),
-		Expiry:  r.PostFormValue("expiry"),
+		Name:       r.PostFormValue("name"),
+		Type:       database.TargetType(r.PostFormValue("type")),
+		URL:        r.PostFormValue("url"),
+		Headers:    r.PostFormValue("headers"),
+		Timeout:    r.PostFormValue("timeout"),
+		MaxRetries: r.PostFormValue("max_retries"),
+		Expiry:     r.PostFormValue("expiry"),
 	}
 }
 
 // buildTargetConfig builds the JSON config string for a target from
-// the submitted form values, writing its own 4xx response on
-// rejection. Which fields of in apply depends on the target type.
+// the submitted form values, or returns the message the form shows
+// for a value it refuses. An error is the server's fault, not a
+// refusal: the accepted configuration could not be encoded. Which
+// fields of in apply depends on the target type; a type without a URL
+// ignores any URL submitted.
 func (h *Handlers) buildTargetConfig(
-	w http.ResponseWriter,
-	r *http.Request,
+	ctx context.Context,
 	targetType database.TargetType,
 	in targetFormInput,
-) (string, error) {
+) (string, string, error) {
 	switch targetType {
 	case database.TargetTypeHTTP:
-		return h.buildHTTPTargetConfig(w, r, in)
+		return h.buildHTTPTargetConfig(ctx, in)
 	case database.TargetTypeSlack:
-		return h.buildSlackTargetConfig(w, r, in.URL)
+		return h.buildSlackTargetConfig(ctx, in.URL)
 	case database.TargetTypeDatabase:
-		return h.buildDatabaseTargetConfig(w, r, in.Expiry)
+		return buildDatabaseTargetConfig(in.Expiry)
 	case database.TargetTypeLog:
-		return "", nil
+		return "", "", nil
 	default:
-		http.Error(
-			w, "Invalid target type",
-			http.StatusBadRequest,
-		)
-
-		return "", errMissingURL
+		return "", "Invalid target type", nil
 	}
 }
 
@@ -1628,92 +1634,73 @@ func (h *Handlers) buildTargetConfig(
 // SSRF-validated destination plus the optional headers and timeout
 // the delivery path honours.
 func (h *Handlers) buildHTTPTargetConfig(
-	w http.ResponseWriter,
-	r *http.Request,
+	ctx context.Context,
 	in targetFormInput,
-) (string, error) {
-	err := h.validateTargetURL(
-		w, r, in.URL, "URL is required for HTTP targets",
+) (string, string, error) {
+	errMsg := h.validateTargetURL(
+		ctx, in.URL, "URL is required for HTTP targets",
 	)
-	if err != nil {
-		return "", err
+	if errMsg != "" {
+		return "", errMsg, nil
 	}
 
 	headers, err := delivery.ParseTargetHeaders(in.Headers)
 	if err != nil {
-		http.Error(
-			w,
-			"Invalid headers: "+err.Error(),
-			http.StatusBadRequest,
-		)
-
-		return "", err
+		return "", fmt.Sprintf("Invalid headers: %v", err), nil
 	}
 
 	timeout, err := delivery.ParseTargetTimeout(in.Timeout)
 	if err != nil {
-		http.Error(
-			w,
-			"Invalid timeout: "+err.Error(),
-			http.StatusBadRequest,
-		)
-
-		return "", err
+		return "", fmt.Sprintf("Invalid timeout: %v", err), nil
 	}
 
-	return h.marshalTargetConfig(w, r, delivery.HTTPTargetConfig{
+	configJSON, err := marshalTargetConfig(delivery.HTTPTargetConfig{
 		URL:     in.URL,
 		Headers: headers,
 		Timeout: timeout,
 	})
+
+	return configJSON, "", err
 }
 
 // buildSlackTargetConfig builds config JSON for a Slack target,
 // whose whole configuration is one SSRF-validated webhook URL.
 func (h *Handlers) buildSlackTargetConfig(
-	w http.ResponseWriter,
-	r *http.Request,
+	ctx context.Context,
 	targetURL string,
-) (string, error) {
-	err := h.validateTargetURL(
-		w, r, targetURL,
+) (string, string, error) {
+	errMsg := h.validateTargetURL(
+		ctx, targetURL,
 		"Webhook URL is required for Slack targets",
 	)
-	if err != nil {
-		return "", err
+	if errMsg != "" {
+		return "", errMsg, nil
 	}
 
-	return h.marshalTargetConfig(w, r, delivery.SlackTargetConfig{
+	configJSON, err := marshalTargetConfig(delivery.SlackTargetConfig{
 		WebhookURL: targetURL,
 	})
+
+	return configJSON, "", err
 }
 
-// validateTargetURL rejects an empty or SSRF-blocked destination,
-// writing the 400 itself. missingMsg is the error shown when no URL
-// is given.
+// validateTargetURL refuses an empty or SSRF-blocked destination,
+// returning the message the form shows, or "" when the destination
+// is accepted. missingMsg is the message for no URL at all.
 //
 // It is the single point at which a user-supplied destination enters
 // the SSRF guard, on create and on edit alike. An edit path that
 // reached storage without passing through here would reopen the hole
 // the guard closes.
 func (h *Handlers) validateTargetURL(
-	w http.ResponseWriter,
-	r *http.Request,
+	ctx context.Context,
 	targetURL, missingMsg string,
-) error {
+) string {
 	if targetURL == "" {
-		http.Error(
-			w,
-			missingMsg,
-			http.StatusBadRequest,
-		)
-
-		return errMissingURL
+		return missingMsg
 	}
 
-	err := h.ssrf.ValidateTargetURL(
-		r.Context(), targetURL,
-	)
+	err := h.ssrf.ValidateTargetURL(ctx, targetURL)
 	if err != nil {
 		// The submitted URL can be a credential (a Slack
 		// incoming webhook URL is a bearer token), so the log
@@ -1739,25 +1726,16 @@ func (h *Handlers) validateTargetURL(
 				"egress to your own network\" in the README)."
 		}
 
-		http.Error(w, msg, http.StatusBadRequest)
-
-		return err
+		return msg
 	}
 
-	return nil
+	return ""
 }
 
-// marshalTargetConfig serialises a target configuration for storage,
-// writing a 500 itself if it cannot.
-func (h *Handlers) marshalTargetConfig(
-	w http.ResponseWriter,
-	r *http.Request,
-	cfg any,
-) (string, error) {
+// marshalTargetConfig serialises a target configuration for storage.
+func marshalTargetConfig(cfg any) (string, error) {
 	configBytes, err := json.Marshal(cfg)
 	if err != nil {
-		h.serverError(w, r, "failed to encode target config", err)
-
 		return "", err
 	}
 
@@ -1765,35 +1743,24 @@ func (h *Handlers) marshalTargetConfig(
 }
 
 // buildDatabaseTargetConfig builds config JSON for a database
-// (archive) target. The optional expiry (a form value read by
-// the caller, which bounds the request body) is validated here,
-// at creation time, so an unparseable value is rejected with a
-// 400 instead of failing every subsequent delivery. An empty
-// expiry yields an empty config (the keep-forever default).
-func (h *Handlers) buildDatabaseTargetConfig(
-	w http.ResponseWriter,
-	r *http.Request,
-	expiry string,
-) (string, error) {
+// (archive) target. The optional expiry is validated here, at
+// creation time, so an unparseable value is refused instead of
+// failing every subsequent delivery. An empty expiry yields an
+// empty config (the keep-forever default).
+func buildDatabaseTargetConfig(expiry string) (string, string, error) {
 	expiry = strings.TrimSpace(expiry)
 	if expiry == "" {
-		return "", nil
+		return "", "", nil
 	}
 
 	err := delivery.ValidateArchiveExpiry(expiry)
 	if err != nil {
-		http.Error(
-			w,
-			"Invalid archive expiry: "+err.Error(),
-			http.StatusBadRequest,
-		)
-
-		return "", err
+		return "", fmt.Sprintf("Invalid archive expiry: %v", err), nil
 	}
 
-	return h.marshalTargetConfig(
-		w, r, map[string]any{"expiry": expiry},
-	)
+	configJSON, err := marshalTargetConfig(map[string]any{"expiry": expiry})
+
+	return configJSON, "", err
 }
 
 // HandleEntrypointDelete handles deleting an entrypoint.

internal/handlers/target_create_test.go

@@ -0,0 +1,154 @@
+package handlers_test
+
+import (
+	"html"
+	"net/http"
+	"net/url"
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	"sneak.berlin/go/webhooker/internal/database"
+)
+
+// TestHandleTargetCreate_EveryType adds a target of each type. Each
+// submission carries a url: only the http and slack types store one.
+func TestHandleTargetCreate_EveryType(t *testing.T) {
+	t.Parallel()
+
+	env := setupSourceTest(t)
+
+	// fields is the rest of each submission, as a query string.
+	cases := []struct {
+		targetType  database.TargetType
+		fields      string
+		wantConfig  string
+		wantRetries int
+	}{
+		{
+			database.TargetTypeHTTP, "timeout=12&max_retries=3",
+			`{"url":"` + editOriginalURL + `","timeout":12}`, 3,
+		},
+		{
+			database.TargetTypeSlack, "max_retries=4",
+			`{"webhookUrl":"` + editOriginalURL + `"}`, 4,
+		},
+		{
+			database.TargetTypeDatabase, "expiry=720h",
+			`{"expiry":"720h"}`, 0,
+		},
+		{database.TargetTypeLog, "", "", 0},
+	}
+
+	for _, tc := range cases {
+		t.Run(string(tc.targetType), func(t *testing.T) {
+			t.Parallel()
+
+			webhook := seedWebhookWithRetention(t, env.db, 30)
+
+			form, err := url.ParseQuery(tc.fields)
+			require.NoError(t, err)
+			form.Set("name", "every-type")
+			form.Set("type", string(tc.targetType))
+			form.Set("url", editOriginalURL)
+
+			w := serveTarget(
+				env, http.MethodPost,
+				"/hook/"+webhook.ID+"/targets", form,
+			)
+			require.Equal(t, http.StatusSeeOther, w.Code, w.Body.String())
+
+			targets := targetsForWebhook(t, env.db, webhook.ID)
+			require.Len(t, targets, 1)
+			assert.Equal(t, tc.targetType, targets[0].Type)
+			assert.Equal(t, tc.wantRetries, targets[0].MaxRetries)
+
+			if tc.wantConfig == "" {
+				assert.Empty(t, targets[0].Config)
+			} else {
+				assert.JSONEq(t, tc.wantConfig, targets[0].Config)
+			}
+		})
+	}
+}
+
+// TestHandleTargetCreate_RefusedFormComesBack refuses a target of each
+// type and checks that the webhook page comes back with the add target
+// form open on that type, the values entered, and the reason.
+func TestHandleTargetCreate_RefusedFormComesBack(t *testing.T) {
+	t.Parallel()
+
+	env := setupSourceTest(t)
+
+	// fields is what the operator typed, as a query string.
+	cases := []struct {
+		targetType database.TargetType
+		fields     string
+		reason     string
+	}{
+		{
+			database.TargetTypeHTTP,
+			"name=private&url=" + editBlockedURL +
+				"&timeout=12&max_retries=3",
+			"Invalid target URL",
+		},
+		{
+			database.TargetTypeSlack, "name=no-url&max_retries=4",
+			"Webhook URL is required for Slack targets",
+		},
+		{
+			database.TargetTypeDatabase, "name=archive&expiry=7d",
+			"Invalid archive expiry",
+		},
+		{database.TargetTypeLog, "name=", "Name is required"},
+	}
+
+	for _, tc := range cases {
+		t.Run(string(tc.targetType), func(t *testing.T) {
+			t.Parallel()
+
+			webhook := seedWebhookWithRetention(t, env.db, 30)
+
+			typed, err := url.ParseQuery(tc.fields)
+			require.NoError(t, err)
+
+			form := url.Values{}
+			form.Set("type", string(tc.targetType))
+
+			for field := range typed {
+				form.Set(field, typed.Get(field))
+			}
+
+			w := serveTarget(
+				env, http.MethodPost,
+				"/hook/"+webhook.ID+"/targets", form,
+			)
+			assert.Equal(t, http.StatusBadRequest, w.Code)
+
+			page := w.Body.String()
+			assert.Contains(
+				t, page, `data-type="`+string(tc.targetType)+`"`,
+			)
+			assert.Contains(t, page, html.EscapeString(tc.reason))
+
+			// Each value comes back in a data attribute of the targets
+			// section named after its field (max_retries as
+			// data-max-retries), except url, which comes back in
+			// data-destination; templates/source_detail.html says why.
+			for field := range typed {
+				attr := "data-" + strings.ReplaceAll(field, "_", "-")
+				if field == "url" {
+					attr = "data-destination"
+				}
+
+				assert.Contains(
+					t, page, attr+`="`+
+						html.EscapeString(typed.Get(field))+`"`,
+				)
+			}
+
+			assert.Empty(t, targetsForWebhook(t, env.db, webhook.ID))
+		})
+	}
+}

internal/handlers/target_edit.go

@@ -120,18 +120,23 @@ func (h *Handlers) applyTargetEdit(
 ) {
 	name := r.PostFormValue("name")
 	if name == "" {
-		http.Error(
-			w, "Name is required", http.StatusBadRequest,
-		)
+		http.Error(w, "Name is required", http.StatusBadRequest)
 
 		return
 	}
 
-	configJSON, err := h.buildTargetConfig(
-		w, r, target.Type, targetFormInputFrom(r),
+	configJSON, errMsg, err := h.buildTargetConfig(
+		r.Context(), target.Type, targetFormInputFrom(r),
 	)
 	if err != nil {
-		// buildTargetConfig has already written the response.
+		h.serverError(w, r, "failed to encode target config", err)
+
+		return
+	}
+
+	if errMsg != "" {
+		http.Error(w, errMsg, http.StatusBadRequest)
+
 		return
 	}
 

internal/handlers/target_list.go

@@ -0,0 +1,90 @@
+package handlers
+
+import (
+	"errors"
+	"io/fs"
+	"path/filepath"
+	"time"
+
+	"github.com/dustin/go-humanize"
+	"sneak.berlin/go/webhooker/internal/database"
+	"sneak.berlin/go/webhooker/internal/delivery"
+)
+
+// TargetRowView is one row of the target list on a webhook's page.
+type TargetRowView struct {
+	delivery.TargetView
+
+	// Archive is a database target's archive file, and nil for a target
+	// of any other type.
+	Archive *ArchiveFileView
+}
+
+// ArchiveFileView is what a database target's row shows about its
+// archive file.
+type ArchiveFileView struct {
+	Name string
+
+	// Note stands in for the size and the last write when there are
+	// none to show, and is empty when there are.
+	Note string
+
+	// Size is the size on disk. Written is how long ago the file was
+	// last written, and WrittenUTC the full time the page shows on
+	// hover.
+	Size       string
+	Written    string
+	WrittenUTC string
+}
+
+// targetRows projects a webhook's targets for the target list on its
+// page.
+func (h *Handlers) targetRows(
+	webhook *database.Webhook, targets []database.Target,
+) []TargetRowView {
+	views := delivery.NewTargetViews(targets)
+	rows := make([]TargetRowView, len(views))
+
+	// NewTargetViews returns one view per target, in order.
+	for i := range views {
+		rows[i].TargetView = views[i]
+
+		if targets[i].Type == database.TargetTypeDatabase {
+			rows[i].Archive = h.archiveFileView(webhook, &targets[i])
+		}
+	}
+
+	return rows
+}
+
+// archiveFileView describes a database target's archive file from the
+// file's metadata alone; the archive is never opened. The file is found
+// by the name the archive writer uses, so it follows a rename of the
+// webhook or the target.
+func (h *Handlers) archiveFileView(
+	webhook *database.Webhook, target *database.Target,
+) *ArchiveFileView {
+	path := delivery.ArchivePath(h.dbMgr, webhook, target)
+	view := &ArchiveFileView{Name: filepath.Base(path)}
+
+	file, err := delivery.StatArchive(path)
+
+	switch {
+	case errors.Is(err, fs.ErrNotExist):
+		view.Note = "not created yet"
+	case err != nil:
+		h.log.Error(
+			"failed to read archive file metadata",
+			"target_id", target.ID,
+			"error", err,
+		)
+
+		view.Note = "could not be read"
+	default:
+		view.Size = humanize.Bytes(uint64(file.Size)) //nolint:gosec // never negative
+		view.Written = humanize.Time(file.Written)
+		view.WrittenUTC = file.Written.UTC().Format(time.DateTime) + " UTC"
+	}
+
+	return view
+}

internal/handlers/target_list_test.go

@@ -0,0 +1,71 @@
+package handlers_test
+
+import (
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	"sneak.berlin/go/webhooker/internal/database"
+	"sneak.berlin/go/webhooker/internal/delivery"
+	"sneak.berlin/go/webhooker/internal/handlers"
+	"sneak.berlin/go/webhooker/internal/session"
+)
+
+// TestHandleSourceDetail_ShowsArchiveFile proves a database target's
+// row names its archive file and says "not created yet" before the
+// first write, adds the file's size and last write once it has one row,
+// and says "not created yet" again once the file has been moved away.
+// A target of another type shows no archive file.
+func TestHandleSourceDetail_ShowsArchiveFile(t *testing.T) {
+	t.Parallel()
+
+	var (
+		h     *handlers.Handlers
+		sess  *session.Session
+		db    *database.Database
+		dbMgr *database.WebhookDBManager
+	)
+
+	app := newTestApp(t, &h, &sess, &db, &dbMgr)
+	app.RequireStart()
+
+	t.Cleanup(app.RequireStop)
+
+	wh := seedWebhook(t, db)
+	archive := seedTarget(t, db, wh.ID, database.TargetTypeDatabase)
+	seedTarget(t, db, wh.ID, database.TargetTypeLog)
+
+	path := delivery.ArchivePath(dbMgr, wh, archive)
+
+	body := renderSourceDetailPage(t, h, sess, wh.ID)
+	assert.Equal(t, 1, strings.Count(body, "Archive File:"))
+	assert.Contains(t, body, filepath.Base(path))
+	assert.Contains(t, body, "not created yet")
+	assert.NotContains(t, body, "Archive Size:")
+
+	seedArchive(t, path, 1, 100)
+
+	file, err := os.Stat(path)
+	require.NoError(t, err)
+
+	body = renderSourceDetailPage(t, h, sess, wh.ID)
+	assert.Contains(t, body, filepath.Base(path))
+	assert.NotContains(t, body, "not created yet")
+	assert.Regexp(t,
+		`Archive Size:</span>\s*<span>[1-9][0-9.]* [kM]?B</span>`, body,
+	)
+	assert.Contains(t, body,
+		`title="`+file.ModTime().UTC().Format(time.DateTime)+` UTC"`,
+	)
+
+	require.NoError(t, os.Rename(path, filepath.Join(t.TempDir(), "moved.db")))
+
+	body = renderSourceDetailPage(t, h, sess, wh.ID)
+	assert.Contains(t, body, filepath.Base(path))
+	assert.Contains(t, body, "not created yet")
+	assert.NotContains(t, body, "Archive Size:")
+}

internal/handlers/target_private_refusal_test.go

@@ -1,6 +1,7 @@
 package handlers_test
 
 import (
+	"html"
 	"net/http"
 	"net/url"
 	"testing"
@@ -43,12 +44,16 @@ func TestTargetRefusal_PrivateDestinationSaysHowToAllowIt(
 			form.Set("type", string(targetType))
 			form.Set("url", editBlockedURL)
 
+			// A refused add shows the webhook page again, where
+			// the hint is HTML-escaped; a refused edit answers in
+			// plain text.
 			added := serveTarget(
 				env, http.MethodPost, targetsPath, form,
 			)
 			assert.Equal(t, http.StatusBadRequest, added.Code)
 			assert.Contains(
-				t, added.Body.String(), privateRefusalHint,
+				t, added.Body.String(),
+				html.EscapeString(privateRefusalHint),
 			)
 
 			form.Set("url", editOriginalURL)

internal/handlers/target_retries.go

@@ -90,13 +90,14 @@ func retriesErrorMessage(err error) string {
 		", or 0 for fire-and-forget"
 }
 
-// targetMaxRetries reads and validates max_retries from a target form
+// targetMaxRetries reads and validates max_retries from a target edit
 // submission, answering the request with a 400 and reporting false
 // when the value is set but invalid.
 //
-// Both the create and the edit path go through here, so the two
-// cannot come to disagree about what a valid retry count is. The
-// wording matches the timeout control on the same submission.
+// It and the create path (newTarget) both use parseMaxRetries and
+// retriesErrorMessage, so the two cannot come to disagree about what a
+// valid retry count is. The wording matches the timeout control on
+// the same submission.
 func targetMaxRetries(
 	w http.ResponseWriter,
 	r *http.Request,

internal/server/alpine_browser_test.go

@@ -39,9 +39,6 @@ const (
 	// the mobile menu button instead of the navigation links.
 	phoneWidth  = 390
 	phoneHeight = 844
-
-	// olderBody is the body of the event received before the newest.
-	olderBody = "the older event"
 )
 
 // TestAlpineRunsUnderTheSecurityPolicy loads the webhook page and the
@@ -66,7 +63,6 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 			Active:    true,
 		},
 	).Error)
-	env.seedEvent(t, webhook.ID, olderBody)
 	event := env.seedEvent(t, webhook.ID, `{"hello":"browser"}`)
 	target := env.seedTarget(t, webhook.ID)
 	dlv := env.seedFailedDelivery(t, webhook.ID, event.ID, target.ID)
@@ -87,10 +83,38 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 
 	page := srv.URL + "/hook/" + webhook.ID
 
-	checkAddForms(ctx, t, page)
-	checkTargetType(ctx, t, page+"/events")
+	checkAddEntrypoint(ctx, t, page)
+
+	// Each target type, with the fields its add target form submits, in
+	// page order. Only http and slack have a url field.
+	targetTypes := []struct {
+		name   string
+		fields string
+		values map[string]string
+	}{
+		{
+			"http", "csrf_token name type url headers timeout max_retries",
+			map[string]string{"url": publicTargetURL},
+		},
+		{
+			"slack", "csrf_token name type url max_retries",
+			map[string]string{"url": publicTargetURL},
+		},
+		{
+			"database", "csrf_token name type expiry",
+			map[string]string{"expiry": "720h"},
+		},
+		{"log", "csrf_token name type", nil},
+	}
+
+	for _, tt := range targetTypes {
+		checkAddTarget(
+			ctx, t, page, tt.name, strings.Fields(tt.fields), tt.values,
+		)
+	}
+
+	checkRefusedTarget(ctx, t, page)
 	checkCopy(ctx, t, page)
-	checkRecentEvents(ctx, t, page)
 	checkEventLog(ctx, t, page+"/events", event.ID, target.Name)
 	checkMobileMenu(ctx, t, page)
 
@@ -232,115 +256,194 @@ 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) {
+// checkAddEntrypoint loads a webhook page and checks that the add
+// entrypoint 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 checkAddEntrypoint(ctx context.Context, t *testing.T, url string) {
+	t.Helper()
+
+	form := `form[action$="/entrypoints"]`
+
+	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
+
+	assert.True(t, hidden(ctx, form),
+		"the add entrypoint form shows before Add is clicked")
+
+	click(ctx, t, `//h2[text()="Entrypoints"]/following-sibling::button`)
+
+	assert.True(t, shown(ctx, form),
+		"the add entrypoint form stays hidden when Add is clicked")
+}
+
+// publicTargetURL is a destination the server accepts for an http or
+// slack target. It is a literal public address, so accepting it needs
+// no DNS.
+const publicTargetURL = "https://93.184.216.34/hook"
+
+// The parts of the targets section's add target form the checks below
+// find and click. Add is the button beside the Targets heading; each
+// Cancel is found from the button beside it, since both are on the
+// page at once.
+const (
+	addTarget     = `//h2[text()="Targets"]/following-sibling::button`
+	typeSelect    = `//select[@aria-label="Target type"]`
+	nextButton    = `//button[text()="Next"]`
+	cancelChoice  = nextButton + `/following-sibling::button[text()="Cancel"]`
+	saveButton    = `//form[contains(@action, "/targets")]//button[text()="Save"]`
+	cancelFields  = saveButton + `/following-sibling::button[text()="Cancel"]`
+	targetName    = `form[action$="/targets"] input[name="name"]`
+	submittedKeys = `[...new FormData(
+		document.querySelector('form[action$="/targets"]')).keys()]`
+)
+
+// checkAddTarget loads a webhook page and walks the add target form for
+// one target type. The form shows nothing until Add is clicked; Add
+// shows only the type choice; Cancel there closes it; Next shows the
+// type's own fields in place of the choice, and the form then submits
+// exactly fields, so a field another type uses, such as url, is absent;
+// Cancel closes it again. It then adds a target of the type, filling in
+// values, and checks that the section lists it with that type.
+func checkAddTarget(
+	ctx context.Context,
+	t *testing.T,
+	url, targetType string,
+	fields []string,
+	values map[string]string,
+) {
 	t.Helper()
 
 	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
 
-	sections := []struct{ heading, form string }{
-		{"Entrypoints", `form[action$="/entrypoints"]`},
-		{"Targets", `form[action$="/targets"]`},
+	assert.Truef(t, hidden(ctx, typeSelect),
+		"%s: the type choice shows before Add is clicked", targetType)
+	assert.Truef(t, hidden(ctx, targetName),
+		"%s: the fields show before Add is clicked", targetType)
+
+	click(ctx, t, addTarget)
+	assert.Truef(t, shown(ctx, typeSelect),
+		"%s: Add does not show the type choice", targetType)
+	assert.Truef(t, hidden(ctx, targetName),
+		"%s: Add shows the fields before Next", targetType)
+
+	click(ctx, t, cancelChoice)
+	assert.Truef(t, hidden(ctx, typeSelect),
+		"%s: Cancel does not close the type choice", targetType)
+
+	chooseTargetType(ctx, t, targetType)
+
+	var submitted []string
+
+	require.NoError(t, chromedp.Run(
+		ctx, chromedp.Evaluate(submittedKeys, &submitted),
+	))
+	assert.Equalf(t, fields, submitted,
+		"%s: the form does not submit exactly the type's fields", targetType)
+
+	click(ctx, t, cancelFields)
+	assert.Truef(t, hidden(ctx, targetName),
+		"%s: Cancel does not close the fields", targetType)
+	assert.Truef(t, shown(ctx, addTarget),
+		"%s: Add does not come back after Cancel", targetType)
+
+	name := "added-" + targetType
+
+	chooseTargetType(ctx, t, targetType)
+	require.NoError(t, chromedp.Run(
+		ctx, chromedp.SetValue(targetName, name, chromedp.ByQuery),
+	))
+
+	for field, value := range values {
+		require.NoError(t, chromedp.Run(ctx, chromedp.SetValue(
+			`form[action$="/targets"] [name="`+field+`"]`, value,
+			chromedp.ByQuery,
+		)))
 	}
 
-	for _, s := range sections {
-		assert.Truef(
-			t, hidden(ctx, s.form),
-			"%s: the add form shows before Add is clicked", s.heading,
-		)
-
-		click(ctx, t, `//h2[text()="`+s.heading+
-			`"]/following-sibling::button`)
-
-		assert.Truef(
-			t, shown(ctx, s.form),
-			"%s: the add form stays hidden when Add is clicked", s.heading,
-		)
-	}
+	click(ctx, t, saveButton)
+	assert.Truef(t, shown(ctx, `//span[text()="`+name+
+		`"]/following-sibling::div/span[text()="`+targetType+`"]`),
+		"%s: the added target is not listed with its type", targetType)
 }
 
-// checkTargetType chooses Slack in the open add target form and checks
-// what the form would then submit: one url field, the Slack one, and
-// not the HTTP url, headers or timeout, which are hidden and disabled.
-//
-// It then opens the page at elsewhere and goes back. The browser loads
-// the webhook page again and restores the form as it was left, Slack
-// chosen, without a change event; the form must again show and submit
-// Slack's fields, not the HTTP ones.
-func checkTargetType(ctx context.Context, t *testing.T, elsewhere string) {
+// chooseTargetType clicks Add, picks targetType and clicks Next, and
+// checks that the type's fields then show in place of the type choice.
+func chooseTargetType(ctx context.Context, t *testing.T, targetType string) {
+	t.Helper()
+
+	click(ctx, t, addTarget)
+	require.NoError(t, chromedp.Run(
+		ctx, chromedp.SetValue(typeSelect, targetType, chromedp.BySearch),
+	))
+	click(ctx, t, nextButton)
+
+	assert.Truef(t, shown(ctx, targetName),
+		"%s: Next does not show the fields", targetType)
+	assert.Truef(t, hidden(ctx, typeSelect),
+		"%s: Next leaves the type choice showing", targetType)
+	assert.Truef(t, hidden(ctx, addTarget),
+		"%s: Add still shows while the form is open", targetType)
+}
+
+// checkRefusedTarget submits an http target the server refuses, a
+// loopback destination, and checks that the page comes back with the
+// form open on the http fields, the values entered and the reason, and
+// that after Cancel the next Add starts with an empty form and no
+// reason.
+func checkRefusedTarget(ctx context.Context, t *testing.T, url string) {
 	t.Helper()
 
 	const (
-		chooseSlack = `(() => {
-			const type = document.querySelector('select[name="type"]');
-			type.value = "slack";
-			type.dispatchEvent(new Event("change"));
-		})()`
-		chosen    = `document.querySelector('select[name="type"]').value`
-		howLoaded = `performance.getEntriesByType("navigation")[0].type`
-		submitted = `[...new FormData(
-			document.querySelector('form[action$="/targets"]')).keys()]`
-		slackURL = `input[placeholder^="https://hooks.slack.com/"]`
-		httpURL  = `input[placeholder="https://example.com/webhook"]`
+		refusedURL = "http://127.0.0.1/hook"
+		urlField   = `form[action$="/targets"] input[name="url"]`
+		reason     = `//div[@class="alert-error"]`
 	)
 
-	slackFields := strings.Fields("csrf_token name type max_retries url")
+	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
 
-	var fields []string
+	chooseTargetType(ctx, t, "http")
+	require.NoError(t, chromedp.Run(
+		ctx,
+		chromedp.SetValue(targetName, "refused", chromedp.ByQuery),
+		chromedp.SetValue(urlField, refusedURL, chromedp.ByQuery),
+	))
+
+	click(ctx, t, saveButton)
+
+	assert.True(t, shown(ctx, reason),
+		"a refused target does not show the reason")
+
+	var name, typed string
 
 	require.NoError(t, chromedp.Run(
 		ctx,
-		chromedp.Evaluate(chooseSlack, nil),
-		chromedp.Evaluate(submitted, &fields),
+		chromedp.Value(targetName, &name, chromedp.ByQuery),
+		chromedp.Value(urlField, &typed, chromedp.ByQuery),
 	))
 
-	assert.Equal(
-		t, slackFields, fields,
-		"with Slack chosen, the HTTP fields must not be submitted",
-	)
+	assert.Equal(t, "refused", name,
+		"a refused target does not keep the name entered")
+	assert.Equal(t, refusedURL, typed,
+		"a refused target does not keep the url entered")
+	assert.True(t, shown(ctx, targetName),
+		"a refused target does not come back with the form open")
+	assert.True(t, hidden(ctx, typeSelect),
+		"a refused target comes back on the type choice")
 
-	var loaded, restored string
+	click(ctx, t, cancelFields)
+	chooseTargetType(ctx, t, "http")
+
+	assert.True(t, hidden(ctx, reason),
+		"after Cancel, the next Add still shows the reason")
 
-	// Going back waits for the load event, after which the browser has
-	// restored the form.
 	require.NoError(t, chromedp.Run(
 		ctx,
-		loadPage(elsewhere),
-		chromedp.NavigateBack(),
-		chromedp.WaitNotPresent("[x-cloak]", chromedp.ByQuery),
-		chromedp.Evaluate(howLoaded, &loaded),
-		chromedp.Evaluate(chosen, &restored),
+		chromedp.Value(targetName, &name, chromedp.ByQuery),
+		chromedp.Value(urlField, &typed, chromedp.ByQuery),
 	))
 
-	// A page the browser kept in memory and showed again as it was
-	// would prove nothing here.
-	require.Equal(
-		t, "back_forward", loaded,
-		"going back, the browser did not load the page again",
-	)
-	require.Equal(
-		t, "slack", restored,
-		"going back, the browser did not restore the chosen type",
-	)
-
-	click(ctx, t, `//h2[text()="Targets"]/following-sibling::button`)
-
-	assert.True(t, shown(ctx, slackURL),
-		"going back with Slack chosen, the Slack fields are not shown")
-	assert.True(t, hidden(ctx, httpURL),
-		"going back with Slack chosen, the HTTP fields are shown")
-
-	require.NoError(t, chromedp.Run(
-		ctx, chromedp.Evaluate(submitted, &fields),
-	))
-
-	assert.Equal(
-		t, slackFields, fields,
-		"going back with Slack chosen, the HTTP fields must not be submitted",
-	)
+	assert.Empty(t, name, "after Cancel, the next Add keeps the name entered")
+	assert.Empty(t, typed, "after Cancel, the next Add keeps the url entered")
 }
 
 // checkCopy loads a webhook page and checks that the Copy control beside
@@ -368,46 +471,6 @@ func checkCopy(ctx context.Context, t *testing.T, url string) {
 		`clicking Copy does not show "Copied"`)
 }
 
-// checkRecentEvents loads a webhook page and checks that of its recent
-// events only the newest starts expanded, showing its body, that
-// clicking the older one's row expands it and clicking again collapses
-// it, and that clicking the newest one's row collapses it. It then
-// follows the newest one's Open link to the event's own page, which
-// shows the body.
-func checkRecentEvents(ctx context.Context, t *testing.T, url string) {
-	t.Helper()
-
-	// The newest event's body is pretty-printed JSON. Each row's
-	// toggle is the button in the element that holds its state.
-	newest := `//pre[contains(., '"hello": "browser"')]`
-	older := `//pre[text()="` + olderBody + `"]`
-	toggle := `/ancestor::div[@x-data][1]//button`
-
-	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
-
-	assert.True(t, shown(ctx, newest), "the newest event starts collapsed")
-	assert.True(t, hidden(ctx, older), "an older event starts expanded")
-
-	click(ctx, t, older+toggle)
-	assert.True(t, shown(ctx, older), "clicking an event does not expand it")
-
-	click(ctx, t, older+toggle)
-	assert.True(t, hidden(ctx, older),
-		"clicking an event again does not collapse it")
-
-	click(ctx, t, newest+toggle)
-	assert.True(t, hidden(ctx, newest),
-		"clicking the newest event does not collapse it")
-
-	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
-	click(ctx, t, newest+`/ancestor::div[@x-data][1]//a[text()="Open"]`)
-
-	assert.True(t, shown(ctx, `//h2[text()="Body"]`),
-		"Open does not lead to the event's own page")
-	assert.True(t, shown(ctx, newest),
-		"the event's own page does not show its body")
-}
-
 // 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
@@ -420,7 +483,7 @@ func checkEventLog(
 	// The event's row shows its ID, and its Resubmit form is in the part
 	// that expands. The delivery's row there shows the target's name.
 	eventRow := `//span[text()="` + eventID + `"]`
-	expanded := `form[action$="/` + eventID + `/resubmit"]`
+	expanded := `form[action$="/resubmit"]`
 	deliveryRow := `//span[text()="` + targetName + `"]`
 	attempt := `//span[text()="Attempt 1"]`
 

internal/server/routes.go

@@ -252,12 +252,11 @@ func (s *Server) setupSourceRoutes() {
 		r.Post("/edit", s.h.HandleSourceEditSubmit())
 		r.Post("/delete", s.h.HandleSourceDelete())
 		r.Get("/events", s.h.HandleSourceLogs())
-		r.Get("/events/{eventID}", s.h.HandleEventDetail())
-		// The pages show a body as escaped text and leave a
-		// binary one out, so this is the only route that serves
-		// the stored bytes. It belongs to this group for its
-		// RequireAuth and NoCache; see HandleEventBodyDownload for
-		// the headers that keep the bytes it returns inert.
+		// The log page renders each body only up to its cap, so
+		// this is the only route that serves a whole one. It
+		// belongs to this group for its RequireAuth and
+		// NoCache; see HandleEventBodyDownload for the headers
+		// that keep the bytes it returns inert.
 		r.Get(
 			"/events/{eventID}/body",
 			s.h.HandleEventBodyDownload(),

internal/server/routes_test.go

@@ -364,7 +364,6 @@ func (e *testEnv) seedEvent(
 		WebhookID:   webhookID,
 		Method:      http.MethodPost,
 		Body:        body,
-		BodyBytes:   int64(len(body)),
 		ContentType: "application/octet-stream",
 	}
 
@@ -1265,48 +1264,6 @@ func TestHook_LinksBetweenPages(t *testing.T) {
 	}
 }
 
-// TestEventPage_OpenedFromRecentEvents follows the Open link of a
-// row in the recent events on the webhook page through the
-// production router to the event's own page, which shows the body
-// and links back. Another user gets a 404 at the same URL, and a
-// logged-out request is sent to log in.
-func TestEventPage_OpenedFromRecentEvents(t *testing.T) {
-	t.Parallel()
-
-	env := newTestEnv(t)
-
-	ownerID, _ := env.seedUser(t, "owner", "somepassword")
-	cookies := env.authCookies(t, ownerID, "owner")
-	wh := env.seedWebhook(t, ownerID)
-	evt := env.seedEvent(t, wh.ID, "OWNERS-PAYLOAD-3e9d")
-
-	page := "/hook/" + wh.ID
-	path := env.urlFrom(t, page, `href="([^"]+)"[^>]*>Open<`, cookies)
-
-	require.Equal(t, page+"/events/"+evt.ID, path)
-
-	w := env.get(path, cookies)
-	require.Equal(t, http.StatusOK, w.Code)
-	assert.Contains(t, w.Body.String(), "OWNERS-PAYLOAD-3e9d")
-	assert.Equal(
-		t, page,
-		env.urlFrom(t, path, `href="([^"]+)"[^>]*>&larr; Back to `, cookies),
-	)
-
-	intruderID, _ := env.seedUser(t, "intruder", "somepassword")
-
-	w = env.get(path, env.authCookies(t, intruderID, "intruder"))
-	assert.Equal(t, http.StatusNotFound, w.Code)
-	assert.NotContains(t, w.Body.String(), "OWNERS-PAYLOAD-3e9d")
-
-	anon := env.get(path, nil)
-	assert.Equal(t, http.StatusSeeOther, anon.Code)
-	assert.Equal(
-		t, "/pages/login?next="+url.QueryEscape(path),
-		anon.Header().Get("Location"),
-	)
-}
-
 // TestSourceLogs_TruncationLinkDownloadsTheBody walks the whole
 // feature the way a user does: render the event log page through
 // the production router, take the download URL out of the markup

static/js/app.js

@@ -70,15 +70,10 @@ document.addEventListener("alpine:init", function () {
     "use strict";
 
     // Something a click shows and hides: the mobile menu, an add form,
-    // an event in the event log or in the recent events, a delivery's
-    // attempts. It starts hidden, or shown when its element has the
-    // data-open attribute.
+    // an event in the event log, a delivery's attempts.
     window.Alpine.data("collapsible", function () {
         return {
             open: false,
-            init() {
-                this.open = this.$root.hasAttribute("data-open");
-            },
             toggle() {
                 this.open = !this.open;
             },
@@ -92,24 +87,65 @@ document.addEventListener("alpine:init", function () {
         };
     });
 
-    // The add target form. Only the chosen type's fields show, and the
-    // others are disabled so that the form does not submit them.
+    // The targets section's add target form, in three steps: closed,
+    // choosing a type, then filling in that type's fields. targetType
+    // is empty until Next takes it from the type select.
     //
-    // The type is read from the type select when Alpine starts, when the
-    // select changes, and on pageshow. Going back to the page, the
-    // browser restores the type chosen before without a change event,
-    // in some browsers only after Alpine has started, but always before
-    // pageshow.
+    // The reason and the fields' values come from the properties below
+    // rather than from the markup, because each type's fields are made
+    // afresh from the markup whenever that type is chosen. A refused
+    // submission comes back with its type, reason and values in the
+    // section's data attributes, and starts on that type's fields with
+    // them. Cancel empties these properties and resets the form, which
+    // holds whatever was typed, so the next Add starts with an empty
+    // form and no reason.
     window.Alpine.data("targetForm", function () {
         return {
+            choosing: false,
             targetType: "",
+            reason: "",
+            name: "",
+            url: "",
+            headers: "",
+            timeout: "",
+            maxRetries: "",
+            expiry: "",
             init() {
-                this.readType();
+                const refused = this.$root.dataset;
+
+                this.targetType = refused.type;
+                this.reason = refused.reason;
+                this.name = refused.name;
+                this.url = refused.destination;
+                this.headers = refused.headers;
+                this.timeout = refused.timeout;
+                this.maxRetries = refused.maxRetries;
+                this.expiry = refused.expiry;
             },
-            readType() {
-                this.targetType = this.$root.querySelector(
-                    'select[name="type"]'
-                ).value;
+            add() {
+                this.choosing = true;
+            },
+            next() {
+                this.targetType = this.$refs.type.value;
+                this.choosing = false;
+            },
+            cancel() {
+                this.choosing = false;
+                this.targetType = "";
+                this.reason = "";
+                this.name = "";
+                this.url = "";
+                this.headers = "";
+                this.timeout = "";
+                this.maxRetries = "";
+                this.expiry = "";
+                this.$refs.form.reset();
+            },
+            get filling() {
+                return this.targetType !== "";
+            },
+            get closed() {
+                return !this.choosing && !this.filling;
             },
             get isHttp() {
                 return this.targetType === "http";
@@ -120,14 +156,8 @@ document.addEventListener("alpine:init", function () {
             get isDatabase() {
                 return this.targetType === "database";
             },
-            get notHttp() {
-                return !this.isHttp;
-            },
-            get notSlack() {
-                return !this.isSlack;
-            },
-            get notDatabase() {
-                return !this.isDatabase;
+            get isLog() {
+                return this.targetType === "log";
             },
         };
     });

static/static.go

@@ -5,7 +5,10 @@ import (
 	"embed"
 )
 
-// Static holds the embedded CSS and JavaScript files for the web UI.
+// Static holds the CSS and JavaScript files the web UI's pages load. They
+// are named one by one so that a missing js/alpine.min.js, which make
+// assets extracts and git does not track, fails the build instead of
+// leaving the pages without Alpine.js.
 //
-//go:embed css js
+//go:embed css/tailwind.css css/style.css js/app.js js/alpine.min.js
 var Static embed.FS

templates/delivery_attempts.html

@@ -1,32 +0,0 @@
-{{define "delivery_attempts"}}
-<!-- A delivery's recorded attempts, as handlers.DeliveryView holds
-     them: in the event log and on an event's own page. -->
-{{if .AttemptsOmitted}}
-<p class="text-xs text-gray-500">{{.AttemptsOmitted}} attempt{{if ne .AttemptsOmitted 1}}s{{end}} omitted between the first and last shown.</p>
-{{end}}
-{{range .Results}}
-<div class="rounded-md bg-white border border-gray-200 p-2">
-    <div class="flex flex-wrap items-center gap-3 text-xs">
-        <span class="text-gray-500">Attempt {{.AttemptNum}}</span>
-        <span class="{{if .Success}}text-green-600{{else}}text-red-600{{end}}">{{if .Success}}success{{else}}failure{{end}}</span>
-        <span class="text-gray-500">Status: {{if .HasStatusCode}}{{.StatusCode}}{{else}}&mdash; (no response){{end}}</span>
-        <span class="text-gray-500">Duration: {{.DurationMS}} ms</span>
-    </div>
-    {{if .Error}}
-    <p class="mt-2 text-xs text-red-700 break-all">Error: {{.Error}}</p>
-    {{end}}
-    {{if .ResponseBody}}
-    <pre class="mt-2 text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap break-all">{{.ResponseBody}}</pre>
-    {{end}}
-    {{if .ResponseTruncated}}
-    {{if .ResponseSizeKnown}}
-    <p class="mt-1 text-xs text-gray-500">Response truncated for display: showing {{.ResponseShownBytes}} of {{.ResponseBytes}} bytes.</p>
-    {{else}}
-    <p class="mt-1 text-xs text-gray-500">Showing {{.ResponseShownBytes}} of the {{.ResponseBytes}} recorded bytes. The response reached the recording limit, so the remote may have sent more that was never stored.</p>
-    {{end}}
-    {{end}}
-</div>
-{{else}}
-<p class="text-xs text-gray-500">No attempts recorded yet.</p>
-{{end}}
-{{end}}

templates/event_body.html

@@ -1,15 +0,0 @@
-{{define "event_body"}}
-<!-- An event's body, as handlers.BodyView describes it: the same in
-     the recent events on the webhook page, the event log and the
-     event's own page. -->
-{{if .Binary}}
-<p class="text-xs text-gray-500">This body is binary ({{.Size}} bytes) and is not shown. <a href="{{.EventURL}}/body" class="btn-small">Download the body</a></p>
-{{else if .Text}}
-<pre class="rounded-md border border-gray-200 bg-white p-2 text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap break-all"{{if .Scroll}} style="max-height: 32rem; overflow-y: auto"{{end}}>{{.Text}}</pre>
-{{if .Cut}}
-<p class="mt-2 text-xs text-gray-500">Showing the first {{.ShownBytes}} of {{.Size}} bytes, unformatted. <a href="{{.EventURL}}" class="btn-small">Show the whole body</a> <a href="{{.EventURL}}/body" class="btn-small">Download the body</a></p>
-{{end}}
-{{else}}
-<p class="text-xs text-gray-500">No body.</p>
-{{end}}
-{{end}}

templates/event_detail.html

@@ -1,87 +0,0 @@
-{{template "base" .}}
-
-{{define "title"}}Event - {{.Webhook.Name}} - Webhooker{{end}}
-
-{{define "content"}}
-<div class="max-w-6xl mx-auto px-6 py-8">
-    <div class="mb-6">
-        <div class="flex flex-wrap gap-2">
-            <a href="/hook/{{.Webhook.ID}}" class="btn-small">&larr; Back to {{.Webhook.Name}}</a>
-            <a href="/hook/{{.Webhook.ID}}/events" class="btn-small">Full Event Log</a>
-        </div>
-        <h1 class="text-2xl font-medium text-gray-900 mt-2">Event</h1>
-    </div>
-
-    {{with .Event}}
-    <div class="card p-4">
-        <dl class="space-y-2 text-sm">
-            <div class="flex flex-wrap gap-2">
-                <dt class="w-32 flex-shrink-0 text-gray-500">ID</dt>
-                <dd class="font-mono text-gray-900 break-all">{{.ID}}</dd>
-            </div>
-            <div class="flex flex-wrap gap-2">
-                <dt class="w-32 flex-shrink-0 text-gray-500">Received</dt>
-                <dd class="text-gray-900">{{.CreatedAt.UTC.Format "2006-01-02 15:04:05"}} UTC</dd>
-            </div>
-            <div class="flex flex-wrap gap-2">
-                <dt class="w-32 flex-shrink-0 text-gray-500">Method</dt>
-                <dd><span class="badge-info">{{.Method}}</span></dd>
-            </div>
-            <div class="flex flex-wrap gap-2">
-                <dt class="w-32 flex-shrink-0 text-gray-500">Content type</dt>
-                <dd class="text-gray-900 break-all">{{.ContentType}}</dd>
-            </div>
-            <div class="flex flex-wrap gap-2">
-                <dt class="w-32 flex-shrink-0 text-gray-500">Body size</dt>
-                <dd class="text-gray-900">{{.Body.Size}} bytes</dd>
-            </div>
-            {{if .ResubmittedFrom}}
-            <div class="flex flex-wrap gap-2">
-                <dt class="w-32 flex-shrink-0 text-gray-500">Resubmitted from</dt>
-                <dd><a href="/hook/{{$.Webhook.ID}}/events/{{.ResubmittedFromID}}" class="btn-small font-mono">{{.ResubmittedFromID}}</a></dd>
-            </div>
-            {{end}}
-            {{if .ResubmitCount}}
-            <div class="flex flex-wrap gap-2">
-                <dt class="w-32 flex-shrink-0 text-gray-500">Resubmitted</dt>
-                <dd class="text-gray-900">as {{.ResubmitCount}} new event{{if ne .ResubmitCount 1}}s{{end}}</dd>
-            </div>
-            {{end}}
-        </dl>
-    </div>
-
-    <div class="card mt-6">
-        <div class="p-4 border-b border-gray-200">
-            <h2 class="text-lg font-medium text-gray-900">Body</h2>
-        </div>
-        <div class="p-4">
-            {{template "event_body" .Body}}
-        </div>
-    </div>
-
-    <div class="card mt-6">
-        <div class="p-4 border-b border-gray-200">
-            <h2 class="text-lg font-medium text-gray-900">Deliveries</h2>
-        </div>
-        <div class="divide-y divide-gray-100">
-            {{range .Deliveries}}
-            <div class="p-4">
-                <div class="flex flex-wrap items-center justify-between gap-3">
-                    <span class="text-sm text-gray-700">{{.Target.DisplayName}}</span>
-                    <span class="flex flex-wrap items-center gap-3">
-                        <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 class="text-xs text-gray-400">{{.AttemptCount}} attempt{{if ne .AttemptCount 1}}s{{end}}</span>
-                    </span>
-                </div>
-                <div class="mt-2 space-y-2">
-                    {{template "delivery_attempts" .}}
-                </div>
-            </div>
-            {{else}}
-            <div class="p-4 text-sm text-gray-500">No deliveries.</div>
-            {{end}}
-        </div>
-    </div>
-    {{end}}
-</div>
-{{end}}

templates/source_detail.html

@@ -90,11 +90,23 @@
             </div>
         </div>
 
-        <!-- Targets -->
-        <div class="card" x-data="collapsible">
+        <!-- Targets. The data attributes carry a refused add target
+             submission's type, reason and values back to the form. The
+             URL is data-destination, not data-url: html/template treats
+             an attribute named like a URL as a link and would rewrite
+             a refused ftp: or javascript: value. -->
+        <div class="card" x-data="targetForm"
+             data-type="{{.TargetForm.Type}}"
+             data-reason="{{.TargetError}}"
+             data-name="{{.TargetForm.Name}}"
+             data-destination="{{.TargetForm.URL}}"
+             data-headers="{{.TargetForm.Headers}}"
+             data-timeout="{{.TargetForm.Timeout}}"
+             data-max-retries="{{.TargetForm.MaxRetries}}"
+             data-expiry="{{.TargetForm.Expiry}}">
             <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 type="button" @click="toggle" class="btn-small">
+                <button type="button" @click="add" x-show="closed" 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>
@@ -102,48 +114,83 @@
                 </button>
             </div>
 
-            <!-- Add target form -->
-            <div x-show="open" x-cloak class="p-4 bg-gray-50 border-b border-gray-200">
-                <form method="POST" action="/hook/{{.Webhook.ID}}/targets" x-data="targetForm" @pageshow.window="readType" class="space-y-3">
-                    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
-                    <div class="flex gap-2">
-                        <input type="text" name="name" placeholder="Target name" required class="input text-sm flex-1">
-                        <select name="type" @change="readType" class="input text-sm w-32">
-                            <option value="http">HTTP</option>
-                            <option value="slack">Slack</option>
-                            <option value="database">Database</option>
-                            <option value="log">Log</option>
-                        </select>
-                    </div>
-                    <div x-show="isHttp">
-                        <input type="url" name="url" placeholder="https://example.com/webhook" :disabled="notHttp" class="input text-sm">
-                    </div>
-                    <div x-show="isHttp">
-                        <textarea name="headers" rows="3" placeholder="Authorization: Bearer ..." :disabled="notHttp" class="input text-sm"></textarea>
-                        <p class="text-xs text-gray-500 mt-1">Optional request headers, one <code>Name: value</code> per line, sent with every delivery.</p>
-                    </div>
-                    <div x-show="isHttp" class="flex gap-2 items-center">
-                        <label class="text-sm text-gray-700">Timeout (seconds, blank = default):</label>
-                        <input type="number" name="timeout" min="0" max="300" :disabled="notHttp" class="input text-sm w-24">
-                    </div>
-                    <div x-show="isHttp">
-                        <div class="flex gap-2 items-center">
-                            <label class="text-sm text-gray-700">Max retries:</label>
-                            <input type="number" name="max_retries" value="0" min="0" max="20" class="input text-sm w-24">
+            <!-- Add target form. Add shows the type choice; Next replaces
+                 it with the chosen type's fields. Each type's fields,
+                 and the hidden type field submitted with them, exist
+                 only while that type is chosen. A refused submission
+                 comes back open on its type, with the values entered;
+                 Cancel empties the form. -->
+            <form method="POST" action="/hook/{{.Webhook.ID}}/targets" x-ref="form">
+                <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
+                <div x-show="choosing" x-cloak class="p-4 bg-gray-50 border-b border-gray-200 flex flex-wrap gap-2">
+                    <select x-ref="type" aria-label="Target type" class="input text-sm w-32">
+                        <option value="http">HTTP</option>
+                        <option value="slack">Slack</option>
+                        <option value="database">Database</option>
+                        <option value="log">Log</option>
+                    </select>
+                    <button type="button" @click="next" class="btn-primary text-sm">Next</button>
+                    <button type="button" @click="cancel" class="btn-secondary text-sm">Cancel</button>
+                </div>
+                <div x-show="filling" x-cloak class="p-4 bg-gray-50 border-b border-gray-200 space-y-3">
+                    <div x-show="reason" x-text="reason" class="alert-error"></div>
+                    <input type="text" name="name" :value="name" placeholder="Target name" required class="input text-sm">
+                    <template x-if="isHttp">
+                        <div class="space-y-3">
+                            <input type="hidden" name="type" value="http">
+                            <input type="url" name="url" :value="url" placeholder="https://example.com/webhook" class="input text-sm">
+                            <div>
+                                <textarea name="headers" rows="3" :value="headers" placeholder="Authorization: Bearer ..." class="input text-sm"></textarea>
+                                <p class="text-xs text-gray-500 mt-1">Optional request headers, one <code>Name: value</code> per line, sent with every delivery.</p>
+                            </div>
+                            <div class="flex gap-2 items-center">
+                                <label class="text-sm text-gray-700">Timeout (seconds, blank = default):</label>
+                                <input type="number" name="timeout" :value="timeout" min="0" max="300" class="input text-sm w-24">
+                            </div>
+                            <div>
+                                <div class="flex gap-2 items-center">
+                                    <label class="text-sm text-gray-700">Max retries:</label>
+                                    <input type="number" name="max_retries" :value="maxRetries" placeholder="0" min="0" max="20" class="input text-sm w-24">
+                                </div>
+                                <p class="text-xs text-gray-500 mt-1">This is the total number of delivery attempts, not retries on top of the first: a value of 3 makes three attempts in all. 0 means a single attempt with no retries and no circuit breaker.</p>
+                            </div>
                         </div>
-                        <p class="text-xs text-gray-500 mt-1">This is the total number of delivery attempts, not retries on top of the first: a value of 3 makes three attempts in all. 0 means a single attempt with no retries and no circuit breaker.</p>
+                    </template>
+                    <template x-if="isSlack">
+                        <div class="space-y-3">
+                            <input type="hidden" name="type" value="slack">
+                            <div>
+                                <input type="url" name="url" :value="url" placeholder="https://hooks.slack.com/services/..." class="input text-sm">
+                                <p class="text-xs text-gray-500 mt-1">Slack or Mattermost incoming webhook URL. Payloads are pretty-printed in code blocks.</p>
+                            </div>
+                            <div>
+                                <div class="flex gap-2 items-center">
+                                    <label class="text-sm text-gray-700">Max retries:</label>
+                                    <input type="number" name="max_retries" :value="maxRetries" placeholder="0" min="0" max="20" class="input text-sm w-24">
+                                </div>
+                                <p class="text-xs text-gray-500 mt-1">This is the total number of delivery attempts, not retries on top of the first: a value of 3 makes three attempts in all. 0 means a single attempt with no retries and no circuit breaker.</p>
+                            </div>
+                        </div>
+                    </template>
+                    <template x-if="isDatabase">
+                        <div>
+                            <input type="hidden" name="type" value="database">
+                            <input type="text" name="expiry" :value="expiry" placeholder="never" class="input text-sm">
+                            <p class="text-xs text-gray-500 mt-1">Archive expiry: "never" (default) keeps rows forever, or a duration like "720h" prunes older rows.</p>
+                        </div>
+                    </template>
+                    <template x-if="isLog">
+                        <div>
+                            <input type="hidden" name="type" value="log">
+                            <p class="text-xs text-gray-500">A log target writes each event to the application log. It has no settings beyond its name.</p>
+                        </div>
+                    </template>
+                    <div class="flex gap-2">
+                        <button type="submit" class="btn-primary text-sm">Save</button>
+                        <button type="button" @click="cancel" class="btn-secondary text-sm">Cancel</button>
                     </div>
-                    <div x-show="isSlack">
-                        <input type="url" name="url" placeholder="https://hooks.slack.com/services/..." :disabled="notSlack" class="input text-sm">
-                        <p class="text-xs text-gray-500 mt-1">Slack or Mattermost incoming webhook URL. Payloads are pretty-printed in code blocks.</p>
-                    </div>
-                    <div x-show="isDatabase">
-                        <input type="text" name="expiry" placeholder="never" :disabled="notDatabase" class="input text-sm">
-                        <p class="text-xs text-gray-500 mt-1">Archive expiry: "never" (default) keeps rows forever, or a duration like "720h" prunes older rows.</p>
-                    </div>
-                    <button type="submit" class="btn-primary text-sm">Add Target</button>
-                </form>
-            </div>
+                </div>
+            </form>
 
             <div class="divide-y divide-gray-100">
                 {{range .Targets}}
@@ -179,6 +226,23 @@
                         <span>{{.Value}}</span>
                     </div>
                     {{end}}
+                    {{with .Archive}}
+                    <div class="text-xs text-gray-500 mt-1">
+                        <span class="font-medium text-gray-700">Archive File:</span>
+                        <span class="break-all">{{.Name}}</span>
+                        {{with .Note}}<span>({{.}})</span>{{end}}
+                    </div>
+                    {{if .Size}}
+                    <div class="text-xs text-gray-500 mt-1">
+                        <span class="font-medium text-gray-700">Archive Size:</span>
+                        <span>{{.Size}}</span>
+                    </div>
+                    <div class="text-xs text-gray-500 mt-1">
+                        <span class="font-medium text-gray-700">Last Written:</span>
+                        <span title="{{.WrittenUTC}}">{{.Written}}</span>
+                    </div>
+                    {{end}}
+                    {{end}}
                 </div>
                 {{else}}
                 <div class="p-4 text-sm text-gray-500">No targets configured.</div>
@@ -194,37 +258,26 @@
             <a href="/hook/{{.Webhook.ID}}/events" class="btn-small">Full Event Log</a>
         </div>
         <div class="divide-y divide-gray-100">
-            <!-- Each row expands to show its body; only the newest
-                 starts expanded. -->
-            {{range $i, $event := .Events}}
-            <div class="p-4" x-data="collapsible"{{if eq $i 0}} data-open{{end}}>
-                <div class="flex flex-wrap items-center gap-3">
-                    <button type="button" class="btn-small flex-1 flex-wrap justify-between gap-3 text-left" @click="toggle">
-                        <span class="flex flex-wrap items-center gap-3">
-                            <span class="badge-info">{{.Method}}</span>
-                            <span class="text-sm text-gray-500 break-all">{{.ContentType}}</span>
-                            {{if .ResubmittedFromID}}
-                            <span class="text-xs text-gray-500" title="This event is a copy of {{.ResubmittedFromID}}">resubmitted copy</span>
-                            {{end}}
-                        </span>
-                        <span class="flex flex-wrap items-center gap-3 text-xs text-gray-400">
-                            <span title="Body size">{{.Size}}</span>
-                            {{if .ProcessingTime}}
-                            <span title="Processing time: how long the slowest delivery took, from being queued to its last attempt">{{.ProcessingTime}}</span>
-                            {{end}}
-                            {{if .Status}}
-                            <span class="font-medium {{.StatusClass}}" title="HTTP status from the HTTP target">{{.Status}}</span>
-                            {{end}}
-                            <span title="{{.ReceivedUTC}}">{{.Received}}</span>
-                            <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>
-                        </span>
-                    </button>
-                    <a href="{{.Body.EventURL}}" class="btn-small">Open</a>
-                </div>
-                <div x-show="open" x-cloak class="mt-3">
-                    {{template "event_body" .Body}}
+            {{range .Events}}
+            <div class="p-4">
+                <div class="flex flex-wrap items-center justify-between gap-3">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <span class="badge-info">{{.Method}}</span>
+                        <span class="text-sm text-gray-500 break-all">{{.ContentType}}</span>
+                        {{if .ResubmittedFromID}}
+                        <span class="text-xs text-gray-500" title="This event is a copy of {{.ResubmittedFromID}}">resubmitted copy</span>
+                        {{end}}
+                    </div>
+                    <div class="flex flex-wrap items-center gap-3 text-xs text-gray-400">
+                        <span title="Body size">{{.Size}}</span>
+                        {{if .ProcessingTime}}
+                        <span title="Processing time: how long the slowest delivery took, from being queued to its last attempt">{{.ProcessingTime}}</span>
+                        {{end}}
+                        {{if .Status}}
+                        <span class="font-medium {{.StatusClass}}" title="HTTP status from the HTTP target">{{.Status}}</span>
+                        {{end}}
+                        <span title="{{.ReceivedUTC}}">{{.Received}}</span>
+                    </div>
                 </div>
             </div>
             {{else}}

templates/source_logs.html

@@ -44,7 +44,7 @@
                 <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">
                         <div class="text-xs text-gray-500">
-                            {{if .ResubmittedFrom}}Resubmitted from event <a href="/hook/{{$.Webhook.ID}}/events/{{.ResubmittedFromID}}" class="btn-small font-mono">{{.ResubmittedFromID}}</a>.{{end}}
+                            {{if .ResubmittedFrom}}Resubmitted from event <span class="font-mono">{{.ResubmittedFromID}}</span>.{{end}}
                             {{if .ResubmitCount}}Resubmitted as {{.ResubmitCount}} new event{{if ne .ResubmitCount 1}}s{{end}}.{{end}}
                         </div>
                         <form method="POST" action="/hook/{{$.Webhook.ID}}/events/{{.ID}}/resubmit" class="inline">
@@ -53,7 +53,10 @@
                             <button type="submit" class="btn-small" title="Submit this event again as a new event, to every currently active target">Resubmit</button>
                         </form>
                     </div>
-                    {{template "event_body" .Body}}
+                    <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="btn-small">download the full body</a>.</p>
+                    {{end}}
 
                     {{if .Deliveries}}
                     <div class="mt-4 border-t border-gray-200 pt-3">
@@ -84,7 +87,34 @@
                                 </div>
 
                                 <div x-show="open" x-cloak class="mt-2 space-y-2">
-                                    {{template "delivery_attempts" .}}
+                                    {{if .AttemptsOmitted}}
+                                    <p class="text-xs text-gray-500">{{.AttemptsOmitted}} attempt{{if ne .AttemptsOmitted 1}}s{{end}} omitted between the first and last shown.</p>
+                                    {{end}}
+                                    {{range .Results}}
+                                    <div class="rounded-md bg-white border border-gray-200 p-2">
+                                        <div class="flex flex-wrap items-center gap-3 text-xs">
+                                            <span class="text-gray-500">Attempt {{.AttemptNum}}</span>
+                                            <span class="{{if .Success}}text-green-600{{else}}text-red-600{{end}}">{{if .Success}}success{{else}}failure{{end}}</span>
+                                            <span class="text-gray-500">Status: {{if .HasStatusCode}}{{.StatusCode}}{{else}}&mdash; (no response){{end}}</span>
+                                            <span class="text-gray-500">Duration: {{.DurationMS}} ms</span>
+                                        </div>
+                                        {{if .Error}}
+                                        <p class="mt-2 text-xs text-red-700 break-all">Error: {{.Error}}</p>
+                                        {{end}}
+                                        {{if .ResponseBody}}
+                                        <pre class="mt-2 text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap break-all">{{.ResponseBody}}</pre>
+                                        {{end}}
+                                        {{if .ResponseTruncated}}
+                                        {{if .ResponseSizeKnown}}
+                                        <p class="mt-1 text-xs text-gray-500">Response truncated for display: showing {{.ResponseShownBytes}} of {{.ResponseBytes}} bytes.</p>
+                                        {{else}}
+                                        <p class="mt-1 text-xs text-gray-500">Showing {{.ResponseShownBytes}} of the {{.ResponseBytes}} recorded bytes. The response reached the recording limit, so the remote may have sent more that was never stored.</p>
+                                        {{end}}
+                                        {{end}}
+                                    </div>
+                                    {{else}}
+                                    <p class="text-xs text-gray-500">No attempts recorded yet.</p>
+                                    {{end}}
                                 </div>
                             </div>
                             {{end}}