Mache Statusseite als Diagnoseansicht nutzbarer

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

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

DEVELOPMENT.md

@@ -200,7 +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
+- Backend liefert unter `/status` eine erste sichtbare HTML-Diagnoseseite auf Basis derselben Statusdaten, inklusive Auto-Refresh, leichten Filtern und JSON-Drill-down
 - 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

@@ -78,6 +78,14 @@ Zusätzlich zur Write-Route gibt es in dieser Stufe:
 `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.
 
+Die Seite bietet aktuell bewusst nur leichte Diagnosehilfen auf Basis des bestehenden Read-Pfads:
+
+- automatisches Refresh alle 15 Sekunden
+- Shortcut-Links fuer Connectivity- und Freshness-Filter wie `server_connectivity=offline|degraded` sowie `stale=true|false`
+- ein kleines Filterformular fuer dieselben Uebersichtsparameter wie im JSON-Read-Pfad
+- direkte JSON-Detail-Links pro Screen auf `GET /api/v1/screens/{screenId}/status`
+- einen Link zur aktuell gefilterten JSON-Uebersicht auf `GET /api/v1/screens/status`
+
 `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`.
@@ -90,6 +98,7 @@ Aktuell unterstuetzte Query-Parameter fuer die Uebersicht:
 - `limit=<positive integer>` zum Begrenzen der Anzahl zurueckgelieferter Screens
 
 Die Query-Parameter beeinflussen die Liste in `screens`; die `summary` beschreibt weiterhin den gesamten aktuell bekannten Statusbestand.
+Dieselben Parameter koennen aktuell sowohl an `GET /api/v1/screens/status` als auch an `GET /status` verwendet werden, damit Browser-Ansicht und JSON-Uebersicht dieselbe Diagnose-Sicht teilen.
 
 `GET /api/v1/screens/{screenId}/status` liefert den zuletzt akzeptierten Status fuer einen einzelnen Screen zurueck.
 Wenn fuer den Screen noch kein Status vorliegt, liefert das Backend `404` mit dem gemeinsamen Fehlerumschlag.

server/backend/internal/httpapi/router_test.go

@@ -184,7 +184,7 @@ func TestRouterStatusPageRoute(t *testing.T) {
 	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)
+	req := httptest.NewRequest(http.MethodGet, "/status?server_connectivity=offline&stale=true&updated_since=2026-03-22T15:55:00Z&limit=10", nil)
 	w := httptest.NewRecorder()
 
 	NewRouter(store).ServeHTTP(w, req)
@@ -198,7 +198,25 @@ func TestRouterStatusPageRoute(t *testing.T) {
 	}
 
 	body := w.Body.String()
-	for _, want := range []string{"Screen Status", "2 screens", "screen-offline", "offline", "screen-online", "online"} {
+	for _, want := range []string{
+		"Screen Status",
+		"2 screens",
+		"<meta http-equiv=\"refresh\" content=\"15\">",
+		"Connectivity offline",
+		"Connectivity degraded",
+		"Stale reports",
+		"Fresh reports",
+		"updated_since=2026-03-22T15%3A55%3A00Z",
+		"screen-offline",
+		"offline",
+		"/api/v1/screens/screen-offline/status",
+		"name=\"server_connectivity\"",
+		"name=\"stale\"",
+		"name=\"limit\"",
+		"server_connectivity=offline",
+		"stale=true",
+		"value=\"10\"",
+	} {
 		if !strings.Contains(body, want) {
 			t.Fatalf("body missing %q", want)
 		}

server/backend/internal/httpapi/statuspage.go

@@ -3,17 +3,38 @@ package httpapi
 import (
 	"html/template"
 	"net/http"
+	"net/url"
 	"strings"
 	"time"
 )
 
 type statusPageData struct {
 	GeneratedAt    string
+	RefreshSeconds int
+	Filters        statusPageFilters
+	QuickFilters   []statusFilterLink
 	Overview       screenStatusOverview
+	StatusAPIPath  string
+	StatusPagePath string
+}
+
+type statusPageFilters struct {
+	ServerConnectivity string
+	Stale              string
+	UpdatedSince       string
+	Limit              string
+}
+
+type statusFilterLink struct {
+	Label  string
+	Href   string
+	Class  string
+	Active bool
 }
 
 var statusPageTemplate = template.Must(template.New("status-page").Funcs(template.FuncMap{
 	"connectivityLabel": connectivityLabel,
+	"screenDetailPath":  screenDetailPath,
 	"statusClass":       statusClass,
 	"timestampLabel":    timestampLabel,
 }).Parse(`<!DOCTYPE html>
