Fix Overview layout: stats panel, filter panel, then tables (in that order)

Placing the filter form outside the polled div (so the poll can't wipe out
typed/selected values) put it before the stat-grid, since both used to
live inside that same polled block — stats ended up after the filter
instead of before it, as it always was.

Splits the stat-grid out into its own #overview-stats div, positioned
before the filter form; the actual poll target is now #overview-tables
(just the two tables). Since #overview-stats no longer polls directly,
/overview/fragment now also renders it as an out-of-band swap alongside
the main #overview-tables response — the same hx-swap-oob idiom already
used for the shared error banner — so the stat counts still refresh every
tick even though they're outside the polled element.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

bin/SHA256SUMS

@@ -1,4 +1,4 @@
-1f0f7390b28778530f0d2a3b9d00371f5fd4abd4fa182b47d746ecc2f381aaac  control-api
-d4075822020e461b3e2adfa2752fb84356c3e922ba758dfb047e7c30e6abc51c  validator-agent
-abb55560d98b80ecceb31fa46f92140e1196a1c08812b066a4a759b51748a453  prober
-fbdb0fe69872bd4fd2d4ec0dcd25b453d7ee92ae4d12eee29d872c883a697eb7  admin-dashboard
+194bbd250ad93142eb1eb2d8990292327d48842f851f522ddb31f9ddfa8c554f  control-api
+43ca6b15a25e8534ae2d833e8d0575a85da036e17db370c797da613bb51a9c29  validator-agent
+bde443dd4fd335f9c3c64a2ca04d5db6c9a93fe2f45eb81b1d426581e380cee2  prober
+e74de9873e9da1ebfa6beeccd34b6fa7c15bf14c2d8efe13f4de7266af141702  admin-dashboard

internal/dashboard/handlers_overview.go

@@ -50,9 +50,19 @@ func (s *Server) handleOverview(w http.ResponseWriter, r *http.Request) {
 	s.renderPage(w, "overview_page", data)
 }
 
+// handleOverviewFragment serves both the recurring poll and every
+// filter-triggered request. Its hx-target is #overview-tables, but the
+// stat-grid (#overview-stats) needs to stay in sync too — it lives outside
+// #overview-tables in the DOM (see overview.html) so the filter form can
+// sit between them, so it's refreshed via an out-of-band swap appended
+// after the main content, the same idiom templates/layout.html's
+// error_banner already uses for the shared error banner.
 func (s *Server) handleOverviewFragment(w http.ResponseWriter, r *http.Request) {
 	data, err := s.loadOverview(r)
-	s.renderFragment(w, "overview_fragment", data, err)
+	s.renderFragment(w, "overview_tables", data, err)
+	if tplErr := s.tmpl.ExecuteTemplate(w, "overview_stats_oob", data); tplErr != nil {
+		s.Log.Error("render overview stats oob", "err", tplErr)
+	}
 }
 
 // currentlyChecking is every IP not yet in a terminal state, ordered by

internal/dashboard/handlers_test.go

@@ -36,11 +36,44 @@ func TestOverviewFragment(t *testing.T) {
 	}
 }
 
+// TestOverviewFragmentUpdatesStatsOutOfBand proves /overview/fragment keeps
+// refreshing the stat-grid even though #overview-stats lives outside the
+// polled #overview-tables div (see overview.html — the stat panel sits
+// above the filter form, which must survive polling, so it can't be part
+// of the swapped tables block). This guards the DOM layout fix: stats,
+// then a gap, then the filter panel, then everything else.
+func TestOverviewFragmentUpdatesStatsOutOfBand(t *testing.T) {
+	fake, caURL := newFakeControlAPI(t)
+	fake.validators = []validatorDTO{{ValidatorID: "v1", State: "idle"}}
+	fake.ips = []ipQueueItem{{IPAddress: "1.1.1.1", State: "queued"}}
+	ts := newTestServer(t, caURL)
+
+	body := get(t, ts, "/overview/fragment")
+	if !strings.Contains(body, `id="overview-stats" hx-swap-oob="true"`) {
+		t.Fatalf("expected an out-of-band update for #overview-stats, got:\n%s", body)
+	}
+	if !strings.Contains(body, "всего IP") {
+		t.Fatalf("expected the stat-grid labels in the OOB block, got:\n%s", body)
+	}
+
+	page := get(t, ts, "/overview")
+	statsIdx := strings.Index(page, `id="overview-stats"`)
+	filterIdx := strings.Index(page, `id="overview-filter"`)
+	tablesIdx := strings.Index(page, `id="overview-tables"`)
+	if statsIdx < 0 || filterIdx < 0 || tablesIdx < 0 {
+		t.Fatalf("expected all three sections present, got:\n%s", page)
+	}
+	if !(statsIdx < filterIdx && filterIdx < tablesIdx) {
+		t.Fatalf("expected DOM order stats -> filter -> tables, got indices stats=%d filter=%d tables=%d",
+			statsIdx, filterIdx, tablesIdx)
+	}
+}
+
 // TestOverviewFilterByQueryAndStatus proves the ?q=&status= params on both
 // /overview and /overview/fragment narrow the current-checking and
 // last-completed tables to matching rows only, and that the filter form
 // echoes the applied values back (so they survive the recurring poll,
