From 8dd6d05d6cc09aa47d6a83684a8aa8c999423f96 Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 12 Aug 2026 17:38:07 +0200 Subject: [PATCH] frontend: unify pill/chip/badge shape into shared CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per mara's steer on #3053 ("chip/pill/badge is the same if you squint ... theme unification is part of the goal" then "make it common css instead of component, thats fine. but make them look unified (not as much per usage css)"): shared CSS, not a JS component. New @hive/shared/pill.css defines two classes, `.hive-pill` (primary state chips) and `.hive-pill-sm` (secondary meta chips) — border/ border-radius/padding/font-size/letter-spacing (colour stays per-site, the meaningful semantic part). Every render call site across dashboard (swarm.js/core.js/builds.js) and agent (index.html/app.js) now carries one of the two shared classes directly, alongside its own existing semantic-colour modifier class. Second cut of this PR, per argus's approve + mara's follow-up review comment on the first cut: the first version instead enumerated every legacy classname (`.badge`, `.status-badge`, `.header-pill`, etc.) straight into pill.css's own selector groups so no call sites needed touching. Mara's correction: that just relocates the duplication rather than removing it, and the shared CSS shouldn't have to keep naming every consumer. This version does the real rename instead. Most visible consequence, unchanged from the first cut: dashboard's `.badge` family moves off its own shape (2px square corners, uppercase, tighter padding) onto the shared rounded-pill shape + agent's "sm" tier sizing. `npm run build` clean across all three packages; verified the compiled bundles carry the new classnames at every call site (dashboard JS, agent index.html + app.js), not just the source tree. Fixes #3053 --- frontend/packages/agent/src/agent.css | 28 +++++------ frontend/packages/agent/src/app.js | 4 +- frontend/packages/agent/src/index.html | 16 +++---- frontend/packages/dashboard/src/builds.js | 8 ++-- frontend/packages/dashboard/src/common.css | 12 ++--- frontend/packages/dashboard/src/core.js | 8 ++-- frontend/packages/dashboard/src/swarm.js | 18 +++---- frontend/packages/shared/src/pill.css | 55 +++++++++------------- 8 files changed, 66 insertions(+), 83 deletions(-) diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css index c9770ec5..9b96b530 100644 --- a/frontend/packages/agent/src/agent.css +++ b/frontend/packages/agent/src/agent.css @@ -304,9 +304,12 @@ h2, h3 { background: color-mix(in srgb, var(--purple) 6%, transparent); } -/* Header pill — inbox / loose-ends triggers. Compact, count-prominent. */ +/* Header pill — inbox / loose-ends triggers. Compact, count-prominent. + Markup carries `hive-pill` alongside `header-pill` (shared pill.css + supplies border/radius/padding/font-size/letter-spacing; `display` + is the one thing overridden here, to `inline-flex`, for the icon+ + label+count row layout — see pill.css's own note on that). */ .header-pill { - /* border/radius/padding/font-size/letter-spacing: shared pill.css */ background: transparent; border-color: var(--purple-dim); color: var(--fg); @@ -603,10 +606,10 @@ pre.diff { font-size: 0.8em; letter-spacing: 0.05em; } +/* Markup carries `hive-pill-sm` alongside each of these (shared + pill.css supplies the shape); rules below are colour only. */ .model-chip, .effort-chip { - /* border/radius/padding/font-size/letter-spacing: shared pill.css */ - display: inline-block; border-color: var(--purple-dim); } .model-chip { color: var(--cyan); } @@ -616,21 +619,15 @@ pre.diff { breakdown on hover. Sized/coloured like a peer of model-chip so the state row reads as one row of chrome. */ .ctx-badge { - /* border/radius/padding/font-size/letter-spacing: shared pill.css */ - display: inline-block; border-color: var(--purple-dim); color: var(--green); cursor: default; white-space: pre-line; } -/* Harness reachability badge. Same chip shape + sizing as - `.state-badge` / `.model-chip` so the state row stays visually - uniform; colour communicates the actual reachability state. */ -.status-badge { - /* border/radius/padding/font-size/letter-spacing: shared pill.css */ - display: inline-block; -} +/* Harness reachability badge. Markup carries `hive-pill` alongside + `status-badge` (shared pill.css supplies the shape); colour + communicates the actual reachability state. */ .status-badge.status-loading { color: var(--muted); border-color: var(--purple-dim); } .status-badge.status-online { color: var(--green); border-color: var(--green); text-shadow: 0 0 6px color-mix(in srgb, var(--green) 55%, transparent); } @@ -662,9 +659,10 @@ pre.diff { the overflow menu (`.overflow-item-new-session` covers it; the `:disabled` opacity treatment lives on the shared `.overflow-item:disabled` rule). */ +/* Markup carries `hive-pill` alongside `state-badge` (shared pill.css + supplies the shape); this rule is only the transition + state- + specific colour below. */ .state-badge { - /* border/radius/padding/font-size/letter-spacing: shared pill.css */ - display: inline-block; transition: color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, background 280ms ease; } diff --git a/frontend/packages/agent/src/app.js b/frontend/packages/agent/src/app.js index c80b7999..c8471a1b 100644 --- a/frontend/packages/agent/src/app.js +++ b/frontend/packages/agent/src/app.js @@ -793,7 +793,7 @@ window.marked = marked; const def = STATE_LABELS[stateName] || STATE_LABELS.loading; const age = fmtAge(Date.now() - stateSince); badge.textContent = def.glyph + ' ' + def.text + ' · ' + age; - badge.className = 'state-badge state-' + stateName; + badge.className = 'hive-pill state-badge state-' + stateName; badge.title = (STATE_TOOLTIPS[stateName] || '') + '\nin this state for ' + age; const cancelBtn = $('cancel-btn'); if (cancelBtn) cancelBtn.hidden = stateName !== 'thinking'; @@ -1057,7 +1057,7 @@ window.marked = marked; if (!el_) return; const def = ALIVE_LABELS[status] || ALIVE_LABELS.loading; el_.textContent = def.glyph + ' ' + def.text; - el_.className = 'status-badge ' + def.cls; + el_.className = 'hive-pill status-badge ' + def.cls; } function renderModelChip(model) { diff --git a/frontend/packages/agent/src/index.html b/frontend/packages/agent/src/index.html index 86686717..3bb75ad3 100644 --- a/frontend/packages/agent/src/index.html +++ b/frontend/packages/agent/src/index.html @@ -35,12 +35,12 @@
- … - … booting - - - - + … + … booting + + + +
@@ -52,13 +52,13 @@ it — see docs/web-ui.md::Per-agent page (Overflow button) for the rare-destructive-extra-click rationale. -->
- -