@@ -21,6 +42,7 @@ var statusPageTemplate = template.Must(template.New("status-page").Funcs(templat
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="refresh" content="{{.RefreshSeconds}}">
   <title>Screen Status</title>
   <style>
     :root {
@@ -152,6 +174,140 @@ var statusPageTemplate = template.Must(template.New("status-page").Funcs(templat
       padding: 24px;
     }
 
+    .panel + .panel {
+      margin-top: 18px;
+    }
+
+    .panel-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-bottom: 18px;
+    }
+
+    .panel-head h2 {
+      margin-bottom: 6px;
+    }
+
+    .panel-copy {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.5;
+    }
+
+    .meta-chip,
+    .filter-link,
+    .json-link,
+    .text-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      padding: 6px 12px;
+      color: inherit;
+      text-decoration: none;
+      background: rgba(255, 255, 255, 0.65);
+    }
+
+    .meta-chip {
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+
+    .controls-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+      gap: 18px;
+    }
+
+    .quick-filters {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      align-items: flex-start;
+    }
+
+    .filter-link.active {
+      border-color: rgba(29, 41, 53, 0.28);
+      background: var(--surface-strong);
+      color: var(--text);
+      box-shadow: inset 0 0 0 1px rgba(29, 41, 53, 0.05);
+    }
+
+    .filter-link.offline.active { color: var(--offline); }
+    .filter-link.degraded.active { color: var(--degraded); }
+    .filter-link.online.active { color: var(--online); }
+
+    .filter-form {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .field label {
+      color: var(--muted);
+      font-size: 0.82rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    .field input,
+    .field select {
+      width: 100%;
+      border-radius: 12px;
+      border: 1px solid var(--border);
+      background: var(--surface-strong);
+      color: var(--text);
+      padding: 10px 12px;
+      font: inherit;
+    }
+
+    .field.full {
+      grid-column: 1 / -1;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      align-items: center;
+      grid-column: 1 / -1;
+      padding-top: 4px;
+    }
+
+    button {
+      border: 0;
+      border-radius: 999px;
+      padding: 10px 16px;
+      background: var(--text);
+      color: #fffdf9;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .json-link,
+    .text-link {
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+
+    .table-actions {
+      margin-bottom: 16px;
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
     .table-wrap {
       overflow-x: auto;
     }
@@ -186,6 +342,13 @@ var statusPageTemplate = template.Must(template.New("status-page").Funcs(templat
       margin-bottom: 4px;
     }
 
+    .screen-links {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-top: 10px;
+    }
+
     .pill {
       display: inline-flex;
       align-items: center;
@@ -224,6 +387,11 @@ var statusPageTemplate = template.Must(template.New("status-page").Funcs(templat
       .hero-top .meta {
         text-align: left;
       }
+
+      .controls-grid,
+      .filter-form {
+        grid-template-columns: 1fr;
+      }
     }
   </style>
 </head>
@@ -266,7 +434,73 @@ var statusPageTemplate = template.Must(template.New("status-page").Funcs(templat
     </section>
 
     <section class="panel">
+      <div class="panel-head">
+        <div>
+          <h2>Filters and refresh</h2>
+          <p class="panel-copy">This page refreshes every {{.RefreshSeconds}} seconds. Use the shortcut links or the form to narrow the existing connectivity and freshness filters without leaving the lightweight server-rendered flow.</p>
+        </div>
+        <a class="meta-chip" href="{{.StatusAPIPath}}">JSON overview</a>
+      </div>
+
+      <div class="controls-grid">
+        <div>
+          <h2>Quick views</h2>
+          <div class="quick-filters">
+            {{range .QuickFilters}}
+            <a class="filter-link {{.Class}} {{if .Active}}active{{end}}" href="{{.Href}}">{{.Label}}</a>
+            {{end}}
+          </div>
+        </div>
+
+        <form class="filter-form" method="get" action="{{.StatusPagePath}}">
+          <div class="field">
+            <label for="server_connectivity">Server connectivity</label>
+            <select id="server_connectivity" name="server_connectivity">
+              <option value="" {{if eq .Filters.ServerConnectivity ""}}selected{{end}}>Any</option>
+              <option value="online" {{if eq .Filters.ServerConnectivity "online"}}selected{{end}}>Online</option>
+              <option value="degraded" {{if eq .Filters.ServerConnectivity "degraded"}}selected{{end}}>Degraded</option>
+              <option value="offline" {{if eq .Filters.ServerConnectivity "offline"}}selected{{end}}>Offline</option>
+              <option value="unknown" {{if eq .Filters.ServerConnectivity "unknown"}}selected{{end}}>Unknown</option>
+            </select>
+          </div>
+
+          <div class="field">
+            <label for="stale">Freshness</label>
+            <select id="stale" name="stale">
+              <option value="" {{if eq .Filters.Stale ""}}selected{{end}}>Any</option>
+              <option value="true" {{if eq .Filters.Stale "true"}}selected{{end}}>Stale only</option>
+              <option value="false" {{if eq .Filters.Stale "false"}}selected{{end}}>Fresh only</option>
+            </select>
+          </div>
+
+          <div class="field full">
+            <label for="updated_since">Updated since (RFC3339)</label>
+            <input id="updated_since" name="updated_since" type="text" placeholder="2026-03-22T16:05:00Z" value="{{.Filters.UpdatedSince}}">
+          </div>
+
+          <div class="field">
+            <label for="limit">Limit</label>
+            <input id="limit" name="limit" type="number" min="1" inputmode="numeric" value="{{.Filters.Limit}}">
+          </div>
+
+          <div class="form-actions">
+            <button type="submit">Apply filters</button>
+            <a class="text-link" href="{{.StatusPagePath}}">Clear</a>
+          </div>
+        </form>
+      </div>
+    </section>
+
+    <section class="panel">
+      <div class="panel-head">
+        <div>
           <h2>Latest reports</h2>
+          <p class="panel-copy">Each row links directly to the existing per-screen JSON detail endpoint for a quick drill-down into the raw status payload.</p>
+        </div>
+      </div>
+      <div class="table-actions">
+        <a class="text-link" href="{{.StatusAPIPath}}">Open filtered JSON overview</a>
+      </div>
       {{if .Overview.Screens}}
       <div class="table-wrap">
         <table>
@@ -286,6 +520,9 @@ var statusPageTemplate = template.Must(template.New("status-page").Funcs(templat
               <td>
                 <div class="screen">{{.ScreenID}}</div>
                 {{if .MQTTBroker}}<small>{{.MQTTBroker}}</small>{{else if .ServerURL}}<small>{{.ServerURL}}</small>{{else}}<small>No endpoint details</small>{{end}}
+                <div class="screen-links">
+                  <a class="json-link" href="{{screenDetailPath .ScreenID}}">JSON detail</a>
+                </div>
               </td>
               <td><span class="pill {{statusClass .DerivedState}}">{{.DerivedState}}</span></td>
               <td>
@@ -329,10 +566,7 @@ func handleStatusPage(store playerStatusStore) http.HandlerFunc {
 		w.Header().Set("Content-Type", "text/html; charset=utf-8")
 		w.WriteHeader(http.StatusOK)
 
-		data := statusPageData{
+		data := buildStatusPageData(store, r.URL.Query(), overview)
-			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)
@@ -340,6 +574,85 @@ func handleStatusPage(store playerStatusStore) http.HandlerFunc {
 	}
 }
 
+func buildStatusPageData(store playerStatusStore, query url.Values, overview screenStatusOverview) statusPageData {
+	filters := statusPageFilters{
+		ServerConnectivity: strings.TrimSpace(query.Get("server_connectivity")),
+		Stale:              strings.TrimSpace(query.Get("stale")),
+		UpdatedSince:       strings.TrimSpace(query.Get("updated_since")),
+		Limit:              strings.TrimSpace(query.Get("limit")),
+	}
+
+	return statusPageData{
+		GeneratedAt:    store.Now().Format(time.RFC3339),
+		RefreshSeconds: 15,
+		Filters:        filters,
+		QuickFilters:   buildStatusQuickFilters(filters),
+		Overview:       overview,
+		StatusAPIPath:  buildOverviewPath("/api/v1/screens/status", filters),
+		StatusPagePath: "/status",
+	}
+}
+
+func buildStatusQuickFilters(filters statusPageFilters) []statusFilterLink {
+	return []statusFilterLink{
+		{
+			Label:  "All screens",
+			Href:   buildStatusPageHref(statusPageFilters{Limit: filters.Limit, UpdatedSince: filters.UpdatedSince}),
+			Class:  "",
+			Active: filters.ServerConnectivity == "" && filters.Stale == "",
+		},
+		{
+			Label:  "Connectivity offline",
+			Href:   buildStatusPageHref(statusPageFilters{ServerConnectivity: "offline", Limit: filters.Limit, UpdatedSince: filters.UpdatedSince}),
+			Class:  "offline",
+			Active: filters.ServerConnectivity == "offline" && filters.Stale == "",
+		},
+		{
+			Label:  "Connectivity degraded",
+			Href:   buildStatusPageHref(statusPageFilters{ServerConnectivity: "degraded", Limit: filters.Limit, UpdatedSince: filters.UpdatedSince}),
+			Class:  "degraded",
+			Active: filters.ServerConnectivity == "degraded" && filters.Stale == "",
+		},
+		{
+			Label:  "Stale reports",
+			Href:   buildStatusPageHref(statusPageFilters{Stale: "true", Limit: filters.Limit, UpdatedSince: filters.UpdatedSince}),
+			Class:  "",
+			Active: filters.ServerConnectivity == "" && filters.Stale == "true",
+		},
+		{
+			Label:  "Fresh reports",
+			Href:   buildStatusPageHref(statusPageFilters{Stale: "false", Limit: filters.Limit, UpdatedSince: filters.UpdatedSince}),
+			Class:  "online",
+			Active: filters.ServerConnectivity == "" && filters.Stale == "false",
+		},
+	}
+}
+
+func buildStatusPageHref(filters statusPageFilters) string {
+	return buildOverviewPath("/status", filters)
+}
+
+func buildOverviewPath(basePath string, filters statusPageFilters) string {
+	query := url.Values{}
+	if filters.ServerConnectivity != "" {
+		query.Set("server_connectivity", filters.ServerConnectivity)
+	}
+	if filters.Stale != "" {
+		query.Set("stale", filters.Stale)
+	}
+	if filters.UpdatedSince != "" {
+		query.Set("updated_since", filters.UpdatedSince)
+	}
+	if filters.Limit != "" {
+		query.Set("limit", filters.Limit)
+	}
+	encoded := query.Encode()
+	if encoded == "" {
+		return basePath
+	}
+	return basePath + "?" + encoded
+}
+
 func statusClass(value string) string {
 	trimmed := strings.TrimSpace(value)
 	if trimmed == "" {
@@ -356,6 +669,10 @@ func connectivityLabel(value string) string {
 	return trimmed
 }
 
+func screenDetailPath(screenID string) string {
+	return "/api/v1/screens/" + url.PathEscape(strings.TrimSpace(screenID)) + "/status"
+}
+
 func timestampLabel(value string) string {
 	trimmed := strings.TrimSpace(value)
 	if trimmed == "" {