panel: denser Status layout with true two-column cards

Pair Machine|Processes, queue|cert, and sockets|hostname; fix .split
auto-margins so cards fill half the row; trim Status prose and machine
details; drop the page section index; note panel-docs on the roadmap.

Co-authored-by: Cursor <cursoragent@cursor.com>

internal/web/handlers/handlers_status.go

@@ -13,15 +13,11 @@ func (h *Handlers) HandleStatus(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	data := h.statusBody()
-	srv := h.dns.Server(h.cfg.Hostname, false)
-
 	data["Title"] = "SelfPost — status"
 	data["User"] = auth.CurrentUser(r)
 	data["Active"] = "status"
 	data["IsGlobal"] = true
 	data["Flash"] = statusFlash(r)
-	data["Hostname"] = h.cfg.Hostname
-	data["PTR"] = srv.PTR
 	h.view.Render(w, http.StatusOK, "status", data)
 }
 
@@ -68,6 +64,7 @@ func (h *Handlers) statusBody() map[string]any {
 	}
 
 	machine := h.machine.Sample()
+	srv := h.dns.Server(h.cfg.Hostname, false)
 
 	overall := health.Worst(procStatus, queueStatus, cert.Status, socketStatus, machine.Status)
 	return map[string]any{
@@ -81,6 +78,8 @@ func (h *Handlers) statusBody() map[string]any {
 		"Cert":           cert,
 		"Sockets":        sockets,
 		"SocketStatus":   socketStatus,
+		"Hostname":       h.cfg.Hostname,
+		"PTR":            srv.PTR,
 		"OverallStatus":  overall,
 		"OverallHeading": overallHeading(overall),
 	}

internal/web/view/static/panel.css

@@ -440,10 +440,10 @@ button.danger:hover, a.danger:hover { background: var(--danger-fill-hover); }
    a link's blue and Sign out's red all carry through without a rule apiece. */
 .nav .icon { width: 1rem; height: 1rem; flex: none; }
 /* The current page's own sections, listed under the page entries. The domain
-   page and the status page are eight and nine cards tall, and the only way to
-   the card you came for was to scroll past all the ones you did not. Only pages
-   that long carry an index — it comes from the page's own "sections" template
-   (see layout.html), so a page with two cards renders nothing here. */
+   page is long enough that the only way to the card you came for was to scroll
+   past all the ones you did not. Only pages that long carry an index — it comes
+   from the page's own "sections" template (see layout.html), so a page with
+   two cards or a short paired Status layout renders nothing here. */
 .sections {
   display: flex; flex-direction: column; gap: 0.1rem;
   padding-top: 0.75rem; border-top: 1px solid var(--border);
@@ -550,12 +550,21 @@ meter { width: 5rem; height: 0.7rem; vertical-align: middle; margin-right: 0.4re
   display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
   gap: 1.2rem; margin-top: 1.2rem;
 }
+/* Cards use margin: 0 auto so a lone card centres in the column. Inside the
+   grid those auto side margins absorb free space and shrink each card to its
+   content instead of filling the 1fr track — so cancel them here, and allow
+   the cell to shrink below the card's intrinsic minimum when the column is
+   tight. */
+.split > .card { margin-left: 0; margin-right: 0; min-width: 0; }
 /* 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; }
+/* Configuration sits outside the polled fragment; without this it would
+   touch the last .split inside #status-body (a nested .split is not a sibling). */
+#status-body + .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

internal/web/view/templates/status.html

@@ -1,5 +1,5 @@
-{{/* Wide enough for mail queue and TLS certificate side by side (see .split
-     in panel.css, as on account and delivery). */}}
+{{/* Wide so Machine|Processes and the other .split pairs fill the column
+     rather than the 48rem reading measure. */}}
 {{define "wide"}}wide{{end}}
 
 {{define "content"}}
@@ -9,30 +9,6 @@
 
 {{template "status_body" .}}
 
-<div class="card" id="hostname">
-  <h2>Hostname and reverse DNS <span class="st st-{{.PTR.Status}}">{{.PTR.Status}}</span></h2>
-  <p class="muted">Receiving servers check that the name this server announces
-  resolves to its address <em>and</em> that the address resolves back to the same
-  name (forward-confirmed reverse DNS). A missing or mismatched reverse record is
-  the most common reason self-hosted mail is rejected or scored as spam. The
-  reverse record is set at the hosting provider, not in the domain's DNS zone.</p>
-
-  <label>Server hostname</label>
-  <span class="code">{{if .Hostname}}{{.Hostname}}{{else}}(SELFPOST_HOSTNAME is not set){{end}}</span>
-
-  {{if .PTR.Records}}
-  <label>Forward and reverse lookup</label>
-  <span class="code">{{range .PTR.Records}}{{.}}
-{{end}}</span>
-  {{end}}
-
-  <p class="{{if eq .PTR.Status "ok"}}muted{{else}}error{{end}}">{{.PTR.Detail}}</p>
-
-  <form class="inline" method="post" action="/status/recheck">
-    <button type="submit">Re-check DNS</button>
-  </form>
-</div>
-
 <div class="card" id="configuration">
   <h2>Configuration</h2>
   <p class="muted">Regenerates the OpenDKIM and Postfix configuration from the
@@ -45,22 +21,3 @@
   </form>
 </div>
 {{end}}
-
-{{/* 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 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"}}
-<div class="sections">
-  <p class="sections-title">On this page</p>
-  <a href="#overall">Overall</a>
-  <a href="#processes">Processes</a>
-  <a href="#machine">Machine</a>
-  <a href="#queue">Mail queue</a>
-  <a href="#certificate">TLS certificate</a>
-  <a href="#sockets">Milter sockets</a>
-  <a href="#hostname">Hostname and reverse DNS</a>
-  <a href="#configuration">Configuration</a>
-</div>
-{{end}}

internal/web/view/templates/status_body.html

@@ -5,71 +5,69 @@
     <p class="muted">{{.OverallHeading}}</p>
   </div>
 
-  <div class="card" id="processes">
-    <h2>Processes <span class="st st-{{.ProcessStatus}}">{{.ProcessStatus}}</span></h2>
-    {{if .ProcessError}}
-    <p class="error">Could not ask supervisord for the process list.</p>
-    {{else}}
-    <table>
-      <thead><tr><th>Program</th><th>State</th><th>Detail</th></tr></thead>
-      <tbody>
-        {{range .Processes}}
-        <tr>
-          <td>{{.Name}}</td>
-          <td><span class="st st-{{.Status}}">{{.State}}</span></td>
-          <td class="muted">{{.Detail}}</td>
-        </tr>
-        {{end}}
-      </tbody>
-    </table>
-    {{end}}
-  </div>
+  <div class="split">
+    <div class="card" id="machine">
+      <h2>Machine <span class="st st-{{.Machine.Status}}">{{.Machine.Status}}</span></h2>
+      <table>
+        <thead><tr><th class="metric">Resource</th><th>Usage</th><th>Detail</th></tr></thead>
+        <tbody>
+          <tr>
+            <td class="metric">CPU</td>
+            <td class="metric">
+              {{if .Machine.CPU.Measured}}
+              <meter value="{{.Machine.CPU.Percent}}" min="0" max="100" low="70" high="90" optimum="10">{{.Machine.CPU.BusyText}}</meter>
+              {{.Machine.CPU.BusyText}}
+              {{else}}<span class="muted">—</span>{{end}}
+            </td>
+            <td class="muted">{{.Machine.CPU.Detail}}</td>
+          </tr>
+          <tr>
+            <td class="metric">Memory</td>
+            <td class="metric">
+              {{if .Machine.Memory.Measured}}
+              <meter value="{{.Machine.Memory.Percent}}" min="0" max="100" low="70" high="90" optimum="10">{{.Machine.Memory.PctText}}</meter>
+              {{.Machine.Memory.PctText}}
+              {{else}}<span class="muted">—</span>{{end}}
+            </td>
+            <td class="muted">{{.Machine.Memory.Detail}}</td>
+          </tr>
+          <tr>
+            <td class="metric">Network</td>
+            <td class="metric">
+              {{if .Machine.Network.Measured}}
+              ↓ {{.Machine.Network.InRateText}}<br>↑ {{.Machine.Network.OutRateText}}
+              {{else}}<span class="muted">—</span>{{end}}
+            </td>
+            <td class="muted">
+              {{range .Machine.Network.Interfaces}}
+              <div>{{.Name}}: {{.InText}} in, {{.OutText}} out</div>
+              {{end}}
+              {{if .Machine.Network.Detail}}<div>{{.Machine.Network.Detail}}</div>{{end}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-  <div class="card" id="machine">
-    <h2>Machine <span class="st st-{{.Machine.Status}}">{{.Machine.Status}}</span></h2>
-    <p class="muted">Processor, memory and network of the machine this container
-    runs on, read from the kernel's counters. CPU and throughput are rates, so
-    they describe{{if .Machine.WindowText}} the {{.Machine.WindowText}}{{end}}
-    since the previous refresh rather than this instant.</p>
-    <table>
-      <thead><tr><th class="metric">Resource</th><th>Usage</th><th>Detail</th></tr></thead>
-      <tbody>
-        <tr>
-          <td class="metric">CPU</td>
-          <td class="metric">
-            {{if .Machine.CPU.Measured}}
-            <meter value="{{.Machine.CPU.Percent}}" min="0" max="100" low="70" high="90" optimum="10">{{.Machine.CPU.BusyText}}</meter>
-            {{.Machine.CPU.BusyText}}
-            {{else}}<span class="muted">—</span>{{end}}
-          </td>
-          <td class="muted">{{.Machine.CPU.Detail}}</td>
-        </tr>
-        <tr>
-          <td class="metric">Memory</td>
-          <td class="metric">
-            {{if .Machine.Memory.Measured}}
-            <meter value="{{.Machine.Memory.Percent}}" min="0" max="100" low="70" high="90" optimum="10">{{.Machine.Memory.PctText}}</meter>
-            {{.Machine.Memory.PctText}}
-            {{else}}<span class="muted">—</span>{{end}}
-          </td>
-          <td class="muted">{{.Machine.Memory.Detail}}</td>
-        </tr>
-        <tr>
-          <td class="metric">Network</td>
-          <td class="metric">
-            {{if .Machine.Network.Measured}}
-            ↓ {{.Machine.Network.InRateText}}<br>↑ {{.Machine.Network.OutRateText}}
-            {{else}}<span class="muted">—</span>{{end}}
-          </td>
-          <td class="muted">
-            {{range .Machine.Network.Interfaces}}
-            <div>{{.Name}}: {{.InText}} in, {{.OutText}} out{{if .Measured}} (↓ {{.InRateText}} ↑ {{.OutRateText}}){{end}}</div>
-            {{end}}
-            {{if .Machine.Network.Detail}}<div>{{.Machine.Network.Detail}}</div>{{end}}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="card" id="processes">
+      <h2>Processes <span class="st st-{{.ProcessStatus}}">{{.ProcessStatus}}</span></h2>
+      {{if .ProcessError}}
+      <p class="error">Could not ask supervisord for the process list.</p>
+      {{else}}
+      <table>
+        <thead><tr><th>Program</th><th>State</th><th>Detail</th></tr></thead>
+        <tbody>
+          {{range .Processes}}
+          <tr>
+            <td>{{.Name}}</td>
+            <td><span class="st st-{{.Status}}">{{.State}}</span></td>
+            <td class="muted">{{.Detail}}</td>
+          </tr>
+          {{end}}
+        </tbody>
+      </table>
+      {{end}}
+    </div>
   </div>
 
   <div class="split">
@@ -79,14 +77,12 @@
       <p class="error">{{.QueueError}}</p>
       {{else}}
       <p>{{if .QueueSummary}}{{.QueueSummary}}{{else}}Mail queue is empty.{{end}}</p>
-      <a class="btn" href="/mail-queue">Full queue</a>
+      <a class="btn" href="/mail-queue">View queue</a>
       {{end}}
     </div>
 
     <div class="card" id="certificate">
       <h2>TLS certificate <span class="st st-{{.Cert.Status}}">{{.Cert.Status}}</span></h2>
-      <p class="muted">The certificate Postfix serves on port 465{{if .Cert.Subject}} ({{.Cert.Subject}}){{end}}.
-      It is supplied by the reverse proxy through a read-only mount; SelfPost only reads it.</p>
       {{if not .Cert.NotAfter.IsZero}}
       <label>Expires</label>
       <span class="code">{{.Cert.NotAfter.UTC.Format "2006-01-02 15:04 UTC"}}</span>
@@ -95,20 +91,39 @@
     </div>
   </div>
 
-  <div class="card" id="sockets">
-    <h2>Milter sockets <span class="st st-{{.SocketStatus}}">{{.SocketStatus}}</span></h2>
-    <table>
-      <thead><tr><th>Milter</th><th>Socket</th><th>State</th></tr></thead>
-      <tbody>
-        {{range .Sockets}}
-        <tr>
-          <td>{{.Name}}</td>
-          <td class="muted">{{.Path}}</td>
-          <td><span class="st st-{{.Status}}">{{.Status}}</span> {{.Detail}}</td>
-        </tr>
-        {{end}}
-      </tbody>
-    </table>
+  <div class="split">
+    <div class="card" id="sockets">
+      <h2>Milter sockets <span class="st st-{{.SocketStatus}}">{{.SocketStatus}}</span></h2>
+      <table>
+        <thead><tr><th>Milter</th><th>State</th><th>Detail</th></tr></thead>
+        <tbody>
+          {{range .Sockets}}
+          <tr>
+            <td>{{.Name}}</td>
+            <td><span class="st st-{{.Status}}">{{.Status}}</span></td>
+            <td class="muted">{{.Detail}}</td>
+          </tr>
+          {{end}}
+        </tbody>
+      </table>
+    </div>
+
+    <div class="card" id="hostname">
+      <h2>Hostname and reverse DNS <span class="st st-{{.PTR.Status}}">{{.PTR.Status}}</span></h2>
+
+      <label>Server hostname</label>
+      <span class="code">{{if .Hostname}}{{.Hostname}}{{else}}(SELFPOST_HOSTNAME is not set){{end}}</span>
+
+      {{if .PTR.Records}}
+      <label>Forward and reverse lookup</label>
+      <span class="code">{{range .PTR.Records}}{{.}}
+{{end}}</span>
+      {{end}}
+
+      <form class="inline" method="post" action="/status/recheck">
+        <button type="submit">Re-check DNS</button>
+      </form>
+    </div>
   </div>
 </div>
 {{end}}

internal/web/view/templates_test.go

@@ -41,9 +41,9 @@ func TestSectionIndexIsOnTheLongPagesOnly(t *testing.T) {
 	if err != nil {
 		t.Fatalf("New: %v", err)
 	}
-	// Anchors the index links to, taken from the page's own cards.
+	// Anchors the index links to, taken from the page's own cards. Status used
+	// to carry one too; the paired layout is short enough without it.
 	wantAnchors := map[string]string{
-		"status":        `href="#certificate"`,
 		"domain_detail": `href="#danger"`,
 	}
 	for name, page := range engine.Pages() {
@@ -72,9 +72,10 @@ func TestSectionLinksPointAtCardsThatExist(t *testing.T) {
 	if err != nil {
 		t.Fatalf("New: %v", err)
 	}
-	// The pages that carry an index; both are checked with a credential shown,
-	// which is the domain page's one conditional entry.
-	for _, name := range []string{"status", "domain_detail"} {
+	// The pages that carry an index; checked with a credential shown, which is
+	// the domain page's one conditional entry. Status dropped its index once
+	// the paired layout was short enough.
+	for _, name := range []string{"domain_detail"} {
 		var index bytes.Buffer
 		if err := engine.Page(name).ExecuteTemplate(&index, "sections", map[string]any{"NewCred": true}); err != nil {
 			t.Fatalf("execute sections for %q: %v", name, err)
@@ -379,20 +380,38 @@ func TestStatusPageRendersEveryCheck(t *testing.T) {
 		"opendkim", "FATAL", "Mail queue is empty", "mail.example.com",
 		"203.0.113.10 → no PTR record", `action="/reload"`,
 		`hx-get="/status/fragment"`, `class="st st-error"`,
-		// Queue and certificate sit abreast inside the polled fragment; their
-		// ids stay on the cards so the section index and scroll highlights hold.
-		`class="split"`, `id="queue"`, `id="certificate"`, `id="sockets"`,
+		// Three .split rows inside the polled fragment: machine|processes,
+		// queue|certificate, and sockets|hostname. Ids stay on the cards.
+		`id="processes"`, `id="machine"`, `id="queue"`, `id="certificate"`, `id="sockets"`, `id="hostname"`,
+		`action="/status/recheck"`,
 		// The machine card: the bars carry their reading in an attribute
 		// (the CSP rules out sizing them with a style), and the figures are
 		// printed beside them for anything that does not render a meter.
 		`<meter value="12"`, `<meter value="50"`,
-		"load average 0.31, 0.24, 0.19", "2.0 GiB used of 4.0 GiB",
+		"4 cores · 4 threads", "2.0 GiB used of 4.0 GiB",
 		"eth0: 1.0 MiB in, 512.0 KiB out",
 	} {
 		if !strings.Contains(out, want) {
 			t.Errorf("status page is missing %q", want)
 		}
 	}
+	if got := strings.Count(out, `class="split"`); got != 3 {
+		t.Errorf("status page has %d .split rows, want 3", got)
+	}
+	// Hostname must live inside the fragment so a poll refresh keeps it beside
+	// sockets; Configuration stays outside (static reload control).
+	body := strings.Index(out, `id="status-body"`)
+	conf := strings.Index(out, `id="configuration"`)
+	if body < 0 || conf < 0 || conf < body {
+		t.Fatal("status-body or configuration card missing or out of order")
+	}
+	frag := out[body:conf]
+	if !strings.Contains(frag, `id="hostname"`) {
+		t.Error("hostname card is outside the polled status-body fragment")
+	}
+	if strings.Contains(frag, `id="configuration"`) || strings.Contains(frag, `action="/reload"`) {
+		t.Error("configuration reload must stay outside the polled fragment")
+	}
 }
 
 // A machine whose counters could not be read — no /proc, or a first reading
@@ -456,13 +475,13 @@ func statusPageData() map[string]any {
 		},
 		"Machine": health.Machine{
 			CPU: health.CPU{
-				Measured: true, BusyPct: 12.4, Cores: 4,
+				Measured: true, BusyPct: 12.4, Cores: 4, Threads: 4,
 				Load: [3]float64{0.31, 0.24, 0.19}, HasLoad: true,
-				Status: health.StatusOK, Detail: "4 core(s) · load average 0.31, 0.24, 0.19",
+				Status: health.StatusOK, Detail: "4 cores · 4 threads",
 			},
 			Memory: health.Memory{
 				Measured: true, TotalBytes: 4 << 30, UsedBytes: 2 << 30, UsedPct: 50,
-				Status: health.StatusOK, Detail: "2.0 GiB used of 4.0 GiB; 2.0 GiB available to new work.",
+				Status: health.StatusOK, Detail: "2.0 GiB used of 4.0 GiB.",
 			},
 			Network: health.Network{
 				Measured: true, RxRate: 2048, TxRate: 1024,
@@ -475,7 +494,7 @@ func statusPageData() map[string]any {
 			Status: health.StatusOK,
 		},
 		"Sockets": []health.Socket{
-			{Name: "OpenDKIM", Path: "/run/opendkim/opendkim.sock", Present: true, Status: health.StatusOK, Detail: "Listening."},
+			{Name: "OpenDKIM", Path: "/run/opendkim/opendkim.sock", Present: true, Status: health.StatusOK, Detail: "Listening"},
 		},
 		"SocketStatus":   health.StatusOK,
 		"OverallStatus":  health.StatusError,