From 55ee52b213da2446cf4969f47e8ccc658f243485 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 8 Jun 2026 21:48:08 +0200
Subject: [PATCH 1/2] refactor(frontend): add shared tab-strip base styles
 (#1464 step 1 foundation)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First piece of the generic tabs component: @hive/shared/tabs.css carries
the base .hive-tabbar / .hive-tab / .hive-tab--active styles (lifted from
the logs sub-tab pattern, the most generic of the three tab UIs). Colours
use the semantic theme vars so it inherits theme-swap safety.

Not yet consumed — the createTabStrip JS helper + the per-call-site
migrations (logs, agent window-tabs, dashboard tabbar) follow. Count
pills + the dashboard's responsive overflow menu will layer on top in
the per-page CSS rather than the shared base.
---
 frontend/packages/shared/src/tabs.css | 37 +++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 frontend/packages/shared/src/tabs.css

diff --git a/frontend/packages/shared/src/tabs.css b/frontend/packages/shared/src/tabs.css
new file mode 100644
index 00000000..06e5417f
--- /dev/null
+++ b/frontend/packages/shared/src/tabs.css
@@ -0,0 +1,37 @@
+/* Shared tab-strip chrome — the generic tab/sub-tab styling used across
+   the dashboard tabbar, the logs sub-tabs, and the agent stat-window
+   selector. Behaviour lives in `@hive/shared/tabs.js` (createTabStrip).
+
+   Colours come from the semantic theme layer (theme.css → colors.css),
+   so this inherits theme-swap safety for free. Call sites keep a thin
+   variant class for size/spacing deltas; richer affordances (count
+   pills, the dashboard's responsive overflow ⋮ menu) layer on top in the
+   per-page CSS. See docs/web-ui/css-vars.md + #1464. */
+
+.hive-tabbar {
+  display: flex;
+  gap: 0.2em;
+}
+
+.hive-tab {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35em 0.9em;
+  border-radius: 4px;
+  color: var(--subtext0);
+  text-decoration: none;
+  font-size: 0.85em;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: background 100ms, color 100ms;
+}
+
+.hive-tab:hover {
+  background: var(--border);
+  color: var(--fg);
+}
+
+.hive-tab--active {
+  background: var(--border);
+  color: var(--purple);
+}

From e1c276a06ec2b4a5c0acd2f5b3784b83d670d183 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 8 Jun 2026 22:03:39 +0200
Subject: [PATCH 2/2] refactor(frontend): add createTabStrip + migrate logs
 sub-tabs (#1464 step 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds @hive/shared/tabs.js — createTabStrip(tabbar, {defaultId, onShow}):
a hash-routed tab strip that resolves controls by `[data-tab="<id>"]`
inside the passed container and panels by `[data-tab-pane="<id>"]`,
toggling `.hive-tab--active` + aria-selected + the panel's `hidden`, and
firing onShow(id) for per-tab side-effects. Always hash-routed (deep-
linkable + back/forward), no element-resolver callbacks (convention over
config), per the #1464 design review.

Wires it up: @hive/shared exports `./tabs.js` + `./tabs.css`, and
common.css @imports tabs.css (component structure, not a swap target, so
inlining is fine — unlike theme.css).

Migrates the logs sub-tabs as the first consumer: markup uses
`.hive-tab`/`data-tab`/`data-tab-pane`, logs.css drops the duplicated
base styles (keeps only its `flex:1` layout delta), and logs.js swaps its
activeTab/showTab/hashchange for createTabStrip (onShow lazy-loads the
SYSTEM tab). Behaviour-preserving. aria-selected is now standardised.
---
 frontend/packages/dashboard/src/common.css |  1 +
 frontend/packages/dashboard/src/logs.css   | 22 +------
 frontend/packages/dashboard/src/logs.html  | 20 +++---
 frontend/packages/dashboard/src/logs.js    | 45 +++++---------
 frontend/packages/shared/package.json      |  2 +
 frontend/packages/shared/src/tabs.css      |  2 +-
 frontend/packages/shared/src/tabs.js       | 71 ++++++++++++++++++++++
 7 files changed, 103 insertions(+), 60 deletions(-)
 create mode 100644 frontend/packages/shared/src/tabs.js

diff --git a/frontend/packages/dashboard/src/common.css b/frontend/packages/dashboard/src/common.css
index 73f35030..22c6fb37 100644
--- a/frontend/packages/dashboard/src/common.css
+++ b/frontend/packages/dashboard/src/common.css
@@ -2,6 +2,7 @@
    Bundled in front of the page-specific rules via esbuild. */
 @import "@hive/shared/base.css";
 @import "@hive/shared/terminal.css";
+@import "@hive/shared/tabs.css";
 
 /* ─── global typography ─────────────────────────────────────────────
    Element-level rules shared across all three pages (index, flow,
diff --git a/frontend/packages/dashboard/src/logs.css b/frontend/packages/dashboard/src/logs.css
index 8105be9c..ee797a8c 100644
--- a/frontend/packages/dashboard/src/logs.css
+++ b/frontend/packages/dashboard/src/logs.css
@@ -7,29 +7,13 @@ body.logs-shell {
   padding: 0;
 }
 
+/* Base tab styling now lives in @hive/shared/tabs.css (.hive-tab*). The
+   logs strip only adds a layout delta: fill the header row next to the
+   ← home back-link. */
 .logs-tabbar {
-  display: flex;
-  gap: 0.2em;
   flex: 1;
 }
 
-.logs-tab {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.35em 0.9em;
-  border-radius: 4px;
-  color: var(--subtext0);
-  text-decoration: none;
-  font-size: 0.85em;
-  letter-spacing: 0.05em;
-  transition: background 100ms, color 100ms;
-}
-.logs-tab:hover { background: var(--border); color: var(--fg); }
-.logs-tab.logs-tab-active {
-  background: var(--border);
-  color: var(--purple);
-}
-
 .logs-main {
   padding: 1.2em 1.5em 2em;
 }
diff --git a/frontend/packages/dashboard/src/logs.html b/frontend/packages/dashboard/src/logs.html
index 2f6af3dc..60f0eaba 100644
--- a/frontend/packages/dashboard/src/logs.html
+++ b/frontend/packages/dashboard/src/logs.html
@@ -17,17 +17,17 @@
        points to the H0M3 hub (served at /), not the dashboard. -->
   <header class="logs-header">
     <a class="logs-back" href="/">← home</a>
-    <nav class="logs-tabbar" id="logs-tabbar" role="tablist">
-      <a class="logs-tab" id="logs-tab-build" href="#build" role="tab"
-         aria-controls="logs-pane-build" data-logs-tab="build">
+    <nav class="hive-tabbar logs-tabbar" id="logs-tabbar" role="tablist">
+      <a class="hive-tab" id="logs-tab-build" href="#build" role="tab"
+         aria-controls="logs-pane-build" data-tab="build">
         <span class="logs-tab-label">BUILD</span>
       </a>
-      <a class="logs-tab" id="logs-tab-agent" href="#agent" role="tab"
-         aria-controls="logs-pane-agent" data-logs-tab="agent">
+      <a class="hive-tab" id="logs-tab-agent" href="#agent" role="tab"
+         aria-controls="logs-pane-agent" data-tab="agent">
         <span class="logs-tab-label">AGENT</span>
       </a>
-      <a class="logs-tab" id="logs-tab-system" href="#system" role="tab"
-         aria-controls="logs-pane-system" data-logs-tab="system">
+      <a class="hive-tab" id="logs-tab-system" href="#system" role="tab"
+         aria-controls="logs-pane-system" data-tab="system">
         <span class="logs-tab-label">SYSTEM</span>
       </a>
     </nav>
@@ -39,7 +39,7 @@
          nixos-container invocations across all agents, with
          click-to-expand full stdout+stderr. Backed by
          GET /api/build-logs?limit=30. -->
-    <section class="logs-pane" id="logs-pane-build"
+    <section class="logs-pane" id="logs-pane-build" data-tab-pane="build"
              role="tabpanel" aria-labelledby="logs-tab-build">
       <div class="logs-toolbar">
         <button type="button" class="btn btn-restart" id="build-refresh">↻ refresh</button>
@@ -50,7 +50,7 @@
     <!-- AGENT: journald viewer for a specific agent container.
          Agent selector + unit filter + line count. Backed by
          GET /api/journal/{agent}?unit=<unit>&lines=N. -->
-    <section class="logs-pane" id="logs-pane-agent"
+    <section class="logs-pane" id="logs-pane-agent" data-tab-pane="agent"
              role="tabpanel" aria-labelledby="logs-tab-agent">
       <div class="logs-toolbar">
         <select id="agent-select" class="journal-unit"></select>
@@ -66,7 +66,7 @@
 
     <!-- SYSTEM: host-side service logs. Shows the hive-c0re daemon
          journal via GET /api/journal-host?unit=hive-c0re.service. -->
-    <section class="logs-pane" id="logs-pane-system"
+    <section class="logs-pane" id="logs-pane-system" data-tab-pane="system"
              role="tabpanel" aria-labelledby="logs-tab-system">
       <div class="logs-toolbar">
         <select id="system-unit-select" class="journal-unit">
diff --git a/frontend/packages/dashboard/src/logs.js b/frontend/packages/dashboard/src/logs.js
index 56b7004a..56ddd793 100644
--- a/frontend/packages/dashboard/src/logs.js
+++ b/frontend/packages/dashboard/src/logs.js
@@ -22,37 +22,18 @@
 import {
   $, el, fmtAgeSecs, openStream, initServerWarnings,
 } from './common.js';
+import { createTabStrip } from '@hive/shared/tabs.js';
 
 (() => {
   initServerWarnings();
 
   // ─── tab routing ──────────────────────────────────────────────────────
-
-  const TABS = ['build', 'agent', 'system'];
-
-  function activeTab() {
-    const hash = location.hash.replace('#', '');
-    return TABS.includes(hash) ? hash : 'build';
-  }
-
-  function showTab(name) {
-    for (const t of TABS) {
-      const pane = document.getElementById('logs-pane-' + t);
-      const tab  = document.getElementById('logs-tab-' + t);
-      const active = t === name;
-      if (pane) pane.hidden = !active;
-      if (tab) {
-        tab.classList.toggle('logs-tab-active', active);
-        tab.setAttribute('aria-selected', String(active));
-      }
-    }
-  }
-
-  window.addEventListener('hashchange', () => {
-    const tab = activeTab();
-    showTab(tab);
-    if (tab === 'system') fetchSystem();
-  });
+  // The shared hash-routed tab strip (@hive/shared/tabs.js) handles the
+  // active toggle + aria-selected + pane visibility + the SYSTEM lazy
+  // fetch via onShow. Constructed in the init block below (after the
+  // fetch fns + element refs it depends on exist). `logTabs.active()`
+  // replaces the old `activeTab()`.
+  let logTabs;
 
   // ─── helpers ──────────────────────────────────────────────────────────
 
@@ -252,7 +233,7 @@ import {
   {
     let buildRefreshTimer = null;
     const debouncedRefreshBuild = () => {
-      if (activeTab() !== 'build') return;
+      if (logTabs.active() !== 'build') return;
       if (buildRefreshTimer) clearTimeout(buildRefreshTimer);
       buildRefreshTimer = setTimeout(fetchBuild, 2000);
     };
@@ -389,11 +370,15 @@ import {
 
   // ─── init ─────────────────────────────────────────────────────────────
 
-  const tab = activeTab();
-  showTab(tab);
+  // Wire the shared tab strip now that fetchSystem + the element refs it
+  // needs are defined. Its initial show() paints the active pane and, if
+  // the deep-linked tab is SYSTEM, kicks off the lazy fetch via onShow.
+  logTabs = createTabStrip(document.getElementById('logs-tabbar'), {
+    defaultId: 'build',
+    onShow: (id) => { if (id === 'system') fetchSystem(); },
+  });
   loadAgentList();
   fetchBuild();
-  if (tab === 'system') fetchSystem();
 
   // Tick the last-fetched timestamps every 30s so "fetched 1m ago" stays
   // accurate without a manual refresh.
diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
index 1d9a7a1b..b2e22f27 100644
--- a/frontend/packages/shared/package.json
+++ b/frontend/packages/shared/package.json
@@ -8,6 +8,8 @@
   "exports": {
     ".": "./src/index.js",
     "./terminal.js": "./src/terminal.js",
+    "./tabs.js": "./src/tabs.js",
+    "./tabs.css": "./src/tabs.css",
     "./colors.css": "./src/colors.css",
     "./theme.css": "./src/theme.css",
     "./base.css": "./src/base.css",
diff --git a/frontend/packages/shared/src/tabs.css b/frontend/packages/shared/src/tabs.css
index 06e5417f..7a63655e 100644
--- a/frontend/packages/shared/src/tabs.css
+++ b/frontend/packages/shared/src/tabs.css
@@ -6,7 +6,7 @@
    so this inherits theme-swap safety for free. Call sites keep a thin
    variant class for size/spacing deltas; richer affordances (count
    pills, the dashboard's responsive overflow ⋮ menu) layer on top in the
-   per-page CSS. See docs/web-ui/css-vars.md + #1464. */
+   per-page CSS. See docs/web-ui/css-vars.md. */
 
 .hive-tabbar {
   display: flex;
diff --git a/frontend/packages/shared/src/tabs.js b/frontend/packages/shared/src/tabs.js
new file mode 100644
index 00000000..5f1a0671
--- /dev/null
+++ b/frontend/packages/shared/src/tabs.js
@@ -0,0 +1,71 @@
+// Shared hash-routed tab strip — the generic behaviour behind the
+// dashboard tabbar, the logs sub-tabs, and the agent stat-window
+// selector. Pairs with `@hive/shared/tabs.css` (the .hive-tab* styles).
+//
+// Convention over configuration (no element-resolver callbacks):
+//   - Tab controls are the `[data-tab="<id>"]` elements inside the
+//     `tabbar` you pass in (any element — `<a>` or `<button>`; give
+//     them class `hive-tab`).
+//   - Panels are matched by `[data-tab-pane="<id>"]` anywhere in the
+//     document.
+//
+// Routing is always via `location.hash` so tabs are deep-linkable and
+// honour back/forward. A page may only host one strip (one hash); if a
+// second independent strip is ever needed we add a key prefix then.
+//
+// On show: toggles `.hive-tab--active` + `aria-selected` on each control
+// and `hidden` on each panel, then fires `onShow(id)` for per-tab
+// side-effects (lazy loads, etc.). See docs/web-ui/css-vars.md.
+
+/**
+ * @param {Element|null} tabbar  container holding the `[data-tab]` controls
+ * @param {{ defaultId?: string, onShow?: (id: string) => void }} [opts]
+ * @returns {{ show: (id: string) => void, active: () => string|null }}
+ */
+export function createTabStrip(tabbar, opts = {}) {
+  const { defaultId, onShow } = opts;
+  if (!tabbar) {
+    return { show() {}, active: () => null };
+  }
+  const tabs = Array.from(tabbar.querySelectorAll('[data-tab]'));
+  const ids = tabs.map((t) => t.getAttribute('data-tab'));
+  const fallback = defaultId && ids.includes(defaultId) ? defaultId : ids[0];
+
+  const paneFor = (id) => document.querySelector(`[data-tab-pane="${id}"]`);
+
+  const active = () => {
+    const hash = location.hash.replace(/^#/, '');
+    return ids.includes(hash) ? hash : fallback;
+  };
+
+  const show = (id) => {
+    const target = ids.includes(id) ? id : fallback;
+    for (const tab of tabs) {
+      const tid = tab.getAttribute('data-tab');
+      const on = tid === target;
+      tab.classList.toggle('hive-tab--active', on);
+      tab.setAttribute('aria-selected', String(on));
+      const pane = paneFor(tid);
+      if (pane) pane.hidden = !on;
+    }
+    if (typeof onShow === 'function') onShow(target);
+  };
+
+  // Drive every activation through the hash so deep-links + back/forward
+  // stay authoritative; the hashchange listener does the actual showing.
+  for (const tab of tabs) {
+    tab.addEventListener('click', (e) => {
+      e.preventDefault();
+      const id = tab.getAttribute('data-tab');
+      if (location.hash.replace(/^#/, '') === id) {
+        show(id); // same hash → no hashchange, re-show directly
+      } else {
+        location.hash = id;
+      }
+    });
+  }
+  window.addEventListener('hashchange', () => show(active()));
+
+  show(active()); // initial render from the current hash
+  return { show, active };
+}