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