panel-redesign: Overview, Health, Account and Server > Settings on the kit

Stage 2, step 2. Written by Sonnet, reviewed by Opus.

  - Four pages named after their mockups: overview, health, account,
    settings, each with a typed page struct (view/overview.go, health.go,
    account.go), a fixture and tests. The engine page "status" is gone
    (status.html, status_body.html deleted); "settings" is Server >
    Settings only. status and settings are off legacy_pages.txt.
  - Overview: the stamp and its sentence are derived from the six cards
    (the worst card sets the level and the lead names the cards that are
    not fine); the outbound and inbound domain tables are built from the
    existing service calls. Without the inbound relay the outbound box
    takes the full width.
  - Both pages refresh themselves as the old Status page did. Health
    polls its first row of boxes and swaps the second out of band.
    Overview polls its Server health box and the page head follows out of
    band (GET /overview/fragment), so stamp, sentence and time move with
    the cards.
  - Kit, attributes only (no class, no CSS, markup unchanged when empty):
    Box.Poll and Head.ID / Head.OOB.
  - healthCards: the Queue card says "Empty" / "N queued" instead of
    postqueue's line, which was clipped in a card; Processes and Milter
    sockets carry a sub line. OverallStatus / OverallHeading are gone.
  - Handlers pass typed data; routes, POST targets, field names,
    validation and authorization are unchanged.

States the mockups do not draw, all from existing partials: errors and
successes as the kit flash above the boxes; Health with an unreadable
process list, a certificate without facts, a missing host name; Account
with the report authorization not published / not found / not checked
and with hosted reports off; empty domain tables as empty_state.

Differences from the mockups, for the owner:
  - Overview title is one of "Everything is running normally." /
    "Running, with warnings." / "A component needs attention.", not
    "Mail is flowing..." (the checks do not prove that); the note says
    "Updated HH:MM:SS UTC" without an interval, Health's lead says
    "Refreshes automatically" (panel.js polls at 5 s active, 30 s idle);
  - one Queue card ("outbound"), two milter sockets: what this build has;
  - the days column is the stats window, min(30, retention);
  - Health: no "check port 80" paragraph (the certificate's own detail
    says what to check); a failing socket shows its detail under the path;
    figures come from the sampler ("12%", "MiB");
  - Account: the DMARC form keeps the address field for "Another
    address" (hidden unless chosen); the count "N of M now" is the
    domains following this user's default;
  - Settings: Level 2 links the domain list only;
  - /help#checks and /help#dmarc open Help at the top until the Help step.

Evidence
  - docs/assets/panel-redesign/evidence/overview.png, health.png,
    account.png, settings.png: 1440 px wide, full height, headless Edge,
    real templates served locally with their fixtures - NOT from the
    container (no Docker on this machine).
  - panel/audit.js on the four pages at 1440 and 1280: 612 texts
    checked, problems: [].
  - Polling was exercised in a browser against a local fixture server
    with document.hidden overridden (the pane was hidden): one element
    per id after a swap, no leftover hx-swap-oob, about one request per
    5 s. The first request of a visible tab was not observed.
  - go test -count=1 ./internal/web/...
      ok  internal/web
      ok  internal/web/auth
      ok  internal/web/handlers
      ok  internal/web/validate
      ok  internal/web/view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/view/health.go

@@ -0,0 +1,118 @@
+package view
+
+// The data of Server › Health (templates/health.html, mockup health.html):
+// every check behind the cards of Overview, as tables, and the home of the two
+// server actions, Re-check DNS and Reload configuration.
+//
+// Two rows of the page are polled (templates/health_body.html): the handler
+// builds the same Health for the page and for its fragment, and the fragment
+// carries Refresh so that its second row is swapped in out of band.
+
+// Health is the data of the Health page.
+type Health struct {
+	Meta
+	Head  Head
+	Flash *Flash
+	// Refresh is set on the polled fragment only. The fragment answers with two
+	// sibling rows; the first replaces the element that polls, and the second
+	// is marked to be swapped into place by its id.
+	Refresh bool
+
+	Machine     Box
+	MachineRows []MachineRow
+
+	Processes    Box
+	ProcessRows  []ProcessRow
+	ProcessError bool
+
+	Certificate Box
+	CertFacts   []Fact
+	CertDetail  string
+	CertProblem bool
+
+	Sockets       Box
+	SocketRows    []SocketRow
+	Hostname      Box
+	HostFacts     []Fact
+	Configuration Box
+	Reload        Action
+}
+
+// MachineRow is one line of the Machine table. A row that is a level (CPU,
+// memory) carries a Gauge; one that is a rate (network) carries Usage text; a
+// reading that could not be taken carries neither and shows a dash. Detail is
+// the supporting text, one line each.
+type MachineRow struct {
+	Resource string
+	Gauge    *Gauge
+	Usage    string
+	Detail   []string
+}
+
+// Gauge is a reading shown as a bar and its figure: Percent fills the bar, Text
+// is the figure printed beside it, and Level (ok, warn or fail) colours it.
+type Gauge struct {
+	Percent int
+	Text    string
+	Level   string
+}
+
+// Bar is the Bulma class that colours the gauge's progress bar.
+func (g Gauge) Bar() string {
+	switch g.Level {
+	case LevelFail:
+		return "is-danger"
+	case LevelWarn:
+		return "is-warning"
+	}
+	return "is-success"
+}
+
+// ProcessRow is one supervised program: its name, its state as a tag and what
+// supervisord said about it.
+type ProcessRow struct {
+	Name   string
+	State  Tag
+	Detail string
+}
+
+// SocketRow is one milter socket. Note qualifies the name ("inbound spam
+// filter"); Detail is shown only when the socket is not fine, since "Listening"
+// says nothing the tag does not.
+type SocketRow struct {
+	Name   string
+	Note   string
+	Path   string
+	State  Tag
+	Detail string
+}
+
+// NewHealth builds the page around its content. The handler fills the tables;
+// the boxes, the head and the reload action are the page's own.
+func NewHealth(m Meta, flash string) *Health {
+	m.Title, m.Section, m.Page = "Health", "server", "health"
+	h := &Health{
+		Meta: m,
+		Head: Head{
+			Kicker:  "Server",
+			Title:   "Health",
+			Lead:    Plain("Everything behind the cards on Overview. Refreshes automatically."),
+			Actions: []Action{{Label: "Re-check DNS", Icon: "ti-refresh", Post: "/server/health/recheck"}},
+		},
+		Machine:     Box{No: "01", Title: "Machine", ID: "machine"},
+		Processes:   Box{No: "02", Title: "Processes", ID: "processes"},
+		Certificate: Box{No: "03", Title: "TLS certificate", ID: "certificate"},
+		Sockets:     Box{No: "04", Title: "Milter sockets", ID: "sockets"},
+		Hostname:    Box{No: "05", Title: "Hostname and reverse DNS", ID: "hostname"},
+		Configuration: Box{No: "06", Title: "Configuration", ID: "configuration",
+			End: Plain("Safe to run at any time")},
+		Reload: Action{Label: "Reload configuration", Icon: "ti-reload", Post: "/server/health/reload"},
+	}
+	if flash != "" {
+		h.Flash = &Flash{Text: Plain(flash)}
+	}
+	return h
+}
+
+// Verdict puts a check's status in the end slot of its box, as the mockup does.
+func Verdict(status string) Text { return Text{TagOf(status, "")} }