release: 1.0.0: Public 1.0 image; delivery log; docs and SECURITY.md (incl. 1.0.1)

[1.0.0]
Added:
  - A **Delivery log** on each delivery's page (`/deliveries/{id}`): the
  - A **History** block on the same page: the journal's two timestamps stated as
Fixed:
  - Postfix config: copy TLS cert/key from the (often `:ro`, host-owned) mount
  - Postfix config: allow `maillog_file` under `/data` via
  - E2e: read `/data/setup-token` via `docker compose exec` (file is `0600`
  - Entrypoint: check `SELFPOST_HOSTNAME` before `/data` setup (so a bad identity
  - E2e gate: wait for host-published `/healthz` before panel setup, and stop
  … (3 more in CHANGELOG)
Changed:
  - Document what `.spbk` and `.spde` stand for (SelfPost backup / SelfPost domain
  - Docs aligned with the code: setup URL is `/setup/<token>` (README and
  - Full backups no longer carry `/data/log`. It is Postfix's raw log plus its
  - Monitoring screens (status, mail queue, system log, deliveries) use adaptive
  - Documentation package consolidated into `docs/development.md`: Documentation
  … (4 more in CHANGELOG)
[1.0.1]
A documentation and packaging release: no change to the mail path, the database, or the on-disk layout. Upgrading is a tag bump.
Added:
  - `SECURITY.md` — how to report a vulnerability privately (GitHub private
  - [docs/plans/](docs/plans/) — one document per agreed extension: the optional
Changed:
  - The panel's **Account** entry is now called **Settings** — nav link, page
  - The signed-in name in the panel's nav is now labelled `User:`, so it reads as
  - [docs/product.md](docs/product.md) reframes the future line: the inbound
  - [docs/security.md](docs/security.md) is now in English, matching the rest of
  - The README documentation table now points at `SECURITY.md` for reporting a
  … (2 more in CHANGELOG)
Fixed:
  - The panel's static assets are served with a content ETag and

Squashed CHANGELOG sections: [1.0.0], [1.0.1].

Full detail: CHANGELOG.md (1.0.0, 1.0.1).

internal/web/handlers_account.go

@@ -30,7 +30,7 @@ func (s *Server) handleAccount(w http.ResponseWriter, r *http.Request) {
 // field after a rejected submission; the password fields are never repopulated.
 func (s *Server) renderAccount(w http.ResponseWriter, r *http.Request, status int, formErr, formUsername string) {
 	s.render(w, status, "account", map[string]any{
-		"Title":        "SelfPost — account",
+		"Title":        "SelfPost — settings",
 		"User":         currentUser(r),
 		"Active":       "account",
 		"FormUsername": formUsername,

internal/web/handlers_apps.go

@@ -30,7 +30,7 @@ type detailView struct {
 	FormAddrs string
 	NewCred   *newCred
 	// RateLimitErr surfaces a validation error from a domain- or
-	// application-level rate-limit form (README § Rate limiting) as a page
+	// application-level rate-limit form (guide § Rate limiting) as a page
 	// banner.
 	RateLimitErr string
 	// ExportErr surfaces a rejected encryption password from the export card.

internal/web/handlers_monitor.go

@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"net/url"
 	"strconv"
+	"time"
 
 	"github.com/mixeme/selfpost/internal/logtail"
 	"github.com/mixeme/selfpost/internal/mailhdr"
@@ -15,10 +16,12 @@ import (
 
 // sendLogPageSize bounds each send-log page (product.md's monitoring screens
 // call for pagination); logTailLines bounds how much of mail.log the log view
-// shows per refresh.
+// shows per refresh, and deliveryLogLines how many of one message's own lines
+// its page shows.
 const (
-	sendLogPageSize = 50
-	logTailLines    = 200
+	sendLogPageSize  = 50
+	logTailLines     = 200
+	deliveryLogLines = 200
 )
 
 // handleDeliveries renders the Deliveries page over the send log: server-side
@@ -57,6 +60,13 @@ func (s *Server) handleDeliveriesRows(w http.ResponseWriter, r *http.Request) {
 // how it ended — and every remaining field (domain, application, queue id, when
 // the status was last reported) lives here, one page per row, so widening the
 // journal never costs the table a column.
+//
+// The page answers the question the log raises rather than restating it: what
+// the journal recorded, in what order it happened, and what Postfix itself
+// wrote about the message. So it is three blocks — the message's own facts and
+// its history side by side, and the mail.log lines for its queue id under both.
+// The queue id used to be printed here as something to go and search the system
+// log for by hand; the search is done for the operator instead.
 func (s *Server) handleDelivery(w http.ResponseWriter, r *http.Request) {
 	id, err := strconv.ParseInt(r.PathValue("id"), 10, 64)
 	if err != nil || id <= 0 {
@@ -75,17 +85,167 @@ func (s *Server) handleDelivery(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	row.Subject = mailhdr.DecodeSubject(row.Subject)
+	logRows, logNote := s.deliveryLog(row)
 	s.render(w, http.StatusOK, "delivery", map[string]any{
 		"Title":  "SelfPost — delivery",
 		"User":   currentUser(r),
 		"Active": "deliveries",
 		"Row":    row,
+		// The status in the panel's own badge vocabulary, so the headline reads
+		// the same way as every other health signal in the panel.
+		"Level":  deliveryLevel(row.Status),
+		"Events": deliveryEvents(row),
+		// The mail.log lines for this message, and — when there are none — the
+		// reason, which is a normal outcome rather than a failure.
+		"LogRows": logRows,
+		"LogNote": logNote,
 		// Where the row came from, so "Back" returns to the page and filters
 		// the operator was looking at rather than the top of an unfiltered log.
 		"BackURL": deliveriesBackURL(r),
 	})
 }
 
+// deliveryLevel maps a send-log status onto the ok/warn/error/unknown badge
+// vocabulary the status page and the DNS checks already use (see .st in
+// panel.css), so a colour means the same thing on every page: delivered is the
+// good outcome, deferred is not settled yet, and the two refusals are failures.
+// A queued row is "unknown" rather than "warn" — nothing has gone wrong, it is
+// simply that nothing has been reported.
+func deliveryLevel(status string) string {
+	switch status {
+	case store.StatusSent:
+		return "ok"
+	case store.StatusDeferred:
+		return "warn"
+	case store.StatusBounced, store.StatusRejected:
+		return "error"
+	default:
+		return "unknown"
+	}
+}
+
+// deliveryEvent is one step of a message's history, as the timeline on the
+// delivery page draws it. At is zero for the step that has not happened yet —
+// the delivery report a queued message is still waiting for.
+type deliveryEvent struct {
+	At     time.Time
+	Level  string // ok / warn / error / unknown, as deliveryLevel returns
+	Status string // the send-log status value this step reached
+	Title  string
+	Detail string
+}
+
+// deliveryEvents turns a row's two timestamps into the history the page shows.
+// The journal keeps no event table — a row is created when the message is
+// accepted and updated once when Postfix reports the attempt — so the two
+// timestamps *are* the history, and stating them as steps is what makes a row
+// whose created_at and updated_at differ by six hours legible as "queued for
+// six hours, then delivered" rather than as two dates in a list of fields.
+func deliveryEvents(row store.SendLogRow) []deliveryEvent {
+	// A rejected message has no second step, and its first one is not an
+	// acceptance: the journal-milter refused it, so Postfix never queued it.
+	if row.Status == store.StatusRejected {
+		return []deliveryEvent{{
+			At:     row.CreatedAt,
+			Level:  "error",
+			Status: store.StatusRejected,
+			Title:  "Refused before queueing",
+			Detail: "The journal-milter refused the message under a rate limit. It was never queued, so there is no queue id and Postfix never attempted delivery.",
+		}}
+	}
+
+	events := []deliveryEvent{{
+		At:     row.CreatedAt,
+		Level:  "unknown",
+		Status: store.StatusQueued,
+		Title:  "Accepted and queued",
+		Detail: "Postfix accepted the message over an authenticated submission and the journal-milter recorded it. Delivery to the recipient had not been attempted yet.",
+	}}
+
+	switch row.Status {
+	case store.StatusQueued:
+		// The step that has not happened. Drawn as an open dot with no time.
+		return append(events, deliveryEvent{
+			Level:  "unknown",
+			Status: store.StatusQueued,
+			Title:  "Waiting for a delivery report",
+			Detail: "Postfix has not reported an attempt for this recipient yet. The Mail queue page shows what it is still holding.",
+		})
+	case store.StatusSent:
+		return append(events, deliveryEvent{
+			At:     row.UpdatedAt,
+			Level:  "ok",
+			Status: store.StatusSent,
+			Title:  "Delivered",
+			Detail: "The receiving server accepted the message. That is as far as this server can see — what the recipient's mailbox then did with it is not reported back.",
+		})
+	case store.StatusDeferred:
+		return append(events, deliveryEvent{
+			At:     row.UpdatedAt,
+			Level:  "warn",
+			Status: store.StatusDeferred,
+			Title:  "Deferred, will be retried",
+			Detail: "The receiving server could not take the message yet. Postfix keeps it queued and retries until it is delivered or the queue lifetime runs out.",
+		})
+	case store.StatusBounced:
+		return append(events, deliveryEvent{
+			At:     row.UpdatedAt,
+			Level:  "error",
+			Status: store.StatusBounced,
+			Title:  "Bounced",
+			Detail: "Delivery failed for good: the receiving server refused the message permanently, or Postfix gave up after the queue lifetime. The reason is in the delivery log below.",
+		})
+	default:
+		// A status the log-tailer learns to write before this switch does.
+		return append(events, deliveryEvent{
+			At:     row.UpdatedAt,
+			Level:  deliveryLevel(row.Status),
+			Status: row.Status,
+			Title:  "Status reported",
+			Detail: "The last state Postfix reported for this recipient.",
+		})
+	}
+}
+
+// deliveryLogRow is one mail.log line split for the table on the delivery
+// page: when it was written, and what it says. Time is empty for a line whose
+// head is not a timestamp the log format recognises — the line still shows, in
+// full, under Message.
+type deliveryLogRow struct {
+	Time string
+	Text string
+}
+
+// deliveryLog reads the mail.log lines Postfix wrote about one message and
+// splits each into the two columns the page shows it in. The second return
+// value is what to say when there are none: every reason for an empty result
+// here is an ordinary one — the message never reached the queue, or its lines
+// have aged out of the log — so none of them is an error on the page. Only a
+// log that cannot be read at all is reported as a fault, and that one is
+// logged for the operator as well.
+func (s *Server) deliveryLog(row store.SendLogRow) ([]deliveryLogRow, string) {
+	if row.QueueID == "" {
+		return nil, "This message never reached the queue, so Postfix wrote no delivery lines for it."
+	}
+	lines, err := logtail.QueueLines(s.cfg.MailLogPath, row.QueueID, deliveryLogLines)
+	if err != nil && !errors.Is(err, fs.ErrNotExist) {
+		logf("panel: delivery log %s: %v", row.QueueID, err)
+		return nil, "Could not read the mail log."
+	}
+	if len(lines) == 0 {
+		// Send-log rows outlive mail.log: retention is ninety days by default
+		// and rotation keeps fourteen files, so an older message having nothing
+		// left to show is the normal end state, not a fault.
+		return nil, "Nothing for this queue id in the current mail log. Its lines have most likely been rotated away."
+	}
+	out := make([]deliveryLogRow, len(lines))
+	for i, line := range lines {
+		stamp, rest := logtail.SplitTimestamp(line)
+		out[i] = deliveryLogRow{Time: stamp, Text: rest}
+	}
+	return out, ""
+}
+
 // deliveriesBackURL rebuilds the delivery-log URL a detail page was opened
 // from. Only the log's own parameters are carried over, and each is re-encoded
 // by url.Values, so nothing a visitor appends to the link can travel back into

internal/web/handlers_monitor_test.go

@@ -3,6 +3,7 @@ package web
 import (
 	"net/http"
 	"net/http/httptest"
+	"os"
 	"path/filepath"
 	"strconv"
 	"strings"
@@ -90,6 +91,113 @@ func TestDeliveryPageShowsWhatTheLogOmits(t *testing.T) {
 	}
 }
 
+// The page's second column is the message's history: the two timestamps the
+// journal holds, stated as the steps they stand for, so a row is readable as
+// what happened to the message rather than as a list of fields.
+func TestDeliveryPageTellsTheMessagesHistory(t *testing.T) {
+	s, row := serverWithDelivery(t)
+
+	out := getBody(t, s.handleDelivery, "/deliveries/"+itoa(row.ID))
+	for _, want := range []string{
+		"Accepted and queued", "Delivered",
+		row.CreatedAt.Format("2006-01-02 15:04:05"),
+		row.UpdatedAt.Format("2006-01-02 15:04:05"),
+		// A delivered message is "ok" in the panel's own badge vocabulary, the
+		// same one the status page and the DNS checks use.
+		`class="st st-ok"`,
+	} {
+		if !strings.Contains(out, want) {
+			t.Errorf("delivery page is missing %q:\n%s", want, out)
+		}
+	}
+	// Accepted comes before delivered: a history read in the wrong order is
+	// worse than none.
+	if strings.Index(out, "Accepted and queued") > strings.Index(out, "Delivered") {
+		t.Errorf("the history is not in the order it happened:\n%s", out)
+	}
+}
+
+// A queued message has no second timestamp to state, so the step it is waiting
+// for is drawn as one that has not happened rather than dated with the moment
+// the row was written.
+func TestDeliveryPageMarksAQueuedMessageAsStillWaiting(t *testing.T) {
+	s, _ := serverWithDelivery(t)
+	if err := s.store.InsertQueued(store.SendLogEntry{
+		QueueID: "7F7F7F7F", Domain: "bs.example.ru", AppLogin: "Queuer3C",
+		From: "noreply@bs.example.ru", To: "waiting@example.ru", Subject: "Still going",
+	}); err != nil {
+		t.Fatalf("insert: %v", err)
+	}
+	rows, err := s.store.QuerySendLog(store.SendLogFilter{}, 1, 0)
+	if err != nil || len(rows) != 1 {
+		t.Fatalf("query: %v (%d rows)", err, len(rows))
+	}
+
+	out := getBody(t, s.handleDelivery, "/deliveries/"+itoa(rows[0].ID))
+	for _, want := range []string{"Waiting for a delivery report", "pending", "not yet"} {
+		if !strings.Contains(out, want) {
+			t.Errorf("delivery page does not mark the message as still waiting (%q):\n%s", want, out)
+		}
+	}
+}
+
+// The queue id used to be printed as something to go and search the system log
+// for by hand; the page does that search now, and shows only this message's
+// lines — as a table of when and what, so the seconds between the connection
+// and the reply line up down one edge.
+func TestDeliveryPageShowsThisMessagesLogLines(t *testing.T) {
+	s, row := serverWithDelivery(t)
+	s.cfg.MailLogPath = writeMailLog(t,
+		"2026-08-03T05:15:52.219218+00:00 host postfix/smtpd[20]: 4A1B2C3D: client=mail.example.com[203.0.113.4]",
+		"2026-08-03T05:15:52.300000+00:00 host postfix/qmgr[10]: 99999999: from=<other@example.ru>, size=500, nrcpt=1 (queue active)",
+		"2026-08-03T05:16:03.884210+00:00 host postfix/smtp[26]: 4A1B2C3D: to=<public@example.ru>, dsn=2.0.0, status=sent (250 OK)",
+	)
+
+	out := getBody(t, s.handleDelivery, "/deliveries/"+itoa(row.ID))
+	for _, want := range []string{
+		"<th>Time</th>", "<th>Message</th>",
+		// The stamp is split off into its own cell, without the microseconds
+		// and the offset that make it the widest thing on the line.
+		`<td class="time muted">2026-08-03 05:15:52</td>`,
+		`<td class="time muted">2026-08-03 05:16:03</td>`,
+		"client=mail.example.com", "status=sent (250 OK)",
+	} {
+		if !strings.Contains(out, want) {
+			t.Errorf("delivery log table is missing %q:\n%s", want, out)
+		}
+	}
+	if strings.Contains(out, "99999999") {
+		t.Errorf("delivery page shows another message's log line:\n%s", out)
+	}
+}
+
+// A line whose head is not a timestamp still has to show in full; the format is
+// the log's, not ours, and a line we cannot split is a line we must not drop.
+func TestDeliveryPageKeepsAnUnstampedLogLineWhole(t *testing.T) {
+	s, row := serverWithDelivery(t)
+	s.cfg.MailLogPath = writeMailLog(t, "host postfix/smtp[26]: 4A1B2C3D: to=<public@example.ru>, status=sent (250 OK)")
+
+	out := getBody(t, s.handleDelivery, "/deliveries/"+itoa(row.ID))
+	if !strings.Contains(out, "host postfix/smtp[26]: 4A1B2C3D: to=&lt;public@example.ru&gt;, status=sent (250 OK)") {
+		t.Errorf("an unstamped log line did not survive the split into columns:\n%s", out)
+	}
+}
+
+// Rows outlive mail.log, and a message the milter refused never reached the
+// queue at all. Neither is a fault, so neither may render as an error.
+func TestDeliveryPageExplainsAnEmptyDeliveryLog(t *testing.T) {
+	s, row := serverWithDelivery(t)
+	s.cfg.MailLogPath = filepath.Join(t.TempDir(), "mail.log") // never created
+
+	out := getBody(t, s.handleDelivery, "/deliveries/"+itoa(row.ID))
+	if !strings.Contains(out, "rotated away") {
+		t.Errorf("delivery page does not explain the empty delivery log:\n%s", out)
+	}
+	if strings.Contains(out, `class="error"`) || strings.Contains(out, "Could not read the mail log") {
+		t.Errorf("an aged-out delivery log is reported as a failure:\n%s", out)
+	}
+}
+
 // Send-log rows are pruned on the retention window, so a bookmarked delivery
 // that no longer exists is a 404, not a 500.
 func TestDeliveryPageNotFound(t *testing.T) {
@@ -159,3 +267,14 @@ func getBody(t *testing.T, h http.HandlerFunc, target string) string {
 }
 
 func itoa(n int64) string { return strconv.FormatInt(n, 10) }
+
+// writeMailLog creates a mail.log holding the given lines and returns its path,
+// for the pages that read the log rather than the journal.
+func writeMailLog(t *testing.T, lines ...string) string {
+	t.Helper()
+	path := filepath.Join(t.TempDir(), "mail.log")
+	if err := os.WriteFile(path, []byte(strings.Join(lines, "\n")+"\n"), 0o644); err != nil {
+		t.Fatalf("write mail.log: %v", err)
+	}
+	return path
+}

internal/web/handlers_ratelimit.go

@@ -11,13 +11,13 @@ import (
 )
 
 // defaultRateLimitWindowSeconds is the sliding-window length used when an
-// admin sets a message ceiling but leaves the window blank (README § Rate
-// limiting, matching the level-1 default hour; README § Environment variables:
+// admin sets a message ceiling but leaves the window blank (guide § Rate
+// limiting, matching the level-1 default hour; guide § Environment variables:
 // RATE_LIMIT_WINDOW_SECONDS).
 const defaultRateLimitWindowSeconds = 3600
 
 // rateLimitInput is the validated result of a rate-limit form submission.
-// clear means "remove the differentiated limit" (README § Rate limiting: an
+// clear means "remove the differentiated limit" (guide § Rate limiting: an
 // empty IP binding leaves only level 1).
 type rateLimitInput struct {
 	clear         bool
@@ -42,7 +42,7 @@ func parseRateLimitForm(r *http.Request) (rateLimitInput, error) {
 		return rateLimitInput{}, err
 	}
 	if len(ips) == 0 {
-		// No IP binding: the differentiated limit does not apply (README § Rate
+		// No IP binding: the differentiated limit does not apply (guide § Rate
 		// limiting).
 		return rateLimitInput{clear: true}, nil
 	}
@@ -92,7 +92,7 @@ func parsePositiveInt(raw string, def int) (int, error) {
 }
 
 // handleDomainRateLimit saves or clears a domain-level differentiated rate
-// limit (README § Rate limiting). No reload is needed — the milter reads the
+// limit (guide § Rate limiting). No reload is needed — the milter reads the
 // row live.
 func (s *Server) handleDomainRateLimit(w http.ResponseWriter, r *http.Request) {
 	d, ok := s.lookupDomain(w, r)
@@ -116,7 +116,7 @@ func (s *Server) handleDomainRateLimit(w http.ResponseWriter, r *http.Request) {
 }
 
 // handleAppRateLimit saves or clears an application-level differentiated rate
-// limit (README § Rate limiting).
+// limit (guide § Rate limiting).
 func (s *Server) handleAppRateLimit(w http.ResponseWriter, r *http.Request) {
 	a, ok := s.lookupApplication(w, r)
 	if !ok {

internal/web/middleware.go

@@ -17,7 +17,7 @@ const usernameKey ctxKey = 0
 // everything except a GET request carrying HX-Request: the four monitoring
 // fragments (/status/fragment, /mail-queue/body, /system-log/body,
 // /deliveries/rows)
-// poll every 5s regardless of whether anyone is looking at the tab, so
+// poll on a timer regardless of whether anyone is looking at the tab, so
 // counting those as activity would make "N days idle" mean "N days since a
 // browser tab was last open" instead.
 func (s *Server) requireAuth(next http.Handler) http.Handler {

internal/web/static.go

@@ -0,0 +1,59 @@
+package web
+
+import (
+	"crypto/sha256"
+	"encoding/hex"
+	"io/fs"
+	"net/http"
+	"path"
+)
+
+// staticETags maps each /static/ URL path to a strong ETag over the asset's
+// bytes, computed once at startup from the embedded FS.
+//
+// The assets are baked into the binary, so their FS modification times are the
+// zero value and http.FileServer sends no Last-Modified. Without an ETag either,
+// a response carries no validator at all and the browser is free to guess how
+// long to keep it — which is how a replaced favicon keeps showing the old mark
+// long after a deploy. Hashing the content gives every asset a validator that
+// changes exactly when the asset does.
+var staticETags = buildStaticETags()
+
+func buildStaticETags() map[string]string {
+	etags := make(map[string]string)
+	// An error here would mean the embed directive and this walk disagree, which
+	// is a build-time defect rather than a runtime condition; the assets still
+	// serve correctly without a validator, so skip what can't be read.
+	_ = fs.WalkDir(assetsFS, "static", func(name string, d fs.DirEntry, err error) error {
+		if err != nil || d.IsDir() {
+			return nil
+		}
+		b, err := fs.ReadFile(assetsFS, name)
+		if err != nil {
+			return nil
+		}
+		sum := sha256.Sum256(b)
+		etags["/"+name] = `"` + hex.EncodeToString(sum[:16]) + `"`
+		return nil
+	})
+	return etags
+}
+
+// staticHandler serves the embedded assets under /static/ with a content ETag.
+//
+// Cache-Control is no-cache rather than a max-age: it lets the browser keep the
+// copy but requires it to revalidate, so an asset that changed is picked up on
+// the next page load while an unchanged one costs a 304 with no body. For a
+// handful of small files on a single-operator panel that trade is the right way
+// round — correctness after a deploy matters more than saving the round trip.
+// http.ServeContent answers the conditional request from the ETag we set here.
+func staticHandler() http.Handler {
+	files := http.FileServer(http.FS(assetsFS))
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if etag, ok := staticETags[path.Clean(r.URL.Path)]; ok {
+			w.Header().Set("ETag", etag)
+			w.Header().Set("Cache-Control", "no-cache")
+		}
+		files.ServeHTTP(w, r)
+	})
+}

internal/web/static/panel.css

@@ -81,12 +81,14 @@ main { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 64rem; }
    floating in the middle — the misalignment that gave login and setup their own
    narrow column (main.page-login further down). */
 main > * { max-width: 48rem; margin-left: auto; margin-right: auto; }
-/* The three monitoring pages are the ones that opt out: six columns of send
-   log, and raw mail.log lines that are long by nature, which at the measure
-   left Subject and Status fighting over the last inch and wrapped every second
-   log line. The class is declared by the page itself (the "wide" block in
-   layout.html) rather than derived from the page name, since a delivery's own
-   page is prose and shares the send log's name in the navigation. */
+/* The four monitoring pages are the ones that opt out: six columns of send
+   log, raw mail.log lines that are long by nature — which at the measure left
+   Subject and Status fighting over the last inch and wrapped every second log
+   line — and a single delivery's page, which stands two cards side by side over
+   a block of those same log lines. The class is declared by the page itself
+   (the "wide" block in layout.html) rather than derived from the page name: a
+   page's name is the navigation entry it belongs under, which several pages
+   share, and how wide a page needs to be is a property of that page alone. */
 main.wide > * { max-width: none; }
 /* Longhands, not the margin shorthand: the shorthand would re-zero the auto
    side margins above and pin the heading to the column's edge, a measure's
@@ -390,6 +392,98 @@ meter { width: 5rem; height: 0.7rem; vertical-align: middle; margin-right: 0.4re
 .metric { white-space: nowrap; }
 .code-row { display: flex; align-items: flex-start; gap: 0.5rem; }
 .code-row .code { flex: 1; min-width: 0; }
+
+/* Two cards abreast, on the one page that has a pair of them worth reading
+   together (a delivery's facts beside its history). auto-fit with a minimum
+   rather than a media query: the pair falls into one column exactly when a
+   column would drop below the width its content needs, which is also what
+   happens inside the narrow column the navigation lies down at. */
+.split {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
+  gap: 1.2rem; margin-top: 1.2rem;
+}
+/* The gap already spaces the cards inside the grid; the general .card + .card
+   rule would add a second gap's worth on top of it, and only to the second
+   card, which in one column reads as an uneven stack. The blocks around the
+   grid keep their spacing from it instead. */
+.split > .card + .card { margin-top: 0; }
+.split + .card { margin-top: 1.2rem; }
+/* The subject heads a delivery's page, and it is the one heading in the panel
+   whose text we do not control: it may be a hundred characters with nothing to
+   break on. It wraps to as many lines as it needs (this is the page's name, not
+   a table cell to clip) but never widens the column. */
+h1.subject { overflow-wrap: anywhere; }
+/* The line under it: sender, recipient and outcome. Wrapping rather than
+   clipping, since either address may be long and both are the point. The
+   vertical margins are longhands for the reason given at the h1 rule above —
+   the shorthand would re-zero the auto side margins that keep a page's blocks
+   centred on the measure. It sits close under the heading: the two are one
+   statement of what this page is about. */
+.route {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
+  margin-top: -0.5rem; margin-bottom: 1rem;
+}
+.route .addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; overflow-wrap: anywhere; }
+.route .arrow { color: #6b7280; }
+/* A card's short facts, as a grid of tiles rather than the label-over-value
+   stack the rest of the panel uses. That stack is right for the pages where a
+   value is a DNS record or a password to copy — one per line, full width — and
+   wrong for six values of a few characters each, which down a narrow column
+   would be a page of mostly empty rows. Same auto-fit as .split: as many
+   columns as fit, and one when nothing else does. */
+.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; margin-top: 1rem; }
+.fact { min-width: 0; padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--surface-bg); }
+.fact-label {
+  display: block; font-size: 0.7rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
+}
+/* Nothing here is guaranteed to have a space in it — domains, logins and queue
+   ids are all one run — so a value may break mid word rather than push its tile
+   wider than the column it shares. */
+.fact-value { display: block; margin-top: 0.1rem; overflow-wrap: anywhere; }
+.fact-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
+/* A message's history: the steps down a line, each with the time it happened,
+   the status it reached and what that means. The line is the list's own left
+   border and the dots sit on top of it, so nothing has to be positioned against
+   a fixed row height — a step's text is two lines or five depending on what
+   there is to say about it. */
+.timeline { list-style: none; display: flex; flex-direction: column; gap: 1.1rem;
+            margin: 1rem 0 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 2px solid var(--border); }
+.event { position: relative; min-width: 0; }
+.event::before {
+  content: ""; position: absolute; left: -1.85rem; top: 0.3rem;
+  width: 0.65rem; height: 0.65rem; border-radius: 50%;
+  background: var(--card-bg); border: 2px solid var(--control-border);
+}
+/* The dot carries the step's own verdict, in the same four colours as the badge
+   beside it — so the shape of the history is readable down the line alone. */
+.event.lvl-ok::before { border-color: var(--st-ok-fg); background: var(--st-ok-bg); }
+.event.lvl-warn::before { border-color: var(--st-warn-fg); background: var(--st-warn-bg); }
+.event.lvl-error::before { border-color: var(--st-error-fg); background: var(--st-error-bg); }
+/* The step that has not happened yet — a queued message's delivery report — is
+   the one hollow dot, and its text is quiet: it is what to expect, not a record
+   of anything. */
+.event.pending { opacity: 0.7; }
+.event.pending::before { background: var(--card-bg); border-style: dashed; }
+.event-time { margin: 0; font-size: 0.75rem; color: #6b7280; }
+.event-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.15rem 0 0; font-weight: 600; }
+.event-detail { margin: 0.2rem 0 0; font-size: 0.9rem; }
+/* A message's own mail.log lines, as a table of when and what. The time column
+   is sized to its content — width:1% is as narrow as the automatic layout will
+   take a column, which with the nowrap on td.time settles on exactly the stamp
+   — so everything left over goes to the text, which is the column that needs
+   it. */
+table.log { margin-top: 1rem; }
+table.log th:first-child, table.log td.time { width: 1%; }
+/* The log's own text: monospace, because it is full of addresses, response
+   codes and identifiers that are compared character by character rather than
+   read as words. pre-wrap keeps the spacing a server's reply was written with
+   while still letting a long line wrap inside the cell instead of widening it
+   (the th/td rule above allows the break). */
+table.log td.log-text {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.8rem; white-space: pre-wrap;
+}
 /* Compact outlined button: same affordance as the filled one but quiet enough
    that several can sit together without shouting — the Copy buttons beside a
    value, the controls of a table row or of an application block. Sign out

internal/web/static/panel.js

@@ -144,7 +144,7 @@
   //
   // Each pass looks its targets up by id rather than holding on to elements
   // found once: the status page replaces its cards wholesale every five
-  // seconds (hx-swap on #status-body), and anything remembered here would be
+  // seconds (adaptive polling on #status-body), and anything remembered here would be
   // measuring boxes that had left the document.
   var sectionLinks = [];
 
@@ -204,19 +204,95 @@
     initSectionIndex();
   });
 
-  // --- Skip polling while the tab is hidden ------------------------------
-  // The monitoring pages (status, mail queue, system log, deliveries) poll
-  // every 5s via hx-trigger="every 5s". htmx has a built-in way to make that
-  // conditional (an event filter, hx-trigger="every 5s [expr]"), but it
-  // evaluates the filter with `new Function`, which the panel's CSP
-  // (default-src 'self', no 'unsafe-eval') would silently break. Skipping the
-  // request here instead needs nothing beyond what the CSP already allows: a
-  // request due while the tab is hidden is simply not sent, and the next
-  // request after it becomes visible again picks up on schedule as usual.
+  // --- Adaptive monitoring polling ---------------------------------------
+  // The four monitoring fragments carry data-poll and hx-trigger="load" for
+  // the first fetch only. panel.js schedules the rest: 5 s while the operator
+  // is active on the page, 30 s when the tab is visible but idle, and nothing
+  // while the tab is hidden. hx-trigger="every Ns [expr]" could express some
+  // of that, but the filter is evaluated with `new Function`, which the
+  // panel's CSP (default-src 'self', no 'unsafe-eval') would silently break.
+  var pollActiveMs = 5000;
+  var pollIdleMs = 30000;
+  // No pointer/keyboard/scroll input for this long → treat the tab as idle.
+  var userIdleMs = 30000;
+  var lastActivity = Date.now();
+  var pollTimers = Object.create(null);
+
+  ["mousedown", "mousemove", "keydown", "scroll", "touchstart"].forEach(function (evt) {
+    document.addEventListener(evt, function () {
+      lastActivity = Date.now();
+    }, { passive: true });
+  });
+
+  function pollDelayMs() {
+    return Date.now() - lastActivity < userIdleMs ? pollActiveMs : pollIdleMs;
+  }
+
+  function triggerPoll(el) {
+    htmx.ajax("GET", el.getAttribute("hx-get"), {
+      target: "#" + el.id,
+      swap: el.getAttribute("hx-swap") || "outerHTML"
+    });
+  }
+
+  function schedulePoll(el) {
+    if (!el || !el.id || !el.hasAttribute("data-poll")) {
+      return;
+    }
+    if (pollTimers[el.id]) {
+      clearTimeout(pollTimers[el.id]);
+      delete pollTimers[el.id];
+    }
+    if (document.hidden) {
+      return;
+    }
+    var id = el.id;
+    pollTimers[id] = setTimeout(function () {
+      delete pollTimers[id];
+      var current = document.getElementById(id);
+      if (!current || !current.hasAttribute("data-poll")) {
+        return;
+      }
+      if (document.hidden) {
+        schedulePoll(current);
+        return;
+      }
+      triggerPoll(current);
+    }, pollDelayMs());
+  }
+
+  function onPollElementReady(el) {
+    if (!el || !el.hasAttribute("data-poll")) {
+      return;
+    }
+    // Swapped-in markup still carries hx-trigger="load"; strip it so htmx does
+    // not issue a duplicate GET on top of the response we just received.
+    el.removeAttribute("hx-trigger");
+    schedulePoll(el);
+  }
+
+  document.body.addEventListener("htmx:afterSwap", function (ev) {
+    onPollElementReady(ev.detail.elt);
+  });
+
+  document.body.addEventListener("htmx:responseError", function (ev) {
+    onPollElementReady(ev.detail.elt);
+  });
+
   document.body.addEventListener("htmx:beforeRequest", function (ev) {
-    var trigger = ev.target.getAttribute && ev.target.getAttribute("hx-trigger");
-    if (document.hidden && trigger && trigger.indexOf("every") !== -1) {
+    if (document.hidden && ev.target.hasAttribute && ev.target.hasAttribute("data-poll")) {
       ev.preventDefault();
     }
   });
+
+  document.addEventListener("visibilitychange", function () {
+    if (document.hidden) {
+      Object.keys(pollTimers).forEach(function (id) {
+        clearTimeout(pollTimers[id]);
+        delete pollTimers[id];
+      });
+      return;
+    }
+    document.querySelectorAll("[data-poll]").forEach(schedulePoll);
+  });
 })();

internal/web/static_test.go

@@ -0,0 +1,74 @@
+package web
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"testing"
+)
+
+// serveStatic runs one GET against the static handler.
+func serveStatic(path string, headers map[string]string) *httptest.ResponseRecorder {
+	r := httptest.NewRequest(http.MethodGet, path, nil)
+	for k, v := range headers {
+		r.Header.Set(k, v)
+	}
+	rec := httptest.NewRecorder()
+	staticHandler().ServeHTTP(rec, r)
+	return rec
+}
+
+// Every embedded asset must carry a validator. The favicon is the one that
+// prompted this: a browser given no ETag and no Last-Modified caches it on a
+// guess, and a rebranded panel keeps serving the old mark from the tab.
+func TestStaticAssetsCarryETag(t *testing.T) {
+	for _, name := range []string{"favicon.png", "favicon.svg", "panel.css", "panel.js", "htmx.min.js"} {
+		rec := serveStatic("/static/"+name, nil)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("%s: got status %d, want 200", name, rec.Code)
+		}
+		if rec.Header().Get("ETag") == "" {
+			t.Errorf("%s: no ETag", name)
+		}
+		if got := rec.Header().Get("Cache-Control"); got != "no-cache" {
+			t.Errorf("%s: Cache-Control = %q, want %q", name, got, "no-cache")
+		}
+	}
+}
+
+// The point of the ETag is the cheap second request: the browser sends back
+// what it has and gets a bodyless 304 when nothing changed.
+func TestStaticETagRevalidates(t *testing.T) {
+	first := serveStatic("/static/favicon.png", nil)
+	etag := first.Header().Get("ETag")
+	if etag == "" {
+		t.Fatal("no ETag on the first response")
+	}
+
+	same := serveStatic("/static/favicon.png", map[string]string{"If-None-Match": etag})
+	if same.Code != http.StatusNotModified {
+		t.Errorf("matching If-None-Match: got status %d, want 304", same.Code)
+	}
+	if same.Body.Len() != 0 {
+		t.Errorf("matching If-None-Match: got %d bytes of body, want none", same.Body.Len())
+	}
+
+	// A stale validator — what a browser holds after the asset is replaced —
+	// has to produce the new bytes rather than another 304.
+	stale := serveStatic("/static/favicon.png", map[string]string{"If-None-Match": `"0000000000000000"`})
+	if stale.Code != http.StatusOK {
+		t.Errorf("stale If-None-Match: got status %d, want 200", stale.Code)
+	}
+	if stale.Body.Len() == 0 {
+		t.Error("stale If-None-Match: empty body, want the asset")
+	}
+}
+
+// Two different assets must not share a validator, or replacing one would be
+// masked by the other's cached copy.
+func TestStaticETagsAreContentDerived(t *testing.T) {
+	png := serveStatic("/static/favicon.png", nil).Header().Get("ETag")
+	svg := serveStatic("/static/favicon.svg", nil).Header().Get("ETag")
+	if png == svg {
+		t.Errorf("favicon.png and favicon.svg share the ETag %s", png)
+	}
+}

internal/web/templates/account.html

@@ -1,5 +1,5 @@
 {{define "content"}}
-<h1>Account</h1>
+<h1>Settings</h1>
 
 {{if .Flash}}<div class="flash">{{.Flash}}</div>{{end}}
 

internal/web/templates/backup.html

@@ -11,7 +11,8 @@
   <p class="muted"><strong>The backup file is a secret</strong> (it contains
   private keys and credentials). Store and transfer it securely and delete it
   once the restore succeeds. Encrypting it below is the simplest way to do that:
-  the download is then a <code>.spbk</code> file that only the password opens.</p>
+  the download is then a <code>.spbk</code> file (SelfPost backup) that only
+  the password opens.</p>
   {{if .BackupErr}}<p class="error">{{.BackupErr}}</p>{{end}}
   <form method="post" action="/backup">
     {{template "encryptfields" .}}
@@ -22,9 +23,10 @@
 <div class="card">
   <h2>Import a domain</h2>
   <p class="muted">Move a single domain here from another SelfPost instance using
-  a domain export file (from that domain's page). Its DKIM key and application
-  passwords come across, so the published DNS record needs no change. The export
-  file is a secret, like a full backup.</p>
+  a domain export file (from that domain's page) — plain <code>.json</code> or
+  encrypted <code>.spde</code> (SelfPost domain export). Its DKIM key and
+  application passwords come across, so the published DNS record needs no
+  change. The export file is a secret, like a full backup.</p>
   {{if .ImportErr}}<p class="error">{{.ImportErr}}</p>{{end}}
   <form method="post" action="/domains/import" enctype="multipart/form-data">
     <label for="importfile">Domain export file</label>

internal/web/templates/deliveries.html

@@ -1,7 +1,8 @@
 {{/* The send log is six columns of addresses, subjects and timestamps, so this
      page takes the whole column rather than the reading measure (see the "wide"
-     block in layout.html). A single delivery's page carries prose and keeps the
-     measure, which is why this is declared per page and not per page name. */}}
+     block in layout.html). It is declared per page rather than per page name
+     because how wide a page needs to be is a property of that page, not of the
+     navigation entry several pages share. */}}
 {{define "wide"}}wide{{end}}
 
 {{define "content"}}

internal/web/templates/deliveries_rows.html

@@ -1,6 +1,6 @@
 {{define "deliveries_rows"}}
-<div id="deliveries-rows" hx-get="/deliveries/rows?domain={{.FilterDomain}}&app={{.FilterApp}}&p={{.Page}}"
-     hx-trigger="every 5s" hx-swap="outerHTML">
+<div id="deliveries-rows" data-poll hx-get="/deliveries/rows?domain={{.FilterDomain}}&app={{.FilterApp}}&p={{.Page}}"
+     hx-trigger="load" hx-swap="outerHTML">
   {{if .Rows}}
   <table>
     <thead>

internal/web/templates/delivery.html

@@ -1,55 +1,124 @@
+{{/* One message's page. It takes the whole column rather than the reading
+     measure (see the "wide" block in layout.html): the two cards below stand
+     side by side, and under them are raw mail.log lines, which are long by
+     nature and were the reason the send log opted out too. */}}
+{{define "wide"}}wide{{end}}
+
 {{define "content"}}
-<h1>Delivery</h1>
+{{/* The subject is the page's name — it is what the message was about, and
+     what an operator arriving from the log is holding in their head. The route
+     under it is the other half of the identity: who it was from and who it was
+     for, with the outcome badged on the end so the answer is on the first line
+     of the page rather than somewhere in the cards below. */}}
+<h1 class="subject">{{if .Row.Subject}}{{.Row.Subject}}{{else}}(no subject){{end}}</h1>
+<p class="route">
+  <span class="addr">{{.Row.From}}</span>
+  <span class="arrow" aria-hidden="true">&rarr;</span>
+  <span class="addr">{{if .Row.To}}{{.Row.To}}{{else}}—{{end}}</span>
+  <span class="st st-{{.Level}}">{{.Row.Status}}</span>
+</p>
 
 <a class="back" href="{{.BackURL}}">&larr; Back to deliveries</a>
 
-<div class="card">
-  <h2>Message</h2>
-  <p class="muted">One recipient of one message, as the journal-milter recorded
-  it when Postfix accepted it. The delivery log lists these; everything the list
-  has no room for is here.</p>
+{{/* The two columns: what was recorded on the left, in what order it happened
+     on the right. They are a pair — the facts are only worth reading against
+     the history and the history only means anything for a known message — so
+     they are read together rather than one after the other (.split in
+     panel.css lays them down into one column when there is no room). */}}
+<div class="split">
+  <div class="card" id="message">
+    <h2>Message</h2>
+    <p class="muted">What the journal recorded as Postfix accepted this
+    message. The delivery log lists only what identifies a row at a glance;
+    everything the table has no column for is here.</p>
 
-  <label>Time</label>
-  <span class="code">{{.Row.CreatedAt.Format "2006-01-02 15:04:05"}} UTC</span>
+    <div class="facts">
+      <div class="fact">
+        <span class="fact-label">Domain</span>
+        <span class="fact-value">{{if .Row.Domain}}{{.Row.Domain}}{{else}}—{{end}}</span>
+      </div>
+      <div class="fact">
+        <span class="fact-label">Application</span>
+        <span class="fact-value">{{if .Row.AppLogin}}{{.Row.AppLogin}}{{else}}—{{end}}</span>
+      </div>
+      <div class="fact">
+        <span class="fact-label">Accepted</span>
+        <span class="fact-value">{{.Row.CreatedAt.Format "2006-01-02 15:04:05"}} UTC</span>
+      </div>
+      <div class="fact">
+        <span class="fact-label">Status reported</span>
+        <span class="fact-value">{{.Row.UpdatedAt.Format "2006-01-02 15:04:05"}} UTC</span>
+      </div>
+      {{/* The queue id is monospace because it is an identifier to compare
+           character by character against a log line, not a word to read. */}}
+      <div class="fact">
+        <span class="fact-label">Queue id</span>
+        <span class="fact-value mono">{{if .Row.QueueID}}{{.Row.QueueID}}{{else}}—{{end}}</span>
+      </div>
+      <div class="fact">
+        <span class="fact-label">Journal id</span>
+        <span class="fact-value mono">{{.Row.ID}}</span>
+      </div>
+    </div>
 
-  <label>From</label>
-  <span class="code">{{.Row.From}}</span>
+    {{if not .Row.QueueID}}
+    <p class="muted">A message with no queue id was refused before Postfix
+    queued it — under a level-2 rate limit — so it has no delivery attempt to
+    show.</p>
+    {{end}}
+  </div>
 
-  <label>To</label>
-  <span class="code">{{if .Row.To}}{{.Row.To}}{{else}}—{{end}}</span>
+  <div class="card" id="history">
+    <h2>History</h2>
+    <p class="muted">A row is written when the message is accepted and updated
+    once when Postfix reports the attempt for this recipient, so these are the
+    two moments the journal knows about — not a trace of the SMTP conversation,
+    which is in the delivery log below.</p>
 
-  <label>Subject</label>
-  <span class="code">{{if .Row.Subject}}{{.Row.Subject}}{{else}}—{{end}}</span>
-
-  <label>Status</label>
-  <span class="code">{{.Row.Status}}</span>
+    <ol class="timeline">
+      {{range .Events}}
+      <li class="event lvl-{{.Level}}{{if .At.IsZero}} pending{{end}}">
+        <p class="event-time">{{if .At.IsZero}}not yet{{else}}{{.At.Format "2006-01-02 15:04:05"}} UTC{{end}}</p>
+        <p class="event-title"><span class="st st-{{.Level}}">{{.Status}}</span> {{.Title}}</p>
+        <p class="event-detail muted">{{.Detail}}</p>
+      </li>
+      {{end}}
+    </ol>
+  </div>
 </div>
 
-<div class="card">
-  <h2>Origin</h2>
-  <p class="muted">Which sending domain and which application's SASL account the
-  message was submitted under — the two filters the delivery log offers.</p>
+{{/* Under both, at the column's full width: what Postfix itself wrote. The
+     queue id used to be printed on this page as something to go and search the
+     system log for by hand — this is that search, already done. */}}
+<div class="card" id="delivery-log">
+  <h2>Delivery log</h2>
+  <p class="muted">The lines Postfix wrote about this message in
+  <code>mail.log</code>, oldest first — the connection to the receiving server,
+  its reply, and the status that reply was filed as. Only lines carrying this
+  message's queue id are shown; the whole log is on the
+  <a href="/system-log">System log</a> page.</p>
 
-  <label>Domain</label>
-  <span class="code">{{if .Row.Domain}}{{.Row.Domain}}{{else}}—{{end}}</span>
-
-  <label>Application</label>
-  <span class="code">{{if .Row.AppLogin}}{{.Row.AppLogin}}{{else}}—{{end}}</span>
-</div>
-
-<div class="card">
-  <h2>Handling</h2>
-  <p class="muted">Postfix's own identifiers for this message. The queue id is
-  what to search the system log for; a rejected message never got one, because
-  it was refused before it was queued.</p>
-
-  <label>Queue id</label>
-  <span class="code">{{if .Row.QueueID}}{{.Row.QueueID}}{{else}}—{{end}}</span>
-
-  <label>Status last reported</label>
-  <span class="code">{{.Row.UpdatedAt.Format "2006-01-02 15:04:05"}} UTC</span>
-
-  <label>Journal id</label>
-  <span class="code">{{.Row.ID}}</span>
+  {{if .LogRows}}
+  {{/* Two columns, the way the send log itself is a table: the times down one
+       edge are what the message's pace is read off — the seconds between the
+       connection and the reply — and lining them up is what makes that
+       readable. A line whose head was not a timestamp keeps its whole text in
+       the second column and leaves the first empty. */}}
+  <table class="log">
+    <thead>
+      <tr><th>Time</th><th>Message</th></tr>
+    </thead>
+    <tbody>
+      {{range .LogRows}}
+      <tr>
+        <td class="time muted">{{if .Time}}{{.Time}}{{else}}—{{end}}</td>
+        <td class="log-text">{{.Text}}</td>
+      </tr>
+      {{end}}
+    </tbody>
+  </table>
+  {{else}}
+  <p class="muted">{{.LogNote}}</p>
+  {{end}}
 </div>
 {{end}}

internal/web/templates/domain_detail.html

@@ -299,7 +299,7 @@
   <p class="muted"><strong>The export file is a secret</strong> — it contains the
   private DKIM key and application passwords. Transfer it securely and delete it
   after the import, or encrypt it below and move a <code>.spde</code> file
-  instead; the import form asks for the password.</p>
+  (SelfPost domain export) instead; the import form asks for the password.</p>
   {{if .ExportErr}}<p class="error">{{.ExportErr}}</p>{{end}}
   <form method="post" action="/domains/{{.Domain.ID}}/export">
     {{template "encryptfields" .}}

internal/web/templates/encrypt_fields.html

@@ -1,9 +1,10 @@
 {{/* Password fields shared by the full-backup and domain-export forms. The
      checkbox is the switch: unticked, the download keeps its historic plain
      form (.tar.gz / .json); ticked, the file is sealed in a password-encrypted
-     envelope (.spbk / .spde). The fields start hidden and are revealed by
-     panel.js — with JavaScript blocked they are simply always visible, and the
-     server still decides from the checkbox alone. */}}
+     envelope (.spbk = SelfPost backup, .spde = SelfPost domain export). The
+     fields start hidden and are revealed by panel.js — with JavaScript blocked
+     they are simply always visible, and the server still decides from the
+     checkbox alone. */}}
 {{define "encryptfields"}}
 <div class="encrypt">
   <label class="check">

internal/web/templates/layout.html

@@ -69,8 +69,8 @@
   </div>
   {{template "sections" .}}
   <div class="session">
-    <span class="muted">{{.User}}</span>
-    {{if eq .Active "account"}}<span aria-current="page">{{template "icon-account"}}Account</span>{{else}}<a href="/account">{{template "icon-account"}}Account</a>{{end}}
+    <span class="muted">User: {{.User}}</span>
+    {{if eq .Active "account"}}<span aria-current="page">{{template "icon-account"}}Settings</span>{{else}}<a href="/account">{{template "icon-account"}}Settings</a>{{end}}
     <form class="inline" method="post" action="/logout">
       <button type="submit" class="danger">{{template "icon-sign-out"}}Sign out</button>
     </form>

internal/web/templates/mail_queue_body.html

@@ -1,5 +1,5 @@
 {{define "mail_queue_body"}}
-<div id="mail-queue-body" hx-get="/mail-queue/body" hx-trigger="every 5s" hx-swap="outerHTML">
+<div id="mail-queue-body" data-poll hx-get="/mail-queue/body" hx-trigger="load" hx-swap="outerHTML">
   {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
   <span class="code">{{if .Output}}{{.Output}}{{else}}Queue is empty.{{end}}</span>
 </div>

internal/web/templates/status.html

@@ -44,7 +44,7 @@
 
 {{/* The status page's section index, shown in the navigation column (see the
      "sections" block in layout.html). The first six cards are the ones the
-     polling fragment replaces every five seconds; their ids are part of
+     polling fragment replaces on a timer; their ids are part of
      status_body.html and do not change with the reading, so the links here hold
      across a refresh. */}}
 {{define "sections"}}

internal/web/templates/status_body.html

@@ -1,5 +1,5 @@
 {{define "status_body"}}
-<div id="status-body" hx-get="/status/fragment" hx-trigger="every 5s" hx-swap="outerHTML">
+<div id="status-body" data-poll hx-get="/status/fragment" hx-trigger="load" hx-swap="outerHTML">
   <div class="card" id="overall">
     <h2>Overall <span class="st st-{{.OverallStatus}}">{{.OverallStatus}}</span></h2>
     <p class="muted">{{.OverallHeading}}</p>

internal/web/templates/system_log_body.html

@@ -1,5 +1,5 @@
 {{define "system_log_body"}}
-<div id="system-log-body" hx-get="/system-log/body" hx-trigger="every 5s" hx-swap="outerHTML">
+<div id="system-log-body" data-poll hx-get="/system-log/body" hx-trigger="load" hx-swap="outerHTML">
   {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
   <span class="code">{{if .Lines}}{{range .Lines}}{{.}}
 {{end}}{{else}}No log lines yet.{{end}}</span>

internal/web/templates_test.go

@@ -225,7 +225,7 @@ func TestOnlyThePagesMadeOfDataDeclareThemselvesWide(t *testing.T) {
 	if err != nil {
 		t.Fatalf("loadTemplates: %v", err)
 	}
-	wide := map[string]bool{"deliveries": true, "mail_queue": true, "system_log": true}
+	wide := map[string]bool{"deliveries": true, "delivery": true, "mail_queue": true, "system_log": true}
 	for name, page := range tmpl.pages {
 		var buf bytes.Buffer
 		if err := page.ExecuteTemplate(&buf, "wide", nil); err != nil {
@@ -236,7 +236,7 @@ func TestOnlyThePagesMadeOfDataDeclareThemselvesWide(t *testing.T) {
 		case wide[name] && got != "wide":
 			t.Errorf("page %q no longer declares itself wide (%q); its data falls back to the reading measure", name, got)
 		case !wide[name] && got != "":
-			t.Errorf("page %q declares itself %q; only the pages that are tables of data or raw log lines take the whole column", name, got)
+			t.Errorf("page %q declares itself %q; only the pages that are tables of data, raw log lines or side-by-side cards take the whole column", name, got)
 		}
 	}
 }

internal/web/web.go

@@ -24,7 +24,7 @@ var assetsFS embed.FS
 // Config holds the panel's HTTP-facing configuration.
 type Config struct {
 	// Hostname is the server's external hostname, used to build the absolute
-	// setup link shown in the logs (security.md; README § Environment
+	// setup link shown in the logs (security.md; guide § Environment
 	// variables for SELFPOST_HOSTNAME).
 	Hostname string
 	// CookieSecure sets the Secure attribute on the session cookie. It defaults
@@ -53,7 +53,7 @@ type Config struct {
 	// honoured, so the header can't be spoofed by anyone but a trusted proxy.
 	// Empty (the default) keeps rate-limiting keyed on RemoteAddr only.
 	TrustedProxyCIDRs []*net.IPNet
-	// TLSCertFile is the certificate Postfix serves on 465/587 (README §
+	// TLSCertFile is the certificate Postfix serves on 465/587 (guide §
 	// Environment variables), read read-only by the status page to report how
 	// much validity is left.
 	TLSCertFile string
@@ -147,8 +147,9 @@ func (s *Server) Handler() http.Handler {
 	// Health check stays unauthenticated for the container/orchestrator.
 	mux.HandleFunc("/healthz", handleHealth)
 
-	// Vendored static assets (HTMX). Served from the embedded FS.
-	mux.Handle("/static/", http.FileServer(http.FS(assetsFS)))
+	// Vendored static assets (HTMX). Served from the embedded FS, with a
+	// content ETag so a replaced asset survives the browser cache (static.go).
+	mux.Handle("/static/", staticHandler())
 
 	// One-time administrator setup (security.md).
 	mux.HandleFunc("/setup/", s.handleSetup)