fix(stats): move window selector into the page header tab bar

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)).
This commit is contained in:
iris 2026-07-26 17:21:21 +02:00
commit a58816d17e
2 changed files with 23 additions and 13 deletions

View file

@ -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);

View file

@ -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>