From 0680f87d3db9d63ce62d6397d45c6aa21ec883c0 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 8 Jun 2026 22:32:17 +0200
Subject: [PATCH] refactor(frontend): migrate agent stat-window selector to
 createTabStrip (#1464 step 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the agent stats page's bespoke window-tab click handler with the
shared createTabStrip (@hive/shared/tabs.js). The selector is now
hash-routed — #1h / #24h / … become deep-linkable and survive
back/forward navigation.

- window buttons use data-tab (was data-w); the strip resolves them by
  that convention and toggles .hive-tab--active + aria-selected.
- onShow(w) sets currentWindow + reloads stats; the strip's initial show
  fires it once, so the explicit loadStats() in DOMContentLoaded is
  dropped (avoids a double fetch).
- the selector keeps its distinct pill look — agent.css now targets
  .window-tabs button.hive-tab--active (was .active), not the shared
  .hive-tab text-tab base. It's a pure data-selector with no panes;
  createTabStrip skips the absent [data-tab-pane] gracefully.

Behaviour-preserving; aria-selected is now standardised on the buttons.
---
 frontend/packages/agent/src/agent.css  |  5 ++++-
 frontend/packages/agent/src/stats.html | 14 +++++++-------
 frontend/packages/agent/src/stats.js   | 22 +++++++++-------------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css
index dde06fa6..8684cbad 100644
--- a/frontend/packages/agent/src/agent.css
+++ b/frontend/packages/agent/src/agent.css
@@ -1000,7 +1000,10 @@ pre.diff {
   font-family: inherit;
   cursor: pointer;
 }
-.window-tabs button.active {
+/* Active window: createTabStrip (@hive/shared/tabs.js) toggles
+   `.hive-tab--active`. The window selector keeps its own pill look rather
+   than the shared `.hive-tab` text-tab base. */
+.window-tabs button.hive-tab--active {
   background: var(--purple-dim);
   border-color: var(--purple);
   color: var(--purple);
diff --git a/frontend/packages/agent/src/stats.html b/frontend/packages/agent/src/stats.html
index 8ed0a608..adecbff1 100644
--- a/frontend/packages/agent/src/stats.html
+++ b/frontend/packages/agent/src/stats.html
@@ -17,13 +17,13 @@
     <h2 id="title">◆ … ◆</h2>
   </div>
 
-  <div class="window-tabs" id="window-tabs">
-    <button data-w="1h">last 1h</button>
-    <button data-w="4h">last 4h</button>
-    <button data-w="24h" class="active">last 24h</button>
-    <button data-w="3d">last 3d</button>
-    <button data-w="7d">last 7d</button>
-    <button data-w="30d">last 30d</button>
+  <div class="window-tabs" id="window-tabs" role="tablist">
+    <button type="button" data-tab="1h">last 1h</button>
+    <button type="button" data-tab="4h">last 4h</button>
+    <button type="button" data-tab="24h">last 24h</button>
+    <button type="button" data-tab="3d">last 3d</button>
+    <button type="button" data-tab="7d">last 7d</button>
+    <button type="button" data-tab="30d">last 30d</button>
   </div>
 
   <div class="summary" id="summary"></div>
diff --git a/frontend/packages/agent/src/stats.js b/frontend/packages/agent/src/stats.js
index b2560e26..93eeb897 100644
--- a/frontend/packages/agent/src/stats.js
+++ b/frontend/packages/agent/src/stats.js
@@ -3,6 +3,7 @@
 // when the operator clicks a window tab.
 
 import Chart from 'chart.js/auto';
+import { createTabStrip } from '@hive/shared/tabs.js';
 
 // Expose for the IIFE below — pre-split this was a window global from
 // the jsDelivr CDN script tag. esbuild now bundles chart.js into
@@ -413,20 +414,15 @@ window.Chart = Chart;
     } catch (_) { /* non-fatal */ }
   }
 
-  function bindTabs() {
-    const tabs = document.getElementById('window-tabs');
-    tabs.addEventListener('click', (ev) => {
-      const btn = ev.target.closest('button[data-w]');
-      if (!btn) return;
-      currentWindow = btn.dataset.w;
-      for (const b of tabs.querySelectorAll('button')) b.classList.toggle('active', b === btn);
-      loadStats();
-    });
-  }
-
   document.addEventListener('DOMContentLoaded', () => {
-    bindTabs();
     loadIdentity();
-    loadStats();
+    // The shared hash-routed tab strip drives the stat-window selector,
+    // making it deep-linkable (#1h / #24h / …). onShow updates the
+    // window + reloads; the strip's initial show fires onShow once, so
+    // there's no separate loadStats() call here (avoids a double fetch).
+    createTabStrip(document.getElementById('window-tabs'), {
+      defaultId: currentWindow,
+      onShow: (w) => { currentWindow = w; loadStats(); },
+    });
   });
 })();