vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: unify pill/chip/badge shape into shared CSS

Browse source 
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
This commit is contained in:
iris 2026-08-12 17:38:07 +02:00 • committed by mara
commit 8dd6d05d6c
8 changed files with 66 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/packages/shared/src/pill.css
View file

@ -1,52 +1,39 @@
/* Shared pill/chip/badge shape — the "extract pill component" issue,
resolved as shared CSS rather than a JS component. Every inline
status/count chip across the dashboard + per-agent UI shares its
structural shape (border, radius, padding, font-size, letter-
spacing) from here instead of re-declaring the same values per
site; only the per-semantic COLOR (ok/fail/warn/…) stays local to
each page's own CSS — this file is shape only.
resolved as shared CSS rather than a JS component. `.hive-pill` and
`.hive-pill-sm` are the ONLY two classnames this file names — every
inline status/count chip across the dashboard + per-agent UI carries
one of them (added alongside its own semantic colour modifier class,
e.g. `class="hive-pill-sm badge-ok"`) instead of this file having to
enumerate every call site's own base classname. Per mara's review on
the first cut of this: naming every use here just relocates the
duplication rather than removing it — the fix is unifying the
classnames themselves, not fanning shared CSS out across old names.
Two size tiers, matching what was already organically in use rather
than inventing a third:
.hive-pill — primary state chips (agent status/state/header pills)
Two size tiers, matching what was already organically in use:
.hive-pill — primary state chips (agent status/state chips)
.hive-pill-sm — secondary meta chips (agent model/effort/ctx chips,
the dashboard's whole `.badge` family)
the dashboard's whole badge family)
Every pre-existing classname that drew its own copy of this shape
(`.status-badge`/`.state-badge`/`.header-pill`/`.ctx-badge`/
`.model-chip`/`.effort-chip`/`.badge`) is folded into the same
selector groups below, so no markup changes were needed anywhere to
pick this up — `display` stays per-site (inline-block for plain
text, inline-flex for header-pill's icon+label+count layout), since
that's a layout concern, not part of the pill's shape identity. */
`display: inline-block` is the default here since that covers every
plain-text chip; the one exception (the agent header's icon+label+
count flyout pills) overrides `display` locally to `inline-flex` —
layout mode isn't part of the shape these two classes exist to
share, so a single site overriding it is expected, not a gap. */
.hive-pill,
.hive-pill-sm,
.status-badge,
.state-badge,
.header-pill,
.ctx-badge,
.model-chip,
.effort-chip,
.badge {
.hive-pill-sm {
display: inline-block;
border: 1px solid;
border-radius: 999px;
}
.hive-pill,
.status-badge,
.state-badge,
.header-pill {
.hive-pill {
padding: 0.25em 0.8em;
font-size: 0.85em;
letter-spacing: 0.05em;
}
.hive-pill-sm,
.ctx-badge,
.model-chip,
.effort-chip,
.badge {
.hive-pill-sm {
padding: 0.1em 0.6em;
font-size: 0.78em;
letter-spacing: 0.04em;