-// which only re-renders overview_fragment, not the form around it).
+// which only re-renders #overview-tables, not the form around it).
 func TestOverviewFilterByQueryAndStatus(t *testing.T) {
 	fake, caURL := newFakeControlAPI(t)
 	now := time.Now()

internal/dashboard/templates/overview.html

@@ -24,20 +24,24 @@
 <h1>Обзор</h1>
 </div>
 
-<form id="overview-filter" class="panel" onsubmit="return false">
+<div id="overview-stats">
+{{template "overview_stats" .}}
+</div>
+
+<form id="overview-filter" class="panel" onsubmit="return false" style="margin-top:16px">
 <div class="panel-body field-row">
 <div class="field" style="flex:1 1 260px">
 <label for="overview-q">Поиск по IP</label>
 <input type="search" id="overview-q" name="q" value="{{.Query}}" placeholder="203.0.113.10"
-  hx-get="/overview/fragment" hx-target="#overview-live" hx-swap="innerHTML"
+  hx-get="/overview/fragment" hx-target="#overview-tables" hx-swap="innerHTML"
   hx-include="#overview-filter" hx-trigger="input changed delay:300ms"
-  hx-sync="#overview-live:queue last">
+  hx-sync="#overview-tables:queue last">
 </div>
 <div class="field">
 <label for="overview-status">Статус</label>
 <select id="overview-status" name="status"
-  hx-get="/overview/fragment" hx-target="#overview-live" hx-swap="innerHTML"
-  hx-include="#overview-filter" hx-trigger="change" hx-sync="#overview-live:queue last">
+  hx-get="/overview/fragment" hx-target="#overview-tables" hx-swap="innerHTML"
+  hx-include="#overview-filter" hx-trigger="change" hx-sync="#overview-tables:queue last">
 <option value="">Все</option>
 <option value="pass" {{if eq .StatusFilter "pass"}}selected{{end}}>pass</option>
 <option value="partial" {{if eq .StatusFilter "partial"}}selected{{end}}>partial</option>
@@ -51,8 +55,8 @@
 не показываются.</p>
 </form>
 
-<div id="overview-live" hx-get="/overview/fragment" hx-trigger="every {{.PollSeconds}}s"
-  hx-include="#overview-filter" hx-sync="#overview-live:queue last" hx-swap="innerHTML">
-{{template "overview_fragment" .}}
+<div id="overview-tables" hx-get="/overview/fragment" hx-trigger="every {{.PollSeconds}}s"
+  hx-include="#overview-filter" hx-sync="#overview-tables:queue last" hx-swap="innerHTML">
+{{template "overview_tables" .}}
 </div>
 {{end}}

internal/dashboard/templates/overview_fragment.html

@@ -1,4 +1,4 @@
-{{define "overview_fragment"}}
+{{define "overview_stats"}}
 <div class="stat-grid">
 <div class="stat-card accented"><span class="value">{{.Status.TotalIPs}}</span><span class="label">всего IP</span></div>
 <div class="stat-card"><span class="value">{{.Status.TotalValidators}}</span><span class="label">валидаторов</span></div>
@@ -6,7 +6,17 @@
 <div class="stat-card{{if eq $state "failed"}} bad{{else if eq $state "checking"}} accented{{end}}"><span class="value">{{$count}}</span><span class="label">{{$state}}</span></div>
 {{end}}
 </div>
+{{end}}
 
+{{/* Out-of-band counterpart of overview_stats, appended to every
+     /overview/fragment response alongside overview_tables (the actual
+     hx-target) — same OOB idiom as templates/layout.html's error_banner.
+     Needed because overview_stats lives outside the polled #overview-tables
+     div (see overview.html) so the DOM order can be stats -> filter form ->
+     tables, yet the stat counts still refresh on every poll tick. */}}
+{{define "overview_stats_oob"}}<div id="overview-stats" hx-swap-oob="true">{{template "overview_stats" .}}</div>{{end}}
+
+{{define "overview_tables"}}
 <h2 class="section-title">Текущая проверка</h2>
 {{if .CurrentItems}}
 <div class="panel">