Lege erste sichtbare Statusseite an

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

DEVELOPMENT.md

@@ -200,6 +200,7 @@ Ergaenzt seit dem ersten Geruest:
 - Backend bietet zusaetzlich eine kleine Uebersicht aller zuletzt meldenden Screens
 - Backend validiert den Statuspfad jetzt enger auf erlaubte Lifecycle-/Connectivity-Werte und leitet `stale` aus dem gemeldeten Intervall ab
 - Backend leitet im Read-Pfad zusaetzlich ein kompaktes `derived_state` fuer Diagnosekonsumenten ab
+- Backend liefert unter `/status` eine erste sichtbare HTML-Diagnoseseite auf Basis derselben Statusdaten
 - dateibasierte Agent-Konfiguration zusaetzlich zu Env-Overrides
 - strukturierte Agent-Logs mit internem Health-Snapshot und signalgesteuertem Shutdown
 - erster periodischer HTTP-Status-Reporter im Agent

docs/PLAYER-STATUS-HTTP.md

@@ -71,9 +71,13 @@ Bei ungueltigen Requests wird wie bei den anderen API-Endpunkten der gemeinsame
 
 Zusätzlich zur Write-Route gibt es in dieser Stufe:
 
+- `GET /status`
 - `GET /api/v1/screens/status`
 - `GET /api/v1/screens/{screenId}/status`
 
+`GET /status` liefert eine kleine serverseitig gerenderte HTML-Statusseite fuer den Browser.
+Sie nutzt dieselbe in-memory Statusuebersicht wie die JSON-Endpunkte und ist als erste sichtbare Diagnoseoberflaeche gedacht.
+
 `GET /api/v1/screens/status` liefert eine kleine Uebersicht aller bisher berichtenden Screens mit ihrem jeweils letzten bekannten Datensatz.
 Die Rueckgabe wird aktuell fuer Diagnosezwecke priorisiert sortiert: zuerst `offline`, dann `degraded`, dann `online`, innerhalb derselben Gruppe nach `screen_id`.
 Zusaetzlich enthaelt die Antwort eine `summary` mit kompakten Counts fuer `total`, `online`, `degraded`, `offline` und `stale`.

server/backend/internal/httpapi/playerstatus.go

@@ -1,13 +1,28 @@
 package httpapi
 
 import (
+	"errors"
 	"net/http"
+	"net/url"
 	"sort"
 	"strconv"
 	"strings"
 	"time"
 )
 
