refactor(frontend): migrate agent stat-window selector to createTabStrip (#1464 step 1)

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

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

frontend/packages/agent/src/stats.html

@@ -17,13 +17,13 @@
     <h2 id="title">◆ … ◆</h2>
   </div>
 
-  <div class="window-tabs" id="window-tabs">
+  <div class="window-tabs" id="window-tabs" role="tablist">
-    <button data-w="1h">last 1h</button>
+    <button type="button" data-tab="1h">last 1h</button>
-    <button data-w="4h">last 4h</button>
+    <button type="button" data-tab="4h">last 4h</button>
-    <button data-w="24h" class="active">last 24h</button>
+    <button type="button" data-tab="24h">last 24h</button>
-    <button data-w="3d">last 3d</button>
+    <button type="button" data-tab="3d">last 3d</button>
-    <button data-w="7d">last 7d</button>
+    <button type="button" data-tab="7d">last 7d</button>
-    <button data-w="30d">last 30d</button>
+    <button type="button" data-tab="30d">last 30d</button>
   </div>
 
   <div class="summary" id="summary"></div>

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(); },
+    });
   });
 })();