From a58816d17e38a194727520298fe0ae30345add20 Mon Sep 17 00:00:00 2001
From: iris <iris@pr1ma.darkest.space>
Date: Sun, 26 Jul 2026 17:21:21 +0200
Subject: [PATCH] fix(stats): move window selector into the page header tab bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #2720 (partial — stats tab placement + contrast).

The time-window nav was in <main> below the page title, so it controlled
hash routing but wasn't visually part of the page chrome. Move it into
<header> (same row as ← home / ST4TS), fill the remaining header space,
and right-align the buttons — consistent with the /logs.html tabbar pattern.
Also set explicit color/border on inactive buttons so they remain readable
on lower-contrast operator colour schemes (var(--subtext1) fallback to
var(--muted)).
---
 frontend/packages/dashboard/src/stats.css  | 21 +++++++++++++++++----
 frontend/packages/dashboard/src/stats.html | 15 ++++++---------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/packages/dashboard/src/stats.css b/frontend/packages/dashboard/src/stats.css
index ab991375..e7c9f665 100644
--- a/frontend/packages/dashboard/src/stats.css
+++ b/frontend/packages/dashboard/src/stats.css
@@ -16,14 +16,27 @@ body.stats-shell {
   padding: 1.2em 1.5em 2em;
 }
 
-/* Window selector. Buttons keep the shared `.btn` pill look; the active
-   one is flagged by createTabStrip via `.hive-tab--active` (was a bespoke
-   `.active` toggle). */
+/* Window selector — now lives in the page-header (same row as ← home /
+   ST4TS title). Fills the remaining header space and right-aligns the
+   buttons. The shared `.btn` pill look is kept; createTabStrip flags the
+   active one with `.hive-tab--active`. */
 .hive-stats-windows {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  margin: 12px 0;
+  flex: 1;
+  min-width: 0;
+  justify-content: flex-end;
+  /* Smaller than the default .btn so the pills fit comfortably in the
+     header without competing visually with the page title. */
+  font-size: 0.82em;
+}
+/* Inactive buttons: slightly muted to distinguish from the active window,
+   but readable even on low-contrast operator colour schemes. */
+.hive-stats-windows .btn {
+  color: var(--subtext1, var(--muted));
+  border-color: var(--border);
+  font-size: 1em; /* relative to the .hive-stats-windows 0.82em */
 }
 .hive-stats-windows .btn.hive-tab--active {
   border-color: var(--amber);
diff --git a/frontend/packages/dashboard/src/stats.html b/frontend/packages/dashboard/src/stats.html
index 898e99b8..d90f66bb 100644
--- a/frontend/packages/dashboard/src/stats.html
+++ b/frontend/packages/dashboard/src/stats.html
@@ -18,15 +18,8 @@
   <header class="page-header">
     <a class="page-back" href="/">← home</a>
     <span class="page-title">ST4TS</span>
-  </header>
-
-  <main class="stats-main">
-    <p class="meta">hive-wide turn statistics, aggregated across every agent over the selected window. <strong>cost is a rough estimate</strong> from approximate per-model list prices — it drifts and is a ballpark, not a bill.</p>
-
-    <!-- Window selector — a hash-routed createTabStrip (#1h / #24h / …),
-         like the per-agent /stats page. Buttons keep the `.btn` pill
-         look; createTabStrip toggles `.hive-tab--active` and the page
-         re-fetches on change via onShow. -->
+    <!-- Window selector lives in the header so it behaves like a tab strip
+         (matches the pattern on /logs.html). Hash-routed via createTabStrip. -->
     <nav class="hive-stats-windows" id="hive-stats-windows" role="tablist">
       <button type="button" class="btn" data-tab="1h">1h</button>
       <button type="button" class="btn" data-tab="4h">4h</button>
@@ -36,6 +29,10 @@
       <button type="button" class="btn" data-tab="30d">30d</button>
       <button type="button" class="btn" data-tab="all">all</button>
     </nav>
+  </header>
+
+  <main class="stats-main">
+    <p class="meta">hive-wide turn statistics, aggregated across every agent over the selected window. <strong>cost is a rough estimate</strong> from approximate per-model list prices — it drifts and is a ballpark, not a bill.</p>
 
     <div class="hive-stats-chips" id="hive-stats-summary"></div>
     <h3>◇ busiest agents</h3>