+type screenStatusSummary struct {
+	Total    int `json:"total"`
+	Online   int `json:"online"`
+	Degraded int `json:"degraded"`
+	Offline  int `json:"offline"`
+	Stale    int `json:"stale"`
+}
+
+type screenStatusOverview struct {
+	Summary screenStatusSummary  `json:"summary"`
+	Screens []playerStatusRecord `json:"screens"`
+}
+
 var allowedStatuses = map[string]struct{}{
 	"starting": {},
 	"running":  {},
@@ -130,70 +145,95 @@ func handleGetLatestPlayerStatus(store playerStatusStore) http.HandlerFunc {
 
 func handleListLatestPlayerStatuses(store playerStatusStore) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		records := store.List()
-		wantConnectivity := strings.TrimSpace(r.URL.Query().Get("server_connectivity"))
-		wantStale := strings.TrimSpace(r.URL.Query().Get("stale"))
-		updatedSince, err := parseOptionalRFC3339(r.URL.Query().Get("updated_since"))
+		overview, err := buildScreenStatusOverview(store, r.URL.Query())
 		if err != nil {
-			writeError(w, http.StatusBadRequest, "invalid_updated_since", "updated_since ist kein gueltiger RFC3339-Zeitstempel", nil)
+			writeOverviewQueryError(w, err)
 			return
 		}
-		limit, err := parseOptionalPositiveInt(r.URL.Query().Get("limit"))
-		if err != nil {
-			writeError(w, http.StatusBadRequest, "invalid_limit", "limit muss eine positive Ganzzahl sein", nil)
-			return
+
+		writeJSON(w, http.StatusOK, overview)
+	}
+}
+
+func buildScreenStatusOverview(store playerStatusStore, query url.Values) (screenStatusOverview, error) {
+	records := store.List()
+	wantConnectivity := strings.TrimSpace(query.Get("server_connectivity"))
+	wantStale := strings.TrimSpace(query.Get("stale"))
+	updatedSince, err := parseOptionalRFC3339(query.Get("updated_since"))
+	if err != nil {
+		return screenStatusOverview{}, errInvalidUpdatedSince
+	}
+	limit, err := parseOptionalPositiveInt(query.Get("limit"))
+	if err != nil {
+		return screenStatusOverview{}, errInvalidLimit
+	}
+
+	overview := screenStatusOverview{
+		Screens: make([]playerStatusRecord, 0, len(records)),
+	}
+
+	for i := range records {
+		records[i].Stale = isStale(records[i], store.Now())
+		records[i].DerivedState = deriveState(records[i])
+		overview.Summary.Total++
+		switch records[i].DerivedState {
+		case "offline":
+			overview.Summary.Offline++
+		case "degraded":
+			overview.Summary.Degraded++
+		default:
+			overview.Summary.Online++
 		}
-		filtered := make([]playerStatusRecord, 0, len(records))
-		summary := map[string]int{
-			"total":    0,
-			"online":   0,
-			"degraded": 0,
-			"offline":  0,
-			"stale":    0,
+		if records[i].Stale {
+			overview.Summary.Stale++
 		}
-		for i := range records {
-			records[i].Stale = isStale(records[i], store.Now())
-			records[i].DerivedState = deriveState(records[i])
-			summary["total"]++
-			summary[records[i].DerivedState]++
-			if records[i].Stale {
-				summary["stale"]++
-			}
-			if updatedSince != nil && !isUpdatedSince(records[i], *updatedSince) {
+		if updatedSince != nil && !isUpdatedSince(records[i], *updatedSince) {
+			continue
+		}
+		if wantConnectivity != "" && records[i].ServerConnectivity != wantConnectivity {
+			continue
+		}
+		if wantStale != "" {
+			if wantStale == "true" && !records[i].Stale {
 				continue
 			}
-			if wantConnectivity != "" && records[i].ServerConnectivity != wantConnectivity {
+			if wantStale == "false" && records[i].Stale {
 				continue
 			}
-			if wantStale != "" {
-				if wantStale == "true" && !records[i].Stale {
-					continue
-				}
-				if wantStale == "false" && records[i].Stale {
-					continue
-				}
-			}
-			filtered = append(filtered, records[i])
+		}
+		overview.Screens = append(overview.Screens, records[i])
+	}
+
+	sort.Slice(overview.Screens, func(i, j int) bool {
+		leftPriority := derivedStatePriority(overview.Screens[i].DerivedState)
+		rightPriority := derivedStatePriority(overview.Screens[j].DerivedState)
+		if leftPriority != rightPriority {
+			return leftPriority < rightPriority
 		}
 
-		sort.Slice(filtered, func(i, j int) bool {
-			leftPriority := derivedStatePriority(filtered[i].DerivedState)
-			rightPriority := derivedStatePriority(filtered[j].DerivedState)
-			if leftPriority != rightPriority {
-				return leftPriority < rightPriority
-			}
+		return overview.Screens[i].ScreenID < overview.Screens[j].ScreenID
+	})
 
-			return filtered[i].ScreenID < filtered[j].ScreenID
-		})
+	if limit > 0 && len(overview.Screens) > limit {
+		overview.Screens = overview.Screens[:limit]
+	}
 
-		if limit > 0 && len(filtered) > limit {
-			filtered = filtered[:limit]
-		}
+	return overview, nil
+}
 
-		writeJSON(w, http.StatusOK, map[string]any{
-			"summary": summary,
-			"screens": filtered,
-		})
+var (
+	errInvalidUpdatedSince = errors.New("invalid updated_since")
+	errInvalidLimit        = errors.New("invalid limit")
+)
+
+func writeOverviewQueryError(w http.ResponseWriter, err error) {
+	switch err {
+	case errInvalidUpdatedSince:
+		writeError(w, http.StatusBadRequest, "invalid_updated_since", "updated_since ist kein gueltiger RFC3339-Zeitstempel", nil)
+	case errInvalidLimit:
+		writeError(w, http.StatusBadRequest, "invalid_limit", "limit muss eine positive Ganzzahl sein", nil)
+	default:
+		writeError(w, http.StatusBadRequest, "invalid_query", "ungueltige Query-Parameter", nil)
 	}
 }
 

server/backend/internal/httpapi/router.go

@@ -14,6 +14,8 @@ func NewRouter(store playerStatusStore) http.Handler {
 		})
 	})
 
+	mux.HandleFunc("GET /status", handleStatusPage(store))
+
 	mux.HandleFunc("GET /api/v1", func(w http.ResponseWriter, _ *http.Request) {
 		writeJSON(w, http.StatusOK, map[string]any{
 			"name":    "morz-infoboard-backend",

server/backend/internal/httpapi/router_test.go

@@ -5,7 +5,9 @@ import (
 	"encoding/json"
 	"net/http"
 	"net/http/httptest"
+	"strings"
 	"testing"
+	"time"
 )
 
 func TestRouterHealthz(t *testing.T) {
@@ -173,3 +175,32 @@ func TestRouterScreenStatusListRoute(t *testing.T) {
 		t.Fatalf("status = %d, want %d", got, want)
 	}
 }
+
+func TestRouterStatusPageRoute(t *testing.T) {
+	store := newInMemoryPlayerStatusStore()
+	store.now = func() time.Time {
+		return time.Date(2026, 3, 22, 16, 10, 0, 0, time.UTC)
+	}
+	store.Save(playerStatusRecord{ScreenID: "screen-online", Timestamp: "2026-03-22T16:09:30Z", Status: "running", ServerConnectivity: "online", ReceivedAt: "2026-03-22T16:09:30Z", HeartbeatEverySeconds: 30})
+	store.Save(playerStatusRecord{ScreenID: "screen-offline", Timestamp: "2026-03-22T16:00:00Z", Status: "running", ServerConnectivity: "offline", ReceivedAt: "2026-03-22T16:00:00Z", HeartbeatEverySeconds: 30})
+
+	req := httptest.NewRequest(http.MethodGet, "/status", nil)
+	w := httptest.NewRecorder()
+
+	NewRouter(store).ServeHTTP(w, req)
+
+	if got, want := w.Code, http.StatusOK; got != want {
+		t.Fatalf("status = %d, want %d", got, want)
+	}
+
+	if got := w.Header().Get("Content-Type"); !strings.Contains(got, "text/html") {
+		t.Fatalf("Content-Type = %q, want text/html", got)
+	}
+
+	body := w.Body.String()
+	for _, want := range []string{"Screen Status", "2 screens", "screen-offline", "offline", "screen-online", "online"} {
+		if !strings.Contains(body, want) {
+			t.Fatalf("body missing %q", want)
+		}
+	}
+}

server/backend/internal/httpapi/statuspage.go

@@ -0,0 +1,365 @@
+package httpapi
+
+import (
+	"html/template"
+	"net/http"
+	"strings"
+	"time"
+)
+
+type statusPageData struct {
+	GeneratedAt string
+	Overview    screenStatusOverview
+}
+
+var statusPageTemplate = template.Must(template.New("status-page").Funcs(template.FuncMap{
+	"connectivityLabel": connectivityLabel,
+	"statusClass":       statusClass,
+	"timestampLabel":    timestampLabel,
+}).Parse(`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Screen Status</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f4efe7;
+      --surface: rgba(255, 252, 247, 0.94);
+      --surface-strong: #fffdf9;
+      --text: #1d2935;
+      --muted: #5d6b78;
+      --border: rgba(29, 41, 53, 0.12);
+      --online: #2f7d4a;
+      --degraded: #9a6a18;
+      --offline: #a43b32;
+      --shadow: 0 18px 40px rgba(63, 46, 26, 0.12);
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      font-family: Georgia, "Times New Roman", serif;
+      background:
+        radial-gradient(circle at top left, rgba(191, 148, 77, 0.18), transparent 30%),
+        linear-gradient(180deg, #f8f4ed 0%, var(--bg) 100%);
+      color: var(--text);
+    }
+
+    .page {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 32px 20px 48px;
+    }
+
+    .hero,
+    .panel {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 22px;
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(8px);
+    }
+
+    .hero {
+      padding: 28px;
+      margin-bottom: 20px;
+    }
+
+    h1,
+    h2 {
+      margin: 0;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+    }
+
+    h1 {
+      font-size: clamp(2rem, 4vw, 3.2rem);
+      margin-bottom: 10px;
+    }
+
+    h2 {
+      font-size: 1.2rem;
+      margin-bottom: 18px;
+    }
+
+    .lead,
+    .meta,
+    .empty,
+    td small {
+      color: var(--muted);
+    }
+
+    .lead {
+      margin: 0;
+      max-width: 46rem;
+      line-height: 1.5;
+    }
+
+    .hero-top {
+      display: flex;
+      gap: 16px;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      margin-bottom: 24px;
+    }
+
+    .hero-top .meta {
+      text-align: right;
+      min-width: 12rem;
+      font-size: 0.95rem;
+      line-height: 1.5;
+    }
+
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 12px;
+    }
+
+    .summary-card {
+      padding: 16px;
+      border-radius: 18px;
+      background: var(--surface-strong);
+      border: 1px solid var(--border);
+    }
+
+    .summary-card strong {
+      display: block;
+      font-size: 1.8rem;
+      margin-bottom: 4px;
+    }
+
+    .summary-card span {
+      color: var(--muted);
+      font-size: 0.95rem;
+    }
+
+    .summary-card.offline strong,
+    .state.offline,
+    .pill.offline { color: var(--offline); }
+    .summary-card.degraded strong,
+    .state.degraded,
+    .pill.degraded { color: var(--degraded); }
+    .summary-card.online strong,
+    .state.online,
+    .pill.online { color: var(--online); }
+
+    .panel {
+      padding: 24px;
+    }
+
+    .table-wrap {
+      overflow-x: auto;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 720px;
+    }
+
+    th,
+    td {
+      padding: 14px 0;
+      border-bottom: 1px solid var(--border);
+      text-align: left;
+      vertical-align: top;
+    }
+
+    th {
+      color: var(--muted);
+      font-size: 0.82rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    tbody tr:last-child td {
+      border-bottom: 0;
+    }
+
+    .screen {
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-radius: 999px;
+      border: 1px solid currentColor;
+      padding: 4px 10px;
+      font-size: 0.84rem;
+      text-transform: capitalize;
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    .empty {
+      padding: 10px 0 4px;
+      line-height: 1.5;
+    }
+
+    @media (max-width: 720px) {
+      .page {
+        padding: 20px 14px 32px;
+      }
+
+      .hero,
+      .panel {
+        border-radius: 18px;
+      }
+
+      .hero {
+        padding: 22px;
+      }
+
+      .panel {
+        padding: 18px;
+      }
+
+      .hero-top .meta {
+        text-align: left;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div class="hero-top">
+        <div>
+          <h1>Screen Status</h1>
+          <p class="lead">A compact browser view of the latest screen reports from the current in-memory status overview. Offline and degraded screens stay at the top for quick diagnostics.</p>
+        </div>
+        <div class="meta">
+          <div>{{.Overview.Summary.Total}} screens</div>
+          <div>Updated {{.GeneratedAt}}</div>
+        </div>
+      </div>
+
+      <div class="summary-grid">
+        <article class="summary-card">
+          <strong>{{.Overview.Summary.Total}}</strong>
+          <span>Total known screens</span>
+        </article>
+        <article class="summary-card offline">
+          <strong>{{.Overview.Summary.Offline}}</strong>
+          <span>Offline</span>
+        </article>
+        <article class="summary-card degraded">
+          <strong>{{.Overview.Summary.Degraded}}</strong>
+          <span>Degraded</span>
+        </article>
+        <article class="summary-card online">
+          <strong>{{.Overview.Summary.Online}}</strong>
+          <span>Online</span>
+        </article>
+        <article class="summary-card">
+          <strong>{{.Overview.Summary.Stale}}</strong>
+          <span>Stale reports</span>
+        </article>
+      </div>
+    </section>
+
+    <section class="panel">
+      <h2>Latest reports</h2>
+      {{if .Overview.Screens}}
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Screen</th>
+              <th>Derived state</th>
+              <th>Player status</th>
+              <th>Server link</th>
+              <th>Received</th>
+              <th>Heartbeat</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{range .Overview.Screens}}
+            <tr>
+              <td>
+                <div class="screen">{{.ScreenID}}</div>
+                {{if .MQTTBroker}}<small>{{.MQTTBroker}}</small>{{else if .ServerURL}}<small>{{.ServerURL}}</small>{{else}}<small>No endpoint details</small>{{end}}
+              </td>
+              <td><span class="pill {{statusClass .DerivedState}}">{{.DerivedState}}</span></td>
+              <td>
+                <div>{{.Status}}</div>
+                {{if .Stale}}<small>Marked stale by server freshness check</small>{{else}}<small>Fresh within expected heartbeat window</small>{{end}}
+              </td>
+              <td>
+                <span class="state {{statusClass .ServerConnectivity}}">{{connectivityLabel .ServerConnectivity}}</span>
+                {{if .ServerURL}}<small>{{.ServerURL}}</small>{{end}}
+              </td>
+              <td>
+                <div>{{timestampLabel .ReceivedAt}}</div>
+                {{if .LastHeartbeatAt}}<small>Heartbeat {{timestampLabel .LastHeartbeatAt}}</small>{{end}}
+              </td>
+              <td>
+                {{if gt .HeartbeatEverySeconds 0}}{{.HeartbeatEverySeconds}}s{{else}}-{{end}}
+                {{if .StartedAt}}<small>Started {{timestampLabel .StartedAt}}</small>{{end}}
+              </td>
+            </tr>
+            {{end}}
+          </tbody>
+        </table>
+      </div>
+      {{else}}
+      <p class="empty">No screen has reported status yet. Once a player posts to the existing status API, it will appear here automatically.</p>
+      {{end}}
+    </section>
+  </main>
+</body>
+</html>
+`))
+
+func handleStatusPage(store playerStatusStore) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		overview, err := buildScreenStatusOverview(store, r.URL.Query())
+		if err != nil {
+			writeOverviewQueryError(w, err)
+			return
+		}
+
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+		w.WriteHeader(http.StatusOK)
+
+		data := statusPageData{
+			GeneratedAt: store.Now().Format(time.RFC3339),
+			Overview:    overview,
+		}
+
+		if err := statusPageTemplate.Execute(w, data); err != nil {
+			http.Error(w, "failed to render status page", http.StatusInternalServerError)
+		}
+	}
+}
+
+func statusClass(value string) string {
+	trimmed := strings.TrimSpace(value)
+	if trimmed == "" {
+		return "degraded"
+	}
+	return trimmed
+}
+
+func connectivityLabel(value string) string {
+	trimmed := strings.TrimSpace(value)
+	if trimmed == "" {
+		return "unknown"
+	}
+	return trimmed
+}
+
+func timestampLabel(value string) string {
+	trimmed := strings.TrimSpace(value)
+	if trimmed == "" {
+		return "-"
+	}
+	return trimmed
+}