frontend: add <hive-tab-strip>, convert logs/credentials/core/builds tabbars

Every sub-page tabbar (logs.html, credentials.html, core.html,
builds.html) hand-wrote the same <nav class="hive-tabbar"><a
class="hive-tab">...</a></nav> boilerplate and then called
createTabStrip() on it after the fact. Add <hive-tab-strip>, a
markup-owning custom element (same reuse-boundary pattern as
<hive-menu>/<hive-side-panel>) that renders that markup from a
declarative tabs list, then wires the existing createTabStrip()
behaviour over what it just rendered — no behaviour duplication.

Convert all four sites to use it: each page's JS now calls
`.configure({ tabs, defaultId, onShow })` on the tabbar element instead
of `createTabStrip(el, opts)`, and configure() returns the identical
{ show, active } shape so nothing downstream changes. builds.js's
rebuild-queue count pill (builds-tab-count-rebuild) is expressed as a
tab's `badgeId` and renders nested in the same spot.

The dashboard's own tabbar and the two no-pane stats time-range
pickers are a different markup/behaviour shape and are intentionally
left alone.
This commit is contained in:
iris 2026-08-02 04:00:40 +02:00 committed by mara
commit 435ef193e1
10 changed files with 103 additions and 75 deletions

View file

@ -1,6 +1,6 @@
// BU1LDS page entry (/builds.html). The build lifecycle hub — rebuild
// queue, live build log, meta inputs, and build log history on one page.
// Three sub-tabs via the shared createTabStrip (default = Rebuild Queue):
// Three sub-tabs via <hive-tab-strip> (default = Rebuild Queue):
// - R3BU1LD QU3U3: pending + running rebuilds + live build log inline
// - M3T4 1NPUTS: nix flake input selector + meta-update trigger
// - BUILD L0GS: all-agents build log history (lazy-loaded on tab show)
@ -14,7 +14,7 @@ import { $, fmtAgeSecs, openStream, openBuildLogStream, initServerWarnings } fro
import { el } from '@hive/shared/dom.js';
import { bindAsyncForms } from '@hive/shared/forms.js';
import { fmtAgo, fmtElapsed, fmtDuration, truncate } from './util.js';
import { createTabStrip } from '@hive/shared/tabs.js';
import '@hive/shared/hive-tab-strip.js';
// ─── derived state ───────────────────────────────────────────────────────────
let metaInputsState = [];
@ -777,7 +777,12 @@ async function init() {
initServerWarnings();
bindAsyncForms(() => refreshState());
buildTabs = createTabStrip(document.getElementById('builds-tabbar'), {
buildTabs = document.getElementById('builds-tabbar').configure({
tabs: [
{ id: 'rebuild', label: 'R3BU1LD QU3U3', badgeId: 'builds-tab-count-rebuild' },
{ id: 'meta', label: 'M3T4 1NPUTS' },
{ id: 'buildlogs', label: 'BUILD L0GS' },
],
defaultId: 'rebuild',
onShow: (id) => {
if (id === 'buildlogs' && !buildLogsLoaded) {